/* ══════════════════════════════════════════════════════════════════════════
   Burro AI — brend qatlami (faqat foydalanuvchi sahifalari: index, archive,
   lugat, login, yordam). styles.css dan KEYIN ulanadi va uning tokenlarini
   qayta belgilaydi. Admin/ekspert sahifalari (dashboard, annotate) bu faylni
   ulamaydi — ular o'zgarmaydi.
   Yorug' tema: «qaymoq» (qog'oz, o'rmon yashili, marjon, olxo'ri).
   Qorong'i tema: «tungi o'rmon».
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────── Tokenlar: qorong'i («tungi o'rmon») ───────────── */
:root {
    --bg:           #121b18;
    --bg-2:         #18241f;
    --surface:      #1b2925;
    --surface-2:    #22332d;
    --paper:        #2a2620;
    --paper-text:   #ede3cc;
    --paper-muted:  #b3a98f;

    --border:       #2e423a;
    --border-2:     #3a5249;
    --border-soft:  rgba(255, 255, 255, 0.06);

    --text:         #efe6d2;
    --text-2:       #d3cab6;
    --muted:        #aaa18d;
    --dim:          #6e6a5c;

    --primary:      #f0c357;
    --primary-2:    #ffd475;
    --primary-soft: rgba(240, 195, 87, 0.14);
    --primary-text: #f0c357;
    --on-primary:   #2a1f00;

    --accent:       #ff8a6b;      /* marjon */
    --heading:      #f3d98e;      /* sarlavhalar */
    --gold:         #f0c357;
    --on-gold:      #2a1f00;
    --drop-bg:      rgba(240, 195, 87, 0.07);
    --drop-border:  #6b5a2e;
    --sun:          rgba(240, 195, 87, 0.16);
    --stamp-bg:     rgba(255, 138, 107, 0.12);
    --stamp-border: rgba(255, 138, 107, 0.4);
    --stamp-text:   #ffb39f;

    --age-g0:   #4fc3a1;   --age-g0-soft: rgba(79, 195, 161, 0.16);   --age-g0-text: #6fd6b6;
    --age-g1:   #4db8da;   --age-g1-soft: rgba(77, 184, 218, 0.16);   --age-g1-text: #7ccbe6;
    --age-g2:   #7fa2f5;   --age-g2-soft: rgba(127, 162, 245, 0.16);  --age-g2-text: #a3bcf8;
    --age-g3:   #f0c357;   --age-g3-soft: rgba(240, 195, 87, 0.16);   --age-g3-text: #f3d07a;
    --age-g4:   #f59a5e;   --age-g4-soft: rgba(245, 154, 94, 0.16);   --age-g4-text: #f8b384;
    --age-g5:   #f07e82;   --age-g5-soft: rgba(240, 126, 130, 0.16);  --age-g5-text: #f5a0a3;
    --age-g6:   #a98bf5;   --age-g6-soft: rgba(169, 139, 245, 0.18);  --age-g6-text: #c3adf8;

    --success:      #4fc3a1;
    --success-text: #6fd6b6;
    --success-soft: rgba(79, 195, 161, 0.14);
    --border-input: #5d7a6f;
    --warning:      #f0c357;
    --danger:       #f07e82;
    --orange:       #f59a5e;
    --orange-soft:  rgba(245, 154, 94, 0.16);

    --topbar-bg:    rgba(18, 27, 24, 0.9);
    --grid-line:    transparent;
    --overlay-bg:   rgba(6, 10, 9, 0.7);
    --row-hover:    rgba(255, 255, 255, 0.03);
    --head-tint:    rgba(255, 255, 255, 0.03);
    --shadow-card:  0 24px 50px -30px rgba(0, 0, 0, 0.8);

    --radius:     14px;
    --radius-sm:  10px;
    --radius-lg:  24px;

    --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --mono:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --code:  ui-monospace, 'Cascadia Code', Consolas, monospace;

    color-scheme: dark;
}

