/* ===========================================================
   LinguisAI — Age Verifier
   Theme: Deep Midnight Navy (qora EMAS, indigo-ko'k tonusda)
   =========================================================== */
:root {
    /* === Asosiy fon va surfaces (qora emas — ko'k-binafsha tonusda) === */
    --bg:           #141831;     /* deep midnight indigo */
    --bg-2:         #1a1f3d;     /* biroz ochroq */
    --surface:      #1d2342;     /* card fon */
    --surface-2:    #232a4d;     /* hover/elevated */
    --paper:        #f4f1e8;     /* kitob sahifasi (kremrang) */
    --paper-text:   #2c2820;     /* kitobdagi matn rangi */
    --paper-muted:  #6b6555;

    /* === Borders === */
    --border:       #2c3361;
    --border-2:     #3b4480;
    --border-soft:  rgba(255,255,255,0.06);

    /* === Text === */
    --text:         #e8ebff;
    --text-2:       #b9bfe0;
    --muted:        #7a82ab;
    --dim:          #4d557d;

    /* === Brand / Primary === */
    --primary:      #7c5cff;
    --primary-2:    #6244e8;
    --primary-soft: rgba(124, 92, 255, 0.16);

    /* === Yosh guruhlari ranglari — kanonik 7-lik sxema === */
    --age-g0:   #4ade80;     /* yashil   — 1+    */
    --age-g1:   #2dd4bf;     /* firuza   — 2+    */
    --age-g2:   #38bdf8;     /* moviy    — 3+    */
    --age-g3:   #fbbf24;     /* sariq    — 4+    */
    --age-g4:   #fb923c;     /* to'q sariq — 5+  */
    --age-g5:   #f472b6;     /* pushti   — 7+    */
    --age-g6:   #c084fc;     /* binafsha — 10-12 */

    --age-g0-soft:  rgba(74, 222, 128, 0.14);
    --age-g1-soft:  rgba(45, 212, 191, 0.14);
    --age-g2-soft:  rgba(56, 189, 248, 0.14);
    --age-g3-soft:  rgba(251, 191, 36, 0.16);
    --age-g4-soft:  rgba(251, 146, 60, 0.16);
    --age-g5-soft:  rgba(244, 114, 182, 0.14);
    --age-g6-soft:  rgba(192, 132, 252, 0.16);

    /* Matn uchun guruh ranglari (fon ustida >= 4.5:1) */
    --age-g0-text:  #4ade80;
    --age-g1-text:  #2dd4bf;
    --age-g2-text:  #38bdf8;
    --age-g3-text:  #fbbf24;
    --age-g4-text:  #fb923c;
    --age-g5-text:  #f9a8d4;
    --age-g6-text:  #d8b4fe;

    /* === Status / Misc === */
    --success:  #4ade80;
    --success-text: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.14);
    --primary-text: #a592ff;
    --border-input: #6570ad;
    --warning:  #fbbf24;
    --danger:   #f87171;
    --orange:      #fb923c;
    --orange-soft: rgba(251, 146, 60, 0.16);

    --radius:   6px;
    --radius-sm:4px;
    --radius-lg:10px;

    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --sans: 'Inter', system-ui, -apple-system, sans-serif;

    /* topbar / overlay ranglari (temaga bog'liq) */
    --topbar-bg:    rgba(20, 24, 49, 0.85);
    --grid-line:    rgba(255,255,255,0.012);
    --overlay-bg:   rgba(8, 10, 24, 0.7);
    --row-hover:    rgba(255,255,255,0.02);
    --head-tint:    rgba(255,255,255,0.015);

    color-scheme: dark;
}

/* ============================ LIGHT THEME ============================ */
html[data-theme="light"] {
    --bg:           #f4f5fb;
    --bg-2:         #eceef8;
    --surface:      #ffffff;
    --surface-2:    #f0f1fa;
    --paper:        #fffdf5;
    --paper-text:   #2c2820;
    --paper-muted:  #6b6555;

    --border:       #d9dcef;
    --border-2:     #c3c8e6;
    --border-soft:  rgba(20, 24, 49, 0.07);

    --text:         #1d2240;
    --text-2:       #3d4470;
    --muted:        #6d749e;
    --dim:          #9aa0c2;

    --primary:      #6244e8;
    --primary-2:    #4f33cc;
    --primary-soft: rgba(98, 68, 232, 0.12);

    --age-g0:   #16a34a;
    --age-g1:   #0d9488;
    --age-g2:   #0284c7;
    --age-g3:   #b45309;
    --age-g4:   #ea580c;
    --age-g5:   #db2777;
    --age-g6:   #9333ea;

    --age-g0-soft:  rgba(22, 163, 74, 0.12);
    --age-g1-soft:  rgba(13, 148, 136, 0.12);
    --age-g2-soft:  rgba(2, 132, 199, 0.12);
    --age-g3-soft:  rgba(180, 83, 9, 0.12);
    --age-g4-soft:  rgba(234, 88, 12, 0.12);
    --age-g5-soft:  rgba(219, 39, 119, 0.12);
    --age-g6-soft:  rgba(147, 51, 234, 0.12);

    --age-g0-text:  #166534;
    --age-g1-text:  #0f766e;
    --age-g2-text:  #0369a1;
    --age-g3-text:  #92400e;
    --age-g4-text:  #b43c0a;
    --age-g5-text:  #be185d;
    --age-g6-text:  #7e22ce;

    --success:  #16a34a;
    --success-text: #166534;
    --success-soft: rgba(22, 163, 74, 0.12);
    --primary-text: #6244e8;
    --border-input: #767c9f;
    --warning:  #b45309;
    --danger:   #dc2626;
    --orange:      #c2410c;
    --orange-soft: rgba(194, 65, 12, 0.14);

    --topbar-bg:    rgba(244, 245, 251, 0.88);
    --grid-line:    rgba(29, 34, 64, 0.03);
    --overlay-bg:   rgba(29, 34, 64, 0.35);
    --row-hover:    rgba(29, 34, 64, 0.03);
    --head-tint:    rgba(29, 34, 64, 0.02);

    color-scheme: light;
}

/* Foydalanuvchi sahifalari (index, login, archive, lugat) kontenti; topbar va admin sahifalari tashqarida */
body.user-ui > :not(.topbar) { --muted: #959dc6; }
html[data-theme="light"] body.user-ui > :not(.topbar) { --muted: #5f6690; }

/* ============================ BASE ============================ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 20% 0%, var(--primary-soft), transparent 50%),
        radial-gradient(circle at 80% 100%, var(--age-g1-soft), transparent 45%);
}

body::before {
    /* fine grid overlay */
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    z-index: 0;
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }

/* ============================ TOPBAR ============================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 56px;
    height: auto;
    padding: 8px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
    width: 32px; height: 32px;
    background: var(--primary);
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    color: white;
    font-family: var(--mono);
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 0 0 1px rgba(124,92,255,0.3), 0 6px 18px -4px rgba(124,92,255,0.45);
}
.brand-name { display: flex; align-items: center; gap: 10px; }
.brand-name strong { font-size: 14px; font-weight: 700; letter-spacing: 0.2px; }
.brand-tag {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(124,92,255,0.22);
    border-radius: 3px;
}

.top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}

/* ============================ BUTTONS ============================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-family: var(--mono);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    transition: 0.18s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1;
}
.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary-2);
    box-shadow: 0 0 0 1px rgba(124,92,255,0.25), 0 4px 14px -4px rgba(124,92,255,0.5);
}
.btn-primary:hover { background: var(--primary-2); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    color: var(--text-2);
    background: transparent;
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface); color: var(--text); border-color: var(--border-2); }

.btn-outline {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}
.btn-outline:hover { background: var(--surface-2); border-color: var(--border-2); }

/* ============================ HERO ============================ */
.hero {
    position: relative;
    z-index: 1;
    padding: 48px 24px 28px;
    display: grid;
    place-items: center;
    min-height: calc(100vh - 56px - 36px);
}
.hero-inner {
    max-width: 760px;
    width: 100%;
    text-align: center;
}
.hero-stamp {
    display: inline-block;
    font-size: 11px;
    color: var(--primary-text);
    letter-spacing: 1.5px;
    background: var(--primary-soft);
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid rgba(124,92,255,0.22);
    margin-bottom: 18px;
}
.hero h1 {
    font-family: var(--mono);
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 14px;
}
.hero > .hero-inner > p {
    color: var(--text-2);
    font-family: var(--sans);
    font-size: 15px;
    max-width: 560px;
    margin: 0 auto 32px;
    line-height: 1.6;
}
.hero p b { color: var(--text); font-weight: 700; }

.upload-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 8px;
    text-align: left;
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.upload-zone {
    border: 1.5px dashed var(--border-2);
    border-radius: var(--radius);
    padding: 44px 28px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    background:
        radial-gradient(circle at center, rgba(124,92,255,0.06), transparent 70%),
        var(--bg-2);
}
.upload-zone:hover {
    border-color: var(--primary);
    background:
        radial-gradient(circle at center, rgba(124,92,255,0.10), transparent 70%),
        var(--bg-2);
}
.upload-zone.dragover {
    border-color: var(--primary);
    border-style: solid;
    transform: scale(1.005);
}
.upload-icon-wrap {
    width: 56px; height: 56px;
    margin: 0 auto 18px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    display: grid; place-items: center;
    border: 1px solid rgba(124,92,255,0.22);
}
.upload-icon-wrap svg { width: 26px; height: 26px; }
.upload-zone h2, .upload-zone h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.upload-zone > p {
    color: var(--muted);
    font-size: 12.5px;
    margin-bottom: 18px;
}
.kbd {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 2px;
    border-radius: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 600;
}
.upload-zone .btn { margin: 0 auto; }

.upload-alt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 0 0;
}
.upload-alt .btn { justify-content: center; padding: 10px; }

