/* ============================================================
   YOUR 27 ARCHETYPES
   ============================================================ */

:root {
    --y27-purple:      #7D5BA6;
    --y27-purple-dark: #6a4d8f;
    --y27-green:       #38a169;
    --y27-red:         #e53e3e;
    --y27-white:       #ffffff;
    --y27-gray-50:     #fafafa;
    --y27-gray-200:    #edf2f7;
    --y27-gray-300:    #e2e8f0;
    --y27-gray-400:    #cbd5e0;
    --y27-gray-500:    #a0aec0;
    --y27-gray-600:    #718096;
    --y27-gray-700:    #4a5568;
    --y27-gray-800:    #2d3748;
    --y27-radius:      8px;
}

.y27-wrap { max-width:860px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--y27-gray-800); }
.y27-heading { font-size:1.6em; font-weight:700; margin:0 0 24px; }
.y27-notice { background:var(--y27-gray-50); border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); padding:16px 20px; color:var(--y27-gray-700); margin-bottom:24px; }
.y27-notice-warning { border-color:#f6ad55; background:#fffaf0; color:#744210; }
.y27-notice a { color:#744210; }

.y27-btn { display:inline-block; padding:10px 18px; border-radius:var(--y27-radius); font-size:.9em; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:all .2s; white-space:nowrap; line-height:1; }
.y27-btn-primary { background:var(--y27-purple); color:var(--y27-white); }
.y27-btn-primary:hover:not(:disabled) { background:var(--y27-purple-dark); color:var(--y27-white); }
.y27-btn-primary:disabled { opacity:.65; cursor:not-allowed; }
.y27-btn-secondary { background:var(--y27-gray-200); color:var(--y27-gray-800); border:1px solid var(--y27-gray-400); }
.y27-btn-secondary:hover { background:var(--y27-gray-300); color:var(--y27-gray-800); border-color:var(--y27-gray-500); }

.y27-form-section { background:var(--y27-white); border:2px solid var(--y27-gray-200); border-radius:var(--y27-radius); padding:20px; margin-bottom:16px; }
.y27-section-heading { font-size:1em; font-weight:700; color:var(--y27-purple); margin:0 0 16px; }
.y27-form-group { margin-bottom:12px; }
.y27-form-group:last-child { margin-bottom:0; }
.y27-form-label { display:block; font-size:.78em; font-weight:700; color:var(--y27-gray-600); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.y27-input { width:100%; padding:10px 12px; border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); font-size:.95em; font-family:inherit; color:var(--y27-gray-800); background:var(--y27-white); box-sizing:border-box; transition:border-color .2s; }
.y27-input:focus { outline:none; border-color:var(--y27-purple); box-shadow:0 0 0 3px rgba(125,91,166,.1); }
.y27-field-hint { font-size:.82em; color:var(--y27-gray-500); margin:6px 0 0; line-height:1.5; }
.y27-form-actions { display:flex; align-items:center; gap:14px; margin-top:8px; }
.y27-form-feedback { font-size:.88em; }
.y27-feedback-error { color:var(--y27-red); }
.y27-feedback-success { color:var(--y27-green); font-weight:600; }

.y27-quiz-url-box { background:var(--y27-gray-50); border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); padding:16px 20px; margin-bottom:24px; }
.y27-url-label { font-size:.8em; font-weight:700; color:var(--y27-gray-600); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; }
.y27-url-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.y27-url-input { flex:1; min-width:200px; padding:9px 12px; border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); font-size:.9em; font-family:monospace; color:var(--y27-purple); background:var(--y27-white); box-sizing:border-box; }