/* ───────────── Tokenlar: yorug' («qaymoq») ───────────── */
html[data-theme="light"] {
    --bg:           #fbf6ec;
    --bg-2:         #f4ead6;
    --surface:      #fffdf8;
    --surface-2:    #f7eedc;
    --paper:        #fffefa;
    --paper-text:   #2b2620;
    --paper-muted:  #6b6457;

    --border:       #eadfc8;
    --border-2:     #e0d2b4;
    --border-soft:  rgba(72, 50, 20, 0.08);

    --text:         #23261f;
    --text-2:       #3d3a33;
    --muted:        #5e5a50;
    --dim:          #9c9483;

    --primary:      #1a5047;
    --primary-2:    #143f38;
    --primary-soft: #e3efea;
    --primary-text: #1a5047;
    --on-primary:   #fffdf8;

    --accent:       #e4512f;
    --heading:      #48082a;
    --gold:         #f0c357;
    --on-gold:      #3b2a00;
    --drop-bg:      #fff8e6;
    --drop-border:  #e2cc98;
    --sun:          #f7e1a8;
    --stamp-bg:     #fde7df;
    --stamp-border: #f7c6b7;
    --stamp-text:   #a63a1d;

    --age-g0:   #1f8a70;   --age-g0-soft: #ddf1ea;   --age-g0-text: #145c4b;
    --age-g1:   #2380a0;   --age-g1-soft: #ddf0f6;   --age-g1-text: #17657a;
    --age-g2:   #3f6fd8;   --age-g2-soft: #e2eafb;   --age-g2-text: #2a4e9e;
    --age-g3:   #d98e00;   --age-g3-soft: #fcefcf;   --age-g3-text: #7a5000;
    --age-g4:   #c9561a;   --age-g4-soft: #fde5d6;   --age-g4-text: #9a4213;
    --age-g5:   #c8363b;   --age-g5-soft: #fbe0e0;   --age-g5-text: #9c2328;
    --age-g6:   #6f4dda;   --age-g6-soft: #ece5fb;   --age-g6-text: #4a2fa3;

    --success:      #1f8a70;
    --success-text: #145c4b;
    --success-soft: #e3efea;
    --border-input: #8e856f;
    --warning:      #8a5a00;
    --danger:       #b8391b;
    --orange:       #c9561a;
    --orange-soft:  #fde5d6;

    --topbar-bg:    rgba(255, 253, 248, 0.92);
    --grid-line:    transparent;
    --overlay-bg:   rgba(35, 38, 31, 0.42);
    --row-hover:    rgba(72, 50, 20, 0.04);
    --head-tint:    #f7eedc;
    --shadow-card:  0 24px 60px -34px rgba(90, 60, 20, 0.42);

    color-scheme: light;
}

/* styles.css foydalanuvchi kontentida --muted ni ko'kish qiladi — brendda qaytaramiz */
body.user-ui > :not(.topbar) { --muted: #aaa18d; }
html[data-theme="light"] body.user-ui > :not(.topbar) { --muted: #5e5a50; }
html:not([data-theme="light"]) body.user-ui { --paper: #2a2620; --paper-text: #ede3cc; --paper-muted: #b3a98f; }

/* ───────────── Asos ───────────── */
html, body { background: var(--bg); background-image: none; }
body::before { display: none; }
body.user-ui { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--text); }
body.user-ui code, body.user-ui kbd, body.user-ui samp { font-family: var(--code); }
body.user-ui h1, body.user-ui h2, body.user-ui h3 { letter-spacing: -0.01em; }
body.user-ui a { color: var(--primary-text); }
body.user-ui ::selection { background: var(--gold); color: #23261f; }
body.user-ui :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ───────────── Yuqori panel ───────────── */
body.user-ui .topbar {
    min-height: 72px;
    padding: 10px clamp(16px, 4vw, 48px);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(1.2) blur(10px);
}
body.user-ui .brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #1a5047;
    color: #f0c357;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
html:not([data-theme="light"]) body.user-ui .brand-logo { background: #f0c357; color: #1a5047; }
body.user-ui .brand-name { flex-direction: column; align-items: flex-start; gap: 0; }
body.user-ui .brand-name strong { font-family: var(--sans); font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
body.user-ui .brand-tag {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ───────────── Tugmalar ───────────── */
body.user-ui .btn {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    gap: 8px;
}
body.user-ui .btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border: 0;
    box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--primary) 90%, transparent);
}
body.user-ui .btn-primary:hover { background: var(--primary-2); color: var(--on-primary); }
body.user-ui .btn-outline {
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border-2);
}
body.user-ui .btn-outline:hover { background: var(--surface-2); border-color: var(--border-input); }
body.user-ui .btn-ghost { color: var(--text-2); border-color: transparent; }
body.user-ui .btn-ghost:hover { background: var(--surface-2); color: var(--text); }
/* Oltin sariq — «fayl berish» amallari */
body.user-ui #browseBtn,
body.user-ui #newUploadBtn {
    background: var(--gold);
    color: var(--on-gold);
    border: 0;
    box-shadow: 0 12px 22px -14px rgba(170, 120, 0, 0.75);
}
body.user-ui #browseBtn:hover,
body.user-ui #newUploadBtn:hover { background: #f4cf6f; color: var(--on-gold); }

/* ───────────── Yosh tanlagichi ───────────── */
body.user-ui .target-label { font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--text); }
body.user-ui .target-optional { font-size: 13px; font-weight: 500; color: var(--muted); }
body.user-ui .target-chips { gap: 7px; }
body.user-ui .t-chip {
    --chip: var(--primary);
    --chip-soft: var(--primary-soft);
    min-height: 48px;
    padding: 7px 11px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    gap: 2px;
}
body.user-ui .t-chip[data-group="1+"]    { --chip: var(--age-g0); --chip-soft: var(--age-g0-soft); }
body.user-ui .t-chip[data-group="2+"]    { --chip: var(--age-g1); --chip-soft: var(--age-g1-soft); }
body.user-ui .t-chip[data-group="3+"]    { --chip: var(--age-g2); --chip-soft: var(--age-g2-soft); }
body.user-ui .t-chip[data-group="4+"]    { --chip: var(--age-g3); --chip-soft: var(--age-g3-soft); }
body.user-ui .t-chip[data-group="5+"]    { --chip: var(--age-g4); --chip-soft: var(--age-g4-soft); }
body.user-ui .t-chip[data-group="7+"]    { --chip: var(--age-g5); --chip-soft: var(--age-g5-soft); }
body.user-ui .t-chip[data-group="10-12"] { --chip: var(--age-g6); --chip-soft: var(--age-g6-soft); }
body.user-ui .t-chip-main { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; }
body.user-ui .t-chip[data-group] .t-chip-main::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip);
    flex-shrink: 0;
}
body.user-ui .t-chip:not([data-group]) .t-chip-main::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px dashed var(--muted);
    box-sizing: border-box;
}
body.user-ui .t-chip-sub { font-size: 12px; color: var(--muted); }
body.user-ui .t-chip:hover { border-color: var(--chip); }
body.user-ui .t-chip.selected {
    border: 2px solid var(--chip);
    background: var(--chip-soft);
    box-shadow: none;
    padding: 6.5px 10.5px;
}
body.user-ui .t-chip:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
body.user-ui .target-row .t-chip { min-height: 40px; padding: 5px 11px; }
body.user-ui .target-row .t-chip.selected { padding: 4.5px 10.5px; }