/* ============================ MODAL ============================ */
.modal {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 24px;
    animation: fadeIn 0.18s;
}
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
.modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    width: min(640px, 100%);
    box-shadow: 0 32px 80px -16px rgba(0,0,0,0.6);
    animation: pop 0.2s;
}
@keyframes pop { from {opacity:0; transform:scale(0.98);} to {opacity:1; transform:scale(1);} }
.modal-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.modal-head h2, .modal-head h3 { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: 1px; }
.modal-close {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
#textArea {
    width: 100%;
    min-height: 220px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: 0.18s;
}
#textArea:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* ============================ ANALYZING ============================ */
.analyzing {
    padding: 80px 24px;
    display: grid;
    place-items: center;
    min-height: calc(100vh - 56px - 36px);
    position: relative;
    z-index: 1;
}
.ana-inner {
    max-width: 520px;
    width: 100%;
    text-align: center;
}
.loader {
    width: 100%;
    height: 3px;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 22px;
    position: relative;
}
.loader-bar {
    position: absolute;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: slide 1.4s ease-in-out infinite;
}
@keyframes slide {
    0% { left: -30%; }
    100% { left: 100%; }
}
.analyzing h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
}
.ana-log {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 12.5px;
    color: var(--text-2);
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
}
.ana-log .log-line {
    display: flex;
    gap: 10px;
    padding: 2px 0;
    animation: logIn 0.25s;
}
.ana-log .log-line .log-time { color: var(--dim); flex-shrink: 0; }
.ana-log .log-line .log-tag { color: var(--primary); flex-shrink: 0; }
.ana-log .log-line.ok .log-tag { color: var(--success); }
@keyframes logIn { from {opacity:0; transform:translateY(-3px);} to {opacity:1; transform:translateY(0);} }
.ana-log:not([hidden]) { margin-top: 20px; }
#anaProgress h2 { margin-bottom: 10px; }
.ana-parts {
    max-width: 440px;
    margin: 0 auto 12px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
}
.ana-elapsed {
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.ana-hint {
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
}
.ana-error {
    padding: 28px 24px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.ana-error-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.14);
    color: var(--danger);
    font-size: 22px;
    font-weight: 800;
}
.ana-error h2 { margin-bottom: 10px; outline: none; }
.ana-error p {
    margin-bottom: 18px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
}
.ana-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.ana-error-actions .btn { min-height: 40px; justify-content: center; }
.ana-error-actions .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.ana-error-tech {
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
}
.ana-error-tech summary { cursor: pointer; }
.ana-error-tech code {
    display: block;
    margin-top: 6px;
    font-family: var(--mono);
    color: var(--text-2);
}
@media (max-width: 480px) {
    .ana-error { padding: 22px 16px 16px; }
    .ana-error-actions .btn { width: 100%; }
}

/* ============================ RESULTS ============================ */
.results {
    position: relative;
    z-index: 1;
    padding: 22px;
    animation: fadeUp 0.35s ease;
}
@keyframes fadeUp { from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:translateY(0);} }

/* === META PANEL === */
.meta-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 18px;
}
.meta-file { border-right: 1px solid var(--border); padding-right: 24px; }
.meta-label {
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}
.meta-filename {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    word-break: break-all;
}
.meta-sub {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    gap: 6px;
    align-items: center;
}
.meta-sub .dim { color: var(--dim); }

/* age grid (5 columns horizontal bars) */
.age-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 18px;
}
.age-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: 0.18s;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
}
.age-cell:hover { background: var(--row-hover); }
.age-cell.dominant .age-cell-pct { font-size: 18px; font-weight: 700; }
.age-cell-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.age-cell-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-2);
}
.age-cell.dominant .age-cell-name { color: var(--text); }
.age-cell-pct {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.age-cell-bar {
    height: 3px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.age-cell-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.9s cubic-bezier(.4,0,.2,1);
}
.age-cell[data-group="1+"]    .age-cell-fill { background: var(--age-g0); }
.age-cell[data-group="2+"]    .age-cell-fill { background: var(--age-g1); }
.age-cell[data-group="3+"]    .age-cell-fill { background: var(--age-g2); }
.age-cell[data-group="4+"]    .age-cell-fill { background: var(--age-g3); }
.age-cell[data-group="5+"]    .age-cell-fill { background: var(--age-g4); }
.age-cell[data-group="7+"]    .age-cell-fill { background: var(--age-g5); }
.age-cell[data-group="10-12"] .age-cell-fill { background: var(--age-g6); }
.age-cell[data-group="1+"]    .age-cell-name { color: var(--age-g0-text); }
.age-cell[data-group="2+"]    .age-cell-name { color: var(--age-g1-text); }
.age-cell[data-group="3+"]    .age-cell-name { color: var(--age-g2-text); }
.age-cell[data-group="4+"]    .age-cell-name { color: var(--age-g3-text); }
.age-cell[data-group="5+"]    .age-cell-name { color: var(--age-g4-text); }
.age-cell[data-group="7+"]    .age-cell-name { color: var(--age-g5-text); }
.age-cell[data-group="10-12"] .age-cell-name { color: var(--age-g6-text); }

.age-cell.dominant .age-cell-bar { height: 4px; }

/* === RESULTS GRID === */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 540px;
}
.panel-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--head-tint);
}
.panel-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 1.5px;
    white-space: nowrap;
}
.panel-head { flex-wrap: wrap; row-gap: 10px; }
.result-verdict, .result-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.result-actions { margin-left: auto; }
.result-verdict .dominant-tag { white-space: nowrap; }

.panel-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
    font-size: 11.5px;
}
.panel-pager strong { color: var(--text); font-weight: 700; }
.pager-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 14px;
    line-height: 1;
}
.pager-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.dominant-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    background: var(--age-g2-soft);
    border: 1px solid var(--border-2);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--age-g2-text);
    letter-spacing: 1px;
}
.dominant-tag strong { font-weight: 800; }
.coverage-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--age-g0-soft);
    border: 1px solid var(--border-2);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--age-g0-text);
    letter-spacing: 1px;
    cursor: help;
}
.coverage-badge strong { font-weight: 800; }
/* MWE (ko'p so'zli birlik) — yaxlit belgilash */
.analysis-body .word.mwe-start { border-bottom: 2px solid var(--primary); }
.analysis-body .word.mwe-start::before {
    content: "⛓ "; font-size: 0.7em; color: var(--primary); opacity: 0.7;
}
.analysis-body .word.mwe-part { border-bottom: 2px solid var(--primary); opacity: 0.85; }
.dominant-dot {
    width: 6px; height: 6px;
    background: var(--age-g2);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--age-g2);
}
.dominant-tag[data-group="1+"]    { background: var(--age-g0-soft); border-color: var(--age-g0); color: var(--age-g0-text); }
.dominant-tag[data-group="1+"]    .dominant-dot { background: var(--age-g0); box-shadow: 0 0 8px var(--age-g0); }
.dominant-tag[data-group="2+"]    { background: var(--age-g1-soft); border-color: var(--age-g1); color: var(--age-g1-text); }
.dominant-tag[data-group="2+"]    .dominant-dot { background: var(--age-g1); box-shadow: 0 0 8px var(--age-g1); }
.dominant-tag[data-group="3+"]    { background: var(--age-g2-soft); border-color: var(--age-g2); color: var(--age-g2-text); }
.dominant-tag[data-group="3+"]    .dominant-dot { background: var(--age-g2); box-shadow: 0 0 8px var(--age-g2); }
.dominant-tag[data-group="4+"]    { background: var(--age-g3-soft); border-color: var(--age-g3); color: var(--age-g3-text); }
.dominant-tag[data-group="4+"]    .dominant-dot { background: var(--age-g3); box-shadow: 0 0 8px var(--age-g3); }
.dominant-tag[data-group="5+"]    { background: var(--age-g4-soft); border-color: var(--age-g4); color: var(--age-g4-text); }
.dominant-tag[data-group="5+"]    .dominant-dot { background: var(--age-g4); box-shadow: 0 0 8px var(--age-g4); }
.dominant-tag[data-group="7+"]    { background: var(--age-g5-soft); border-color: var(--age-g5); color: var(--age-g5-text); }
.dominant-tag[data-group="7+"]    .dominant-dot { background: var(--age-g5); box-shadow: 0 0 8px var(--age-g5); }
.dominant-tag[data-group="10-12"] { background: var(--age-g6-soft); border-color: var(--age-g6); color: var(--age-g6-text); }
.dominant-tag[data-group="10-12"] .dominant-dot { background: var(--age-g6); box-shadow: 0 0 8px var(--age-g6); }

.panel-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* === SOURCE / PAPER === */
.source-body {
    padding: 24px;
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 20px,
            var(--grid-line) 20px,
            var(--grid-line) 21px
        ),
        var(--bg-2);
    overflow-y: auto;
    max-height: 560px;
}
.paper {
    background: var(--paper);
    color: var(--paper-text);
    border-radius: 4px;
    padding: 36px 40px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 14.5px;
    line-height: 1.8;
    box-shadow:
        0 1px 0 rgba(0,0,0,0.3),
        0 12px 40px -8px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(0,0,0,0.05);
    position: relative;
    min-height: 100%;
}
.paper::before, .paper::after {
    /* qog'oz stack effekti */
    content: '';
    position: absolute;
    background: var(--paper);
    border-radius: 4px;
    z-index: -1;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,0.4);
}
.paper::before {
    inset: -3px -2px 5px 2px;
    opacity: 0.4;
    transform: rotate(-0.4deg);
}
.paper::after {
    inset: -1px 0 3px 0;
    opacity: 0.6;
    transform: rotate(0.2deg);
}

.paper-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--paper-text);
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 10px;
}
.paper-content { color: var(--paper-text); }
.paper-content p { margin-bottom: 14px; }

/* === ANALYSIS === */
.legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--head-tint);
    flex-wrap: wrap;
}
.lg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    transition: 0.18s;
}
.lg-chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.lg-chip.active { background: var(--surface-2); border-color: var(--border-2); color: var(--text); box-shadow: 0 0 0 2px rgba(255,255,255,0.04); }
.lg-chip.dim { opacity: 0.4; }
.lg-sw {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.lg-sw-g0 { background: var(--age-g0); }
.lg-sw-g1 { background: var(--age-g1); }
.lg-sw-g2 { background: var(--age-g2); }
.lg-sw-g3 { background: var(--age-g3); }
.lg-sw-g4 { background: var(--age-g4); }
.lg-sw-g5 { background: var(--age-g5); }
.lg-sw-g6 { background: var(--age-g6); }
.lg-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.5px;
}

.analysis-body {
    padding: 22px 24px;
    overflow-y: auto;
    max-height: 560px;
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--text-2);
}
.analysis-body p { margin-bottom: 14px; }

/* word ranglari analiz panelida */
.analysis-body .word {
    border-radius: 3px;
    padding: 1px 4px;
    margin: 0 -2px;
    cursor: pointer;
    transition: 0.15s;
    border-bottom: 2px solid transparent;
    color: var(--text);
}
.analysis-body .word:hover { transform: translateY(-1px); }
.analysis-body .word.active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.4);
}