.y27-progress { font-size:.9em; color:var(--y27-gray-600); margin-bottom:20px; font-weight:600; }
.y27-arch-block { border:2px solid var(--y27-gray-200); border-radius:var(--y27-radius); margin-bottom:8px; overflow:hidden; }
.y27-arch-block.is-saved { border-color:#c6f6d5; }
.y27-arch-row { display:flex; align-items:center; gap:12px; padding:12px 16px; flex-wrap:wrap; }
.is-saved .y27-arch-row { background:#f0fff4; }
.not-saved .y27-arch-row { background:var(--y27-gray-50); }
.y27-arch-label { font-size:.82em; font-weight:700; color:var(--y27-purple); background:#f3eeff; padding:3px 10px; border-radius:4px; white-space:nowrap; min-width:90px; text-align:center; }
.y27-arch-name { flex:1; font-weight:600; font-size:.95em; color:var(--y27-gray-800); }
.y27-arch-badge { font-size:.72em; font-weight:700; color:var(--y27-green); background:#c6f6d5; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.y27-arch-empty { flex:1; color:var(--y27-gray-500); font-style:italic; font-size:.9em; }
.y27-arch-editor { padding:20px; border-top:2px solid var(--y27-gray-200); background:var(--y27-white); }
.y27-arch-editor-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; font-weight:700; color:var(--y27-gray-800); }
.y27-editing-note { font-size:.82em; color:var(--y27-gray-500); font-style:italic; font-weight:400; }
.y27-arch-editor-actions { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.y27-arch-feedback { font-size:.88em; }

.y27-quiz-intro { font-size:1.15em; font-weight:600; color:var(--y27-gray-800); margin-bottom:20px; line-height:1.5; text-align:center; }
.y27-quiz-owner { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px; }
.y27-owner-avatar { width:96px; height:96px; border-radius:50%; overflow:hidden; border:3px solid var(--y27-gray-200); flex-shrink:0; }
.y27-avatar-img { width:96px; height:96px; border-radius:50%; display:block; object-fit:cover; }
.y27-owner-name { font-size:.95em; font-weight:600; color:var(--y27-gray-700); margin:0; text-align:center; }
.y27-quiz-for { font-size:.82em; color:var(--y27-gray-600); background:var(--y27-gray-200); border:1px solid var(--y27-gray-300); border-radius:20px; padding:4px 14px; margin:0; text-align:center; line-height:1.5; }
.y27-step-indicator { font-size:.82em; font-weight:700; color:var(--y27-gray-500); text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; }
.y27-quiz-question { background:var(--y27-white); border:2px solid var(--y27-gray-200); border-radius:var(--y27-radius); padding:20px; margin-bottom:16px; }
.y27-question-text { font-size:1.05em; font-weight:600; color:var(--y27-gray-800); margin:0 0 16px; line-height:1.5; }
.y27-answers { display:flex; flex-direction:column; gap:10px; }
.y27-answer-label { display:flex; align-items:center; gap:10px; padding:10px 14px; border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); cursor:pointer; transition:all .2s; font-size:.95em; color:var(--y27-gray-700); }
.y27-answer-label:hover { border-color:var(--y27-purple); background:#faf5ff; }
.y27-answer-label input[type="radio"] { accent-color:var(--y27-purple); width:18px; height:18px; flex-shrink:0; }
.y27-answer-label:has(input:checked) { border-color:var(--y27-purple); background:#f3eeff; color:var(--y27-purple-dark); font-weight:600; }
.y27-quiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
.y27-error { color:var(--y27-red); font-size:.9em; margin-top:10px; }
#y27Result { background:var(--y27-white); border:2px solid var(--y27-gray-200); border-radius:var(--y27-radius); padding:30px; }
.y27-result-name { font-size:1.5em; font-weight:700; color:var(--y27-purple); margin:0 0 20px; }
.y27-result-content { font-size:.95em; color:var(--y27-gray-700); line-height:1.7; margin-bottom:24px; }
.y27-result-content p { margin-bottom:1em; }
.y27-result-content h2,.y27-result-content h3 { color:var(--y27-gray-800); margin-bottom:.5em; }
.y27-result-blocks { margin-top:24px; }
.y27-result-block { margin-bottom:16px; }

.y27-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:99999; padding:20px; box-sizing:border-box; }
.y27-modal { background:var(--y27-white); border-radius:var(--y27-radius); box-shadow:0 20px 60px rgba(0,0,0,.3); width:100%; max-width:680px; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; }
.y27-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:2px solid var(--y27-gray-200); flex-shrink:0; }
.y27-modal-title { margin:0; font-size:1.1em; font-weight:700; color:var(--y27-purple); }
.y27-modal-close { background:none; border:none; font-size:1.4em; cursor:pointer; color:var(--y27-gray-500); line-height:1; padding:0 4px; }
.y27-modal-close:hover { color:var(--y27-gray-800); }
.y27-modal-body { padding:20px; overflow-y:auto; font-size:.95em; color:var(--y27-gray-700); line-height:1.7; }
.y27-modal-body p { margin-bottom:1em; }
.y27-modal-body h2,.y27-modal-body h3 { color:var(--y27-gray-800); margin-bottom:.5em; }

@media (max-width:600px) {
    .y27-arch-row,.y27-url-row,.y27-form-actions,.y27-arch-editor-actions { flex-direction:column; align-items:flex-start; }
    .y27-url-input { width:100%; }
}

/* ============================================================
   PUBLISH STATUS — quiz setup page
   ============================================================ */
.y27-publish-status {
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.y27-status-published {
    background: #d4edda;
    border: 2px solid #c3e6cb;
}

.y27-status-published .y27-status-label { color: #155724; margin: 0; flex: 1; }

.y27-status-unpublished {
    background: #fff3cd;
    border: 2px solid #ffeaa7;
}

.y27-status-unpublished .y27-status-label { color: #856404; margin: 0; flex: 1; }
.y27-status-unpublished .y27-field-hint   { width: 100%; margin: 0; color: #856404; font-size: 13px; }

/* ============================================================
   QUIZ FILTER — [y27_quiz_filter] shortcode
   Mobile-first. Dark theme. yqf- prefix throughout.
   ============================================================ */
.y27-quiz-filter {
    max-width: 1200px;
    margin: 0.5rem auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #000;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Filter bar */
.yqf-filter-bar {
    background: #111;
    padding: 0.75rem;
    border-bottom: 2px solid #7D5BA6;
}

/* Row 1: search + creator */
.y27-quiz-filter .yqf-row-search-creator {
    display: flex !important;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.y27-quiz-filter .yqf-row-search-creator .yqf-search-box {
    flex: 1 1 auto !important;
    display: flex !important;
    gap: 0.25rem;
    min-width: 0;
}

.y27-quiz-filter .yqf-row-search-creator .yqf-filter-item {
    flex: 0 0 200px !important;
    width: 200px !important;
}

/* Row 2: quiz_for full width */
.y27-quiz-filter .yqf-row-quiz-for {
    display: block !important;
    margin-bottom: 0.75rem;
}

.y27-quiz-filter .yqf-row-quiz-for select {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box;
}

/* Row 3: sort + date range + apply + reset */
.y27-quiz-filter .yqf-row-sort-actions {
    display: flex !important;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.y27-quiz-filter .yqf-row-sort-actions .yqf-filter-item {
    flex: 0 0 auto !important;
}

.yqf-search-input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    font-size: 0.85rem;
    min-width: 0;
}

.yqf-search-input:focus {
    outline: none;
    border-color: #7D5BA6;
    box-shadow: 0 0 0 1px rgba(125, 91, 166, 0.3);
}

.yqf-search-btn {
    padding: 0.6rem 0.8rem;
    background: #B39DD9;
    color: #000;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yqf-search-btn:hover { background: #7D5BA6; }

.yqf-filter-item { display: flex; flex-direction: column; gap: 0.4rem; }

.yqf-filter-item label {
    font-size: 0.8rem;
    color: #B39DD9;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.yqf-filter-item select {
    padding: 0.6rem 0.5rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    font-size: 0.8rem;
}

.yqf-filter-item select:focus {
    outline: none;
    border-color: #7D5BA6;
    box-shadow: 0 0 0 1px rgba(125, 91, 166, 0.3);
}


.yqf-apply-btn {
    padding: 0.6rem 1rem;
    background: #B39DD9;
    color: #000;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.yqf-apply-btn:hover { background: #7D5BA6; color: #fff; }

.yqf-reset-btn {
    padding: 0.6rem 1rem;
    background: transparent;
    color: #B39DD9;
    border: 1px solid #B39DD9;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.yqf-reset-btn:hover { background: #B39DD9; color: #000; text-decoration: none; }

/* Results info */
.yqf-results-info {
    background: #0a0a0a;
    padding: 0.75rem;
    border-bottom: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.yqf-results-count { color: #B39DD9; font-weight: 500; font-size: 0.8rem; }

.yqf-active-filters { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.yqf-filter-tag {
    background: #7D5BA6;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
}

/* Quiz list */
.yqf-quiz-list {
    background: #0a0a0a;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Quiz card */
.yqf-quiz-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.yqf-quiz-card:hover {
    border-color: #7D5BA6;
    box-shadow: 0 4px 16px rgba(125, 91, 166, 0.2);
}

.yqf-card-avatar { flex-shrink: 0; }

.yqf-avatar-img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    border: 2px solid #B39DD9;
    object-fit: cover;
}

.yqf-card-body { flex: 1; min-width: 0; }

.yqf-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.yqf-creator-name { color: #B39DD9; font-weight: 600; font-size: 0.85rem; }

.yqf-quiz-for {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.4;
    display: block;
    margin: 0.25rem 0 0.75rem 0;
}

.yqf-quiz-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.yqf-take-btn {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    background: #B39DD9;
    color: #000;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.yqf-take-btn:hover { background: #7D5BA6; color: #fff; text-decoration: none; }

/* Empty state */
.yqf-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    background: #111;
    margin: 0.75rem;
    border-radius: 8px;
    border: 1px solid #333;
}

.yqf-empty-icon { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.5; }
.yqf-empty-state h3 { margin: 0 0 0.75rem 0; font-size: 1.2rem; font-weight: 700; color: #fff; }
.yqf-empty-state p  { font-size: 0.85rem; color: #aaa; margin: 0 0 1.5rem 0; line-height: 1.4; }

/* Desktop */
@media (min-width: 769px) {
    .y27-quiz-filter { margin: 1rem auto; border-radius: 12px; }
    .yqf-filter-bar { padding: 1rem 1.5rem; }
    .yqf-search-input { padding: 0.75rem 1rem; font-size: 0.9rem; }
    .yqf-search-btn { padding: 0.75rem 1.5rem; min-width: auto; }
    .yqf-results-info { padding: 1rem 1.5rem; flex-direction: row; align-items: center; justify-content: space-between; }
    .yqf-quiz-list { padding: 1.5rem; gap: 1.5rem; }
    .yqf-quiz-card { padding: 1.5rem; gap: 1.5rem; }
    .yqf-avatar-img { width: 96px !important; height: 96px !important; }
    .yqf-quiz-title { font-size: 1.1rem; }
    .yqf-empty-state { padding: 3rem 2rem; margin: 1.5rem; }
    .yqf-empty-icon { font-size: 3rem; margin-bottom: 1rem; }
    .yqf-empty-state h3 { font-size: 1.5rem; margin-bottom: 1rem; }
    .yqf-empty-state p { font-size: 1rem; margin-bottom: 2rem; }
}

/* Mobile */
@media (max-width: 480px) {
    .y27-quiz-filter { margin: 0.25rem; border-radius: 6px; }
    .yqf-filter-bar { padding: 0.5rem; }
    .yqf-search-input { padding: 0.5rem; font-size: 0.8rem; }
    .yqf-quiz-card { flex-direction: column; gap: 0.75rem; }
    .yqf-avatar-img { width: 60px !important; height: 60px !important; }
    .y27-quiz-filter .yqf-row-search-creator { flex-direction: column !important; align-items: stretch !important; }
    .y27-quiz-filter .yqf-row-search-creator .yqf-filter-item { flex: 0 0 auto !important; width: 100% !important; }
    .y27-quiz-filter .yqf-row-sort-actions { flex-wrap: wrap !important; }
}

/* Quiz filter — sort row, date toggle, date filters */
.yqf-sort-row { display: grid; grid-template-columns: 2fr 1fr; gap: 0.5rem; }

.yqf-date-toggle {
    padding: 0.6rem 1rem;
    background: transparent;
    color: #B39DD9;
    border: 1px solid #B39DD9;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: 600;
}

.yqf-date-toggle:hover,
.yqf-date-toggle.active { background: #B39DD9; color: #000; }

.yqf-date-toggle-icon { font-size: 0.7rem; transition: transform 0.2s ease; }
.yqf-date-toggle.active .yqf-date-toggle-icon { transform: rotate(180deg); }

.yqf-date-filters-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    opacity: 0;
}

.yqf-date-filters-section.show { max-height: 200px; opacity: 1; margin-top: 1rem; }

.yqf-date-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.yqf-date-item { display: flex; flex-direction: column; gap: 0.4rem; }

.yqf-date-item label {
    font-size: 0.8rem;
    color: #B39DD9;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.yqf-date-item input[type="date"] {
    padding: 0.6rem 0.5rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    font-size: 0.8rem;
}

.yqf-date-item input[type="date"]:focus {
    outline: none;
    border-color: #7D5BA6;
    box-shadow: 0 0 0 1px rgba(125, 91, 166, 0.3);
}