/* ───────────── Bosh sahifa ───────────── */
body.user-ui .hero { padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 48px) 48px; position: relative; overflow: hidden; }
body.user-ui .hero-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    gap: 24px;
    align-items: start;
    text-align: left;
    position: relative;
}
body.user-ui .hero-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.user-ui .hero-stamp {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--stamp-border);
    background: var(--stamp-bg);
    color: var(--stamp-text);
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
body.user-ui .hero-stamp::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
body.user-ui .hero h1 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(38px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--heading);
    text-wrap: balance;
    max-width: 16ch;
}
body.user-ui .hero h1 em { font-style: italic; color: var(--accent); }
body.user-ui .hero > .hero-inner > .hero-main > p:not([class]) {
    margin: 0;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-2);
}
body.user-ui .hero p b { color: var(--text); }

body.user-ui .upload-card {
    counter-reset: step;
    margin: 4px 0 0;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 28px;
    box-shadow: var(--shadow-card);
    text-align: left;
}
body.user-ui .upload-card .target-picker { margin: 0; }
body.user-ui .upload-card .target-label,
body.user-ui .upload-card .step-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}
body.user-ui .upload-card .target-label::before,
body.user-ui .upload-card .step-label::before {
    counter-increment: step;
    content: counter(step);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
body.user-ui .upload-card .step-label { margin: 0; }
body.user-ui .upload-zone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon title btn" "icon sub btn";
    align-items: center;
    column-gap: 18px;
    row-gap: 2px;
    padding: 18px 22px;
    border: 2px dashed var(--drop-border);
    border-radius: 20px;
    background: var(--drop-bg);
    text-align: left;
}
body.user-ui .upload-zone:hover,
body.user-ui .upload-zone.dragover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
body.user-ui .upload-icon-wrap {
    grid-area: icon;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--gold) 45%, var(--surface));
    color: #7a5000;
    border: 0;
}
html:not([data-theme="light"]) body.user-ui .upload-icon-wrap { color: var(--gold); background: rgba(240, 195, 87, 0.14); }
body.user-ui .upload-zone h2 { grid-area: title; margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--text); }
body.user-ui .upload-zone > p { grid-area: sub; margin: 0; font-size: 13.5px; color: var(--muted); }
body.user-ui .upload-zone .kbd {
    padding: 1px 7px;
    border-radius: 6px;
    border: 1px solid var(--border-2);
    background: var(--surface);
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
}
body.user-ui .upload-zone .btn { grid-area: btn; margin: 0; }
body.user-ui .upload-alt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
body.user-ui .upload-alt .btn { min-height: 52px; border-radius: 16px; justify-content: flex-start; padding: 10px 16px; text-align: left; }
body.user-ui .upload-alt .btn svg { color: var(--primary-text); flex-shrink: 0; }
body.user-ui #demoBtn svg { color: var(--accent); }

body.user-ui .hero-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 6px 0 0;
    padding: 0;
    counter-reset: step;
}
body.user-ui .hero-steps li {
    counter-increment: step;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-2);
    list-style: none;
}
body.user-ui .hero-steps li::before {
    counter-increment: none;
    content: counter(step);
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    background: none;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
}