.analysis-body .word[data-group="1+"]    { background: var(--age-g0-soft); border-bottom-color: var(--age-g0); }
.analysis-body .word[data-group="2+"]    { background: var(--age-g1-soft); border-bottom-color: var(--age-g1); }
.analysis-body .word[data-group="3+"]    { background: var(--age-g2-soft); border-bottom-color: var(--age-g2); }
.analysis-body .word[data-group="4+"]    { background: var(--age-g3-soft); border-bottom-color: var(--age-g3); }
.analysis-body .word[data-group="5+"]    { background: var(--age-g4-soft); border-bottom-color: var(--age-g4); }
.analysis-body .word[data-group="7+"]    { background: var(--age-g5-soft); border-bottom-color: var(--age-g5); }
.analysis-body .word[data-group="10-12"] { background: var(--age-g6-soft); border-bottom-color: var(--age-g6); }

/* out-of-grade so'zlarni alohida belgilash */
.analysis-body .word.out-of-grade {
    border-bottom-color: transparent;
    text-decoration: underline wavy var(--danger);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-skip-ink: none;
}

/* Sinonim taklifi belgisi */
.analysis-body .word.has-suggestion::after {
    content: '→';
    font-size: 9px;
    opacity: 0.7;
    margin-left: 2px;
    vertical-align: super;
    display: inline-block;
}

.suggestion-badge {
    display: inline;
    font-size: 12px;
    font-weight: 600;
    color: var(--success-text);
    background: var(--success-soft);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 2px;
    vertical-align: baseline;
    cursor: default;
    white-space: nowrap;
}

.copy-simplified-btn {
    font-size: 11px;
    padding: 8px 12px;
}

.analysis-body.dim-others .word { opacity: 0.25; }
.analysis-body.dim-others .word.match { opacity: 1; }
.analysis-body.dim-others .suggestion-badge { opacity: 0.25; }
.analysis-body.dim-others .word.match + .suggestion-badge { opacity: 1; }

/* scrollbars */
.source-body::-webkit-scrollbar,
.analysis-body::-webkit-scrollbar { width: 8px; }
.source-body::-webkit-scrollbar-track,
.analysis-body::-webkit-scrollbar-track { background: transparent; }
.source-body::-webkit-scrollbar-thumb,
.analysis-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* ============================ TOOLTIP ============================ */
.word-tooltip {
    position: fixed;
    z-index: 200;
    width: 260px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    padding: 14px 14px 12px;
    box-shadow:
        0 24px 60px -16px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.04);
    animation: pop 0.16s;
}
.tt-arrow {
    position: absolute;
    width: 10px; height: 10px;
    background: var(--surface);
    border-right: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
    transform: translateX(-50%) rotate(45deg);
    bottom: -6px;
    left: 50%;
}
.tt-cat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-right: 32px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}
.tt-cat-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--age-g4);
    box-shadow: 0 0 8px currentColor;
}
.tt-cat-label { color: var(--muted); }
.tt-cat-age { color: var(--age-g4-text); }
.tt-cat[data-group="1+"]    .tt-cat-dot { background: var(--age-g0); } .tt-cat[data-group="1+"]    .tt-cat-age { color: var(--age-g0-text); }
.tt-cat[data-group="2+"]    .tt-cat-dot { background: var(--age-g1); } .tt-cat[data-group="2+"]    .tt-cat-age { color: var(--age-g1-text); }
.tt-cat[data-group="3+"]    .tt-cat-dot { background: var(--age-g2); } .tt-cat[data-group="3+"]    .tt-cat-age { color: var(--age-g2-text); }
.tt-cat[data-group="4+"]    .tt-cat-dot { background: var(--age-g3); } .tt-cat[data-group="4+"]    .tt-cat-age { color: var(--age-g3-text); }
.tt-cat[data-group="5+"]    .tt-cat-dot { background: var(--age-g4); } .tt-cat[data-group="5+"]    .tt-cat-age { color: var(--age-g4-text); }
.tt-cat[data-group="7+"]    .tt-cat-dot { background: var(--age-g5); } .tt-cat[data-group="7+"]    .tt-cat-age { color: var(--age-g5-text); }
.tt-cat[data-group="10-12"] .tt-cat-dot { background: var(--age-g6); } .tt-cat[data-group="10-12"] .tt-cat-age { color: var(--age-g6-text); }

.tt-word {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.tt-meaning {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.5;
    margin-bottom: 8px;
}
.tt-suggestion {
    display: none;
    font-family: var(--sans);
    font-size: 12px;
    padding: 5px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    margin-bottom: 10px;
}
.tt-suggestion.visible { display: block; }
.tt-suggestion-label {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.8px;
    display: block;
    margin-bottom: 2px;
}
.tt-suggestion-val { color: var(--text); font-weight: 600; }
.tt-apply-btn {
    margin-left: auto;
    min-height: 32px;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--success-text);
    background: none;
    color: var(--success-text);
    cursor: pointer;
    font-size: 0.78rem;
    white-space: nowrap;
}
.tt-apply-btn:hover { background: var(--success-text); color: var(--bg); }
.analysis-body .word.replaced {
    background: var(--success-soft);
    color: var(--text);
    border-bottom: 2px dashed var(--success-text);
    text-decoration: none;
    font-weight: 600;
}
.tt-conf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 11px;
}
.tt-conf-label { color: var(--muted); letter-spacing: 0.5px; }
.tt-conf-val { color: var(--text); font-weight: 700; font-size: 13px; }
.tt-bar {
    height: 3px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.tt-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--age-g3));
    border-radius: 999px;
    transition: width 0.5s ease;
}
.tt-close {
    position: absolute;
    top: 4px; right: 4px;
    width: 32px; height: 32px;
    border-radius: 4px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
}
.tt-close:hover { background: var(--surface-2); color: var(--text); }

/* ============================ STATUS BAR ============================ */
.statusbar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 8px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    letter-spacing: 1px;
    color: var(--muted);
    height: 36px;
    backdrop-filter: blur(8px);
}
.status-left, .status-mid, .status-right {
    display: flex;
    align-items: center;
    gap: 7px;
}
.st-label { color: var(--dim); }
.st-val { color: var(--text-2); font-weight: 600; }
.st-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--dim);
}
.st-dot.active {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(74,222,128,0.16), 0 0 8px var(--success);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% {opacity:1;} 50% {opacity:0.5;} }

/* ============================ USER BAR ============================ */
.user-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-2);
}
.user-role-badge {
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 3px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(124,92,255,0.22);
}
.user-name {
    font-weight: 600;
}
.nav-link {
    text-decoration: none !important;
}
.nav-link-active {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: var(--primary-soft) !important;
}

/* ============================ THEME TOGGLE ============================ */
.theme-toggle {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    justify-content: center;
    font-size: 15px;
    border-radius: 50% !important;
}

/* ============================ TOASTS ============================ */
.toast-holder {
    position: fixed;
    bottom: 52px;
    right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 40px));
}
.toast {
    padding: 11px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-2);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    border-left: 3px solid var(--primary);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-left-color: var(--success); }
.toast-error   { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }

/* ============================ SKELETON ============================ */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: var(--radius);
    color: transparent !important;
    pointer-events: none;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
    animation: skeletonSlide 1.3s ease-in-out infinite;
}
@keyframes skeletonSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.skeleton-line {
    height: 14px;
    margin-bottom: 10px;
}

/* ============================ FOCUS VISIBILITY ============================ */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================ TABLE WRAP (responsive) ============================ */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 560px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
    .meta-panel { grid-template-columns: 1fr; gap: 16px; }
    .meta-file { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
    .results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .age-grid { grid-template-columns: repeat(2, 1fr); }
    .topbar { padding: 0 14px; }
    .top-actions .btn { padding: 7px 10px; font-size: 11px; }
    .results { padding: 14px; }
    .paper { padding: 24px 22px; }
    .word-tooltip { width: calc(100vw - 32px); }
    .statusbar { font-size: 9.5px; padding: 8px 12px; }
    .status-mid { display: none; }
    .panel-head { padding: 12px 14px; }
    .result-actions { width: 100%; margin-left: 0; flex-wrap: nowrap; align-items: stretch; }
    .result-actions .btn { flex: 1 1 0; min-width: 0; min-height: 40px; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
}

/* ═══════════════════════════════════════════════════════════════
   SAHIFA STILLARI — login / archive / dashboard / annotate
   (avval har bir sahifaning <style> blokida edi)
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Umumiy sahifa sarlavhalari ---------- */
.page-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}
.page-heading {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ---------- Umumiy jadval ko'rinishi ---------- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.data-table th {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 1.2px;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--head-tint);
}
.data-table td {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-2);
    border-bottom: 1px solid var(--border-soft);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--row-hover); }

/* ---------- Guruh belgilari ---------- */
.group-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.group-badge[data-group="1+"]    { background: var(--age-g0-soft); color: var(--age-g0); }
.group-badge[data-group="2+"]    { background: var(--age-g1-soft); color: var(--age-g1); }
.group-badge[data-group="3+"]    { background: var(--age-g2-soft); color: var(--age-g2); }
.group-badge[data-group="4+"]    { background: var(--age-g3-soft); color: var(--age-g3); }
.group-badge[data-group="5+"]    { background: var(--age-g4-soft); color: var(--age-g4); }
.group-badge[data-group="7+"]    { background: var(--age-g5-soft); color: var(--age-g5); }
.group-badge[data-group="10-12"] { background: var(--age-g6-soft); color: var(--age-g6); }
body.user-ui > :not(.topbar) .group-badge[data-group="1+"]    { color: var(--age-g0-text); }
body.user-ui > :not(.topbar) .group-badge[data-group="2+"]    { color: var(--age-g1-text); }
body.user-ui > :not(.topbar) .group-badge[data-group="3+"]    { color: var(--age-g2-text); }
body.user-ui > :not(.topbar) .group-badge[data-group="4+"]    { color: var(--age-g3-text); }
body.user-ui > :not(.topbar) .group-badge[data-group="5+"]    { color: var(--age-g4-text); }
body.user-ui > :not(.topbar) .group-badge[data-group="7+"]    { color: var(--age-g5-text); }
body.user-ui > :not(.topbar) .group-badge[data-group="10-12"] { color: var(--age-g6-text); }