/* Tumsol va namuna kartalar (bezak, ekran o'quvchidan yashirin) */
body.user-ui .hero-art { position: relative; min-height: 640px; }
body.user-ui .hero-sun {
    position: absolute;
    left: 50%;
    top: 70px;
    width: 440px;
    height: 440px;
    margin-left: -220px;
    border-radius: 50%;
    background: var(--sun);
}
body.user-ui .hero-mascot {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 500px;
    max-width: 104%;
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 24px 34px rgba(120, 70, 20, 0.28));
}
body.user-ui .art-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 16px 32px -18px rgba(70, 40, 10, 0.45);
    font-size: 14px;
    color: var(--text);
}
body.user-ui .art-label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
body.user-ui .art-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
body.user-ui .art-badge { padding: 2px 10px; border-radius: 8px; background: #c9561a; color: #fffdf8; font-weight: 800; }
body.user-ui .art-hard { text-decoration: underline; text-decoration-color: var(--age-g4); text-decoration-thickness: 3px; text-underline-offset: 5px; }
body.user-ui .art-arrow { color: var(--primary-text); font-weight: 800; }
body.user-ui .art-sugg { padding: 2px 10px; border-radius: 8px; background: var(--success-soft); color: var(--success-text); font-weight: 800; }
body.user-ui .art-age { left: 0; top: 60px; }
body.user-ui .art-word { right: 0; top: 380px; }
body.user-ui .art-pct {
    left: 24px;
    top: 540px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: #1a5047;
    border-color: #1a5047;
    color: #fffdf8;
    line-height: 1.35;
}
body.user-ui .art-num { font-family: var(--serif); font-size: 32px; font-weight: 700; color: #f0c357; }

@media (max-width: 1100px) {
    body.user-ui .hero-inner { grid-template-columns: minmax(0, 1fr); }
    body.user-ui .hero-art { display: none; }
    body.user-ui .hero h1 { max-width: 20ch; }
}
@media (max-width: 720px) {
    body.user-ui .hero { padding: 14px 16px 32px; }
    body.user-ui .hero-inner { gap: 14px; }
    body.user-ui .hero h1 { font-size: 31px; max-width: 11ch; }
    body.user-ui .hero-stamp { font-size: 12.5px; padding: 4px 11px; }
    /* Birinchi ekranda «Faylni tanlash» va «Matn kiritish» ko'rinsin (UX-7) — kirish matni telefonda yashiriladi */
    body.user-ui .hero > .hero-inner > .hero-main > p:not([class]) { display: none; }
    body.user-ui .hero-art {
        display: block;
        position: absolute;
        right: -8px;
        top: 34px;
        width: 140px;
        min-height: 0;
        height: 140px;
        pointer-events: none;
    }
    body.user-ui .hero-sun { top: 0; left: 0; margin: 0; width: 140px; height: 140px; }
    body.user-ui .hero-mascot { top: -6px; width: 150px; }
    body.user-ui .art-card { display: none; }
    body.user-ui .hero-art { top: 44px; width: 120px; height: 120px; }
    body.user-ui .hero-sun { width: 120px; height: 120px; }
    body.user-ui .hero-mascot { width: 128px; }
    body.user-ui .upload-card { padding: 16px; border-radius: 22px; gap: 14px; }
    body.user-ui .upload-zone {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "icon title" "icon sub" "btn btn";
        padding: 14px;
        row-gap: 4px;
    }
    body.user-ui .upload-zone .btn { margin-top: 10px; width: 100%; justify-content: center; }
    body.user-ui .upload-icon-wrap { width: 48px; height: 48px; }
    body.user-ui .upload-zone h2 { font-size: 18px; }
    body.user-ui .hero-steps { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    body.user-ui .upload-alt { grid-template-columns: 1fr 1fr; }
    body.user-ui .upload-alt .btn-book { grid-column: 1 / -1; order: -1; }
}

/* ══════════════════════════ Natija ekrani ══════════════════════════ */
body.user-ui .results { max-width: 1400px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 44px) 48px; }

/* Javob kartasi: chapda javob, o'ngda halqa va yosh o'lchagichi */
body.user-ui .summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: 32px;
    margin-bottom: 18px;
    padding: 26px 30px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 30px;
    box-shadow: var(--shadow-card);
}
body.user-ui .summary-main { display: flex; flex-direction: column; min-width: 0; }
body.user-ui .summary-card .target-row { margin-bottom: 18px; }
body.user-ui .target-row .target-label { font-size: 14.5px; }
body.user-ui .summary-head { gap: 10px 16px; }
body.user-ui .summary-title {
    font-family: var(--serif);
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--heading);
    text-wrap: balance;
}
body.user-ui .fit-badge {
    padding: 6px 14px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
}
body.user-ui .fit-badge[data-fit="good"]    { color: var(--age-g0-text); background: var(--age-g0-soft); border-color: color-mix(in srgb, var(--age-g0) 55%, transparent); }
body.user-ui .fit-badge[data-fit="partial"] { color: var(--age-g3-text); background: var(--age-g3-soft); border-color: color-mix(in srgb, var(--age-g3) 55%, transparent); }
body.user-ui .fit-badge[data-fit="hard"]    { color: var(--danger); background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
body.user-ui .summary-text { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 70ch; }
body.user-ui .summary-explain {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-left-width: 1px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--gold) 16%, var(--surface));
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}
body.user-ui .summary-explain:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.user-ui .summary-explain b { display: contents; }
body.user-ui .summary-explain .sep { display: none; }
body.user-ui .pre-word {
    padding: 3px 11px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}
body.user-ui .summary-compare {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--bg-2);
    font-size: 14.5px;
}
body.user-ui .summary-compare::before {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.user-ui .summary-compare[data-better="true"] { background: var(--success-soft); color: var(--success-text); font-weight: 700; }
body.user-ui .summary-card .dist-bar { display: none; }
body.user-ui .summary-actions { gap: 10px; margin-top: 18px; }
body.user-ui .summary-actions .btn { min-height: 48px; padding: 12px 18px; border-radius: 15px; }
body.user-ui .summary-how { flex-basis: 100%; font-size: 14px; }
body.user-ui .summary-how summary { font-weight: 700; }

body.user-ui .summary-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--gold) 9%, var(--bg));
    border: 1px solid var(--border);
    min-width: 0;
}
body.user-ui .fit-ring { position: relative; display: flex; align-items: center; gap: 18px; }
body.user-ui .fit-ring svg { width: 116px; height: 116px; flex-shrink: 0; transform: rotate(-90deg); }
body.user-ui .fit-ring circle { fill: none; stroke-width: 14; }
body.user-ui .fit-ring-track { stroke: var(--border); }
body.user-ui .fit-ring-arc { stroke: var(--primary); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
body.user-ui .fit-ring[data-fit="good"] .fit-ring-arc    { stroke: var(--age-g0); }
body.user-ui .fit-ring[data-fit="partial"] .fit-ring-arc { stroke: var(--age-g3); }
body.user-ui .fit-ring[data-fit="hard"] .fit-ring-arc    { stroke: var(--accent); }
body.user-ui .fit-ring-text { display: flex; flex-direction: column; gap: 2px; }
body.user-ui .fit-ring-text strong {
    position: absolute;
    left: 0;
    top: 0;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
}
body.user-ui .fit-ring-text span { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--text); }

/* Yosh o'lchagichi: 7 ta ustun (age-grid qayta chiziladi) */
body.user-ui .summary-side .age-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body.user-ui .summary-side .age-heading {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
body.user-ui .summary-side .age-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}
body.user-ui .summary-side .age-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    padding: 6px 2px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: center;
    box-shadow: none;
}
body.user-ui .summary-side .age-cell:hover { background: var(--row-hover); }
body.user-ui .summary-side .age-cell[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary); }
body.user-ui .summary-side .age-cell.target { box-shadow: none; }
body.user-ui .summary-side .age-cell-top { display: contents; }
body.user-ui .summary-side .age-cell-pct { order: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 800; color: var(--text); }
body.user-ui .summary-side .age-cell.dominant .age-cell-pct { font-size: 13.5px; }
body.user-ui .summary-side .age-cell-bar {
    order: 1;
    position: relative;
    height: 130px;
    border-radius: 0;
    background: transparent;
    border-bottom: 2px solid var(--border-2);
    overflow: visible;
}
body.user-ui .summary-side .age-cell.dominant .age-cell-bar { height: 130px; }
body.user-ui .summary-side .age-cell-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto !important;
    height: max(3px, var(--h, 0%));
    border-radius: 9px 9px 3px 3px;
    transition: height 0.6s ease;
}
body.user-ui .summary-side .age-cell.target .age-cell-fill { outline: 3px solid color-mix(in srgb, var(--age-g3) 35%, transparent); outline-offset: 2px; }
body.user-ui .summary-side .age-cell-name {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
}
body.user-ui .summary-side .age-cell-tag {
    padding: 0 6px;
    border-radius: 6px;
    border: 1.5px solid currentColor;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    background: transparent;
}
body.user-ui .summary-side .age-note { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Fayl qatori */
body.user-ui .meta-panel {
    display: block;
    margin-bottom: 18px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
body.user-ui .meta-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 0 4px;
}
body.user-ui .meta-label { display: none; }
body.user-ui .meta-filename { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--heading); }
body.user-ui .meta-sub { font-size: 13.5px; color: var(--muted); }
body.user-ui .meta-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body.user-ui .save-status { color: var(--success-text); font-weight: 700; }