/* ---------- LOGIN ---------- */
.login-page {
    min-height: calc(100vh - 56px - 36px);
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative;
    z-index: 1;
}
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    width: min(420px, 100%);
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.25);
}
.login-card h2 { text-align: center; font-size: 22px; margin-bottom: 6px; }
.login-card .subtitle {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 24px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 1.2px;
    margin-bottom: 6px;
}
.form-group input, .form-group select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    transition: 0.18s;
}
.form-group input:focus, .form-group select:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.login-error {
    color: var(--danger);
    font-size: 12px;
    text-align: center;
    margin-bottom: 12px;
    min-height: 18px;
}
.login-btn { width: 100%; padding: 12px; font-size: 14px; justify-content: center; }
.login-card .form-group input { border-color: var(--border-input); }
.login-card .form-group input:focus { border-color: var(--primary); }
.login-card .form-group input::placeholder,
#textArea::placeholder { color: var(--muted); opacity: 1; }
.login-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: var(--muted);
}
.login-footer .link-btn {
    color: var(--primary);
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
    padding: 0;
}
.login-footer .link-btn:hover { text-decoration: underline; }
.tab-row {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.login-card .tab-btn {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-align: center;
    background: var(--bg);
    color: var(--muted);
    transition: 0.18s;
    border: none;
    cursor: pointer;
}
.login-card .tab-btn.active { background: var(--primary-soft); color: var(--primary-text); }
.login-card .tab-btn:hover:not(.active) { background: var(--surface-2); color: var(--text-2); }

/* ---------- ARCHIVE ---------- */
.archive-page {
    position: relative;
    z-index: 1;
    padding: 22px;
    max-width: 1100px;
    margin: 0 auto;
}
.doc-title-link {
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    text-align: left;
}
.doc-title-link:hover { color: var(--primary); }
.conf-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
    font-size: 14px;
}
.action-btns { display: flex; gap: 6px; }
.action-btns .btn { padding: 5px 10px; font-size: 11px; }
.detail-modal {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 24px;
    animation: fadeIn 0.18s;
}
.detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: min(640px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px -16px rgba(0,0,0,0.4);
}
.detail-card h2, .detail-card h3 { margin: 0 0 16px; font-size: 18px; }
#detailTitle:focus { outline: none; }
.detail-row { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px; flex-wrap: wrap; }
.detail-label { color: var(--muted); min-width: 120px; font-weight: 600; }
.detail-val { color: var(--text); }

/* ---------- DASHBOARD ---------- */
.dash-page {
    position: relative;
    z-index: 1;
    padding: 22px;
    max-width: 1100px;
    margin: 0 auto;
}
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.stat-cards .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    text-align: left;
}
.stat-cards .stat-label {
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 1.2px;
    font-weight: 700;
    margin-bottom: 8px;
}
.stat-cards .stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.section-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text);
}
.dist-bars {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}
.dist-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dist-row:last-child { margin-bottom: 0; }
.dist-label { font-size: 12px; font-weight: 700; min-width: 48px; text-align: right; }
.dist-bar-bg {
    flex: 1;
    height: 24px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.dist-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.dist-count { font-size: 12px; font-weight: 700; color: var(--text-2); min-width: 30px; }
.admin-section { margin-top: 32px; }
.role-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.role-badge.admin  { background: var(--primary-soft); color: var(--primary); }
.role-badge.expert { background: var(--age-g2-soft); color: var(--age-g2); }
.role-badge.author { background: var(--age-g0-soft); color: var(--age-g0); }
.add-user-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.add-user-form .form-group { margin-bottom: 0; }
.add-user-form label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.add-user-form input, .add-user-form select {
    width: auto;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
}
.add-user-form input:focus, .add-user-form select:focus {
    outline: 0;
    border-color: var(--primary);
}

/* ---------- ANNOTATE (Admin panel) ---------- */
.expert-container {
    max-width: 840px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
    position: relative;
    z-index: 1;
}
.tab-bar {
    display: flex;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.5rem;
}
.tab-bar .tab-btn {
    flex: 1;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.tab-bar .tab-btn:hover { color: var(--text-2); background: var(--row-hover); }
.tab-bar .tab-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px var(--primary-soft);
}
.tab-panel { display: none; animation: fadeUp 0.25s ease; }
.tab-panel.active { display: block; }

.subtab-bar {
    display: flex;
    gap: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 3px;
    margin-bottom: 1rem;
}
.subtab-bar .subtab-btn {
    flex: 1;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    transition: all 0.2s;
}
.subtab-bar .subtab-btn:hover { color: var(--text-2); background: var(--row-hover); }
.subtab-bar .subtab-btn.active {
    background: var(--primary-soft);
    color: var(--primary);
}
.subtab-panel { display: none; }
.subtab-panel.active { display: block; animation: fadeUp 0.25s ease; }

.word-card {
    background: var(--surface);
    border-radius: 14px;
    padding: 1.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}
.word-display {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.3rem;
    color: var(--text);
}
.lemma-edit-btn {
    font-size: 0.9rem;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0 0.2rem;
    vertical-align: middle;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.lemma-edit-btn:hover { opacity: 1; color: var(--primary); }
.lemma-edit-input {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    padding: 0.2rem 0.6rem;
    border: 2px solid var(--primary);
    border-radius: 8px;
    background: var(--bg-2, rgba(0,0,0,0.03));
    color: var(--text);
    max-width: 70%;
}
.lemma-edit-save, .lemma-edit-cancel {
    font-size: 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.3rem;
}
.lemma-edit-save { color: var(--success); }
.lemma-edit-cancel { color: var(--danger); }
.lemma-edit-hint {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--muted);
    margin-top: 0.4rem;
    line-height: 1.4;
}
.freq-badge {
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 1.2rem;
}
.examples-list { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.examples-list li {
    padding: 0.55rem 0.9rem;
    margin-bottom: 0.4rem;
    background: var(--row-hover);
    border-radius: 7px;
    border-left: 3px solid var(--primary);
    font-size: 0.9rem;
    color: var(--text-2);
    font-style: italic;
}
.section-label {
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.8px;
    font-weight: 600;
}
.group-buttons {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.group-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s;
}
.group-btn:hover { border-color: var(--primary); }
.group-btn.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.group-btn.ai-recommended { position: relative; box-shadow: 0 0 0 2px var(--primary-soft); }
.group-btn.ai-recommended::after {
    content: "AI"; position: absolute; top: -7px; right: -7px;
    font-size: 0.6rem; font-weight: 700; background: var(--primary); color: #fff;
    padding: 0 4px; border-radius: 6px; letter-spacing: 0.5px;
}
.ai-group-hint {
    margin: 0.4rem 0 0.2rem; font-size: 0.8rem; color: var(--text-2);
    padding: 0.3rem 0.5rem; background: var(--primary-soft); border-radius: 6px;
}
.group-btn[data-group="1+"].selected   { background: var(--age-g0); border-color: var(--age-g0); }
.group-btn[data-group="2+"].selected   { background: var(--age-g1); border-color: var(--age-g1); }
.group-btn[data-group="3+"].selected   { background: var(--age-g2); border-color: var(--age-g2); }
.group-btn[data-group="4+"].selected   { background: var(--age-g3); border-color: var(--age-g3); }
.group-btn[data-group="5+"].selected   { background: var(--age-g4); border-color: var(--age-g4); }
.group-btn[data-group="7+"].selected   { background: var(--age-g5); border-color: var(--age-g5); }
.group-btn[data-group="10-12"].selected { background: var(--age-g6); border-color: var(--age-g6); }

.form-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.form-row label { font-size: 0.85rem; color: var(--muted); min-width: 80px; }
.form-row select, .form-row input[type="text"] {
    flex: 1;
    padding: 0.45rem 0.8rem;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--mono);
}
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}
.toggle-switch { position: relative; width: 52px; height: 26px; }
.toggle-switch input { display: none; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--dim);
    border-radius: 13px;
    cursor: pointer;
    transition: 0.3s;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px; height: 20px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(26px); }

.action-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.submit-btn {
    flex: 1;
    min-width: 140px;
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.submit-btn:hover { background: var(--primary-2); }
.submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.skip-btn {
    padding: 0.9rem 1.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
}
.skip-btn:hover { border-color: var(--border-2); color: var(--text-2); background: var(--surface-2); }
.aux-btn {
    padding: 0.9rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.aux-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--text); }
.aux-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.unknown-btn {
    padding: 0.9rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--danger);
    border-radius: 10px;
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    opacity: 0.85;
}
.unknown-btn:hover:not(:disabled) { opacity: 1; background: rgba(239, 68, 68, 0.1); }
.unknown-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.undo-hint {
    background: var(--age-g2-soft);
    border: 1px solid var(--age-g2);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0.9rem;
    font-size: 0.82rem;
    color: var(--text-2);
    text-align: center;
}
.note-row { margin-bottom: 1rem; }
.note-row label {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.note-row textarea {
    width: 100%;
    min-height: 56px;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.note-row textarea:focus { outline: none; border-color: var(--primary); }

.group-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.78rem;
}
.group-chip[data-g="1+"]    { background: var(--age-g0-soft); color: var(--age-g0); }
.group-chip[data-g="2+"]    { background: var(--age-g1-soft); color: var(--age-g1); }
.group-chip[data-g="3+"]    { background: var(--age-g2-soft); color: var(--age-g2); }
.group-chip[data-g="4+"]    { background: var(--age-g3-soft); color: var(--age-g3); }
.group-chip[data-g="5+"]    { background: var(--age-g4-soft); color: var(--age-g4); }
.group-chip[data-g="7+"]    { background: var(--age-g5-soft); color: var(--age-g5); }
.group-chip[data-g="10-12"] { background: var(--age-g6-soft); color: var(--age-g6); }
.group-chip[data-g="n/a"]   { background: rgba(239, 68, 68, 0.12); color: var(--danger); }

.edit-banner {
    background: var(--primary-soft);
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--text-2);
    text-align: center;
}
.edit-banner strong { color: var(--primary); }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 0.75rem;
}
.status-badge::before { content: "●"; font-size: 0.6rem; }
.status-ai        { background: var(--age-g1-soft); border: 1px solid var(--age-g1); color: var(--age-g1); }
.status-verified  { background: var(--age-g0-soft); border: 1px solid var(--age-g0); color: var(--age-g0); }
.status-corrected { background: var(--age-g2-soft); border: 1px solid var(--age-g2); color: var(--age-g2); }
.status-conflict  { background: var(--orange-soft); border: 1px solid var(--orange); color: var(--orange); }
.status-badge-row { text-align: center; margin-bottom: 0.6rem; }