/* Panellar */
body.user-ui .results-grid { gap: 20px; }
body.user-ui .panel {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 26px;
    box-shadow: none;
    overflow: hidden;
}
body.user-ui .panel-head { padding: 12px 18px; border-bottom: 1px solid var(--border); background: transparent; }
body.user-ui .panel-label { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
body.user-ui .panel-tabs, body.user-ui .view-mode {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
    background: var(--bg-2);
    border: 0;
}
body.user-ui .ptab, body.user-ui .vm-btn {
    min-height: 36px;
    padding: 6px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}
body.user-ui .ptab.active, body.user-ui .vm-btn[aria-pressed="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(40, 30, 10, 0.12);
}
body.user-ui .pager-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid var(--border-2);
    background: var(--surface);
    color: var(--text);
}
body.user-ui .panel-pager, body.user-ui .hard-pos { font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
body.user-ui .analysis-tools { padding: 10px 18px; border-bottom: 1px solid var(--border); }
body.user-ui .legend-row { padding: 8px 18px; border-bottom: 1px solid var(--border); }
body.user-ui .lg-chip { border-radius: 999px; font-family: var(--sans); font-weight: 700; }
body.user-ui .lg-hint { font-family: var(--sans); color: var(--muted); }
body.user-ui .dominant-tag {
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* Qog'oz (asl matn) */
body.user-ui .source-body { background: color-mix(in srgb, var(--gold) 8%, var(--bg)); }
body.user-ui .paper {
    border-radius: 6px;
    background: var(--paper);
    box-shadow: 0 1px 0 var(--border-2), 0 18px 40px -26px rgba(90, 60, 20, 0.5);
    font-family: var(--serif);
    font-size: 18.5px;
    line-height: 1.75;
}
body.user-ui .paper::before, body.user-ui .paper::after { display: none; }
body.user-ui .paper-title { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--heading); }
html:not([data-theme="light"]) body.user-ui .paper-title { color: #f3d98e; }

/* Tahlil matni: faqat qiyin so'zlar ajraladi, fon emas — tagchiziq */
body.user-ui .analysis-body { font-size: 17px; line-height: 2.15; color: var(--text); padding: 24px 28px; }
body.user-ui .analysis-body .word { border-radius: 6px; }
body.user-ui .analysis-body .word.out-of-grade,
body.user-ui #analysisPanel.mode-hard .analysis-body .word.out-of-grade:not(.replaced) {
    background: none;
    font-weight: 700;
    text-decoration: underline wavy var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
body.user-ui .analysis-body .word.out-of-grade[data-group="4+"]    { text-decoration-color: var(--age-g3); }
body.user-ui .analysis-body .word.out-of-grade[data-group="5+"]    { text-decoration-color: var(--age-g4); }
body.user-ui .analysis-body .word.out-of-grade[data-group="7+"]    { text-decoration-color: var(--age-g5); }
body.user-ui .analysis-body .word.out-of-grade[data-group="10-12"] { text-decoration-color: var(--age-g6); }
body.user-ui .analysis-body .word.active,
body.user-ui .analysis-body .word.nav-current {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    box-shadow: none;
}
body.user-ui .suggestion-badge {
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 800;
    background: var(--success-soft);
    color: var(--success-text);
}
body.user-ui .analysis-body .word.replaced { border-radius: 6px; border-bottom-style: solid; }

/* So'z oynasi */
body.user-ui .word-tooltip {
    border-radius: 22px;
    border: 1.5px solid var(--border-2);
    padding: 16px 18px 14px;
    box-shadow: 0 30px 60px -24px rgba(40, 25, 5, 0.5);
    font-family: var(--sans);
}
body.user-ui .tt-arrow { border-color: var(--border-2); }
body.user-ui .tt-word { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--heading); }
body.user-ui .tt-cat { font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; }
body.user-ui .tt-cat-dot { box-shadow: none; }
body.user-ui .tt-apply-btn { border-radius: 11px; font-family: var(--sans); font-weight: 800; }

/* Kutish va xato ekranlari */
body.user-ui .analyzing h2, body.user-ui .ana-error h2 { font-family: var(--serif); font-weight: 600; color: var(--heading); }
body.user-ui .loader { border-radius: 999px; }
body.user-ui .loader-bar { background: var(--gold); }
body.user-ui .bg-bar { height: 12px; background: var(--bg-2); border-color: var(--border); }
body.user-ui .bg-fill { background: var(--gold); }
body.user-ui .intro-tip { border-radius: 22px; border: 1.5px solid var(--border); background: var(--surface); }

@media (max-width: 1100px) {
    body.user-ui .summary-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    body.user-ui .results { padding: 12px 12px 32px; }
    body.user-ui .summary-card { padding: 16px; gap: 16px; border-radius: 24px; }
    body.user-ui .summary-title { font-size: 24px; }
    /* Telefonda: javob → halqa va o'lchagich → tugmalar */
    body.user-ui .summary-main { display: contents; }
    body.user-ui .summary-card .target-row { order: 1; margin: 0; }
    body.user-ui .summary-body { order: 2; }
    body.user-ui .summary-side { order: 3; }
    body.user-ui .summary-actions { order: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
    body.user-ui .summary-actions .btn { width: 100%; min-height: 48px; padding: 8px 10px; font-size: 14px; white-space: normal; line-height: 1.25; text-align: center; justify-content: center; }
    body.user-ui .summary-actions #showHardBtn, body.user-ui .summary-actions .summary-how { grid-column: 1 / -1; }
    body.user-ui .summary-actions .share-wrap { display: block; }
    body.user-ui .summary-text { font-size: 15.5px; }
    body.user-ui .summary-side { padding: 14px; }
    body.user-ui .fit-ring svg, body.user-ui .fit-ring-text strong { width: 88px; height: 88px; }
    body.user-ui .fit-ring-text strong { font-size: 22px; }
    body.user-ui .fit-ring-text span { font-size: 17px; }
    body.user-ui .summary-side .age-grid { gap: 4px; }
    body.user-ui .summary-side .age-cell-bar, body.user-ui .summary-side .age-cell.dominant .age-cell-bar { height: 72px; }
    body.user-ui .summary-side .age-cell-pct, body.user-ui .summary-side .age-cell.dominant .age-cell-pct,
    body.user-ui .summary-side .age-cell-name { font-size: 11.5px; }
    body.user-ui .summary-side .age-cell-tag { padding: 0 2px; font-size: 9px; border-width: 1px; }
    body.user-ui .summary-side .age-note { display: none; }
    body.user-ui .meta-filename { font-size: 20px; }
    body.user-ui .meta-actions { margin-left: 0; }
    body.user-ui .panel { border-radius: 20px; }
    body.user-ui .analysis-body { font-size: 16px; padding: 18px; }
}

/* ══════════════════════════ Boshqa sahifalar ══════════════════════════ */
body.user-ui .page-title {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
body.user-ui .page-heading {
    font-family: var(--serif);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--heading);
}
body.user-ui input[type="search"], body.user-ui input[type="text"], body.user-ui input[type="password"],
body.user-ui select, body.user-ui textarea {
    font-family: var(--sans);
    border-radius: var(--radius);
}

/* Mening matnlarim */
body.user-ui .data-table { border-radius: 24px; overflow: hidden; background: var(--surface); }
body.user-ui .data-table th {
    background: var(--head-tint);
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--muted);
}
body.user-ui .data-table td { font-family: var(--sans); font-size: 14.5px; font-variant-numeric: tabular-nums; }
body.user-ui .doc-title-link { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--text); text-decoration: none; }
body.user-ui .doc-title-link:hover { color: var(--primary-text); text-decoration: underline; }
body.user-ui .version-toggle {
    border: 1.5px solid var(--primary);
    background: var(--primary-soft);
    color: var(--primary-text);
    font-weight: 800;
}
body.user-ui .version-row td { background: color-mix(in srgb, var(--gold) 6%, var(--bg)); }
body.user-ui .group-badge { border-radius: 8px; font-family: var(--sans); font-weight: 800; }
body.user-ui .bg-jobs { gap: 10px; margin-bottom: 16px; }
body.user-ui .bg-job {
    align-items: center;
    padding: 14px 18px;
    border: 0;
    border-radius: 18px;
    background: #1a5047;
    color: #fffdf8;
    font-size: 15px;
}
body.user-ui .bg-job b { color: #fffdf8; }
body.user-ui .bg-job-pct { color: #f0c357; font-weight: 800; }
html:not([data-theme="light"]) body.user-ui .bg-job { background: #22332d; border: 1px solid #3a5249; }

/* Ommaviy lug'at */
body.user-ui .lx-tools input { border: 1.5px solid var(--border-2); border-radius: var(--radius); }
body.user-ui .lx-chip { border: 1.5px solid var(--border); font-weight: 700; }
body.user-ui .lx-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
body.user-ui .lx-grid { gap: 14px; }
body.user-ui .lx-card { padding: 16px 18px; border: 1.5px solid var(--border); border-radius: 20px; gap: 8px; }
body.user-ui .lx-word { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--heading); }
body.user-ui .lx-example { font-family: var(--serif); font-size: 15px; }
body.user-ui .lx-expert { border: 1.5px solid var(--border); border-radius: 20px; }

/* Kirish */
body.user-ui .login-card {
    border: 1.5px solid var(--border);
    border-radius: 28px;
    padding: 36px 34px;
    box-shadow: var(--shadow-card);
}
body.user-ui .login-card h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--heading); }
body.user-ui .tab-row { padding: 4px; border-radius: 14px; background: var(--bg-2); border: 0; }
body.user-ui .tab-btn { border-radius: 11px; font-family: var(--sans); font-weight: 700; letter-spacing: 0; text-transform: none; }
body.user-ui .tab-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(40, 30, 10, 0.12); }
body.user-ui .form-group label { font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
body.user-ui .form-group input, body.user-ui .form-group select {
    min-height: 48px;
    background: var(--surface);
    border: 1.5px solid var(--border-2);
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 15px;
}
body.user-ui .form-group input:focus, body.user-ui .form-group select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Yordam */
body.user-ui .help-page h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--heading); }
body.user-ui .help-page details { border: 1.5px solid var(--border); border-radius: 18px; }