.export-stats-panel {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--row-hover);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.export-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.export-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem;
    text-align: center;
}
.export-stat-number { font-size: 1.4rem; font-weight: 700; color: var(--primary); }
.export-stat-label { font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }
.export-stats-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.export-stats-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.export-stats-table th {
    color: var(--muted);
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.export-stats-table td {
    padding: 0.25rem 0.5rem;
    color: var(--text-2);
    border-bottom: 1px solid var(--border-soft);
}
.export-stats-table td:last-child { text-align: right; color: var(--text); font-weight: 600; }

.history-edit-btn {
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--primary);
    cursor: pointer;
}
.history-edit-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.shortcut-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--dim);
    margin-top: 0.5rem;
}

.progress-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
}
.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-2);
}
.progress-header strong { color: var(--text); }
.progress-track {
    height: 6px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--age-g1));
    border-radius: 999px;
    transition: width 0.6s ease;
    width: 0%;
}
.done-message {
    text-align: center;
    padding: 3rem;
    font-size: 1.2rem;
    color: var(--text);
}
.done-message small { color: var(--muted); }

.history-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.history-table th {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.8px;
}
.history-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-2);
}
.history-table tr:hover td { background: var(--row-hover); }

.upload-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.2rem;
}
.upload-panel h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.upload-panel p { color: var(--muted); font-size: 0.85rem; margin-bottom: 1rem; }
.file-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}
.file-input-wrap input[type="file"] { font-size: 0.85rem; color: var(--text-2); }
.upload-btn {
    padding: 0.6rem 1.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.upload-btn:hover { background: var(--primary-2); }
.upload-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.upload-result { margin-top: 0.8rem; font-size: 0.85rem; min-height: 20px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.2rem;
    text-align: center;
}
.stat-number { font-size: 1.8rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.stat-label { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.5px; }
.group-dist { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }

.export-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
}
.export-section h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.export-section p { color: var(--muted); font-size: 0.82rem; margin-bottom: 1rem; }

.sources-badge { font-size: 0.78rem; color: var(--muted); margin-top: 0.35rem; line-height: 1.5; }
.sources-badge .source-item { color: var(--text-2); }
.sources-expand { color: var(--primary); cursor: pointer; font-size: 0.78rem; margin-left: 0.3rem; }
.edul-chip {
    display: inline-block;
    font-size: 0.68rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-weight: 600;
}
.edul-chip.missing { background: var(--age-g2-soft); color: var(--age-g2); border: 1px solid var(--age-g2); }
.edul-chip.ok { background: var(--age-g0-soft); color: var(--success); border: 1px solid var(--age-g0); }
.lemma-row-not-edul { background: var(--age-g2-soft); }
/* Lemma manbasi chipi: AI (llm) / XOM (raw) */
.src-chip {
    display: inline-block; font-size: 0.68rem; padding: 0.12rem 0.45rem;
    border-radius: 999px; margin-left: 0.5rem; vertical-align: middle; font-weight: 600;
}
.src-chip.llm { background: var(--surface-2); color: var(--primary); border: 1px solid var(--primary); }
.src-chip.raw { background: rgba(255,84,112,0.10); color: var(--danger); border: 1px solid var(--danger); }

.lemmas-toolbar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: center;
}
.lemmas-toolbar input[type="search"] {
    flex: 1;
    min-width: 180px;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
}
.filter-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.78rem;
    cursor: pointer;
}
.filter-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pagination-bar {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.page-btn {
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.78rem;
    cursor: pointer;
}
.page-btn.active { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.delete-corpus-btn {
    color: var(--danger);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
}
.delete-corpus-btn:hover { text-decoration: underline; }
.corpus-download-btn {
    color: var(--primary);
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
}
.corpus-download-btn:hover { border-color: var(--primary); background: var(--primary-soft); }

.ex-edit-btn {
    float: right;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.examples-list li:hover .ex-edit-btn,
.ex-edit-btn:focus-visible { opacity: 1; }
.ex-edit-btn:hover { color: var(--primary); border-color: var(--primary); }
.ex-textarea {
    width: 100%;
    min-height: 40px;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--primary);
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 0.3rem;
}
.ex-save-btn, .ex-cancel-btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid var(--border);
    cursor: pointer;
    margin-right: 0.3rem;
}
.ex-save-btn { background: var(--primary); color: #fff; border-color: var(--primary); }
.ex-cancel-btn { background: var(--surface-2); color: var(--muted); }
.ex-add-btn {
    display: block;
    margin: 0 auto 1rem;
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 7px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
}
.ex-add-btn:hover { border-color: var(--primary); color: var(--primary); }
.ex-del-btn {
    background: none; border: none; color: var(--muted);
    cursor: pointer; padding: 0 0.25rem; opacity: 0.5; font-size: 0.85rem;
}
.examples-list li:hover .ex-del-btn { opacity: 1; }
.ex-del-btn:hover { color: var(--danger); }
.ex-gen-btn {
    margin-left: 0.4rem; padding: 0.25rem 0.7rem; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-2, rgba(0,0,0,0.03));
    color: var(--text); cursor: pointer; font-size: 0.8rem;
}
.ex-gen-btn:hover { border-color: var(--primary); color: var(--primary); }
.ex-gen-btn.ex-gen-emphasis { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.ex-gen-box { margin-top: 0.6rem; padding: 0.5rem 0.6rem; border: 1px dashed var(--primary); border-radius: 8px; }
.ex-gen-title { font-size: 0.78rem; color: var(--text-2); margin-bottom: 0.35rem; }
.ex-accept-btn {
    background: none; border: 1px solid var(--success); color: var(--success);
    border-radius: 6px; padding: 0.1rem 0.5rem; cursor: pointer; font-size: 0.78rem; margin-left: 0.4rem;
}
.ex-accept-btn:hover { background: var(--success); color: #fff; }

.admin-settings-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    margin-top: 1.2rem;
}
.admin-settings-panel h3 { font-size: 0.95rem; margin-bottom: 1rem; color: var(--text); }
.admin-setting-row { margin-bottom: 1rem; }
.admin-setting-row label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 0.25rem;
}
.admin-setting-desc { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.4rem; }
.admin-setting-row input[type="number"] {
    width: 120px;
    padding: 0.45rem 0.7rem;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--mono);
}
.admin-setting-row input[type="number"]:focus { outline: none; border-color: var(--primary); }
.admin-checkbox-group { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.admin-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    min-width: auto;
}
.admin-checkbox-group input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}
.admin-radio-group { display: flex; flex-direction: column; gap: 0.45rem; }
.admin-radio-group label {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text-2);
    cursor: pointer;
}
.admin-radio-group input[type="radio"] { accent-color: var(--primary); }
.etalon-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; max-height: 320px; }
.etalon-table th, .etalon-table td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); }
.etalon-table th { color: var(--muted); font-weight: 600; }
.mwe-add-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.mwe-add-row input { flex: 1; min-width: 160px; padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.mwe-add-row select { padding: 0.4rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.mwe-item { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); font-size: 0.85rem; }
.mwe-item button { background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 0 0.3rem; }
.mwe-item button[title="Tasdiqlash"] { color: var(--success); }
.mwe-item button[title="Rad etish"] { color: var(--danger); }
.mwe-kind-tag { font-size: 0.72rem; color: var(--muted); background: var(--primary-soft); padding: 0.1rem 0.4rem; border-radius: 10px; }
.kpi-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.8rem; font-size: 0.85rem; }
.kpi-controls input[type="date"] { padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }

.class-syn-panel { margin: 0.4rem 0 0.8rem; padding: 0.6rem 0.7rem; border: 1px dashed var(--border, rgba(0,0,0,0.15)); border-radius: 8px; }
.class-syn-label { font-size: 0.78rem; color: var(--text-2); font-weight: 600; margin-bottom: 0.4rem; }
.class-syn-hint { font-weight: 400; color: var(--muted); }
.class-syn-add { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.class-syn-add select, .class-syn-add input { padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.82rem; }
.class-syn-add input { flex: 1; min-width: 120px; }
.class-syn-add button { padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-2, rgba(0,0,0,0.03)); color: var(--text); cursor: pointer; font-size: 0.8rem; }
.class-syn-add button:hover { border-color: var(--primary); color: var(--primary); }
.class-syn-list, #class-syn-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.class-syn-item { font-size: 0.8rem; background: var(--primary-soft); padding: 0.15rem 0.45rem; border-radius: 12px; }
.class-syn-item button { background: none; border: none; color: var(--danger); cursor: pointer; padding: 0 0.1rem; }
.class-syn-empty { font-size: 0.78rem; color: var(--muted); }
.class-syn-by { font-size: 0.7rem; color: var(--muted); font-style: italic; }
.csyn-like {
    background: none; border: 1px solid var(--border); border-radius: 10px;
    color: var(--muted); cursor: pointer; font-size: 0.72rem; padding: 0.05rem 0.4rem;
}
.csyn-like.liked { color: var(--danger); border-color: var(--danger); }
.csyn-del { background: none; border: none; color: var(--danger); cursor: pointer; padding: 0 0.1rem; }
.csyn-ai-title { font-size: 0.75rem; color: var(--text-2); margin: 0.5rem 0 0.3rem; }
.csyn-ai-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.csyn-ai-age { font-size: 0.75rem; font-weight: 700; color: var(--primary); min-width: 3.2rem; }
.class-syn-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.syn-chip { font-size: 0.8rem; padding: 0.2rem 0.55rem; border-radius: 12px; border: 1px solid var(--primary); color: var(--primary); background: none; cursor: pointer; }
.syn-chip:hover { background: var(--primary-soft); }

/* ---------- Kartochka konteyner (jadval o'rami) ---------- */
.card-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.2rem;
    overflow-x: auto;
}

/* ---------- RESPONSIVE (sahifalar) ---------- */
@media (max-width: 720px) {
    .archive-page, .dash-page { padding: 14px; }
    .expert-container { padding: 1rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .export-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .export-stats-tables { grid-template-columns: 1fr; }
    .tab-bar .tab-btn { font-size: 0.78rem; padding: 0.6rem 0.5rem; }
    .subtab-bar .subtab-btn { font-size: 0.72rem; padding: 0.45rem 0.5rem; }
    .data-table th, .data-table td { padding: 9px 10px; font-size: 12px; }
    .history-table th, .history-table td { padding: 0.45rem 0.45rem; }
    .add-user-form { flex-direction: column; align-items: stretch; }
    .add-user-form input, .add-user-form select { width: 100%; }
    .detail-label { min-width: 100px; }
    .action-buttons .submit-btn { min-width: 100%; order: 10; }
}

/* ═══ UI yaxshilanishlar (2026-09-15) ═══ */

/* Feature 2: annotatsiya ikonlarini kattalashtirish (ildiz shrift ~13.5px bo'lgani
   uchun rem qiymatlari kattaroq — ikonlar ko'zga aniq tashlansin) */
.lemma-edit-btn { font-size: 1.6rem; opacity: 0.9; padding: 0.15rem 0.5rem; line-height: 1; }
.lemma-edit-btn:hover { opacity: 1; }
.lemma-edit-save, .lemma-edit-cancel { font-size: 1.7rem; padding: 0.1rem 0.5rem; }
.ex-edit-btn { font-size: 1.15rem; padding: 0.3rem 0.6rem; opacity: 1; }  /* doim ko'rinadi */
.examples-list li .ex-edit-btn { opacity: 1; }
.ex-del-btn { font-size: 1.35rem; opacity: 0.85; padding: 0.1rem 0.45rem; }
.examples-list li .ex-del-btn { opacity: 0.85; }
.mwe-item button { font-size: 1.45rem; padding: 0.15rem 0.55rem; }
.csyn-like { font-size: 1.05rem; padding: 0.25rem 0.65rem; }
.csyn-del { font-size: 1.35rem; padding: 0.1rem 0.45rem; }

/* Feature 3: ish (job) progress bar */
.jobbar {
    display: inline-block; width: 120px; max-width: 100%; height: 8px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 6px; overflow: hidden; vertical-align: middle;
}
.jobbar > span {
    display: block; height: 100%; width: 0;
    background: var(--primary); border-radius: 6px; transition: width 0.4s ease;
}
.jobbar.done > span { background: var(--success, #2ec77d); }
.jobbar.error > span { background: var(--danger, #ff5470); }
.jobbar.queued { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, transparent 4px, transparent 8px); }
.jobbar.indet > span { width: 40%; animation: jobbar-indet 1.1s ease-in-out infinite; }
@keyframes jobbar-indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.jobbar-pct { font-size: 0.72rem; color: var(--text-2); margin-left: 0.4rem; vertical-align: middle; }
.job-prog-text { font-size: 0.78rem; color: var(--text-2); margin-top: 0.15rem; }

/* Feature 1: foydalanuvchi boshqaruv amallari */
.user-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.user-role-sel {
    font-size: 0.82rem; padding: 0.2rem 0.4rem; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.user-act-btn {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0.25rem 0.55rem; color: var(--text-2);
}
.user-act-btn:hover { border-color: var(--primary); color: var(--primary); }
.user-act-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.user-self-tag { font-size: 0.78rem; color: var(--muted); font-style: italic; }

/* ============== Foydalanuvchi sahifalari: tugmalar, teginish, harakat ============== */
body.user-ui > :not(.topbar) a.btn { text-decoration: none; }
body.user-ui > :not(.topbar) .page-title { color: var(--primary-text); }
html:not([data-theme="light"]) body.user-ui > :not(.topbar) .btn-primary { background: var(--primary-2); }
html:not([data-theme="light"]) body.user-ui > :not(.topbar) .btn-primary:hover { background: #4f33cc; }

@media (pointer: coarse) {
    body.user-ui > :not(.topbar) .legend-row { gap: 8px; }
    body.user-ui > :not(.topbar) .lg-chip { min-height: 40px; }
    body.user-ui > :not(.topbar) .pager-btn,
    body.user-ui > :not(.topbar) .tt-close { width: 44px; height: 44px; }
    body.user-ui > :not(.topbar) .tt-apply-btn,
    body.user-ui > :not(.topbar) .copy-simplified-btn,
    body.user-ui > :not(.topbar) .modal-foot .btn { min-height: 44px; }
    body.user-ui > :not(.topbar) .modal-close { width: 44px; height: 44px; }
    body.user-ui > :not(.topbar) .meta-actions .btn { min-height: 44px; }
    body.user-ui > :not(.topbar) .analysis-body { font-size: 16px; line-height: 2.1; }
    body.user-ui > :not(.topbar) .analysis-body .word { padding: 3px 4px; }
}

@media (prefers-reduced-motion: reduce) {
    body.user-ui > :not(.topbar),
    body.user-ui > :not(.topbar) *,
    body.user-ui > :not(.topbar) *::before,
    body.user-ui > :not(.topbar) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .analysis-body .word:hover,
    .analysis-body .word.active { transform: none; }
}

/* ============== Natija: yangi tekshiruv, saqlash holati, mehmon xabari ============== */
.meta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}
.meta-actions .btn { padding: 5px 8px; font-family: var(--sans); font-size: 12px; letter-spacing: 0; }
.save-status { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.save-status.is-ok { color: var(--success-text); }
.save-status.is-warn { color: var(--warning); }
.save-actions { display: inline-flex; gap: 8px; }
.save-actions:empty { display: none; }
.save-link {
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--primary-text);
    text-decoration: underline;
    cursor: pointer;
}
.results-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.guest-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    width: 100%;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
}
.guest-note p {
    flex: 1 1 280px;
    min-width: 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
}
.guest-note strong { color: var(--text); }
.guest-note .btn { text-decoration: none; }

/* ============== Bosh sahifa, kirish va natija: yangi matn bloklari ============== */
.hero-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 22px auto 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-2);
}
.hero-steps li { counter-increment: step; }
.hero-steps li::before {
    content: counter(step) ". ";
    font-weight: 700;
    color: var(--primary-text);
}
.hero-limits {
    max-width: 560px;
    margin: 14px auto 0;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}
.hero-privacy {
    max-width: 560px;
    margin: 12px auto 0;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-2);
    text-align: left;
}
.hero-privacy summary { cursor: pointer; text-align: center; color: var(--primary-text); }
.hero-privacy p { margin-top: 8px; line-height: 1.6; }
.form-hint {
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}
.modal-note { margin: 8px 0 0; }
.login-help { margin-top: 12px; text-align: center; }
.select-all { user-select: all; color: var(--text); font-weight: 600; }
.reg-benefits {
    margin: 0 0 16px;
    padding: 12px 14px 12px 30px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
}
.reg-benefits .reg-benefits-title { list-style: none; margin-left: -16px; font-weight: 600; color: var(--text); }
.age-block { min-width: 0; }
.age-heading {
    margin-bottom: 8px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}
.age-note {
    margin-top: 10px;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}
.age-cell-tag {
    margin-left: 4px;
    padding: 0 5px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
}

/* ============== Kitob sahifasidan matn olish ============== */
.upload-alt { grid-template-columns: repeat(3, 1fr); }
.upload-alt .btn { white-space: normal; text-align: center; line-height: 1.25; justify-content: center; }
@media (max-width: 680px) {
    .upload-alt { grid-template-columns: 1fr 1fr; }
    .upload-alt .btn-book { grid-column: 1 / -1; order: -1; }
}
#textModal .modal-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
.book-guide {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}
.book-guide summary { cursor: pointer; font-weight: 600; color: var(--primary-text); }
.book-guide ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.book-guide b { color: var(--text); }
.book-guide-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--warning);
    background: var(--surface);
    color: var(--text);
}
.book-guide-tip { margin-top: 8px; color: var(--muted); font-size: 12px; }
#textModalTitle:focus { outline: none; }

/* ============== Matn kiritish: sarlavha maydoni ============== */
.text-title-group { margin-bottom: 10px; }
#textTitle { border-color: var(--border-input); font-family: var(--sans); }
#textTitle::placeholder { color: var(--muted); opacity: 1; }