/* O'qish rejimi: kitob sahifasi (qorong'i temada — «tungi qog'oz») */
body.user-ui .reader-bar { padding: 12px 20px; }
body.user-ui .reader-bar .btn, body.user-ui .reader-arrow {
    border: 1.5px solid color-mix(in srgb, var(--paper-text) 22%, transparent);
    background: transparent;
    border-radius: 12px;
}
body.user-ui .reader-toggle input { accent-color: var(--primary); }
body.user-ui .reader-page { font-family: var(--serif); line-height: 1.75; }
body.user-ui .reader-title { font-family: var(--serif); font-weight: 600; color: var(--heading); }
html:not([data-theme="light"]) body.user-ui .reader-title { color: #f3d98e; }
html:not([data-theme="light"]) body.user-ui .reader { background: #1d1a15; }
body.user-ui .reader :focus-visible { outline-color: var(--accent); }
body.user-ui .r-hard { text-decoration-color: var(--accent); }

/* ───────────── Telefon: ixcham yuqori panel va javob kartasi ───────────── */
@media (max-width: 720px) {
    body.user-ui .topbar { min-height: 60px; padding: 8px 12px; gap: 8px; }
    body.user-ui .brand-logo { width: 36px; height: 36px; border-radius: 11px; font-size: 21px; }
    body.user-ui .brand-name strong { font-size: 17px; }
    body.user-ui .brand-tag { display: none; }
    /* Javob kartasi birinchi ekranga sig'sin: halqa yashiriladi (foiz matnda bor), o'lchagich pastroq */
    body.user-ui .fit-ring, body.user-ui .summary-side .age-heading { display: none; }
    body.user-ui .summary-side { padding: 10px 10px 6px; gap: 6px; border-radius: 18px; }
    body.user-ui .summary-side .age-cell { padding: 2px 0 4px; gap: 3px; }
    body.user-ui .summary-side .age-cell-bar, body.user-ui .summary-side .age-cell.dominant .age-cell-bar { height: 40px; }
    body.user-ui .summary-explain { margin-top: 10px; padding: 10px 12px; gap: 6px; font-size: 13.5px; }
    body.user-ui .pre-word { padding: 2px 8px; font-size: 13.5px; }
    body.user-ui .summary-card .target-row .target-label { display: none; }
    body.user-ui .summary-head { gap: 6px 10px; }
    body.user-ui .summary-actions .btn { min-height: 44px; }
}

/* Natijadagi yosh tanlagichi ixcham: izoh faqat tanlangan chipda */
body.user-ui .target-row .t-chip { flex-direction: row; align-items: center; gap: 6px; }
body.user-ui .target-row .t-chip:not(.selected) .t-chip-sub { display: none; }
body.user-ui .target-row .t-chip.selected .t-chip-sub::before { content: '· '; }
@media (min-width: 721px) {
    body.user-ui #archiveTable .data-table td:first-child { min-width: 150px; }
    body.user-ui #archiveTable .data-table td:not(:first-child) { white-space: nowrap; }
    body.user-ui #archiveTable .data-table td .btn { min-height: 36px; padding: 6px 10px; font-size: 13.5px; }
}

/* Arxiv amallari: joy yetmasa ikki qatorga o'tadi (kesilib qolmasin) */
@media (min-width: 721px) {
    body.user-ui #archiveTable .actions-cell { width: 1%; white-space: nowrap; }
    body.user-ui #archiveTable .action-btns { display: flex; flex-wrap: nowrap; gap: 2px; }
    body.user-ui #archiveTable .action-btns .btn { padding: 6px 8px; }
}
/* Fayl qatori: eski ikki ustunli joylashuvdan qolgan ajratgich chiziq kerak emas */
body.user-ui .meta-file { border: 0; }
body.user-ui #pdfBtn { min-height: 40px; padding: 8px 14px; }
@media (min-width: 721px) and (max-width: 1200px) {
    body.user-ui #archiveTable .data-table th, body.user-ui #archiveTable .data-table td { padding-left: 8px; padding-right: 8px; }
}
/* O'rta ekranda jadval sig'sin: ikkinchi darajali ustunlar (Batafsil'da bor) yashiriladi */
@media (min-width: 721px) and (max-width: 1000px) {
    body.user-ui #archiveTable .col-opt { display: none; }
}
@media (min-width: 721px) and (max-width: 820px) {
    body.user-ui #archiveTable .col-opt2 { display: none; }
}
/* Tor telefon: brend nomi bir qatorda, yuqori panel bitta qatorda qolsin */
body.user-ui .brand-name strong { white-space: nowrap; }
@media (max-width: 380px) {
    body.user-ui .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
    body.user-ui .brand a { gap: 8px !important; }
    body.user-ui .top-actions { gap: 4px; }
    body.user-ui .top-actions .btn { padding-left: 10px; padding-right: 10px; }
}