/* ============== Maqsad yosh tanlagichi: "Matn kim uchun?" ============== */
.target-picker { padding: 8px 8px 12px; }
/* .hero grid: chiplar qatori (telefonda gorizontal skroll) sahifani kengaytirmasin */
.hero-inner { min-width: 0; }
.target-label {
    margin-bottom: 8px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.target-optional { margin-left: 4px; font-weight: 400; font-size: 12px; color: var(--muted); }
.target-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.t-chip {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-height: 40px;
    padding: 4px 10px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-family: var(--sans);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.t-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.t-chip-main { font-size: 13px; font-weight: 700; color: var(--text); }
.t-chip-sub { font-size: 11px; color: var(--muted); white-space: nowrap; }
.t-chip:hover { border-color: var(--primary); }
.t-chip.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.t-chip:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.t-chip[data-group="1+"]    .t-chip-main { color: var(--age-g0-text); }
.t-chip[data-group="2+"]    .t-chip-main { color: var(--age-g1-text); }
.t-chip[data-group="3+"]    .t-chip-main { color: var(--age-g2-text); }
.t-chip[data-group="4+"]    .t-chip-main { color: var(--age-g3-text); }
.t-chip[data-group="5+"]    .t-chip-main { color: var(--age-g4-text); }
.t-chip[data-group="7+"]    .t-chip-main { color: var(--age-g5-text); }
.t-chip[data-group="10-12"] .t-chip-main { color: var(--age-g6-text); }
.target-chips[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.target-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; }
.target-row .target-label { margin: 0; }
.target-row .t-chip { min-height: 36px; padding: 3px 8px; }
.target-status { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.age-cell.target { box-shadow: inset 0 0 0 1px var(--border-2); }
@media (max-width: 720px) {
    /* Tanlagich qo'shilgach ham "Faylni tanlash" va "Matn kiritish" birinchi ekranda qolsin */
    .target-optional { display: block; margin: 2px 0 0; font-size: 11.5px; }
    .upload-zone { padding: 22px 16px; }
    .upload-icon-wrap { width: 44px; height: 44px; margin-bottom: 10px; }
    .target-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .t-chip { flex: 0 0 auto; }
    .target-row .target-chips { width: 100%; }
}
@media (pointer: coarse) {
    .t-chip, .target-row .t-chip { min-height: 44px; }
}
.target-note { margin-top: 3px; font-family: var(--sans); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ============== Xulosa kartasi: avval javob ============== */
.summary-card {
    margin-bottom: 18px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--sans);
}
.summary-card .target-row { margin-bottom: 16px; }
.summary-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.summary-title {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}
.fit-badge {
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.fit-badge[data-fit="good"]    { color: var(--success-text); background: var(--success-soft); }
.fit-badge[data-fit="partial"] { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.fit-badge[data-fit="hard"]    { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.summary-text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 80ch; }
.summary-explain {
    margin-top: 10px;
    padding: 8px 12px;
    border-left: 3px solid var(--warning);
    background: var(--bg-2);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
}
.summary-explain b { color: var(--text); }
.dist-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    margin: 14px 0 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-2);
}
.dist-bar span { min-width: 3px; }
.dist-bar span[data-group="1+"]    { background: var(--age-g0); }
.dist-bar span[data-group="2+"]    { background: var(--age-g1); }
.dist-bar span[data-group="3+"]    { background: var(--age-g2); }
.dist-bar span[data-group="4+"]    { background: var(--age-g3); }
.dist-bar span[data-group="5+"]    { background: var(--age-g4); }
.dist-bar span[data-group="7+"]    { background: var(--age-g5); }
.dist-bar span[data-group="10-12"] { background: var(--age-g6); }
.summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.summary-how { font-size: 13px; color: var(--text-2); max-width: 80ch; }
.summary-how summary { cursor: pointer; color: var(--primary-text); }
.summary-how p { margin-top: 6px; line-height: 1.55; }
@media (max-width: 720px) {
    .summary-card { padding: 14px; }
    .summary-title { font-size: 19px; }
    .summary-actions .btn { width: 100%; justify-content: center; }
}

/* ============== Qiyin so'zlar: ro'yxat, rejim va navigatsiya ============== */
.panel-tabs { display: flex; gap: 4px; min-width: 0; }
.ptab {
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.ptab:hover { color: var(--text); }
.ptab.active { color: var(--text); background: var(--surface); border-color: var(--border); }
.hard-body { padding: 14px 16px; overflow-y: auto; max-height: 560px; font-family: var(--sans); }
.hard-hint, .hard-empty { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.hard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hl-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    color: var(--text);
    font-family: var(--sans);
    text-align: left;
    cursor: pointer;
}
.hl-row:hover { border-color: var(--primary); }
.hl-row[data-group="4+"]    { border-left-color: var(--age-g3); }
.hl-row[data-group="5+"]    { border-left-color: var(--age-g4); }
.hl-row[data-group="7+"]    { border-left-color: var(--age-g5); }
.hl-row[data-group="10-12"] { border-left-color: var(--age-g6); }
.hl-row[data-group="2+"]    { border-left-color: var(--age-g1); }
.hl-row[data-group="3+"]    { border-left-color: var(--age-g2); }
.hl-word { font-size: 15px; font-weight: 700; }
.hl-meta { font-size: 12px; color: var(--muted); }
.hl-sugg { font-size: 13px; font-weight: 600; color: var(--success-text); }
.hl-done { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--success-text); }
.hl-row.done .hl-word { text-decoration: line-through; text-decoration-color: var(--muted); }

.analysis-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    font-family: var(--sans);
}
.view-mode { display: inline-flex; border: 1px solid var(--border-input); border-radius: var(--radius-sm); overflow: hidden; }
.vm-btn {
    padding: 6px 12px;
    border: 0;
    background: none;
    color: var(--text-2);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.vm-btn + .vm-btn { border-left: 1px solid var(--border-input); }
.vm-btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-text); }
.hard-nav { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.hard-pos { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
/* "Qiyin so'zlar" rejimi: faqat qiyin va almashtirilgan so'zlar ajralib turadi */
#analysisPanel.mode-hard .analysis-body .word:not(.out-of-grade):not(.replaced) { background: none; border-bottom-color: transparent; }
#analysisPanel.mode-hard .analysis-body .word.out-of-grade:not(.replaced) { background: color-mix(in srgb, var(--danger) 10%, transparent); }
#analysisPanel.mode-hard .lg-chip { display: none; }
.analysis-body .word.nav-current { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (pointer: coarse) {
    .ptab, .vm-btn { min-height: 44px; }
    .hl-row { min-height: 48px; }
}

/* ============== Soddalashtirish oynasi ============== */
.simplify-card { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
#simplifyTitle:focus { outline: none; }
.simplify-intro { margin: 0 0 12px; }
.simplify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; flex: 1; }
.simplify-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.simplify-side-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 36px; margin-bottom: 6px;
    font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text-2);
}
.simplify-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 6px; overflow-y: auto; max-height: 56vh; align-content: start; }
.sp-row {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-family: var(--sans);
}
.sp-row.accepted { border-left-color: var(--success); }
.sp-row.partial  { border-left-color: var(--warning); }
.sp-row.rejected { opacity: 0.7; }
.sp-main { grid-column: 1; font-size: 14px; color: var(--text-2); }
.sp-from { color: var(--text); font-weight: 600; }
.sp-to { color: var(--success-text); font-weight: 700; }
.sp-meta { grid-column: 1; font-size: 12px; color: var(--muted); }
.sp-warn { grid-column: 1; font-size: 12px; color: var(--warning); }
.sp-actions { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 6px; }
.sp-btn {
    min-width: 58px; min-height: 36px; padding: 4px 10px;
    border: 1px solid var(--border-input); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-2);
    font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
}
.sp-accept[aria-pressed="true"] { background: var(--success-soft); border-color: var(--success-text); color: var(--success-text); }
.sp-reject[aria-pressed="true"] { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.simplify-preview {
    flex: 1; overflow-y: auto; max-height: 56vh;
    padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--paper-text);
    font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.7;
}
.simplify-preview p { margin-bottom: 10px; }
.simplify-preview mark { background: rgba(22, 163, 74, 0.18); color: inherit; border-bottom: 2px solid #15803d; padding: 0 1px; }
@media (max-width: 760px) {
    .simplify-grid { grid-template-columns: 1fr; }
    .simplify-list, .simplify-preview { max-height: none; overflow: visible; }
    .simplify-card { display: block; overflow-y: auto; }
    .sp-row { grid-template-columns: 1fr; }
    .sp-actions { grid-column: 1; grid-row: auto; }
    .sp-btn { flex: 1; }
}
@media (pointer: coarse) { .sp-btn { min-height: 44px; } }

/* ============== O'qish rejimi ============== */
body.reader-open { overflow: hidden; }
.reader {
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow-y: auto;
    background: var(--paper);
    color: var(--paper-text);
}
.reader-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--paper-text) 14%, transparent);
    font-family: var(--sans);
}
.reader-bar .btn { color: var(--paper-text); border-color: color-mix(in srgb, var(--paper-text) 24%, transparent); background: color-mix(in srgb, var(--paper) 85%, #fff 15%); }
.reader-bar .btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--paper-text) 45%, transparent); }
.reader-bar .btn:disabled { opacity: 0.45; }
.reader-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reader-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--paper-text); cursor: pointer; }
.reader-toggle input { width: 18px; height: 18px; accent-color: #6244e8; }
.reader-size { min-width: 44px; justify-content: center; font-weight: 700; }
.reader-page {
    --reader-size: 22px;
    max-width: 68ch;
    margin: 0 auto;
    padding: 32px 20px 120px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--reader-size);
    line-height: 1.7;
}
.reader-title { margin-bottom: 0.9em; font-size: 1.35em; line-height: 1.25; text-align: center; }
.reader-sheet:not(.current) { display: none; }
.reader-sheet p { margin-bottom: 0.8em; }
.r-hard { text-decoration: underline; text-decoration-color: var(--age-g4); text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-skip-ink: none; }
.reader-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--paper-text) 14%, transparent);
    font-family: var(--sans);
    color: var(--paper-text);
}
.reader-arrow {
    width: 64px;
    height: 56px;
    border: 1px solid color-mix(in srgb, var(--paper-text) 24%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--paper) 85%, #fff 15%);
    color: var(--paper-text);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.reader-arrow:disabled { opacity: 0.35; cursor: default; }
.reader-pos { min-width: 70px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.reader :focus-visible { outline: 3px solid #6244e8; outline-offset: 2px; }
@media (max-width: 720px) {
    .reader-page { padding: 20px 16px 110px; }
    .reader-bar { padding: 8px 12px; }
}

@media print {
    body.reader-open > *:not(#reader) { display: none !important; }
    body.reader-open { overflow: visible; background: #fff; }
    body.reader-open::before, body.reader-open::after { display: none !important; }
    body.reader-open .reader { position: static; overflow: visible; background: #fff; }
    .reader-bar, .reader-nav { display: none !important; }
    .reader-page { max-width: none; padding: 0; font-size: 14pt; color: #111; }
    .reader-sheet:not(.current) { display: block; }
    .r-hard { text-decoration: none; }
}
/* Muallif topbaridagi "+ Yangi tekshiruv" havola-tugmasi (1-bosqichdan qolgan tagchiziq) */
#newUploadBtn { text-decoration: none; }

/* ============== Telefonda natija: tablar, bitta skroll, pastki varaq ============== */
.mobile-tabs, .m-pager { display: none; }
@media (max-width: 720px) {
    .mobile-tabs {
        display: flex;
        gap: 4px;
        margin: 0 0 10px;
        padding: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .mtab {
        flex: 1;
        min-height: 44px;
        padding: 4px 6px;
        border: 0;
        border-radius: var(--radius-sm);
        background: none;
        color: var(--text-2);
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .mtab.active { background: var(--primary-soft); color: var(--primary-text); }
    .results-grid[data-mtab="analysis"] > .panel:not(#analysisPanel) { display: none; }
    .results-grid:not([data-mtab="analysis"]) > #analysisPanel { display: none; }
    .panel-tabs { display: none; }
    .results-grid[data-mtab="hard"] > .panel:not(#analysisPanel) > .panel-head { display: none; }
    .panel { min-height: 0; }
    .m-pager:not([hidden]) { display: flex; }
    .source-body, .analysis-body, .hard-body { max-height: none; overflow: visible; }
    .analysis-tools { padding: 10px 14px; }

    .word-tooltip {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        animation: sheetUp 0.18s ease;
    }
    .word-tooltip .tt-arrow { display: none; }
    .tt-apply-btn { min-height: 44px; padding: 0 16px; }
    .tt-close { width: 44px; height: 44px; }
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ana-cancel { margin-top: 16px; }

/* ============== Arxiv: qidiruv, qaytarish, telefonda kartalar ============== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.archive-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; font-family: var(--sans); }
.archive-tools input, .archive-tools select {
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
}
.archive-tools input { flex: 1 1 240px; min-width: 0; }
.archive-tools input:focus, .archive-tools select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.archive-count { margin-left: auto; font-size: 13px; color: var(--muted); }
.undo-bar {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 310;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--text);
}
@media (max-width: 720px) {
    .archive-page { padding: 14px; }
    .archive-table { overflow: visible; }
    .archive-table table, .archive-table tbody, .archive-table tr, .archive-table td { display: block; min-width: 0; width: 100%; }
    .archive-table thead { display: none; }
    .archive-table tr {
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
    }
    .archive-table tr:hover td { background: none; }
    .archive-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 4px 0;
        border: 0;
        font-size: 13px;
    }
    .archive-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-family: var(--sans); font-size: 12px; }
    .archive-table td[data-label="Hujjat"] { display: block; padding-bottom: 6px; font-size: 15px; }
    .archive-table td[data-label="Hujjat"]::before { content: none; }
    .archive-table .actions-cell { padding-top: 8px; }
    .archive-table .action-btns { flex-wrap: wrap; }
    .archive-table .action-btns .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; font-size: 12px; }
}

/* ============== Topbar: telefonda "Menyu" (faqat foydalanuvchi sahifalari) ============== */
.nav-menu { display: contents; }
.nav-menu-btn { display: none; }
body.user-ui .top-actions > .nav-menu > .nav-out { order: 7; }
body.user-ui .top-actions > #newUploadBtn { order: 5; }
body.user-ui .top-actions > .theme-toggle { order: 8; }
@media (max-width: 720px) {
    body.user-ui .brand-tag { display: none; }
    body.user-ui .top-actions { flex-wrap: nowrap; }
    body.user-ui .nav-menu-btn { display: inline-flex; order: 1; }
    body.user-ui .nav-menu { display: none; }
    body.user-ui .nav-menu.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 6px);
        right: 14px;
        z-index: 60;
        min-width: 200px;
        padding: 6px;
        background: var(--surface);
        border: 1px solid var(--border-2);
        border-radius: var(--radius);
        box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
    }
    body.user-ui .nav-menu.open > * { justify-content: flex-start; min-height: 44px; width: 100%; }
    body.user-ui #newUploadBtn { white-space: nowrap; }
    body.user-ui #newUploadBtn .nu-long { display: none; }
    body.user-ui .top-actions { gap: 6px; }
}
.nu-short { display: none; }
@media (max-width: 720px) { body.user-ui #newUploadBtn .nu-short { display: inline; } }
@media (max-width: 359px) { body.user-ui .brand-name { display: none; } }

/* ============== So'z oynasi: tavsif, bosh shakl, misol, manba ============== */
@media (min-width: 721px) { .word-tooltip { width: 300px; max-height: calc(100vh - 16px); overflow-y: auto; } }
.tt-desc { margin: -2px 0 8px; font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--muted); }
.tt-lemma { margin: -4px 0 6px; font-family: var(--sans); font-size: 12.5px; color: var(--text-2); }
.tt-theme { margin-top: 8px; font-family: var(--sans); font-size: 12.5px; color: var(--text-2); }
.tt-example {
    margin: 8px 0 0;
    padding: 6px 10px;
    border-left: 3px solid var(--border-2);
    background: var(--bg-2);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.45;
    color: var(--text);
}
.tt-source { margin-top: 8px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.tt-source.expert { color: var(--success-text); font-weight: 600; }
.tt-source:empty { display: none; }

/* ============== Bir martalik ko'rsatma va yordam havolalari ============== */
.intro-tip {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary-soft);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}
.intro-tip ol { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 4px; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.intro-actions .btn { text-decoration: none; }
.hero-help { max-width: 560px; margin: 12px auto 0; font-family: var(--sans); font-size: 13px; }
.hero-help a, .summary-how a { color: var(--primary-text); }

/* ============== Yordam sahifasi ============== */
.help-page { max-width: 760px; font-family: var(--sans); color: var(--text-2); line-height: 1.6; }
.help-page h2 { margin: 28px 0 8px; font-family: var(--sans); font-size: 18px; color: var(--text); }
.help-page p, .help-page li { font-size: 15px; }
.help-page ol, .help-page ul { padding-left: 22px; display: grid; gap: 6px; }
.help-page b { color: var(--text); }
.help-groups { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14px; }
.help-groups th, .help-groups td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.help-groups th { font-size: 12px; color: var(--muted); font-weight: 600; }
.help-page details { margin-top: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.help-page summary { cursor: pointer; font-weight: 600; color: var(--text); }
.help-page details p { margin-top: 8px; }
.help-page .select-all { user-select: all; }
.results > .intro-tip { margin-top: -6px; margin-bottom: 18px; }

/* ============== Ulashish ============== */
.share-wrap { position: relative; }
.share-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
}
.share-menu .btn { justify-content: flex-start; text-decoration: none; min-height: 40px; }
@media (max-width: 720px) {
    .share-wrap { width: 100%; }
    .share-wrap > .btn { width: 100%; justify-content: center; }
    .share-menu { left: 0; right: 0; }
}

/* ============== Ommaviy lug'at: qidiruv, chiplar, kartalar ============== */
.lx-tools { display: grid; gap: 10px; margin-bottom: 16px; font-family: var(--sans); }
.lx-tools input {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
}
.lx-tools input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.lx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-chip {
    min-height: 34px;
    padding: 4px 12px;
    border: 1px solid var(--border-input);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.lx-chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-text); }
.lx-count { font-size: 13px; color: var(--muted); }
.lx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lx-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--sans);
}
.lx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lx-word { font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--text); }
.lx-meta { font-size: 13px; color: var(--muted); }
.lx-simple { font-size: 14px; color: var(--text-2); }
.lx-simple b { color: var(--success-text); }
.lx-example { margin-top: 2px; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; font-style: italic; line-height: 1.45; color: var(--text-2); }
.lx-expert { margin-top: 28px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lx-expert summary { cursor: pointer; font-family: var(--sans); font-weight: 600; color: var(--text); }
@media (pointer: coarse) { .lx-chip { min-height: 44px; } }
@media (max-width: 720px) {
    .lx-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .lx-chip { flex: 0 0 auto; }
    .lx-tools { min-width: 0; }
}

/* ============== So'z oynasi: barcha joylar, o'z variantim, fikr-mulohaza ============== */
.tt-all-btn {
    width: 100%;
    margin-top: 6px;
    min-height: 34px;
    border: 1px dashed var(--success-text);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--success-text);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.tt-more, .tt-fb { margin-top: 8px; font-family: var(--sans); font-size: 12.5px; color: var(--text-2); }
.tt-more summary, .tt-fb summary { cursor: pointer; color: var(--primary-text); font-weight: 600; }
.tt-alts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tt-alt {
    min-height: 26px;
    padding: 2px 10px;
    border: 1px solid var(--border-input);
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--text);
    font-family: var(--sans);
    font-size: 12px;
    cursor: pointer;
}
.tt-own { display: flex; gap: 6px; margin-top: 6px; }
.tt-own input, .tt-fb select, .tt-fb textarea {
    flex: 1;
    min-width: 0;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
}
.tt-own-all { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.tt-fb-body { display: grid; gap: 4px; margin-top: 6px; }
.tt-fb-body .btn { justify-self: start; margin-top: 4px; }
.tt-fb-done { color: var(--success-text); font-weight: 600; }
@media (pointer: coarse) {
    .tt-alt { min-height: 36px; padding: 4px 12px; }
    .tt-own input, .tt-fb select, .tt-fb textarea, .tt-all-btn { min-height: 44px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   UX-21: vizual tizim — faqat foydalanuvchi sahifalari (body.user-ui).
   Admin/ekspert sahifalari (annotate, dashboard) o'zgarmaydi.
   ══════════════════════════════════════════════════════════════════════════ */
/* Interfeys matni — sans (Inter, o'z serverdan: fonts.css); mono faqat kichik yorliqlar uchun */
body.user-ui { font-family: var(--sans); }
body.user-ui .btn, body.user-ui .hero h1, body.user-ui .page-heading, body.user-ui .meta-filename,
body.user-ui .upload-zone h2, body.user-ui .lg-chip, body.user-ui .tt-word,
body.user-ui .form-group input, body.user-ui .form-group select, body.user-ui .brand-name strong {
    font-family: var(--sans);
}
body.user-ui .btn { font-size: 13px; letter-spacing: 0; }
body.user-ui .hero h1 { letter-spacing: -0.02em; }
body.user-ui .panel-label, body.user-ui .meta-label, body.user-ui .page-title, body.user-ui .data-table th,
body.user-ui .tt-cat, body.user-ui .kbd, body.user-ui .hero-stamp { font-family: var(--mono); }

/* "Barcha yoshlar": so'z matni doim to'q, yosh guruhi fon emas, qalin tagchiziq bilan */
body.user-ui .analysis-body .word[data-group] { background: none; border-bottom-width: 3px; }
body.user-ui .analysis-body .word.out-of-grade { background: color-mix(in srgb, var(--danger) 9%, transparent); }
body.user-ui .analysis-body .word.replaced { background: var(--success-soft); }

/* Qorong'i tema: "tungi qog'oz" — asl matn, o'qish rejimi va soddalashtirish natijasi */
html:not([data-theme="light"]) body.user-ui {
    --paper: #25231d;
    --paper-text: #e9e2cf;
    --paper-muted: #a9a18b;
}
html:not([data-theme="light"]) body.user-ui .paper { box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
html:not([data-theme="light"]) body.user-ui .simplify-preview mark { background: rgba(74, 222, 128, 0.2); border-bottom-color: #4ade80; }

/* ============== UX-22: klaviatura ============== */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 1000;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-family: var(--sans);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: 8px; }
main:focus { outline: none; }
.age-cell:focus-visible, .analysis-body .word:focus-visible, .hl-row:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}
.age-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--primary); }

/* ============== Versiyalar (UX-23) ============== */
.summary-compare {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-size: 14px;
    color: var(--text-2);
}
.summary-compare[data-better="true"] { background: var(--success-soft); color: var(--success-text); font-weight: 600; }
.version-toggle {
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid var(--border-input);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary-text);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.version-row td { background: var(--bg-2); }
.version-row td:first-child { padding-left: 28px; }
.version-tag { font-size: 11px; font-weight: 600; color: var(--muted); }
@media (pointer: coarse) { .version-toggle { min-height: 32px; padding: 4px 10px; } }

/* ============== Fon tahlili (UX-24) ============== */
.bg-progress { max-width: 460px; margin: 18px auto 0; font-family: var(--sans); }
.bg-bar { height: 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; }
.bg-fill { width: 0; height: 100%; background: var(--primary); transition: width 0.4s ease; }
.bg-stage { margin-top: 8px; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.bg-jobs { display: grid; gap: 6px; margin-bottom: 12px; font-family: var(--sans); }
.bg-job {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px;
    padding: 10px 14px; border: 1px solid var(--primary); border-radius: var(--radius-sm);
    background: var(--primary-soft); font-size: 14px; color: var(--text);
}
.bg-job-pct { color: var(--primary-text); font-weight: 600; font-variant-numeric: tabular-nums; }