/* ====================================================================
   TASARIM FONTLARI (Faz 1-B) — self-host, CDN YOK (air-gapped kurulum).
   Kaynak: tools/extract_design_fonts.py ile tasarım bundle'ından çıkarılan
   variable woff2'ler (static/webfonts/). latin-ext ZORUNLU: Ş/Ğ/İ/ı/ş/ğ
   U+0100-024F aralığındadır — atlanırsa Türkçe karakterler yedek fonta düşer.
   Kullanım: --font-display (başlık) / --font-body (gövde) token'ları.
   ==================================================================== */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../webfonts/bricolage-grotesque-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../webfonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../webfonts/bricolage-grotesque-var-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../webfonts/schibsted-grotesk-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../webfonts/schibsted-grotesk-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Body-class hiding rules — applied dominantly over any inline styles.
   Set by applyUiVisibility() based on admin settings. */
body.hide-debug #debugBtn { display: none !important; }
/* Faz 4 P1 (tasarım kararı): mod rozeti + salt-okunur mod etiketi öğrenci ve
   misafirden gizli (öğretmen+ görür); rozet poll'u hidden sınıfını her tazelemede
   kaldırdığı için gizleme bu body sınıfıyla yapılır. */
body.nt-role-hides-mode #modeBadge,
body.nt-role-hides-mode #currentModeLabel { display: none !important; }
/* Faz 4e (P2): debug araçları YALNIZ misafire kapalı — spesifikasyon "misafire
   kapalı (rol kontrolü)" der; öğrenci (eski davranıştaki gibi) show_debug_button
   ayarına tabidir. (Kapsama denetimi düzeltmesi: önceki kural öğrenciyi de
   kapsıyordu — spesifikasyon dışı genişletmeydi.) */
body.nt-role-guest #debugBtn,
body.nt-role-guest #debugToggleBtn,
body.nt-role-guest #debugPanel { display: none !important; }

/* ====================================================================
   Status badges (Phase 11) — used by:
   - admin Job Queue dashboard      (badge-pending, badge-scheduled, badge-running, ...)
   - feedback admin list            (badge-new, badge-reviewed, badge-resolved, badge-dismissed)
   - student progress / assignments (badge-not_started, badge-in_progress, badge-completed)
   Common pill styling + per-status accent color.
   ==================================================================== */
.badge-pending, .badge-not_started, .badge-running, .badge-in_progress,
.badge-scheduled, .badge-completed, .badge-failed, .badge-cancelled,
.badge-new, .badge-reviewed, .badge-resolved, .badge-dismissed,
.badge-active, .badge-inactive {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}
.badge-pending,    .badge-not_started,
.badge-reviewed                       { background: var(--badge-warn-bg);    color: var(--badge-warn-fg); }
.badge-running,    .badge-in_progress { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.badge-scheduled                       { background: var(--badge-accent-bg);  color: var(--badge-accent-fg); }
.badge-completed,  .badge-resolved,
.badge-active                          { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge-failed                          { background: var(--badge-error-bg);   color: var(--badge-error-fg); }
.badge-cancelled,  .badge-dismissed,
.badge-inactive                        { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
.badge-new                             { background: var(--badge-info-bg);    color: var(--badge-info-fg); }

:root {
    /* ============================================================
       ANTHROPIC DESIGN TOKEN SETİ (devir/tokens.css — Faz 1 A-1)
       Token ADLARI eski setle birebir korunur (app.js 162 kullanım +
       26 alias kırılmaz); değerler modernize edildi, tipografi/yarıçap/
       boşluk/gölge/hareket katmanları eklendi. A5: --accent-color METİN
       DEĞİLDİR; kontrast tools/check_contrast.py ile doğrulanır.
       ============================================================ */

    /* ---------- TİPOGRAFİ (YENİ) ----------
       Bricolage Grotesque (başlık) + Schibsted Grotesk (gövde);
       woff2'ler static/webfonts/ altından self-host (air-gapped, CDN yok). */
    --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --font-body: 'Schibsted Grotesk', 'Segoe UI', sans-serif;
    --fs-h1: clamp(19px, 2.4vw, 24px);
    --fs-h2: 16px;          /* bölüm başlığı */
    --fs-body: 13.5px;      /* standart arayüz metni */
    --fs-small: 12.5px;     /* yardımcı metin */
    --fs-label: 11px;       /* SÜTUN/ETİKET, weight 800 + letter-spacing .04em */

    /* ---------- YARIÇAP + BOŞLUK (YENİ) ---------- */
    --r-card: 16px;   /* panel/kart */
    --r-tile: 14px;   /* modül kartı, küçük kart */
    --r-input: 11px;  /* input, buton */
    --r-chip: 10px;   /* chip, küçük buton */
    --r-pill: 999px;  /* rozet */
    --sp-1: 6px;  --sp-2: 10px;  --sp-3: 14px;  --sp-4: 18px;  --sp-5: 24px;  --sp-6: 32px;

    /* ---------- GÖLGE (YENİ — koyu temada daha koyu) ---------- */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, .28);
    --shadow-pop:  0 14px 40px rgba(0, 0, 0, .45);
    --shadow-hover: 0 8px 24px rgba(99, 102, 241, .18);

    /* ---------- HAREKET (YENİ) ---------- */
    --dur-fast: 150ms;  --dur-med: 250ms;  --dur-slow: 400ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-inout: cubic-bezier(.65, 0, .35, 1);

    /* ---------- 1. TABAN YÜZEYLER (opak katman merdiveni) ---------- */
    --bg-color:        #0d0f1a;
    --surface-1:       #151827;   /* kart/panel gövdesi */
    --surface-2:       #1c2033;   /* iç panel / input yüzü */
    --surface-3:       #252a42;   /* hover / seçili satır */
    --bg-dark:         #101322;   /* sidebar/başlık zemini */
    --modal-bg:        #171a2b;
    --dropdown-bg:     #171a2b;
    --card-bg:         var(--surface-1);
    --input-bg:        var(--surface-2);
    --bg-secondary:    var(--surface-2);

    /* ---------- 2. METİN ---------- */
    --text-primary:    #f2f4fa;
    --text-secondary:  #a6adc5;   /* surface-1 üstünde 7.9:1 */
    --text-muted:      #8f97b3;   /* 5.9:1 — yardımcı metin alt sınırı */
    --text-disabled:   #6f7691;   /* yalnız devre dışı + cursor:not-allowed */

    /* ---------- 3. ANLAMSAL METİN RENKLERİ ---------- */
    --success-text:    #4ade80;
    --warn-text:       #fbbf24;
    --error-text:      #fca5a5;
    --info-text:       #93c5fd;
    --accent-text:     #a5b4fc;   /* accent'in OKUNABİLİR metin varyantı */

    /* ---------- 4. ACCENT / MARKA ---------- */
    --accent-color:    #6366f1;   /* yalnız ZEMİN + kenarlık + ikon; METİN DEĞİL */
    --accent-rgb:      99, 102, 241;
    --accent-primary:  var(--accent-text);
    --accent-glow:     rgba(99, 102, 241, .35);
    --accent-soft:     rgba(99, 102, 241, .16);  /* YENİ: seçili nav/sekme zemini */

    /* ---------- 5. DOLGU + ÜSTÜNDEKİ METİN (--on-warn SİYAH kalır:
       #f59e0b üstünde beyaz 2.15, siyah 9.78 — trafik-lambası kuralı) ---------- */
    --fill-success:  #15803d;  --on-success:  #ffffff;
    --fill-warn:     #f59e0b;  --on-warn:     #1f1300;
    --fill-error:    #c81e1e;  --on-error:    #ffffff;
    --fill-info:     #1d4ed8;  --on-info:     #ffffff;
    --fill-accent:   #4f46e5;  --on-accent:   #ffffff;
    --fill-neutral:  #4b5563;  --on-neutral:  #ffffff;
    --fill-debug:    #0e7490;  --on-debug:    #ffffff;
    --fill-prompt:   #7c3aed;  --on-prompt:   #ffffff;

    /* ---------- 6. ROZET ÇİFTLERİ (opak) ---------- */
    --badge-success-bg: #10291c;  --badge-success-fg: #4ade80;
    --badge-warn-bg:    #2e2416;  --badge-warn-fg:    #fbbf24;
    --badge-error-bg:   #2e1a20;  --badge-error-fg:   #fca5a5;
    --badge-info-bg:    #182238;  --badge-info-fg:    #93c5fd;
    --badge-accent-bg:  #1d2142;  --badge-accent-fg:  #a5b4fc;
    --badge-neutral-bg: #232838;  --badge-neutral-fg: #d1d5db;

    /* ---------- 7. KENARLIK ---------- */
    --border-color:    #262b40;   /* dekoratif ayraç */
    --border-strong:   #79809c;   /* WCAG 1.4.11 (3:1) gereken sınırlar */

    /* ---------- 8. GRADIENT ---------- */
    --gradient-1:            linear-gradient(120deg, #4f46e5 0%, #7c3aed 100%);
    --gradient-success:      linear-gradient(135deg, #15803d 0%, #136c34 100%);
    --gradient-danger:       linear-gradient(135deg, #c81e1e 0%, #a11414 100%);
    --card-gradient-neutral: linear-gradient(145deg, #1c2033 0%, #141726 100%);
    --card-gradient-success: linear-gradient(145deg, #14291a 0%, #101f14 100%);
    --gradient-brand-mark:   linear-gradient(135deg, #6366f1, #a855f7); /* YENİ: logo karesi */
    --gradient-hero-dark:    linear-gradient(140deg, #1e1b4b, #4c1d95); /* YENİ: oynatıcı/hero */

    /* ---------- 9. KATEGORİK PALET (ayırt edici; anlamsal değil) ---------- */
    --chart-1: #93c5fd;  --chart-2: #4ade80;  --chart-3: #fbbf24;
    --chart-4: #a5b4fc;  --chart-5: #f9a8d4;  --chart-6: #5eead4;
    --chart-7: #fdba74;  --chart-8: #d8b4fe;

    /* ---------- 10. MODÜL GRUP RENKLERİ (YENİ — ikon kutuları) ----------
       Üret=accent, Dinle&İzle=mor, Araçlar=teal. *-ico zeminleri ikon
       kutusudur; üzerindeki ikon rengi *-fg (koyu temada >=3:1). */
    --grp-uret-ico:    #23264a;  --grp-uret-fg:    #a5b4fc;
    --grp-medya-ico:   #2c2347;  --grp-medya-fg:   #c4b5fd;
    --grp-arac-ico:    #14312e;  --grp-arac-fg:    #5eead4;

    /* Üst şerit + amber duyuru (Ana Ekran.html tasarım şeridi) */
    --topbar-rgb: 16, 19, 34;
    --announce-bg: #251d10;  --announce-border: #6b4e16;
    --announce-text: #fbbf24;  --announce-muted: #d3a94e;

    /* Dosya tipi rozeti renkleri (sadakat #3) — anlamsal metin ailesinin
       alias'ları; iki temada da denetlenmiş değerler. */
    --ft-pdf: var(--error-text);  --ft-doc: var(--info-text);
    --ft-ppt: var(--warn-text);   --ft-txt: var(--text-secondary);

    /* Tasarım İKİ ayraç gücü kullanıyor: kart/başlık kenarı (--border-color) ve
       liste içi SATIR ayracı (daha soluk). İkincisinin karşılığı yoktu. */
    --border-subtle: #1e2233;

    --dropdown-text:   #f2f4fa;
    --shadow-color:    rgba(0, 0, 0, .3);
}

[data-theme="light"] {
    --bg-color:        #f3f5fa;
    --surface-1:       #ffffff;
    --surface-2:       #f6f8fc;
    --surface-3:       #e9edf5;
    /* --bg-dark AÇIK KALIR (tokens.css'in koyu önerisi UYGULANMADI): 8 açık-tema
       kuralı (.card/header/.toast/.debug-panel/.lms-panel/...) bunu AÇIK yüzey
       olarak tüketiyor. "Açık temada koyu sidebar" .nt-dark-island ile verilir
       (plan çelişki #5, ölçülmüş çakışma). */
    --bg-dark:         #ffffff;
    --modal-bg:        #ffffff;
    --dropdown-bg:     #ffffff;
    --card-bg:         var(--surface-1);
    --input-bg:        var(--surface-2);
    --bg-secondary:    var(--surface-2);

    --text-primary:    #0e1524;
    --text-secondary:  #5a6478;   /* beyaz üstünde 6.4:1 */
    --text-muted:      #6b7590;   /* 4.6:1 — normal metin alt sınırı.
                                     Prototipteki #8891a5 yalnız --text-disabled */
    --text-disabled:   #8891a5;

    --success-text:    #047857;
    --warn-text:       #92400e;
    --error-text:      #b91c1c;
    --info-text:       #1d4ed8;
    --accent-text:     #4338ca;

    --accent-color:    #4f46e5;
    --accent-rgb:      99, 102, 241;
    --accent-primary:  var(--accent-text);
    --accent-glow:     rgba(79, 70, 229, .25);
    --accent-soft:     #eef0ff;

    --fill-success:  #047857;  --on-success:  #ffffff;
    --fill-warn:     #f59e0b;  --on-warn:     #1f1300;
    --fill-error:    #c81e1e;  --on-error:    #ffffff;
    --fill-info:     #1d4ed8;  --on-info:     #ffffff;
    --fill-accent:   #4f46e5;  --on-accent:   #ffffff;
    --fill-neutral:  #4b5563;  --on-neutral:  #ffffff;
    --fill-debug:    #0e7490;  --on-debug:    #ffffff;
    --fill-prompt:   #7c3aed;  --on-prompt:   #ffffff;

    --badge-success-bg: #ecfdf5;  --badge-success-fg: #047857;
    --badge-warn-bg:    #fff7e6;  --badge-warn-fg:    #92400e;
    --badge-error-bg:   #fef2f2;  --badge-error-fg:   #b91c1c;
    --badge-info-bg:    #eff6ff;  --badge-info-fg:    #1d4ed8;
    --badge-accent-bg:  #eef0ff;  --badge-accent-fg:  #4338ca;
    --badge-neutral-bg: #f1f3f8;  --badge-neutral-fg: #3b4256;

    --border-color:    #e3e8f2;
    --border-strong:   #737d94;

    --gradient-1:            linear-gradient(120deg, #4f46e5 0%, #7c3aed 100%);
    --gradient-success:      linear-gradient(135deg, #15803d 0%, #136c34 100%);
    --gradient-danger:       linear-gradient(135deg, #c81e1e 0%, #a11414 100%);
    --card-gradient-neutral: linear-gradient(145deg, #ffffff 0%, #f3f5fa 100%);
    --card-gradient-success: linear-gradient(145deg, #ecfdf5 0%, #dcf7ea 100%);

    /* Kategorik palet — açık zeminde okunur KOYU varyantlar (tokens.css'te
       eksikti; mevcut açık değerler KORUNDU — plan Faz 1 A-1 doğrulanmış boşluk) */
    --chart-1: #1d4ed8;  --chart-2: #15803d;  --chart-3: #92400e;
    --chart-4: #4338ca;  --chart-5: #9d174d;  --chart-6: #0f766e;
    --chart-7: #9a3412;  --chart-8: #6b21a8;

    --grp-uret-ico:    #eef0ff;  --grp-uret-fg:    #4f46e5;
    --grp-medya-ico:   #f5f0ff;  --grp-medya-fg:   #7c3aed;
    --grp-arac-ico:    #ecfbf8;  --grp-arac-fg:    #0d9488;

    --topbar-rgb: 243, 245, 250;
    --announce-bg: #fff7e6;  --announce-border: #fcd9a0;
    --announce-text: #78350f;  --announce-muted: #92400e;

    --ft-pdf: var(--error-text);  --ft-doc: var(--info-text);
    --ft-ppt: var(--warn-text);   --ft-txt: var(--text-secondary);

    --border-subtle: #eef1f7;

    --shadow-card: 0 10px 30px rgba(14, 21, 36, .06);
    --shadow-pop:  0 14px 40px rgba(14, 21, 36, .16);
    --shadow-hover: 0 8px 24px rgba(79, 70, 229, .10);
    --dropdown-text:   #0e1524;
    --shadow-color:    rgba(14, 21, 36, .12);
}

/* KIRILIM REHBERİ (CSS değişkeni media sorgusuna giremez — bunlar SABİT rehber):
   mobil <=760px (alt sekme çubuğu, sidebar gizli) · tablet 761-1100 · desktop >=1101.
   Ayrıntı: "Proje arayüzü modernleştirme/devir/responsive-rehberi.md" */


/* Global thin scrollbar styling — boosted opacity for visibility on both themes
   (previously thumb at 0.35 alpha was invisible against accent backgrounds). */
* {
    scrollbar-width: auto;  /* Firefox — Faz 5.2: daha kalın, mouse ile kolay tutulur */
    scrollbar-color: rgba(var(--accent-rgb, 99, 102, 241), 0.65) transparent;  /* thumb track */
}
*::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
*::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.6);
    border-radius: 5px;
    min-height: 44px;
    transition: background 0.15s ease;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.9);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

[data-theme="light"] body { background: var(--bg-color); }
[data-theme="light"] *::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb, 99, 102, 241), 0.55); }
[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb, 99, 102, 241), 0.85); }
[data-theme="light"] .background-glob { opacity: 0.05; }
[data-theme="light"] .card { background: var(--bg-dark); border-color: var(--border-color); box-shadow: 0 2px 8px var(--shadow-color); }
[data-theme="light"] .modal { background: var(--modal-bg); border-color: var(--border-color); box-shadow: 0 8px 32px var(--shadow-color); }
[data-theme="light"] .modal input,
[data-theme="light"] .modal select,
[data-theme="light"] .modal textarea { background: var(--input-bg); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="light"] header { background: var(--bg-dark); border-color: var(--border-color); box-shadow: 0 1px 4px var(--shadow-color); }
[data-theme="light"] .btn-secondary { background: var(--input-bg); color: var(--text-primary); border-color: var(--border-color); }
/* Hover overrides for light theme — fixes the "metin okunmuyor" reports.
   Default `.btn-secondary:hover` keeps text in --text-primary which is
   already legible on light bg, but background was pure transparent so
   the button visually disappeared. Adding subtle background on hover. */
[data-theme="light"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    border-color: var(--accent-color);
}
/* `.btn-text:hover { color: white }` is unreadable on light bg → override */
[data-theme="light"] .btn-text:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}
/* Header username — ensure consistent contrast on light theme even when a
   parent receives :hover (some auth layouts re-color descendants on hover) */
[data-theme="light"] .user-display-name,
[data-theme="light"] .user-display-name:hover,
[data-theme="light"] *:hover .user-display-name {
    color: var(--text-primary) !important;
}
[data-theme="light"] .data-table th { background: var(--input-bg); }
[data-theme="light"] .data-table td { border-color: var(--border-color); }
[data-theme="light"] .lms-tab { color: var(--text-secondary); }
/* Active tab — gradient + white text dominant on light bg too */
[data-theme="light"] .lms-tab.active,
[data-theme="light"] .step2-tab.active {
    background: var(--gradient-1);
    color: white !important;
}
/* Form input focus — subtle indigo halo so users see what's focused on light bg */
[data-theme="light"] .setting-input:focus,
[data-theme="light"] .setting-select:focus,
[data-theme="light"] .form-row input:focus,
[data-theme="light"] .form-row select:focus,
[data-theme="light"] .form-row textarea:focus,
[data-theme="light"] textarea:focus {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    outline: none;
}
/* ====================================================================
   Light theme systematic audit (Phase 11.9) — extra overrides for
   common surfaces that look fine in dark but fade on the light palette.
   ==================================================================== */
/* Notification dropdown items: dark theme uses rgba white border-bottom,
   which is invisible on white bg. Replace with rgba black. */
[data-theme="light"] .notification-item {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .notification-item:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.10);  /* slightly stronger than dark for contrast */
}
/* Disabled buttons need stronger dim on light bg — opacity 0.5 isn't enough */
[data-theme="light"] button:disabled,
[data-theme="light"] .btn-primary:disabled,
[data-theme="light"] .btn-secondary:disabled {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-disabled);
    border-color: var(--border-color);
    cursor: not-allowed;
}
/* Feedback image thumbnail (Phase 10): hover border on light bg */
[data-theme="light"] .feedback-img-thumb:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 99, 102, 241), 0.18);
}
/* Module card hover — accent glow on dark is rgba indigo with high alpha;
   on light bg the box-shadow already works but ensure border becomes accent */
[data-theme="light"] .module-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb, 99, 102, 241), 0.25);
}
/* Toggle switch checked — accent green default fine, but strengthen contrast */
[data-theme="light"] .toggle-switch input:checked + .toggle-slider {
    background: var(--accent-color);
}
/* Modal backdrop — keep dark even in light theme so modal pops */
[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.45);
}
/* Code blocks (kbd, code, pre) — light theme needs darker bg for readability */
[data-theme="light"] kbd,
[data-theme="light"] code:not(.code-block code) {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
[data-theme="light"] .debug-panel { background: var(--bg-dark); }
[data-theme="light"] .toast { background: var(--bg-dark); border-color: var(--border-color); box-shadow: 0 4px 20px var(--shadow-color); }
/* Dark theme: force option dropdown colors (browser native) */
select option { background: var(--dropdown-bg, #171a2b); color: var(--dropdown-text, #f2f4fa); }

[data-theme="light"] select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea { background: var(--input-bg); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="light"] select option { background: var(--dropdown-bg, #ffffff); color: var(--dropdown-text, #0e1524); }
[data-theme="light"] .docset-selector select { background: var(--bg-dark); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="light"] .docset-item-pages input { background: var(--input-bg); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="light"] .docset-item.selected { background: rgba(var(--accent-rgb, 99, 102, 241),0.15); }
[data-theme="light"] .setting-select { background: var(--input-bg); color: var(--text-primary); }
[data-theme="light"] .chat-text-input input { background: var(--input-bg); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="light"] .page-range-slider { background: var(--input-bg); }
[data-theme="light"] .lms-panel { background: var(--bg-dark); border-color: var(--border-color); }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    /* Faz 1-B: gövde fontu token'dan; dosya kaybolursa Segoe UI zinciri devralır */
    font-family: var(--font-body, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    min-height: 100vh;
    /* Faz 62 (iş 18): hidden → clip. `clip` kaydırma kabı YARATMAZ (yapışkan üst şerit ve
       `position: sticky` sütunlar çalışmaya devam eder). ⚠ `html`'e overflow kuralı YAZILMAZ:
       html'deki bir overflow değeri body'ninkinin görüntü alanına yayılmasını keser ve yapışkan
       şeridi bozar. Asıl önlem içeriğin kendisinin taşmamasıdır; bu yalnız son güvence. */
    overflow-x: clip;
    position: relative;
}

/* Background Globs */
.background-glob {
    position: absolute;
    width: 600px;
    height: 600px;
    background: var(--accent-color);
    filter: blur(150px);
    border-radius: 50%;
    opacity: 0.15;
    top: -200px;
    left: -200px;
    z-index: -1;
    animation: float 10s ease-in-out infinite;
}

.glob-2 {
    top: auto;
    bottom: -200px;
    right: -200px;
    left: auto;
    background: #a855f7;
    animation-delay: 5s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(50px, 50px);
    }
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    /* Faz 62 (iş 18): telefonda 2rem (64 px toplam) dolgu içeriği 311 px'e indiriyordu */
    padding: clamp(12px, 4vw, 2rem);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.9rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.logo:hover {
    opacity: 0.85;
}

.logo i {
    color: var(--accent-text,#a5b4fc);
    font-size: 1.85rem;
}

/* Faz 5.1: Anasayfa modül LİSTE görünümü — kart yerine kompakt yatay satırlar.
   Daha yüksek specificity (.grid.list-mode ...) ile varsayılan .grid/.module-card'ı ezer. */
.modules-view-toggle .mv-btn.active {
    color: var(--accent-text);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
}
.grid.list-mode {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.grid.list-mode .module-card {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 0.85rem;
    padding: 0.55rem 0.9rem;
    min-height: auto;
}
.grid.list-mode .module-card .icon-box {
    margin: 0;
    flex-shrink: 0;
}
.grid.list-mode .module-card h3 { margin: 0; font-size: 0.95rem; }
.grid.list-mode .module-card p { margin: 0; flex: 1; font-size: 0.8rem; opacity: 0.85; }
.grid.list-mode .module-card .local-test-btn { margin: 0; flex-shrink: 0; }

/* Settings Container */
.settings {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Mode Toggle */
.mode-toggle-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.mode-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: color 0.3s;
}

.mode-label.active {
    color: var(--accent-text,#a5b4fc);
    font-weight: 600;
}
.mode-indicator {
    font-size: 0.75rem;
    color: var(--accent-text);
    background: rgba(var(--accent-rgb, 99, 102, 241),0.12);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}

/* C3: Birleşik mod rozeti (#modeBadge) — ana mod + alt mod TEK etikette.
   Renkler YALNIZ token (kural A5): online = uyarı çifti (--badge-warn-bg /
   --warn-text; --warn-text ile --badge-warn-fg her iki temada AYNI değerdir),
   offline/air-gapped = nötr rozet çifti. Sabit hex yok; fallback'ler zorunlu. */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color, #2c2f3c);
    background: var(--badge-neutral-bg, #242733);
    color: var(--badge-neutral-fg, #d1d5db);
}
.mode-badge i {
    font-size: 0.72rem;
}
/* Online = "internete çıkıyor" vurgusu */
.mode-badge.mode-badge-online {
    background: var(--badge-warn-bg, #31261a);
    color: var(--warn-text, #fbbf24);
    border-color: var(--warn-text, #fbbf24);
}
/* Offline / air-gapped = nötr ton */
.mode-badge.mode-badge-offline {
    background: var(--badge-neutral-bg, #242733);
    color: var(--badge-neutral-fg, #d1d5db);
    border-color: var(--border-color, #2c2f3c);
}

/* Mode indicator colors */
#modeLabelOnline.active {
    color: var(--success-text);  /* Green for online */
}

#modeLabelOffline.active {
    color: var(--warn-text);  /* Orange for offline/simulated */
}

.badge {
    background: var(--gradient-1);
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 1px;
}

h2 {
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card {
    /* Solid card background for readability. The previous
       semi-transparent + backdrop-filter combo (glass morphism) caused
       background text/visuals to bleed through and made content hard
       to read. Use the solid bg-dark colour instead. */
    background: var(--bg-dark, #1a1d2e);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: transform 0.2s, border-color 0.2s;
}

/* Upload Section */
.upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.upload-area:hover {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
}

.upload-area input {
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.upload-area i {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Paste Content Tab */
.paste-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.paste-title-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, rgba(0,0,0,0.2));
    color: var(--text-primary);
    font-size: 0.9rem;
}
.paste-textarea {
    width: 100%;
    min-height: 160px;
    max-height: 400px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, rgba(0,0,0,0.2));
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
    line-height: 1.5;
}
.paste-textarea:focus {
    border-color: var(--accent-color);
    outline: none;
}
.paste-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.paste-char-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.hidden {
    display: none !important;
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.module-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--border-color);
}

/* E: Modül kartı yüksekliğini azalt — YALNIZ .module-card kapsamında.
   `.card` GLOBAL kuralına DOKUNULMADI (onlarca başka bileşen ona bağlı).
   `.card`ın `margin-bottom: 2rem`ı burada 0'lanıyor: `.grid` zaten
   `gap: 1.5rem` uyguluyor, ikisi birden satır arasında ÇİFT boşluk yapıyordu.
   ALT PADDING 2rem (32px) TABANDIR — DAHA AZINA DÜŞÜRMEYİN: `?` yardım butonu
   `position:absolute; bottom:8px; height:24px` → alttan tam 32px kaplıyor
   (8+24). 1.75rem (28px) denendi ve butonun üst kenarı açıklama metninin son
   satırına 4px biniyordu; taban bu yüzden 2rem'dir. Üst padding, ikon boyutu ve
   h3/p margin'leri serbestçe kısıldı — kazanç oradan geliyor.
   list-mode (.grid.list-mode ...) daha yüksek specificity ile bunları ezmeye
   devam eder; kilitli-kart soluklaştırması ve kilit overlay'i etkilenmez. */
.module-card {
    padding: 1.1rem 1rem 2rem;
    margin-bottom: 0;
}
.module-card .icon-box {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    margin-bottom: 0.55rem;
}
.module-card h3 { margin: 0 0 0.25rem; }
.module-card p  { margin: 0; }

/* Faz 0.10: modül kartlarını görünürlük çözülene kadar gizle (flicker önlemi).
   applyUiVisibility() resolved-role (misafir/öğrenci/öğretmen/admin) ile çalışınca
   body.ui-vis-ready eklenir → kartlar görünür. Pre-auth aşamasında gizli kalmaları,
   misafirde "tüm modüller görünüp sonra gizlenme" flash'ini önler. JS her zaman
   checkAuth() ile resolved-role çağırır (hata olsa bile 'guest'), yani daima reveal olur. */
body:not(.ui-vis-ready) .module-card {
    visibility: hidden;
}

.module-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-glow);
}

.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent-text,#a5b4fc);
    margin-bottom: 1rem;
}

.disabled {
    opacity: 0.5;
    filter: grayscale(1);
}
.disabled .module-card {
    pointer-events: none;
}
.disabled .local-test-btn {
    pointer-events: auto;
    opacity: 1;
    filter: none;
    position: relative;
    z-index: 10;
    cursor: pointer;
}

/* Step 2: 2A İçerik türü seç | 2B Sesli komutla içerik üret */
.step2-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.step2-header h2 {
    margin-bottom: 0;
}
.step2-tabs {
    display: flex;
    gap: 0.5rem;
}
.step2-tab {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.2s;
}
.step2-tab:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}
.step2-tab.active {
    background: var(--gradient-1);
    border-color: transparent;
    color: white;
}
.step2-panel {
    display: none;
}
.step2-panel.active {
    display: block;
}

/* Voice command section (2B) */
.voice-command-section {
    padding: 1.5rem;
    max-width: 640px;
}
.voice-command-intro {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.voice-command-actions {
    margin-bottom: 1rem;
}
.voice-command-actions #voiceCommandBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.voice-command-listening {
    margin-top: 1rem;
}
.voice-command-transcript-wrap {
    margin-bottom: 0.75rem;
}
.voice-command-transcript-wrap label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.voice-command-transcript {
    min-height: 80px;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.voice-command-confirm {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.voice-command-summary-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.voice-command-summary {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.voice-command-confirm-actions {
    display: flex;
    gap: 0.5rem;
}
.voice-command-error {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 8px;
}
.voice-command-error-text {
    color: var(--error-text);
    margin: 0;
}
.voice-command-examples {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.voice-command-examples-label {
    font-weight: 600;
    margin-right: 0.35rem;
    display: block;
    margin-bottom: 0.5rem;
}
.voice-command-examples-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.voice-example-chip {
    display: inline-block;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.3);
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.voice-example-chip:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.3);
    color: var(--text-primary);
}

/* Voice command: parsing feedback */
.voice-command-parsing {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}
.voice-command-parsing-text {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.voice-command-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.voice-command-progress-bar {
    height: 100%;
    width: 35%;
    background: var(--gradient-1);
    border-radius: 3px;
    animation: voiceCommandProgress 1.2s ease-in-out infinite;
}
@keyframes voiceCommandProgress {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(250%); }
    100% { transform: translateX(-100%); }
}

/* Voice command: edit (Düzelt) */
.voice-command-edit {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.voice-command-edit-intro {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.voice-command-edit textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 0.75rem;
}
.voice-command-edit textarea::placeholder {
    color: var(--text-secondary);
}
.voice-command-edit-actions {
    display: flex;
    gap: 0.5rem;
}

/* Buttons */
.btn-primary {
    background: var(--gradient-1);
    border: none;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Solid dark backdrop instead of glass morphism so modal content
       reads cleanly against the background. */
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Etkin değer zaten 1000'di (aşağıdaki ikinci `.modal-overlay` tanımı aynı
       özgüllükte ve sonra geliyor); buradaki ölü `100` "100 mü 1000 mi" karışıklığı
       yaratıyordu. Katman sırası için `.feedback-fab` yanındaki nota bakın. */
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.2s ease-out;
    cursor: pointer;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal {
    background: #1a1d2d;
    padding: 2rem;
    border-radius: 16px;
    width: 480px;
    min-width: 360px;
    max-width: 95vw;
    min-height: 200px;
    max-height: 90vh;
    border: 1px solid var(--border-color);
    cursor: default;
    transform: scale(1);
    transition: transform 0.2s ease-out;
    resize: both;
    overflow: auto;
    --modal-zoom: 1.0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.url-preview {
    display: block;
    font-size: 0.78rem;
    color: var(--accent-text);
    word-break: break-all;
    background: rgba(167, 139, 250, 0.08);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(167, 139, 250, 0.2);
    font-family: 'Fira Mono', 'Consolas', monospace;
    min-height: 1.4em;
}

.propagation-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(167, 139, 250, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(167, 139, 250, 0.15);
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

.propagation-row .btn-propagate {
    flex: 1;
    min-width: 120px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(167, 139, 250, 0.3);
    background: rgba(167, 139, 250, 0.12);
    color: var(--accent-text);
    cursor: pointer;
    transition: background 0.2s;
}
.propagation-row .btn-propagate:hover {
    background: rgba(167, 139, 250, 0.25);
}

.modal.dragged {
    position: fixed;
    margin: 0;
}

.modal-overlay.modal-dragged {
    /* When modal is dragged, overlay no longer centers it */
    display: block;
}

.modal-overlay.hidden .modal {
    transform: scale(0.95);
}

/* Modal header row with drag handle and zoom controls */
.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    user-select: none;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.modal-header-row:active,
.modal-header-row.dragging {
    cursor: grabbing;
}

.modal-header-row h3 {
    margin: 0;
    flex: 1;
}

/* Zoom controls */
.modal-zoom-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.zoom-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}

.zoom-btn:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

.zoom-level {
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: center;
}

/* Modal zoom: font-size based for proper content reflow */
.modal input,
.modal select,
.modal textarea,
.modal button,
.modal label {
    font-size: inherit;
}

.modal .setting-input,
.modal .setting-select {
    font-size: inherit;
    padding: 0.5em 0.7em;
}

/* Settings source toggle row (legacy - kept for offline simulated modal) */
.settings-source-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.settings-source-row label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    white-space: nowrap;
}

.settings-source-row input[type="radio"] {
    width: auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Segmented pill toggle for .env / Cookie source */
.settings-source-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.settings-source-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.settings-source-toggle {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-dark, #0d0f1a);
}

.settings-source-toggle .source-btn {
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.settings-source-toggle .source-btn:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.settings-source-toggle .source-btn.active {
    background: var(--gradient-1);
    color: white;
    font-weight: 500;
}

.settings-source-toggle .source-btn:hover:not(.active) {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    color: var(--text-primary);
}

.settings-source-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.settings-source-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex: 1;
}

.modal input {
    width: 100%;
    padding: 0.8rem;
    margin: 1rem 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: white;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Loader */
.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--card-bg);
    border-top: 4px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Typography in content */
#outputArea {
    white-space: normal;
    line-height: 1.6;
    /* Tema-uyumlu: light=#1a1a2e (koyu), dark=#fff. Eski sabit #d1d5db açık tema beyaz
       arka planında soluk/okunmaz kalıyordu (özet/söyleşi/video/dikte çıktısı bunu miras alır). */
    color: var(--text-primary);
}

/* Output Section Styles */
.output-section {
    padding: 1.5rem 0;
}

.output-section h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--accent-text,#a5b4fc);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.script-text {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    border-radius: 12px;
    line-height: 2.2;
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

/* Light temada rgba(0,0,0,0.3) beyaz üstünde bulanık gri kutu yapar; metin artık koyu
   olduğundan arka planı hafiflet (.script-text = Söyleşi/Video script çıktı kutusu). */
[data-theme="light"] .script-text {
    background: rgba(0, 0, 0, 0.05);
}

/* Podcast/Audiobook Edit */
.podcast-edit-toolbar, .audiobook-edit-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}
.script-edit-area {
    width: 100%;
    min-height: 200px;
    max-height: 500px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.8;
    resize: vertical;
    margin-bottom: 1rem;
}
.script-edit-area:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}
.podcast-regen-section, .audiobook-regen-section {
    margin-bottom: 1rem;
}
.regen-details {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
.regen-details summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.regen-details[open] summary {
    margin-bottom: 0.75rem;
}
.regen-form textarea {
    width: 100%;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 0.5rem;
}
.regen-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Audiobook text edit */
.audiobook-text-edit-details {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
.audiobook-text-edit-details summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--accent-text,#a5b4fc);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.audiobook-text-edit-details[open] summary {
    margin-bottom: 0.75rem;
}
.audiobook-text-edit-content {
    margin-top: 0.5rem;
}
.audiobook-edit-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.audiobook-edit-status {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.speaker-name {
    font-weight: 700;
    font-size: 1.05em;
    display: inline;
}

.host-a {
    color: var(--chart-1);
    font-weight: 600;
}

.host-b {
    color: var(--chart-5);
    font-weight: 600;
}

.stage-direction {
    color: var(--chart-3);
    font-style: italic;
}

.scene-heading {
    color: var(--chart-4);
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
}

/* Flashcards Grid */
.flashcards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.flashcard {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem;
    position: relative;
}

.card-number {
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.card-front {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--border-color);
}

.card-front strong {
    color: var(--accent-text);
}

.card-back strong {
    color: var(--success-text);
}

/* Quiz List */
.quiz-list {
    margin-bottom: 1.5rem;
}

.quiz-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.quiz-item h4 {
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.options-list {
    list-style: none;
    padding-left: 1rem;
}

.options-list li {
    padding: 0.4rem 0.8rem;
    margin: 0.3rem 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
}

.options-list li.correct {
    background: rgba(74, 222, 128, 0.15);
    color: var(--success-text);
    font-weight: 600;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.action-buttons .btn-primary,
.action-buttons .btn-secondary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#audioPlayerContainer {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

#audioPlayerContainer audio {
    width: 100%;
}

/* Button icon alignment */
.btn-primary i,
.btn-secondary i {
    font-size: 0.9rem;
}

/* File Metadata Display */
.file-metadata {
    margin-top: 1.5rem;
    padding: 1.2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.file-metadata h4 {
    color: var(--accent-text,#a5b4fc);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
}

.meta-item {
    font-size: 0.85rem;
}

.meta-item .label {
    color: var(--text-secondary);
}

.meta-item span:last-child {
    color: var(--text-primary);
    font-weight: 500;
}

/* Prompt Modal */
.prompt-modal {
    width: 550px;
    max-width: 95vw;
}

/* Scrollbar for prompt modal */
.prompt-modal::-webkit-scrollbar {
    width: 8px;
}

.prompt-modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.prompt-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.prompt-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.prompt-modal h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prompt-history-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.prompt-history-row label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.prompt-history-row select {
    flex: 1;
    padding: 0.5rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.prompt-modal textarea {
    width: 100%;
    padding: 1rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 140px;
    margin-bottom: 1rem;
}
.modal textarea, .modal-card textarea {
    resize: vertical;
    min-height: 100px;
}
/* Fix radio/checkbox + text alignment in forms */
.form-row label:has(input[type="radio"]),
.form-row label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Audiobook player max-width to match other content.
   The section is rendered outside .app-container (below the main content),
   so it needs its own max-width + auto margin + horizontal padding to line
   up with the 1200px-wide main layout. */
.audiobook-player-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}
.audiobook-player {
    max-width: 100%;
    box-sizing: border-box;
}

.prompt-modal textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.prompt-edit-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon:hover {
    border-color: var(--accent-color);
    color: var(--accent-text,#a5b4fc);
}

.btn-text {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.btn-text:hover {
    color: white;
}

/* Host colors for script */
.host-c {
    color: var(--chart-2);
    font-weight: 600;
}

/* ========================================
   INTERACTIVE FLASHCARDS
   ======================================== */

.flashcard-viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
}

/* Progress Bar */
.flashcard-progress {
    width: 100%;
    max-width: 500px;
    margin-bottom: 1.5rem;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-1);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Flashcard Container */
.flashcard-container {
    perspective: 1000px;
    width: 100%;
    max-width: 500px;
    height: 320px;
    margin-bottom: 2rem;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.flashcard-inner.flipped {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.flashcard-front {
    background: var(--card-gradient-neutral);
}

.flashcard-back {
    background: var(--card-gradient-success);
    transform: rotateY(180deg);
    border-color: rgba(74, 222, 128, 0.3);
}

.flashcard-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.flashcard-front .flashcard-label {
    color: var(--accent-text);
}

.flashcard-back .flashcard-label {
    color: var(--success-text);
}

.flashcard-content {
    font-size: 1.2rem;
    line-height: 1.6;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flashcard-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flashcard-hint i {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Navigation Controls */
.flashcard-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.flashcard-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.flashcard-nav-btn:hover:not(:disabled) {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
    transform: scale(1.05);
}

.flashcard-nav-btn:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}

.flashcard-counter {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}

/* Action Buttons */
.flashcard-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-learned {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-learned:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(34, 197, 94, 0.3);
}

/* D9: "Bilmiyorum" — Leitner'e is_correct:false bildirir. "Öğrendim"in ikincil eşi: tonlu zemin +
   görünür kenarlık + uyarı renginde etiket (dolu düğme değil; tek birincil eylem "Öğrendim"). */
.btn-not-learned {
    background: var(--surface-2, #1c2033);
    border: 1px solid var(--fill-warn, #f59e0b);
    color: var(--warn-text, #fbbf24);
    padding: 0.8rem 1.5rem;
    min-height: 44px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-not-learned:hover {
    background: var(--surface-3, #252a42);
}

.btn-not-learned:active {
    transform: scale(0.97);
}

.btn-shuffle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-shuffle:hover {
    border-color: var(--accent-color);
    color: var(--accent-text,#a5b4fc);
}

.btn-reset {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: var(--error-text);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-reset:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

/* Completion State */
.flashcard-complete {
    text-align: center;
    padding: 3rem;
}

.flashcard-complete i {
    font-size: 4rem;
    color: var(--success-text);
    margin-bottom: 1rem;
}

.flashcard-complete h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.flashcard-complete p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Stats */
.flashcard-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-text,#a5b4fc);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Keyboard hint */
.keyboard-hints {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.keyboard-hints span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.keyboard-hints kbd {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
}

/* ========================================
   INTERACTIVE QUIZ VIEWER
   ======================================== */

.quiz-viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
}

.quiz-progress {
    width: 100%;
    max-width: 600px;
    margin-bottom: 1.5rem;
}

/* Quiz Question Card */
.quiz-question-card {
    width: 100%;
    max-width: 600px;
    background: var(--card-gradient-neutral);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.question-number {
    font-size: 0.85rem;
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.question-text {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Quiz Options */
.options-container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.quiz-option:hover:not(.correct):not(.wrong) {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
}

.quiz-option.selected {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
}

.quiz-option.correct {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.quiz-option.wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.quiz-option .fa-check {
    color: var(--success-text);
    margin-left: auto;
}

.quiz-option .fa-xmark {
    color: var(--error-text);
    margin-left: auto;
}

.option-letter {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.option-text {
    flex: 1;
}

/* Quiz Controls */
.quiz-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.quiz-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.quiz-nav-btn:hover:not(:disabled) {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
    transform: scale(1.05);
}

.quiz-nav-btn:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}

.quiz-counter {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}

/* Quiz Actions */
.quiz-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Quiz Stats */
.quiz-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.stat-correct {
    color: var(--success-text) !important;
}

.stat-wrong {
    color: var(--error-text) !important;
}

/* Quiz Results */
.quiz-results {
    text-align: center;
    padding: 2rem;
}

.results-header {
    margin-bottom: 2rem;
}

.results-header i {
    font-size: 3rem;
    color: var(--accent-text,#a5b4fc);
    margin-bottom: 1rem;
    display: block;
}

.results-header h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
}

.results-score {
    margin-bottom: 2rem;
}

.score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 8px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
}

.score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.results-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.result-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.result-stat.correct {
    color: var(--success-text);
}

.result-stat.wrong {
    color: var(--error-text);
}

.result-stat.unanswered {
    color: var(--text-secondary);
}

.results-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Answer Key */
.answer-key {
    padding: 1rem 0;
}

.answer-key h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-text,#a5b4fc);
    margin-bottom: 1.5rem;
}

.answer-key-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.answer-key-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

.answer-key-item.correct {
    border-left: 4px solid #22c55e;
}

.answer-key-item.wrong {
    border-left: 4px solid #ef4444;
}

.answer-key-item.unanswered {
    border-left: 4px solid var(--text-secondary);
}

.answer-key-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.answer-key-number {
    font-weight: 600;
    color: var(--text-primary);
}

.answer-key-item.correct .fa-check {
    color: var(--success-text);
}

.answer-key-item.wrong .fa-xmark {
    color: var(--error-text);
}

.answer-key-item.unanswered .fa-minus {
    color: var(--text-secondary);
}

.answer-key-question {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.answer-key-answers {
    font-size: 0.9rem;
}

.your-answer {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.correct-answer {
    color: var(--success-text);
}

/* ========================================
   VIDEO PRODUCTION STYLES
   ======================================== */

.production-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.production-stages .stage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.production-stages .stage.complete {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: var(--success-text);
}

.production-stages .stage.complete i {
    animation: checkPulse 0.5s ease;
}

@keyframes checkPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.production-stages .stage.error {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: var(--error-text);
}

.production-stages .stage.in-progress {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    border-color: var(--accent-color);
    color: var(--accent-text);
}

.production-stages .stage.in-progress i {
    animation: spin 1s linear infinite;
}

/* D20: buradaki ikinci `@keyframes spin` kaldırıldı — yukarıdaki (yükleme halkası) ile birebir
   aynıydı (0deg → 360deg); tek tanım ikisine de hizmet eder. */

/* Video Production Progress Bar */
.video-progress-container {
    width: 100%;
    margin: 1rem 0;
}

.video-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.video-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color) 0%, #a855f7 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
    animation: progressGlow 2s ease infinite;
}

@keyframes progressGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.video-progress-text {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Progress Log Area */
.progress-log-container {
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: var(--input-bg);
    max-height: 200px;
    overflow: hidden;
}

.progress-log {
    padding: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
}

.log-entry {
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.log-entry:last-child {
    border-bottom: none;
}

.log-time {
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

.log-info {
    color: var(--info-text);
}

.log-success {
    color: var(--success-text);
}

.log-error {
    color: var(--error-text);
}

.log-entry i {
    margin-right: 0.3rem;
}

/* Production Files List */
/* Scene Editor */
.scene-editor-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.scene-card {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.scene-card-header {
    padding: 0.5rem 0.75rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}
.scene-card-body {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
    padding: 0.75rem;
}
.scene-image-wrap {
    position: relative;
    grid-row: 1 / 3;
}
.scene-thumb {
    width: 150px;
    height: auto;
    border-radius: 6px;
    transition: opacity 0.3s;
}
.scene-image-actions {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
}
.scene-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.scene-text-wrap label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.scene-narration-edit {
    width: 100%;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
}
.scene-narration-edit:focus {
    border-color: var(--accent-color);
    outline: none;
}
.scene-text-actions {
    display: flex;
    gap: 0.3rem;
}
.scene-audio-wrap {
    align-self: end;
}
.scene-regen-prompt {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border: 1px solid var(--accent-color);
    border-radius: 12px;
    padding: 1.5rem;
    z-index: 10000;
    min-width: 350px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.scene-regen-prompt label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.scene-regen-prompt input {
    width: 100%;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
}
@media (max-width: 640px) {
    .scene-card-body {
        grid-template-columns: 1fr;
    }
    .scene-image-wrap { grid-row: auto; }
    .scene-thumb { width: 100%; max-width: 200px; }
}

.production-files {
    margin-top: 1.5rem;
}

.production-files h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 1rem;
    color: var(--accent-text,#a5b4fc);
}

.files-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-wrap: wrap;
}

.file-item span {
    flex: 1;
    min-width: 150px;
}

.file-item img {
    max-width: 120px;
    border-radius: 4px;
}

.file-item audio {
    flex: 1;
    min-width: 200px;
}

.btn-small {
    padding: 0.4rem 0.8rem;
    background: var(--fill-accent);
    color: var(--on-accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
}

.btn-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-small:disabled {
    background: var(--surface-3);
    color: var(--text-disabled);
    cursor: not-allowed;
    transform: none;
}

.voice-preview-btn {
    padding: 0.4rem 0.6rem;
    min-width: 32px;
    justify-content: center;
}

/* Video Settings Panel */
.video-settings-panel .setting-group {
    margin-bottom: 0.5rem;
}

.video-settings-panel select {
    cursor: pointer;
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

.video-settings-panel select option {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    padding: 0.5rem;
}

.video-settings-panel select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.video-settings-panel input[type="checkbox"] {
    cursor: pointer;
}

/* ========================================
   API KEY MANAGEMENT MODAL
   ======================================== */

.api-modal {
    width: 640px;
    max-width: 92vw;
    max-height: 88vh;
}

.api-modal h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-text,#a5b4fc);
    margin-bottom: 0.5rem;
}

.api-input-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.api-input-section label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.api-key-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.api-key-row input {
    margin: 0 !important;
}

.api-keys-list-section {
    margin-top: 1.5rem;
}

.api-keys-list-section label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.api-keys-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.no-keys-message {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

.api-key-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s;
}

.api-key-item:hover {
    border-color: var(--accent-color);
}

.api-key-item.active {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.api-key-info {
    flex: 1;
}

.api-key-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.api-key-name .active-badge {
    font-size: 0.7rem;
    background: var(--fill-success);
    color: var(--on-success);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 400;
}

.api-key-preview {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.api-key-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.api-key-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-activate {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    border: 1px solid var(--accent-color);
    color: var(--accent-text);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.btn-activate:hover {
    background: var(--fill-accent);
    color: var(--on-accent);
}

.btn-delete-key {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: var(--error-text);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.btn-delete-key:hover {
    background: var(--fill-error);
    color: var(--on-error);
}

/* ========================================
   API Modal Tabs
   ======================================== */

.api-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    flex-shrink: 0;
}

.api-tab {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.api-tab:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.api-tab.active {
    background: var(--gradient-1);
    border-color: transparent;
    color: white;
}

.api-tab-content {
    display: none;
}

.api-tab-content.active {
    display: block;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ========================================
   TTS Settings Styles
   ======================================== */

.tts-setting-group {
    margin-bottom: 1.5rem;
}

.tts-setting-group label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.tts-setting-group label i {
    margin-right: 0.5rem;
    color: var(--accent-text,#a5b4fc);
}

.tts-provider-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option:hover {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    margin-top: 2px;
}

.radio-option input[type="radio"]:checked + .radio-label strong {
    color: var(--accent-text,#a5b4fc);
}

.radio-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.radio-label strong {
    color: var(--text-primary);
}

.radio-label small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.elevenlabs-settings {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.2);
    border-radius: 10px;
    display: none;
}

.elevenlabs-settings.visible {
    display: block;
}

.elevenlabs-status {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    padding: 0.5rem;
    border-radius: 6px;
}

.elevenlabs-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-text);
}

.elevenlabs-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-text);
}

.elevenlabs-status.loading {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
    color: var(--accent-text);
}

/* Speed Control */
.speed-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.speed-control input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    appearance: none;
    cursor: pointer;
}

.speed-control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.speed-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#speedRateValue {
    font-weight: 600;
    color: var(--accent-text,#a5b4fc);
    min-width: 40px;
    text-align: center;
}

.speed-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.speed-preset {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.speed-preset:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.speed-preset.active {
    background: var(--fill-accent);
    border-color: var(--accent-color);
    color: var(--on-accent);
}

/* .btn-small duplicate removed - see definition above */

/* ========================================
   Content Settings (Duration, FPS, etc.)
   ======================================== */

.content-settings {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.setting-row {
    margin-bottom: 1.25rem;
}

/* Toggle rows: label left, switch right */
.setting-row.setting-row-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.setting-row.setting-row-toggle label:first-of-type {
    margin-bottom: 0;
    flex: 1;
}

.setting-row:last-child {
    margin-bottom: 0;
}

.setting-row label {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.setting-row label i {
    margin-right: 0.5rem;
    color: var(--accent-text,#a5b4fc);
}

.setting-row select {
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.setting-row select:focus {
    border-color: var(--accent-color);
    outline: none;
}

.setting-row .hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Duration Control */
.duration-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.duration-control input[type="range"] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--border-color);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}

.duration-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.duration-control input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#durationValue {
    font-weight: 600;
    color: var(--accent-text,#a5b4fc);
    min-width: 50px;
    text-align: center;
    font-size: 1.1rem;
}

.duration-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.duration-preset {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.duration-preset:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.duration-preset.active {
    background: var(--fill-accent);
    border-color: var(--accent-color);
    color: var(--on-accent);
}

/* FPS Control */
.fps-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fps-control input[type="range"] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--border-color);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}

.fps-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.fps-control input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#fpsValue {
    font-weight: 600;
    color: var(--accent-text,#a5b4fc);
    min-width: 40px;
    text-align: center;
}

/* TTS Settings Grid */
.tts-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
}

.tts-provider-select label,
.tts-speed-select label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.tts-provider-select select {
    width: 100%;
    padding: 0.5rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.speed-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.speed-control input[type="range"] {
    flex: 1;
    height: 5px;
    border-radius: 2.5px;
    background: var(--border-color);
    appearance: none;
    cursor: pointer;
}

.speed-control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#speedRateValue {
    font-weight: 600;
    color: var(--accent-text,#a5b4fc);
    min-width: 35px;
    text-align: center;
    font-size: 0.9rem;
}

/* ========================================
   Speaker Configuration
   ======================================== */

.speakers-config {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.speaker-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    flex-wrap: wrap;
}

.speaker-row:last-child {
    margin-bottom: 0;
}

.speaker-number {
    font-weight: 600;
    color: var(--accent-text,#a5b4fc);
    min-width: 24px;
}

.speaker-name,
.speaker-gender,
.speaker-profile {
    padding: 0.5rem 0.75rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.speaker-name {
    flex: 1;
    min-width: 100px;
}

.speaker-gender {
    min-width: 80px;
}

.speaker-profile {
    min-width: 120px;
}

.speaker-custom-name {
    flex: 1;
    min-width: 100px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-dark);
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.speaker-name:focus,
.speaker-gender:focus,
.speaker-profile:focus,
.speaker-custom-name:focus {
    outline: none;
    border-color: var(--accent-color);
}

@media (max-width: 600px) {
    .speaker-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .speaker-name,
    .speaker-gender,
    .speaker-profile {
        width: 100%;
    }
}

/* ========================================
   Page Range Selection
   ======================================== */

.page-range-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.page-range-section h4 {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.page-range-section h4 i {
    color: var(--error-text);
    margin-right: 0.5rem;
}

.page-range-options {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

/* Kolay tıklanır chip görünümü: tüm kutu tıklama hedefi (kenarlık + dolgu +
   hover). Seçili durum :has ile vurgulanır; :has desteklemeyen eski
   tarayıcıda chip yine büyük/tıklanabilir kalır (radio noktası seçimi gösterir). */
.radio-option-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
}

.radio-option-inline:hover {
    border-color: var(--accent-color);
}

.radio-option-inline:has(input[type="radio"]:checked) {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
}

.radio-option-inline input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
}

[data-theme="light"] .radio-option-inline {
    background: #ffffff;
}
[data-theme="light"] .radio-option-inline:has(input[type="radio"]:checked) {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.10);
}

.page-range-slider {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.range-inputs label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.range-inputs input[type="number"] {
    width: 70px;
    padding: 0.4rem 0.6rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    text-align: center;
    font-size: 0.9rem;
}

.range-inputs input[type="number"]:focus {
    border-color: var(--accent-color);
    outline: none;
}

.dual-range-container {
    position: relative;
    height: 30px;
    margin: 1rem 0;
}

.dual-range {
    position: absolute;
    width: 100%;
    height: 6px;
    top: 12px;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.dual-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
}

.dual-range::-webkit-slider-thumb {
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--gradient-1);
    border: 2px solid white;
    cursor: pointer;
    pointer-events: auto;
    margin-top: -10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.dual-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--gradient-1);
    border: 2px solid white;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ========================================
   Document Preview
   ======================================== */

/* ============================================
   MULTI-DOCUMENT LIST
   ============================================ */
.doc-list-container {
    margin-top: 1.25rem;
}

.doc-list-container h4 {
    color: var(--accent-text,#a5b4fc);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.doc-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    transition: all 0.2s;
    cursor: pointer;
}

.doc-list-item:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
    border-color: var(--accent-color);
}

.doc-list-item.active {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    border-color: var(--accent-color);
}

.doc-list-item .doc-icon {
    color: var(--accent-text,#a5b4fc);
    font-size: 1rem;
    flex-shrink: 0;
}

.doc-list-item .doc-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.doc-list-item .doc-size {
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.doc-list-item .doc-remove-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.doc-list-item .doc-remove-btn:hover {
    color: var(--error-text);
    background: rgba(239, 68, 68, 0.15);
}

/* ============================================
   DOCUMENT PREVIEW TABS
   ============================================ */
.doc-tabs {
    display: flex;
    gap: 0;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

.doc-tabs::-webkit-scrollbar {
    display: none;
}

.doc-tab {
    padding: 0.55rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.doc-tab.active {
    color: var(--accent-text);
    border-bottom-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
}

/* ============================================
   AGGREGATE METADATA (TOTALS)
   ============================================ */
.doc-total-metadata {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}

.doc-total-metadata h4 {
    color: var(--accent-text);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.document-preview {
    margin-top: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
}

.preview-header h4 {
    margin: 0;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.preview-header h4 i {
    margin-right: 0.5rem;
    color: var(--accent-text,#a5b4fc);
}

.preview-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.font-size-display {
    min-width: 45px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.preview-content {
    max-height: 500px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
    padding-right: 0.5rem;
}

.preview-content.collapsed {
    max-height: 0;
    overflow: hidden;
}

/* Custom scrollbar for document preview */
.preview-content::-webkit-scrollbar {
    width: 10px;
}

.preview-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.preview-content::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 5px;
}

.preview-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}

/* Firefox scrollbar */
.preview-content {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) rgba(0, 0, 0, 0.2);
}

.preview-text {
    padding: 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    font-family: 'Consolas', 'Monaco', monospace;
    background: var(--input-bg);
}

.preview-text.editing {
    border: 2px solid var(--accent-color);
    outline: none;
    cursor: text;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.3);
}
.preview-divider {
    width: 1px;
    height: 1.2rem;
    background: var(--border-color);
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.15rem;
}
.preview-edit-badge {
    font-size: 0.7rem;
    background: var(--fill-accent);
    color: var(--on-accent);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    font-weight: 600;
}
.preview-text .page-marker {
    color: var(--accent-text,#a5b4fc);
    font-weight: 600;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* ========================================
   Debug Panel
   ======================================== */

.debug-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 500px;
    max-width: calc(100vw - 40px);
    max-height: 400px;
    background: rgba(15, 17, 26, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}

.debug-panel.hidden {
    display: none;
}

.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
    cursor: grab;
    user-select: none;
}

.debug-header.dragging {
    cursor: grabbing;
}

.debug-panel.dragged {
    /* When dragged, switch from bottom/right to top/left positioning */
    bottom: auto !important;
    right: auto !important;
}

.debug-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--accent-text,#a5b4fc);
}

.debug-header h4 i {
    margin-right: 0.5rem;
}

.debug-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.debug-controls select {
    padding: 0.3rem 0.5rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.75rem;
}

.debug-filters {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.debug-filters label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.debug-filters input[type="checkbox"] {
    width: 12px;
    height: 12px;
    accent-color: var(--accent-color);
}

.debug-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
}

.debug-hint {
    color: var(--text-secondary);
    text-align: center;
    padding: 1rem;
    font-style: italic;
}

.log-entry {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.25rem;
    border-radius: 4px;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    word-break: break-word;
}

.log-entry .log-time {
    color: var(--text-secondary);
    flex-shrink: 0;
    font-size: 0.7rem;
}

.log-entry .log-level {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    flex-shrink: 0;
}

.log-entry .log-message {
    flex: 1;
    color: var(--text-primary);
}

.log-entry.level-debug {
    background: rgba(0, 255, 255, 0.05);
}
.log-entry.level-debug .log-level {
    background: var(--fill-debug);
    color: var(--on-debug);
}

.log-entry.level-info {
    background: rgba(34, 197, 94, 0.05);
}
.log-entry.level-info .log-level {
    background: var(--fill-success);
    color: var(--on-success);
}

.log-entry.level-warning {
    background: rgba(234, 179, 8, 0.1);
}
.log-entry.level-warning .log-level {
    background: var(--fill-warn);
    color: var(--on-warn);
}

.log-entry.level-error {
    background: rgba(239, 68, 68, 0.1);
}
.log-entry.level-error .log-level {
    background: var(--fill-error);
    color: var(--on-error);
}

/* ========================================
   Template System
   ======================================== */

.template-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.template-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.template-row select {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid #ef4444 !important;
    color: var(--error-text) !important;
}

.btn-danger:hover {
    background: var(--fill-error) !important;
    color: var(--on-error) !important;
}

/* ========================================
   Interactive Chat Section
   ======================================== */

.interactive-chat-section {
    margin-top: 2rem;
}

.interactive-chat-section .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.interactive-chat-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
}

/* Chat Settings Panel */
.chat-settings-panel {
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.chat-settings-panel h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.chat-setting-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.chat-setting-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.chat-setting-row label i {
    width: 16px;
    text-align: center;
    color: var(--accent-text,#a5b4fc);
}

.setting-select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.setting-select-wrapper select {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.setting-select-wrapper select:hover {
    border-color: var(--accent-color);
}

.setting-select-wrapper select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* API Key Warning */
.api-key-warning {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--warn-text);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.35rem 0.6rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    transition: all 0.2s;
    white-space: nowrap;
}

.api-key-warning:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
}

.api-key-warning i {
    font-size: 0.75rem;
}

.chat-start-row {
    margin-top: 1.5rem;
    text-align: center;
}

.chat-start-row .btn-primary {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

/* ============================================
   E11: NOTIFICATION BELL + DROPDOWN
   ============================================ */
.notification-wrapper {
    position: relative;
    display: inline-block;
}

.notification-bell {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--fill-error);
    color: var(--on-error);
    font-size: 0.62rem;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid var(--bg-color, #0f111a);
}

.notification-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 340px;
    max-height: 420px;
    /* var(--card-bg) is rgba(...,0.03) which renders dropdown as nearly transparent.
       Use a solid background derived from --bg-color so notifications always pop
       above the page content. */
    background: var(--bg-color, #0f111a);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
[data-theme="light"] .notification-dropdown {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    /* Right padding so the per-item delete button doesn't sit under the scrollbar */
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
}

.notification-item {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.notification-item:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
}

.notification-item.unread {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
    border-left: 3px solid var(--accent-color);
}

.notification-item-icon {
    font-size: 1.1rem;
    color: var(--accent-text,#a5b4fc);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.notification-item-icon.category-assignment { color: var(--chart-4); }
.notification-item-icon.category-material { color: var(--chart-2); }
.notification-item-icon.category-job { color: var(--chart-3); }
.notification-item-icon.category-system { color: var(--chart-5); }
.notification-item-icon.category-warning { color: var(--warn-text); }

.notification-item-body {
    flex: 1;
    min-width: 0;
}

.notification-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.notification-item-text {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.notification-item-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.notification-item-delete {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.notification-item:hover .notification-item-delete {
    opacity: 1;
}

/* ============================================
   E7: BULK MODULES GRID
   ============================================ */
.bulk-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.bulk-modules-grid label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s ease;
}

.bulk-modules-grid label:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
}

.bulk-modules-grid input[type="checkbox"] {
    margin: 0;
}

/* Source tabs for bulk generate modal */
.bulk-source-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.bulk-source-tab {
    flex: 1;
    min-width: 140px;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.bulk-source-tab:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.bulk-source-tab.active {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    border-color: var(--accent-color);
    color: var(--accent-text);
    font-weight: 600;
}

/* Per-module row with variation count + settings button */
.bulk-modules-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* Generous right padding (1.75rem = 28px) so variation input + gear
       button stay well clear of the 8px scrollbar with breathing room.
       Earlier 0.85rem still left content visually touching the scrollbar. */
    padding: 0.5rem 1.75rem 0.5rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 340px;
    overflow-y: auto;
}

.bulk-module-row {
    display: grid;
    grid-template-columns: 24px 1fr 100px 36px;
    align-items: center;
    gap: 0.5rem;
    /* Pad row so its right edge is well inside the container's
       padding-right safety zone (1.75rem). */
    padding: 0.45rem 0.5rem 0.45rem 0.6rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.bulk-module-row:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
}

.bulk-module-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.bulk-module-row .bulk-module-label {
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-module-row .bulk-module-icon {
    color: var(--accent-text,#a5b4fc);
    width: 18px;
    text-align: center;
}

.bulk-module-row .bulk-module-variation {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.bulk-module-row .bulk-module-variation input {
    width: 52px;
    padding: 0.25rem 0.35rem;
    font-size: 0.85rem;
    background: var(--input-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-primary);
    text-align: center;
}

.bulk-module-row .bulk-module-settings-btn {
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}

.bulk-module-row .bulk-module-settings-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-text,#a5b4fc);
}

.bulk-module-row.has-custom-settings .bulk-module-settings-btn {
    color: var(--accent-text);
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
}

/* Sub-modal: module settings body */
#bulkModuleSettingsBody .form-row {
    margin-bottom: 0.75rem;
}

#bulkModuleSettingsBody label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

#bulkModuleSettingsBody input,
#bulkModuleSettingsBody select,
#bulkModuleSettingsBody textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: var(--input-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.88rem;
}

/* ============================================
   E9: ANALYTICS CHARTS (teacher dashboard)
   ============================================ */
.analytics-charts {
    margin-top: 1.25rem;
}

.analytics-row {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 1.25rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.04);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.analytics-donut-wrap {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex: 1;
    min-width: 260px;
}

.analytics-donut {
    --donut-size: 140px;
    width: var(--donut-size);
    height: var(--donut-size);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.analytics-donut::before {
    content: '';
    position: absolute;
    inset: 18%;
    background: var(--card-bg);
    border-radius: 50%;
}

.analytics-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.analytics-donut-big {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--accent-text,#a5b4fc);
    line-height: 1;
}

.analytics-donut-small {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.analytics-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.analytics-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.analytics-bars-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 240px;
}

.analytics-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    gap: 0.6rem;
    align-items: center;
}

.analytics-bar-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: right;
}

.analytics-bar {
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}

.analytics-bar-fill {
    height: 100%;
    border-radius: 9px;
    transition: width 0.5s ease;
}

.analytics-bar-value {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============================================
   G: DICTATION SECTION
   ============================================ */
.dictation-section {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dictation-settings {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.dictation-recorder .recording-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 1rem;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.05rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.recording-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.pulse-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulseDot 1.2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.recording-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-text,#a5b4fc);
    min-width: 65px;
    text-align: center;
}

.dictation-output {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dictation-output .output-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.dictation-textarea {
    width: 100%;
    padding: 0.9rem;
    background: var(--input-bg, rgba(255,255,255,0.03));
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 150px;
}

.dictation-textarea:not([readonly]) {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

.dictation-output .output-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Chat Interface */
.chat-interface {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

/* ============================================
   B: UI Customization (Metin + Renk Ozellestirme)
   ============================================ */
.ui-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem;
}

.ui-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ui-color-row span {
    color: var(--text-secondary);
}

.ui-color-row input[type="color"] {
    width: 40px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}

.ui-text-overrides table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ui-text-overrides th {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    text-align: left;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.ui-text-overrides td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: top;
}

.ui-text-overrides tr:hover td {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.04);
}

.ui-text-overrides .ui-key-cell {
    font-family: 'Consolas', monospace;
    font-size: 0.72rem;
    color: var(--accent-text,#a5b4fc);
    word-break: break-all;
    max-width: 200px;
}

.ui-text-overrides .ui-default-cell {
    color: var(--text-secondary);
    font-style: italic;
    max-width: 220px;
    word-break: break-word;
}

.ui-text-overrides .ui-override-input {
    width: 100%;
    padding: 0.3rem 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.78rem;
}

.ui-text-overrides .ui-override-input.modified {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
}

.ui-text-overrides .ui-cat-cell {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    color: var(--accent-text);
    border-radius: 4px;
    display: inline-block;
}

/* ============================================
   F: SVG AVATAR LIP-SYNC (interactive chat mode)
   ============================================ */
.avatar-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.04);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.avatar-display {
    width: 130px;
    height: 150px;
    border-radius: 14px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.avatar-display svg {
    width: 100%;
    height: 100%;
    display: block;
}

.avatar-display.speaking {
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb, 99, 102, 241), 0.65));
    animation: avatarPulse 0.9s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

/* Faz 27: avatarlar artık fotoğraf. Görsel daireyi tam doldursun diye `cover`;
   `object-position: top` yüz kadrajını korur (portrelerde baş üstte). */
.avatar-photo,
.avatar-variant-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Görsel yüklenemezse kap boş kalmasın — nazik bir yer tutucu deseni. */
.avatar-display.avatar-img-missing,
.avatar-variant.avatar-img-missing {
    background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}

/* Konuşma ekolayzeri — lip-sync'in yerini aldı (fotoğrafta yapay ağız hareketi
   sırıtıyordu). Çubuk yükseklikleri JS'te sesin gerçek genliğinden hesaplanır. */
.avatar-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.avatar-eq {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 20px;
    opacity: 0.35;
    transition: opacity 0.25s ease;
}

.avatar-eq.active {
    opacity: 1;
}

.avatar-eq-bar {
    width: 3px;
    height: 12%;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent-color), var(--fill-accent));
    transition: height 70ms linear;
}

/* Hareket azaltma tercihi: çubuklar sabit kalsın, yalnız görünürlük değişsin. */
@media (prefers-reduced-motion: reduce) {
    .avatar-eq-bar { transition: none; }
    .avatar-display.speaking { animation: none; }
}

.avatar-selector {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex: 1;
}

.avatar-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.7rem;
    min-width: 64px;
}

.avatar-choice i {
    font-size: 1.05rem;
}

.avatar-choice:hover {
    border-color: var(--accent-color);
    color: var(--accent-text);
}

.avatar-choice.active {
    border-color: var(--accent-color);
    color: var(--accent-text);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 99, 102, 241), 0.25);
}

/* Faz 25: seçili rolün üç görünüm varyantı — küçük SVG önizleme butonları.
   `flex-basis: 100%` ile rol butonlarının ALT SATIRINA iner (avatar-bar bir
   flex kapsayıcı; aynı satırda kalsa rol butonlarını sıkıştırırdı). */
.avatar-variants {
    display: flex;
    gap: 0.4rem;
    flex-basis: 100%;
    margin-top: 0.5rem;
}

.avatar-variant {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 0;
}

.avatar-variant svg {
    width: 100%;
    height: 100%;
    display: block;
}

.avatar-variant:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
}

.avatar-variant.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 99, 102, 241), 0.35);
}

.avatar-variant:focus-visible {
    outline: 2px solid var(--fill-accent);
    outline-offset: 2px;
}

.chat-messages {
    flex: 1;
    min-height: 300px;
    max-height: 450px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Custom scrollbar for chat */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.chat-welcome i {
    font-size: 2.5rem;
    color: var(--accent-text,#a5b4fc);
    margin-bottom: 1rem;
}

.chat-welcome p {
    font-size: 0.95rem;
}

/* Chat Bubbles */
.chat-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: bubbleIn 0.3s ease;
}

@keyframes bubbleIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-bubble.user {
    align-self: flex-end;
    background: var(--gradient-1);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-bubble.assistant {
    align-self: flex-start;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.chat-bubble.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: var(--error-text);
}

.chat-bubble .bubble-audio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-bubble .bubble-audio button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: inherit;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s;
}

.chat-bubble .bubble-audio button:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Chat Input Area */
.chat-input-area {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.chat-text-input {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.chat-text-input input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.chat-text-input input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.chat-text-input input::placeholder {
    color: var(--text-secondary);
}

.mic-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.mic-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-1);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.mic-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px var(--accent-glow);
}

.mic-button:active,
.mic-button.listening {
    transform: scale(0.95);
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    animation: ntMicPulse 1s infinite;
}

/* D20: eskiden ADI `pulse`tı ve dosyadaki ilk `@keyframes pulse`u (hafıza kartı ipucunun yanıp
   sönmesi) EZİYORDU → `.flashcard-hint i` opaklık yerine kırmızı halka animasyonu alıyordu. */
@keyframes ntMicPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }
}

.mic-status {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.mic-status.listening {
    color: var(--error-text);
    font-weight: 500;
}

/* Voice Wave Animation */
.voice-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 30px;
    padding: 0 1rem;
}

.wave-bar {
    width: 4px;
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
    animation: wave 0.5s ease-in-out infinite;
}

.wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
    0%, 100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1);
    }
}

/* Chat Controls */
.chat-controls {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

.chat-controls .btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Loading indicator for chat */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.chat-typing .dot {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingDot 1.4s infinite ease-in-out;
}

.chat-typing .dot:nth-child(1) { animation-delay: 0s; }
.chat-typing .dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Browser not supported message */
.browser-not-supported {
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    color: var(--warn-text);
    text-align: center;
    margin-bottom: 1rem;
}

.browser-not-supported i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Toggle Switch (iOS style) */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    margin-left: auto;
    min-width: 50px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: all 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--gradient-1);
    border-color: var(--accent-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background-color: white;
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.toggle-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Continuous Listening Info */
.continuous-listening-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.2);
    border-radius: 6px;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.continuous-listening-info i {
    color: var(--accent-text,#a5b4fc);
    margin-top: 2px;
}

/* Continuous listening active indicator */
.mic-button.continuous-active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    animation: continuousPulse 2s infinite;
}

.mic-button.paused {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    animation: none;
}

.mic-button.paused:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.mic-button.error {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    animation: none;
    cursor: not-allowed;
}

.mic-status.error {
    color: var(--error-text);
}

/* TTS Speaking State */
.mic-button.speaking {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    animation: speakingPulse 1s infinite;
}

.mic-button.speaking:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.mic-status.speaking {
    color: var(--info-text);
}

@keyframes speakingPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

/* Connection Status Indicator */
.connection-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 0.75rem;
    width: fit-content;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
}

.connection-status.connecting .status-dot {
    background: #f59e0b;
    animation: blink 1s infinite;
}

.connection-status.connected .status-dot {
    background: #22c55e;
}

.connection-status.disconnected .status-dot {
    background: #6b7280;
}

.connection-status.error .status-dot {
    background: #ef4444;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes continuousPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
}

.mic-status.continuous {
    color: var(--success-text);
}

/* Responsive adjustments for chat */
@media (max-width: 768px) {
    .chat-messages {
        min-height: 250px;
        max-height: 350px;
    }
    
    .chat-bubble {
        max-width: 90%;
    }
    
    .mic-button {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .setting-select-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .api-key-warning {
        justify-content: center;
    }
    
    .toggle-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ============================================
   AUDIOBOOK STYLES
   ============================================ */

/* Audiobook Modal */
.audiobook-modal {
    max-width: 640px;
    display: flex;
    flex-direction: column;
}

.audiobook-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 10;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    padding: 1.5rem;
}

.audiobook-modal .modal-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audiobook-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.audiobook-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    position: sticky;
    bottom: 0;
    background: var(--card-bg);
    margin: 1rem -1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
}

/* Setting Groups */
.audiobook-modal .setting-group {
    margin-bottom: 1.25rem;
}

.audiobook-modal .setting-group > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Reading Mode Options */
.reading-mode-options {
    display: flex;
    gap: 0.75rem;
}

.reading-mode-options .radio-option {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.reading-mode-options .radio-option:hover {
    border-color: var(--accent-color);
}

.reading-mode-options .radio-option:has(input:checked) {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
}

.reading-mode-options .radio-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reading-mode-options .radio-label strong {
    color: var(--text-primary);
}

.reading-mode-options .radio-label small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Summary Settings */
.summary-settings {
    padding: 1rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

/* Compression Control */
.compression-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.compression-control input[type="range"] {
    flex: 1;
}

#compressionValue {
    min-width: 50px;
    text-align: center;
    font-weight: 600;
    color: var(--accent-text,#a5b4fc);
}

.compression-presets {
    display: flex;
    gap: 0.5rem;
}

.compression-preset {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.compression-preset:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.compression-preset.active {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
    color: var(--text-primary);
}

/* Prompt Template Row */
.prompt-template-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.prompt-template-row select {
    flex: 1;
}

#summaryPromptInput {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
}

#summaryPromptInput:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Voice Type Tabs */
.voice-type-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.voice-tab {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.voice-tab:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.voice-tab.active {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
    color: var(--text-primary);
}

/* Voice Options */
.voice-category {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.voice-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.voice-option:hover {
    border-color: var(--accent-color);
}

.voice-option:has(input:checked) {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
}

.voice-option input[type="radio"] {
    display: none;
}

.voice-option span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.voice-option i {
    color: var(--accent-text,#a5b4fc);
}

/* Chapter Controls */
.chapters-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.chapters-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.85rem 0.5rem 0.5rem;
}

.chapter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.chapter-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.chapter-item input[type="checkbox"] {
    accent-color: var(--accent-color);
}

.chapter-item label {
    flex: 1;
    cursor: pointer;
    font-size: 0.9rem;
}

.loading-chapters {
    text-align: center;
    color: var(--text-secondary);
    padding: 1rem;
}

/* ============================================
   AUDIOBOOK PLAYER STYLES
   ============================================ */

.audiobook-player-section {
    margin-top: 1rem;
}

.audiobook-player {
    padding: 1.5rem;
}

.player-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.player-loading .spinner {
    width: 50px;
    height: 50px;
}

/* Player Info */
.player-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.current-chapter {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chapter-progress {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Progress Container */
.progress-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.time-current,
.time-total {
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-width: 45px;
    font-variant-numeric: tabular-nums;
}

.time-total {
    text-align: right;
}

.progress-bar-wrapper {
    flex: 1;
    position: relative;
}

.progress-bar {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 3px;
    cursor: pointer;
}

.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
}

.progress-bar::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.progress-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.chapter-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    pointer-events: none;
}

.chapter-marker {
    position: absolute;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
}

/* Player Controls */
.player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.btn-control {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s;
}

.btn-control:hover {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
}

.btn-control.btn-play {
    width: 56px;
    height: 56px;
    background: var(--gradient-1);
    border: none;
    font-size: 1.25rem;
}

.btn-control.btn-play:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px var(--accent-glow);
}

.btn-control .control-label {
    position: absolute;
    bottom: -2px;
    font-size: 0.6rem;
    font-weight: 600;
}

/* Player Extras */
.player-extras {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.playback-speed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.playback-speed label {
    color: var(--text-secondary);
}

.playback-speed select {
    padding: 0.4rem 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
}

/* Player Chapters */
.player-chapters {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.chapters-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.chapters-toggle:hover {
    border-color: var(--accent-color);
}

.chapters-toggle .toggle-icon {
    transition: transform 0.2s;
}

.chapters-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}

.player-chapters-list {
    margin-top: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.player-chapter-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.player-chapter-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.player-chapter-item.active {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
}

.player-chapter-item .chapter-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border-color);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.player-chapter-item.active .chapter-number {
    background: var(--accent-color);
}

.player-chapter-item .chapter-title {
    flex: 1;
    font-size: 0.9rem;
}

.player-chapter-item .chapter-duration {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Offline Settings Modal */
.offline-settings-modal {
    max-width: 92vw;
    width: 680px;
    max-height: 88vh;
}

.offline-settings-modal .modal-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.offline-settings-modal .settings-section {
    margin-bottom: 1rem;
}

.offline-settings-modal .settings-section h4 {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.offline-settings-modal .settings-section h4 i {
    margin-right: 0.5rem;
    color: var(--accent-text,#a5b4fc);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.setting-row label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    min-width: 120px;
}

.setting-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.setting-input-group input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-dark);
    -webkit-appearance: none;
    appearance: none;
}

.setting-input-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
}

.setting-value {
    min-width: 50px;
    text-align: right;
    color: var(--accent-text,#a5b4fc);
    font-weight: 500;
    font-size: 0.9rem;
}

.setting-select {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.setting-select:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Responsive */
@media (max-width: 768px) {
    .audiobook-modal {
        max-width: 95%;
        margin: 1rem;
    }
    
    .reading-mode-options {
        flex-direction: column;
    }
    
    .voice-category {
        grid-template-columns: 1fr;
    }
    
    .player-controls {
        gap: 0.5rem;
    }
    
    .btn-control {
        width: 40px;
        height: 40px;
    }
    
    .btn-control.btn-play {
        width: 50px;
        height: 50px;
    }
    
    .player-extras {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ============================================
   LOCAL SETTINGS MODAL STYLES
   ============================================ */

.local-settings-modal {
    max-width: 95vw;
    width: 780px;
    max-height: 88vh;
}

.local-settings-modal .modal-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.local-settings-modal .settings-section {
    margin-bottom: 1rem;
}

.local-settings-modal .settings-section h4 {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.local-settings-modal .settings-section h4 i {
    margin-right: 0.5rem;
    color: var(--accent-text,#a5b4fc);
}

/* Setting Input */
.setting-input {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.setting-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.setting-input[type="number"] {
    max-width: 100px;
}

/* Mode indicator colors for Local */
#modeLabelSimulated.active {
    color: var(--warn-text);  /* Orange for simulated */
}

#modeLabelLocal.active {
    color: var(--success-text);  /* Green for local */
}

/* Debug Console Toggle Button (always visible, top-right) */
.debug-toggle-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10000;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--surface-2);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.debug-toggle-btn:hover,
.debug-toggle-btn.active {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
    color: var(--accent-text);
    border-color: var(--accent-color);
}

/* ============================================
   ENHANCED DEBUG PANEL STYLES
   ============================================ */

.debug-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 600px;
    max-width: calc(100vw - 40px);
    max-height: 500px;
    background: rgba(15, 17, 26, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    resize: both;
    overflow: hidden;
}

.debug-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--input-bg);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

#debugLogCount {
    color: var(--accent-text);
    font-weight: 500;
}

#debugConnectionStatus {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#debugConnectionStatus::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
}

#debugConnectionStatus.connected::before {
    background: #22c55e;
}

#debugConnectionStatus.disconnected::before {
    background: #ef4444;
}

/* Debug Log Entry Types */
.log-entry.level-api {
    background: rgba(59, 130, 246, 0.1);
}
.log-entry.level-api .log-level {
    background: var(--fill-info);
    color: var(--on-info);
}

.log-entry.level-prompt {
    background: rgba(168, 85, 247, 0.1);
}
.log-entry.level-prompt .log-level {
    background: var(--fill-prompt);
    color: var(--on-prompt);
}

.log-entry.level-event {
    background: rgba(34, 197, 94, 0.05);
}
.log-entry.level-event .log-level {
    background: var(--fill-success);
    color: var(--on-success);
}

/* Debug Panel Expanded Content */
.debug-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    max-height: 350px;
}

.debug-content::-webkit-scrollbar {
    width: 6px;
}

.debug-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

.debug-content::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

/* Log Entry with Expandable Data */
.log-entry {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    word-break: break-word;
    cursor: pointer;
    transition: background 0.2s;
}

.log-entry:hover {
    filter: brightness(1.1);
}

.log-entry-header {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.log-entry-data {
    display: none;
    padding: 0.5rem;
    margin-top: 0.25rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

.log-entry.expanded .log-entry-data {
    display: block;
}

/* Test Connection Button */
.test-connection-btn {
    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    border: 1px solid var(--accent-color);
    color: var(--accent-text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.test-connection-btn:hover {
    background: var(--fill-accent);
    color: var(--on-accent);
}

.test-connection-btn.success {
    border-color: #22c55e;
    color: var(--success-text);
}

.test-connection-btn.error {
    border-color: #ef4444;
    color: var(--error-text);
}

/* Settings Header with Status */
.settings-header-with-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.connection-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b7280;
}

.connection-indicator.connected {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.connection-indicator.error {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Responsive for Settings Modals */
@media (max-width: 768px) {
    .modal {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 0.5rem;
    }
    
    .modal-header-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .settings-source-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .debug-panel {
        width: calc(100vw - 20px);
        left: 10px;
        right: 10px;
        bottom: 10px;
    }
}

/* ============================================
   LOCAL OFFLINE MODE - Hide internet-only UI elements
   ============================================ */

/* Hide TTS provider selectors (Edge TTS / ElevenLabs) in local mode */
body.local-offline-active .tts-provider-select,
body.local-offline-active .tts-provider-options,
body.local-offline-active .elevenlabs-settings,
body.local-offline-active #elevenlabsSettings,
body.local-offline-active .tts-setting-group:has(#elevenlabsApiKey) {
    display: none !important;
}

/* Hide ElevenLabs API key warnings */
body.local-offline-active .api-key-warning,
body.local-offline-active .hint:has(a[href*="elevenlabs"]),
body.local-offline-active small.hint {
    display: none !important;
}

/* Hide speaker profile dropdowns (Profesyonel, Arkadaş Canlısı etc.) in local mode */
body.local-offline-active .speaker-profile {
    display: none !important;
}

/* In Sesli Kitap: hide character voice types, show only gender */
body.local-offline-active .voice-category[data-category="character"] {
    display: none !important;
}
body.local-offline-active .voice-tab[data-category="character"] {
    display: none !important;
}
/* Hide age variants - only keep male_young and female_young as "Erkek" and "Kadın" */
body.local-offline-active .voice-option:has(input[value="male_middle"]),
body.local-offline-active .voice-option:has(input[value="female_middle"]) {
    display: none !important;
}

/* Show local-only elements when in local mode, hide online-only */
body.local-offline-active .local-only-setting {
    display: flex !important;
}
body.local-offline-active #chatSttProvider,
body.local-offline-active #chatTtsProvider {
    display: none !important;
}
/* Hide their parent setting-select-wrapper in local mode */
body.local-offline-active .chat-setting-row:has(#chatSttProvider),
body.local-offline-active .chat-setting-row:has(#chatTtsProvider) {
    display: none !important;
}

.local-service-badge {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    color: var(--accent-text);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}

.local-tts-info-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.local-tts-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Hide speed controls in local mode when speed is not supported */
body.local-offline-active.local-tts-no-speed .speed-control,
body.local-offline-active.local-tts-no-speed .speed-presets,
body.local-offline-active.local-tts-no-speed .tts-speed-select {
    display: none !important;
}

/* ============================================
   LOCAL TEST BUTTONS
   ============================================ */
.local-test-btn {
    display: none;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.3);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
    color: var(--accent-text);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 0.3rem;
    align-items: center;
    justify-content: center;
}
.local-test-btn:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.25);
    border-color: var(--accent-color);
}
.local-test-btn.visible {
    display: inline-flex;
}
.local-test-btn.testing {
    opacity: 0.7;
    pointer-events: none;
}
.local-test-btn.success {
    border-color: #22c55e;
    color: var(--success-text);
    background: rgba(34, 197, 94, 0.1);
}
.local-test-btn.fail {
    border-color: #ef4444;
    color: var(--error-text);
    background: rgba(239, 68, 68, 0.1);
}

/* Test result tooltip */
.test-result-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    z-index: 200;
    max-width: 500px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.test-result-popup h4 {
    margin: 0 0 1rem;
    color: var(--text-primary);
}
.test-result-popup .test-settings-preview {
    background: var(--bg-dark);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    font-family: monospace;
    color: var(--accent-text);
    word-break: break-all;
}
.test-result-popup .test-output {
    background: var(--bg-dark);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}
.test-result-popup .test-output.success { border-left: 3px solid #22c55e; }
.test-result-popup .test-output.fail { border-left: 3px solid #ef4444; }
.test-result-popup .btn-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

/* Combination Test Styles */
.combo-test-trigger {
    width: 100%;
    margin-top: 1rem;
}
.combo-test-section {
    margin-top: 1rem;
}
.combo-test-progress {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.combo-test-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-dark);
    border-radius: 3px;
    overflow: hidden;
}
.combo-test-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
    border-radius: 3px;
    transition: width 0.3s;
}
.combo-test-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}
.combo-test-table th {
    text-align: left;
    padding: 0.5rem 0.4rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}
.combo-test-row td {
    padding: 0.4rem;
    background: var(--bg-dark);
    vertical-align: middle;
}
.combo-test-row td:first-child { border-radius: 6px 0 0 6px; }
.combo-test-row td:last-child { border-radius: 0 6px 6px 0; }
.combo-badge-success {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(34,197,94,0.15);
    color: var(--success-text);
    border: 1px solid rgba(34,197,94,0.3);
}
.combo-badge-fail {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(239,68,68,0.15);
    color: var(--error-text);
    border: 1px solid rgba(239,68,68,0.3);
}
.combo-apply-btn {
    padding: 3px 10px;
    border: 1px solid rgba(139,92,246,0.4);
    background: rgba(139,92,246,0.1);
    color: var(--accent-text);
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.combo-apply-btn:hover {
    background: rgba(139,92,246,0.25);
    border-color: rgba(139,92,246,0.6);
}
.combo-apply-btn:disabled {
    color: var(--text-disabled);
    cursor: default;
}
.combo-error-detail {
    color: var(--error-text);
    font-size: 0.65rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}
.combo-test-summary {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    background: var(--bg-dark);
}

/* Collapsible Result Items */
.result-item {
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.2s;
}
.result-item:hover {
    border-color: rgba(139,92,246,0.4);
}
.result-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(139,92,246,0.1);
    cursor: pointer;
    user-select: none;
}
.result-item-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.result-item-header h4 .collapse-icon {
    transition: transform 0.2s;
}
.result-item.collapsed .result-item-header h4 .collapse-icon {
    transform: rotate(-90deg);
}
.result-item-body {
    padding: 1rem;
}
.result-item.collapsed .result-item-body {
    display: none;
}
.result-item-actions {
    display: flex;
    gap: 0.5rem;
}
.result-item-actions button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: color 0.2s, background 0.2s;
}
.result-item-actions button:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.1);
}
.result-item-actions button.delete-btn:hover {
    color: var(--error-text);
    background: rgba(239,68,68,0.1);
}
/* Faz 45: daraltılmış kartta mini oynatıcı (▶/⏸ + çalarken hareketli hoparlör).
   Yalnız .collapsed kartta görünür; kart açıkken yerleşik oynatıcı zaten görünür. */
.nt-mini-media {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0 auto 0 0.75rem;   /* başlığın yanında; işlem düğmeleri sağda kalır */
}
.result-item.collapsed .nt-mini-media { display: inline-flex; }
.nt-mini-play {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--accent-color, #6366f1);
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent-text, #a5b4fc);
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    cursor: pointer;
    transition: background var(--dur-fast, 150ms), transform var(--dur-fast, 150ms);
}
.nt-mini-play:hover { background: rgba(var(--accent-rgb, 99, 102, 241), .32); }
.nt-mini-play:active { transform: scale(.94); }
.nt-mini-speaker { display: none; color: var(--accent-text, #a5b4fc); }
.nt-mini-media.is-playing .nt-mini-speaker { display: inline-block; }
.nt-mini-media.is-playing .nt-w1 { animation: ntHoparlorDalga 1s ease-in-out infinite; }
.nt-mini-media.is-playing .nt-w2 { animation: ntHoparlorDalga 1s ease-in-out .3s infinite; }
@keyframes ntHoparlorDalga { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .nt-mini-media.is-playing .nt-w1,
    .nt-mini-media.is-playing .nt-w2 { animation: none; }
}
/* Faz 52: daraltılmış kartta SÜREN İŞ (söyleşi/özet sesi, video üretimi): dönen halka +
   "Ses üretiliyor · %45 · 1 dk 20 sn geçti · ~2 dk kaldı". Yalnız .collapsed kartta görünür. */
.nt-mini-busy {
    display: none;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0 auto 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-text, #a5b4fc);
}
.result-item.collapsed .nt-mini-busy { display: inline-flex; }
.result-item.collapsed .nt-mini-media:has(+ .nt-mini-busy) { margin-right: 0; }
.nt-busy-txt {
    display: inline-flex;
    column-gap: 0.6em;
    row-gap: 2px;
    min-width: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Dar alanda yalnız etiket kısalır; yüzde · geçen · kalan süre her zaman tam görünür. */
.nt-busy-lbl {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt-busy-num { flex: none; }
/* Dar ekranda (mobil) başlık + düğmeler bir satırda, gösterge altında kendi satırında;
   etiket + süreler o satıra da sığmazsa iki satıra bölünür (hiçbiri gizlenmez). */
@media (max-width: 760px) {
    .result-item.collapsed .result-item-header:has(> .nt-mini-busy) { flex-wrap: wrap; row-gap: 6px; }
    .result-item.collapsed .nt-mini-busy { order: 5; flex: 1 0 100%; margin: 0; }
    .result-item.collapsed .nt-mini-media:has(+ .nt-mini-busy) { margin-right: auto; }
    .result-item.collapsed .nt-busy-txt { flex-wrap: wrap; }
}
.nt-busy-spin {
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb, 99, 102, 241), 0.25);
    border-top-color: var(--accent-color, #6366f1);
    animation: ntBusyDon 0.9s linear infinite;
}
@keyframes ntBusyDon { to { transform: rotate(360deg); } }
/* Faz 53: seslendirilemeyen cümleler notu (oynatıcının üstünde; anlamı uyarı → --badge-warn-*). */
.nt-audio-missing {
    margin: 0 0 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--fill-warn, #f59e0b);
    background: var(--badge-warn-bg, #2e2416);
    color: var(--badge-warn-fg, #fbbf24);
    font-size: 0.82rem;
}
.nt-audio-missing p { margin: 0; font-weight: 600; }
.nt-audio-missing details { margin-top: 0.35rem; }
.nt-audio-missing summary { cursor: pointer; text-decoration: underline; }
.nt-audio-missing ul { margin: 0.35rem 0 0 1.1rem; padding: 0; color: var(--text-primary, #e5e7eb); }
.nt-audio-missing li { margin: 0.15rem 0; }
@media (prefers-reduced-motion: reduce) {
    .nt-busy-spin { animation: none; border-color: var(--accent-color, #6366f1); }
}

/* Auth Controls */
.auth-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.user-display-name {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}
.user-role-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.role-admin {
    background: var(--badge-error-bg);
    color: var(--badge-error-fg);
}
.role-teacher {
    background: var(--badge-accent-bg);
    color: var(--badge-accent-fg);
}
.role-student {
    background: var(--badge-success-bg);
    color: var(--badge-success-fg);
}
/* Faz 8.11: süper admin rozeti (altın) + ayrıcalıklı satır kilidi */
.role-super_admin {
    background: var(--badge-warn-bg);
    color: var(--badge-warn-fg);
}
.role-locked {
    color: var(--text-secondary, #94a3b8);
    padding: 0 0.4rem;
}
/* Faz 8.12: Sayfa Yönetimi duyuru bloğu (sayfa üstü) */
.page-announcement {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--text-primary, #e2e8f0);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================
 * Arka plan müzik çalar — footer içinde (sabit DEĞİL) + detay popup
 * ============================================ */
.study-music-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 1rem auto 0;
    padding: 0.35rem 0.7rem;
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}
.study-music-bar .music-now {
    font-size: 0.78rem;
    color: var(--text-primary);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    padding: 0 0.3rem;
}
.study-music-bar .music-now:hover { color: var(--accent-text,#a5b4fc); }
.study-music-bar .music-vol { width: 70px; cursor: pointer; vertical-align: middle; }
.study-music-bar .btn-icon.active { color: var(--accent-text,#a5b4fc); }

/* Popup: döngü modları */
.music-loop-modes { display: flex; gap: 0.4rem; flex: 1; }
.music-loop-modes button {
    flex: 1;
    padding: 0.45rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.music-loop-modes button:hover { border-color: var(--accent-color); }
.music-loop-modes button.active {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.14);
    color: var(--accent-text);
    font-weight: 600;
}

/* Popup: parça listesi */
.music-track-list {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.3rem;
}
.music-track-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 0.85rem;
    transition: border-color 0.15s, background 0.15s;
}
.music-track-item:hover { border-color: var(--accent-color); }
.music-track-item.current {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    font-weight: 600;
}
.music-track-item .mti-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-item .mti-cat { font-size: 0.72rem; opacity: 0.6; flex: 0 0 auto; }

/* Popup: kısayol listesi */
.music-hotkeys-list { list-style: none; padding: 0; margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.music-hotkeys-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0; }
.music-hotkeys-list kbd {
    background: var(--input-bg, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-size: 0.74rem;
    font-family: inherit;
}

/* Upload Tabs */
.upload-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.upload-tab {
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.upload-tab:hover { background: rgba(255,255,255,0.08); }
.upload-tab.active {
    background: var(--fill-accent);
    color: var(--on-accent);
    border-color: var(--accent-color);
}
.upload-tab-content { display: none; }
.upload-tab-content.active { display: block; }

/* Document Set Selector */
.docset-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.docset-selector label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}
.docset-selector select {
    flex: 1;
    padding: 0.5rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.docset-item-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
}
.docset-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
}
.docset-item { cursor: pointer; }
.docset-item:hover { background: rgba(255,255,255,0.03); }
.docset-item.selected { background: rgba(var(--accent-rgb, 99, 102, 241),0.12); border-left: 3px solid var(--accent-color); }
.docset-item input[type="checkbox"] { accent-color: var(--accent-color); }
.docset-item-name { flex: 1; color: var(--text-primary); }
.docset-item-pages {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.docset-item-pages input[type="number"] {
    width: 50px;
    padding: 0.2rem 0.3rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8rem;
    text-align: center;
}
.docset-actions { text-align: right; }
.docset-loading { text-align: center; color: var(--text-secondary); padding: 2rem; }
.docset-selector { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ============================================
   LMS PANELS (Admin, Teacher, Student)
   ============================================ */
.lms-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-top: 1.5rem;
    overflow: hidden;
}
.lms-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.lms-panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lms-panel-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}
.lms-tab {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.lms-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.lms-tab.active { color: var(--accent-text,#a5b4fc); border-bottom-color: var(--accent-color); }
.lms-panel-content { padding: 1.25rem; }
.lms-tab-content { display: none; }
.lms-tab-content.active { display: block; }

/* Stats Cards Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.stat-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
}
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--accent-text,#a5b4fc); }
.stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.3rem; }

/* Data Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.data-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.data-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.data-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.row-inactive { opacity: 0.5; }
.action-cell { white-space: nowrap; display: flex; gap: 0.3rem; }

/* Panel Toolbar */
.panel-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
/* Quick Job Form */
.quick-job-form {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.quick-job-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.quick-job-row label {
    min-width: 100px;
    font-size: 0.85rem;
    font-weight: 600;
}
.quick-job-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.btn-sm { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
.btn-xs { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
.btn-danger { color: var(--error-text); }
.btn-danger:hover { color: var(--error-text); }

/* Status Badges */
.badge-active { color: var(--badge-success-fg); background: var(--badge-success-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-inactive { color: var(--badge-error-fg); background: var(--badge-error-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-pending, .badge-not_started { color: var(--badge-warn-fg); background: var(--badge-warn-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-running, .badge-in_progress { color: var(--badge-info-fg); background: var(--badge-info-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-completed { color: var(--badge-success-fg); background: var(--badge-success-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-failed { color: var(--badge-error-fg); background: var(--badge-error-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-cancelled { color: var(--badge-neutral-fg); background: var(--badge-neutral-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-new { color: var(--badge-info-fg); background: var(--badge-info-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-reviewed { color: var(--badge-warn-fg); background: var(--badge-warn-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-resolved { color: var(--badge-success-fg); background: var(--badge-success-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.badge-dismissed { color: var(--badge-neutral-fg); background: var(--badge-neutral-bg); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }

/* Star Rating Widget */
.star-rating { display: inline-flex; gap: 0.2rem; cursor: pointer; user-select: none; }
.star-rating .star { color: var(--text-secondary); font-size: 1.1rem; transition: color 0.15s; }
.star-rating .star.active { color: var(--warn-text); }
.star-rating .star.hover { color: var(--warn-text); }
.star-rating.readonly { cursor: default; pointer-events: none; }

.empty-hint { text-align: center; color: var(--text-secondary); padding: 2rem; font-size: 0.9rem; }

/* Admin/Teacher/Student Panel Buttons -- use button.class for higher specificity over .btn-secondary */
button.btn-admin-panel {
    background: var(--badge-error-bg) !important;
    color: var(--badge-error-fg) !important;
    border: 1px solid var(--fill-error) !important;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    transition: all 0.2s;
}
button.btn-admin-panel:hover { background: var(--fill-error) !important; border-color: var(--fill-error) !important; color: var(--on-error) !important; }

button.btn-teacher-panel {
    background: var(--badge-accent-bg) !important;
    color: var(--badge-accent-fg) !important;
    border: 1px solid var(--fill-accent) !important;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    transition: all 0.2s;
}
button.btn-teacher-panel:hover { background: var(--fill-accent) !important; border-color: var(--fill-accent) !important; color: var(--on-accent) !important; }

button.btn-student-panel {
    background: var(--badge-success-bg) !important;
    color: var(--badge-success-fg) !important;
    border: 1px solid var(--fill-success) !important;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    transition: all 0.2s;
}
button.btn-student-panel:hover { background: var(--fill-success) !important; border-color: var(--fill-success) !important; color: var(--on-success) !important; }

/* Profile button distinct hover */
#profileBtn:hover { color: var(--accent-text,#a5b4fc); }

/* Modal Overlay (second definition - solid backdrop) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-card h3 {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.radio-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}
.radio-option-row {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem !important;
    color: var(--text-primary) !important;
    transition: background 0.15s;
}
.radio-option-row:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
}
.radio-option-row input[type="radio"] {
    width: auto !important;
    margin: 0;
    accent-color: var(--accent-color);
}
.form-row { margin-bottom: 0.75rem; }
.form-row label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.form-row input, .form-row select {
    width: 100%;
    padding: 0.5rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.form-row input:focus, .form-row select:focus { border-color: var(--accent-color); outline: none; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; }

/* User form tabs */
.uf-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 0; }
.uf-tab {
    flex: 1; padding: 0.6rem 0.75rem; background: none; border: none; color: var(--text-secondary);
    cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
    gap: 0.4rem; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s;
}
.uf-tab:hover { color: var(--text-primary); }
.uf-tab.active { color: var(--accent-text,#a5b4fc); border-bottom-color: var(--accent-color); font-weight: 600; }

/* Users Table Wrap */
.users-table-wrap { overflow-x: auto; }

/* Admin UI Visibility Toggles */
.ui-toggle-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 0; border-bottom: 1px solid var(--border-color);
}
.ui-toggle-row span { font-size: 0.9rem; color: var(--text-primary); }

/* Modül görünürlük + sıralama ızgaraları: her ayar kendi kenarlıklı kutusunda.
   Geniş ızgara hücresinde toggle sağ kenara itilip yan sütunun etiketine
   karışıyordu → kutu sınırı etiket-buton ilişkisini ve ayar sınırlarını netleştirir.
   Yalnız bu iki konteynerde geçerli; düz (tek sütun) toggle listelerini etkilemez. */
#moduleVisibilityGrid .ui-toggle-row,
#moduleOrderList .ui-toggle-row {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    gap: 0.6rem;
    transition: border-color 0.15s, background 0.15s;
}
#moduleVisibilityGrid .ui-toggle-row:hover,
#moduleOrderList .ui-toggle-row:hover {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
}
/* Etiket esnek genişlikte; toggle/oklar kutu içinde sağda — ilişki kutuyla net. */
#moduleVisibilityGrid .ui-toggle-row > span:first-child,
#moduleOrderList .ui-toggle-row > span:nth-child(2) { flex: 1; }

/* Badges Grid */
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.badge-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s;
}
.badge-card:hover { transform: translateY(-2px); }
.badge-earned { border-color: rgba(245,158,11,0.4); }
.badge-locked { opacity: 0.5; filter: grayscale(0.5); }
.badge-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.badge-name { font-weight: 600; font-size: 0.85rem; }
.badge-desc { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }
.badge-earned-label { font-size: 0.7rem; color: var(--warn-text); margin-top: 0.4rem; font-weight: 600; }

/* ============================================ */
/* Toast Notification System                    */
/* ============================================ */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 420px;
    width: 100%;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: var(--bg-dark, #1a1d2e);
    border: 1px solid var(--border-color);
    color: var(--text-primary, #fff);
    font-size: 0.88rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transform: translateX(110%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
    opacity: 0;
    pointer-events: all;
}
.toast-show { transform: translateX(0); opacity: 1; }
.toast-hide { transform: translateX(110%); opacity: 0; }
.toast-icon { font-size: 1.1rem; margin-top: 0.15rem; flex-shrink: 0; }
.toast-body { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.toast-message { font-weight: 500; }
.toast-details { font-size: 0.78rem; color: var(--text-secondary); }
.toast-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.2rem; font-size: 0.9rem; flex-shrink: 0; }
.toast-close:hover { color: var(--text-primary); }
.toast-success { border-left: 4px solid #22c55e; }
.toast-success .toast-icon { color: var(--success-text); }
.toast-error { border-left: 4px solid #ef4444; }
.toast-error .toast-icon { color: var(--error-text); }
.toast-warning { border-left: 4px solid #f59e0b; }
.toast-warning .toast-icon { color: var(--warn-text); }
.toast-info { border-left: 4px solid #6366f1; }
.toast-info .toast-icon { color: var(--accent-text); }
.toast-report-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 0.3rem;
    transition: background 0.2s;
    align-self: flex-start;
}
.toast-report-btn:hover { background: rgba(255,255,255,0.15); color: var(--text-primary); }
.toast-report-btn:disabled { color: var(--text-disabled); cursor: default; }

/* ============================================ */
/* Quiz Feedback Overlay                        */
/* ============================================ */
.quiz-feedback-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.quiz-feedback-overlay.quiz-feedback-show { opacity: 1; pointer-events: auto; }
.quiz-feedback-overlay.quiz-feedback-fade { opacity: 0; }

.quiz-feedback-icon {
    width: 120px; height: 120px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem;
    animation: quizFeedbackPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quiz-feedback-correct {
    background: rgba(34, 197, 94, 0.2);
    border: 4px solid #22c55e;
    color: var(--success-text);
}
.quiz-feedback-wrong {
    background: rgba(239, 68, 68, 0.2);
    border: 4px solid #ef4444;
    color: var(--error-text);
    margin-bottom: 1.5rem;
}
.quiz-feedback-info {
    background: var(--bg-dark, #1a1d2e);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    max-width: 420px;
    text-align: center;
}
.quiz-feedback-correct-answer {
    color: var(--success-text);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.quiz-feedback-correct-answer i { margin-right: 0.4rem; }
.quiz-feedback-explanation {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-top: 0.5rem;
    line-height: 1.5;
}
@keyframes quizFeedbackPop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Stop TTS Button */
.btn-stop-tts {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: var(--error-text) !important;
    animation: pulse-stop 1.5s infinite;
}
.btn-stop-tts:hover {
    background: rgba(239, 68, 68, 0.3) !important;
}
@keyframes pulse-stop {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Chat Chunk Info */
.chat-chunk-info {
    text-align: center;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.chat-chunk-info i { margin-right: 0.3rem; }
/* D21/A8: yanıt metni geldi ama seslendirme başarısız — uyarı anlamında renklenir (A5) */
.chat-chunk-info.chat-tts-warn { color: var(--warn-text, #fbbf24); }

/* Language Selector */
.language-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}
.language-selector label {
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
}
.language-selector select {
    background: var(--input-bg, rgba(255,255,255,0.05));
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.language-selector select:focus { border-color: var(--accent-color); outline: none; }

/* Feedback FAB
   KATMAN SIRASI: FAB sayfa kabuğunun (modül şeridi 40 · sidebar/alt çubuk 60 ·
   header 80) ÜSTÜNDE, HER modal/kaplamanın (en düşüğü 200: video/görsel
   oynatıcılar, sonra `.modal-overlay` 1000, onay/uyarı 2000+) ALTINDADIR.
   Eskiden 9999'du → açık modalın sağ alttaki düğmelerinin (Kaydet/İptal) üstüne
   biniyor ve tıklamayı yutuyordu. Modal açıkken FAB artık karartmanın altında kalır. */
.feedback-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 90;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-1);
    border: none;
    color: var(--on-accent);
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb, 99, 102, 241), 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feedback-fab:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(var(--accent-rgb, 99, 102, 241), 0.5); }

/* Help Feature Cards */
.help-feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.help-feature-card i { font-size: 1.2rem; margin-bottom: 0.25rem; }
.help-feature-card strong { font-size: 0.85rem; color: var(--text-primary); }
.help-feature-card span { font-size: 0.75rem; color: var(--text-secondary); }

/* Responsive header for small screens */
@media (max-width: 1100px) {
    header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .settings { width: 100%; justify-content: flex-start; }
    .auth-controls { margin-left: 0; }
}
@media (max-width: 640px) {
    .btn-admin-panel, .btn-teacher-panel, .btn-student-panel { font-size: 0.75rem; padding: 0.35rem 0.6rem; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
    .data-table { font-size: 0.78rem; }
    .lms-panel-tabs { gap: 0; }
    .lms-tab { padding: 0.6rem 0.75rem; font-size: 0.78rem; }
}

/* ============================================
   NETWORK CATALOG (Ag Kaynagi)
   ============================================ */

/* --- User-facing selector --- */
.netcat-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.netcat-selector label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}
.netcat-selector select {
    flex: 1;
    padding: 0.5rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}
[data-theme="light"] .netcat-selector select {
    background: var(--bg-dark);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* --- Tree view --- */
.netcat-tree {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0.5rem;
}
[data-theme="light"] .netcat-tree {
    border-color: var(--border-color);
}

.netcat-category {
    margin-bottom: 0.25rem;
}
.netcat-category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: background 0.15s;
}
.netcat-category-header:hover {
    background: rgba(255,255,255,0.04);
}
.netcat-category-header i.fa-chevron-right {
    transition: transform 0.2s;
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.netcat-category.open > .netcat-category-header i.fa-chevron-right {
    transform: rotate(90deg);
}
.netcat-category-badge {
    font-size: 0.7rem;
    background: rgba(var(--accent-rgb, 99, 102, 241),0.2);
    color: var(--accent-text);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: auto;
}
.netcat-category-children {
    display: none;
    padding-left: 1.2rem;
}
.netcat-category.open > .netcat-category-children {
    display: block;
}

.netcat-doc-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.83rem;
    cursor: pointer;
}
.netcat-doc-item:hover { background: rgba(255,255,255,0.03); }
.netcat-doc-item.selected { background: rgba(var(--accent-rgb, 99, 102, 241),0.12); border-left: 3px solid var(--accent-color); }
.netcat-doc-item input[type="checkbox"] { accent-color: var(--accent-color); }
.netcat-doc-name { flex: 1; color: var(--text-primary); }
.netcat-doc-ext {
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    text-transform: uppercase;
}

/* --- Actions & loading --- */
.netcat-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.netcat-selected-count {
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.netcat-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

/* --- Admin: catalog list --- */
.netcat-catalog-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.85rem;
}
.netcat-catalog-row:hover { background: rgba(255,255,255,0.02); }
.netcat-catalog-name { flex: 1; font-weight: 500; color: var(--text-primary); }
.netcat-catalog-url {
    flex: 2;
    color: var(--text-secondary);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.netcat-catalog-stats {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.netcat-catalog-actions {
    display: flex;
    gap: 0.3rem;
}

/* --- Admin: crawl progress --- */
.netcat-crawl-progress {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(var(--accent-rgb, 99, 102, 241),0.08);
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241),0.2);
    border-radius: 8px;
}
.netcat-crawl-progress h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--accent-text,#a5b4fc);
}
.netcat-crawl-status {
    font-size: 0.83rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    word-break: break-all;
}
.netcat-crawl-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* --- Admin: tree editor --- */
.netcat-admin-tree {
    margin-top: 1rem;
}
.netcat-admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.netcat-admin-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.83rem;
}
/* Live Mic Info (device name + level bar) */
.mic-live-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    min-height: 1.2rem;
}
.mic-device-name {
    color: var(--text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mic-level-wrap {
    width: 80px;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.mic-level-bar {
    height: 100%;
    width: 0%;
    background: #22c55e;
    border-radius: 3px;
    transition: width 0.08s linear;
}

.netcat-admin-item input[type="checkbox"] { accent-color: var(--accent-color); }
.netcat-admin-item.is-new { background: rgba(34,197,94,0.08); border-left: 3px solid #22c55e; }
.netcat-admin-item.is-stale { background: rgba(239,68,68,0.08); border-left: 3px solid #ef4444; }
.netcat-admin-item.is-disabled { opacity: 0.5; }
.netcat-admin-item-name {
    flex: 1;
    color: var(--text-primary);
}
.netcat-admin-item-name input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 0.83rem;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    width: 100%;
}
.netcat-admin-item-name input:focus {
    border-color: var(--accent-color);
    outline: none;
    background: rgba(255,255,255,0.05);
}
.netcat-admin-item-actions {
    display: flex;
    gap: 0.3rem;
}
.netcat-status-badge {
    font-size: 0.68rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-weight: 600;
}
.netcat-status-badge.new { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.netcat-status-badge.stale { background: var(--badge-error-bg); color: var(--badge-error-fg); }

/* ============================================
   Rich module settings (bulk sub-modal + single-job modal)
   ============================================ */
.settings-group {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    margin-top: 0.5rem;
}
.settings-group:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.settings-group h4 {
    margin: 0 0 0.6rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-text,#a5b4fc);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.settings-group .form-row {
    margin-bottom: 0.6rem;
}
.settings-group .form-row:last-child {
    margin-bottom: 0;
}
.settings-group .form-row > label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.25rem;
}
.settings-group input[type="number"],
.settings-group input[type="text"],
.settings-group textarea,
.settings-group select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
}
.settings-group textarea {
    resize: vertical;
    min-height: 60px;
}

/* Range slider with value label */
.range-with-value {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.range-with-value input[type="range"] {
    flex: 1;
    min-width: 0;
}
.range-with-value .range-value {
    min-width: 40px;
    text-align: right;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Compact speaker rows inside sub-modal / single-job modal */
.speakers-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sub-speaker-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    gap: 0.4rem;
    align-items: center;
}
.sub-speaker-row .speaker-number {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.sub-speaker-row input[type="text"],
.sub-speaker-row select {
    padding: 0.35rem 0.5rem;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
    min-width: 0;
}

/* ============================================
   Single-job modal - module card grid
   ============================================ */
.single-module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.single-module-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.03);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    min-height: 72px;
}
.single-module-card i {
    font-size: 1.2rem;
    color: var(--accent-text,#a5b4fc);
}
.single-module-card span {
    font-size: 0.78rem;
    line-height: 1.2;
}
.single-module-card:hover {
    border-color: var(--accent-color, #8b5cf6);
    background: rgba(139, 92, 246, 0.08);
}
.single-module-card.selected {
    border-color: var(--accent-color, #8b5cf6);
    background: rgba(139, 92, 246, 0.18);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}
.single-module-card.selected i {
    color: var(--accent-text);
}
@media (max-width: 600px) {
    .single-module-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#singleSettingsPanel {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.25rem;
}
#singleSettingsPanel .settings-empty-hint {
    text-align: center;
    padding: 1rem !important;
}

/* ============================================
   Job queue table - compact actions + bulk toolbar
   ============================================ */
.jobs-table .job-actions {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    min-width: 0;
}
.jobs-table .job-actions .btn-icon {
    min-width: 26px;
    min-height: 26px;
    padding: 0.25rem;
}
.jobs-table .job-actions .btn-icon[disabled] {
    color: var(--text-disabled);
    cursor: not-allowed;
}
.jobs-table th:first-child,
.jobs-table td:first-child {
    text-align: center;
    width: 32px;
}

.jobs-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-wrap: wrap;
}
.jobs-selected-count {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-right: auto;
}
.netcat-status-badge.disabled { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* ===== Faz 16: Slider/radio polish ===== */

/* Duration row layout: stack label / slider / presets vertically so the
   slider gets the full row width — easier to grab with the mouse. */
.setting-row:has(.duration-control) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.setting-row:has(.duration-control) > label {
    margin-bottom: 0;
}
.setting-row:has(.duration-control) > .duration-control,
.setting-row:has(.duration-control) > .duration-presets {
    width: 100%;
}



/* Compression slider (was unstyled — browser default tiny) */
#summaryCompressionRate {
    height: 8px;
    border-radius: 4px;
    background: var(--border-color);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}
#summaryCompressionRate::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#summaryCompressionRate::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Radio rows: CSS Grid forces consistent column alignment regardless of
   mid-row content (slider in row 1, number input in rows 2-4).
   !important overrides the inline `style="display:flex;..."` on each label. */
.summary-mode-row {
    display: grid !important;
    grid-template-columns: 22px 1.25rem 160px 1fr auto;
    column-gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.summary-mode-row > input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    justify-self: center;
    cursor: pointer;
}
.summary-mode-row > input[type="range"],
.summary-mode-row > input[type="number"] {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
 * Özetle ve Dinle - özet metin styling
 * Faz 1.2: özet metni soluk değil, koyu ton olacak
 * ============================================ */
.summary-text,
.summary-text p {
    color: var(--text-primary) !important;
}
.summary-text h2,
.summary-text h3,
.summary-text h4 {
    color: var(--text-primary) !important;
    font-weight: 700;
}
.summary-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* ============================================
 * Özetle ve Dinle - audio speed buttons
 * Faz 1.4: seçili hız butonu belirgin görünsün
 * ============================================ */
.summary-audio-speed {
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.summary-audio-speed.active {
    background: var(--fill-accent);
    color: var(--on-accent);
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 99, 102, 241), 0.25);
    font-weight: 700;
}

/* ============================================
 * Özetle ve Dinle - word-level sync
 * Üç stil admin'den bağımsız seçilir, TOPLAMSAL (herhangi bir kombinasyon):
 *   .style-text      → metin rengi (--summary-word-current-color)
 *   .style-bg        → arka plan vurgu (--summary-word-bg-highlight, rgba)
 *   .style-underline → altını çiz (metin rengini kullanır)
 * Aynı anda işaretlenen N kelime aynı yoğunlukta — soluk varyant yok.
 * ============================================ */
.summary-word {
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
    border-radius: 3px;
    padding: 0 1px;
}
.summary-word:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
}
/* Üç stil TOPLAMSAL: metin rengi + arka plan + altını çiz herhangi bir
 * kombinasyonda aynı anda uygulanabilir. Bold her işaretlemede taban kuraldır.
 * JS en az 'style-text' garantiler → ayrı fallback gerekmez. */
.summary-word.current {
    font-weight: 700;
}
.summary-word.current.style-text {
    color: var(--summary-word-current-color, #ef4444);
}
.summary-word.current.style-bg {
    background: var(--summary-word-bg-highlight, rgba(255, 235, 59, 0.5));
}
.summary-word.current.style-underline {
    text-decoration: underline;
    text-decoration-color: var(--summary-word-current-color, #ef4444);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* ============================================ */
/* Madde 2: Local servis sağlık göstergesi (header) */
/* ============================================ */
.service-health-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
}
.service-health-indicator:hover {
    border-color: var(--accent-color);
}
.service-health-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6b7280;
    display: inline-block;
}
.service-health-dot.sh-ok {
    background: #22c55e;
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.6);
}
.service-health-dot.sh-err {
    background: #ef4444;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.6);
}
.service-health-dot.sh-unk {
    background: #6b7280;
}
[data-theme="light"] .service-health-indicator {
    background: #ffffff;
}

/* ============================================ */
/* Madde 6: Modül "?" yardım butonu             */
/* ============================================ */
/* .module-card'da position tanımı yoktu — buton konumlaması için gerekli.
   Kartın absolutely-positioned başka çocuğu yok, güvenli. */
.module-card {
    position: relative;
}
.module-help-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.module-help-btn:hover {
    background: var(--fill-accent);
    color: var(--on-accent);
    border-color: var(--accent-color);
}
[data-theme="light"] .module-help-btn {
    background: #f1f5f9;
}
[data-theme="light"] .module-help-btn:hover {
    background: var(--fill-accent);
    color: var(--on-accent);
}

/* ============================================ */
/* Sohbet belleği (beyin) butonu — belirgin on/off durumları */
/* ============================================ */
.chat-memory-btn {
    position: relative;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chat-memory-btn.mem-on {
    background: var(--fill-accent) !important;
    color: var(--on-accent) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 8px rgba(var(--accent-rgb, 99, 102, 241), 0.55);
    opacity: 1;
}
.chat-memory-btn.mem-on::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--bg-dark, #1a1d2e);
}
.chat-memory-btn.mem-off {
    background: var(--surface-3) !important;
    color: var(--text-secondary) !important;
}
.chat-memory-btn.mem-off::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9ca3af;
    border: 2px solid var(--bg-dark, #1a1d2e);
}
/* Kapalı durumda ikon üzerinde çapraz "kapalı" çizgisi */
.chat-memory-btn.mem-off::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    height: 2px;
    background: #ef4444;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 1px;
    pointer-events: none;
}
[data-theme="light"] .chat-memory-btn.mem-on::after,
[data-theme="light"] .chat-memory-btn.mem-off::after {
    border-color: #ffffff;
}

/* ============================================================
   Modüller bölümü kilidi — kart seviyesinden İÇERİK ÇOCUKLARINA indirildi.
   NEDEN: opacity/filter bir GRUP RENDER BAĞLAMI yaratır; çocuk onu geri
   ALAMAZ. Karta uygulanınca kilit rozeti de soluklaşıp 2.34:1'e düşüyordu
   (okunmaz). Artık yalnız ikon/başlık/açıklama soluklaşıyor; rozet, "?" ve
   "Test" butonları tam kontrastta kalıyor.
   Muafiyet listesi CSS'ten HTML'e taşındı → data-requires-doc (tek kaynak).
   ============================================================ */
#modulesSection.disabled { opacity: 1; filter: none; }
#modulesSection.disabled .module-card[data-requires-doc="1"] {
    pointer-events: none;
    cursor: default;
}
/* ZORUNLU: muaf kartlar (Diktasyon / Video Arama / Doküman Karşılaştırma)
   doküman YOKKEN de tıklanabilir kalmalı. GLOBAL `.disabled .module-card
   { pointer-events: none }` (bu dosyada ~641. satır) onları da kapsıyor;
   eski `[data-type=...]` muafiyet kuralı bunu geri açıyordu — o kural
   data-requires-doc'a taşındığı için karşılığı BURADA olmak zorunda. */
#modulesSection.disabled .module-card[data-requires-doc="0"] {
    pointer-events: auto;
}
/* `>` bilinçli: .module-lock / .module-help-btn / .local-test-btn kapsam DIŞI */
#modulesSection.disabled .module-card[data-requires-doc="1"] > .icon-box,
#modulesSection.disabled .module-card[data-requires-doc="1"] > h3 {
    opacity: .6;
    filter: grayscale(1);
}
#modulesSection.disabled .module-card[data-requires-doc="1"] > p {
    opacity: .75;
    filter: grayscale(1);
}
/* Kilitliyken kart "tıklanabilir" gibi zıplamasın */
#modulesSection.disabled .module-card[data-requires-doc="1"]:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--warn-text, #fbbf24);
}
/* Kilitliyken yardım ve test butonları ÇALIŞSIN (yardım metni zaten
   "önce dosya yükleyin" diyor — tam ihtiyaç anında erişilebilir olmalı) */
#modulesSection.disabled .module-card[data-requires-doc="1"] > .module-help-btn,
#modulesSection.disabled .module-card[data-requires-doc="1"] > .local-test-btn {
    pointer-events: auto;
}

/* ---- Kilit overlay + rozet ---- */
.module-lock {
    position: absolute;
    inset: 0;
    display: none;              /* kilitsizken Tab sırasından DA çıkar */
    background: transparent;
    border: 0; padding: 0; margin: 0;
    cursor: not-allowed;
    z-index: 1;                 /* help(2) ve test(10) butonlarının ALTINDA */
    border-radius: inherit;
    /* ZORUNLU: `pointer-events` KALITSALDIR. Kilitli kart `pointer-events:none`
       aldığı için overlay onu miras alır ve hiç hit-test almaz — tıklama da
       :hover tooltip'i de ÖLÜ olur. `.local-test-btn`/.module-help-btn de aynı
       nedenle açıkça `auto` alıyor (bkz. yukarısı ve ~644. satır). */
    pointer-events: auto;
}
#modulesSection.disabled .module-card[data-requires-doc="1"] > .module-lock {
    display: block;
}
.module-lock-badge {
    position: absolute;
    top: 8px; left: 8px;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .72rem; font-weight: 600; line-height: 1.4;
    white-space: nowrap;
    background: var(--badge-warn-bg, #31261a);
    color: var(--badge-warn-fg, #fbbf24);
    border: 1px solid var(--fill-warn, #f59e0b);
}
/* E'nin yan etkisi: kart üst padding'i 2rem(32px) → 1.1rem(17.6px) indi, ikon
   kutusu artık 17.6px'ten başlıyor; rozet ise top:8px + ~23px yükseklik ile
   31px'e kadar iniyor → dar sütunda (240-266px kart) yatayda 9-22px çakışma.
   ÇÖZÜM kart padding'ini geri büyütmek DEĞİL (kilitsiz durumdaki kazanç
   kaybolurdu): yalnız KİLİTLİ + IZGARA görünümünde ikonu aşağı it.
   `:not(.list-mode)` ZORUNLU — liste görünümünde rozet zaten dikey ortada
   (bkz. `.grid.list-mode .module-lock-badge`) ve orada ikonu itmek satırı bozar. */
#modulesSection.disabled .grid:not(.list-mode) .module-card[data-requires-doc="1"] > .icon-box {
    margin-top: 18px;
}
.module-lock:focus-visible {
    outline: 2px solid var(--fill-warn, #f59e0b);
    outline-offset: -2px;
}
/* Tooltip — native title 1 sn gecikmeli, stillenemez, klavyede görünmez */
.module-lock::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%; bottom: calc(100% - 4px);
    transform: translateX(-50%) translateY(-4px);
    padding: .35rem .6rem;
    border-radius: 6px;
    font-size: .75rem; line-height: 1.35; white-space: nowrap;
    background: var(--modal-bg, #1a1d2e);
    color: var(--text-primary, #fff);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 14px var(--shadow-color);
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
    z-index: 30;
}
.module-lock:hover::after,
.module-lock:focus-visible::after { opacity: 1; }

/* Liste görünümünde rozet metinle çakışmasın */
#modulesSection.disabled .grid.list-mode .module-card[data-requires-doc="1"] {
    padding-right: 9.5rem;
}
.grid.list-mode .module-lock-badge {
    top: 50%; left: auto; right: 38px;
    transform: translateY(-50%);
}

/* ---- Yükleme alanı vurgusu ----
   BENZERSİZ AD: `pulse` adı genel kalsın diye (D20'den önce iki kez tanımlıydı; mikrofon
   halkası artık `ntMicPulse`) her yeni vurgu kendi adını taşır. */
@keyframes ntUploadAttention {
    0%   { box-shadow: 0 0 0 0    rgba(245,158,11,.55); border-color: #f59e0b; }
    70%  { box-shadow: 0 0 0 14px rgba(245,158,11,0);   border-color: #f59e0b; }
    100% { box-shadow: 0 0 0 0    rgba(245,158,11,0);   border-color: var(--border-color); }
}
@keyframes ntUploadAttentionLight {
    0%   { box-shadow: 0 0 0 0    rgba(180,83,9,.45); border-color: #b45309; }
    70%  { box-shadow: 0 0 0 14px rgba(180,83,9,0);   border-color: #b45309; }
    100% { box-shadow: 0 0 0 0    rgba(180,83,9,0);   border-color: var(--border-color); }
}
.upload-area.nt-attention { animation: ntUploadAttention 1.15s ease-out 2; }
/* #f59e0b beyaz zeminde 2.15:1 — açık temada koyu kehribar */
[data-theme="light"] .upload-area.nt-attention { animation-name: ntUploadAttentionLight; }
@media (prefers-reduced-motion: reduce) {
    .upload-area.nt-attention { animation: none; border-color: #f59e0b; }
    [data-theme="light"] .upload-area.nt-attention { border-color: #b45309; }
}

/* Video Arama: snippet vurgusu (mark) — karanlık temada okunur amber */
#vsResultsGrid mark {
    background: rgba(245, 158, 11, 0.4);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.vs-result-card:hover {
    border-color: var(--accent-color);
}
/* ===========================================================================
   Faz 18 — Kullanım Panosu (adminAnalytics)

   TEMA NOTU: yüzey renkleri için sabit rgba(255,255,255,.03) KULLANILMAZ —
   o değer açık temada neredeyse görünmezdir (projede birkaç yerdeki bilinen
   tuzak). Bunun yerine --bg-dark / --input-bg / --border-color token'ları
   kullanılır; ikisi de her iki temada tanımlıdır.
   =========================================================================== */

.nt-an-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem;
}
.nt-an-head h4 { color: var(--accent-text,#a5b4fc); margin: 0; }

.nt-an-live {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; color: var(--text-secondary);
    background: var(--input-bg); border: 1px solid var(--border-color);
    border-radius: 999px; padding: .3rem .75rem;
}
.nt-an-live #anOnlineCount { color: var(--text-primary); font-weight: 700; }
.nt-an-pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #0ca30c;
    box-shadow: 0 0 0 0 rgba(12, 163, 12, .55); animation: ntAnPulse 2.2s infinite;
}
@keyframes ntAnPulse {
    70% { box-shadow: 0 0 0 7px rgba(12, 163, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); }
}

.nt-an-filters { flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }

.nt-an-warn {
    background: rgba(250, 178, 25, .12); border: 1px solid rgba(250, 178, 25, .45);
    color: var(--text-primary); border-radius: 8px;
    padding: .6rem .85rem; margin-bottom: .85rem; font-size: .88rem;
}

.nt-an-kpis { margin-bottom: 1rem; }
.nt-an-kpi-delta { font-size: .78rem; font-weight: 600; margin-left: .35rem; }
.nt-an-kpi-delta.up { color: var(--success-text); }
.nt-an-kpi-delta.down { color: var(--error-text); }

.nt-an-card {
    background: var(--bg-dark); border: 1px solid var(--border-color);
    border-radius: 10px; padding: .9rem 1rem 1rem; margin-bottom: 1rem;
}
.nt-an-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.nt-an-card-head h5 {
    margin: 0; font-size: .98rem; color: var(--text-primary); font-weight: 700;
}
.nt-an-hint { font-size: .8rem; color: var(--text-secondary); }

/* Yükseklik ZORUNLU: maintainAspectRatio:false olan bir Chart.js canvas'ı
   yüksekliksiz bir sarmalayıcıda her yeniden çizimde büyüyerek sonsuza gider. */
.nt-an-canvas-wrap { position: relative; height: 300px; width: 100%; }
.nt-an-canvas-wrap.sm { height: 230px; }

.nt-an-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nt-an-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) {
    .nt-an-grid2, .nt-an-grid3 { grid-template-columns: minmax(0, 1fr); }
}

/* Chart.js yoksa devreye giren sade bar listesi */
.nt-an-fallback { display: flex; flex-direction: column; gap: .4rem; }
.nt-an-fb-row { display: grid; grid-template-columns: 150px 1fr 62px; gap: .5rem; align-items: center; font-size: .84rem; }
.nt-an-fb-bar { background: var(--input-bg); border-radius: 4px; height: 14px; overflow: hidden; }
.nt-an-fb-fill { height: 100%; background: var(--accent-color); border-radius: 4px; }
.nt-an-fb-val { text-align: right; color: var(--text-secondary); }

/* Isı haritası — CSS grid (Chart.js matrix eklentisi eklemeye gerek yok) */
.nt-an-heat-wrap { overflow-x: auto; }
.nt-an-heat { display: grid; grid-template-columns: 42px repeat(24, minmax(20px, 1fr)); gap: 2px; min-width: 620px; }
.nt-an-heat-lbl { font-size: .72rem; color: var(--text-secondary); display: flex; align-items: center; }
.nt-an-heat-hr { font-size: .66rem; color: var(--text-secondary); text-align: center; }
.nt-an-heat-cell { aspect-ratio: 1 / 1; border-radius: 3px; background: var(--input-bg); min-height: 18px; }

/* Modül × okul matrisi — sütun sayısı okul sayısı kadar büyür.
   Kaydırma SARMALAYICIDA kalır (sayfa gövdesi yatay kaymaz); ilk sütun
   (modül adı) yapışkandır. Yapışkan hücrenin zemini OPAK olmak ZORUNDA:
   yarı saydam olsaydı altından kayan sayı sütunları okunurdu. Değer olarak
   kartın kendi zemini (--bg-dark) kullanılır, böylece metin/zemin kontrastı
   tablonun geri kalanıyla birebir aynı kalır (her iki temada da). */
.nt-an-matrix { overflow-x: auto; }
.nt-an-matrix th, .nt-an-matrix td { text-align: right; white-space: nowrap; }
.nt-an-matrix th:first-child, .nt-an-matrix td:first-child {
    position: sticky; left: 0; z-index: 1; text-align: left;
    background: var(--bg-dark); border-right: 1px solid var(--border-color);
}
.nt-an-matrix thead th:first-child { z-index: 2; }

.nt-an-pager {
    display: flex; align-items: center; justify-content: center;
    gap: .6rem; margin-top: .75rem; font-size: .85rem; color: var(--text-secondary);
}

.nt-an-empty { text-align: center; color: var(--text-secondary); padding: 1.5rem 0; font-size: .9rem; }

/* D19: pano "Ayarlar" kartı (yalnız süper admin) — ad/ipucu solda, denetim sağda */
.nt-an-settings { display: flex; flex-direction: column; }
.nt-an-settings-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .55rem 0; border-bottom: 1px solid var(--border-color, #2c2f3c);
}
.nt-an-settings-row:last-child { border-bottom: none; }
.nt-an-settings-row > label { display: flex; flex-direction: column; gap: .1rem; min-width: 0; cursor: pointer; }
.nt-an-settings-name { font-size: .88rem; color: var(--text-primary, #ffffff); font-weight: 600; }
.nt-an-settings-key { font-size: .7rem; color: var(--text-secondary, #a0a0b0); background: none; padding: 0; }
.nt-an-settings-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
/* Durum metni ANLAMINA göre renklenir (A5) — sınıf her yazımda sıfırlanır (setAnSettingsStatus). */
.nt-an-settings-status { font-size: .82rem; color: var(--text-secondary, #a0a0b0); }
.nt-an-settings-status.is-success { color: var(--success-text, #4ade80); }
.nt-an-settings-status.is-error { color: var(--error-text, #fca5a5); }
@media (max-width: 560px) {
    .nt-an-settings-row { flex-direction: column; align-items: flex-start; }
}

/* Yükleme iskeleti (boş durumdan ayırt edilebilir olsun) */
.nt-an-skel { background: var(--input-bg); border-radius: 6px; animation: ntAnSkel 1.3s ease-in-out infinite; }
@keyframes ntAnSkel { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

/* Rapor modalı */
.nt-an-rep-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.nt-an-cols {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .3rem .75rem;
    max-height: 210px; overflow-y: auto; padding: .55rem;
    border: 1px solid var(--border-color); border-radius: 8px; background: var(--input-bg);
}
.nt-an-check { display: flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }
.nt-an-check input { width: auto; margin: 0; }

/* Native <option> popup'ı OS varsayılanıyla (çoğunlukla BEYAZ) çizilir —
   koyu temada açık yazı rengi tek başına white-on-white üretir. Opak zemin şart. */
#adminAnalytics select option, #anReportModal select option,
#anUserDetailModal select option {
    background: var(--dropdown-bg); color: var(--dropdown-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAZ 3 — `.nt-*` YARDIMCI SINIFLARI  (tek tanım yeri: BU dosya)
   ═══════════════════════════════════════════════════════════════════════════
   NEDEN: `app.js` / `index.html` içinde satır-içi (`style="color:#22c55e"`)
   yazılan renkler yalnız KOYU temada denenmişti; açık temaya geçince beyaza
   eriyorlardı. Satır-içi renk yerine bu sınıflar kullanılır — renk kararı
   tek yerde, iki temada da ölçülmüş token'lardan gelir.

   KULLANIM (G-INLINE bu adları TÜKETİR, burada TANIMLANIR):
     metin    → .nt-text-{success|warn|error|info|accent|muted}
     rozet    → .nt-badge  +  .nt-badge-{success|warn|error|info|neutral}
     uyarı    → .nt-callout +  .nt-callout-{error|warn|info}
     dolgu    → .nt-fill-{success|warn|error|info|neutral}
     yüzey    → .nt-surface-{1|2|3}
     kategori → .nt-cat-1 .. .nt-cat-8   (ANLAMSAL DEĞİL — ayırt edici)
     koyu ada → .nt-dark-island          (daima koyu; içi pastel kalır)
     örtü     → .nt-on-scrim
     doğru cvp→ .nt-answer-correct

   ÖZGÜLLÜK NOTU: `.nt-text-*` ÇİFT SEÇİCİ ile yazılır (0,2,0). Tek sınıf
   (0,1,0) olsaydı `.empty-hint`, `.stat-value`, `.badge-*` gibi mevcut
   kurallarla kaynak-sırası savaşına girerdi. `!important` KULLANILMAZ —
   çağıran taraf gerektiğinde kendi kuralını yazabilsin.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 1. Anlamsal metin (çift seçici = 0,2,0) --- */
.nt-text-success.nt-text-success { color: var(--success-text); }
.nt-text-warn.nt-text-warn       { color: var(--warn-text); }
.nt-text-error.nt-text-error     { color: var(--error-text); }
.nt-text-info.nt-text-info       { color: var(--info-text); }
.nt-text-accent.nt-text-accent   { color: var(--accent-text); }
.nt-text-muted.nt-text-muted     { color: var(--text-muted); }

/* --- 2. Rozet: YAPI + RENK ÇİFTİ ---
   Yapı ve renk AYRI: `.nt-badge` tek başına renksizdir, renk modifier'dan gelir.
   Renk çifti (bg+fg) BİRLİKTE verilir — yarı saydam tint açık temada 1.00:1 idi. */
.nt-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.nt-badge-success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.nt-badge-warn    { background: var(--badge-warn-bg);    color: var(--badge-warn-fg); }
.nt-badge-error   { background: var(--badge-error-bg);   color: var(--badge-error-fg); }
.nt-badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.nt-badge-neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* --- 3. Callout (sol kenarlıklı uyarı kutusu) ---
   Gövde metni --text-primary'dir (uzun metin anlamsal renkte BAĞIRIR);
   anlamsal renk yalnız sol kenarlıkta ve başlıkta görünür. */
.nt-callout {
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border-left: 4px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0.6rem 0;
}
.nt-callout-error { background: var(--badge-error-bg); border-left-color: var(--fill-error); }
.nt-callout-warn  { background: var(--badge-warn-bg);  border-left-color: var(--fill-warn); }
.nt-callout-info  { background: var(--badge-info-bg);  border-left-color: var(--fill-info); }
.nt-callout-title { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.nt-callout-error .nt-callout-title { color: var(--badge-error-fg); }
.nt-callout-warn  .nt-callout-title { color: var(--badge-warn-fg); }
.nt-callout-info  .nt-callout-title { color: var(--badge-info-fg); }

/* --- 4. Doygun dolgu + üstündeki metin ---
   `--on-warn` SİYAHTIR: #f59e0b üstünde beyaz 2.15, siyah 9.78. Kehribarı
   beyazla 4.5'e çıkarmak onu kahverengi yapardı (trafik-lambası kuralı). */
.nt-fill-success { background: var(--fill-success); color: var(--on-success); }
.nt-fill-warn    { background: var(--fill-warn);    color: var(--on-warn); }
.nt-fill-error   { background: var(--fill-error);   color: var(--on-error); }
.nt-fill-info    { background: var(--fill-info);    color: var(--on-info); }
.nt-fill-neutral { background: var(--fill-neutral); color: var(--on-neutral); }

/* --- 5. Yüzey merdiveni (opak) --- */
.nt-surface-1 { background: var(--surface-1); color: var(--text-primary); }
.nt-surface-2 { background: var(--surface-2); color: var(--text-primary); }
.nt-surface-3 { background: var(--surface-3); color: var(--text-primary); }

/* --- 6. Kategorik palet (ANLAMSAL DEĞİL) ---
   8 modül ikonu / podcast konuşmacıları gibi "birbirinden ayrılsın" isteyen
   yerler için. Yeşil = başarı DEĞİLDİR; anlam taşıyan yer .nt-text-* kullanır.
   Çift seçici: hedefler çoğunlukla kendi renk kuralı olan ikonlar
   (`.notification-item-icon.category-x` = 0,2,0). */
.nt-cat-1.nt-cat-1 { color: var(--chart-1); }
.nt-cat-2.nt-cat-2 { color: var(--chart-2); }
.nt-cat-3.nt-cat-3 { color: var(--chart-3); }
.nt-cat-4.nt-cat-4 { color: var(--chart-4); }
.nt-cat-5.nt-cat-5 { color: var(--chart-5); }
.nt-cat-6.nt-cat-6 { color: var(--chart-6); }
.nt-cat-7.nt-cat-7 { color: var(--chart-7); }
.nt-cat-8.nt-cat-8 { color: var(--chart-8); }

/* --- 7. Koyu ada (FFmpeg uyarı kutusu deseni) ---
   Bazı kutular AÇIK temada da bilinçli olarak koyu kalır (terminal çıktısı,
   kurulum komutu, video önizleme altlığı). Sınıf, token'ları YEREL olarak
   koyu-tema değerlerine sabitler; böylece içindeki her `.nt-text-*`,
   `.nt-badge-*` ve `var(--text-secondary)` kullanan alt eleman OTOMATİK
   olarak pastel (okunur) kalır — ada başına ayrı ezme kuralı gerekmez. */
.nt-dark-island {
    /* Yerel palet = YENİ koyu tema değerlerinin kopyası (Faz 1 A-1 ile eşitlendi).
       Ada açık temada da koyu kalır — tasarımın "açık sayfada koyu sidebar" deseni
       bu sınıfla verilir (tokens.css'in light --bg-dark önerisi yerine). */
    --surface-1: #151827;
    --surface-2: #1c2033;
    --surface-3: #252a42;
    --card-bg: #151827;
    --input-bg: #1c2033;
    --bg-secondary: #1c2033;
    --text-primary: #f2f4fa;
    --text-secondary: #a6adc5;
    --text-muted: #8f97b3;
    --text-disabled: #6f7691;
    --success-text: #4ade80;
    --warn-text: #fbbf24;
    --error-text: #fca5a5;
    --info-text: #93c5fd;
    --accent-text: #a5b4fc;
    --border-color: #262b40;
    --border-strong: #79809c;
    --badge-success-bg: #10291c;  --badge-success-fg: #4ade80;
    --badge-warn-bg:    #2e2416;  --badge-warn-fg:    #fbbf24;
    --badge-error-bg:   #2e1a20;  --badge-error-fg:   #fca5a5;
    --badge-info-bg:    #182238;  --badge-info-fg:    #93c5fd;
    --badge-accent-bg:  #1d2142;  --badge-accent-fg:  #a5b4fc;
    --badge-neutral-bg: #232838;  --badge-neutral-fg: #d1d5db;
    --chart-1: #93c5fd;  --chart-2: #4ade80;  --chart-3: #fbbf24;
    --chart-4: #a5b4fc;  --chart-5: #f9a8d4;  --chart-6: #5eead4;
    --chart-7: #fdba74;  --chart-8: #d8b4fe;
    background: #101322;
    color: var(--text-primary);  /* contrast-ok: ada icinde --text-primary yerel olarak #f2f4fa, zemin #101322 uzerinde 16.6:1 */
    border: 1px solid #262b40;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

/* --- 8. Koyu yarı-saydam örtü üstü metin ---
   Alfa 0.62: beyaz zemin üzerinde bile kompozit #616161 verir (beyaz metinle
   6.19:1). 0.55'te 4.48:1 ile eşiğin ALTINDA kalıyordu — düşürmeyin. */
.nt-on-scrim {
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
}

/* --- 9. Doğru cevap vurgusu --- */
.nt-answer-correct {
    background: var(--badge-success-bg);
    color: var(--badge-success-fg);
    border-left: 3px solid var(--fill-success);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-weight: 600;
}

/* Faz 22: LMS sekme sayacı — "Tekrar" sekmesinde vadesi gelen kart sayısı.
   Renk çifti Faz 21'de ölçüldü: koyu 8.31:1 / açık 8.15:1 (kural A5). Açık temada
   dolgu beyaz zeminde 1.11:1'e düştüğü için KENARLIK zorunludur. */
.nt-due-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.38rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
    background: var(--badge-warn-bg);
    color: var(--badge-warn-fg);
    border: 1px solid var(--fill-warn);
}

/* ====================================================================
   ERİŞİLEBİLİRLİK GÜVENLİK AĞI (Faz 6 D4 — erisilebilirlik sözleşmesi)
   ==================================================================== */
/* Global odak halkası: 21 dağınık `outline:none` kuralını tek tek çevirmek
   yerine !important ile ÜSTLERİNE yazılır (görsel sonuç sözleşmeyle aynı,
   dokunulan satır sayısı sıfır — kanıtlanabilir en güvenli yol). Yalnız
   klavye odağında görünür (:focus-visible); fare tıklaması halka üretmez. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--accent-color, #6366f1) !important;
    outline-offset: 2px;
}
/* Skip link: yalnız odaklanınca görünür */
.nt-skip-link {
    position: fixed; top: -48px; left: 12px; z-index: 300;
    padding: 9px 16px; border-radius: 10px;
    background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff);
    font-weight: 700; text-decoration: none; transition: top 150ms;
}
.nt-skip-link:focus { top: 12px; }
/* Global reduced-motion (animasyon-spesifikasyonlari bloğu; mevcut 2 özel kural korunur) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ====================================================================
   GÖRÜNÜM KAPSAYICILARI (Faz 2 — hash router + body[data-view])
   Router yalnız body[data-view] yazar; bölümlerin kendi .hidden durumlarına
   KARIŞMAZ (app.js'in 8 noktadaki toggle'larıyla yarış olmasın).
   #resultsSection paylaşılan bölgedir: hub VE modül görünümünde görünür,
   yalnız panel görünümünde gizli (K3 — sonuç düğümleri asla taşınmaz).
   KULLANICI KARARI (2026-10-19, Faz 43): modül açılınca ANA SAYFADAN AYRILINMAZ.
   `data-view="module"` artık "ana sayfa + altında açık modül" demektir: #hubView
   görünür kalır, #moduleView DOM sırasıyla modül kartlarının ALTINDA açılır, üretilen
   içerik onun altındaki #resultsSection'a düşer. (Eskiden burada
   `body[data-view="module"] #hubView { display:none }` vardı → tam sayfa modül.)
   Router mantığı (telemetri, faz göstergesi, çıkış temizliği) değişmedi.
   ==================================================================== */
body[data-view="module"] #panelView { display: none; }
body[data-view="panel"] #hubView,
body[data-view="panel"] #resultsSection,
body[data-view="panel"] #moduleView { display: none; }

/* ── Modül tam-sayfa kabuğu (Faz 2 S3) ──────────────────────────────
   Eski promptModal artık .module-settings-host: modal görünümünden sayfa
   bölümüne CSS ile indirgenir; İÇ DOM/id'ler birebir (JS bağları korunur). */
#moduleView {
    max-width: 900px;
    margin: 18px auto 0;
    padding: 0 clamp(8px, 2vw, 16px);
    /* Ana sayfa altında açıldığında kaydırma hedefi; yapışkan üst şeridin altında kalmasın */
    scroll-margin-top: 76px;
}
/* "Kapat" ve #moduller kartlara kaydırır; başlık yapışkan üst şeridin altında kalmasın */
#modulesSection { scroll-margin-top: 70px; }
/* Açık modülün kartı ana sayfadaki ızgarada işaretli (hangi modülün altta açık olduğu görünsün) */
.module-card[data-nt-acik="1"] {
    outline: 2px solid var(--accent-color, #6366f1);
    outline-offset: 2px;
}
.module-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    margin-bottom: 14px;
    background: var(--bg-color, #0d0f1a);
    border-bottom: 1px solid var(--border-color, #262b40);
}
.mv-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-chip, 10px);
    background: var(--surface-2, #1c2033);
    color: var(--text-secondary, #a6adc5);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.mv-back:hover { border-color: var(--accent-color, #6366f1); color: var(--text-primary, #f2f4fa); }
.mv-sep { width: 1px; height: 22px; background: var(--border-color, #262b40); }
.mv-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent-text, #a5b4fc);
    display: grid;
    place-items: center;
    font-size: 14px;
}
.mv-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    font-family: var(--font-display, inherit);
    color: var(--text-primary, #f2f4fa);
}
.mv-flex { flex: 1; }
.mv-phase-chips {
    display: inline-flex; gap: 3px; padding: 3px;
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-chip, 10px);
    background: var(--surface-2, #1c2033);
}
.mv-chip {
    border: none; background: transparent; cursor: pointer;
    padding: 5px 11px; border-radius: 8px;
    color: var(--text-secondary, #a6adc5); font-size: 12px; font-weight: 700;
    transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.mv-chip:hover { color: var(--text-primary, #f2f4fa); }
.mv-chip.active, .mv-chip:active {
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent-text, #a5b4fc);
}
/* Aşama göstergesi (backlog kapanışı): flashcards dışındaki üretim modüllerinde
   Ayarlar → Üretim → Sonuç. Salt gösterge; tıklanmaz (çipler yalnız flashcards'ta). */
.mv-phase-ind { display: inline-flex; align-items: center; gap: .45rem; margin-right: .5rem; font-size: .78rem; }
.mv-step { color: var(--text-muted, #8f97b3); font-weight: 600; letter-spacing: .01em; }
.mv-step.aktif { color: var(--accent-text, #a5b4fc); }
.mv-step-sep { color: var(--text-muted, #8f97b3); font-size: .7rem; }
@media (max-width: 760px) { .mv-phase-ind { display: none; } }   /* dar üst çubukta yer yok */
/* Ayar bölümü: modal kabuğu sayfa kartına iner (iç id'lere dokunulmadı) */
.module-settings-host > .modal,
.module-settings-host > .modal-card {
    position: static;
    transform: none !important;
    max-width: none;
    width: 100%;
    margin: 0 0 16px;
    max-height: none;
    box-shadow: var(--shadow-card, 0 10px 30px rgba(0, 0, 0, .28));
    border-radius: var(--r-card, 16px);
}
#moduleView .modal-zoom-controls { display: none; }  /* sayfa modunda zoom anlamsız */
/* Modül görünümünde paylaşılan sonuç bölgesi kabukla hizalanır (K3) */
body[data-view="module"] #resultsSection {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(8px, 2vw, 16px);
}

/* Panel sekme şeridi: tam-sayfa panelde YATAY KAYDIRILABİLİR tek satır
   (admin 17 sekme — prototip kararı K5; DOM değişmedi, yalnız akış). */
.lms-panel-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.lms-panel-tabs .lms-tab { white-space: nowrap; flex: 0 0 auto; }

/* ====================================================================
   SOL KENAR ÇUBUĞU + MOBİL ALT ÇUBUK (Faz 3 — tasarım: Sidebar kararı)
   Sidebar YALNIZ hub görünümünde (modül/panel sayfaları ince üst çubuklu);
   ≤760px'te sidebar yerine 5 sekmeli alt çubuk (responsive-rehberi ölçüleri).
   .nt-dark-island: açık temada da koyu — yerel paleti yukarıda tanımlı.
   ==================================================================== */
#ntSidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 232px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    overflow-y: auto;
    border: none;
    border-right: 1px solid #262b40;
    border-radius: 0;
}
body:not([data-view="hub"]) #ntSidebar { display: none; }
.nt-side-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 12px; }
.nt-side-mark {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
    background: var(--gradient-brand-mark, linear-gradient(135deg, #6366f1, #a855f7));
    color: #ffffff; display: grid; place-items: center; font-size: 15px;
}
.nt-side-title {
    font-family: var(--font-display, inherit);
    font-weight: 800; font-size: 13px; line-height: 1.25;
    color: var(--text-primary, #f2f4fa);
}
.nt-side-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.nt-side-link, .nt-side-mod {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 8px 10px; border: none; border-radius: 9px; background: transparent;
    color: var(--text-secondary, #a6adc5); font-size: 12.8px; font-weight: 600;
    cursor: pointer; transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.nt-side-link i, .nt-side-mod i { width: 16px; text-align: center; font-size: 12.5px; }
.nt-side-link:hover, .nt-side-mod:hover { background: rgba(255, 255, 255, .06); color: var(--text-primary, #f2f4fa); }
.nt-side-link.active { background: rgba(var(--accent-rgb, 99, 102, 241), .22); color: var(--accent-text, #a5b4fc); }
.nt-side-heading {
    display: block; padding: 12px 10px 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    color: var(--text-muted, #8f97b3);
}
.nt-side-badge {
    margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
    background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff);
    font-size: 10.5px; font-weight: 800; text-align: center;
}
.nt-side-user { border-top: 1px solid var(--border-color, #262b40); padding-top: 10px; }
.nt-side-login {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 10px; border-radius: 9px; text-decoration: none;
    background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff);
    font-weight: 700; font-size: 12.5px;
}
.nt-side-usercard { display: flex; align-items: center; gap: 9px; padding: 6px 8px; }
.nt-side-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    background: rgba(var(--accent-rgb, 99, 102, 241), .22);
    color: var(--accent-text, #a5b4fc); display: grid; place-items: center; font-weight: 800;
}
.nt-side-usermeta { display: flex; flex-direction: column; min-width: 0; }
.nt-side-usermeta strong {
    font-size: 12.5px; color: var(--text-primary, #f2f4fa);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nt-side-usermeta small {
    font-size: 10.8px; color: var(--text-muted, #8f97b3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Flicker önlemi: rol çözülmeden sidebar modül linkleri görünmez (kartlarla aynı kural) */
body:not(.ui-vis-ready) #ntSidebar .nt-side-mod { visibility: hidden; }
/* İçerik kayması: yalnız hub + masaüstü */
@media (min-width: 1025px) {
    body[data-view="hub"] .app-container { margin-left: 232px; }
}

/* ── Hub blokları (Faz 4a): misafir şeridi + öğrenci KPI + son materyaller ── */
.nt-guest-strip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 10px 14px;
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-input, 11px);
    background: var(--surface-1, #151827);
    color: var(--text-secondary, #a6adc5); font-size: 13px;
}
.nt-guest-strip i { color: var(--info-text, #93c5fd); }
.nt-guest-login, .nt-guest-register {
    font-weight: 700; text-decoration: none; padding: 6px 12px;
    border-radius: var(--r-chip, 10px);
}
.nt-guest-login { color: var(--accent-text, #a5b4fc); }
.nt-guest-register { background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff); margin-left: auto; }
.nt-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin-bottom: 16px;
}
.nt-kpi {
    background: var(--surface-1, #151827);
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-tile, 14px);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.nt-kpi-val {
    font-family: var(--font-display, inherit);
    font-size: 24px; font-weight: 800; color: var(--text-primary, #f2f4fa);
}
.nt-kpi-lbl {
    font-size: var(--fs-label, 11px); font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted, #8f97b3);
}
.nt-recent-wrap { margin-bottom: 16px; }
.nt-recent-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 4px; border-bottom: 1px solid var(--border-color, #262b40);
}
.nt-recent-row:last-child { border-bottom: none; }
.nt-recent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary, #f2f4fa); font-size: 13px; font-weight: 600; }
.nt-recent-type {
    padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}

#ntBottomNav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: none; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(16, 19, 34, .95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color, #262b40);
}
[data-theme="light"] #ntBottomNav { background: rgba(255, 255, 255, .95); }
#ntBottomNav :is(button, a) {
    position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; padding: 4px 2px; border: none; background: transparent;
    color: var(--text-muted, #8f97b3); font-size: 10.5px; font-weight: 700; cursor: pointer;
}
#ntBottomNav :is(button, a) i { font-size: 19px; }
#ntBottomNav :is(button, a).active { color: var(--accent-text, #a5b4fc); }
/* Gezinme öğeleri gerçek <a href> (ctrl/orta tık yeni sekme — global kural). :where() →
   SIFIR özgüllük: sınıf kurallarının renk/hiza/dolgu değerlerini EZMEZ; yalnız tarayıcının
   bağlantı varsayılanlarını (alt çizgi, mavi/mor ziyaret rengi) nötrler ve düğmeyle aynı
   kutu modelini/satır yüksekliğini verir (yükseklikler birebir korunur). */
:where(a.nt-side-link, a.nt-side-mod, a.lms-tab, #ntBottomNav a, a.nt-side-brand) {
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    line-height: normal;
}
#ntBottomNav .nt-side-badge { position: absolute; top: 0; right: 16%; margin: 0; }
/* Faz 62 (iş 18, D6): bu blok BÖLÜNDÜ — kenar çubuğunu gizleme ≤ 1024'e taşındı (orada
   gizlenmez, ÇEKMECEYE döner; dosya sonundaki "DUYARLI ARAYÜZ" bölümü), alt çubuk ≤ 760'ta kalır. */
@media (max-width: 1024px) {
    body[data-view="hub"] .app-container,
    body[data-view="module"] .app-container { margin-left: 0; }
}
@media (max-width: 760px) {
    /* Faz 43: modül ana sayfa altında açıldığı için alt çubuk modül görünümünde de kalır */
    body[data-view="hub"] #ntBottomNav,
    body[data-view="module"] #ntBottomNav { display: grid; }
    body[data-view="hub"] .app-container,
    body[data-view="module"] .app-container { margin-left: 0; padding-bottom: 76px; }
    /* FAB alt çubuğun üstüne kalkar (çakışma önlemi — plan K6) */
    body[data-view="hub"] .feedback-fab,
    body[data-view="module"] .feedback-fab { bottom: calc(64px + env(safe-area-inset-bottom)); }
    /* Faz 62 (iş 18): panel görünümünde de alt çubuk (öğretmen / yöneticinin telefonda tek
       gezinme yolu). AYRI kural — üstteki hub/module dizgisi birebir korunur. */
    body[data-view="panel"] #ntBottomNav { display: grid; }
    body[data-view="panel"] .app-container { padding-bottom: 76px; }
    body[data-view="panel"] .feedback-fab { bottom: calc(64px + env(safe-area-inset-bottom)); }
    /* Sayfanın sonu sabit düğmelerin (geri bildirim, debug — alt çubuğun 64 px üstünde, 48 px)
       ÜSTÜNDE bitsin: footer'ın 4rem'i yalnız alt çubuğu karşılıyordu; en alta kaydırınca çalışma
       müziği şeridinin oynatıcı düğmeleri iki sabit düğmenin altında kalıyordu (demo ölçümü). */
    body[data-view] #appFooter { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
}

/* ====================================================================
   MİKRO ETKİLEŞİMLER (Faz 4d — animasyon-spesifikasyonlari.md değerleri)
   Süre/easing token'lardan; transform hover'da YOK (grid zıplamasın),
   yalnız birincil buton active'de scale(.97).
   ==================================================================== */
.module-card {
    transition: border-color var(--dur-fast, 150ms),
                box-shadow var(--dur-fast, 150ms);
}
.module-card:hover {
    border-color: var(--accent-color, #6366f1);
    box-shadow: var(--shadow-hover, 0 8px 24px rgba(99, 102, 241, .18));
}
.btn-primary {
    transition: filter var(--dur-fast, 150ms), transform 100ms;
}
.btn-primary:hover { filter: brightness(.92); }
.btn-primary:active { transform: scale(.97); }
.upload-tab, .lms-tab, .mv-btn {
    transition: background var(--dur-med, 250ms) var(--ease-out, cubic-bezier(.16, 1, .3, 1)),
                color var(--dur-fast, 150ms);
}
.gen-chunk-fill, .video-progress-fill, .agp-fill {
    background: var(--gradient-1, linear-gradient(120deg, #4f46e5, #7c3aed));
    transition: width 300ms linear;
}
/* Bekleme nabzı — spinner yerine ikon nabzı (tasarım) */
@keyframes ntPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.nt-pulse { animation: ntPulse 1.6s infinite; }
/* Sekme içeriği girişi (yalnız panel sekmeleri; çıkış animasyonu yok) */
@keyframes ntTabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lms-tab-content.active { animation: ntTabIn var(--dur-med, 250ms) var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }

/* ====================================================================
   TİPOGRAFİ UYGULAMASI (Faz 1-B) — başlık dili Bricolage Grotesque.
   Kapsam bilerek dar: başlıklar + marka + modül kartı adları. Monospace
   alanlar (kod/JSON/log) ve FontAwesome (.fa*) kendi ailelerini korur.
   ==================================================================== */
h1, h2, h3, h4,
.logo,
.module-card h3 {
    font-family: var(--font-display, inherit);
}

/* ====================================================================
   TASARIM ÜST ŞERİDİ + HUB KARŞILAMA (Ana Ekran.html sadakat düzeltmesi)
   Kancalar korunur: yalnız görsel dil + yeni yardımcı bileşenler.
   ==================================================================== */
header {
    position: sticky; top: 0; z-index: 80;
    background: rgba(var(--topbar-rgb, 16, 19, 34), .88);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    margin-bottom: 1.4rem; padding: 10px 0; gap: 12px;
}
header .logo h1 { font-size: 15.5px; margin: 0; }
header .logo #defaultLogoIcon { font-size: 20px; }
header #customLogo { height: 30px !important; }
/* Hub'da marka sidebar'dadır (masaüstü); dar ekranda sidebar gizli → marka kalır.
   Modül/panel görünümünde sidebar olmadığı için marka header'da görünmeye devam eder. */
@media (min-width: 1025px) {
    body[data-view="hub"] header .logo { display: none; }
}
.nt-topbar-search {
    flex: 1; max-width: 400px; display: flex; align-items: center; gap: 10px;
    background: var(--input-bg, #1c2033); border: 1px solid var(--border-color, #262b40);
    border-radius: 10px; padding: 8px 14px; color: var(--text-secondary, #a6adc5);
}
.nt-topbar-search input {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    color: var(--text-primary, #f2f4fa); font-size: 13px; font-family: inherit;
}
.nt-topbar-search input::placeholder { color: var(--text-secondary, #a6adc5); }
/* Arama hub bağlamına aittir (modül kartlarını süzer) — panelde gizli. Faz 43: modül
   ana sayfa altında açıldığı için modül görünümünde kartlar görünür → arama da kalır. */
body[data-view="panel"] .nt-topbar-search { display: none; }
header .settings .btn-secondary { padding: 7px 11px; font-size: 12.5px; border-radius: 10px; }
.nt-search-hide { display: none !important; }

/* Amber duyuru şeridi (megafon + içerik + ✕) */
.page-announcement {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--announce-bg, #251d10); border: 1px solid var(--announce-border, #6b4e16);
    border-radius: 13px; padding: 11px 16px; margin: 0 0 16px;
}
.nt-announce-icon { color: var(--announce-text, #fbbf24); font-size: 15px; }
.nt-announce-body { flex: 1; min-width: 200px; font-size: 12.5px; font-weight: 600; color: var(--announce-text, #fbbf24); }
.nt-announce-body a { color: var(--announce-muted, #d3a94e); }
.nt-announce-close { border: none; background: none; color: var(--announce-text, #fbbf24); cursor: pointer; font-size: 14px; padding: 2px 4px; }

/* Misafir şeridi — marka gradyanı üzeri beyaz (iki temada aynı) */
.nt-guest-strip {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(120deg, #4f46e5, #7c3aed);
    border: none; border-radius: 16px; padding: 16px 20px; color: #fff; margin-bottom: 22px;
}
.nt-guest-texts { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
/* contrast-ok: marka gradyanı (#4f46e5) üzeri beyaz 6.3:1, %85 beyaz ~5.2:1 — ölçüldü */
.nt-guest-strip .nt-guest-text { font-weight: 700; font-size: 15px; color: #fff; }
.nt-guest-strip .nt-guest-sub { font-size: 13px; color: rgba(255, 255, 255, .85); }
.nt-guest-strip .nt-guest-login {
    padding: 10px 18px; border-radius: 10px; background: #fff; color: #4338ca;
    font-weight: 700; font-size: 13.5px; white-space: nowrap; text-decoration: none;
}
.nt-guest-strip .nt-guest-register {
    padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff; /* contrast-ok: zemin mor gradyan (#4f46e5→#7c3aed) üzeri %14 beyaz — efektif ~#6157e8, beyaz metin ~5.4:1; araç gradyan atayı göremeyip beyaz karta kompozitliyor */
    font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none;
}

/* Karşılama satırı + tekrar çipi */
.nt-greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.nt-greet-title {
    margin: 0; font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; letter-spacing: -.01em;
    color: var(--text-primary, #f2f4fa);
}
.nt-greet-sub { margin: 3px 0 0; color: var(--text-secondary, #a6adc5); font-size: 13.5px; }
.nt-due-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border-radius: 11px; background: var(--surface-2, #1c2033);
    border: 1px solid var(--border-color, #262b40); color: var(--accent-text, #a5b4fc);
    font-weight: 600; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.nt-due-chip:hover { border-color: var(--accent-text, #a5b4fc); }

/* Kaynak Doküman kartı: başlık satırı + pill sekmeler + meta satırları */
.nt-upload-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nt-upload-head h2 { margin: 0 0 8px; }
.nt-upload-meta { margin: 6px 0 0; color: var(--text-muted, #8f97b3); font-size: 12.5px; }
.nt-upload-cta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.upload-section .upload-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; border: none; }
.upload-section .upload-tab {
    padding: 5px 11px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-secondary, #a6adc5); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.upload-section .upload-tab i { display: none; }   /* tasarım: sade pill */
.upload-section .upload-tab.active {
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent-text, #a5b4fc); font-weight: 700;
}
.nt-drop-sub { color: var(--text-muted, #8f97b3); font-size: 12.5px; margin: 4px 0 0; }
.nt-folder-note { color: var(--text-muted, #8f97b3); font-size: 12px; margin-left: 10px; }
/* Sadakat #3: başlık artık --surface-2 şeridi üzerinde duruyor; --text-muted
   açık temada o zeminde 4.32:1 ile KALIYOR → --text-secondary (6.2:1). */
.doc-list-container > h4 { text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; color: var(--text-secondary, #a6adc5); }

/* ====================================================================
   ÇEKİRDEK BİLEŞEN DİLİ — Bilesen Kutuphanesi.html + Ana Ekran.html
   Kullanıcı bildirimi (2026-08-16): token DEĞERLERİ taşınmış ama biçim
   dili (radius/dolgu/kenarlık/yoğunluk) eski projedeydi. Bu blok referans
   bileşen tanımlarını çekirdek sınıflara işler; sınıf adları/DOM değişmez.
   Dosya SONUNDA durur ki aynı-özgüllükteki eski tanımları kazansın.
   ==================================================================== */

/* — Butonlar (referans: Birincil/İkincil/Tehlike/Devre dışı) — */
.btn-primary {
    background: var(--fill-accent, #4f46e5);
    border: none; color: var(--on-accent, #fff);
    padding: 10px 18px; border-radius: 11px;
    font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: filter var(--dur-fast, 150ms), transform var(--dur-fast, 150ms);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(.97); }
.btn-secondary {
    background: var(--card-bg, #151827);
    border: 1px solid var(--border-color, #262b40);
    color: var(--accent-text, #a5b4fc);
    padding: 9px 15px; border-radius: 11px;
    font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: border-color var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.btn-secondary:hover { border-color: var(--accent-text, #a5b4fc); color: var(--accent-text, #a5b4fc); }
.btn-danger {
    background: var(--fill-error, #c81e1e);
    border: none; color: var(--on-error, #fff);
    padding: 9px 15px; border-radius: 11px;
    font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-danger:hover { filter: brightness(1.1); color: var(--on-error, #fff); }
.btn-icon {
    width: 35px; height: 35px; padding: 0; border-radius: 10px;
    border: 1px solid var(--border-color, #262b40);
    background: var(--card-bg, #151827); color: var(--text-secondary, #a6adc5);
    cursor: pointer; display: inline-grid; place-items: center; font-family: inherit;
    transition: border-color var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.btn-icon:hover { border-color: var(--accent-text, #a5b4fc); color: var(--accent-text, #a5b4fc); }
.btn-text {
    border: none; background: none; color: var(--accent-text, #a5b4fc);
    font-weight: 600; font-size: 12.5px; font-family: inherit; cursor: pointer;
    padding: 6px 10px; border-radius: 8px;
}
.btn-text:hover { background: var(--accent-soft, rgba(99, 102, 241, .16)); }
button:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled {
    background: var(--surface-3, #252a42); color: var(--text-disabled, #6f7691);
    border-color: transparent; cursor: not-allowed; filter: none;
}

/* — Girişler (referans: radius 11 + odakta yumuşak accent halkası) — */
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="email"], input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
    border-radius: 11px;
    border: 1px solid var(--border-color, #262b40);
    background: var(--input-bg, #1c2033);
    color: var(--text-primary, #f2f4fa);
    font-family: inherit;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus,
select:focus, textarea:focus {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99, 102, 241), .15);
}
/* Onay kutusu / radyo / kaydırıcı tek satırda tasarım rengine gelir */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
    accent-color: var(--fill-accent, #4f46e5);
}

/* — Kart + modal yüzeyi — */
.card { padding: 22px; border-radius: 16px; }
.modal, .modal-card {
    border-radius: 18px;
    border: 1px solid var(--border-color, #262b40);
    box-shadow: var(--shadow-pop, 0 14px 40px rgba(14, 21, 36, .16));
}

/* — Durum rozetleri: pill biçimi (renkler mevcut --badge-* token'larından) — */
[class*="badge-"] { border-radius: 999px; }

/* — İlerleme dolguları: accent→mor gradyan (referans İlerleme bileşeni) — */
.gen-chunk-fill, .agp-fill, #videoProgressFill {
    background: linear-gradient(90deg, var(--fill-accent, #4f46e5), #7c3aed);
}

/* — Tablo başlıkları — */
.data-table th {
    text-transform: uppercase; letter-spacing: .05em;
    font-size: 11px; font-weight: 700; color: var(--text-secondary, #a6adc5);
}

/* — Sidebar: Ana Ekran.html birebir paleti (koyu ada; iki temada sabit) — */
#ntSidebar { background: var(--surface-1, #151827); }
.nt-side-link, .nt-side-mod {
    padding: 9px 12px; border-radius: 10px; gap: 11px;
    font-size: 13.5px; font-weight: 500;
    /* Sidebar artık tema ile birlikte açılıp koyulaşıyor → SABİT renk olamaz.
       Eski #9aa1bd açık temada beyaz üzerinde 2.56:1 ile okunmuyordu. */
    color: var(--text-secondary, #9aa1bd);
}
.nt-side-link:hover, .nt-side-mod:hover {
    /* %6 BEYAZ açık temada beyaz zemin üzerinde görünmezdi → accent tonu. */
    background: rgba(var(--accent-rgb, 99, 102, 241), .10);
    color: var(--text-primary, #e6e8f2);
}
.nt-side-link.active, .nt-side-mod.active {
    /* Sidebar artık temayla birlikte değişiyor (koyu ada kararı geri alındı) →
       aktif pill de sabit renk KULLANAMAZ: --accent-text açık temada koyu
       indigo, koyu temada pastel lavantadır. */
    background: var(--accent-soft, rgba(99, 102, 241, .22));
    color: var(--accent-text, #4f46e5);
    font-weight: 600;
}
.nt-side-heading {
    padding: 14px 12px 5px;
    color: var(--text-muted, #6b7394);
}

/* ====================================================================
   SINAV OKUMA + HUB GRUPLARI + KART ROZETLERİ + KOMUT ÇİPLERİ
   (prototip Test/Yazili Sinav Oku.dc.html + Ana Ekran.dc.html — 2026-08-16)
   ==================================================================== */
/* Pembe kategori (Sınav Okuma) — iki temada */
:root { --exam-ico: #3b1224; --exam-fg: #f9a8d4; --exam-strong: #f472b6; }
[data-theme="light"] { --exam-ico: #fdf2f8; --exam-fg: #be185d; --exam-strong: #be185d; }

/* Hub grup başlığı: grid'in tam satırı */
.nt-grid-head {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 6px 0 -6px; padding: 0 2px;
}
.nt-grid-head h2 {
    margin: 0; font-family: var(--font-display, inherit);
    font-size: 16px; font-weight: 700; color: var(--text-primary, #f2f4fa);
}
.nt-grid-head span { color: var(--text-muted, #8f97b3); font-size: 12.5px; }

/* Kart üst rozetleri */
.module-card { position: relative; }
.nt-card-badge {
    position: absolute; top: 12px; right: 12px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; pointer-events: none;
}
.nt-badge-nodoc { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-badge-own { background: var(--exam-ico, #3b1224); color: var(--exam-fg, #f9a8d4); }
.nt-exam-card .icon-box { background: var(--exam-ico, #3b1224); color: var(--exam-fg, #f9a8d4); }

/* Sesli komut örnek çipleri */
.nt-vc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
/* D6: çip tıklanınca komutu çözümler → kontrol gibi görünmeli (dokunmatikte ipucu yalnız görünüştür):
   tonlu zemin + görünür kenarlık + vurgu renginde etiket. */
.nt-vc-chip {
    padding: 6px 12px; min-height: 32px; border-radius: 999px; cursor: pointer; font-family: inherit;
    background: var(--surface-2, #1c2033); border: 1px solid var(--accent-color, #6366f1);
    color: var(--accent-text, #a5b4fc); font-size: 11.5px; font-weight: 600;
}
.nt-vc-chip:hover { background: var(--surface-3, #23283d); }
.nt-vc-chip:active { transform: scale(0.97); }

/* Segment butonları (kaynak / yaklaşım seçimleri) */
.nt-seg-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.nt-seg {
    padding: 8px 14px; border-radius: 9px; font-family: inherit;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    background: var(--surface-2, #1c2033); border: 1.5px solid var(--border-color, #262b40);
    color: var(--text-secondary, #a6adc5);
}
.nt-seg.active { background: var(--exam-ico, #3b1224); border-color: var(--exam-strong, #f472b6); color: var(--exam-fg, #f9a8d4); }

/* Sınav Okuma bölüm gövdesi */
.nt-exam-section { max-width: 940px; margin: 0 auto; }
.nt-exam-title { margin: 0; font-family: var(--font-display, inherit); font-size: 15.5px; font-weight: 700; }
.nt-exam-sub { margin: 3px 0 0; color: var(--text-secondary, #a6adc5); font-size: 12.5px; }
.nt-exam-drop {
    margin-top: 10px; border: 1.5px dashed var(--exam-strong, #f472b6);
    border-radius: 12px; padding: 16px; text-align: center;
    background: var(--exam-ico, #3b1224); cursor: pointer;
}
.nt-exam-drop.nt-drag { filter: brightness(1.15); }
.nt-exam-drop-hint { font-weight: 700; font-size: 13px; color: var(--exam-fg, #f9a8d4); }
.nt-exam-drop-files { color: var(--exam-fg, #f9a8d4); font-size: 11.5px; margin-top: 3px; opacity: .9; }
.nt-exam-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.nt-exam-lbl { font-size: 12px; font-weight: 700; color: var(--text-secondary, #a6adc5); display: block; }
.nt-exam-lbl select, .nt-exam-lbl input[type="text"] { width: 100%; box-sizing: border-box; margin-top: 5px; }
.nt-exam-lblrow { display: flex; justify-content: space-between; align-items: baseline; }
.nt-exam-val { font-weight: 800; font-size: 12px; color: var(--exam-fg, #f9a8d4); }
.nt-exam-note { color: var(--text-muted, #8f97b3); font-size: 11px; margin-top: 4px; }
.nt-inline { display: inline; }
.nt-exam-details { margin-top: 14px; border: 1px solid var(--border-color, #262b40); border-radius: 12px; padding: 12px 16px; background: var(--surface-1, #151827); }
.nt-exam-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--exam-fg, #f9a8d4); }
.nt-exam-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; cursor: pointer; align-self: end; color: var(--text-secondary, #a6adc5); }
.nt-exam-evdesc { margin-top: 8px; padding: 9px 13px; border-radius: 10px; background: var(--surface-1, #151827); border: 1px solid var(--border-color, #262b40); color: var(--text-secondary, #a6adc5); font-size: 12px; line-height: 1.6; }
.nt-exam-start {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
    padding: 12px 22px; border-radius: 11px; border: none; cursor: pointer;
    background: #be185d; color: #fff; font-weight: 700; font-size: 14px; font-family: inherit;
}
.nt-exam-start:hover { filter: brightness(1.1); }
.nt-exam-progress { text-align: center; padding: 28px; }
.nt-exam-stage { font-family: var(--font-display, inherit); font-weight: 700; font-size: 17px; color: var(--exam-fg, #f9a8d4); animation: ntPulse 1.4s infinite; }
.nt-exam-substage { color: var(--text-secondary, #a6adc5); font-size: 13px; margin-top: 4px; }
.nt-exam-bar { max-width: 420px; margin: 16px auto 0; height: 9px; border-radius: 5px; background: var(--surface-3, #252a42); overflow: hidden; }
.nt-exam-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #be185d, #f472b6); transition: width .3s; }
.nt-exam-pct { text-align: right; max-width: 420px; margin: 5px auto 0; color: var(--exam-fg, #f9a8d4); font-size: 11.5px; font-weight: 700; }
/* Sonuç */
.nt-exam-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.nt-exam-kpi { background: var(--card-bg, #151827); border: 1px solid var(--border-color, #262b40); border-radius: 13px; padding: 12px 15px; }
.nt-exam-kpi span { color: var(--text-muted, #8f97b3); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.nt-exam-kpi strong { display: block; font-family: var(--font-display, inherit); font-size: 21px; font-weight: 800; margin-top: 4px; }
.nt-exam-kpi .nt-small { font-size: 12px; margin-top: 7px; }
.nt-ok { color: var(--success-text, #4ade80); }
.nt-bad { color: var(--error-text, #fca5a5); }
.nt-warn { color: var(--warn-text, #fbbf24); }
.nt-mute { color: var(--text-muted, #8f97b3); }
.nt-exam-bonusrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 11px 15px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary, #a6adc5); }
.nt-exam-bonusrow input { width: 64px; text-align: center; padding: 7px; }
.nt-exam-flex { flex: 1; }
.nt-exam-tablewrap { margin-top: 12px; padding: 0; overflow-x: auto; }
.nt-exam-table { width: 100%; }
.nt-exam-row { cursor: pointer; }
.nt-exam-row.nt-sel { background: var(--exam-ico, #3b1224); }
.nt-exam-st { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.nt-st-ok { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-st-rev { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
.nt-exam-sheet { margin-top: 12px; border-color: var(--exam-strong, #f472b6); }
.nt-exam-sheethead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nt-exam-selnote { font-family: var(--font-display, inherit); font-weight: 800; font-size: 16px; min-width: 34px; text-align: center; }
.nt-exam-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; margin-top: 12px; }
.nt-c { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 9px; cursor: help; }
.nt-c span { font-size: 9.5px; font-weight: 800; opacity: .7; }
.nt-c strong { font-weight: 800; font-size: 13px; }
.nt-c em { font-size: 9px; font-weight: 700; font-style: normal; }
.nt-c-ok  { background: var(--badge-success-bg, #10291c); border: 1px solid var(--success-text, #4ade80); color: var(--badge-success-fg, #4ade80); }
.nt-c-bad { background: var(--badge-error-bg, #2e1a20); border: 1px solid var(--error-text, #fca5a5); color: var(--badge-error-fg, #fca5a5); }
.nt-c-bos { background: var(--badge-neutral-bg, #232838); border: 1px solid var(--border-color, #262b40); color: var(--badge-neutral-fg, #d1d5db); }
.nt-c-dbl { background: var(--badge-warn-bg, #2e2416); border: 1px solid var(--warn-text, #fbbf24); color: var(--badge-warn-fg, #fbbf24); }
.nt-exam-chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-exam-selhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.nt-exam-q { margin-top: 10px; }
.nt-exam-qbody { flex: 1; min-width: 220px; }
.nt-exam-q { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.nt-exam-qtext { font-weight: 700; font-size: 13px; }
.nt-exam-ocr { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--exam-ico, #3b1224); border: 1px dashed var(--exam-strong, #f472b6); font-size: 12.5px; line-height: 1.6; }
.nt-exam-ocr span, .nt-exam-key span { display: block; font-size: 10px; font-weight: 800; color: var(--exam-fg, #f9a8d4); }
.nt-exam-key { margin-top: 6px; padding: 9px 12px; border-radius: 10px; background: var(--surface-1, #151827); border: 1px solid var(--border-color, #262b40); font-size: 12px; line-height: 1.6; }
.nt-exam-key span { color: var(--text-muted, #8f97b3); }
.nt-exam-why { margin-top: 6px; font-size: 12px; color: var(--text-secondary, #a6adc5); line-height: 1.6; }
.nt-exam-why strong { color: var(--exam-fg, #f9a8d4); }
/* Faz 61 (K10) — rubrikle yazılı okuma: soru başına rubrik seçicileri + ölçüt dökümü. Yalnız token (A5). */
.nt-wr-qrubrics { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.nt-wr-qrubric { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-primary, #f2f4fa); }
.nt-wr-qtext { flex: 1 1 260px; min-width: 0; }
.nt-wr-qrubric select { flex: 0 1 280px; min-height: 36px; }
.nt-wr-rubric { overflow-x: auto; }
.nt-wr-criteria { width: 100%; font-size: 12px; margin-top: 4px; }
.nt-wr-criteria td { vertical-align: top; }
.nt-wr-cname { font-weight: 700; }
.nt-wr-cpts { white-space: nowrap; }
.nt-wr-evidence { margin-top: 3px; font-style: italic; color: var(--text-secondary, #a6adc5); }
.nt-wr-csum { margin-top: 6px; font-weight: 600; }
.nt-wr-adjusted { margin-top: 4px; color: var(--warn-text, #fbbf24); }
.nt-exam-qside { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 110px; }
.nt-exam-qadj { display: flex; align-items: center; gap: 6px; }
.nt-exam-qadj strong { font-family: var(--font-display, inherit); font-weight: 800; font-size: 17px; }

/* Header düzeni (tasarım): panel butonları sidebar YÖNETİM'de — header'da
   yalnız rol rozeti + zil + profil + çıkış. id'ler DOM'da kalır (rol tespiti
   `classList.contains('hidden')` üzerinden ÇALIŞMAYA DEVAM EDER). */
header #adminPanelBtn, header #teacherPanelBtn, header #studentPanelBtn,
header #userDisplayName { display: none !important; }

/* ====================================================================
   SADAKAT #3 (2026-08-16) — üst şerit, sidebar, doküman kartı/listesi,
   önizleme ve açık tema token temizliği. Kaynak: prototip/Ana Ekran.dc.html
   ölçülmüş metrikleri. Dosya SONUNDA durur: aynı özgüllükte eskiyi kazanır.
   ==================================================================== */

/* ---------- F1a. ÜST ŞERİT tam genişlik ----------
   header artık .app-container DIŞINDA (markup taşındı); yatay dolgu
   konteynerden gelmediği için burada verilir. */
header {
    margin-bottom: 0;
    padding: 10px clamp(16px, 2vw, 32px);
    min-height: 56px;
    flex-wrap: nowrap;
}
/* Süper adminde şerit kalabalık (2 mod anahtarı + 3 ayar butonu + debug + rol +
   3 ikon): sarmak yerine TEK SATIRDA kalır, sığmazsa kendi içinde yatay kayar. */
header .settings {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: .5rem;
}
header .settings::-webkit-scrollbar { height: 0; }
header .settings > * { flex: 0 0 auto; }
/* Tasarımda üst şeritte METİNLİ buton yok — süper adminde 3 ayar butonu + Debug
   şeridi taşırıyordu. Metin `font-size:0` ile gizlenir (erişilebilir ad `title`/
   `aria-label`da durmaya devam eder, DOM'a dokunulmaz). */
header .settings #onlineSettingsBtn,
header .settings #offlineSettingsBtn,
header .settings #localSettingsBtn,
header .settings #debugBtn {
    font-size: 0;
    width: 35px; height: 35px;
    padding: 0;
    display: inline-grid; place-items: center;
}
header .settings #onlineSettingsBtn i,
header .settings #offlineSettingsBtn i,
header .settings #localSettingsBtn i,
header .settings #debugBtn i { font-size: 14px; }
header .mode-label { font-size: 11px; }
header .mode-toggle-container { padding: .35rem .6rem; gap: .4rem; }
.nt-topbar-search { flex: 1 1 260px; min-width: 160px; }
/* Dar ekranda arama daralır, kontroller tek satırda kalır */
@media (max-width: 1100px) {
    header { flex-direction: row; align-items: center; gap: 10px; }
    header .settings { width: auto; justify-content: flex-end; }
}
@media (min-width: 1025px) {
    /* hub'da sidebar'ın sağından başlar; panel/modül görünümünde sidebar yok → 0 */
    body[data-view="hub"] header { margin-left: 232px; }
}
/* ⚠ ÖZGÜLLÜK: `[data-theme="light"] header` (style.css:340) cam zemini eziyordu.
   !important yerine AYNI özgüllükte, dosya sonunda yeniden yazılır → kaskad. */
[data-theme="light"] header {
    background: rgba(var(--topbar-rgb, 255, 255, 255), .9);
    box-shadow: none;
}
[data-theme="light"] { --topbar-rgb: 255, 255, 255; }

/* ---------- F1b. Mod rozeti: pill + nokta (KULLANICI KARARI: Online YEŞİL) ----------
   Faz 31'in "Online = amber uyarı" kararı Erdal'ın 2026-08-16 kararıyla geri
   alındı; tasarımdaki yeşil "sağlıklı" göstergesi kullanılıyor. */
.mode-badge {
    gap: 7px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
}
.mode-badge::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
#modeBadgeIcon { display: none; }   /* JS className yazmaya devam eder, kanca kırılmaz */
.mode-badge.mode-badge-online {
    background: var(--badge-success-bg, #10291c);
    color: var(--badge-success-fg, #4ade80);
    border-color: var(--success-text, #4ade80);
}

/* ---------- F1c/F1d. SIDEBAR marka + ikon + rozet ---------- */
.nt-side-brand { min-width: 0; }    /* flex ellipsis'in ön koşulu */
.nt-side-mark {
    width: 33px; height: 33px;
    font-family: var(--font-display, inherit);
    font-size: 15px; font-weight: 800;
}
.nt-side-mark i { display: none; }  /* fa-brain yerine markanın ilk harfi (JS yazar) */
.nt-side-title {
    font-size: 16px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.nt-side-link i, .nt-side-mod i { font-size: 15px; width: 18px; }
.nt-side-group { margin-top: 2px; }
.nt-side-mods { display: flex; flex-direction: column; gap: 2px; }
.nt-side-badge {
    min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 700;
    background: var(--fill-accent, #4f46e5);
    color: var(--on-accent, #fff);
}
/* Ödevlerim amber (tasarım): --on-warn siyah, --fill-warn kehribar → 9.78:1 */
#ntSideAssignBadge { background: var(--fill-warn, #f59e0b); color: var(--on-warn, #1f1300); }

/* ---------- F3a. Kart başlığı: normal case (global h2 uppercase'ini ezer) ---------- */
.card h2 {
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-display, inherit);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary, #f2f4fa);
}

/* ---------- F3b. Drop alanı: alçak, hafif accent tint, büyük ikon yok ---------- */
.upload-area {
    padding: 18px;
    border: 1.5px dashed rgba(var(--accent-rgb, 99, 102, 241), .38);
    border-radius: 13px;
    background: rgba(var(--accent-rgb, 99, 102, 241), .05);
}
.upload-area:hover { background: rgba(var(--accent-rgb, 99, 102, 241), .09); }
.upload-area i { display: none; }
.upload-area p { margin: 0; font-size: 13px; font-weight: 700; }

/* ---------- F3c. Doküman listesi: kapsayıcı + satır + tip rozeti ---------- */
.doc-list-container {
    margin-top: 16px;
    border: 1px solid var(--border-color, #262b40);
    border-radius: 13px;
    overflow: hidden;
}
.doc-list-container > h4 {
    margin: 0;
    padding: 9px 14px;
    background: var(--surface-2, #1c2033);
    border-bottom: 1px solid var(--border-color, #262b40);
    font-size: 12px; font-weight: 800;
    /* ⚠ --text-muted açık temada --surface-2 üzerinde 4.4:1 ile KALIYOR */
    color: var(--text-secondary, #a6adc5);
}
.doc-list { gap: 0; }
.doc-list-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color, #262b40);
    border-radius: 0;
    padding: 9px 14px;
    gap: 10px;
}
.doc-list-item:last-child { border-bottom: none; }
.doc-list-item:hover {
    background: var(--surface-2, #1c2033);
    border-color: var(--border-color, #262b40);
}
.doc-list-item.active {
    /* contrast-ok: --accent-soft rgba(99,102,241,.16) → koyu temada efektif ~#1b1e3e,
       açık temada #eef0ff; üzerindeki --text-primary her iki temada >12:1.
       Faz 62 çocuk teması (yeniden ölçüldü): çocuk-koyu rgba(155,107,255,.20) kart
       üzerinde ~#352766 → #fff9f0 12.3:1 · çocuk-açık #f1e8ff → #2a1b4d 13.0:1 */
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    border-color: var(--border-color, #262b40);
}
/* Dosya tipi rozeti (metni JS'ten data-ext ile gelir) */
.doc-list-item .doc-type {
    flex: 0 0 44px; width: 44px;
    text-align: center;
    padding: 3px 0;
    border-radius: 7px;
    background: var(--card-bg, #151827);
    border: 1px solid var(--border-color, #262b40);
    font-size: 10px; font-weight: 800;
    letter-spacing: .02em;
    color: var(--ft-txt, #a6adc5);
}
.doc-list-item .doc-type[data-ext="pdf"] { color: var(--ft-pdf, #fca5a5); }
.doc-list-item .doc-type[data-ext="doc"] { color: var(--ft-doc, #93c5fd); }
.doc-list-item .doc-type[data-ext="ppt"] { color: var(--ft-ppt, #fbbf24); }
.doc-list-item .doc-icon { display: none; }   /* rozet ikonun yerini aldı */
.doc-name { font-size: 12.5px; font-weight: 600; }
.doc-size { font-size: 11.5px; color: var(--text-muted, #8f97b3); }

/* Yükleme/işlem durumu satırı (#fileInfo) — bugüne dek HİÇ stili yoktu */
.file-info {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 8px 12px;
    border: 1px solid var(--border-color, #262b40);
    border-radius: 10px;
    background: var(--surface-2, #1c2033);
    font-size: 12.5px; font-weight: 600;
    color: var(--text-secondary, #a6adc5);
}
.file-info i { color: var(--accent-text, #a5b4fc); }

/* ---------- F3d. Açık tema kök nedeni: tokensız sabitlerin token karşılıkları ---------- */
.document-preview { border-radius: 13px; }
.preview-header {
    background: var(--surface-2, #1c2033);
    padding: 9px 14px;
}
.preview-header h4 {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px; font-weight: 800;
    color: var(--text-secondary, #a6adc5);
}
.preview-header h4 i { color: var(--text-muted, #8f97b3); }
/* Başlık aç/kapa düğmesi: başlığın görünümünü birebir taşır (font/renk/büyük harf h4'ten
   miras), kontrol düğmelerine kadar kalan alanı doldurur; üzerine gelince ton + imleç
   ile tıklanabilir olduğunu belli eder (global kural: tıklanan şey kontrol gibi görünür). */
.preview-header h4 { flex: 1 1 auto; min-width: 0; margin-right: 10px; }
.nt-preview-head {
    display: flex; align-items: center; gap: 0; width: 100%;
    font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
    text-align: left; background: transparent; border: 0; border-radius: 9px;
    padding: 8px 10px; margin: -8px -10px; min-height: 36px; cursor: pointer;
    transition: background var(--dur-fast, 150ms);
}
.nt-preview-head:hover { background: rgba(var(--accent-rgb, 99, 102, 241), .08); }
.nt-preview-head i { margin-right: 0.5rem; flex: 0 0 auto; }   /* flex'te ikon 0'a büzülmesin */
.doc-tabs {
    background: var(--surface-2, #1c2033);
    gap: 6px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color, #262b40);
}
.doc-tab {
    border-radius: 8px;
    border-bottom: none;
    padding: 5px 11px;
    font-size: 11px; font-weight: 700;
    background: var(--surface-3, #252a42);
    color: var(--text-secondary, #a6adc5);
}
.doc-tab.active {
    /* contrast-ok: açık temada #4338ca/#eef0ff = 8.3:1; koyu temada
       --accent-soft efektif ~#1b1e3e üzerinde #a5b4fc = 9.4:1 (.nt-side-link.active ölçümü).
       Faz 62 çocuk teması (yeniden ölçüldü): çocuk-koyu ~#352766 üzerinde #d0bcff 7.5:1
       (iç panelde ~#3c2d75 6.8:1) · çocuk-açık #6420c9/#f1e8ff 6.8:1 */
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent-text, #a5b4fc);
    border-bottom-color: transparent;   /* pill altında çizgi kalmasın */
}
.preview-text.editing { background: var(--input-bg, #1c2033); }
.preview-content::-webkit-scrollbar-track { background: var(--surface-3, #252a42); }
.file-metadata {
    background: var(--surface-2, #1c2033);
    border-radius: 13px;
}
/* Sağlık noktaları: sabit hex → tema-çevrimli token */
.service-health-indicator { background: var(--card-bg, #151827); }
.service-health-dot, .service-health-dot.sh-unk { background: var(--text-disabled, #6f7691); }
.service-health-dot.sh-ok { background: var(--success-text, #4ade80); }
.service-health-dot.sh-err { background: var(--error-text, #fca5a5); }

/* ====================================================================
   SADAKAT #3 — FAZ 4: PANELLER (öğrenci / öğretmen / yönetim) + MODALLAR
   Kaynak: cevrimdisi/Ogrenci|Ogretmen|Admin Paneli.html ölçümleri (3 ajan).
   İLKE: yalnız GÖRSEL DİL. Kancalar (data-panel-tab, .lms-tab.active,
   .data-table sıralama, wrap id'leri, .badge-<durum> adları) DEĞİŞMEZ.
   ==================================================================== */

/* 🔴 REGRESYON DÜZELTMESİ (sadakat #2'de ben açtım): `[class*="badge-"]`
   yalnız durum HAPLARINI hedeflemeliydi; `.badge-card` (rozet KARTI) ve
   `.badge-icon/.badge-name/.badge-desc` de eşleşip kart hapa dönüşüyordu. */
.badge-card, .badge-icon, .badge-name, .badge-desc,
.badge-earned-label, .badge-grid { border-radius: unset; }
.badge-card { border-radius: 14px; }

/* ---------- Panel başlığı: global h2 uppercase'ini ezer ---------- */
.lms-panel-header h2 {
    font-family: var(--font-display, inherit);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary, #f2f4fa);
    text-transform: none;
    letter-spacing: normal;
}

/* ---------- Sekme rayı: alt-çizgi → segment grubu (tasarım) ---------- */
.lms-panel-tabs {
    background: var(--surface-3, #252a42);
    border-radius: 13px;
    padding: 5px;
    gap: 5px;
    border-bottom: none;
}
.lms-tab {
    padding: 7px 13px;
    border-radius: 9px;
    border-bottom: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary, #a6adc5);
}
.lms-tab:hover { background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); }
.lms-tab.active {
    /* contrast-ok: --surface-1 üzerinde --accent-text — açık #4338ca/#fff 9.1:1,
       koyu #a5b4fc/#151827 9.6:1 (.doc-tab.active ile aynı aile).
       Faz 62 çocuk teması (yeniden ölçüldü): bu kural çocukta #d0bcff/#1b1640 10.0:1 ·
       #6420c9/#fff 8.1:1 — ama `body.nt-kid .lms-panel-tabs .lms-tab.active` onu
       #fff/#7c3aed (5.7:1) dolu hapla ezer (dosya sonu) */
    background: var(--surface-1, #151827);
    color: var(--accent-text, #a5b4fc);
    border-bottom-color: transparent;
    box-shadow: var(--shadow-card, 0 2px 8px rgba(14, 21, 36, .08));
}
/* Açık temada eski kural `color: white !important` ile pill metnini
   okunmaz yapıyordu (beyaz üstü beyaz) → aynı özgüllükte geri alınır. */
[data-theme="light"] .lms-tab.active,
[data-theme="light"] .lms-panel-tabs .lms-tab.active {
    background: var(--surface-1, #ffffff) !important;
    color: var(--accent-text, #4338ca) !important;
}

/* ---------- KPI kartları: token + tasarım sırası (etiket üstte) ---------- */
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
.stat-card {
    display: flex;
    flex-direction: column-reverse;   /* değer altta, etiket üstte (tasarım) */
    align-items: flex-start;
    gap: 4px;
    background: var(--surface-1, #151827);
    border-radius: 13px;
    padding: 14px 16px;
    text-align: left;
}
.stat-value {
    font-family: var(--font-display, inherit);
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary, #f2f4fa);
}
.stat-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #8f97b3);
    margin-top: 0;
}

/* ---------- Tablolar: tasarım ölçüleri + ince satır ayracı ---------- */
.data-table th {
    padding: 11px 17px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    background: var(--surface-2, #1c2033);
    border-bottom: 1px solid var(--border-color, #262b40);
}
.data-table td {
    padding: 12px 17px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle, #1e2233);
}
.data-table tbody tr:hover { background: var(--surface-2, #1c2033); }

/* ---------- Durum hapları: tasarım geometrisi ---------- */
.badge-pending, .badge-not_started, .badge-running, .badge-in_progress,
.badge-scheduled, .badge-completed, .badge-failed, .badge-cancelled,
.badge-new, .badge-reviewed, .badge-resolved, .badge-dismissed,
.badge-active, .badge-inactive {
    padding: 3.5px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Rozet kartı: 44px tonlu ikon dairesi (tasarım) ---------- */
.badge-icon {
    width: 44px; height: 44px;
    margin: 0 auto .5rem;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 20px;
    background: var(--badge-accent-bg, #1d2142);
    color: var(--badge-accent-fg, #a5b4fc);
}
.badge-earned .badge-icon { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
/* ⚠ A5: kilitli rozet `opacity`/`grayscale` ile SOLDURULMAZ (metin+zemin birlikte
   düşer). Sönük görünüm anlamsal token'larla verilir; kart kenarı tam kontrastta. */
.badge-locked { opacity: 1; filter: none; }
.badge-locked .badge-icon { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }
.badge-locked .badge-name { color: var(--text-secondary, #a6adc5); }
.badge-locked .badge-desc { color: var(--text-disabled, #6f7691); }
.badge-earned { border-color: var(--fill-warn, #f59e0b); }

/* ---------- Form alanları (panel içi) ---------- */
.form-row label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary, #a6adc5); }
.form-row input, .form-row select, .form-row textarea {
    padding: 9px 12px;
    border-radius: var(--r-chip, 10px);
    font-size: 13px;
}

/* ---------- Panel yüzeyleri: tokensız sabitlerin karşılıkları ---------- */
.badge-card { background: var(--surface-1, #151827); }
.quick-job-form { background: var(--surface-2, #1c2033); }
.analytics-bar { background: var(--surface-3, #252a42); }

/* ---------- Faz 4 tamamlayıcı: yönetim paneli + modal dili ---------- */
/* Rol rozeti: tasarımda tek geometri (pill). `[class*="badge-"]` bu adı
   yakalamıyordu (sınıf `user-role-badge`), köşeli 10px kalmıştı. */
.user-role-badge { border-radius: 999px; padding: 3.5px 10px; }

/* Analitik kartı + filtre şeridi (tasarım: kendi kartı) */
.nt-an-card {
    background: var(--surface-1, #151827);
    border-radius: var(--r-card, 16px);
    padding: 18px;
}
.nt-an-card > h4, .nt-an-card > h3 {
    font-family: var(--font-display, inherit);
    font-size: 14px;
    font-weight: 700;
}
.nt-an-filters {
    background: var(--surface-1, #151827);
    border: 1px solid var(--border-color, #262b40);
    border-radius: 13px;
    padding: 11px 14px;
    gap: 8px;
}

/* ⚠ A5: pasif satır `opacity` ile SOLDURULMAZ (metin ve rozet birlikte düşer,
   oran lineer bozulur). Anlam durum hapıyla + sönük metin token'ıyla verilir. */
.row-inactive { opacity: 1; color: var(--text-disabled, #6f7691); }
.row-inactive td { color: var(--text-disabled, #6f7691); }

/* Sıralama göstergesi (global proje kuralı: aktif sütunda ▲/▼, diğerlerinde ↕) */
.data-table th[aria-sort]::after { content: " ↕"; opacity: .55; font-size: .85em; }
.data-table th[aria-sort="ascending"]::after { content: " ▲"; opacity: 1; }
.data-table th[aria-sort="descending"]::after { content: " ▼"; opacity: 1; }

/* Modal yüzeyi: literal #1a1d2d yerine token; başlık ölçüsü tanımsızdı
   (bare-tag h3 → tarayıcı varsayılanı). Overlay tasarımdaki karartma + blur. */
.modal { background: var(--modal-bg, #171a2b); }
.modal h3, .modal-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 .6rem; }
.modal-overlay {
    background: var(--overlay-bg, rgba(14, 21, 36, .62));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 18px;
}

/* ====================================================================
   SADAKAT #3 — ZOOM/DAR ALAN DÜZELTMELERİ (kullanıcı bildirimi)
   ==================================================================== */

/* 1) Sidebar: kullanıcı kartı ALTTA SABİT kalır.
   Eskiden scroll `#ntSidebar`ın kendisindeydi → içerik viewport'tan uzun
   olunca (zoom!) TÜM sütun kayıyor ve kullanıcı kartı liste öğelerinin
   üzerine binmiş gibi ortada duruyordu. Artık scroll NAV'da; marka üstte,
   kart altta çıpalı. Kart kendi zeminini taşır (altından geçen liste
   öğeleri görünmesin — koyu ada rengi). */
#ntSidebar { overflow: hidden; }
.nt-side-brand { flex: 0 0 auto; }
.nt-side-nav {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 2px;
}
.nt-side-user {
    flex: 0 0 auto;
    background: #101322;   /* contrast-ok: koyu ada zemini — sidebar paleti sabit */
    margin-top: 4px;
}

/* 2) Üst şerit: dar alanda (zoom dahil) mod anahtarı ETİKETLERİ gizlenir.
   "Online/Offline/Simulated/Local" metinleri şeridi taşırıp `overflow-x`
   ile kırpılmasına yol açıyordu ("O" harfinin kesilmesi). Anahtarın kendisi
   ve birleşik mod ROZETİ kalır → bilgi kaybı yok. */
@media (max-width: 1450px) {
    header .mode-label { display: none; }
    header .mode-toggle-container { padding: .3rem .5rem; }
}
@media (max-width: 1150px) {
    /* daha da darsa: rozet + sağlık noktaları + ikonlar yeter */
    header .mode-toggle-container { gap: .25rem; }
}
/* ⚠ Ölçülen kırpılma nedeni: `.settings` flex-shrink ile daralıyordu ve
   `justify-content:flex-end` yüzünden taşma SOLA gidip ilk kontrolü (mod
   anahtarı) arama kutusunun üstüne bindiriyordu — sola taşma `scrollWidth`e
   yansımadığı için `overflow-x:auto` da devreye girmiyordu. Kontroller artık
   KÜÇÜLMEZ; esneyen taraf arama kutusudur. */
header .settings { flex: 0 0 auto; padding-left: 2px; }
.nt-topbar-search { flex: 1 1 140px; min-width: 120px; }
/* Çok dar ekranda arama tamamen çekilir — modüllere sidebar/alt çubuktan
   erişiliyor, kontrollerin kırpılması ise bilgi kaybıdır. */
@media (max-width: 1050px) {
    .nt-topbar-search { display: none; }
}

/* 3) Arama kutusu: input kabın TAM yüksekliğini kaplar (tıklanabilir alan
   kutunun kendisi kadar olur; metin dikeyde ortalanır). Kabın dikey dolgusu
   input'a devredildi. */
.nt-topbar-search {
    padding: 0 14px;
    min-height: 36px;
    align-items: stretch;
}
.nt-topbar-search > i {
    align-self: center;
    flex: 0 0 auto;
}
.nt-topbar-search input {
    align-self: stretch;
    height: auto;
    padding: 0;
    line-height: 1.2;
}

/* ---------- Dosya Bilgileri: katlanabilir (varsayılan KAPALI) ---------- */
.file-metadata > h4 { margin: 0; }
.nt-meta-toggle {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: 0; border: none; background: none; cursor: pointer;
    font: inherit; color: var(--accent-text, #a5b4fc);
    text-align: left;
}
.nt-meta-caret {
    margin-left: auto;
    font-size: .8em;
    transition: transform var(--dur-fast, 150ms);
}
.file-metadata.nt-collapsed .nt-meta-caret { transform: rotate(-90deg); }
/* Katlandığında başlık dışındaki her şey gizlenir (toplam satırı + sayfa
   aralığı dahil — hepsi bu kartın içeriği). */
.file-metadata.nt-collapsed > *:not(h4) { display: none !important; }
.file-metadata.nt-collapsed { padding-bottom: 1rem; }

/* ====================================================================
   SIDEBAR HER GÖRÜNÜMDE (kullanıcı isteği 2026-08-16)
   Önceki karar "sidebar yalnız hub"dı; kullanıcı modül/panel sayfalarında da
   görünmesini ve aktif modülün işaretlenmesini istedi. Aşağıdaki üç kural
   eski `[data-view="hub"]` kısıtlarını genişletir (mobil ≤760 davranışı aynen
   korunur: sidebar gizli + alt çubuk).
   ==================================================================== */
body[data-view] #ntSidebar { display: flex; }
@media (min-width: 1025px) {
    body[data-view] .app-container { margin-left: 232px; }
    body[data-view] header { margin-left: 232px; }
    /* Marka sidebar'da olduğu için header'da her görünümde gizli */
    body[data-view] header .logo { display: none; }
}
/* Faz 62 (iş 18, D6): ≤ 1024'te kenar çubuğu gizlenmez, ÇEKMECEYE döner (dosya sonundaki
   "DUYARLI ARAYÜZ" bölümü); içerik ve şerit tam genişlik, marka şeritte. */
@media (max-width: 1024px) {
    body[data-view] .app-container, body[data-view] header { margin-left: 0; }
    body[data-view] header .logo { display: flex; }
}

/* ====================================================================
   PROJE GENELİ ERGONOMİ (kullanıcı bildirimleri 2026-08-16)
   1) Slider tutamağı çok küçüktü → büyük, kare-yuvarlatılmış, kolay tutulur
   2) Slider'lar dar alana sıkışıyordu → satırda kalan genişliği kullanır
   3) Modül ayar sayfasında üstteki başlık kırpılıyordu
   4) Sesli kitap bölüm listesi okunmuyordu; onay kutusu ortadaydı
   Bunlar TÜM slider/ayar ekranları için geçerli olacak şekilde global yazıldı.
   ==================================================================== */

/* --- 1+2. Slider: büyük tutamak + geniş ray (tüm range girdileri) --- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 22px;                 /* tıklanabilir şerit yüksekliği */
    background: transparent;
    cursor: pointer;
    flex: 1 1 auto;               /* satırda kalan genişliği kullan */
    min-width: 180px;
    width: auto;
    accent-color: var(--fill-accent, #4f46e5);
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: var(--surface-3, #252a42);
    border: 1px solid var(--border-color, #262b40);
}
input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: var(--surface-3, #252a42);
    border: 1px solid var(--border-color, #262b40);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;    /* 18px daireydi → 22px kare-yuvarlatılmış */
    margin-top: -8px;             /* 8px ray + 1px kenarlık ortalaması */
    border-radius: 6px;
    background: var(--fill-accent, #4f46e5);
    border: 2px solid var(--on-accent, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    cursor: grab;
}
input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--fill-accent, #4f46e5);
    border: 2px solid var(--on-accent, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    cursor: grab;
}
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.06); }
input[type="range"]:active::-moz-range-thumb { cursor: grabbing; }
input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99, 102, 241), .35);
}
/* Slider satırları: etiket + ray + değer — ray ESNER, değer sabit genişlikte */
.quick-job-row, .speed-control, .duration-control, .fps-control, .compression-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.quick-job-row > label, .speed-control > label, .duration-control > label { flex: 0 0 auto; }
.quick-job-row > span, .speed-control > span, .duration-control > span, .fps-control > span {
    flex: 0 0 auto;
    min-width: 84px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Dar ekranda alt satıra insin (ray yine tam genişlik) */
@media (max-width: 700px) {
    .quick-job-row, .speed-control, .duration-control { flex-wrap: wrap; }
    .quick-job-row input[type="range"] { flex: 1 1 100%; }
}

/* --- 3. Modül ayar sayfası: üstteki başlık kırpılmasın --- */
/* `.modal` `overflow:auto` + sayfa modunda `max-height` kalkınca ilk başlık
   üst kenara yapışıp yarım görünüyordu. Sayfa modunda scroll kabına üst
   nefes payı verilir; başlık bloğu asla kırpılmaz. */
.module-settings-host > .modal,
.module-settings-host > .modal-card {
    overflow: visible;            /* kendi scroll'unu üretmesin — sayfa kayar */
    max-height: none;
    resize: none;
    padding-top: 22px;
}
.module-settings-host > .modal > h3:first-child,
.module-settings-host > .modal > h2:first-child { margin-top: 0; }
/* Modal modunda (gerçek overlay) gövde kayarken başlık üstte kalsın */
.modal-overlay:not(.module-settings-host) > .modal { scroll-padding-top: 12px; }

/* --- 4. Sesli kitap bölüm listesi: okunur + onay kutusu SOLDA --- */
.chapters-list {
    max-height: 260px;            /* 150px'ti — liste okunmuyordu */
    padding: 6px;
    background: var(--surface-1, #151827);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chapter-item {
    display: flex;
    align-items: flex-start;      /* uzun başlıkta onay kutusu üstte hizalı */
    justify-content: flex-start;  /* ⚠ ortada duruyordu */
    text-align: left;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
}
.chapter-item:hover { background: var(--surface-2, #1c2033); }
.chapter-item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px; height: 17px;
    margin: 1px 0 0;
    accent-color: var(--fill-accent, #4f46e5);
}
.chapter-item label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    line-height: 1.45;
    text-align: left;
    word-break: break-word;       /* uzun bölüm adı dikey şerit gibi akmasın */
}

/* ====================================================================
   ERGONOMİ TURU #2 (2026-08-16) — kullanıcı bildirimleri
   1) Üst şeritteki ayar düğmeleri HER görünümde sağa dayalı
      (modül sayfasında arama gizlenince sola kayıyorlardı).
   2) Debug düğmesi (position:fixed) üst şeridin son düğmesiyle
      ÜST ÜSTE BİNİYORDU → şeridin sağında onun kadar yer ayrılır.
   3) Zoom-out'ta içerik kolonu sola yapışıyordu → sidebar'ın sağında
      kalan alanda ORTALANIR (dar ekranda davranış birebir aynı).
   4) Slider tutamağı: id/sınıf özgüllüklü ESKİ kurallar global kareyi
      eziyordu → aynı seçicilerle yeniden yazılır.
   5) Kalın kaydırma çubuğu (yatay raylar dahil) — mouse ile tutulabilsin.
   6) AÇIK temada sol kenar çubuğu da AÇIK (koyu-ada kararı geri alındı).
   ==================================================================== */

/* --- 1 + 2: üst şerit --- */
:root { --nt-debug-rezerv: 48px; --nt-orta: 0px; }
header .settings { margin-left: auto; }
header { padding-right: calc(clamp(16px, 2vw, 32px) + var(--nt-debug-rezerv)); }

/* --- 3: içerik kolonunun ortalanması (sidebar'ın sağındaki alanda) --- */
@media (min-width: 1025px) {
    body[data-view] {
        /* 1200px'lik kolonu ortalayan pay; dar ekranda 0 → sola dayalı düzen korunur. */
        --nt-orta: max(0px, calc((100% - 232px - 1200px) / 2));
    }
    body[data-view] .app-container {
        margin-left: calc(232px + var(--nt-orta));
        margin-right: auto;
    }
    body[data-view] header {
        padding-left: calc(clamp(16px, 2vw, 32px) + var(--nt-orta));
        padding-right: calc(clamp(16px, 2vw, 32px) + var(--nt-debug-rezerv) + var(--nt-orta));
    }
}

/* --- 4: kare tutamak — eski özgül kuralların üzerine (aynı seçicilerle) --- */
.speed-control input[type="range"]::-webkit-slider-thumb,
.duration-control input[type="range"]::-webkit-slider-thumb,
.fps-control input[type="range"]::-webkit-slider-thumb,
.setting-input-group input[type="range"]::-webkit-slider-thumb,
#summaryCompressionRate::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent-color, #6366f1);
    border: 2px solid var(--surface-1, #151827);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    cursor: grab;
    margin-top: -7px;   /* (22 − 8) / 2 — 8px ray ortası */
}
.speed-control input[type="range"]::-moz-range-thumb,
.duration-control input[type="range"]::-moz-range-thumb,
.fps-control input[type="range"]::-moz-range-thumb,
.setting-input-group input[type="range"]::-moz-range-thumb,
#summaryCompressionRate::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent-color, #6366f1);
    border: 2px solid var(--surface-1, #151827);
    cursor: grab;
}

/* Hız değeri artık ETİKETİN yanında (slider'ın sağında değil) → ray tam genişlik. */
.nt-speed-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.nt-speed-head label { margin: 0; }
.nt-speed-value {
    font-weight: 700;
    font-size: 13px;
    color: var(--accent-text, #4f46e5);
    font-variant-numeric: tabular-nums;
}
.tts-speed-select .speed-control,
.tts-setting-group .speed-control { display: flex; align-items: center; gap: 10px; }
.tts-speed-select .speed-control input[type="range"],
.tts-setting-group .speed-control input[type="range"] { flex: 1 1 auto; min-width: 140px; }

/* --- 5: kalın kaydırma çubuğu --- */
* { scrollbar-width: auto; }
*::-webkit-scrollbar { width: 16px; height: 16px; }
*::-webkit-scrollbar-thumb {
    min-height: 44px;
    min-width: 44px;   /* YATAY raylarda tutulabilir uzunluk (eskiden yalnız min-height vardı) */
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
/* Daraltılmış özel kurallar da tutulabilir hale gelir. */
.prompt-modal::-webkit-scrollbar,
.preview-content::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.debug-content::-webkit-scrollbar { width: 14px; height: 14px; }
.preview-content, .lms-panel-tabs, .nt-side-nav { scrollbar-width: auto; }
/* Yatay sekme rayı: çubuk içerikle çakışmasın diye altında yer bırakılır. */
.lms-panel-tabs { padding-bottom: 8px; }

/* --- 6: AÇIK temada sol kenar çubuğu da açık (kullanıcı kararı 2026-08-16) --- */
#ntSidebar {
    background: var(--surface-1, #151827);
    border-right: 1px solid var(--border-color, #262b40);
}
.nt-side-user { background: var(--surface-2, #1c2033); }

/* --- Üst şerit kimliği + hız çipleri (2026-08-16) --- */
/* Rozet artık yalnız rol değil "Ad Soyad · Rol · Sınıf" taşıyor: BÜYÜK HARF
   dönüşümü kalkar (ad-soyad okunabilir kalsın), taşarsa kırpılır (tam metin
   `title` ipucunda). */
.user-role-badge {
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    max-width: min(340px, 30vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hız çipleri — görünüm `.speed-preset` ile aynı, sınıf BİLEREK ayrı:
   `.speed-preset` global bir dinleyiciye bağlı ve TTS modalının slider'ını
   oynatıyor; aynı sınıfı vermek video/söyleşi çiplerini oraya bağlardı. */
.nt-speed-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.nt-speed-chip {
    background: var(--surface-2, #1c2033);
    border: 1px solid var(--border-color, #262b40);
    color: var(--text-secondary, #a0a0b0);
    padding: 5px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background .18s, border-color .18s, color .18s;
}
.nt-speed-chip:hover { border-color: var(--accent-color, #6366f1); color: var(--text-primary, #f2f4fa); }
.nt-speed-chip.active {
    background: var(--fill-accent, #4f46e5);
    border-color: var(--fill-accent, #4f46e5);
    color: var(--on-accent, #ffffff);
}

/* Dosya bilgileri önizleme kartının içinde: kart katlanınca birlikte gizlenir. */
.file-metadata.nt-preview-gizli { display: none !important; }
#documentPreview > .file-metadata {
    margin-top: 0;
    border-top: 1px solid var(--border-subtle, var(--border-color, #262b40));
    border-radius: 0 0 var(--r-card, 16px) var(--r-card, 16px);
}

/* Footer — tasarım referansı: tek satır, solda kimlik / sağda bağlantılar. */
.nt-footer-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;
}
.nt-footer-brand { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
#footerAppName { font-weight: 700; color: var(--text-primary, #f2f4fa); }
#footerVersionInfo, #footerSchoolName { color: var(--text-secondary, #a0a0b0); }
.nt-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.nt-footer-links a { color: var(--accent-text, #4f46e5); text-decoration: none; }
.nt-footer-links a:hover { text-decoration: underline; }
@media (max-width: 760px) {
    .nt-footer-row { justify-content: center; text-align: center; }
    .nt-footer-brand { justify-content: center; }
}

/* --- Ayar grubu çerçevesi: anahtar + parametresi + açıklaması birlikte --- */
.nt-setting-group {
    border: 1px solid var(--border-color, #262b40);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 1rem;
    background: var(--surface-2, #1c2033);
}
.nt-setting-group-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.nt-setting-group-head > label {
    margin: 0; font-weight: 600; color: var(--text-primary, #f2f4fa);
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem;
}
.nt-setting-group-head > label i { width: 16px; text-align: center; color: var(--accent-text, #4f46e5); }
.nt-setting-group .continuous-listening-info { margin-bottom: 10px; }
/* Bağlı parametre: sol çizgi "buna ait" der; anahtar kapalıyken devre dışı görünür. */
.nt-setting-sub {
    padding-left: 12px; margin-bottom: 0 !important;
    border-left: 2px solid rgba(var(--accent-rgb, 99, 102, 241), .35);
}
.nt-group-pasif .nt-setting-sub label,
.nt-group-pasif .nt-setting-sub #vadTimeoutValue { color: var(--text-disabled, #6f7691); }
.nt-group-pasif .nt-setting-sub { border-left-color: var(--border-color, #262b40); }
.nt-group-pasif .nt-setting-sub input[type="range"] { cursor: not-allowed; }

/* Kaydırma çubuğu bir kez daha kalınlaştırıldı (kullanıcı iki kez bildirdi):
   16→18px ve thumb kenarlığı 3→2px, yani görünen tutamak 10px'ten 14px'e çıkar. */
*::-webkit-scrollbar { width: 18px; height: 18px; }
*::-webkit-scrollbar-thumb { border-width: 2px; }
.lms-panel-tabs { padding-bottom: 10px; }

/* Konuşma hızı bloğu artık bulut grid'inin dışında (her modda görünür). */
#ttsSettingsRow > #ttsSpeedBlock { margin-top: 10px; }

/* --- Footer yerleşimi (inline stilden CSS'e taşındı) --- */
#appFooter {
    padding: 1.5rem clamp(16px, 2vw, 32px) 4rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--border-color, #2c2f3c);
    color: var(--text-secondary, #a0a0b0);
    font-size: 0.8rem;
}
/* Sabit sol kenar çubuğunun ALTINA kaymasın; içerik kolonuyla aynı paya hizalanır. */
@media (min-width: 1025px) {
    body[data-view] #appFooter {
        margin-left: 232px;
        padding-left: calc(clamp(16px, 2vw, 32px) + var(--nt-orta));
        padding-right: calc(clamp(16px, 2vw, 32px) + var(--nt-orta));
    }
}
#appFooter .study-music-bar { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Panel sekme raylarındaki YATAY kaydırma çubuğu 3 KAT kalın (kullanıcı kararı
   2026-08-16, yeniden 2026-10-18): mouse ile tutması kolay olsun. Yalnız bu raylara
   özgü. Standart çubuk 15px → 45px; kenarlık 4px olduğu için görünen tutamak ~37px.
   ⚠ Chrome/Edge 121+ bir öğede STANDART `scrollbar-color`/`scrollbar-width` tanımlıysa
   o öğenin TÜM `::-webkit-scrollbar` kurallarını YOK SAYAR — ve dosyanın başındaki
   `* { scrollbar-color: … }` her öğeye uygulanıyor. Bu yüzden önceki 48px kuralı hiç
   çalışmadı (ölçüldü: 15px). Ray için standart özellikler `auto`'ya döndürülür;
   `@supports` yalnız `::-webkit-scrollbar` destekleyen tarayıcılarda uygular —
   Firefox standart (mor) çubuğunu korur. */
@supports selector(::-webkit-scrollbar) {
    .lms-panel-tabs { scrollbar-color: auto; scrollbar-width: auto; }
}
.lms-panel-tabs::-webkit-scrollbar { height: 45px; }
.lms-panel-tabs::-webkit-scrollbar-thumb { min-width: 90px; border-width: 4px; }
.lms-panel-tabs::-webkit-scrollbar-track { border-radius: 999px; }
.lms-panel-tabs { padding-bottom: 6px; }

/* Footer içeriği ORTALANIR (kullanıcı kararı 2026-08-16): marka ve bağlantılar
   sayfanın iki ucuna yapışmak yerine ortada toplanır; müzik çubuğu altlarında
   yine ortalı kalır. */
.nt-footer-row { justify-content: center; gap: 10px 28px; }
.nt-footer-brand { justify-content: center; }
#appFooter .study-music-bar { justify-content: center; }

/* --- Sayfa aralığı çift kaydıracı: tutamak rayın ARKASINDA kalıyordu --- */
/* İki `input` üst üste duruyor; DOM'da SONRAKİNİN (max) opak rayı öncekinin
   (min) tutamağını örtüyordu. Çözüm: her iki rayı da şeffaf yap, tek ray'ı
   kapsayıcı çizsin — böylece hiçbir tutamak örtülmez. */
.dual-range-container::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 12px;
    height: 6px; border-radius: 3px;
    background: var(--border-color, #262b40);
}
.dual-range::-webkit-slider-runnable-track { background: transparent; }
.dual-range::-moz-range-track { background: transparent; }
/* Sol tutamak YEŞİL (aralığın başı), sağ tutamak KIRMIZI (sonu) — kullanıcı kararı. */
#pageRangeMin::-webkit-slider-thumb { background: var(--fill-success, #16a34a); border-color: #ffffff; }
#pageRangeMax::-webkit-slider-thumb { background: var(--fill-error, #dc2626); border-color: #ffffff; }
#pageRangeMin::-moz-range-thumb { background: var(--fill-success, #16a34a); border-color: #ffffff; }
#pageRangeMax::-moz-range-thumb { background: var(--fill-error, #dc2626); border-color: #ffffff; }

/* Sesli kitap oynatıcısı `<body>` seviyesinde bir bölüm (`.app-container` DIŞINDA):
   sidebar payını almadığı için sol kenar çubuğunun ALTINDA kalıyor ve başlığı
   kırpılıyordu. İçerik kolonuyla aynı paya hizalanır. */
@media (min-width: 1025px) {
    body[data-view] #audiobookPlayerSection {
        margin-left: calc(232px + var(--nt-orta));
        margin-right: auto;
    }
}

/* ⚠ `.study-music-bar` `display:inline-flex` — INLINE elemanlarda `margin:auto`
   yatay ortalama YAPMAZ, bu yüzden önceki `margin-left/right:auto` kuralı
   etkisiz kalıyor ve çubuk footer'da sola yapışıyordu. Blok seviyesine alınıp
   genişliği içeriğe sabitlenir: kutu hap biçimini korur, kendisi ortalanır. */
#appFooter .study-music-bar {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAZ 8 (PostgreSQL) — YEDEKLEME SEKMESİ (tel çerçeve §6a–c)
   Renkler YALNIZ token: durum metni `.nt-text-*`, rozet `.nt-badge-*`, uyarı
   kutusu `.nt-callout-*` (tanımları yukarıda). `opacity` ile metin soldurulmaz.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Uç yoksa (404) gizlenen bölüm — `.super-admin-only`'nin `hidden` geçişinden
   BAĞIMSIZ: rol yeniden uygulandığında gizli kart geri açılmasın. */
.nt-unavailable { display: none !important; }

.backup-config.nt-bk-card { margin-bottom: 1rem; padding: 1rem; }
.nt-bk-card h4 { margin: 0 0 .75rem; }
.nt-bk-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem .75rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.nt-bk-head h4 { margin: 0; }
.nt-bk-toolbar { gap: .6rem .75rem; }
.nt-bk-scope { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; max-width: 100%; min-width: 0; }
/* Uzun okul adlı seçenekler dar ekranda seçiciyi kapsayıcının dışına itmesin (yatay kayma yok). */
.nt-bk-scope > select { max-width: 100%; min-width: 0; flex: 1 1 auto; text-overflow: ellipsis; }
.nt-bk-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .45rem .75rem; margin-bottom: .6rem; font-size: .85rem;
}
.nt-bk-row:last-child { margin-bottom: 0; }
.nt-bk-row-tight { margin: .45rem 0 0; }
.nt-bk-row > label { font-weight: 600; }
.nt-bk-check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.nt-bk-check input { width: auto; margin: 0; }
.nt-bk-hint { color: var(--text-secondary, #a6adc5); font-size: .8rem; }
.nt-bk-para { margin: 0 0 .75rem; line-height: 1.5; }
.nt-bk-status { color: var(--text-secondary, #a6adc5); font-size: .85rem; margin-top: .5rem; min-height: 1.2em; }
.nt-bk-status:empty { margin-top: 0; min-height: 0; }
.nt-bk-row .nt-bk-status { margin-top: 0; }
.nt-bk-row:has(> .nt-bk-hint:empty:only-child) { display: none; }   /* boş "Sonraki:" satırı yer kaplamasın */

/* Tablolar: sayı sütunları sağa, tarih/durum kırılmaz; tıklanabilir başlık */
.nt-bk-table td.nt-num, .nt-bk-table th.nt-num,
.nt-dbs-table td.nt-num, .nt-dbs-table th.nt-num,
.nt-rr-table td.nt-num, .nt-rr-table th.nt-num,
.nt-mat-table td.nt-num, .nt-mat-table th.nt-num { text-align: right; font-variant-numeric: tabular-nums; }
.nt-nowrap { white-space: nowrap; }
.nt-bk-file { word-break: break-all; min-width: 12rem; }
.nt-bk-actions { white-space: nowrap; }
.nt-bk-actions > * + * { margin-left: .4rem; }
th.nt-sort-th { cursor: pointer; user-select: none; }
th.nt-sort-th:hover { color: var(--text-primary, #f2f4fa); }

/* İlerleme / doluluk çubuğu (yükleme, doğrulama, bağlantı) */
.nt-db-bar {
    flex: 1 1 160px; min-width: 120px; max-width: 320px; height: 10px;
    background: var(--surface-3, #252a42); border-radius: 999px; overflow: hidden;
}
.nt-db-bar-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: var(--fill-accent, #4f46e5); transition: width .3s ease;
}
.nt-db-bar-fill.is-ok   { background: var(--fill-success, #15803d); }
.nt-db-bar-fill.is-warn { background: var(--fill-warn, #f59e0b); }
.nt-db-bar-fill.is-err  { background: var(--fill-error, #c81e1e); }
.nt-db-prog {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem;
    margin-top: .7rem; font-size: .85rem;
}
.nt-db-prog-label { font-weight: 600; }
.nt-db-prog-text { color: var(--text-secondary, #a6adc5); font-variant-numeric: tabular-nums; }

/* Sürükle-bırak alanı (B7) */
.nt-db-drop {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: .5rem .7rem; padding: 1.1rem 1rem; text-align: center; font-size: .85rem;
    border: 2px dashed var(--border-strong, #79809c); border-radius: 12px;
    background: var(--surface-2, #1c2033); color: var(--text-secondary, #a6adc5);
    transition: border-color var(--dur-fast, 150ms), background var(--dur-fast, 150ms);
}
.nt-db-drop.nt-drag { border-color: var(--accent-color, #6366f1); background: var(--surface-3, #252a42); }
.nt-db-drop.is-disabled { border-style: dotted; cursor: not-allowed; }
.nt-db-drop.is-disabled > span, .nt-db-drop.is-disabled > i { color: var(--text-disabled, #6f7691); }

/* Komut / veritabanı adı (kopyalanabilir, iki temada okunur) */
.nt-db-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82em;
    background: var(--surface-3, #252a42); color: var(--text-primary, #f2f4fa);
    padding: .12rem .4rem; border-radius: 6px; word-break: break-all;
}
#dbImportPendingBanner { margin: 0 0 1rem; }
#dbImportClearBtn { margin-top: .5rem; }
/* Destek/tanı paketi durum satırı (araçlar sekmesi): düğme satırının 1.5rem alt boşluğuna
   yapışır, boşken yer kaplamaz (`.nt-bk-status:empty`). */
#supportPkgStatus:not(:empty) { margin: -1rem 0 1.25rem; }
.nt-pkg-status { line-height: 1.6; }

/* §6a durum kartı satırları */
.nt-dbs-line {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .35rem .6rem; margin: .4rem 0; font-size: .88rem;
}
.nt-dbs-sub { padding-left: 1rem; font-size: .82rem; }
.nt-dbs-table { margin: .75rem 0 .5rem; }

/* §6c geri yükleme onay diyaloğu */
.nt-rr-modal { max-width: 620px; width: calc(100vw - 32px); }
.nt-rr-modal .nt-rr-table { max-height: 46vh; overflow: auto; margin: .5rem 0; }
.nt-rr-actions { flex-wrap: wrap; gap: .6rem; }

@media (max-width: 760px) {
    .nt-db-bar { max-width: none; flex-basis: 100%; }
    .nt-dbs-sub { padding-left: 0; }
}

/* Üst şerit açılır pencereleri (servis durumu, bildirimler) body'ye taşınır ve `fixed`
   konumlanır (app.js ntPopoverKonumla; left/top JS'ten). Neden: header `.settings` kabı
   `overflow-x:auto` taşıyor → dikeyde de kırpıyor; içindeki pencereler görünmüyordu.
   Dosya SONUNDA: `.notification-dropdown{position:absolute;right:0}` ile aynı özgüllük. */
.nt-portal-pop { position: fixed; right: auto; }

/* LLM reasoning durumu — üretim bekleme kartının durum satırında ("Reasoning: açık/kapalı",
   yönetici ayarı system.llm.reasoning). Açık = accent tonu, kapalı = nötr. --accent-line
   projede TANIMSIZ → kenarlık rgba(--accent-rgb) ile yazıldı (tanımsız token kenarlığı siler). */
.nt-reasoning-chip {
    display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
    padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
    vertical-align: middle; white-space: nowrap;
    border: 1px solid var(--border-color, #2c2f3c);
    background: var(--surface-2, #1c2033); color: var(--text-secondary, #a6adc5);
}
.nt-reasoning-chip.is-on {
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    border-color: rgba(var(--accent-rgb, 99, 102, 241), .35);
    color: var(--accent-text, #a5b4fc);
}
.nt-reasoning-chip i { font-size: 0.7rem; }

/* Arayüz sekmesi — LLM reasoning okul kartı (sekmenin EN ÜSTÜNDE, kullanıcı bulamamıştı). */
.nt-reasoning-card {
    background: var(--surface-1, #151827);
    border: 1px solid var(--border-color, #2c2f3c);
    border-left: 3px solid var(--accent-color, #6366f1);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 1.25rem;
}
.nt-reasoning-card h4 {
    margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--accent-text, #a5b4fc);
    display: flex; align-items: center; gap: 8px;
}
.nt-reasoning-card .ui-toggle-row { margin: 0; }
.nt-reasoning-card-note { font-size: 0.8rem; color: var(--text-secondary, #a6adc5); margin: 0.5rem 0 0.6rem; }
.nt-reasoning-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nt-reasoning-card-foot small { color: var(--text-secondary, #a6adc5); }
.nt-reasoning-card-foot .nt-status-ok { color: var(--success-text, #4ade80); font-size: 0.8rem; }
.nt-reasoning-card-foot .nt-status-err { color: var(--error-text, #fca5a5); font-size: 0.8rem; }

/* ====================================================================
   SAYFA ARALIĞI ÇİFT KAYDIRICISI — kullanıcı bildirimi 2026-10-19
   ⚠ Kök neden: global `input[type="range"]` kuralı (0-1-1; width:auto, min-width:180px,
   flex:1 1 auto, height:22px) ve rayı (0-1-2, OPAK) `.dual-range` kurallarını (0-1-0 /
   0-1-1) EZİYORDU → (1) iki girdi kapsayıcının 933 px'i yerine 180 px kaldı, tutamaklar
   rayın yalnız solunda gezdi (8 ve 20 yan yana); (2) girdinin kendi koyu rayı rayın
   başında kısa bir şerit gibi göründü; (3) üstteki girdinin opak rayı alttaki (yeşil)
   tutamağın ÜSTÜNDEN geçip onu "çizgili" gösterdi. Burada aynı özelliklere global
   kuralı YENEN özgüllükle (`input[type="range"].dual-range` = 0-2-1) yeniden yazılır.
   Geometri: kapsayıcı 30 px; ray 8 px, dikey ortada (11 px); tutamak 22 px.
   ==================================================================== */
.dual-range-container { height: 30px; }
.dual-range-container::before { top: 11px; height: 8px; border-radius: 4px; }
input[type="range"].dual-range {
    position: absolute; left: 0; top: 0; margin: 0; padding: 0;
    width: 100%; min-width: 0; height: 30px; flex: none;
    background: transparent; pointer-events: none; z-index: 1;
}
input[type="range"].dual-range::-webkit-slider-runnable-track {
    height: 8px; background: transparent; border: 0; box-shadow: none;
}
input[type="range"].dual-range::-moz-range-track {
    height: 8px; background: transparent; border: 0; box-shadow: none;
}
input[type="range"].dual-range::-webkit-slider-thumb { margin-top: -7px; pointer-events: auto; }
input[type="range"].dual-range::-moz-range-thumb { pointer-events: auto; }
/* Seçili sayfalar: tutamak MERKEZLERİ arası dolgu. Yerel range'de tutamak merkezi
   11 px + p × (genişlik − 22 px) noktasındadır → dolgu aynı formülle konumlanır. */
.dual-range-fill {
    position: absolute; top: 11px; height: 8px; border-radius: 4px; z-index: 0;
    left: calc(11px + (100% - 22px) * var(--p1, 0));
    width: calc((100% - 22px) * (var(--p2, 1) - var(--p1, 0)));
    background: rgba(var(--accent-rgb, 99, 102, 241), .55);
    pointer-events: none;
}

/* Test Sınavı Oku — form düzeni: soru sayısı × şık sayısı (eskiden 3 sabit seçenek). */
.nt-omr-duzen { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.nt-omr-duzen input[type="number"] { width: 84px; text-align: center; }
.nt-omr-duzen select { flex: 1 1 140px; min-width: 0; }
.nt-omr-duzen span { color: var(--text-secondary, #a6adc5); font-size: 0.85rem; }
.nt-omr-net-not { align-self: end; }

/* Materyallerim — başlık = görüntüleyiciyi açan kontrol (eskiden düz metin, tıklanınca bir
   şey olmuyordu) + içerik denetimi rozeti/şeridi (services/material_health.py). */
.nt-mat-title {
    background: none; border: 0; padding: 2px 0; margin: 0; font: inherit; text-align: left;
    color: var(--accent-text, #4f46e5); font-weight: 600; cursor: pointer;
    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-fast, 150ms);
}
.nt-mat-title:hover, .nt-mat-title:focus-visible { text-decoration-color: currentColor; }
.nt-mat-st { margin-top: 4px; font-size: 0.78rem; font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.nt-mat-st-err { color: var(--error-text, #fca5a5); }
.nt-mat-st-warn { color: var(--warn-text, #fbbf24); }
.nt-mat-banner {
    margin-bottom: 0.9rem; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.85rem;
    border: 1px solid currentColor; background: var(--surface-2, #1c2033);
}

/* ===== Faz 51 — Doküman görüntüleyici ===== */
/* Listedeki ad: dokununca modal açar → kontrol gibi görünür (tonlu zemin + kenarlık + vurgu
   rengi + göz ikonu). Taşan ad üç noktayla kısalır (.doc-name kuralları korunur). */
.doc-list-item .doc-view-btn {
    display: block;
    min-width: 0;
    text-align: left;
    font: inherit;
    font-weight: 600;
    color: var(--accent-text, #a5b4fc);
    background: var(--accent-soft, rgba(99, 102, 241, 0.12));
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.35);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    margin: 0;
    cursor: pointer;
}
.doc-list-item .doc-view-btn i { margin-right: 0.35rem; }
.doc-list-item .doc-view-btn:hover { text-decoration: underline; border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.6); }
.doc-list-item .doc-view-btn:active { transform: scale(0.99); }

.doc-viewer-modal {
    width: min(1100px, 96vw);
    max-width: none;
    height: 92vh;
    max-height: 92vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.doc-viewer-head {
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-color, #2c2f3c);
    flex-wrap: wrap;
}
.doc-viewer-head h3 {
    margin: 0;
    min-width: 0;
    flex: 1 1 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-viewer-tools { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.doc-viewer-zoom { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-secondary, #a0a0b0); }
.doc-viewer-pageinfo { font-size: 0.85rem; color: var(--text-secondary, #a0a0b0); margin-right: 0.4rem; font-variant-numeric: tabular-nums; }
.doc-viewer-body {
    flex: 1;
    overflow: auto;
    background: var(--surface-2, #1a1d29);
    padding: 1.25rem 1.5rem;
    outline: none;
}
.doc-viewer-body .dv-msg { color: var(--text-secondary, #a0a0b0); text-align: center; margin: 2rem 0; }
.dv-pages { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.dv-page {
    position: relative;
    width: var(--dv-page-w, 800px);
    max-width: none;
    background: #fff; /* contrast-ok: PDF sayfasının kâğıt zemini; üzerindeki metin sayfa görüntüsünün kendisidir */
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    flex: none;
}
.dv-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dv-page img:not([src]) { visibility: hidden; }
.dv-page-no {
    position: absolute;
    right: 0.5rem;
    bottom: 0.4rem;
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--surface-1, #12141c);
    color: var(--text-primary, #e8e8ef);
    border: 1px solid var(--border-color, #2c2f3c);
}
.dv-page.dv-page-err::after {
    content: 'Sayfa yüklenemedi';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2, #1a1d29);
    color: var(--error-text, #fca5a5);
}
.dv-text-wrap { max-width: 900px; margin: 0 auto; }
.dv-notice { color: var(--warn-text, #fbbf24); font-size: 0.85rem; margin: 0 0 0.75rem; }
.dv-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: var(--dv-font, 15px);
    line-height: 1.6;
    color: var(--text-primary, #e8e8ef);
    background: var(--surface-1, #12141c);
    border: 1px solid var(--border-color, #2c2f3c);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 0;
}
@media (max-width: 760px) {
    .doc-viewer-modal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    .doc-viewer-body { padding: 0.75rem; }
}

/* =====================================================================
   Faz 54: video kartı — görsel denetimi (görsel-dil modeli) seçenekleri + raporu.
   Seçenek satırları DOKUNULABİLİR olduğu için kontrol gibi çizilir: kenarlık + zemin +
   ≥44px yükseklik; işaretliyken vurgu kenarlığı ve --accent-soft zemini (A5: token).
   ===================================================================== */
.nt-vision-group {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem 0.9rem;
    border: 1px solid var(--border-color, #262b40);
    border-radius: 10px;
    background: var(--surface-2, #1c2033);
    color: var(--text-primary, #f2f4fa);
    min-width: 0;
}
.nt-vision-group legend {
    padding: 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-text, #a5b4fc);
}
.nt-vision-sub {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-secondary, #a6adc5);
}
.nt-vision-opt {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 44px;
    box-sizing: border-box;
    margin-top: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color, #262b40);
    border-radius: 8px;
    background: var(--surface-1, #151827);
    color: var(--text-primary, #f2f4fa);
    cursor: pointer;
    transition: border-color var(--dur-fast, 150ms), background var(--dur-fast, 150ms);
}
.nt-vision-opt:hover { border-color: var(--accent-color, #6366f1); }
.nt-vision-opt:active { transform: scale(0.995); }
.nt-vision-opt:has(input:checked) {
    border-color: var(--accent-color, #6366f1);
    background: var(--accent-soft, rgba(99, 102, 241, .16));
}
.nt-vision-opt:has(input:disabled) { cursor: not-allowed; }
.nt-vision-opt input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--accent-color, #6366f1);
}
.nt-vision-opt strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text-primary, #f2f4fa);
}
.nt-vision-opt small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: var(--text-secondary, #a6adc5);
}
.nt-vision-hint {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary, #a6adc5);
}
.nt-vision-report {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-color, #262b40);
    border-left: 3px solid var(--accent-color, #6366f1);
    border-radius: 8px;
    background: var(--surface-2, #1c2033);
    color: var(--text-primary, #f2f4fa);
    font-size: 0.85rem;
}
.nt-vr-head { color: var(--accent-text, #a5b4fc); }
.nt-vr-time { font-weight: 500; color: var(--text-secondary, #a6adc5); }
.nt-vr-warn { margin: 0.4rem 0 0; font-weight: 600; color: var(--warn-text, #fbbf24); }
.nt-vr-lines { margin: 0.4rem 0 0 1.1rem; padding: 0; }
.nt-vr-lines li { margin: 0.15rem 0; }
.nt-vr-lbl { color: var(--text-secondary, #a6adc5); }
.nt-vr-details { margin-top: 0.45rem; }
.nt-vr-details summary {
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    color: var(--accent-text, #a5b4fc);
}
.nt-vr-details ul { margin: 0.35rem 0 0 1.1rem; padding: 0; }
.nt-vr-details li { margin: 0.15rem 0; }
.nt-vr-note { color: var(--text-secondary, #a6adc5); }
.nt-vision-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--accent-color, #6366f1);
    border-radius: 4px;
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent-text, #a5b4fc);
    font-size: 0.68rem;
    vertical-align: middle;
}
.log-warn { color: var(--warn-text, #fbbf24); }

/* Faz 57 — görsel sayısı anahtarı (Senaryoya sadık kal ⇄ FPS'e sadık kal) + FPS sürgüsü
   (video kartı) ve sahne düzenleyicide ek görsel şeridi */
.nt-img-mode {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem 0.9rem;
    border: 1px solid var(--border-color, #262b40);
    border-radius: 10px;
    background: var(--surface-2, #1c2033);
    color: var(--text-primary, #f2f4fa);
    min-width: 0;
}
.nt-img-mode legend {
    padding: 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-text, #a5b4fc);
}
.nt-img-mode-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    cursor: pointer;
}
.nt-img-mode-switch .toggle-switch { margin-left: 0; }
.nt-img-mode-side {
    font-size: 0.88rem;
    color: var(--text-secondary, #a6adc5);
}
.nt-img-mode-side.active {
    font-weight: 700;
    color: var(--accent-text, #a5b4fc);
}
.nt-fps-prod { margin-top: 0.5rem; }
.nt-fps-prod-label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-secondary, #a6adc5);
}
.nt-img-mode-info {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary, #a6adc5);
}
.nt-img-mode-info.nt-fps-prod-uyari { color: var(--warn-text, #fbbf24); }
.nt-fps-prod-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
}
.nt-fps-prod-row input[type="range"] { flex: 1 1 auto; min-width: 0; }
.nt-fps-prod-row output {
    min-width: 2.4rem;
    text-align: right;
    font-weight: 700;
    color: var(--text-primary, #f2f4fa);
}
.scene-image-main {
    position: relative;
    display: inline-block;
}
.scene-extra-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
    max-width: 150px;
}
.scene-extra-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.scene-extra-thumb {
    width: 46px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--border-color, #262b40);
    border-radius: 4px;
    transition: opacity 0.3s;
}
.scene-extra-note {
    margin-top: 0.3rem;
    max-width: 150px;
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--text-secondary, #a6adc5);
}
@media (max-width: 640px) {
    .scene-extra-strip, .scene-extra-note { max-width: 100%; }
}

/* Sayfanın başına dön (2026-10-28) — geri bildirim düğmesinin (.feedback-fab: 48px, bottom 1.5rem)
   ÜSTÜNDE, aynı katmanda (z 90: sayfa kabuğunun üstü, her modal/kaplamanın altı). İkincil kontrol
   görünümü (dokunma kuralı): yüzey zemini + vurgu kenarlığı + vurgu metin rengi ikon, 44px hedef.
   Yalnız aşağı inilince görünür (`hidden` → display:none; app.js ntSayfaBasinaDon). */
.nt-scroll-top {
    position: fixed;
    right: calc(1.5rem + 2px);
    bottom: calc(1.5rem + 48px + 0.75rem);
    z-index: 90;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--surface-1, #151827);
    border: 1px solid var(--accent-color, #6366f1);
    color: var(--accent-text, #a5b4fc);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    animation: ntScrollTopIn 0.18s ease-out;
}
.nt-scroll-top[hidden] { display: none; }
.nt-scroll-top:hover { background: var(--surface-2, #1c2033); }
.nt-scroll-top:active { transform: scale(0.94); }
@keyframes ntScrollTopIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nt-scroll-top { animation: none; }
}
@media (max-width: 760px) {
    /* Geri bildirim düğmesi alt çubuğun üstüne kalktığı görünümlerde bu da onunla kalkar. */
    body[data-view="hub"] .nt-scroll-top,
    body[data-view="module"] .nt-scroll-top { bottom: calc(64px + env(safe-area-inset-bottom) + 48px + 0.75rem); }
    /* Faz 62 (iş 18): alt çubuk panel görünümünde de var → AYRI kural (üstteki dizgi korunur). */
    body[data-view="panel"] .nt-scroll-top { bottom: calc(64px + env(safe-area-inset-bottom) + 48px + 0.75rem); }
}

/* ============================================================================
   Faz 58-8 (YALNIZ Vercel / internet sürümü) — aşağıdaki seçicilerin hepsi ya
   app.js'in yalnız `window.NT_CAPS` varken eklediği body sınıflarına
   (nt-caps-no-local / nt-caps-key-env / nt-caps-guest-locked) ya da yalnız o
   dalda oluşturulan öğelere bağlıdır. Docker'da hiçbiri eşleşmez.
   ============================================================================ */

/* Local alt modu yok: Simulated ⇄ Local anahtarı + "Local Ayarları" gizli. Dört ayrı
   fonksiyon bunlara inline `display` yazıyor; stylesheet !important hepsini ezer. */
body.nt-caps-no-local #offlineModeContainer,
body.nt-caps-no-local #localSettingsBtn { display: none !important; }

/* Gemini anahtarı sunucu env'inden: giriş alanı, kayıtlı anahtarlar ve "Ekle" gizli. */
body.nt-caps-key-env #geminiTabContent .api-input-section,
body.nt-caps-key-env #geminiTabContent .api-keys-list-section,
body.nt-caps-key-env #saveApiBtn { display: none !important; }
.nt-key-env-note {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-input, 11px);
    background: var(--surface-2, #1c2033);
    color: var(--text-secondary, #a6adc5);
}

/* "Giriş yap" — gerçek bağlantı, düğme görünümünde (ton zemin + kenarlık + vurgu metni, ≥44px). */
.nt-login-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), .55);
    border-radius: var(--r-chip, 10px);
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent-text, #a5b4fc);
    font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
    box-sizing: border-box;
}
.nt-login-cta:hover { background: rgba(var(--accent-rgb, 99, 102, 241), .26); }
.nt-login-cta:active { transform: scale(0.97); }
.nt-login-cta-row { margin-top: 0.75rem; }

/* Toast eylemi bağlantı olduğunda da düğme görünümü. */
a.toast-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; text-decoration: none; font-weight: 600;
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    border-color: rgba(var(--accent-rgb, 99, 102, 241), .55);
    color: var(--accent-text, #a5b4fc);
}

/* Ana sayfa misafir şeridi (mor gradyan, iki temada sabit): "Giriş yap" ≥44px + kenarlık. */
.nt-guest-strip--vercel .nt-guest-login,
.nt-guest-strip--vercel .nt-guest-register {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; box-sizing: border-box;
}
.nt-guest-strip--vercel .nt-guest-login { border: 2px solid #c7d2fe; }

/* Modül paneli şeridi: yalnız misafir + modül görünümü + Video Arama dışı. Görünürlük
   YALNIZ burada (router'a kanca yok); öğe yalnız NT_CAPS dalında oluşturulur. */
.nt-mv-login-strip { display: none; }
body.nt-caps-guest-locked.nt-role-guest[data-view="module"]:not([data-nt-module="video_search"]) .nt-mv-login-strip {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 12px 0 4px; padding: 12px 14px;
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-input, 11px);
    background: var(--surface-2, #1c2033);
    color: var(--text-primary, #f2f4fa);
}
.nt-mv-login-strip > i { color: var(--info-text, #93c5fd); }
.nt-mv-login-text { flex: 1; min-width: 200px; font-weight: 600; }

/* Yönetim → Sistem: Dağıtım kartı. Durum metni ANLAMINA göre renklenir (A5). */
.nt-deploy-card {
    margin-bottom: 1.5rem; padding: 14px 16px;
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-tile, 14px);
    background: var(--surface-1, #151827);
    color: var(--text-primary, #f2f4fa);
}
.nt-deploy-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nt-deploy-head h4 { margin: 0; flex: 1; min-width: 200px; color: var(--accent-text, #a5b4fc); }
.nt-deploy-stamp { font-size: 0.8rem; color: var(--text-muted, #8f97b3); }
.nt-deploy-status { font-size: 0.85rem; margin-bottom: 6px; }
.nt-deploy-status:empty { display: none; }
.nt-deploy-grid {
    display: grid; grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 6px 16px; margin: 0; font-size: 0.88rem;
}
.nt-deploy-grid dt { color: var(--text-secondary, #a6adc5); font-weight: 600; }
.nt-deploy-grid dd { margin: 0; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-deploy-list { margin: 4px 0 0; padding-left: 1.1rem; }
.nt-deploy-ok { color: var(--success-text, #4ade80); font-weight: 600; }
.nt-deploy-warn { color: var(--warn-text, #fbbf24); font-weight: 600; }
.nt-deploy-err { color: var(--error-text, #fca5a5); font-weight: 600; }
.nt-deploy-muted { color: var(--text-muted, #8f97b3); }
@media (max-width: 560px) {
    .nt-deploy-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .nt-deploy-grid dd { margin-bottom: 6px; }
}

/* ============================================================================
   Faz 58-9 (YALNIZ Vercel) — yedekler. Aşağıdaki sınıflar yalnız app.js'in
   `window.NT_CAPS` dalında oluşturduğu öğelerde bulunur; Docker'da hiçbiri eşleşmez.
   ============================================================================ */
/* Yedek satırı: "Bu PC'de" / "İnternet kopyası" durum çipleri (tıklanmaz → düğme gibi değil) */
.nt-bk-locs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.nt-bk-loc { font-size: .72rem; }
.nt-bk-loc i { margin-right: .2rem; }
/* İnternet kopyası olmayan yedek: devre dışı "İndir". Devre dışı düğme fare olayı almaz → ipucu
   (title) sarmalayıcıda; düğme olayları sarmalayıcıya bırakır. Metin soluk renkle (opacity YOK, A5). */
.nt-bk-dl-off { display: inline-block; cursor: not-allowed; }
.nt-bk-dl-off > button:disabled {
    color: var(--text-disabled, #6f7691); cursor: not-allowed; pointer-events: none;
}
.nt-bk-web-note { margin: 0 0 .6rem; }
/* "Şimdi uygula": yıkıcı ama birincil değil → tonlu tehlike düğmesi (zemin + kenarlık + metin, ≥44px) */
.nt-btn-danger-soft {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 9px 15px; border-radius: 11px;
    background: var(--badge-error-bg, #2e1a20);
    border: 1px solid var(--error-text, #fca5a5);
    color: var(--badge-error-fg, #fca5a5);
    font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
    transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.nt-btn-danger-soft:not(:disabled):hover {
    background: var(--fill-error, #c81e1e); border-color: var(--fill-error, #c81e1e); color: var(--on-error, #ffffff);
}
.nt-btn-danger-soft:not(:disabled):active { transform: scale(.97); }
.nt-btn-danger-soft:disabled {
    background: var(--surface-3, #252a42); border-color: transparent;
    color: var(--text-disabled, #6f7691); cursor: not-allowed;
}

/* ============================================================================
   Faz 59 — Geri bildirim modalı: hesap notu / misafir iletişim bloğu, ekler (sürükle-bırak,
   çipler, sayaç), ses notu + ekran kaydı düğmeleri, geri sayım, yükleme ilerlemesi; ekran kaydı
   araç çubuğu + kalem tuvali; yönetici/öğrenci ek çizimi; sekme rozeti. Renkler token (A5).
   ============================================================================ */
.nt-fb-form { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.nt-fb-note {
    margin: 0; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.85rem;
    background: var(--surface-2, #1b1f2e); color: var(--text-secondary, #a0a0b0);
    border: 1px solid var(--border-color, #2c2f3c);
}
.nt-fb-note i { color: var(--success-text, #4ade80); margin-right: 0.35rem; }
.nt-fb-contact { margin: 0; padding: 0.7rem 0.8rem 0.8rem; border: 1px solid var(--border-color, #2c2f3c); border-radius: 8px; }
.nt-fb-contact legend { padding: 0 0.35rem; font-size: 0.85rem; color: var(--text-secondary, #a0a0b0); }
.nt-fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
.nt-fb-contact input, .nt-fb-field select, .nt-fb-field textarea {
    width: 100%; box-sizing: border-box; margin: 0; padding: 0.5rem 0.65rem; font-size: 0.88rem;
    background: var(--input-bg, #161a28); color: var(--text-primary, #ffffff);
    border: 1px solid var(--border-color, #2c2f3c); border-radius: 8px;
}
.nt-fb-field label { display: block; margin-bottom: 0.35rem; font-size: 0.88rem; color: var(--text-secondary, #a0a0b0); }
.nt-fb-field textarea { resize: vertical; min-height: 96px; }
.nt-fb-attach {
    padding: 0.75rem; border-radius: 10px;
    background: var(--surface-1, #141826); border: 1px solid var(--border-color, #2c2f3c);
    display: flex; flex-direction: column; gap: 0.55rem;
}
.nt-fb-attach-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.nt-fb-attach-title { font-size: 0.86rem; color: var(--text-secondary, #a0a0b0); }
.nt-fb-meter { font-size: 0.78rem; color: var(--text-secondary, #a0a0b0); font-variant-numeric: tabular-nums; }
.nt-fb-drop {
    display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px;
    padding: 0.7rem; border-radius: 10px; cursor: pointer; text-align: center; font-size: 0.86rem;
    border: 1.5px dashed var(--border-color, #2c2f3c); color: var(--text-secondary, #a0a0b0);
    background: var(--input-bg, #161a28);
}
.nt-fb-drop i { color: var(--accent-text, #a5b4fc); font-size: 1.1rem; }
.nt-fb-drop:hover, .nt-fb-drop:focus-visible, .nt-fb-drop.nt-fb-drop-over {
    border-color: var(--accent-color, #6366f1); background: var(--accent-soft, rgba(99, 102, 241, 0.12));
}
.nt-fb-drop-link { color: var(--accent-text, #a5b4fc); font-weight: 700; text-decoration: underline; }
.nt-fb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.nt-fb-chips:empty { display: none; }
.nt-fb-chip {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem 0.35rem 0.65rem;
    border-radius: 8px; background: var(--surface-2, #1b1f2e); border: 1px solid var(--border-color, #2c2f3c);
    font-size: 0.84rem; color: var(--text-primary, #ffffff);
}
.nt-fb-chip > i { color: var(--accent-text, #a5b4fc); }
.nt-fb-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-fb-chip-size { font-size: 0.76rem; color: var(--text-secondary, #a0a0b0); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-fb-chip-x {
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
    background: transparent; color: var(--text-secondary, #a0a0b0); border: 1px solid var(--border-color, #2c2f3c);
}
.nt-fb-chip-x:hover { color: var(--error-text, #fca5a5); border-color: var(--error-text, #fca5a5); }
.nt-fb-preview { display: flex; flex-direction: column; gap: 0.4rem; }
.nt-fb-preview:empty { display: none; }
.nt-fb-preview-audio { width: 100%; height: 36px; }
.nt-fb-preview-video { width: 100%; max-height: 240px; border-radius: 8px; background: #000; } /* contrast-ok: video zemini, üstünde metin yok */
.nt-fb-error { font-size: 0.82rem; color: var(--error-text, #fca5a5); }
.nt-fb-rec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.nt-fb-action {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.9rem;
    border-radius: 10px; cursor: pointer; font-size: 0.86rem; font-weight: 600;
    background: var(--accent-soft, rgba(99, 102, 241, 0.12)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
    transition: transform 0.12s ease;
}
.nt-fb-action:active { transform: scale(0.97); }
.nt-fb-action-stop { background: var(--fill-error, #c81e1e); color: var(--on-error, #ffffff); border-color: var(--fill-error, #c81e1e); }
.nt-fb-check { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-size: 0.84rem; color: var(--text-secondary, #a0a0b0); cursor: pointer; white-space: nowrap; }
.nt-fb-check input[type="checkbox"] { width: auto; height: auto; margin: 0; flex: none; }
.modal.nt-fb-modal { width: min(600px, calc(100vw - 32px)); }
.nt-fb-hint { margin: 0; font-size: 0.78rem; color: var(--text-secondary, #a0a0b0); }
.nt-fb-hint:empty { display: none; }
.nt-fb-text-error { color: var(--error-text, #fca5a5); }
.nt-fb-text-warn { color: var(--warn-text, #fbbf24); }
.nt-fb-text-ok { color: var(--success-text, #4ade80); }
.nt-fb-rate {
    padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.86rem; font-weight: 600;
    background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24);
    border: 1px solid var(--warn-text, #fbbf24); font-variant-numeric: tabular-nums;
}
.nt-fb-progress { font-size: 0.84rem; color: var(--text-secondary, #a0a0b0); font-variant-numeric: tabular-nums; }
.nt-fb-report { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.nt-fb-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
#feedbackSubmitBtn:disabled { color: var(--text-disabled, #6b7280); cursor: not-allowed; }
@media (max-width: 520px) { .nt-fb-grid { grid-template-columns: 1fr; } }

/* Ekran kaydı: modal gizlenir, FAB gizlenir; tuval + araç çubuğu her şeyin (toast 100000) üstünde. */
body.nt-fb-recording .feedback-fab { display: none !important; }
.nt-rec-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 100001; pointer-events: none; }
.nt-rec-canvas.nt-rec-canvas-active { pointer-events: auto; cursor: crosshair; }
.nt-rec-bar {
    position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 100002;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 14px;
    background: var(--modal-bg, #11141f); color: var(--text-primary, #ffffff);
    border: 1px solid var(--border-color, #2c2f3c); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center;
}
.nt-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fill-error, #c81e1e); animation: ntRecDot 1.2s ease-in-out infinite; }
@keyframes ntRecDot { 50% { transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .nt-rec-dot { animation: none; } }
.nt-rec-num { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--text-secondary, #a0a0b0); }
.nt-rec-btn {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.8rem;
    border-radius: 10px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    background: var(--accent-soft, rgba(99, 102, 241, 0.12)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-rec-btn[aria-pressed="true"] { background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff); border-color: var(--fill-accent, #4f46e5); }
.nt-rec-btn.nt-rec-stop { background: var(--fill-error, #c81e1e); color: var(--on-error, #ffffff); border-color: var(--fill-error, #c81e1e); }

/* Yönetici / öğrenci: ek çizimi + gönderen */
.nt-fb-atts { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.nt-fb-att-thumb { padding: 0; border: 1px solid var(--border-color, #2c2f3c); border-radius: 6px; background: transparent; cursor: pointer; }
.nt-fb-att-thumb img { display: block; max-height: 80px; max-width: 120px; border-radius: 6px; }
.nt-fb-att-media { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; max-width: 300px; }
.nt-fb-att-media audio { width: 100%; height: 34px; }
.nt-fb-att-label { font-size: 0.76rem; color: var(--text-secondary, #a0a0b0); }
.nt-fb-att-video { width: 100%; max-height: 180px; border-radius: 6px; background: #000; } /* contrast-ok: video zemini, üstünde metin yok */
.nt-fb-att-file {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.2rem 0.55rem;
    border-radius: 8px; font-size: 0.8rem; text-decoration: none; word-break: break-all;
    background: var(--accent-soft, rgba(99, 102, 241, 0.12)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-fb-att-size { color: var(--text-secondary, #a0a0b0); white-space: nowrap; }
.nt-fb-sender-sub { font-size: 0.74rem; color: var(--text-secondary, #a0a0b0); margin-top: 0.15rem; }
.nt-fb-guest-badge {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
    background: var(--surface-3, #232838); color: var(--text-primary, #ffffff); border: 1px solid var(--border-color, #2c2f3c);
}
.nt-tab-badge { display: inline-grid; margin-left: 0.35rem; vertical-align: middle; }

/* =====================================================================
   Faz 60 — Toplu kullanıcı içe aktarma (#userImportModal). Renkler token'dan (A5);
   hatalı satır metni --error-text, durum rozetleri --badge-*-bg/fg çiftleri.
   ============================================================================ */
.nt-ui-card { max-width: min(1100px, 96vw); width: 96%; display: flex; flex-direction: column; max-height: 90vh; }
.nt-ui-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.nt-ui-head h3 { margin: 0; }
.nt-ui-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; padding-right: 0.25rem; }
.nt-ui-intro { margin: 0; font-size: 0.88rem; color: var(--text-secondary, #a0a0b0); }
.nt-ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.nt-ui-hint { font-size: 0.8rem; color: var(--text-secondary, #a0a0b0); }
.nt-ui-btn {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.95rem;
    border-radius: 10px; font-size: 0.86rem; font-weight: 700; text-decoration: none; cursor: pointer;
    background: var(--accent-soft, rgba(99, 102, 241, 0.16)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-ui-btn:hover, .nt-ui-btn:focus-visible { background: var(--badge-accent-bg, #1d2142); }
.nt-ui-btn:active { transform: scale(0.98); }
.nt-ui-drop {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 64px;
    padding: 0.9rem; border-radius: 12px; cursor: pointer; text-align: center; font-size: 0.9rem;
    border: 1.5px dashed var(--border-color, #2c2f3c); color: var(--text-secondary, #a0a0b0);
    background: var(--input-bg, #161a28);
}
.nt-ui-drop i { color: var(--accent-text, #a5b4fc); font-size: 1.25rem; }
.nt-ui-drop:hover, .nt-ui-drop:focus-visible, .nt-ui-drop.nt-ui-drop-over {
    border-color: var(--accent-color, #6366f1); background: var(--accent-soft, rgba(99, 102, 241, 0.16));
}
.nt-ui-drop[aria-disabled="true"] { cursor: not-allowed; color: var(--text-disabled, #8a8fa3); }
.nt-ui-drop-link { color: var(--accent-text, #a5b4fc); font-weight: 700; text-decoration: underline; }
.nt-ui-status { font-size: 0.84rem; color: var(--text-secondary, #a0a0b0); font-variant-numeric: tabular-nums; min-height: 1.1em; }
.nt-ui-st-error { color: var(--error-text, #fca5a5); }
.nt-ui-st-warn { color: var(--warn-text, #fbbf24); }
.nt-ui-st-ok { color: var(--success-text, #4ade80); }
.nt-ui-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nt-ui-chip {
    display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db);
}
.nt-ui-chip-ok { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-ui-chip-err { background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); }
.nt-ui-chip-warn { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
.nt-ui-note { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--text-secondary, #a0a0b0); }
.nt-ui-filter { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.nt-ui-filter select { width: auto; }
.nt-ui-preview { max-height: 46vh; overflow: auto; }
.nt-ui-table { font-size: 0.82rem; }
.nt-ui-table td { vertical-align: top; }
.nt-ui-why { min-width: 14rem; }
.nt-ui-r-error td { color: var(--error-text, #fca5a5); }
.nt-ui-badge {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
    background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db);
}
.nt-ui-badge-ok { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-ui-badge-exists { background: var(--badge-info-bg, #182238); color: var(--badge-info-fg, #93c5fd); }
.nt-ui-badge-error { background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); }
.nt-ui-progress { display: flex; flex-direction: column; gap: 0.35rem; }
.nt-ui-bar { height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3, #232838); border: 1px solid var(--border-color, #2c2f3c); }
.nt-ui-bar-fill { height: 100%; width: 0; background: var(--fill-accent, #4f46e5); transition: width 0.25s ease; }
.nt-ui-result { padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--surface-1, #151827); border: 1px solid var(--border-color, #2c2f3c); }
.nt-ui-result h4 { margin: 0 0 0.5rem; }
.nt-ui-result .data-table { margin-top: 0.6rem; }
@media (prefers-reduced-motion: reduce) { .nt-ui-bar-fill { transition: none; } .nt-ui-btn:active { transform: none; } }

/* ============================================================================
   Faz 60 — günlük kota: modül sayfasında "Bugün kalan: 15 üretim · 92 sohbet"
   (#mvQuotaLine, app.js ntKotaSatiri). Biten tür uyarı renginde (A5: metin token'ları).
   ============================================================================ */
.nt-quota-line {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    margin: -6px 4px 12px; font-size: 0.82rem;
    color: var(--text-secondary, #a6adc5);
}
.nt-quota-line.hidden { display: none; }
.nt-quota-line .fa-gauge { color: var(--text-secondary, #a6adc5); }
.nt-quota-lbl { font-weight: 600; }
.nt-quota-num { font-weight: 700; color: var(--text-primary, #ffffff); }
.nt-quota-num.nt-quota-out { color: var(--warn-text, #fbbf24); }
/* ===================== Faz 60 (D5) — Öğretmen Belgeleri (teacher_docs) =====================
   Ayar bölümü: dört belge türü TIKLANAN kart (zemin + kenarlık + seçilince vurgu metni, ≥44px),
   çıkış biletinde soru sayısı. Sonuç: soru listesi / bölümler / rubrik tablosu / veli mesajı.
   Renkler yalnız token (A5); --accent-color yalnız zemin/kenarlık, metin --accent-text. */
.nt-td-settings { margin-bottom: 0.75rem; }
.nt-td-kinds { border: none; margin: 0 0 0.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem; }
.nt-td-kinds legend { font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #f2f4fa); margin-bottom: 0.4rem; padding: 0; }
.nt-td-kind {
    display: flex; align-items: flex-start; gap: 0.55rem; min-height: 44px; padding: 0.6rem 0.7rem;
    border-radius: 10px; cursor: pointer;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40);
}
.nt-td-kind:hover { background: var(--surface-3, #252a42); }
.nt-td-kind:has(input:checked) { background: var(--accent-soft, rgba(99, 102, 241, 0.16)); border-color: var(--accent-color, #6366f1); }
.nt-td-kind input[type="radio"] { margin-top: 0.2rem; flex: 0 0 auto; }
.nt-td-kind-body { display: flex; flex-direction: column; gap: 0.15rem; }
.nt-td-kind-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary, #f2f4fa); }
.nt-td-kind:has(input:checked) .nt-td-kind-title { color: var(--accent-text, #a5b4fc); }
.nt-td-kind-desc { font-size: 0.78rem; color: var(--text-secondary, #a6adc5); line-height: 1.35; }
.nt-td-count-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nt-td-count-input {
    width: 90px; padding: 0.4rem 0.6rem; border-radius: 6px;
    border: 1px solid var(--border-color, #262b40); background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
}
.nt-td-hint { font-size: 0.75rem; color: var(--text-secondary, #a6adc5); }

.nt-td-doc {
    max-height: 560px; overflow-y: auto; padding: 1rem; line-height: 1.65; border-radius: 10px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-td-title { margin: 0 0 0.75rem; color: var(--accent-text, #a5b4fc); }
.nt-td-questions { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.nt-td-q-text { font-weight: 600; }
.nt-td-pts { font-weight: 400; font-size: 0.82rem; color: var(--text-secondary, #a6adc5); }
.nt-td-ans { margin-top: 0.35rem; }
.nt-td-ans > summary {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0.15rem 0.6rem; border-radius: 8px;
    cursor: pointer; font-size: 0.8rem; font-weight: 600; list-style: none;
    background: var(--accent-soft, rgba(99, 102, 241, 0.16)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-td-ans > summary::-webkit-details-marker { display: none; }
.nt-td-ans > p { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--text-secondary, #a6adc5); }
.nt-td-sec { margin-bottom: 0.8rem; }
.nt-td-sec h5 { margin: 0 0 0.3rem; font-size: 0.92rem; color: var(--accent-text, #a5b4fc); }
.nt-td-sec p, .nt-td-message p { margin: 0 0 0.6rem; }
.nt-td-table-wrap { overflow-x: auto; }
.nt-td-rubric { width: 100%; font-size: 0.84rem; }
.nt-td-rubric td { vertical-align: top; }
.nt-td-rubric .nt-td-crit { font-weight: 700; min-width: 120px; }
.nt-td-total { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--text-secondary, #a6adc5); }
.nt-td-actions { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.nt-td-error { color: var(--error-text, #fca5a5); }
.nt-td-raw { white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; font-size: 0.8rem; }
/* Faz 61 — ders planı: ayar girdileri (sınıf / ders saati / ders adı / çıktılar) + plan çizimi. */
.nt-td-plan-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.nt-td-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem; }
.nt-td-plan-lbl { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--text-primary, #f2f4fa); }
.nt-td-plan-lbl select, .nt-td-plan-lbl input[type="text"], .nt-td-plan-lbl input[type="number"], .nt-td-plan-lbl textarea {
    min-height: 40px; padding: 0.4rem 0.6rem; border-radius: 8px; font-weight: 400;
    border: 1px solid var(--border-color, #262b40); background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
}
.nt-td-plan-lbl textarea { min-height: 64px; resize: vertical; font-family: inherit; }
.nt-td-plan-info { margin: 0 0 0.75rem; font-size: 0.88rem; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-td-plan-list { margin: 0.2rem 0 0.6rem; padding-left: 1.3rem; }
.nt-td-plan-list li { margin-bottom: 0.25rem; }
.nt-td-plan-list .nt-td-plan-list { margin: 0.2rem 0 0.3rem; }
.nt-td-code { color: var(--accent-text, #a5b4fc); }
.nt-td-plan-steps { width: 100%; font-size: 0.84rem; }
.nt-td-plan-steps td { vertical-align: top; }
.nt-td-plan-steps tfoot td { font-weight: 700; border-top: 2px solid var(--border-color, #262b40); }

/* ===================== Faz 62 — Etkileşimli Etkinlik (activity) =====================
   Ayar bölümü (tür kartları + öğe sayısı) ve dokunarak çözülen kart. Tıklanan her şey kontrol
   görünümünde: zemin + kenarlık + kalın etiket, ≥44px. Seçili / eşleşmiş: vurgu zemini + vurgu metni.
   Renkler YALNIZ token (A5); --accent-color yalnız zemin/kenarlık, metin --accent-text. */
.nt-act-settings { margin-bottom: 0.75rem; }
.nt-act-kinds { border: none; margin: 0 0 0.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0.5rem; }
.nt-act-kinds legend { font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #f2f4fa); margin-bottom: 0.4rem; padding: 0; }
.nt-act-kind {
    display: flex; align-items: flex-start; gap: 0.55rem; min-height: 44px; padding: 0.6rem 0.7rem;
    border-radius: 10px; cursor: pointer;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40);
}
.nt-act-kind:hover { background: var(--surface-3, #252a42); }
.nt-act-kind:has(input:checked) { background: var(--accent-soft, rgba(99, 102, 241, 0.16)); border-color: var(--accent-color, #6366f1); }
.nt-act-kind input[type="radio"] { margin-top: 0.2rem; flex: 0 0 auto; }
.nt-act-kind-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.nt-act-kind-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary, #f2f4fa); }
.nt-act-kind:has(input:checked) .nt-act-kind-title { color: var(--accent-text, #a5b4fc); }
.nt-act-kind-desc { font-size: 0.78rem; color: var(--text-secondary, #a6adc5); line-height: 1.35; }
.nt-act-count-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nt-act-count-input {
    width: 90px; min-height: 40px; padding: 0.4rem 0.6rem; border-radius: 6px;
    border: 1px solid var(--border-color, #262b40); background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
}
.nt-act-hint { font-size: 0.78rem; color: var(--text-secondary, #a6adc5); margin: 0.25rem 0 0.4rem; }

.nt-act-output { min-width: 0; }
.nt-act-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.nt-act-head h3 { margin: 0; overflow-wrap: anywhere; }
.nt-act-meta { font-size: 0.82rem; color: var(--text-secondary, #a6adc5); }
.nt-act-note { font-size: 0.84rem; color: var(--info-text, #93c5fd); margin: 0.5rem 0 0; }
.nt-act-error { color: var(--error-text, #fca5a5); }
.nt-act-items { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.nt-act-item {
    padding: 0.8rem 0.9rem; border-radius: 12px; min-width: 0;
    background: var(--surface-1, #151827); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40);
}
.nt-act-item.nt-act-ok { border-color: var(--success-text, #4ade80); }
.nt-act-item.nt-act-part { border-color: var(--warn-text, #fbbf24); }
.nt-act-item.nt-act-bad, .nt-act-item.nt-act-empty { border-color: var(--error-text, #fca5a5); }
.nt-act-item-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.nt-act-no {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 0.3rem;
    border-radius: 999px; font-size: 0.8rem; font-weight: 700;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-act-tag {
    font-size: 0.74rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db);
}
.nt-act-status { margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary, #a6adc5); }
.nt-act-ok .nt-act-status { color: var(--success-text, #4ade80); }
.nt-act-part .nt-act-status { color: var(--warn-text, #fbbf24); }
.nt-act-bad .nt-act-status, .nt-act-empty .nt-act-status { color: var(--error-text, #fca5a5); }
.nt-act-prompt, .nt-act-statement { margin: 0.2rem 0 0.4rem; font-weight: 600; overflow-wrap: anywhere; }
.nt-act-statement { font-size: 1rem; }
/* Eşleştirme: sol sütun | ok boşluğu | sağ sütun — dar ekranda da yan yana (oklar boşlukta çizilir). */
.nt-act-match {
    position: relative; display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) clamp(40px, 9vw, 112px) minmax(0, 1fr);
}
.nt-act-col-l { grid-column: 1; grid-row: 1; }
.nt-act-col-r { grid-column: 3; grid-row: 1; }
.nt-act-col { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.nt-act-chip {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.45rem 0.7rem;
    border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600; text-align: left;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--accent-color, #6366f1); max-width: 100%;
    transition: background-color 0.12s ease, transform 0.08s ease;
}
.nt-act-chip:hover:not([aria-disabled="true"]) { background: var(--surface-3, #252a42); }
.nt-act-chip:active:not([aria-disabled="true"]) { transform: scale(0.98); }
.nt-act-chip[aria-disabled="true"], .nt-act-move[aria-disabled="true"] { cursor: default; }
.nt-act-chip[aria-pressed="true"], .nt-act-chip.nt-act-paired {
    background: var(--accent-soft, rgba(99, 102, 241, 0.16)); color: var(--accent-text, #a5b4fc);
    border: 2px solid var(--accent-color, #6366f1);
}
.nt-act-col .nt-act-chip { width: 100%; }
.nt-act-chip-no {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
    border-radius: 6px; font-size: 0.78rem; font-weight: 700;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-act-chip-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nt-act-pairlbl { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; }
.nt-act-pairlbl:empty { display: none; }
/* Sürükleyerek eşleştirme: yatay sürükleme ok çizer, dikey kaydırma sayfayı kaydırır. */
.nt-act-match .nt-act-chip {
    position: relative; cursor: grab; touch-action: pan-y;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.nt-act-match .nt-act-chip[aria-disabled="true"] { cursor: default; }
.nt-act-match.nt-act-linking, .nt-act-match.nt-act-linking .nt-act-chip { cursor: grabbing; }
.nt-act-dot {
    position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; box-sizing: border-box;
    border-radius: 50%; pointer-events: none;
    background: var(--surface-1, #151827); border: 3px solid var(--accent-color, #6366f1);
}
.nt-act-left .nt-act-dot { right: -8px; }
.nt-act-right .nt-act-dot { left: -8px; }
.nt-act-chip.nt-act-paired .nt-act-dot, .nt-act-chip.nt-act-dragsrc .nt-act-dot { background: var(--accent-color, #6366f1); }
.nt-act-chip.nt-act-dragsrc {
    background: var(--accent-soft, rgba(99, 102, 241, 0.16)); color: var(--accent-text, #a5b4fc);
    border: 2px solid var(--accent-color, #6366f1);
}
.nt-act-chip.nt-act-drop { outline: 3px dashed var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-act-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.nt-act-line { fill: none; stroke: var(--accent-color, #6366f1); stroke-width: 2.5; stroke-linecap: round; }
.nt-act-line.nt-act-arrow { fill: var(--accent-color, #6366f1); stroke-width: 1; stroke-linejoin: round; }
.nt-act-line-temp { stroke-dasharray: 6 5; }
.nt-act-line-temp.nt-act-arrow { stroke-dasharray: none; }
.nt-act-line-ok { stroke: var(--success-text, #4ade80); }
.nt-act-line-ok.nt-act-arrow { fill: var(--success-text, #4ade80); }
.nt-act-line-bad { stroke: var(--error-text, #fca5a5); }
.nt-act-line-bad.nt-act-arrow { fill: var(--error-text, #fca5a5); }
/* Dar ekranda "→ B" etiketi ok varken gereksiz yer kaplar: görsel olarak gizli, ekran okuyucuda kalır. */
@media (max-width: 600px) {
    .nt-act-match .nt-act-pairlbl:not(:empty) {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap; border: 0;
    }
}
.nt-act-text { line-height: 2.6; margin: 0.2rem 0 0.4rem; overflow-wrap: anywhere; }
.nt-act-blank {
    min-height: 44px; width: 8.5em; min-width: 6ch; max-width: 100%; padding: 0.3rem 0.5rem; margin: 0 0.15rem;
    border-radius: 8px; font: inherit; font-weight: 600; vertical-align: middle;
    border: 2px dashed var(--accent-color, #6366f1); background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
}
.nt-act-blank:focus { border-style: solid; }
.nt-act-bank { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.3rem; }
.nt-act-tf { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nt-act-tf .nt-act-chip { min-width: 120px; justify-content: center; }
.nt-act-steps { list-style: none; counter-reset: ntactstep; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.nt-act-step {
    counter-increment: ntactstep; display: flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.25rem 0.4rem 0.25rem 0.5rem;
    border-radius: 10px; background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40);
}
.nt-act-step::before {
    content: counter(ntactstep); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-act-step.nt-act-dragging { background: var(--surface-3, #252a42); border-style: dashed; border-color: var(--accent-color, #6366f1); }
.nt-act-grip { flex: 0 0 auto; cursor: grab; color: var(--text-secondary, #a6adc5); }
.nt-act-step-text { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.nt-act-step-moves { flex: 0 0 auto; display: inline-flex; gap: 0.3rem; }
.nt-act-move {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border-radius: 10px; font: inherit;
    background: var(--accent-soft, rgba(99, 102, 241, 0.16)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-act-key { margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px dashed var(--border-color, #262b40); }
.nt-act-key-line { margin: 0; font-size: 0.88rem; color: var(--success-text, #4ade80); overflow-wrap: anywhere; }
.nt-act-expl { margin: 0.25rem 0 0; font-size: 0.84rem; color: var(--text-secondary, #a6adc5); }
.nt-act-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.nt-act-progress { flex: 1 1 auto; font-size: 0.84rem; color: var(--text-secondary, #a6adc5); }
.nt-act-submit, .nt-act-reset { min-height: 44px; }
.nt-act-result {
    margin-top: 0.7rem; padding: 0.7rem 0.9rem; border-radius: 10px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-act-score { font-size: 1.1rem; font-weight: 800; }
.nt-act-score-wait { color: var(--text-secondary, #a6adc5); }
.nt-act-result-note { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--text-secondary, #a6adc5); }
.nt-act-dl { margin-top: 0.9rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
/* Materyallerim salt-okunur önizlemesi */
.nt-act-prev-title { margin: 0 0 0.6rem; color: var(--accent-text, #a5b4fc); }
.nt-act-prev-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.nt-act-prev-item {
    padding: 0.7rem 0.85rem; border-radius: 10px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-act-prev-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.nt-act-prev-line { margin: 0.2rem 0; overflow-wrap: anywhere; }
.nt-act-prev-muted { font-size: 0.82rem; color: var(--text-secondary, #a6adc5); }
.nt-act-prev-list { margin: 0.2rem 0 0; padding-left: 1.3rem; }
.nt-act-prev-ans { color: var(--success-text, #4ade80); }
.nt-act-prev-arrow { color: var(--text-secondary, #a6adc5); }
@media (prefers-reduced-motion: reduce) { .nt-act-chip { transition: none; } .nt-act-chip:active { transform: none; } }
@media (max-width: 480px) {
    .nt-act-item { padding: 0.7rem 0.6rem; }
    .nt-act-step { gap: 0.35rem; padding-left: 0.35rem; }
    .nt-act-grip { display: none; }              /* dokunmatikte taşıma düğmeyle; yer metne kalsın */
    .nt-act-tf .nt-act-chip { flex: 1 1 0; min-width: 0; }
    .nt-act-bar > .btn-primary, .nt-act-bar > .btn-secondary { flex: 1 1 auto; }
    /* Telefonda sütun ~100 px: numara rozeti görsel olarak gizli (ok eşleşmeyi gösterir, ekran okuyucu
       numarayı yine okur), iç boşluk az, kelime ancak sığmazsa bölünür. */
    .nt-act-match { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
    .nt-act-match .nt-act-chip { padding: 0.4rem 0.45rem; gap: 0.25rem; font-size: 0.88rem; line-height: 1.3; }
    .nt-act-match .nt-act-chip-text { overflow-wrap: break-word; hyphens: auto; }
    .nt-act-match .nt-act-chip-no {
        position: absolute; width: 1px; height: 1px; min-width: 0; padding: 0; margin: -1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap; border: 0;
    }
}

/* ---------------------------------------------------------------------------
   Faz 60 — ödev kuralları, "Sonuçları yayımla", haftalık özet bağlantısı,
   kazanılan öğretmen saati. Renkler YALNIZ token (A5); tıklanan her şey kontrol
   görünümünde (zemin + kenarlık + vurgu metni).
   --------------------------------------------------------------------------- */
.nt-af-rules {
    border: 1px solid var(--border-color, #2c2f3c); border-radius: 10px;
    padding: 0.5rem 0.75rem 0.4rem; margin: 0.4rem 0 0.6rem;
}
.nt-af-rules legend { font-weight: 700; font-size: 0.85rem; padding: 0 0.35rem; color: var(--text-primary, #ffffff); }
.nt-af-rules-hint { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--text-secondary, #a0a0b0); }
.nt-odev-kural-ozet { font-size: 0.74rem; color: var(--text-secondary, #a0a0b0); margin-top: 0.2rem; }
.nt-gec-cip {
    display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
    background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24);
    border: 1px solid var(--warn-text, #fbbf24); margin-left: 0.3rem; white-space: nowrap;
}
.nt-sonuc-cip {
    display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.74rem; font-weight: 600; white-space: nowrap;
    background: var(--surface-2, #1c2033); color: var(--text-secondary, #a0a0b0); border: 1px solid var(--border-color, #2c2f3c);
}
.nt-sonuc-cip-ok { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); border-color: var(--success-text, #4ade80); }
.nt-yayimla-btn {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.25rem 0.7rem;
    border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    background: var(--accent-soft, rgba(99, 102, 241, .16)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-yayimla-btn:hover { filter: brightness(1.08); }
.nt-yayimla-btn:active { transform: scale(0.97); }
.nt-odev-yayim-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.nt-sonuc-bekliyor { color: var(--warn-text, #fbbf24); font-weight: 600; font-size: 0.85rem; margin: 0.4rem 0 0; }
.nt-wr-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.85rem;
    padding: 0.5rem 0.7rem; border: 1px solid var(--border-color, #2c2f3c); border-radius: 10px;
    background: var(--surface-2, #1c2033);
}
.nt-wr-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--text-primary, #ffffff); }
.nt-wr-week { min-height: 36px; }
.nt-wr-link {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.35rem 0.85rem;
    border-radius: 9px; font-size: 0.85rem; font-weight: 700; text-decoration: none; cursor: pointer;
    background: var(--accent-soft, rgba(99, 102, 241, .16)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1); box-sizing: border-box;
}
.nt-wr-link:hover { filter: brightness(1.08); }
.nt-wr-link:active { transform: scale(0.97); }
.nt-wr-link[aria-busy="true"] { cursor: progress; }
.nt-wr-ext { font-size: 0.8em; color: currentColor; }
.nt-wr-hint { font-size: 0.75rem; color: var(--text-secondary, #a0a0b0); }
.nt-kazanc-not { grid-column: 1 / -1; margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--text-secondary, #a0a0b0); }

/* =====================================================================
   Faz 60 (iş 6): kâğıt sınav sonucunun kalıcı kaydı + öğretmen yayımı
   Kayıt şeridi (taslak / yayımlandı / yayımdan sonra değişti), eşleştirme penceresi,
   "Kayıtlı sonuçlar" listesi, öğrencinin "Sınav sonuçlarım"ı. Renkler token (A5).
   ===================================================================== */
.nt-er-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 11px 15px; }
.nt-er-meta { font-size: 12.5px; color: var(--text-secondary, #a6adc5); }
.nt-er-meta strong { color: var(--text-primary, #f2f4fa); }
.nt-er-note { font-size: 12px; color: var(--text-secondary, #a6adc5); }
.nt-er-note-warn, .nt-er-warn { color: var(--warn-text, #fbbf24); font-weight: 700; }
.nt-er-bad { color: var(--error-text, #fca5a5); font-weight: 700; }
.nt-er-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; white-space: nowrap; border: 1px solid var(--border-color, #262b40);
}
.nt-er-draft { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }
.nt-er-pub { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); border-color: var(--success-text, #4ade80); }
.nt-er-changed { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); border-color: var(--warn-text, #fbbf24); }
.nt-er-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.3rem 0.8rem;
    border-radius: 9px; font-size: 0.82rem; font-weight: 700; text-decoration: none; cursor: pointer;
    white-space: nowrap; box-sizing: border-box;
    background: var(--accent-soft, rgba(99, 102, 241, .16)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-er-btn:hover { filter: brightness(1.08); }
.nt-er-btn:active { transform: scale(0.97); }
.nt-er-btn-sm { min-height: 32px; padding: 0.2rem 0.6rem; font-size: 0.78rem; }
.nt-er-pub-btn { min-height: 36px; }
.nt-er-saved { margin-top: 14px; padding: 14px 16px; }
.nt-er-saved-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.nt-er-saved-head .nt-exam-title { margin: 0; font-size: 16px; }
.nt-er-tablewrap { overflow-x: auto; }
.nt-er-open { color: var(--accent-text, #a5b4fc); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.nt-er-islem { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-er-modal { max-width: 880px; width: min(880px, calc(100vw - 32px)); }
.nt-er-form { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 10px; }
.nt-er-lbl { font-size: 12px; font-weight: 800; color: var(--text-secondary, #a6adc5); }
.nt-er-summary { margin: 6px 0 8px; font-size: 13px; color: var(--text-primary, #f2f4fa); }
.nt-er-table td { vertical-align: middle; }
.nt-er-sel { width: 100%; min-width: 180px; min-height: 36px; }
.nt-er-table tr.nt-er-unmatched td:first-child { box-shadow: inset 4px 0 0 var(--warn-text, #fbbf24); }
.nt-er-table tr.nt-er-unmatched .nt-er-yontem { color: var(--warn-text, #fbbf24); font-weight: 700; }
.nt-er-table tr.nt-er-dup td:first-child { box-shadow: inset 4px 0 0 var(--error-text, #fca5a5); }
.nt-er-table tr.nt-er-dup .nt-er-yontem { color: var(--error-text, #fca5a5); font-weight: 700; }
.nt-er-table tr.nt-er-dup .nt-er-sel { border-color: var(--error-text, #fca5a5); }
.nt-er-student { margin-top: 1.2rem; }
.nt-er-student h3 { font-size: 1rem; margin: 0 0 0.6rem; color: var(--text-primary, #f2f4fa); }
@media (max-width: 760px) {
    .nt-er-bar { padding: 10px 12px; }
    .nt-er-bar .nt-exam-flex { display: none; }
}

/* =====================================================================
   Faz 61 (iş 1 + 7): boş optik form bağlantısı + şube karşılaştırması.
   Renkler token (A5); hücre rengi + metin değeri birlikte (yalnız renge dayanmaz).
   ===================================================================== */
.nt-omr-form {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--border-color, #262b40); background: var(--surface-1, #151827);
}
.nt-omr-form-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nt-omr-form-head strong { color: var(--text-primary, #f2f4fa); font-size: 13px; }
.nt-omr-form .nt-exam-grid2 { margin-top: 10px; }
.nt-omr-form input[type="text"] { width: 100%; box-sizing: border-box; min-height: 36px; }
.nt-omr-form-btn { margin-top: 10px; min-height: 44px; }
.nt-omr-form-btn[aria-disabled="true"] { color: var(--text-disabled, #6b7280); cursor: not-allowed; }
.nt-er-cmp { margin-bottom: 12px; }
.nt-er-cmp-card { padding: 14px 16px; }
.nt-er-cmp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.nt-er-cmp-head .nt-exam-title { margin: 0; font-size: 16px; }
.nt-er-cmp-sub { margin: 16px 0 8px; font-size: 14px; color: var(--text-primary, #f2f4fa); }
.nt-er-cmp-table th[scope="row"], .nt-er-cmp-q th[scope="row"] {
    text-align: left; font-weight: 700; color: var(--text-primary, #f2f4fa); white-space: nowrap;
    position: sticky; left: 0; z-index: 1; background: var(--surface-1, #151827);
}
.nt-er-cmp-table tr.nt-cmp-all th[scope="row"] { color: var(--accent-text, #a5b4fc); }
.nt-er-cmp-table tr.nt-cmp-unmatched th[scope="row"],
.nt-er-cmp-table tr.nt-cmp-nogroup th[scope="row"] { color: var(--text-secondary, #a6adc5); font-style: italic; }
.nt-cmp-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 28px; vertical-align: middle; }
.nt-cmp-bars span { display: inline-block; width: 6px; border-radius: 2px 2px 0 0; background: var(--accent-color, #6366f1); }
.nt-cmp-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nt-cmp-dist { position: relative; }
.nt-cmp-cell { text-align: center; font-weight: 700; white-space: nowrap; min-width: 56px; }
.nt-cmp-hi { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-cmp-mid { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
.nt-cmp-lo { background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); }
.nt-cmp-na { color: var(--text-muted, #8f97b3); font-weight: 400; }
@media (max-width: 760px) {
    .nt-er-cmp-card { padding: 12px 10px; }
    .nt-cmp-cell { min-width: 48px; }
    .nt-omr-form-btn { width: 100%; justify-content: center; }
}
/* ===========================================================================
   Faz 61 — "Bugün" kartı · sınıf ligi seçicisi · sınav tarihleri · veli bağlantısı
   Tıklanan her satır kontrol gibi çizilir (zemin + kenarlık + vurgu metni, ≥44 px).
   =========================================================================== */
.nt-today-card h2 { margin: 0 0 10px; }
.nt-today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nt-today-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
    padding: 10px 14px; border-radius: 12px; box-sizing: border-box;
    font: inherit; text-align: left; text-decoration: none; color: inherit;
}
.nt-today-action {
    background: var(--badge-accent-bg, #1d2142);
    border: 1px solid var(--border-strong, #79809c);
    cursor: pointer; transition: transform .08s ease, border-color .12s ease;
}
.nt-today-action:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-today-action:active { transform: scale(.985); }
.nt-today-action:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-today-info {
    background: var(--surface-2, #1c2033);
    border: 1px solid var(--border-color, #262b40);
}
.nt-today-ico { flex: 0 0 auto; width: 18px; color: var(--accent-text, #a5b4fc); }
.nt-today-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-today-main { font-weight: 700; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-today-sub { font-size: .88rem; color: var(--text-secondary, #a6adc5); overflow-wrap: anywhere; }
.nt-today-go { flex: 0 0 auto; font-weight: 700; color: var(--accent-text, #a5b4fc); white-space: nowrap; }
.nt-today-late .nt-today-sub { color: var(--warn-text, #fbbf24); }
.nt-today-count {
    flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700;
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); white-space: nowrap;
}
.nt-today-soon { background: var(--badge-warn-bg, #2e2416); color: var(--warn-text, #fbbf24); }
.nt-today-empty { margin: 0; color: var(--text-secondary, #a6adc5); }
@media (prefers-reduced-motion: reduce) { .nt-today-action { transition: none; } }
@media (max-width: 480px) {
    .nt-today-row { flex-wrap: wrap; }
    /* simge (18px) + boşluk (12px) dışında tam genişlik: uzun başlık simgenin ALTINA inmesin */
    .nt-today-text { flex: 1 1 calc(100% - 30px); }
    .nt-today-go, .nt-today-count { margin-left: 30px; }
}

/* ===========================================================================
   Faz 62 (iş 10) — "Planım" (kişisel çalışma planı) + "Bugün" kartındaki "Planımı gör"
   Satırlar "Bugün" kartının sınıflarını (.nt-today-row / -action / -info) yeniden kullanır.
   Tıklanan her öğe kontrol gibi çizilir (zemin + kenarlık + vurgu metni, ≥ 44 px).
   =========================================================================== */
.nt-today-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.nt-today-plan-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
    border-radius: 10px; box-sizing: border-box; text-decoration: none; font-weight: 700;
    background: var(--badge-accent-bg, #1d2142); border: 1px solid var(--border-strong, #79809c);
    color: var(--accent-text, #a5b4fc);
}
.nt-today-plan-link:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-today-plan-link:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-plan { display: grid; gap: 16px; min-width: 0; }
.nt-plan h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--text-primary, #f2f4fa); }
.nt-plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.nt-plan-target-lbl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-plan-target-lbl select { min-height: 44px; min-width: 110px; }
.nt-plan-sum { color: var(--text-secondary, #a6adc5); }
.nt-plan-hint { margin: 0 0 8px; font-size: .9rem; color: var(--text-secondary, #a6adc5); }
.nt-plan-count { font-size: .85rem; font-weight: 600; color: var(--text-secondary, #a6adc5); }
/* 7 günlük şerit: dar ekranda KENDİ kutusunda kayar (sayfa yatay kaymaz) */
.nt-plan-strip { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 8px 6px 2px 0; }
.nt-plan-chip {
    position: relative; flex: 1 0 48px; min-height: 72px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 4px; border-radius: 12px; cursor: pointer; font: inherit;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-strong, #79809c);
    color: var(--text-primary, #f2f4fa);
    transition: transform .08s ease, border-color .12s ease;
}
.nt-plan-chip:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-plan-chip:active { transform: scale(.97); }
.nt-plan-chip:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-plan-chip.is-today { border-width: 2px; border-color: var(--accent-text, #a5b4fc); }
.nt-plan-chip.is-busy { border-color: var(--warn-text, #fbbf24); }
.nt-plan-chip[aria-pressed="true"] {
    background: var(--fill-accent, #4f46e5); border-color: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff);
}
.nt-plan-chip-wd { font-size: .78rem; font-weight: 700; }
.nt-plan-chip-d { font-size: 1.1rem; font-weight: 800; line-height: 1.1; }
.nt-plan-chip-m { font-size: .74rem; color: var(--text-secondary, #a6adc5); white-space: nowrap; }
.nt-plan-chip[aria-pressed="true"] .nt-plan-chip-m { color: var(--on-accent, #ffffff); background: var(--fill-accent, #4f46e5); }
.nt-plan-chip-bar { display: block; width: 80%; height: 4px; border-radius: 999px; background: var(--surface-3, #23283d); overflow: hidden; }
.nt-plan-chip-bar > span { display: block; height: 100%; background: var(--accent-text, #a5b4fc); }
.nt-plan-chip[aria-pressed="true"] .nt-plan-chip-bar { background: transparent; box-shadow: inset 0 0 0 1px var(--on-accent, #ffffff); }
.nt-plan-chip[aria-pressed="true"] .nt-plan-chip-bar > span { background: var(--on-accent, #ffffff); }
/* Yoğun gün işareti: düğmenin sağ üst köşesinin DIŞINDA küçük rozet (dar düğmede yazının üstüne binmesin) */
.nt-plan-chip-warn {
    position: absolute; top: -7px; right: -5px; width: 18px; height: 18px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: .62rem;
    background: var(--badge-warn-bg, #2e2416); color: var(--warn-text, #fbbf24); border: 1px solid var(--warn-text, #fbbf24);
}
.nt-plan-daybox, .nt-plan-someday, .nt-plan-exams { min-width: 0; }
.nt-plan-exams { padding-top: 12px; border-top: 1px solid var(--border-color, #262b40); }
.nt-plan-day-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.nt-plan-day-head h3 { margin: 0; }
.nt-plan-day-min { font-weight: 700; color: var(--text-secondary, #a6adc5); }
.nt-plan-warn {
    margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; font-size: .9rem;
    background: var(--badge-warn-bg, #2e2416); color: var(--warn-text, #fbbf24);
}
/* Sınav tekrarı: tik (≥ 44 px) + ilgili materyal düğmeleri */
.nt-plan-review {
    display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 12px;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-plan-review-head { display: flex; align-items: center; gap: 12px; }
.nt-plan-review.is-done .nt-today-main { text-decoration: line-through; }
.nt-plan-tick {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font: inherit;
    background: var(--surface-1, #151826); border: 2px solid var(--border-strong, #79809c); color: var(--accent-text, #a5b4fc);
}
.nt-plan-tick i { visibility: hidden; }
.nt-plan-tick[aria-pressed="true"] {
    background: var(--badge-success-bg, #10291c); border-color: var(--success-text, #4ade80); color: var(--badge-success-fg, #4ade80);
}
.nt-plan-tick[aria-pressed="true"] i { visibility: visible; }
.nt-plan-tick:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-plan-rels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-left: 56px; }
.nt-plan-rel {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; max-width: 100%;
    border-radius: 10px; box-sizing: border-box; cursor: pointer; font: inherit; font-weight: 700;
    text-decoration: none; overflow-wrap: anywhere; text-align: left;
    background: var(--badge-accent-bg, #1d2142); border: 1px solid var(--border-strong, #79809c); color: var(--accent-text, #a5b4fc);
}
.nt-plan-rel:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-plan-rel:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-plan-rel-note { flex: 1 1 100%; margin: 0; font-size: .88rem; color: var(--text-secondary, #a6adc5); }
/* Kişisel tarihler: liste (tablo değil) + ≥ 44 px düğmeler */
.nt-plan-pe-form input { min-height: 44px; }
.nt-plan-pe-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.nt-plan-pe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nt-plan-pe {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: 12px;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-plan-pe.is-past .nt-today-main, .nt-plan-pe.is-past .nt-today-sub { color: var(--text-muted, #8f97b3); }
.nt-plan-pe-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .nt-plan-chip { transition: none; } }
@media (max-width: 480px) {
    .nt-plan-strip { gap: 4px; }
    .nt-plan-chip { flex: 1 0 44px; min-height: 68px; padding: 6px 2px; }
    .nt-plan-rels { margin-left: 0; }
    .nt-plan-rel { flex: 1 1 100%; }
    .nt-plan-pe .nt-today-count { margin-left: 0; }     /* "Bugün" kartının simge payı burada yok */
    .nt-plan-pe-actions { width: 100%; }
    .nt-plan-pe-actions .nt-plan-pe-btn { flex: 1 1 0; justify-content: center; }
    .nt-today-foot { justify-content: stretch; }
    .nt-today-plan-link { width: 100%; justify-content: center; }
}

/* Sınıf ligi: kapsam seçici + dönem düğmeleri */
.nt-lb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.nt-lb-scope-lbl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-lb-scope-lbl select { min-height: 40px; min-width: 180px; }
.nt-lb-periods { display: inline-flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40); }
.nt-lb-period {
    min-height: 38px; padding: 6px 14px; border-radius: 8px; border: 1px solid transparent;
    background: transparent; color: var(--text-secondary, #a6adc5); font: inherit; font-weight: 600; cursor: pointer;
}
.nt-lb-period.active {
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc);
    border-color: var(--border-strong, #79809c);
}
.nt-lb-period:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-lb-info { margin: 0 0 10px; font-size: .88rem; color: var(--text-secondary, #a6adc5); }
.data-table tr.nt-lb-me td { background: var(--surface-3, #252a42); font-weight: 700; }
.nt-lb-me-chip {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .78rem;
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc);
}

/* Sınav tarihleri (sınıf üyeleri penceresi) */
.nt-xd-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color, #262b40); }
.nt-xd-box h4 { margin: 0 0 8px; color: var(--text-primary, #f2f4fa); }
.nt-xd-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-bottom: 10px; }
.nt-xd-f { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--text-secondary, #a6adc5); }
.nt-xd-f input { min-height: 40px; }
.nt-xd-f-title, .nt-xd-f-note, .nt-xd-actions { grid-column: 1 / -1; }
.nt-xd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nt-xd-table tr.nt-xd-past td { color: var(--text-muted, #8f97b3); }
.nt-xd-note { font-size: .82rem; color: var(--text-secondary, #a6adc5); margin-top: 2px; }
@media (max-width: 480px) { .nt-xd-form { grid-template-columns: 1fr; } }

/* Faz 63 (17d) — canlı ders: "Bugün" kartı / Planım satırı + sınıf penceresi listesi.
   "Katıl" = dolu birincil düğme; "Bağlantı" / "Kaydı izle" = tonlu ikincil (zemin + kenarlık + vurgu
   metni); dış bağlantı işareti `currentColor`; hepsi ≥ 44 px. Ana makine adı düğmenin yanında. */
.nt-live-row { flex-wrap: wrap; }
.nt-live-row.is-live { border-color: var(--badge-error-fg, #fca5a5); }
.nt-live-badge {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); vertical-align: middle;
}
.nt-live-acts { flex: 0 1 auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.nt-live-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 10px;
    box-sizing: border-box; text-decoration: none; font-weight: 700; white-space: nowrap; cursor: pointer;
    transition: transform .08s ease, border-color .12s ease;
}
.nt-live-join { background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff); border: 1px solid var(--fill-accent, #4f46e5); }
.nt-live-join:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-live-sec, .nt-cd-link {
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
}
.nt-live-sec:hover, .nt-cd-link:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-live-btn:active { transform: scale(.985); }
.nt-live-btn:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-live-host {
    font-size: .82rem; color: var(--text-secondary, #a6adc5); overflow-wrap: anywhere;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
.nt-live-bad { font-size: .85rem; color: var(--warn-text, #fbbf24); }
.nt-live-airgap {
    margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .88rem;
    background: var(--badge-warn-bg, #2e2416); color: var(--warn-text, #fbbf24);
}
.nt-live-plan-hint { margin: 4px 0 0 30px; }
@media (prefers-reduced-motion: reduce) { .nt-live-btn { transition: none; } }
@media (max-width: 480px) {
    .nt-live-acts { margin-left: 30px; width: calc(100% - 30px); }
    .nt-live-plan-hint { margin-left: 0; }
}
/* Sınıf penceresi: liste sekmeleri, seri kutusu, durum çipi, tablodaki bağlantı düğmeleri */
.nt-cd-tabs { margin: 4px 0 8px; }
.nt-cd-series { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .88rem; color: var(--text-secondary, #a6adc5); }
.nt-cd-series input { width: 20px; height: 20px; flex: 0 0 auto; }
.nt-cd-form .nt-xd-note.nt-cd-repeat { grid-column: 1 / -1; margin: -4px 0 0; }
.nt-cd-links { white-space: nowrap; }
.nt-cd-links .nt-live-btn { min-height: 36px; padding: 4px 10px; }
.nt-cd-links .nt-live-host { display: block; margin-top: 2px; }
.nt-cd-state {
    display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-cd-state-live { background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); }
.nt-cd-state-ended, .nt-cd-state-cancelled { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }
@media (pointer: coarse) { .nt-cd-links .nt-live-btn { min-height: 44px; } }

/* Veli bağlantısı penceresi */
.nt-pl-card { max-width: 560px; }
.nt-pl-hint { margin: 0 0 10px; color: var(--text-secondary, #a6adc5); font-size: .92rem; }
.nt-pl-url-lbl { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-pl-url { width: 100%; min-height: 40px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .85rem; }
.nt-pl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.nt-pl-actions > * { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.nt-ext { font-size: .8em; color: currentColor; }
.nt-pl-meta { margin: 0; font-size: .85rem; color: var(--text-muted, #8f97b3); }
@media (max-width: 480px) { .nt-pl-actions > * { flex: 1 1 100%; justify-content: center; } }

/* Faz 62 — veli hesabı: "Veli bağlantısı" penceresinin ikinci bölümü + yöneticinin "Veliler" listesi.
   Renkler yalnız token (A5); dokunulan her şey düğme görünümünde (>= 44px). */
.nt-pa-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color, #262b40); }
.nt-pa-title { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 1rem;
    color: var(--text-primary, #f2f4fa); }
.nt-pa-list { list-style: none; margin: 8px 0; padding: 0; }
.nt-pa-item { padding: 10px 0; border-top: 1px solid var(--border-color, #262b40); }
.nt-pa-item:first-child { border-top: 0; }
.nt-pa-item-head { margin: 0 0 4px; overflow-wrap: anywhere; color: var(--text-primary, #f2f4fa); }
.nt-pa-user { color: var(--text-secondary, #a6adc5); font-size: .88rem; }
.nt-pa-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .8rem;
    background: var(--badge-warn-bg, #2e2416); color: var(--warn-text, #fbbf24); }
.nt-pa-more { margin-top: 10px; }
.nt-pa-more > summary {
    display: flex; align-items: center; min-height: 44px; padding: 8px 12px; cursor: pointer;
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--border-strong, #79809c); border-radius: 11px; font-weight: 600;
}
.nt-pa-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.nt-pa-form label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem;
    color: var(--text-secondary, #a6adc5); }
.nt-pa-form input { min-height: 40px; }
.nt-pa-form > button { grid-column: 1 / -1; min-height: 44px; justify-self: start; }
.nt-pa-form.nt-pa-search { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.nt-pa-form.nt-pa-search > button { grid-column: auto; }
.nt-pa-admin { margin-top: 22px; }
.nt-pa-admin h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.nt-pa-admin-search { flex-wrap: wrap; }
.nt-pa-admin-search input { flex: 1 1 220px; min-width: 0; }
.nt-pa-ops { white-space: normal; }
.nt-pa-ops .btn-xs { margin: 2px 4px 2px 0; }
@media (max-width: 480px) {
    .nt-pa-form, .nt-pa-form.nt-pa-search { grid-template-columns: 1fr; }
    .nt-pa-form > button { justify-self: stretch; }
}
/* Faz 63 — Veliler kutusu araçları: toplu veli içe aktarma + okulun "yapay zekâ yorumu" anahtarı.
   Anahtar etiketi bir kontrol gibi çizilir (zemin + kenarlık + vurgu metni, >= 44px). */
.nt-pa-tools { flex-wrap: wrap; align-items: center; gap: 8px; }
.nt-pa-ai-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; cursor: pointer;
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--border-strong, #79809c); border-radius: 11px; font-weight: 600; font-size: .9rem;
}
.nt-pa-ai-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-color, #6366f1); }
.nt-pa-ai-toggle:has(input:disabled) { cursor: not-allowed; color: var(--text-disabled, #8f97b3); }
.nt-pa-ai-hint { font-size: .85rem; color: var(--text-secondary, #a6adc5); }
.nt-pa-ai-hint.nt-pa-ai-warn { color: var(--warn-text, #fbbf24); }
.nt-pa-ai-hint.nt-pa-ai-err { color: var(--error-text, #fca5a5); }
/* Öğretmenin veli penceresi: velinin gördüğü son yapay zekâ yorumu (salt okunur). */
.nt-pl-ai { margin: 12px 0 4px; padding: 10px 12px; border-left: 4px solid var(--accent-color, #6366f1);
    background: var(--surface-2, #1c2033); border-radius: 8px; }
.nt-pl-ai-title { margin: 0 0 4px; font-weight: 700; color: var(--text-primary, #f2f4fa); font-size: .92rem; }
.nt-pl-ai-text { margin: 0; color: var(--text-primary, #f2f4fa); font-size: .92rem; overflow-wrap: anywhere; }
.nt-pl-ai-warn { margin: 6px 0 0; color: var(--warn-text, #fbbf24); font-size: .85rem; }
.nt-ui-badge-create, .nt-ui-badge-link { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
/* ============================================================
   Faz 61 — FOTOĞRAFTAN SORU ÇÖZ (photo_solve). Renkler yalnız token (A5);
   dokunulan her şey düğme görünümünde (zemin + kenarlık + vurgu metni, >= 44px).
   ============================================================ */
.nt-badge-photo { background: var(--badge-info-bg, #182238); color: var(--badge-info-fg, #93c5fd); }
.nt-ps-section { max-width: 940px; margin: 0 auto; }
.nt-ps-card, .nt-ps-wait, .nt-ps-conv, .nt-ps-list-card { padding: 16px 18px; margin-bottom: 14px; }
.nt-ps-title { margin: 0; font-family: var(--font-display, inherit); font-size: 15.5px; font-weight: 700; color: var(--text-primary, #f2f4fa); }
.nt-ps-sub { margin: 4px 0 0; color: var(--text-secondary, #a6adc5); font-size: 12.5px; line-height: 1.5; }
.nt-ps-drop {
    margin-top: 12px; border: 1.5px dashed var(--accent-color, #6366f1); border-radius: 12px;
    padding: 16px; text-align: center; cursor: pointer;
    background: var(--surface-2, #1c2033);
}
.nt-ps-drop.nt-drag { background: var(--surface-3, #23283d); }
.nt-ps-drop:focus-visible { outline: 2px solid var(--accent-color, #6366f1); outline-offset: 2px; }
.nt-ps-drop-hint { font-weight: 700; font-size: 13px; color: var(--accent-text, #a5b4fc); }
.nt-ps-drop-info { color: var(--text-secondary, #a6adc5); font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.nt-ps-preview { display: block; max-width: 100%; max-height: 320px; margin: 0 auto 10px; border-radius: 10px; object-fit: contain; }
.nt-ps-pick, .nt-ps-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nt-ps-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 44px; padding: 0.45rem 0.95rem; border-radius: 10px; box-sizing: border-box;
    font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
    background: var(--accent-soft, rgba(99, 102, 241, .16)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-ps-btn:hover:not(:disabled) { filter: brightness(1.08); }
.nt-ps-btn:active:not(:disabled) { transform: scale(0.97); }
.nt-ps-btn:disabled { color: var(--text-disabled, #6b7280); border-color: var(--border-color, #262b40); background: var(--surface-2, #1c2033); cursor: not-allowed; }
.nt-ps-btn-quiet { background: var(--surface-2, #1c2033); color: var(--text-secondary, #a6adc5); border-color: var(--border-color, #262b40); }
.nt-ps-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.nt-ps-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary, #a6adc5); }
.nt-ps-lbl select, .nt-ps-lbl textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; min-height: 44px; }
.nt-ps-start {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; min-height: 48px;
    padding: 12px 24px; border-radius: 11px; border: none; cursor: pointer; font-family: inherit;
    font-weight: 700; font-size: 15px;
    background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff);
}
.nt-ps-start:hover:not(:disabled) { filter: brightness(1.1); }
.nt-ps-start:active:not(:disabled) { transform: scale(0.98); }
.nt-ps-start:disabled { background: var(--surface-3, #23283d); color: var(--text-disabled, #6b7280); cursor: not-allowed; }
.nt-ps-wait-row { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--accent-text, #a5b4fc); }
.nt-ps-wait-sub { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary, #a6adc5); }
.nt-ps-wait-sub.nt-ps-queue { color: var(--warn-text, #fbbf24); }
.nt-ps-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--border-color, #262b40); border-top-color: var(--accent-color, #6366f1); animation: spin 0.9s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .nt-ps-spin { animation: none; } }
.nt-ps-conv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nt-ps-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color, #262b40); flex: none; }
.nt-ps-conv-meta { flex: 1 1 180px; min-width: 0; }
.nt-ps-conv-title { font-weight: 700; font-size: 14.5px; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-ps-conv-sub { font-size: 12px; color: var(--text-secondary, #a6adc5); margin-top: 2px; }
.nt-ps-ocr { margin-top: 12px; border: 1px solid var(--border-color, #262b40); border-radius: 10px; padding: 8px 12px; background: var(--surface-1, #151827); }
.nt-ps-ocr summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--accent-text, #a5b4fc); min-height: 32px; display: flex; align-items: center; }
.nt-ps-ocr-text { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--text-primary, #f2f4fa); white-space: pre-wrap; overflow-wrap: anywhere; }
.nt-ps-msgs { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.nt-ps-msg { max-width: 92%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.nt-ps-msg-user { align-self: flex-end; background: var(--surface-3, #23283d); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40); }
.nt-ps-msg-assistant { align-self: flex-start; background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40); }
.nt-ps-msg-tag { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: normal; }
.nt-ps-tag-hint { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
.nt-ps-tag-solution { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-ps-tag-text { background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc); }
.nt-ps-modeline { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary, #a6adc5); }
.nt-ps-ask { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.nt-ps-ask textarea { flex: 1 1 auto; min-height: 48px; box-sizing: border-box; resize: vertical; }
.nt-ps-send {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 48px; padding: 0 16px;
    border-radius: 10px; border: none; cursor: pointer; font-family: inherit; font-weight: 700;
    background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff);
}
.nt-ps-send:disabled { background: var(--surface-3, #23283d); color: var(--text-disabled, #6b7280); cursor: not-allowed; }
.nt-ps-error { margin-top: 10px; font-size: 13px; color: var(--error-text, #fca5a5); }
.nt-ps-list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.nt-ps-note { color: var(--text-muted, #8f97b3); font-size: 12px; }
.nt-ps-tablewrap { overflow-x: auto; }
.nt-ps-open { color: var(--accent-text, #a5b4fc); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; display: inline-block; min-height: 32px; line-height: 32px; }
.nt-ps-st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.nt-ps-st-ok { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-ps-st-failed { background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); }
.nt-ps-st-pending { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }
.nt-ps-del { min-height: 36px; padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.nt-ps-student { margin-top: 1.2rem; }
.nt-ps-student h4 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--text-primary, #f2f4fa); }
@media (max-width: 760px) {
    .nt-ps-card, .nt-ps-wait, .nt-ps-conv, .nt-ps-list-card { padding: 12px; }
    .nt-ps-msg { max-width: 100%; }
    .nt-ps-pick .nt-ps-btn, .nt-ps-actions .nt-ps-btn { flex: 1 1 140px; }
    .nt-ps-start { width: 100%; justify-content: center; }
    .nt-ps-ask { flex-direction: column; }
    .nt-ps-send { justify-content: center; }
}

/* ============================================================
   Faz 63 (DC) — DOKÜMAN KARŞILAŞTIRMA BAŞLIK SETLERİ: modüldeki set seçici + koşu başına
   başlık seçimi + tanım editörü (`ntDcEditor`) ve Yönetim → "Karşılaştırma Başlıkları".
   Renkler yalnız token (A5); seçilebilir öğeler zemin + kenarlık + vurgu metniyle kontrol
   görünümünde (dokunmatikte 44 px kuralı genel `pointer: coarse` bloğundan).
   ============================================================ */
.dc-hs-row { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.dc-hs-field { display: inline-flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--text-secondary, #a6adc5); min-width: 0; }
.dc-hs-field .setting-select { min-width: 200px; max-width: 100%; }
.dc-hs-check { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .85rem; color: var(--text-primary, #f2f4fa); }
.dc-hs-note { margin-top: .4rem; font-size: .78rem; color: var(--warn-text, #fbbf24); }
.dc-hs-pickwrap { margin-top: .55rem; padding: .55rem .65rem; border: 1px solid var(--border-color, #262b40); border-radius: 10px; background: var(--surface-2, #1c2033); }
.dc-hs-pickbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-secondary, #a6adc5); margin-bottom: .4rem; }
.dc-hs-pickbar > span { flex: 1 1 180px; }
.dc-hs-picks { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 220px; overflow: auto; }
.dc-hs-pick, .dcs-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; cursor: pointer;
    border: 1px solid var(--border-color, #262b40); border-radius: 999px; background: var(--surface-1, #151827);
    color: var(--text-primary, #f2f4fa); font-size: .8rem; line-height: 1.3;
}
.dc-hs-pick:has(input:checked), .dcs-chip:has(input:checked) {
    border-color: var(--accent-color, #6366f1); background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent-text, #a5b4fc);
}
.dc-hs-empty { font-size: .8rem; color: var(--text-secondary, #a6adc5); }
.dc-hs-editor { margin-top: .6rem; border: 1px solid var(--border-color, #262b40); border-radius: 8px; padding: .7rem; background: var(--surface-2, #1c2033); max-height: 420px; overflow: auto; }
.dc-tpl-bar { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border-color, #262b40); color: var(--text-secondary, #a6adc5); }
.dc-tpl-bar .setting-select { min-width: 150px; }
.dc-term-info { font-size: .78rem; color: var(--text-secondary, #a6adc5); margin-bottom: .3rem; }
.dc-term-error { font-size: .82rem; color: var(--error-text, #fca5a5); }
.dc-term-row { border-top: 1px solid var(--border-color, #262b40); padding: .4rem 0; }
.dc-term-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dc-term-label { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; flex: 1 1 220px; min-width: 0; color: var(--text-primary, #f2f4fa); }
.dc-term-label .dc-term-name { flex: 1; min-width: 0; }
.dc-term-def { width: 100%; margin-top: .25rem; font-size: .8rem; resize: vertical; }
.dc-term-actions { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.dcs-status { margin: 0 0 .8rem; font-size: .84rem; color: var(--text-secondary, #a6adc5); }
.dcs-status-hata { color: var(--error-text, #fca5a5); }
.dcs-status-ok { color: var(--success-text, #4ade80); }
.dcs-card { padding: 1rem; margin-bottom: 1rem; }
.dcs-h { margin: 0 0 .4rem; font-size: .95rem; color: var(--text-primary, #f2f4fa); display: flex; align-items: center; gap: .45rem; }
.dcs-info { font-size: .8rem; color: var(--text-secondary, #a6adc5); margin: 0 0 .6rem; line-height: 1.5; }
.dcs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin-bottom: .6rem; }
.dcs-sub { font-size: .78rem; font-weight: 600; color: var(--text-secondary, #a6adc5); margin: .2rem 0 .35rem; }
.dcs-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.dcs-kind { font-size: .7rem; color: var(--text-muted, #8f97b3); }
.dcs-chip:has(input:checked) .dcs-kind { color: var(--accent-text, #a5b4fc); }
.dcs-chip:has(input:disabled) { cursor: not-allowed; color: var(--text-disabled, #6f7691); }
.dcs-vis > summary { cursor: pointer; font-size: .8rem; color: var(--accent-text, #a5b4fc); }
.dcs-vis .dcs-chips { margin: .4rem 0 0; min-width: 260px; }
.dcs-actions { white-space: normal; }
.dcs-actions .btn-sm { margin: 2px 4px 2px 0; }
.dcs-group-table .setting-select { min-width: 150px; }
.dcs-editor { margin-top: .8rem; }
.dcs-editor-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 480px) {
    .dc-hs-field, .dc-hs-field .setting-select { width: 100%; min-width: 0; }
}

/* =====================================================================
   Faz 64 — SÖZLÜ SINAV VE OKUMA (oral): ayar bölümü (#oralSettings), sonuç kartı (kayıt / dinleme /
   aşama göstergesi / döküm / okuma işaretleri) ve öğretmenin "Sözlü cevaplar" penceresi.
   Renkler YALNIZ token (A5); --accent-color yalnız zemin / kenarlık, metin --accent-text; soldurma
   için opaklık KULLANILMAZ. Tıklanan her şey kontrol görünümünde (zemin + kenarlık + vurgulu etiket),
   en az 44 px. Okuma işaretleri renk + çizgi biçimi + metin etiketi taşır (renk tek başına anlam taşımaz).
   ===================================================================== */
.nt-oral-settings { margin-bottom: 0.75rem; }
.nt-oral-kinds { border: none; margin: 0 0 0.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0.5rem; min-width: 0; }
.nt-oral-kinds legend { font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #f2f4fa); margin-bottom: 0.4rem; padding: 0; }
.nt-oral-kind {
    display: flex; align-items: flex-start; gap: 0.55rem; min-height: 44px; padding: 0.6rem 0.7rem;
    border-radius: 10px; cursor: pointer;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40);
}
.nt-oral-kind:hover { background: var(--surface-3, #252a42); }
.nt-oral-kind:has(input:checked) { background: var(--accent-soft, rgba(99, 102, 241, 0.16)); border-color: var(--accent-color, #6366f1); }
.nt-oral-kind input[type="radio"] { margin-top: 0.2rem; flex: 0 0 auto; }
.nt-oral-kind-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.nt-oral-kind-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary, #f2f4fa); }
.nt-oral-kind:has(input:checked) .nt-oral-kind-title { color: var(--accent-text, #a5b4fc); }
.nt-oral-kind-desc { font-size: 0.78rem; color: var(--text-secondary, #a6adc5); line-height: 1.35; }
.nt-oral-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.35rem 0; }
.nt-oral-num {
    width: 96px; min-height: 40px; padding: 0.4rem 0.6rem; border-radius: 6px;
    border: 1px solid var(--border-color, #262b40); background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
}
.nt-oral-select { min-height: 40px; max-width: 100%; }
.nt-oral-hint { font-size: 0.78rem; color: var(--text-secondary, #a6adc5); }
.nt-oral-hint-line { margin: 0.45rem 0 0; }
.nt-oral-check {
    display: flex; align-items: flex-start; gap: 0.55rem; min-height: 44px; padding: 0.55rem 0.7rem; margin: 0.35rem 0;
    border-radius: 10px; cursor: pointer; font-size: 0.85rem;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-oral-check:has(input:checked) { border-color: var(--accent-color, #6366f1); }
.nt-oral-check input { margin-top: 0.15rem; flex: 0 0 auto; }
.nt-oral-langnote { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--warn-text, #fbbf24); }

.nt-oral-output { min-width: 0; }
.nt-oral-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.nt-oral-head h3 { margin: 0; overflow-wrap: anywhere; }
.nt-oral-meta { font-size: 0.82rem; color: var(--text-secondary, #a6adc5); }
.nt-oral-note { font-size: 0.84rem; color: var(--info-text, #93c5fd); margin: 0.5rem 0 0; }
.nt-oral-readnote {
    font-size: 0.82rem; margin: 0.5rem 0 0; padding: 0.45rem 0.65rem; border-radius: 0 8px 8px 0;
    background: var(--surface-2, #1c2033); color: var(--text-secondary, #a6adc5); border-left: 3px solid var(--border-strong, #3a4160);
}
.nt-oral-env { margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
.nt-oral-env-line { margin: 0; padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.85rem; overflow-wrap: anywhere; }
.nt-oral-env-warn { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
.nt-oral-env-error { background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); }
.nt-oral-env-ok { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-oral-env-info { background: var(--badge-info-bg, #182238); color: var(--badge-info-fg, #93c5fd); }
.nt-oral-items { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.nt-oral-item {
    padding: 0.8rem 0.9rem; border-radius: 12px; min-width: 0;
    background: var(--surface-1, #151827); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-oral-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.4rem; }
.nt-oral-no {
    display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 0.3rem; border-radius: 999px;
    font-weight: 800; font-size: 0.85rem; background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-oral-tag { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary, #a6adc5); overflow-wrap: anywhere; }
.nt-oral-status {
    margin-left: auto; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px;
    background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db);
}
.nt-oral-st-answered { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-oral-st-follow_up_pending, .nt-oral-st-pending { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
.nt-oral-question { margin: 0.2rem 0 0.5rem; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-oral-read-text { margin: 0.2rem 0 0.5rem; font-size: 1.05rem; line-height: 1.95; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
/* Okuma işaretleri: doğru = düz · değişen = dalgalı alt çizgi + okunan kelime · atlanan = üstü çizili ·
   eklenen = kesik çerçeve + "+". Her biri kendi zemin / metin çiftini taşır. */
.nt-oral-w-ok { color: var(--text-primary, #f2f4fa); }
.nt-oral-w-sub {
    padding: 0 0.2rem; border-radius: 5px; font-weight: 700;
    background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24);
    text-decoration: underline wavy; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.nt-oral-w-hyp {
    display: inline-block; margin-left: 0.25rem; padding: 0 0.3rem; border-radius: 5px; font-size: 0.8em; font-weight: 600;
    background: var(--surface-1, #151827); color: var(--text-primary, #f2f4fa); border: 1px dashed var(--warn-text, #fbbf24);
    text-decoration: none; line-height: 1.5;
}
.nt-oral-w-hyp::before { content: '→ '; }
.nt-oral-w-del {
    padding: 0 0.2rem; border-radius: 5px; font-weight: 700;
    background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5);
    text-decoration: line-through; text-decoration-thickness: 2px;
}
.nt-oral-w-ins {
    display: inline-block; padding: 0 0.3rem; border-radius: 5px; font-weight: 700; line-height: 1.5;
    background: var(--badge-info-bg, #182238); color: var(--badge-info-fg, #93c5fd); border: 2px dashed var(--info-text, #93c5fd);
}
.nt-oral-legend { margin: 0 0 0.5rem; font-size: 0.8rem; line-height: 2; color: var(--text-secondary, #a6adc5); }
.nt-oral-legend-lbl { font-weight: 700; }

.nt-oral-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px; padding: 0.5rem 0.95rem;
    border-radius: 10px; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; text-align: center;
    transition: background-color 0.12s ease, transform 0.08s ease;
}
.nt-oral-btn-rec { background: var(--accent-soft, rgba(99, 102, 241, 0.16)); color: var(--accent-text, #a5b4fc); border: 1px solid var(--accent-color, #6366f1); }
.nt-oral-btn-alt { background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-strong, #3a4160); }
.nt-oral-btn-rec:hover:not(:disabled), .nt-oral-btn-alt:hover:not(:disabled) { background: var(--surface-3, #252a42); }
.nt-oral-btn-stop { background: var(--fill-error, #c81e1e); color: var(--on-error, #ffffff); border: 1px solid var(--fill-error, #c81e1e); }
.nt-oral-btn:active:not(:disabled) { transform: scale(0.97); }
.nt-oral-btn:disabled { cursor: not-allowed; background: var(--surface-2, #1c2033); color: var(--text-disabled, #6f7691); border-color: var(--border-color, #262b40); }
.nt-oral-rec { margin-top: 0.6rem; }
.nt-oral-rec-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.nt-oral-attempts { font-size: 0.8rem; color: var(--text-secondary, #a6adc5); }
.nt-oral-live {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; padding: 0.55rem 0.7rem; border-radius: 10px;
    background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); border: 1px solid var(--fill-error, #c81e1e);
}
.nt-oral-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--fill-error, #c81e1e); animation: ntOralNabiz 1.2s ease-in-out infinite; }
@keyframes ntOralNabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.55); } }
.nt-oral-live-lbl { font-weight: 800; }
.nt-oral-timer { font-weight: 700; font-variant-numeric: tabular-nums; }
.nt-oral-work {
    margin-top: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 10px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-oral-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nt-oral-steps li { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }
.nt-oral-steps li.nt-oral-step-done { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-oral-steps li.nt-oral-step-done::before { content: '✓ '; }
.nt-oral-steps li.nt-oral-step-on { font-weight: 800; background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc); }
.nt-oral-steps li.nt-oral-step-on::before { content: '● '; }
.nt-oral-work-sub { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--text-secondary, #a6adc5); }
.nt-oral-work-sub.nt-oral-queue { color: var(--warn-text, #fbbf24); }
.nt-oral-fail {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 10px;
    background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); border: 1px solid var(--fill-error, #c81e1e);
}
.nt-oral-fail-msg { margin: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.nt-oral-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.35rem; }
.nt-oral-tts-msg { font-size: 0.8rem; color: var(--text-secondary, #a6adc5); }
.nt-oral-tts-msg.nt-oral-tts-err { color: var(--warn-text, #fbbf24); }
.nt-oral-audio, .nt-oral-q-audio { display: block; width: 100%; max-width: 440px; margin: 0.35rem 0; }
.nt-oral-answer {
    margin-top: 0.55rem; padding: 0.6rem 0.7rem; border-radius: 10px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-oral-answer-fu { margin-top: 0.4rem; }
.nt-oral-lbl { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary, #a6adc5); }
.nt-oral-transcript { margin: 0 0 0.4rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary, #f2f4fa); }
.nt-oral-score { margin: 0.3rem 0 0; color: var(--text-primary, #f2f4fa); }
.nt-oral-feedback { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--text-secondary, #a6adc5); overflow-wrap: anywhere; }
.nt-oral-muted { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--text-muted, #8f97b3); }
.nt-oral-warn { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--warn-text, #fbbf24); }
.nt-oral-override { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--info-text, #93c5fd); }
.nt-oral-error-text { color: var(--error-text, #fca5a5); }
.nt-oral-follow { margin-top: 0.6rem; padding-left: 0.7rem; border-left: 3px solid var(--accent-color, #6366f1); }
.nt-oral-follow-q { margin: 0 0 0.3rem; font-weight: 600; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-oral-follow-tag {
    display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-oral-sample { margin: 0.2rem 0 0.4rem; font-size: 0.88rem; color: var(--text-secondary, #a6adc5); }
.nt-oral-sample > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--accent-text, #a5b4fc); }
.nt-oral-sample p { margin: 0.2rem 0 0; color: var(--text-primary, #f2f4fa); }
.nt-oral-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 0.5rem; margin: 0.5rem 0 0.3rem; }
.nt-oral-metric {
    display: flex; flex-direction: column; align-items: flex-start; padding: 0.55rem 0.7rem; border-radius: 10px;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-oral-metric-num { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.nt-oral-metric-lbl { font-size: 0.78rem; font-weight: 600; }
.nt-oral-counts { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--text-secondary, #a6adc5); }
.nt-oral-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.9rem; }
.nt-oral-progress { font-size: 0.85rem; color: var(--text-secondary, #a6adc5); }
.nt-oral-submit { min-height: 44px; }
.nt-oral-result {
    margin-top: 0.7rem; padding: 0.7rem 0.9rem; border-radius: 12px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--accent-color, #6366f1);
}
.nt-oral-total { font-size: 1.15rem; font-weight: 800; color: var(--accent-text, #a5b4fc); }
.nt-oral-total-wait { color: var(--text-secondary, #a6adc5); }
.nt-oral-dl { margin-top: 0.8rem; }
.nt-oral-prev-title { margin: 0 0 0.2rem; overflow-wrap: anywhere; }
.nt-oral-prev-act { margin: 0.55rem 0; }
.nt-oral-prev-items { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.nt-oral-prev-item {
    padding: 0.7rem 0.8rem; border-radius: 10px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-oral-prev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem; }
.nt-oral-prev-sample { margin: 0.3rem 0 0; font-size: 0.88rem; color: var(--text-secondary, #a6adc5); overflow-wrap: anywhere; }
.nt-oral-rev-card { width: min(760px, calc(100vw - 24px)); max-width: 760px; max-height: 86vh; overflow-y: auto; }
.nt-oral-rev-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; }
.nt-oral-rev-head h3 { margin: 0; overflow-wrap: anywhere; }
.nt-oral-rev-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.nt-oral-chip {
    font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px;
    background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db);
}
.nt-oral-ovr {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.7rem; margin-top: 0.6rem; padding-top: 0.6rem;
    border-top: 1px solid var(--border-color, #262b40);
}
.nt-oral-ovr-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-secondary, #a6adc5); min-width: 0; }
.nt-oral-ovr-field input, .nt-oral-ovr-field textarea {
    min-height: 44px; padding: 0.4rem 0.6rem; border-radius: 8px; font: inherit; font-size: 0.9rem;
    border: 1px solid var(--border-color, #262b40); background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
}
.nt-oral-ovr-field input { width: 110px; }
.nt-oral-ovr-note { flex: 1 1 220px; }
.nt-oral-ovr-note textarea { width: 100%; resize: vertical; box-sizing: border-box; }
.nt-oral-ovr-msg { font-size: 0.82rem; color: var(--success-text, #4ade80); }
.nt-oral-ovr-msg.nt-oral-ovr-err { color: var(--error-text, #fca5a5); }
@media (max-width: 480px) {
    .nt-oral-item { padding: 0.7rem; }
    .nt-oral-rec-btns .nt-oral-btn, .nt-oral-live .nt-oral-btn { flex: 1 1 auto; }
    .nt-oral-status { margin-left: 0; }
    .nt-oral-read-text { font-size: 1rem; }
    .nt-oral-ovr-field input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .nt-oral-dot { animation: none; }
    .nt-oral-btn { transition: none; }
}

/* =====================================================================
   FAZ 62 (iş 18) — DUYARLI ARAYÜZ: telefon (≤ 760) · tablet (761–1024) · masaüstü
   ---------------------------------------------------------------------
   Kırılımlar (D6). responsive-rehberi 761–1100'de SABİT kenar çubuğu diyor; bu bilinçli
   bir sapma: 768 px tablette içerik 472 px'e iniyordu. Yeni düzen:
     • ≤ 1024: kenar çubuğu ÇEKMECE (☰ + karartma + odak tuzağı + Esc; app.js ntDuyarliArayuz)
     • ≤ 760 : rol duyarlı alt çubuk (panel görünümünde de) + üst şeridin ikincil düğmeleri
               "⋯" menüsüne TAŞINIR (kopyalanmaz — id'ler tek, JS bağları aynen)
     • dokunma: `pointer: coarse` altında düğme / sekme / çip / gezinme ≥ 44 px (onay kutusu,
       sürgü ve metin içi bağlantı HARİÇ); yatay raylarda kaydırma çubuğu yerine kenar gölgesi
   Tablolar sütun GİZLEMEZ (rehber): kendi kutusunda yatay kayar (`.nt-table-wrap` + var olan
   sarmalayıcılar), telefonda ilk sütun yapışkan. Kaynak ölçüm aracı: tools/responsive_audit.js.
   Bu bölüm çocuk temasından (dosyanın sonu) ÖNCE durur: çocuk kuralları üstüne yazabilsin.
   ===================================================================== */

/* ---------- 1. Üst şerit ---------- */
/* Kontroller daralabilir; taşarsa taşma SAĞA gider (`safe`) ve kabın kendi kaydırmasına
   düşer. Eski `flex-end` taşmayı SOLA itip ilk kontrolü kırpıyordu (scrollWidth'e yansımaz). */
header .settings { justify-content: safe flex-end; min-width: 0; }
@media (max-width: 1050px) {
    /* Arama kutusu ≤ 1050'de gizli: esneyen taraf artık kontrollerin kabı. `flex: 0 0 auto`
       telefonda şeridi (ve tüm sayfayı) 911 px'e taşıyordu — bu sayfanın taşmasının kök nedeni. */
    header .settings { flex: 0 1 auto; }
}
.nt-menu-btn, #ntHeaderMoreBtn, .nt-drawer-close { display: none; }
@media (max-width: 1024px) {
    .nt-menu-btn { display: inline-grid; flex: 0 0 auto; }
    /* Esas boyut 0: marka yalnız KALAN yeri alır (kontrollerin kabıyla eşit küçülüp onu kırpmasın) */
    header .logo { flex: 1 1 0; min-width: 0; overflow: hidden; }
    header .logo h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    header .logo #customLogo, header .logo #defaultLogoIcon { flex: 0 0 auto; }
}
@media (max-width: 760px) {
    header {
        gap: 6px; min-height: 52px;
        padding-left: 10px; padding-right: calc(10px + var(--nt-debug-rezerv));
    }
    header .logo h1 { font-size: 14px; }
    header .settings { gap: 6px; }
    #ntHeaderMoreBtn { display: inline-grid; flex: 0 0 auto; }
}
/* Arka plan bulutları (600 px, sayfanın kenarından −200 px taşan `absolute` öğeler) SAYFAYI
   taşırıyordu (375 px'te scrollWidth 575, 1280 px'te 1465; mobil tarayıcı yerleşim alanını taşmaya
   göre genişletir → sabit alt çubuk ve FAB ekran dışına düşer). Artık body'yi kaplayan, KIRPAN bir
   kabın içindeler (index.html + login.html `.nt-bg-globs`): konum ve görünüm birebir aynı (eskiden
   de görüntü alanının dışında kalan kısım görünmüyordu), kaydırılabilir alan büyümez. */
.nt-bg-globs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
/* Misafirde sağ üstteki sabit debug düğmesi yok → şeridin sağında onun payı da yok. */
body.nt-role-guest { --nt-debug-rezerv: 0px; }
/* Açılır pencereler dar ekranda ekrana sığar (ntPopoverKonumla soldan/sağdan 8 px bırakır). */
.notification-dropdown, .nt-portal-pop { max-width: calc(100vw - 16px); }

/* "⋯" menüsü: body'de (şeridin `overflow` kırpmasının dışında), zilin yanındaki düğmeye
   hizalanır. İçine taşınan düğmeler satır görünümünde, adlarıyla. */
.nt-more-menu {
    position: fixed; z-index: 95;
    width: min(280px, calc(100vw - 16px));
    max-height: calc(100vh - 80px); overflow-y: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px;
    background: var(--dropdown-bg, #171a2b);
    color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40); border-radius: 14px;
    box-shadow: var(--shadow-pop, 0 14px 40px rgba(0, 0, 0, .45));
}
.nt-more-menu.hidden { display: none; }
.nt-more-menu > * { flex: 0 0 auto; margin: 0; }
.nt-more-menu > :is(button, a) {
    width: 100%; height: auto; min-height: 44px; padding: 8px 12px;
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    font-size: 13px; text-align: left;
}
.nt-more-menu [data-nt-more-label]::after { content: attr(data-nt-more-label); font-weight: 700; }
.nt-more-menu .mode-toggle-container { justify-content: space-between; padding: 6px 10px; }
.nt-more-menu .service-health-indicator { justify-content: flex-start; padding: 6px 10px; min-height: 44px; }
.nt-more-menu .service-health-indicator::after {
    content: 'Yerel servisler'; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #a6adc5);
}
.nt-more-menu .mode-badge { align-self: flex-start; }
.nt-more-menu .user-role-badge {
    max-width: none; white-space: normal; overflow: visible; display: block;
    padding: 6px 10px; border-radius: 10px;
}
.nt-more-menu .user-role-badge:empty { display: none; }
/* Çıkış ve kimlik rozeti girişli kullanıcıya aittir (şeritte #userInfo'nun içindeydiler). */
body.nt-role-guest .nt-more-menu :is(#logoutBtn, #userRoleBadge) { display: none; }

/* ---------- 2. Kenar çubuğu ≤ 1024: çekmece ---------- */
#ntDrawerScrim { display: none; }
@media (max-width: 1024px) {
    body[data-view] #ntSidebar {
        display: flex;
        width: min(300px, 86vw);
        z-index: 120;
        transform: translateX(-104%);
        visibility: hidden;      /* kapalıyken sekme sırasından ve erişilebilirlik ağacından çıkar */
        transition: transform var(--dur-med, 250ms) var(--ease-out, cubic-bezier(.16, 1, .3, 1)),
                    visibility 0s linear var(--dur-med, 250ms);
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
    body.nt-drawer-open #ntSidebar {
        transform: none;
        visibility: visible;
        transition: transform var(--dur-med, 250ms) var(--ease-out, cubic-bezier(.16, 1, .3, 1));
        box-shadow: 0 0 40px rgba(0, 0, 0, .45);
    }
    body.nt-drawer-open #ntDrawerScrim {
        display: block; position: fixed; inset: 0; z-index: 110;
        background: rgba(0, 0, 0, .5);
    }
    body.nt-drawer-open { overflow: hidden; }   /* arka plan kaymasın; çekmecenin listesi kendi kayar */
    .nt-drawer-close {
        display: inline-grid; position: absolute; top: 12px; right: 10px; z-index: 1;
    }
    #ntSidebar .nt-side-brand { padding-right: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    #ntSidebar { transition: none !important; }
}

/* ---------- 3. Alt çubuk: rol duyarlı (≤ 760; görünürlük bloğu yukarıda) ---------- */
/* Öğrenci + misafir bugünkü 5 sekme; öğretmen: Ana Sayfa · Modüller · Panelim · Materyal ·
   Menü; okul yöneticisi / süper admin: + Yönetim. Rol `body[data-nt-rol]` (ntApplySideRole). */
#ntBottomNav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
#ntBottomNav > [data-bn-rol] { display: none; }
body:not([data-nt-rol]) #ntBottomNav > [data-bn-rol~="guest"],
body[data-nt-rol="guest"] #ntBottomNav > [data-bn-rol~="guest"],
body[data-nt-rol="student"] #ntBottomNav > [data-bn-rol~="student"],
body[data-nt-rol="teacher"] #ntBottomNav > [data-bn-rol~="teacher"],
body[data-nt-rol="admin"] #ntBottomNav > [data-bn-rol~="admin"],
body[data-nt-rol="super_admin"] #ntBottomNav > [data-bn-rol~="admin"] { display: flex; }
#ntBottomNav :is(button, a) { min-width: 0; min-height: 48px; font-family: inherit; }
#ntBottomNav :is(button, a) > span:not(.nt-side-badge) {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 4. Modallar + modül ayar sayfaları ---------- */
/* Sayfa modunda (modül ayar bölümü) asgari genişlik anlamsız: kabın içine sığar. */
.module-settings-host > .modal, .module-settings-host > .modal-card { min-width: 0; }
@media (max-width: 768px) {
    /* Eski `@media (max-width: 768px) { .modal { width: 95vw !important } }` sayfa modundaki ayar
       bölümünü de 95vw yapıp 761–768 px'te kabından 23 px taşırıyordu: sayfa modu daima kabın genişliği. */
    .module-settings-host > :is(.modal, .modal-card) {
        width: 100% !important; max-width: 100% !important; margin: 0 0 16px !important;
    }
}
@media (max-width: 760px) {
    /* `.modal { min-width: 360px }` hiç sıfırlanmıyordu → 375 px'te bütün pencereler taşıyordu.
       `!important`: sürükleme / boyutlandırmanın satır içine yazdığı kayıtlı boyutu da ezer. */
    .modal, .modal-card { min-width: 0 !important; resize: none !important; }
    .modal-overlay:not(.module-settings-host) { padding: 10px; box-sizing: border-box; }
    .modal-overlay.modal-dragged { display: flex; }
    .modal-overlay:not(.module-settings-host) > :is(.modal, .modal-card):not(.doc-viewer-modal) {
        width: 100% !important; max-width: 100% !important;
        position: relative !important; left: auto !important; top: auto !important;
        margin: 0 !important; padding: 1.1rem 1rem;
        max-height: calc(100vh - 20px) !important;
    }
    .modal-overlay:not(.module-settings-host) > :is(.modal, .modal-card)[style*="height"]:not(.doc-viewer-modal) {
        height: auto !important;
    }
    .modal .modal-zoom-controls { display: none; }
    .debug-panel { resize: none; }
    /* Bildirimler (420 px'lik kap sağdan 1rem) 375 px'te soldan taşıyordu */
    .toast-container { left: 8px; right: 8px; top: 8px; width: auto; max-width: none; }
    .scene-regen-prompt { min-width: 0; width: calc(100vw - 24px); }
}

/* ---------- 5. Tablolar: kendi kutusunda yatay kaydırma ---------- */
.nt-table-wrap,
:is(.users-table-wrap, .nt-td-table-wrap, .nt-er-tablewrap, .nt-ps-tablewrap, .nt-exam-tablewrap) {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* İlk sütun telefonda yapışkan (sütun gizlenmez — hangi satırda olduğun kaybolmasın).
   `:where()` → düşük özgüllük: vurgulu satır kuralları (`.data-table tr.nt-lb-me td`) zemini korur.
   Zemin opak olmak ZORUNDA (altından geçen hücreler görünmesin); kabın zemini --nt-tw-bg. */
@media (max-width: 760px) {
    :where(.nt-table-wrap, .users-table-wrap, .nt-td-table-wrap, .nt-er-tablewrap, .nt-ps-tablewrap, .nt-exam-tablewrap)
        > table > :is(thead, tbody, tfoot) > tr > :first-child {
        position: sticky; left: 0; z-index: 1;
        background: var(--nt-tw-bg, var(--card-bg, #151827));
    }
    .modal { --nt-tw-bg: var(--modal-bg, #171a2b); }
    .modal-card { --nt-tw-bg: var(--bg-dark, #0f111a); }
}
/* Materyallerim: dört ikonlu işlem sütunu dar ekranda tek "⋯" menüsüne iner (geniş ekranda tersi).
   Taban kural medya bloğundan ÖNCE: aynı özgüllükte sonraki kural kazanır. */
.nt-mat-more { display: none; position: relative; }
@media (max-width: 760px) {
    .nt-mat-acts-wide { display: none; }
    .nt-mat-more { display: inline-block; }
    /* Tablo zaten kendi kutusunda kayıyor: başlık sütunu sıkışıp her satırı 6 satıra bölmesin */
    .nt-mat-table td:nth-child(2) { min-width: 11rem; }
}
.nt-mat-more > summary {
    list-style: none; cursor: pointer;
    width: 36px; height: 36px; display: inline-grid; place-items: center;
}
.nt-mat-more > summary::-webkit-details-marker { display: none; }
.nt-mat-more[open] > summary {
    background: var(--accent-soft, rgba(99, 102, 241, .16)); color: var(--accent-text, #a5b4fc);
    border-color: var(--accent-color, #6366f1);
}
/* Satırın İÇİNDE açılır (kaydırma kutusu mutlak konumlu menüyü kırpardı). */
.nt-mat-more-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 9.5rem; }
.nt-mat-more-list > :is(button, a) { justify-content: flex-start; width: 100%; white-space: nowrap; }

/* ---------- 6. Dokunma: düğme / sekme / çip / gezinme ≥ 44 px ---------- */
@media (pointer: coarse) {
    :is(.btn-primary, .btn-secondary, .btn-danger, .btn-text, .btn-small, .btn-sm, .btn-xs,
        .btn-control, .mv-back, .mv-chip, .upload-tab, .doc-tab, .nt-speed-chip, .speed-preset,
        .nt-side-link, .nt-side-mod, .nt-side-login, .nt-lb-period, .nt-yayimla-btn, .nt-wr-link,
        .nt-er-btn, .nt-guest-login, .nt-guest-register, .nt-meta-toggle, .nt-mat-title) {
        min-height: 44px;
    }
    /* Genel güvence: sınıfı ne olursa olsun <button>, aç/kapat <summary> ve rol=düğme/sekme öğeleri
       dokunulabilir boyutta. `:where()` SIFIR özgüllük — bir bileşen kendi (daha büyük) değerini
       verirse o kazanır; onay kutusu / sürgü / metin içi bağlantı bu listede YOK (D6). */
    :where(button, summary, [role="button"], [role="tab"]) { min-height: 44px; }
    :where(button):not(.pw-toggle-btn) { min-width: 44px; }
    :where(summary) { align-content: center; }
    .duration-preset, .nt-seg, .toast-close, .speed-preset, .nt-ps-del { min-height: 44px; }
    .lms-tab { min-height: 44px; display: inline-flex; align-items: center; }
    .btn-icon, .nt-mat-more > summary, .nt-announce-close { min-width: 44px; min-height: 44px; }
    /* İş kuyruğu satır düğmeleri kendi 26 px alt sınırını daha özgül seçiciyle yazıyor (0-3-0) →
       aynı seçiciyle geçilir (demo verisiyle ölçümde 35×35 çıktı; boş kuyrukta görünmüyordu) */
    .jobs-table .job-actions .btn-icon { min-width: 44px; min-height: 44px; }
    header .logo { min-height: 44px; }
    /* Sağ üstteki sabit debug düğmesi (36 px) büyür; şeridin sağında ayrılan pay da onunla */
    .debug-toggle-btn { width: 44px; height: 44px; top: 10px; right: 10px; }
    :root { --nt-debug-rezerv: 56px; }
    .nt-footer-links a, .login-footer a { display: inline-flex; align-items: center; min-height: 44px; }
    /* Şifre göster/gizle (pw_toggle.js kendi <style>'ını head'in SONUNA ekler → özgüllükle geçilir) */
    span.pw-toggle-wrap > .pw-toggle-btn { width: 44px; height: 44px; right: 0; }
    span.pw-toggle-wrap > input { padding-right: 46px !important; }
    /* Tablo hücresinin doğrudan çocuğu olan bağlantı (okul adresi, indirme) — hücrenin kendisi bir
       gezinme hedefidir (paragraf içi metin bağlantısı değil) */
    .data-table td > a[href] { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
    /* Modül kartının "?" düğmesi 24 px'ti; büyüyünce kartın alt boşluğu da büyür (metne binmesin) */
    .module-help-btn { width: 44px; height: 44px; right: 4px; bottom: 4px; font-size: .85rem; }
    .module-card { padding-bottom: 3.4rem; }
    #ntBottomNav :is(button, a) { min-height: 52px; }

    /* Yatay raylar parmakla kayar: kalın kaydırma çubuğu (Faz 39, fare içindi) dokunmatikte iri
       bir leke gibi görünüyordu → gizli. Kaydırılabilirlik kenardaki gölgeyle belli olur
       (arka plan `local` örtü + `scroll` gölge: başta/sonda örtü gölgeyi kapatır). */
    .lms-panel-tabs, .nt-plan-strip, header .settings, .nt-table-wrap,
    :is(.users-table-wrap, .nt-td-table-wrap, .nt-er-tablewrap, .nt-ps-tablewrap, .nt-exam-tablewrap) {
        scrollbar-width: none;
    }
    :is(.lms-panel-tabs, .nt-plan-strip, header .settings, .nt-table-wrap, .users-table-wrap,
        .nt-td-table-wrap, .nt-er-tablewrap, .nt-ps-tablewrap, .nt-exam-tablewrap)::-webkit-scrollbar {
        display: none; width: 0; height: 0;
    }
    .lms-panel-tabs, .nt-plan-strip, .nt-table-wrap,
    :is(.users-table-wrap, .nt-td-table-wrap, .nt-er-tablewrap, .nt-ps-tablewrap, .nt-exam-tablewrap) {
        --nt-rail-bg: var(--card-bg, #151827);
        background:
            linear-gradient(to right, var(--nt-rail-bg) 30%, transparent) left center / 28px 100% no-repeat local,
            linear-gradient(to left, var(--nt-rail-bg) 30%, transparent) right center / 28px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .32), transparent) left center / 12px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .32), transparent) right center / 12px 100% no-repeat scroll,
            var(--nt-rail-bg);
    }
    .lms-panel-tabs { --nt-rail-bg: var(--surface-3, #252a42); padding-bottom: 5px; }
    .modal .nt-table-wrap { --nt-rail-bg: var(--modal-bg, #171a2b); }
    .modal-card .nt-table-wrap { --nt-rail-bg: var(--bg-dark, #0f111a); }
}

/* Telefonda sabit debug düğmesi sağ üstte pencerelerin kapat düğmesinin ÜSTÜNE biniyordu (z 10000) →
   sol alta, alt çubuğun hemen üstüne iner (geri bildirim düğmesinin karşı köşesi); şeridin sağındaki
   payı da gereksizleşir. Dokunma kuralından SONRA durur (oradaki 56 px'lik payı ezer). */
@media (max-width: 760px) {
    :root { --nt-debug-rezerv: 0px; }
    .debug-toggle-btn { top: auto; right: auto; left: 10px; bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* Sesli kitap oynatıcısı (sonuç kartı + Materyallerim görüntüleyicisi, ntSesliKitapHtml):
   ses dosyası yoksa / açılamazsa görünür not — uyarı rengi (A5: durum metni anlamına göre). */
.nt-ab-missing { margin: .2rem 0 .5rem; font-size: .85rem; font-weight: 600; color: var(--warn-text, #fbbf24); }
.audiobook-output .ab-chap-seek { max-width: 100%; }

/* ---------- 7. Bilinen kırıcılar (375 px ölçümü) ---------- */
/* <fieldset>'in tarayıcı varsayılanı `min-inline-size: min-content`: içindeki ızgara (etkinlik /
   öğretmen belgesi tür kartları) daralamıyor, sayfa 410–426 px'e taşıyordu. */
fieldset { min-width: 0; min-inline-size: 0; }
.nt-td-kind-body { min-width: 0; }
/* Tür kartlarındaki radyo düğmesi `.modal input { width: 100% }` kuralını alıyordu (ayar bölümü bir
   `.modal`): radyo kartın tamamını kaplıyor, başlık + açıklama 0 px'e sıkışıp sayfayı taşırıyordu
   (masaüstünde de sıkışıktı). Radyo kendi boyutunda. */
:is(.nt-act-kind, .nt-td-kind) input[type="radio"] { width: auto; padding: 0; margin: .2rem 0 0; }
@media (max-width: 700px) {
    /* Sürgü satırları: etiket + ray + değer alt alta sarar; ray tam genişlik, asgari 180 px kalkar */
    .fps-control, .compression-control { flex-wrap: wrap; }
    :is(.quick-job-row, .speed-control, .duration-control, .fps-control, .compression-control) input[type="range"] {
        flex: 1 1 100%; min-width: 0;
    }
    input[type="range"] { min-width: 0; }
    .tts-speed-select .speed-control input[type="range"],
    .tts-setting-group .speed-control input[type="range"] { min-width: 0; }
}
@media (max-width: 760px) {
    /* Özet modu satırları: [radyo][ikon][etiket] / altında girdi + birim */
    .summary-mode-row { grid-template-columns: 22px 1.25rem minmax(0, 1fr); row-gap: .35rem; }
    .summary-mode-row > span { min-width: 0 !important; }
    .summary-mode-row > :is(input[type="number"], input[type="range"], small) { grid-column: 3; }
    .summary-mode-row > input[type="number"] { width: 100% !important; }
    /* Video arama sonuçları 330 px'lik sütun istiyordu (satır içi) */
    #vsResultsGrid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)) !important; }
    /* Hafıza kartı: sabit 320 px yükseklik uzun metni kesiyordu → iki yüz aynı ızgara hücresinde
       üst üste, uzun olan yüksekliği belirler (çevirme animasyonu aynen) */
    .flashcard-container { height: auto; min-height: 320px; }
    .flashcard-inner { display: grid; height: auto; min-height: 320px; }
    .flashcard-face { position: relative; grid-area: 1 / 1; height: auto; min-height: 320px; padding: 1.4rem 1.1rem; }
    /* Analitik satır ızgaraları */
    .nt-an-fb-row { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) 52px; }
    .nt-an-filters { flex-wrap: wrap; }
    /* Modül kabuğu üst çubuğu: başlık kısalır, düğmeler sığar */
    .module-topbar { flex-wrap: wrap; row-gap: 6px; }
    .mv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #moduleView { padding: 0; }
    body[data-view="module"] #resultsSection { padding: 0; }
    /* Panel başlığı + kart iç boşlukları */
    .lms-panel-header { padding: .8rem 1rem; flex-wrap: wrap; gap: .5rem; }
    .lms-tab-content { min-width: 0; }
    .lms-panel { margin-top: 1rem; }
}

/* =====================================================================
   FAZ 64 (17b) — BİREYSEL ÖĞRETMEN ALANI (yalnız internet sürümü; `static/js/nt_personal.js`
   ekler — Docker'da bu sınıfları taşıyan öğe hiç oluşmaz). Renkler token'lardan (A5).
   ===================================================================== */
.nt-personal-band {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    margin: 0 0 1rem; padding: .8rem 1rem;
    background: var(--surface-2, #1c2033);
    border: 1px solid var(--border-strong, #79809c);
    border-radius: var(--r-input, 11px);
    color: var(--text-primary, #f2f4fa);
}
.nt-personal-band-warn { background: var(--badge-warn-bg, #2e2416); border-color: var(--fill-warn, #f59e0b); }
.nt-personal-band-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.nt-personal-band-text span { color: var(--text-secondary, #a6adc5); font-size: .9rem; }
.nt-personal-band-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 8px 14px; cursor: pointer; font-weight: 700; font-size: .9rem;
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    border: 1px solid var(--border-strong, #79809c);
    border-radius: var(--r-input, 11px);
    color: var(--accent-text, #a5b4fc);
}
.nt-personal-band-btn:active, .nt-personal-danger:active { transform: scale(.97); }
.nt-personal-band-btn:disabled { cursor: not-allowed; color: var(--text-disabled, #9aa0ad); }
.nt-personal-band-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
    color: var(--accent-text, #a5b4fc); font-weight: 600; text-decoration: underline;
}
.nt-personal-profile { margin: .4rem 0 .8rem; }
.nt-personal-profile h4 { margin: .4rem 0; }
.nt-personal-muted { color: var(--text-secondary, #a6adc5); font-size: .88rem; }
.nt-personal-error { color: var(--error-text, #fca5a5); font-size: .88rem; margin: .4rem 0; }
.nt-personal-error:empty { display: none; }
.nt-personal-warn { color: var(--warn-text, #fbbf24); }
.nt-personal-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 8px 14px; margin-top: .6rem; cursor: pointer; font-weight: 700;
    background: var(--badge-error-bg, #2e1a20);
    border: 1px solid var(--fill-error, #c81e1e);
    border-radius: var(--r-input, 11px);
    color: var(--error-text, #fca5a5);
}
.nt-personal-danger:disabled { cursor: not-allowed; color: var(--text-disabled, #9aa0ad); }
.nt-personal-dialog {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(14, 21, 36, .62);
}
.nt-personal-dialog-card {
    width: 100%; max-width: 440px; padding: 1.4rem;
    background: var(--modal-bg, #171a2b);
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-card, 16px);
    color: var(--text-primary, #f2f4fa);
}
.nt-personal-dialog-card label { display: block; margin: .7rem 0 .3rem; color: var(--text-secondary, #a6adc5); font-size: .85rem; font-weight: 600; }
.nt-personal-dialog-card input {
    width: 100%; box-sizing: border-box; padding: .6rem .8rem;
    background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40); border-radius: var(--r-input, 11px);
}
.nt-personal-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.nt-personal-dialog-actions .btn-secondary { min-height: 44px; margin-top: .6rem; }
.nt-personal-exam-note {
    margin: .4rem 0 .8rem; padding: .6rem .8rem;
    background: var(--badge-warn-bg, #2e2416);
    border: 1px solid var(--fill-warn, #f59e0b);
    border-radius: var(--r-input, 11px);
    color: var(--text-primary, #f2f4fa); font-size: .9rem;
}
.nt-pa-card {
    margin: 0 0 1rem; padding: 1rem 1.1rem;
    background: var(--surface-1, #151827);
    border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-card, 16px);
    color: var(--text-primary, #f2f4fa);
}
.nt-pa-card:empty { display: none; }
.nt-pa-card h3 { margin: 0 0 .7rem; }
.nt-pa-pill {
    display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: var(--badge-success-bg, #14231c); color: var(--success-text, #4ade80);
    border: 1px solid var(--fill-success, #16a34a);
}
.nt-pa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin: 0 0 .9rem; }
.nt-pa-kpis > div {
    display: flex; flex-direction: column; gap: 2px; padding: .6rem .7rem;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
    border-radius: var(--r-input, 11px);
}
.nt-pa-kpis b { font-size: 1.15rem; color: var(--text-primary, #f2f4fa); }
.nt-pa-kpis span { font-size: .8rem; color: var(--text-secondary, #a6adc5); }
.nt-pa-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; }
.nt-pa-switch input { width: 22px; height: 22px; }
.nt-pa-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .4rem 0 0; }
.nt-pa-links a { color: var(--accent-text, #a5b4fc); min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.nt-pa-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .7rem; }
.nt-pa-toolbar input, .nt-pa-toolbar select, .nt-pa-field input, .nt-pa-field textarea {
    box-sizing: border-box; min-height: 40px; padding: .5rem .7rem;
    background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40); border-radius: var(--r-input, 11px);
}
.nt-pa-toolbar input { flex: 1 1 220px; min-width: 0; }
.nt-pa-toolbar select option { background: var(--surface-1, #151827); color: var(--text-primary, #f2f4fa); }
.nt-pa-toolbar .btn-secondary { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.nt-pa-table th[data-np-sort] { cursor: pointer; }
.nt-pa-actions { display: flex; flex-wrap: wrap; gap: .3rem; white-space: nowrap; }
.nt-pa-actions button { min-height: 36px; }
.nt-pa-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .7rem; }
.nt-pa-once {
    margin-top: .7rem; padding: .7rem .9rem;
    background: var(--badge-success-bg, #14231c); border: 1px solid var(--fill-success, #16a34a);
    border-radius: var(--r-input, 11px); color: var(--text-primary, #f2f4fa);
}
.nt-pa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin: 0 0 .8rem; }
.nt-pa-field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .6rem; }
.nt-pa-field label { font-size: .85rem; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-pa-field textarea { width: 100%; font-family: inherit; line-height: 1.5; resize: vertical; }
.nt-pa-versions { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--text-secondary, #a6adc5); font-size: .85rem; }
/* Aydınlatma metni: parametre tablosu + canlı önizleme (2026-11-05). Değer tabloda yazılır, önizlemede dolu
   yer yeşil, boş `[[…]]` kehribar zeminle işaretlenir; odaktaki parametrenin yerleri vurgu çizgisi alır. */
.nt-pa-subhead { margin: .9rem 0 .3rem; font-size: .95rem; color: var(--text-primary, #f2f4fa); }
.nt-pa-label { font-size: .85rem; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-pa-param-summary { margin: .3rem 0 .5rem; font-size: .88rem; }
.nt-pa-param-ok-text { color: var(--success-text, #4ade80); }
.nt-pa-params { width: 100%; margin: 0 0 .8rem; }
.nt-pa-params .nt-pa-param-name {
    text-align: left; font-weight: 600; min-width: 11rem; max-width: 22rem; white-space: normal;
    overflow-wrap: anywhere; color: var(--text-primary, #f2f4fa);
}
.nt-pa-params td:nth-child(2) { width: 50%; min-width: 14rem; }
.nt-pa-params td:nth-child(3), .nt-pa-params td:nth-child(4) { white-space: nowrap; }
.nt-pa-param-input {
    box-sizing: border-box; width: 100%; min-height: 44px; padding: .5rem .7rem;
    background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40); border-radius: var(--r-input, 11px);
}
.nt-pa-param-chip {
    display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700;
    border: 1px solid transparent;
}
.nt-pa-param-ok { background: var(--badge-success-bg, #14231c); color: var(--success-text, #4ade80); border-color: var(--fill-success, #16a34a); }
.nt-pa-param-empty { background: var(--badge-warn-bg, #2e2416); color: var(--warn-text, #fbbf24); border-color: var(--fill-warn, #f59e0b); }
.nt-pa-preview {
    position: relative; max-height: 420px; overflow-y: auto; padding: .7rem .9rem;
    white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: .92rem;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40); border-radius: var(--r-input, 11px);
}
.nt-pa-preview mark { padding: 0 3px; border-radius: 4px; }
.nt-pa-param-filled { background: var(--badge-success-bg, #14231c); color: var(--success-text, #4ade80); }
.nt-pa-param-missing { background: var(--badge-warn-bg, #2e2416); color: var(--warn-text, #fbbf24); }
.nt-pa-param-active { outline: 2px solid var(--accent-color, #6366f1); outline-offset: 1px; }
/* Telefonda satır kart olur (ad + yer sayısı + durum üstte, değer kutusu tam genişlikte) — değer sütunu yana
   kaydırmadan yazılabilsin. Başlık satırı sıralama çiplerine döner: ortak sıralayıcı `headRow.children`
   sırasıyla çalıştığı için sıralama telefonda da aynı. Yapışkan ilk sütun kuralı (0-1-3) burada iptal. */
@media (max-width: 760px) {
    .nt-pa-params, .nt-pa-params thead, .nt-pa-params tbody { display: block; }
    .nt-pa-params thead tr { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 0 .4rem; }
    .nt-pa-params thead th {
        flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: .25rem .7rem;
        border: 1px solid var(--border-color, #262b40); border-radius: 999px;
    }
    .nt-pa-params tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .35rem .6rem; align-items: center;
        padding: .6rem 0; border-top: 1px solid var(--border-color, #262b40);
    }
    .nt-pa-params tbody tr > td,
    .nt-pa-params tbody td.nt-pa-param-name {
        display: block; position: static; padding: 0; border: 0; background: none; min-width: 0; max-width: none;
    }
    .nt-pa-params tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; width: auto; min-width: 0; }
}

/* =====================================================================
   FAZ 65 — ajan başına işaretli bloklar (Aşama A). Her ajan YALNIZ kendi bloğunun
   içine yazar; çizgi film teması blokları dosyanın SONUNDA kalmalı (takma ad
   yeniden tanımları `:root`'taki çözümü ezer), bu yüzden bloklar onların ÖNCESİNDE.
   ===================================================================== */
/* FAZ65:YP-C (yıllık plan, "Bu hafta", Yazılı Dağılımı, katalog kipi) */
/* Tıklanan her öğe kontrol gibi çizilir (zemin + kenarlık + vurgu metni, ≥ 44 px). Renkler yalnız token (A5):
   --accent-color zemin/kenarlık, metin --accent-text; rozetler --badge-*-bg / --badge-*-fg çiftleri. */
.nt-yp-code {
    display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: .8rem; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-yp-badge {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap;
    background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db);
}
.nt-yp-badge-info { background: var(--badge-info-bg, #182238); color: var(--badge-info-fg, #93c5fd); }
.nt-yp-badge-ok { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-yp-badge-warn { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
.nt-yp-badge-off { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }
.nt-yp-badge-now { background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc); }
.nt-yp-hint { margin: 0 0 10px; font-size: .85rem; color: var(--text-secondary, #a6adc5); }
.nt-yp-msg { margin: 6px 0; min-height: 1.1em; font-size: .86rem; color: var(--text-secondary, #a6adc5); }
.nt-yp-msg:empty { margin: 0; }
.nt-yp-msg-err { color: var(--error-text, #fca5a5); }
.nt-yp-msg-warn { color: var(--warn-text, #fbbf24); }
.nt-yp-msg-ok { color: var(--success-text, #4ade80); }
.nt-yp-check {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .88rem; cursor: pointer;
    color: var(--text-primary, #f2f4fa);
}
.nt-yp-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.nt-yp-lbl { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .82rem; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-yp-lbl select, .nt-yp-lbl input[type="text"], .nt-yp-lbl input[type="number"] { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; }
.nt-yp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; }
.nt-yp-filters { margin-bottom: 10px; }
.nt-yp-sec {
    margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; min-width: 0;
    background: var(--surface-1, #151827); border: 1px solid var(--border-color, #262b40);
}
.nt-yp-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.nt-yp-sec-head h3 { margin: 0; margin-right: auto; font-size: 1.02rem; color: var(--text-primary, #f2f4fa); }
.nt-yp-form {
    margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-strong, #79809c);
}
.nt-yp-form-title { margin: 0 0 10px; font-size: .95rem; color: var(--text-primary, #f2f4fa); }
.nt-yp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.nt-yp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-yp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; margin-top: .7rem;
    font-size: .85rem; color: var(--text-secondary, #a6adc5); font-variant-numeric: tabular-nums; }
.nt-yp-pager:empty { display: none; }
.nt-yp-bind-table td, .nt-yp-cat-table td { vertical-align: top; }

/* --- "Üret ▾" (bölünmüş düğme + tür menüsü) */
.nt-yp-gen { position: relative; display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.nt-yp-gen-main, .nt-yp-gen-more {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; cursor: pointer;
    font: inherit; font-size: .88rem; font-weight: 700;
    background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff);
    border: 1px solid var(--fill-accent, #4f46e5); transition: transform .08s ease;
}
.nt-yp-gen-main { padding: 0 14px; border-radius: 10px 0 0 10px; }
.nt-yp-gen-more { padding: 0 10px; border-radius: 0 10px 10px 0; border-left-color: var(--border-strong, #79809c); }
.nt-yp-gen-main:active, .nt-yp-gen-more:active { transform: scale(.98); }
.nt-yp-gen-main:focus-visible, .nt-yp-gen-more:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-yp-gen-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px; padding: 6px;
    display: grid; gap: 4px; border-radius: 12px; box-shadow: var(--shadow-pop, 0 10px 30px rgba(0, 0, 0, .35));
    background: var(--surface-1, #151827); border: 1px solid var(--border-strong, #79809c);
}
.nt-yp-gen-menu.hidden { display: none; }
.nt-yp-gen-opt {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; cursor: pointer; text-align: left;
    font: inherit; font-size: .88rem; font-weight: 600;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-yp-gen-opt:hover, .nt-yp-gen-opt:focus-visible { border-color: var(--accent-text, #a5b4fc); }
.nt-yp-gen-opt.nt-yp-on { background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); border-color: var(--accent-color, #6366f1); }

/* --- modül şeridi (katalog kipi) */
.nt-yp-strip {
    display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px;
    background: var(--badge-info-bg, #182238); border: 1px solid var(--border-strong, #79809c); color: var(--text-primary, #f2f4fa);
}
.nt-yp-strip.hidden { display: none; }
.nt-yp-strip-ico { flex: 0 0 auto; margin-top: 3px; color: var(--badge-info-fg, #93c5fd); }
.nt-yp-strip-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nt-yp-strip-body strong { color: var(--text-primary, #f2f4fa); }
.nt-yp-strip-sub { font-size: .84rem; color: var(--text-secondary, #a6adc5); }
.nt-yp-strip-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.nt-yp-strip-codes:empty { display: none; }
.nt-yp-strip-off {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px;
    cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
    background: var(--surface-1, #151827); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
}
.nt-yp-strip-off:hover, .nt-yp-strip-off:focus-visible { border-color: var(--accent-text, #a5b4fc); }

/* --- "Bu hafta" kartı (öğretmen paneli) */
.nt-week-card {
    margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; min-width: 0;
    background: var(--surface-1, #151827); border: 1px solid var(--border-color, #262b40);
}
.nt-week-card.hidden { display: none; }
.nt-week-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 10px; }
.nt-week-head h3 { margin: 0; font-size: 1.05rem; color: var(--text-primary, #f2f4fa); }
.nt-week-head h3 i { color: var(--accent-text, #a5b4fc); }
.nt-week-day { font-size: .86rem; color: var(--text-secondary, #a6adc5); margin-right: auto; }
.nt-week-list { display: grid; gap: 10px; }
.nt-week-item {
    display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; min-width: 0;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-week-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nt-week-class { font-weight: 800; color: var(--text-primary, #f2f4fa); }
.nt-week-subj { font-size: .88rem; color: var(--text-secondary, #a6adc5); }
.nt-week-st { margin-left: auto; padding: 1px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.nt-week-st-on { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-week-st-off { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }
.nt-week-when { margin: 0; font-size: .86rem; color: var(--text-secondary, #a6adc5); overflow-wrap: anywhere; }
.nt-week-plan { color: var(--text-primary, #f2f4fa); }
.nt-week-outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nt-week-outs li { font-size: .88rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-week-text { color: var(--text-primary, #f2f4fa); }
.nt-week-tag { font-size: .76rem; font-weight: 700; color: var(--success-text, #4ade80); white-space: nowrap; }
.nt-week-empty { margin: 0; font-size: .88rem; color: var(--text-secondary, #a6adc5); }
.nt-week-unres { margin: 0; font-size: .84rem; color: var(--warn-text, #fbbf24); }
.nt-week-sub { display: block; font-size: .8rem; font-weight: 700; color: var(--text-secondary, #a6adc5); margin-bottom: 4px; }
.nt-week-mats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-week-mats li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nt-week-mat { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.nt-week-mat-title { font-weight: 600; color: var(--text-primary, #f2f4fa); }
.nt-week-mat-type { font-size: .8rem; color: var(--text-secondary, #a6adc5); }
.nt-week-btn, .nt-week-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; box-sizing: border-box;
    border-radius: 10px; cursor: pointer; text-decoration: none; font: inherit; font-size: .86rem; font-weight: 700;
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
    transition: transform .08s ease, border-color .12s ease;
}
.nt-week-btn:hover, .nt-week-link:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-week-btn:active, .nt-week-link:active { transform: scale(.985); }
.nt-week-btn:focus-visible, .nt-week-link:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-week-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.nt-week-unbound { padding-top: 6px; border-top: 1px solid var(--border-color, #262b40); }
.nt-week-unbound-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* Öğrenci "Bugün" kartında hafta satırı: .nt-today-row / .nt-today-info yeniden kullanılır. */
.nt-yp-today { align-items: flex-start; }
.nt-yp-today-out { display: block; font-size: .86rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }

/* --- plan görüntüleyici */
.nt-yp-view-meta { margin: 0 0 4px; font-weight: 700; color: var(--text-primary, #f2f4fa); }
.nt-yp-view-src { margin: 0 0 10px; font-size: .82rem; color: var(--text-secondary, #a6adc5); }
.nt-yp-src { color: var(--accent-text, #a5b4fc); font-weight: 700; }
.nt-yp-now {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
    background: var(--badge-accent-bg, #1d2142); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-color, #262b40);
}
.nt-yp-spans { display: grid; gap: 6px; margin-bottom: 12px; }
.nt-yp-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nt-yp-week {
    display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; min-width: 0;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-yp-week-now { border: 2px solid var(--accent-color, #6366f1); background: var(--badge-accent-bg, #1d2142); }
.nt-yp-holiday { background: var(--badge-warn-bg, #2e2416); }
.nt-yp-holiday .nt-yp-week-label { color: var(--badge-warn-fg, #fbbf24); }
.nt-yp-week-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nt-yp-week-label { font-weight: 800; color: var(--text-primary, #f2f4fa); }
.nt-yp-week-date, .nt-yp-week-hours { font-size: .82rem; color: var(--text-secondary, #a6adc5); }
.nt-yp-holiday .nt-yp-week-date { color: var(--text-primary, #f2f4fa); }
.nt-yp-entry { display: grid; gap: 4px; padding-top: 4px; min-width: 0; }
.nt-yp-entry + .nt-yp-entry { border-top: 1px dashed var(--border-color, #262b40); padding-top: 6px; }
.nt-yp-entry-theme { font-size: .88rem; font-weight: 700; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-yp-entry-topic { font-weight: 500; color: var(--text-secondary, #a6adc5); }
.nt-yp-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.nt-yp-otext { margin: 0; font-size: .86rem; color: var(--text-primary, #f2f4fa); white-space: pre-line; overflow-wrap: anywhere; }
.nt-yp-unres { margin: 0; font-size: .82rem; color: var(--warn-text, #fbbf24); }
.nt-yp-more > summary {
    display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; font-size: .84rem; font-weight: 700;
    color: var(--accent-text, #a5b4fc);
}
.nt-yp-more dl { margin: 4px 0 0; display: grid; gap: 4px; }
.nt-yp-more dt { font-size: .8rem; font-weight: 700; color: var(--text-secondary, #a6adc5); }
.nt-yp-more dd { margin: 0 0 4px; font-size: .86rem; color: var(--text-primary, #f2f4fa); white-space: pre-line; overflow-wrap: anywhere; }
.nt-yp-more p, .nt-yp-more ul { margin: 4px 0 0; font-size: .86rem; color: var(--text-primary, #f2f4fa); white-space: pre-line; }

/* --- okul planı yükleme önizlemesi (.nt-ui-* pencere sınıfları yeniden kullanılır) */
.nt-yp-sheets { display: grid; gap: 10px; }
.nt-yp-sheet {
    margin: 0; padding: 10px 12px 12px; border-radius: 12px; display: grid; gap: 8px; min-width: 0;
    background: var(--surface-1, #151827); border: 1px solid var(--border-color, #262b40);
}
.nt-yp-sheet legend { padding: 0 4px; font-weight: 700; color: var(--text-primary, #f2f4fa); }
.nt-yp-warnlist { margin: 0; padding-left: 1.1rem; font-size: .84rem; color: var(--warn-text, #fbbf24); }

/* --- Yazılı Dağılımı (ntKsdtAc) */
/* Tek sütun `minmax(0, 1fr)` ZORUNLU (2026-11-07): örtük `auto` sütun içindeki geniş tablonun min-content
   genişliğine büyüyor, tablo kendi kaydırma kutusuna (`.nt-table-wrap`) girmeden bütün ızgara — süzgeçler dahil —
   kartın dışına taşıyordu (canlıda 11. sınıf matematik tablosu kartın ~400 px dışına çıktı). */
.nt-ksdt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.nt-ksdt-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px 14px; align-items: end; }
.nt-ksdt-choose { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-ksdt-choose:empty { display: none; }
.nt-ksdt-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: .84rem; font-weight: 600;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-strong, #79809c);
}
.nt-ksdt-chip:hover, .nt-ksdt-chip:focus-visible { border-color: var(--accent-text, #a5b4fc); }
.nt-ksdt-chip.nt-yp-on { background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); border-color: var(--accent-color, #6366f1); }
.nt-ksdt-empty {
    padding: 14px; border-radius: 12px; display: grid; gap: 8px; justify-items: start;
    background: var(--surface-2, #1c2033); border: 1px dashed var(--border-strong, #79809c); color: var(--text-primary, #f2f4fa);
}
.nt-ksdt-empty p { margin: 0; }
.nt-ksdt-legend { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: .86rem; color: var(--text-primary, #f2f4fa); }
.nt-ksdt-note { color: var(--text-secondary, #a6adc5); }
.nt-ksdt-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 4px 0 8px; }
.nt-ksdt-table, .nt-ksdt-grid { font-size: .84rem; }
.nt-ksdt-table td, .nt-ksdt-grid td { vertical-align: top; }
.nt-ksdt-th-exam { display: block; font-weight: 800; white-space: nowrap; }
.nt-ksdt-th-scen { display: block; font-weight: 500; white-space: nowrap; }
.nt-ksdt-nat-col .nt-ksdt-th-scen { color: var(--warn-text, #fbbf24); }
.nt-ksdt-has { font-weight: 800; color: var(--text-primary, #f2f4fa); }
.nt-ksdt-noterow td { color: var(--text-secondary, #a6adc5); }
.nt-ksdt-unres td:first-child { box-shadow: inset 4px 0 0 var(--warn-text, #fbbf24); }
.nt-ksdt-topic { font-weight: 700; }
.nt-ksdt-total { font-weight: 800; color: var(--text-primary, #f2f4fa); }
.nt-ksdt-table tfoot th, .nt-ksdt-grid tfoot th { text-align: right; color: var(--text-secondary, #a6adc5); }
.nt-ksdt-pick {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 64px; padding: 0 12px;
    border-radius: 10px; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
}
.nt-ksdt-pick:hover, .nt-ksdt-pick:focus-visible { border-color: var(--accent-text, #a5b4fc); }
.nt-ksdt-ed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.nt-ksdt-ed-title { margin: 0; font-size: .98rem; color: var(--text-primary, #f2f4fa); }
.nt-ksdt-title-lbl { max-width: 640px; }
.nt-ksdt-exams { display: grid; gap: 8px; }
.nt-ksdt-exam-ed {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: end;
    padding: 8px 10px; border-radius: 10px; background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-ksdt-rowtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nt-ksdt-rowcount { font-size: .82rem; color: var(--text-secondary, #a6adc5); font-variant-numeric: tabular-nums; }
.nt-ksdt-grid input[type="text"] { width: 100%; min-width: 9rem; min-height: 36px; box-sizing: border-box; }
.nt-ksdt-grid input[type="number"] { width: 4.2rem; min-height: 36px; box-sizing: border-box; text-align: right; }
.nt-ksdt-bad td { background: var(--badge-error-bg, #2e1a20); }
.nt-ksdt-rdel { color: var(--error-text, #fca5a5); }
@media (prefers-reduced-motion: reduce) {
    .nt-yp-gen-main, .nt-yp-gen-more, .nt-week-btn, .nt-week-link { transition: none; }
}
@media (max-width: 760px) {
    .nt-yp-sec, .nt-week-card { padding: 12px 10px; }
    .nt-week-st { margin-left: 0; }
    .nt-yp-gen { width: 100%; }
    .nt-yp-gen-main { flex: 1 1 auto; justify-content: center; }
    .nt-yp-gen-menu { left: 0; right: 0; min-width: 0; }
    .nt-week-btn, .nt-week-link { flex: 1 1 auto; justify-content: center; }
    .nt-yp-strip { flex-wrap: wrap; }
    .nt-yp-strip-off { width: 100%; justify-content: center; }
    .nt-ksdt-exam-ed { grid-template-columns: minmax(0, 1fr); }
    .nt-yp-acts .btn-xs { flex: 1 1 auto; }
}
/* /FAZ65:YP-C */
/* FAZ65:A-C (senaryolu yazılı, soru havuzu, deneme) */
/* Tıklanan her öğe kontrol gibi çizilir (zemin + kenarlık + vurgu metni, ≥ 44 px). Renkler yalnız token (A5): zemin
   --surface-* / --fill-*, üstündeki metin --text-* / --on-*, vurgu metni --accent-text; durum metni --warn-text /
   --success-text. Yardımcı sınıflar (nt-yp-lbl / -check / -msg / -badge / -code) YP-C bölümündedir. */
.nt-sy-section, .nt-qb-section { max-width: 1180px; margin: 0 auto; }
.nt-sy-section { max-width: 980px; }
.nt-sy-card, .nt-qb-card { padding: 16px 18px; margin-bottom: 14px; min-width: 0; }
.nt-sy-title { margin: 0 0 4px; font-size: 1.15rem; color: var(--text-primary, #f2f4fa); }
.nt-sy-sub { margin: 0 0 12px; font-size: .88rem; color: var(--text-secondary, #a6adc5); }
.nt-sy-note { margin: 6px 0; font-size: .84rem; color: var(--text-secondary, #a6adc5); }
.nt-sy-warn-text { color: var(--warn-text, #fbbf24); }
.nt-sy-warnline { margin: 6px 0; font-size: .86rem; color: var(--warn-text, #fbbf24); }
.nt-sy-step {
    display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: .98rem; color: var(--text-primary, #f2f4fa);
}
.nt-sy-stepno {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: 999px; font-size: .82rem; font-weight: 800;
    background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff);
}
.nt-sy-ksdt { min-width: 0; }
.nt-sy-picked {
    margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; min-width: 0;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-strong, #79809c);
}
.nt-sy-picked.hidden { display: none; }
.nt-sy-preview-box { margin: 8px 0 0; }
.nt-sy-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nt-sy-pick-title { margin: 0; font-size: .98rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-sy-scens { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.nt-sy-scen {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; min-width: 128px;
    padding: 6px 12px; border-radius: 10px; cursor: pointer; box-sizing: border-box; text-align: left; font: inherit;
    background: var(--surface-1, #151827); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-strong, #79809c);
    transition: transform .08s ease;
}
.nt-sy-scen:hover, .nt-sy-scen:focus-visible { border-color: var(--accent-text, #a5b4fc); }
.nt-sy-scen:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-sy-scen:active { transform: scale(.98); }
.nt-sy-scen.nt-sy-on { background: var(--badge-accent-bg, #1d2142); border-color: var(--accent-color, #6366f1); }
.nt-sy-scen-name { font-weight: 700; font-size: .88rem; color: var(--accent-text, #a5b4fc); }
.nt-sy-scen-n { font-size: .78rem; color: var(--text-secondary, #a6adc5); }
.nt-sy-topic { font-weight: 600; color: var(--text-primary, #f2f4fa); }
.nt-sy-unres td { background: var(--badge-warn-bg, #2e2416); }
.nt-sy-qtype { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.nt-sy-radio {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; cursor: pointer;
    font-size: .9rem; font-weight: 600; box-sizing: border-box;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-strong, #79809c);
}
.nt-sy-radio:has(input:checked) { background: var(--badge-accent-bg, #1d2142); border-color: var(--accent-color, #6366f1); color: var(--accent-text, #a5b4fc); }
.nt-sy-radio input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.nt-sy-opt-lbl { min-width: 170px; }
.nt-sy-opt-lbl.hidden { display: none; }
.nt-sy-source { min-width: 0; }
.nt-sy-details { margin: 10px 0; }
.nt-sy-details > summary {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    font-size: .9rem; font-weight: 700; box-sizing: border-box;
    background: var(--surface-2, #1c2033); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
}
.nt-sy-details[open] > summary { margin-bottom: 10px; }
.nt-sy-header-grid { margin-bottom: 10px; }
.nt-sy-instr-lbl textarea { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; }
.nt-sy-start {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; margin-top: 8px;
    border-radius: 12px; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 800; box-sizing: border-box;
    background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff); border: 1px solid var(--fill-accent, #4f46e5);
    transition: transform .08s ease;
}
.nt-sy-start:active { transform: scale(.98); }
.nt-sy-start:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-sy-start:disabled { cursor: not-allowed; background: var(--surface-3, #252a42); color: var(--text-disabled, #8b91a8); border-color: var(--border-color, #262b40); }

/* --- ilerleme (B4) */
.nt-sy-prog { display: grid; gap: 6px; margin: 10px 0 4px; }
.nt-sy-prog-head, .nt-sy-prog-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .82rem; }
.nt-sy-prog-stage { font-weight: 700; color: var(--text-primary, #f2f4fa); }
.nt-sy-prog-time, .nt-sy-prog-pct, .nt-sy-prog-eta { color: var(--text-secondary, #a6adc5); font-variant-numeric: tabular-nums; }
.nt-sy-bar { height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-3, #252a42); border: 1px solid var(--border-color, #262b40); }
.nt-sy-fill { height: 100%; width: 0; background: var(--accent-color, #6366f1); transition: width .4s; }
.nt-sy-prog-queue { margin: 0; font-size: .82rem; color: var(--warn-text, #fbbf24); }
.nt-sy-prog-queue.hidden { display: none; }

/* --- sonuç kartındaki panel */
.nt-sy-panel {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px; min-width: 0;
    background: var(--surface-1, #151827); border: 1px solid var(--border-strong, #79809c);
}
.nt-sy-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nt-sy-panel-head h4 { margin: 0; margin-right: auto; font-size: .98rem; color: var(--text-primary, #f2f4fa); }
.nt-sy-caption { caption-side: top; text-align: left; padding: 4px 0 6px; font-size: .82rem; color: var(--text-secondary, #a6adc5); }
.nt-sy-plan td, .nt-sy-preview td { vertical-align: top; }
.nt-sy-ptext { color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-sy-short td { background: var(--badge-warn-bg, #2e2416); }
.nt-sy-st-short { font-weight: 700; color: var(--warn-text, #fbbf24); white-space: nowrap; }
.nt-sy-st-ok { font-weight: 700; color: var(--success-text, #4ade80); white-space: nowrap; }
.nt-sy-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border-radius: 10px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 700; text-decoration: none; box-sizing: border-box;
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); border: 1px solid var(--accent-color, #6366f1);
    transition: transform .08s ease;
}
.nt-sy-btn:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-sy-btn:active { transform: scale(.98); }
.nt-sy-btn:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-sy-btn:disabled { cursor: not-allowed; background: var(--surface-3, #252a42); color: var(--text-disabled, #8b91a8); border-color: var(--border-color, #262b40); }
.nt-sy-btn-warn { background: var(--fill-warn, #f59e0b); color: var(--on-warn, #1f1300); border-color: var(--fill-warn, #f59e0b); }
.nt-sy-link { text-decoration: none; }
.nt-sy-items { margin-top: 12px; }
.nt-sy-item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-sy-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border-radius: 10px; min-width: 0;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-sy-item-no { font-weight: 800; color: var(--text-primary, #f2f4fa); font-variant-numeric: tabular-nums; }
.nt-sy-item-text { flex: 1 1 220px; min-width: 0; font-size: .86rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-sy-diff { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nt-sy-diff-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 700; box-sizing: border-box;
    background: var(--surface-1, #151827); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-strong, #79809c);
}
.nt-sy-diff-btn:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-sy-diff-easy.nt-sy-on { background: var(--fill-success, #15803d); color: var(--on-success, #ffffff); border-color: var(--fill-success, #15803d); }
.nt-sy-diff-medium.nt-sy-on { background: var(--fill-warn, #f59e0b); color: var(--on-warn, #1f1300); border-color: var(--fill-warn, #f59e0b); }
.nt-sy-diff-hard.nt-sy-on { background: var(--fill-error, #c81e1e); color: var(--on-error, #ffffff); border-color: var(--fill-error, #c81e1e); }
.nt-sy-diff-src { font-size: .74rem; color: var(--text-secondary, #a6adc5); }
.nt-sy-pts { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-sy-pts input { width: 72px; min-height: 40px; box-sizing: border-box; }
.nt-sy-total { margin: 8px 0 0; font-size: .84rem; color: var(--text-secondary, #a6adc5); }
.nt-sy-total.nt-sy-warn-text { color: var(--warn-text, #fbbf24); }
.nt-sy-save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 12px; }
.nt-sy-save .nt-yp-lbl { flex: 1 1 260px; }
.nt-sy-save.hidden, .nt-sy-after.hidden { display: none; }
.nt-sy-save-btn { margin-top: 0; }
.nt-sy-after { margin-top: 12px; }
.nt-sy-saved { margin: 0 0 8px; font-size: .88rem; color: var(--success-text, #4ade80); }
.nt-sy-saved strong { color: var(--text-primary, #f2f4fa); }
.nt-sy-actrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.nt-sy-fmt { min-width: 96px; }
.nt-sy-wr-note.hidden { display: none; }

/* --- satır eşleme penceresi */
.nt-sy-map-card { max-width: 760px; width: min(760px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto; }
.nt-sy-map-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.nt-sy-map-head h3 { margin: 0; font-size: 1.05rem; color: var(--text-primary, #f2f4fa); }
.nt-sy-map-rows { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.nt-sy-map-row {
    display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px; border-radius: 10px; min-width: 0;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-sy-map-row.nt-sy-on { border-color: var(--accent-color, #6366f1); }
.nt-sy-map-pick {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; flex: 0 0 auto;
    font: inherit; font-size: .86rem; font-weight: 700; box-sizing: border-box;
    background: var(--surface-1, #151827); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
}
.nt-sy-map-row.nt-sy-on .nt-sy-map-pick { background: var(--badge-accent-bg, #1d2142); border-color: var(--accent-color, #6366f1); }
.nt-sy-map-body { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.nt-sy-map-raw { font-size: .8rem; color: var(--warn-text, #fbbf24); }
.nt-sy-map-text { font-size: .86rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-sy-map-picker { margin-bottom: 8px; }
.nt-sy-map-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* --- C3 seçicisinin kaba yerleşen kopyası (window.ntCurKutu) */
.nt-cur-kutu { display: grid; gap: .6rem; min-width: 0; }
.nt-cur-kutu .nt-cur-search {
    width: 100%; margin: 0; padding: .5rem .7rem; min-height: 40px; border-radius: 8px; box-sizing: border-box;
    background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-strong, #79809c);
}
.nt-cur-kutu input[type="checkbox"] { width: auto; margin: .15rem 0 0; padding: 0; flex: 0 0 auto; }

/* --- soru havuzu */
.nt-qb-outcome { margin: 0 0 12px; }
.nt-qb-outcome > summary {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    font-size: .9rem; font-weight: 700; box-sizing: border-box;
    background: var(--surface-2, #1c2033); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
}
.nt-qb-outcome[open] > summary { margin-bottom: 10px; }
.nt-qb-outcome-host { margin-bottom: 8px; }
.nt-qb-count { font-weight: 600; font-size: .82rem; color: var(--text-secondary, #a6adc5); }
.nt-qb-grid { margin-bottom: 4px; }
.nt-qb-grid input[type="search"] { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; }
.nt-qb-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.nt-qb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border-radius: 10px; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; box-sizing: border-box;
    background: var(--surface-2, #1c2033); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
    transition: transform .08s ease;
}
.nt-qb-btn:hover { border-color: var(--accent-text, #a5b4fc); }
.nt-qb-btn:active { transform: scale(.98); }
.nt-qb-btn:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-qb-btn:disabled { cursor: not-allowed; background: var(--surface-3, #252a42); color: var(--text-disabled, #8b91a8); }
.nt-qb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.nt-qb-listcard { min-width: 0; }
.nt-qb-table td { vertical-align: top; }
.nt-qb-incart td { background: var(--badge-accent-bg, #1d2142); }
.nt-qb-add {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 700; white-space: nowrap; box-sizing: border-box;
    background: var(--surface-2, #1c2033); color: var(--accent-text, #a5b4fc); border: 1px solid var(--accent-color, #6366f1);
}
.nt-qb-add.nt-qb-on { background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff); border-color: var(--fill-accent, #4f46e5); }
.nt-qb-add:focus-visible, .nt-qb-open:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }
.nt-qb-q { min-width: 220px; }
.nt-qb-prev { font-size: .86rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-qb-src { margin-top: 4px; font-size: .78rem; color: var(--text-secondary, #a6adc5); }
.nt-qb-open {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 700; box-sizing: border-box;
    background: var(--surface-2, #1c2033); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
}
.nt-qb-mute { color: var(--text-secondary, #a6adc5); }
.nt-qb-meas { font-weight: 700; color: var(--text-primary, #f2f4fa); white-space: nowrap; }
.nt-qb-few { color: var(--warn-text, #fbbf24); white-space: nowrap; }
.nt-qb-diff { min-height: 40px; min-width: 96px; }
.nt-qb-cart { position: sticky; top: 72px; display: grid; gap: 10px; }
.nt-qb-cart-title { margin: 0; font-size: 1rem; color: var(--text-primary, #f2f4fa); }
.nt-qb-cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.nt-qb-cart-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 8px; border-radius: 10px;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-qb-cart-item.nt-qb-bad { border-color: var(--fill-warn, #f59e0b); background: var(--badge-warn-bg, #2e2416); }
.nt-qb-ci-text { grid-column: 1; font-size: .84rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-qb-ci-src { grid-column: 1; font-size: .76rem; color: var(--text-secondary, #a6adc5); }
.nt-qb-ci-acts { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 4px; }
.nt-qb-ci-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
    font: inherit; box-sizing: border-box;
    background: var(--surface-1, #151827); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
}
.nt-qb-ci-btn:disabled { cursor: not-allowed; color: var(--text-disabled, #8b91a8); border-color: var(--border-color, #262b40); }
.nt-qb-ci-del { color: var(--error-text, #fca5a5); }
.nt-qb-empty { font-size: .84rem; color: var(--text-secondary, #a6adc5); }
.nt-qb-cart-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-qb-create { margin-top: 0; flex: 1 1 auto; }

@media (max-width: 1024px) {
    .nt-qb-layout { grid-template-columns: minmax(0, 1fr); }
    .nt-qb-cart { position: static; }
}
@media (max-width: 760px) {
    .nt-sy-card, .nt-qb-card { padding: 12px; }
    .nt-sy-start, .nt-sy-btn, .nt-qb-btn, .nt-sy-radio { width: 100%; }
    .nt-sy-scen { flex: 1 1 140px; }
    .nt-sy-actrow > *, .nt-sy-save > * { flex: 1 1 100%; }
    .nt-sy-map-acts > * { flex: 1 1 100%; }
    .nt-qb-cart-acts > * { flex: 1 1 100%; }
}
/* /FAZ65:A-C */
/* FAZ65:B-C (çıktı karnesi, Karnem, telafi) */
/* Isı haritasının hücresi bir DÜĞMEdir (zemin + kenarlık + glif). Bant rengi tek başına anlam taşımaz: ✓ ~ ! · —
   glifi + metinli lejant + aria-label. Renkler yalnız token (A5): bantlar --badge-{success,warn,error}-{bg,fg},
   az kanıt nötr zemin + KESİK kenarlık, metin --*-text; vurgu zemini --badge-accent-bg + --accent-text. */
.nt-oc-sec {
    margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; min-width: 0;
    background: var(--surface-1, #151827); border: 1px solid var(--border-color, #262b40);
}
.nt-oc-sec.hidden { display: none; }
.nt-oc-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.nt-oc-sec-head h3 { margin: 0; margin-right: auto; font-size: 1.02rem; color: var(--text-primary, #f2f4fa); }
.nt-oc-sec-head h3 i { color: var(--accent-text, #a5b4fc); }
.nt-oc-sec-head .local-test-btn.nt-oc-test { width: auto; margin: 0; min-height: 36px; padding: 0 12px; }
.nt-oc-hint { margin: 0 0 10px; font-size: .85rem; color: var(--text-secondary, #a6adc5); }
.nt-oc-filters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px 14px;
    align-items: end; margin: 0 0 10px;
}
.nt-oc-filters.hidden { display: none; }
.nt-oc-lbl { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .82rem; font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-oc-lbl select, .nt-oc-lbl input, .nt-oc-lbl textarea { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; }
.nt-oc-lbl-wide { grid-column: 1 / -1; }
.nt-oc-check {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .88rem; cursor: pointer;
    color: var(--text-primary, #f2f4fa);
}
.nt-oc-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.nt-oc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; margin: 0 0 10px; }
.nt-oc-date { min-height: 40px; margin: 0 0 10px; box-sizing: border-box; max-width: 100%; }
.nt-oc-date.hidden { display: none; }

/* --- düğmeler (ikincil: tonlu zemin + kenarlık + vurgu metni; ≥ 44 px) */
.nt-oc-btn, .nt-oc-rem-btn, .nt-oc-more-btn, .nt-oc-study, .nt-oc-chipbtn, .nt-oc-linkbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px;
    box-sizing: border-box; border-radius: 10px; cursor: pointer; text-decoration: none; font: inherit; font-size: .86rem;
    font-weight: 700; white-space: nowrap; text-transform: none; letter-spacing: normal;
    background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); border: 1px solid var(--border-strong, #79809c);
    transition: transform .08s ease, border-color .12s ease;
}
.nt-oc-btn:hover, .nt-oc-rem-btn:hover, .nt-oc-more-btn:hover, .nt-oc-study:hover, .nt-oc-chipbtn:hover, .nt-oc-linkbtn:hover,
.nt-oc-btn:focus-visible, .nt-oc-rem-btn:focus-visible, .nt-oc-more-btn:focus-visible, .nt-oc-study:focus-visible,
.nt-oc-chipbtn:focus-visible, .nt-oc-linkbtn:focus-visible { border-color: var(--accent-text, #a5b4fc); }
.nt-oc-btn:active, .nt-oc-rem-btn:active, .nt-oc-study:active, .nt-oc-chipbtn:active, .nt-oc-linkbtn:active { transform: scale(.985); }
.nt-oc-btn:disabled, .nt-oc-study:disabled, .nt-oc-rem-btn:disabled {
    cursor: not-allowed; transform: none; background: var(--surface-2, #1c2033); color: var(--text-disabled, #6f7691);
    border-color: var(--border-color, #262b40);
}
.nt-oc-btn-sm { min-height: 36px; padding: 0 10px; font-size: .8rem; }
.nt-oc-linkbtn { justify-content: flex-start; white-space: normal; text-align: left; overflow-wrap: anywhere; }
/* Birincil eylem: yalnız "desteklenmeli" satırında dolu vurgu (ekranda her satırda dolu düğme olmasın) */
.nt-oc-row-lo .nt-oc-study { background: var(--fill-accent, #4f46e5); color: var(--on-accent, #ffffff); border-color: var(--fill-accent, #4f46e5); }
.nt-oc-row-lo .nt-oc-study:disabled { background: var(--surface-2, #1c2033); color: var(--text-disabled, #6f7691); border-color: var(--border-color, #262b40); }
.nt-oc-close { flex: 0 0 auto; }

/* --- durum satırları (A5: anlamına göre renk; sınıf her yazımda sıfırlanır) */
.nt-oc-msg { margin: 6px 0; min-height: 1.1em; font-size: .86rem; color: var(--text-secondary, #a6adc5); }
.nt-oc-msg:empty { margin: 0; min-height: 0; }
.nt-oc-msg-err { color: var(--error-text, #fca5a5); }
.nt-oc-msg-warn { color: var(--warn-text, #fbbf24); }
.nt-oc-msg-ok { color: var(--success-text, #4ade80); }
.nt-oc-note { margin: 0 0 10px; font-size: .84rem; color: var(--warn-text, #fbbf24); }
.nt-oc-plain { margin: 0 0 8px; font-size: .86rem; color: var(--text-secondary, #a6adc5); }
.nt-oc-muted { font-size: .8rem; color: var(--text-secondary, #a6adc5); }
.nt-oc-empty {
    padding: 14px; border-radius: 12px; display: grid; gap: 6px;
    background: var(--surface-2, #1c2033); border: 1px dashed var(--border-strong, #79809c); color: var(--text-primary, #f2f4fa);
}
.nt-oc-empty p { margin: 0; }
.nt-oc-tag {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap;
    background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db);
}
.nt-oc-code {
    display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: .8rem; font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums; background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
}
.nt-oc-otitle { display: block; margin-top: 4px; font-size: .84rem; color: var(--text-primary, #f2f4fa); white-space: normal; overflow-wrap: anywhere; max-width: 40rem; }
.nt-oc-link { color: var(--accent-text, #a5b4fc); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.nt-oc-link:focus-visible { outline: 3px solid var(--accent-text, #a5b4fc); outline-offset: 2px; }

/* --- bant çipleri ve hücreleri */
.nt-oc-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .78rem;
    font-weight: 800; white-space: nowrap; border: 1px solid transparent; font-variant-numeric: tabular-nums;
}
.nt-oc-b-hi { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); border-color: var(--badge-success-fg, #4ade80); }
.nt-oc-b-mid { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); border-color: var(--badge-warn-fg, #fbbf24); }
.nt-oc-b-lo { background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); border-color: var(--badge-error-fg, #fca5a5); }
.nt-oc-b-few { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); border: 1px dashed var(--border-strong, #79809c); }
.nt-oc-b-none { background: var(--surface-1, #151827); color: var(--text-secondary, #a6adc5); border: 1px solid var(--border-color, #262b40); }
.nt-oc-none { color: var(--text-secondary, #a6adc5); font-weight: 700; }
.nt-oc-cell {
    display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 52px; min-height: 36px;
    padding: 0 6px; box-sizing: border-box; border-radius: 8px; font: inherit; font-size: .82rem; font-weight: 800;
    font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .08s ease;
}
span.nt-oc-cell { cursor: default; }
button.nt-oc-cell:hover, button.nt-oc-cell:focus-visible { outline: 2px solid var(--accent-text, #a5b4fc); outline-offset: 1px; }
button.nt-oc-cell:active { transform: scale(.96); }
.nt-oc-glyph { font-weight: 900; }
.nt-oc-sample { min-width: 28px; min-height: 26px; padding: 0 4px; }
.nt-oc-sub { display: block; margin-top: 3px; font-size: .76rem; color: var(--text-secondary, #a6adc5); white-space: nowrap; }

/* --- sınıf karnesi başlığı, araçlar ("⋯" ≤ 760), lejant, kapsama */
.nt-oc-cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 10px; }
.nt-oc-meta { margin: 0; margin-right: auto; font-size: .9rem; color: var(--text-secondary, #a6adc5); }
.nt-oc-meta strong { color: var(--text-primary, #f2f4fa); }
.nt-oc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.nt-oc-export { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-oc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--text-primary, #f2f4fa); }
.nt-oc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.nt-oc-more-btn { display: none; }
.nt-oc-cov { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: .86rem; }
.nt-oc-cov-ok { background: var(--surface-2, #1c2033); color: var(--text-secondary, #a6adc5); border: 1px solid var(--border-color, #262b40); }
.nt-oc-cov-warn { background: var(--badge-warn-bg, #2e2416); color: var(--text-primary, #f2f4fa); border: 1px solid var(--border-strong, #79809c); }
.nt-oc-cov-warn p { margin: 0 0 8px; }
.nt-oc-cov-warn .fa-triangle-exclamation { color: var(--badge-warn-fg, #fbbf24); }
.nt-oc-cov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-oc-cov-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nt-oc-cov-t { font-weight: 700; overflow-wrap: anywhere; }
.nt-oc-pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; margin-top: .7rem;
    font-size: .85rem; color: var(--text-secondary, #a6adc5); font-variant-numeric: tabular-nums;
}
.nt-oc-pager:empty { display: none; }
.nt-oc-h4 { margin: 16px 0 8px; font-size: .95rem; color: var(--text-primary, #f2f4fa); }

/* --- ısı haritası: "#" + öğrenci sütunu HER genişlikte yapışkan (≤ 60 çıktı sütunu yatay kayar) */
.nt-oc-heat { font-variant-numeric: tabular-nums; }
.nt-oc-heat th, .nt-oc-heat td { padding: 6px 8px; }
.nt-oc-heat td.nt-oc-c { padding: 4px; text-align: center; }
.nt-oc-heat .nt-oc-th-n, .nt-oc-heat .nt-oc-td-n {
    position: sticky; left: 0; z-index: 2; width: 3.2rem; min-width: 3.2rem; max-width: 3.2rem; box-sizing: border-box;
}
.nt-oc-heat .nt-oc-th-name, .nt-oc-heat .nt-oc-td-name {
    position: sticky; left: 3.2rem; z-index: 2; min-width: 9rem; max-width: 15rem; box-sizing: border-box; text-align: left;
}
.nt-oc-heat thead .nt-oc-th-n, .nt-oc-heat thead .nt-oc-th-name { z-index: 3; background: var(--surface-2, #1c2033); }
.nt-oc-heat tbody .nt-oc-td-n { background: var(--surface-1, #151827); color: var(--text-secondary, #a6adc5); }
.nt-oc-heat tbody th.nt-oc-td-name {
    background: var(--surface-1, #151827); color: var(--text-primary, #f2f4fa); text-transform: none; letter-spacing: normal;
    font-size: .86rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid var(--border-subtle, #1e2233);
}
.nt-oc-heat .nt-oc-td-weak, .nt-oc-heat .nt-oc-td-no { text-align: center; }
.nt-oc-th-oc { text-align: center; vertical-align: bottom; min-width: 6.4rem; }
.nt-oc-colcode { display: block; font-size: .78rem; font-weight: 800; color: var(--text-primary, #f2f4fa); text-transform: none; letter-spacing: normal; }
.nt-oc-colmean { display: block; margin: 2px 0 4px; font-size: .72rem; font-weight: 600; color: var(--text-secondary, #a6adc5); text-transform: none; letter-spacing: normal; }
.nt-oc-rem-btn { min-height: 32px; padding: 0 8px; font-size: .74rem; }
/* Isı haritasında bant adı yalnız ekran okuyucuya (sütun dar kalsın); özet / okul tablosunda görünür. */
.nt-oc-heat .nt-oc-chip-t {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nt-oc-outsum td, .nt-oc-ev td, .nt-oc-school td { vertical-align: top; }

/* --- pencereler */
.nt-oc-modal { max-width: min(760px, 96vw); width: 96%; max-height: 90vh; display: flex; flex-direction: column; }
.nt-oc-modal-wide { max-width: min(1000px, 96vw); }
.nt-oc-mhead { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.nt-oc-mhead h3 { margin: 0; }
.nt-oc-mhead h3 i { color: var(--accent-text, #a5b4fc); }
.nt-oc-msub { margin: 0 0 8px; font-size: .88rem; color: var(--text-secondary, #a6adc5); }
.nt-oc-msub:empty { display: none; }
.nt-oc-mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: .25rem; }
.nt-oc-fs {
    margin: 0; padding: 10px 12px 12px; border-radius: 12px; min-width: 0;
    background: var(--surface-1, #151827); border: 1px solid var(--border-color, #262b40);
}
.nt-oc-fs legend { padding: 0 4px; font-weight: 700; color: var(--text-primary, #f2f4fa); }
.nt-oc-fs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.nt-oc-stu-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.nt-oc-stu {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 6px 10px; box-sizing: border-box;
    border-radius: 10px; cursor: pointer; background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-color, #262b40);
}
.nt-oc-stu input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.nt-oc-stu-name { font-weight: 700; overflow-wrap: anywhere; }
.nt-oc-prev > summary {
    display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; font-size: .84rem; font-weight: 700;
    color: var(--accent-text, #a5b4fc);
}
.nt-oc-prev.hidden { display: none; }
.nt-oc-prev-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; color: var(--text-primary, #f2f4fa); }
.nt-oc-prev-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.nt-oc-prog {
    height: 10px; margin: 4px 0; border-radius: 999px; overflow: hidden;
    background: var(--surface-3, #252a42); border: 1px solid var(--border-color, #262b40);
}
.nt-oc-prog.hidden { display: none; }
.nt-oc-prog-fill { height: 100%; width: 0; background: var(--fill-accent, #4f46e5); transition: width .4s ease; }
.nt-oc-preview:empty { display: none; }
.nt-oc-preview { min-width: 0; }
/* Önizleme yalnız göz denetimi: kartın kaydet / düzenle / sil düğmeleri bu pencerede yok (kayıt pencerenin işi). */
.nt-oc-preview .result-item-actions { display: none; }

/* --- öğrenci "Karnem" */
.nt-oc-me { display: grid; gap: 12px; min-width: 0; }
.nt-oc-me-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }
.nt-oc-me-sum li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-color, #262b40); }
.nt-oc-sum-hi { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-oc-sum-mid { background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24); }
.nt-oc-sum-lo { background: var(--badge-error-bg, #2e1a20); color: var(--badge-error-fg, #fca5a5); }
.nt-oc-sum-few { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }
.nt-oc-sum-n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nt-oc-sum-l { font-size: .84rem; font-weight: 700; }
.nt-oc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-oc-chipbtn { background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa); }
.nt-oc-chipbtn[aria-pressed="true"] { background: var(--badge-accent-bg, #1d2142); color: var(--accent-text, #a5b4fc); border-color: var(--accent-color, #6366f1); }
.nt-oc-subj { min-width: 0; }
.nt-oc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nt-oc-row {
    display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; min-width: 0;
    background: var(--surface-1, #151827); border: 1px solid var(--border-color, #262b40);
}
.nt-oc-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nt-oc-row-title { font-size: .9rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-oc-bar { height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3, #252a42); border: 1px solid var(--border-color, #262b40); }
.nt-oc-bar-fill { display: block; height: 100%; }
.nt-oc-fill-hi { background: var(--fill-success, #15803d); }
.nt-oc-fill-mid { background: var(--fill-warn, #f59e0b); }
.nt-oc-fill-lo { background: var(--fill-error, #c81e1e); }
.nt-oc-fill-few { background: var(--text-secondary, #a6adc5); }
.nt-oc-row-meta { margin: 0; font-size: .84rem; color: var(--text-secondary, #a6adc5); overflow-wrap: anywhere; }
.nt-oc-bt-hi { color: var(--success-text, #4ade80); }
.nt-oc-bt-mid { color: var(--warn-text, #fbbf24); }
.nt-oc-bt-lo { color: var(--error-text, #fca5a5); }
.nt-oc-bt-few { color: var(--text-primary, #f2f4fa); }
.nt-oc-row-acts { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
    .nt-oc-btn, .nt-oc-rem-btn, .nt-oc-study, .nt-oc-chipbtn, .nt-oc-linkbtn, .nt-oc-cell, .nt-oc-prog-fill { transition: none; }
}
/* Dokunmatik: küçük varyantlar da ≥ 44 px (genel `:where(button)` kuralı SIFIR özgüllük — sınıf değerimiz onu ezer) */
@media (pointer: coarse) {
    .nt-oc-btn-sm, .nt-oc-rem-btn, .nt-oc-cell, .nt-oc-close, .nt-oc-prev > summary,
    .nt-oc-sec-head .local-test-btn.nt-oc-test { min-height: 44px; }
    .nt-oc-rem-btn, .nt-oc-close { min-width: 44px; }
    span.nt-oc-cell.nt-oc-sample { min-height: 26px; }
}
@media (max-width: 760px) {
    .nt-oc-sec { padding: 12px 10px; }
    .nt-oc-filters { grid-template-columns: minmax(0, 1fr); }
    .nt-oc-filters .nt-oc-btn { width: 100%; }
    .nt-oc-more-btn { display: inline-flex; }
    .nt-oc-tools { display: none; width: 100%; flex-direction: column; align-items: stretch; }
    .nt-oc-tools.nt-oc-open { display: flex; }
    .nt-oc-export a { flex: 1 1 auto; }
    .nt-oc-legend { flex-direction: column; }
    .nt-oc-heat .nt-oc-th-name, .nt-oc-heat .nt-oc-td-name { min-width: 7rem; max-width: 9rem; }
    .nt-oc-row-acts > button { flex: 1 1 auto; }
    .nt-oc-sub { white-space: normal; }
    .nt-oc-mbody { padding-right: 0; }
}
/* /FAZ65:B-C */
/* FAZ65:P (bireysel alan) */
/* /FAZ65:P */

/* =====================================================================
   FAZ 62 (iş 20) — İLKOKUL / ORTAOKUL ÖĞRENCİ TEMASI: `body.nt-kid`
   ---------------------------------------------------------------------
   KİMDE: okul tipi ilkokul / ortaokul (ya da tema "her zaman açık") olan okulda
   ÖĞRENCİ ve MİSAFİR (`services/school_level.kid_body`). Öğretmen, yönetici,
   süper admin, veli ve giriş sayfası DEĞİŞMEZ. Öğrenci kapatamaz (okul ayarı).

   ⚠ NEDEN DOSYANIN SONUNDA VE NEDEN BU BİÇİMDE:
     • Token'lar `<body>`'de: `:root`'taki TAKMA ADLAR (`--card-bg:
       var(--surface-1)` …) `<html>`'de ÇÖZÜLÜP body'ye çözülmüş değer olarak
       miras kalır — body'de `--surface-1`'i değiştirmek `--card-bg`'yi
       DEĞİŞTİRMEZ. Bu yüzden iki blokta da ham token'larla BİRLİKTE bütün
       takma adlar yeniden tanımlanır. `tools/check_contrast.py` bunu modeller
       ve eksik takma adı "ESKİ TAKMA AD" olarak HATA sayar (öz-test: --self-test).
     • Okulun renk geçersiz kılmaları (`color.*` → `<html>` satır içi) çocuk
       temasında EZİLİR: token'lar body'de tanımlı olduğu için onlar kazanır.
     • Token'lar boyut/yarıçap taşımıyor (`--fs-body` kullanılmıyor, yarıçaplar
       `--r-*` sabit): büyük yazı ve yuvarlak hat aşağıdaki BİLEŞEN kurallarıyla.
     • Bileşen seçicileri `body.nt-kid …` ile başlar ve dosyanın SONUNDADIR:
       test_ui_hooks'un "ilk eşleşen blok" okumaları özgün kuralı bulmaya devam eder.
     • Yeni yazı tipi YOK (kapalı ağ): mevcut aileler daha büyük boyutta.
   ===================================================================== */
body.nt-kid {
    /* ---------- 1. TABAN YÜZEYLER — "gece gökyüzü" (koyu) ---------- */
    --bg-color:        #120e2b;
    --surface-1:       #1b1640;
    --surface-2:       #241d52;
    --surface-3:       #2f2766;
    --bg-dark:         #161236;
    --modal-bg:        #1d1844;
    --dropdown-bg:     #1d1844;
    /* takma adlar (html'de çözülmüş kök değeri miras kalmasın) */
    --card-bg:         var(--surface-1);
    --input-bg:        var(--surface-2);
    --bg-secondary:    var(--surface-2);

    /* ---------- 2. METİN ---------- */
    --text-primary:    #fff9f0;
    --text-secondary:  #d2c8f5;
    --text-muted:      #b3a8e0;
    --text-disabled:   #8379b4;

    /* ---------- 3. ANLAMSAL METİN ---------- */
    --success-text:    #6ff0a6;
    --warn-text:       #ffd34d;
    --error-text:      #ffa3b5;
    --info-text:       #8fd3ff;
    --accent-text:     #d0bcff;

    /* ---------- 4. ACCENT (zemin / kenarlık / ikon — METİN DEĞİL) ---------- */
    --accent-color:    #9b6bff;
    --accent-rgb:      155, 107, 255;
    --accent-primary:  var(--accent-text);
    --accent-glow:     rgba(155, 107, 255, .40);
    --accent-soft:     rgba(155, 107, 255, .20);

    /* ---------- 5. DOLGU + ÜSTÜNDEKİ METİN ---------- */
    --fill-accent:     #7c3aed;  --on-accent:  #ffffff;
    --fill-prompt:     #a21caf;  --on-prompt:  #ffffff;

    /* ---------- 6. ROZET ÇİFTLERİ (opak) ---------- */
    --badge-success-bg: #0f3326;  --badge-success-fg: #6ff0a6;
    --badge-warn-bg:    #3a2a0c;  --badge-warn-fg:    #ffd34d;
    --badge-error-bg:   #3b1626;  --badge-error-fg:   #ffa3b5;
    --badge-info-bg:    #10294a;  --badge-info-fg:    #8fd3ff;
    --badge-accent-bg:  #2a1f5c;  --badge-accent-fg:  #d0bcff;
    --badge-neutral-bg: #2a2550;  --badge-neutral-fg: #e2dcf7;

    /* ---------- 7. KENARLIK ---------- */
    --border-color:    #3a3170;
    --border-strong:   #8f84c9;
    --border-subtle:   #2a2358;

    /* ---------- 8. GRADIENT ---------- */
    --gradient-1:            linear-gradient(120deg, #7c3aed 0%, #c026d3 100%);
    --card-gradient-neutral: linear-gradient(145deg, #241d52 0%, #1b1640 100%);
    --card-gradient-success: linear-gradient(145deg, #0f3326 0%, #0c261d 100%);
    --gradient-brand-mark:   linear-gradient(135deg, #a855f7, #ec4899);
    --gradient-hero-dark:    linear-gradient(140deg, #2e1065, #831843);

    /* ---------- 10. MODÜL GRUP RENKLERİ ---------- */
    --grp-uret-ico:    #2e2266;  --grp-uret-fg:    #d0bcff;
    --grp-medya-ico:   #3a1a4f;  --grp-medya-fg:   #ffbde2;
    --grp-arac-ico:    #0f3a3a;  --grp-arac-fg:    #86f2c8;

    --topbar-rgb: 18, 14, 43;
    /* dosya tipi rozetleri — anlamsal metin takma adları (yeniden tanım ZORUNLU) */
    --ft-pdf: var(--error-text);  --ft-doc: var(--info-text);
    --ft-ppt: var(--warn-text);   --ft-txt: var(--text-secondary);
    --dropdown-text:   #fff9f0;
    --shadow-card:  0 5px 0 rgba(0, 0, 0, .28), 0 14px 30px rgba(0, 0, 0, .30);
    --shadow-hover: 0 8px 24px rgba(155, 107, 255, .30);

    /* ---------- ÇOCUK KATMANINA ÖZGÜ: altı şeker rengi (zemin / üstündeki metin) ---------- */
    --kid-c1-bg: #3a2a7a;  --kid-c1-fg: #e0d4ff;   /* üzüm */
    --kid-c2-bg: #123d6a;  --kid-c2-fg: #a8dcff;   /* gökyüzü */
    --kid-c3-bg: #0f4a3a;  --kid-c3-fg: #86f2c8;   /* nane */
    --kid-c4-bg: #4a3a0a;  --kid-c4-fg: #ffdd66;   /* güneş */
    --kid-c5-bg: #5a1a45;  --kid-c5-fg: #ffbde2;   /* sakız */
    --kid-c6-bg: #5a2a10;  --kid-c6-fg: #ffc596;   /* mandalina */
    --kid-halo:  #2f2766;                           /* maskot arka dairesi */
}

[data-theme="light"] body.nt-kid {
    /* ---------- 1. TABAN YÜZEYLER — "güneşli sabah" (açık) ---------- */
    --bg-color:        #fff6e5;
    --surface-1:       #ffffff;
    --surface-2:       #fff8ea;
    --surface-3:       #ffedcc;
    --bg-dark:         #ffffff;   /* açık temada --bg-dark AÇIK yüzeydir (kök kuralı) */
    --modal-bg:        #ffffff;
    --dropdown-bg:     #ffffff;
    --card-bg:         var(--surface-1);
    --input-bg:        var(--surface-2);
    --bg-secondary:    var(--surface-2);

    --text-primary:    #2a1b4d;
    --text-secondary:  #5a4a7e;
    --text-muted:      #665689;
    --text-disabled:   #9a8fb5;

    --success-text:    #0b7a3e;
    --warn-text:       #9a4600;
    --error-text:      #c0182c;
    --info-text:       #0b5fb5;
    --accent-text:     #6420c9;

    --accent-color:    #7c3aed;
    --accent-rgb:      124, 58, 237;
    --accent-primary:  var(--accent-text);
    --accent-glow:     rgba(124, 58, 237, .25);
    --accent-soft:     #f1e8ff;

    --fill-accent:     #7c3aed;  --on-accent:  #ffffff;
    --fill-prompt:     #a21caf;  --on-prompt:  #ffffff;

    --badge-success-bg: #e6f9ee;  --badge-success-fg: #0b7a3e;
    --badge-warn-bg:    #fff1d6;  --badge-warn-fg:    #8f4100;
    --badge-error-bg:   #ffe8ec;  --badge-error-fg:   #b8152a;
    --badge-info-bg:    #e5f1ff;  --badge-info-fg:    #0b5aa8;
    --badge-accent-bg:  #f1e8ff;  --badge-accent-fg:  #6420c9;
    --badge-neutral-bg: #f3efe6;  --badge-neutral-fg: #4a3f63;

    --border-color:    #f2dfbd;
    --border-strong:   #8a7550;
    --border-subtle:   #f7ead3;

    --gradient-1:            linear-gradient(120deg, #7c3aed 0%, #c026d3 100%);
    --card-gradient-neutral: linear-gradient(145deg, #ffffff 0%, #fff6e5 100%);
    --card-gradient-success: linear-gradient(145deg, #e6f9ee 0%, #d4f4e1 100%);
    --gradient-brand-mark:   linear-gradient(135deg, #a855f7, #ec4899);
    --gradient-hero-dark:    linear-gradient(140deg, #2e1065, #831843);

    --grp-uret-ico:    #f1e8ff;  --grp-uret-fg:    #6d28d9;
    --grp-medya-ico:   #ffe4f1;  --grp-medya-fg:   #a8134f;
    --grp-arac-ico:    #dcf7ec;  --grp-arac-fg:    #08643f;

    --topbar-rgb: 255, 246, 229;
    --ft-pdf: var(--error-text);  --ft-doc: var(--info-text);
    --ft-ppt: var(--warn-text);   --ft-txt: var(--text-secondary);
    --dropdown-text:   #2a1b4d;
    --shadow-card:  0 5px 0 rgba(242, 200, 140, .55), 0 12px 26px rgba(42, 27, 77, .08);
    --shadow-pop:   0 14px 40px rgba(42, 27, 77, .16);
    --shadow-hover: 0 8px 24px rgba(124, 58, 237, .18);
    --shadow-color: rgba(42, 27, 77, .12);

    --kid-c1-bg: #efe6ff;  --kid-c1-fg: #5b21b6;
    --kid-c2-bg: #e0f0ff;  --kid-c2-fg: #0b5aa8;
    --kid-c3-bg: #dcf7ec;  --kid-c3-fg: #08643f;
    --kid-c4-bg: #fff0c2;  --kid-c4-fg: #874200;
    --kid-c5-bg: #ffe4f1;  --kid-c5-fg: #a8134f;
    --kid-c6-bg: #ffe8d6;  --kid-c6-fg: #9c3a00;
    --kid-halo:  #fff0c2;
}

/* ---------- Zemin: hafif "konfeti noktaları" + şeker renkli bulutlar ---------- */
body.nt-kid {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(var(--accent-rgb, 155, 107, 255), .10) 0 3px, transparent 4px),
        radial-gradient(circle at 78% 42%, rgba(236, 72, 153, .10) 0 3px, transparent 4px),
        radial-gradient(circle at 34% 76%, rgba(14, 165, 233, .10) 0 3px, transparent 4px);
    background-size: 160px 160px, 200px 200px, 240px 240px;
}
body.nt-kid .glob-2 { background: #ec4899; }

/* ---------- Maskot: yalnız çocuk temasında görünür ---------- */
.nt-kid-mascot { display: none; }
body.nt-kid .nt-kid-mascot {
    display: block; flex: 0 0 auto; width: 96px; height: 96px;
    /* Hale `radial-gradient` ile: `border-radius` + zemin görseli KIRPARDI (el sallama çizgileri,
       düşünce balonu, "z z" ve yıldızlar daire dışına taşıyor — çıkartma gibi dursun). */
    background: radial-gradient(circle closest-side, var(--kid-halo, #2f2766) 0 92%, transparent 93%);
    animation: ntKidBob 3.2s ease-in-out infinite;
}
.nt-kid-mascot-img { display: block; }
@keyframes ntKidBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- Karşılama: maskotlu konuşma balonu ---------- */
body.nt-kid .nt-greeting {
    align-items: center; justify-content: flex-start; gap: 18px;
    background: var(--surface-1, #1b1640);
    border: 3px solid var(--border-color, #3a3170);
    border-radius: 28px; padding: 14px 20px;
    box-shadow: var(--shadow-card, 0 10px 30px rgba(0, 0, 0, .28));
}
body.nt-kid .nt-greet-text { flex: 1 1 220px; min-width: 0; }
@media (max-width: 760px) {
    /* Telefonda maskot küçülür ve metnin YANINDA kalır (kendi satırına düşüp kartı uzatmasın). */
    body.nt-kid .nt-greeting { gap: 12px; padding: 12px 14px; }
    body.nt-kid .nt-kid-mascot { width: 64px; height: 64px; }
    body.nt-kid .nt-greet-text { flex-basis: 150px; }
    body.nt-kid .nt-due-chip { margin-left: 0; }
    /* KPI kutuları ikişerli (dört kutu alt alta ekranı dolduruyordu) */
    body.nt-kid .nt-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.nt-kid .nt-kpi { min-height: 84px; padding: 12px 14px; }
    body.nt-kid .nt-kpi-val { font-size: 28px; }
}
body.nt-kid .nt-greet-title { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; letter-spacing: 0; }
body.nt-kid .nt-greet-sub { font-size: 16px; margin-top: 6px; }
body.nt-kid .nt-due-chip {
    margin-left: auto; min-height: 48px; border-radius: 999px; font-size: 15px; font-weight: 800;
    background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66);
    border: 2px solid var(--kid-c4-fg, #ffdd66);
}

/* ---------- KPI şeridi: dört şeker rengi kutu (metin kutunun renginden miras) ---------- */
body.nt-kid .nt-kpi { border: 0; border-radius: 24px; padding: 16px 18px; min-height: 96px; justify-content: center; }
body.nt-kid .nt-kpi-val { font-size: 32px; color: inherit; }
body.nt-kid .nt-kpi-lbl { font-size: 13px; letter-spacing: .02em; text-transform: none; color: inherit; }
body.nt-kid .nt-kpi:nth-child(1) { background: var(--kid-c2-bg, #123d6a); color: var(--kid-c2-fg, #a8dcff); }
body.nt-kid .nt-kpi:nth-child(2) { background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66); }
body.nt-kid .nt-kpi:nth-child(3) { background: var(--kid-c5-bg, #5a1a45); color: var(--kid-c5-fg, #ffbde2); }
body.nt-kid .nt-kpi:nth-child(4) { background: var(--kid-c6-bg, #5a2a10); color: var(--kid-c6-fg, #ffc596); }

/* ---------- Kartlar ve düğmeler: yuvarlak hat, büyük dokunma hedefi (≥ 48 px) ---------- */
body.nt-kid .card { border-radius: 26px; }
/* Yalnız içerik alanında (`main`): üst şeridin ikon düğmeleri büyütülmez — dar ekranda şerit taşardı. */
body.nt-kid main .btn-primary,
body.nt-kid main .btn-secondary { min-height: 48px; border-radius: 999px; font-size: 15px; font-weight: 800; padding-left: 18px; padding-right: 18px; }
body.nt-kid .nt-recent-row { min-height: 56px; }
body.nt-kid .nt-recent-name { font-size: 15.5px; }

/* ---------- "Bugün" kartı ---------- */
body.nt-kid .nt-today-card { border: 3px solid var(--kid-c4-bg, #4a3a0a); }
body.nt-kid .nt-today-card h2 { font-size: 22px; }
body.nt-kid .nt-today-card h2 .fa-sun { color: var(--kid-c4-fg, #ffdd66); }
body.nt-kid .nt-today-list { gap: 10px; }
body.nt-kid .nt-today-row { min-height: 60px; padding: 12px 16px; border-radius: 20px; font-size: 16px; }
body.nt-kid .nt-today-ico { width: 24px; font-size: 20px; }
body.nt-kid .nt-today-sub { font-size: 14px; }
body.nt-kid .nt-today-go {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
    background: var(--fill-accent, #7c3aed); color: var(--on-accent, #ffffff); font-weight: 800;
}

/* ---------- Modül kartları: canlı renkli ikon kutusu + "çıkartma" gölgesi ---------- */
body.nt-kid .module-card { border-radius: 26px; border-width: 3px; }
body.nt-kid .module-card .icon-box { width: 64px; height: 64px; border-radius: 22px; font-size: 1.65rem; }
body.nt-kid .module-card h3 { font-size: 18px; font-weight: 800; }
body.nt-kid .module-card p { font-size: 14.5px; line-height: 1.45; }
body.nt-kid .module-card:hover { transform: translateY(-4px) rotate(-.5deg); }
body.nt-kid .module-card[data-type="flashcards"] .icon-box,
body.nt-kid .module-card[data-type="open_ended_exam"] .icon-box,
body.nt-kid .module-card[data-type="teacher_docs"] .icon-box { background: var(--kid-c1-bg, #3a2a7a); color: var(--kid-c1-fg, #e0d4ff); }
body.nt-kid .module-card[data-type="qa"] .icon-box,
body.nt-kid .module-card[data-type="video_search"] .icon-box,
body.nt-kid .module-card[data-type="exam_scan_omr"] .icon-box { background: var(--kid-c2-bg, #123d6a); color: var(--kid-c2-fg, #a8dcff); }
body.nt-kid .module-card[data-type="interactive_chat"] .icon-box,
body.nt-kid .module-card[data-type="notes"] .icon-box,
body.nt-kid .module-card[data-type="dictation"] .icon-box { background: var(--kid-c3-bg, #0f4a3a); color: var(--kid-c3-fg, #86f2c8); }
body.nt-kid .module-card[data-type="summary"] .icon-box,
body.nt-kid .module-card[data-type="audiobook"] .icon-box,
body.nt-kid .module-card[data-type="photo_solve"] .icon-box { background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66); }
body.nt-kid .module-card[data-type="podcast"] .icon-box,
body.nt-kid .module-card[data-type="video_script"] .icon-box,
body.nt-kid .module-card[data-type="activity"] .icon-box { background: var(--kid-c5-bg, #5a1a45); color: var(--kid-c5-fg, #ffbde2); }
body.nt-kid .module-card[data-type="doc_compare"] .icon-box,
body.nt-kid .module-card[data-type="exam_scan_written"] .icon-box { background: var(--kid-c6-bg, #5a2a10); color: var(--kid-c6-fg, #ffc596); }

/* ---------- Öğrenci paneli: başlık + "hap" sekmeler ---------- */
body.nt-kid .lms-panel { border-radius: 28px; }
body.nt-kid .lms-panel-header h2 { font-size: 22px; font-weight: 800; }
body.nt-kid .lms-panel-tabs { border-radius: 999px; padding: 6px; gap: 6px; }
body.nt-kid .lms-panel-tabs .lms-tab {
    min-height: 48px; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 800;
}
body.nt-kid .lms-panel-tabs .lms-tab.active {
    background: var(--fill-accent, #7c3aed) !important;
    color: var(--on-accent, #ffffff) !important;
    box-shadow: 0 4px 0 rgba(var(--accent-rgb, 155, 107, 255), .35);
}

/* ---------- Rozetler: büyük, renkli madalyalar ---------- */
body.nt-kid .badges-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
body.nt-kid .badge-card { border-radius: 24px; border-width: 3px; padding: 16px 12px; }
body.nt-kid .badge-icon { width: 64px; height: 64px; font-size: 28px; }
body.nt-kid .badge-earned .badge-icon {
    background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66);
    box-shadow: 0 0 0 4px var(--kid-c4-fg, #ffdd66);
}
body.nt-kid .badge-name { font-size: 15px; font-weight: 800; }
body.nt-kid .badge-desc { font-size: 13px; }

/* ---------- Sınıf ligi ---------- */
body.nt-kid .nt-lb-periods { border-radius: 999px; }
body.nt-kid .nt-lb-period { min-height: 44px; border-radius: 999px; font-weight: 800; }
body.nt-kid #leaderboardWrap .data-table td { padding-top: 12px; padding-bottom: 12px; font-size: 15px; }
body.nt-kid #leaderboardWrap td:first-child[data-sort="1"] strong,
body.nt-kid #leaderboardWrap td:first-child[data-sort="2"] strong,
body.nt-kid #leaderboardWrap td:first-child[data-sort="3"] strong {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
}
body.nt-kid #leaderboardWrap td:first-child[data-sort="1"] strong { background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66); }
body.nt-kid #leaderboardWrap td:first-child[data-sort="2"] strong { background: var(--kid-c2-bg, #123d6a); color: var(--kid-c2-fg, #a8dcff); }
body.nt-kid #leaderboardWrap td:first-child[data-sort="3"] strong { background: var(--kid-c6-bg, #5a2a10); color: var(--kid-c6-fg, #ffc596); }
body.nt-kid .nt-lb-me-chip { font-weight: 800; }

/* ---------- Test görüntüleyici: büyük soru, büyük şıklar ---------- */
body.nt-kid .quiz-question-card { border-radius: 28px; border-width: 3px; }
body.nt-kid .question-text { font-size: 1.35rem; line-height: 1.55; }
body.nt-kid .quiz-option { min-height: 58px; border-radius: 20px; border-width: 3px; font-size: 1.05rem; }
body.nt-kid .option-letter { width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; font-weight: 800; background: var(--kid-c1-bg, #3a2a7a); color: var(--kid-c1-fg, #e0d4ff); }
body.nt-kid .quiz-option.correct { border-color: var(--success-text, #6ff0a6); }
body.nt-kid .quiz-option.wrong { border-color: var(--error-text, #ffa3b5); }
body.nt-kid .quiz-nav-btn,
body.nt-kid .flashcard-nav-btn { min-width: 52px; min-height: 52px; }

/* ---------- Hafıza kartları ---------- */
body.nt-kid .flashcard-face { border-radius: 30px; border-width: 3px; }
body.nt-kid .flashcard-content { font-size: 1.45rem; font-weight: 600; }
body.nt-kid .flashcard-label { font-size: .85rem; font-weight: 800; letter-spacing: 1.5px; }

/* ---------- Doğru / yanlış anı: maskotlu açılır balon ---------- */
.nt-kid-pop { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0 14px; }
.nt-kid-pop-owl { width: 120px; height: 120px; animation: ntKidHop .55s cubic-bezier(.34, 1.56, .64, 1); }
.nt-kid-pop-text {
    padding: 8px 18px; border-radius: 999px; font-size: 18px; font-weight: 800;
    background: var(--surface-1, #1b1640); color: var(--success-text, #6ff0a6);
}
.nt-kid-pop-text.nt-kid-pop-think { background: var(--surface-1, #1b1640); color: var(--accent-text, #d0bcff); }
/* Yalnız ölçek: opaklık 0 ile başlamaz — animasyon duraklasa (arka plan sekmesi, kısıtlama) bile içerik görünür. */
@keyframes ntKidHop { 0% { transform: scale(.6) translateY(16px); } 100% { transform: none; } }

/* ---------- Ödev bitti: maskotlu kutlama (engellemeyen; tıkla / Esc / 2,8 sn) ---------- */
.nt-kid-cheer {
    position: fixed; inset: 0; z-index: 99990; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
}
.nt-kid-cheer-card {
    pointer-events: auto; cursor: pointer; font: inherit; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 28px 22px; border-radius: 30px;
    background: var(--surface-1, #1b1640); color: var(--text-primary, #fff9f0);
    border: 4px solid var(--accent-color, #9b6bff);
    box-shadow: 0 8px 0 rgba(var(--accent-rgb, 155, 107, 255), .35), 0 24px 60px rgba(0, 0, 0, .35);
    animation: ntKidHop .5s cubic-bezier(.34, 1.56, .64, 1);
}
.nt-kid-cheer-owl { width: 132px; height: 132px; }
.nt-kid-cheer-title { font-family: var(--font-display, inherit); font-size: 28px; font-weight: 800; color: var(--accent-text, #d0bcff); }
.nt-kid-cheer-sub { font-size: 16px; color: var(--text-secondary, #d2c8f5); }
.nt-kid-cheer-out { opacity: 0; transition: opacity .25s; }
.nt-kid-confetti { position: absolute; inset: 0; overflow: hidden; }
.nt-kid-confetti-p {
    position: absolute; top: -16px; left: calc(6% + var(--i, 0) * 6.6%);
    width: 12px; height: 18px; border-radius: 4px;
    animation: ntKidFall 2.4s cubic-bezier(.25, .8, .5, 1) calc(var(--i, 0) * 60ms) both;
}
.nt-kc-0 { background: #ffcc33; } .nt-kc-1 { background: #ff6fae; } .nt-kc-2 { background: #45c4ff; }
.nt-kc-3 { background: #4be3a3; } .nt-kc-4 { background: #9b6bff; } .nt-kc-5 { background: #ff9a3c; }
@keyframes ntKidFall {
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(105vh) rotate(540deg); opacity: .9; }
}

/* ---------- Boş ekran: uyuyan baykuş (metin durumu anlatır → resim dekoratif) ---------- */
body.nt-kid .nt-bos-uyku::before {
    content: ''; display: block; width: 112px; height: 112px; margin: 0 auto 10px;
    background: url('../img/maskot/uyku.svg') center / 100% no-repeat,
                radial-gradient(circle closest-side, var(--kid-halo, #2f2766) 0 86%, transparent 87%);
}
body.nt-kid .nt-bos-uyku { font-size: 15.5px; text-align: center; }

/* ---------- Maskot ekibi (2026-11-03, Erdal: "daha fazla çizgi film karakteri, soldaki başlıklarda da") ----------
   Usta kunduz = ÜRET · Melodi tilki = DİNLE & İZLE · Çip robot = ARAÇLAR · Pofuduk panda = öğrenci paneli ·
   Bilge baykuş = Sınav Okuma (öğrenci görmez) ve her yerdeki eski pozlar. Aynı karakter kenar çubuğu
   başlığında ve ana sayfadaki grup başlığında. Resim dekoratif (başlık metni anlatır) → zemin görseli,
   ekran okuyucuya görünmez. Tema kapalıyken hiçbir kural uygulanmaz. */
body.nt-kid .nt-side-heading[data-grp-head] {
    display: flex; align-items: center; gap: 8px;
    padding-top: 14px; font-size: 11.5px; font-weight: 800;
}
body.nt-kid .nt-side-heading[data-grp-head]::before,
body.nt-kid .nt-grid-head[data-grp]::before,
body.nt-kid #studentPanel .lms-panel-header h2::before {
    content: ''; flex: 0 0 auto; display: block;
}
body.nt-kid .nt-side-heading[data-grp-head]::before { width: 38px; height: 38px; }
body.nt-kid .nt-grid-head[data-grp] { align-items: center; gap: 12px; margin-top: 14px; }
body.nt-kid .nt-grid-head[data-grp]::before { width: 64px; height: 64px; }
body.nt-kid .nt-grid-head h2 { font-size: 20px; font-weight: 800; }
body.nt-kid .nt-grid-head span { font-size: 14px; }
body.nt-kid :is(.nt-side-heading[data-grp-head="uret"], .nt-grid-head[data-grp="uret"])::before {
    background: url('../img/maskot/kunduz.svg') center / 100% no-repeat,
                radial-gradient(circle closest-side, var(--kid-halo, #2f2766) 0 86%, transparent 87%);
}
body.nt-kid :is(.nt-side-heading[data-grp-head="medya"], .nt-grid-head[data-grp="medya"])::before {
    background: url('../img/maskot/tilki.svg') center / 100% no-repeat,
                radial-gradient(circle closest-side, var(--kid-halo, #2f2766) 0 86%, transparent 87%);
}
body.nt-kid :is(.nt-side-heading[data-grp-head="arac"], .nt-grid-head[data-grp="arac"])::before {
    background: url('../img/maskot/robot.svg') center / 100% no-repeat,
                radial-gradient(circle closest-side, var(--kid-halo, #2f2766) 0 86%, transparent 87%);
}
body.nt-kid .nt-grid-head[data-grp="sinav"]::before {
    background: url('../img/maskot/selam.svg') center / 100% no-repeat,
                radial-gradient(circle closest-side, var(--kid-halo, #2f2766) 0 86%, transparent 87%);
}
/* Öğrenci paneli başlığı: kep ikonu yerine Pofuduk panda */
body.nt-kid #studentPanel .lms-panel-header h2 { display: flex; align-items: center; gap: 12px; }
body.nt-kid #studentPanel .lms-panel-header h2 > i { display: none; }
body.nt-kid #studentPanel .lms-panel-header h2::before {
    width: 56px; height: 56px;
    background: url('../img/maskot/panda.svg') center / 100% no-repeat,
                radial-gradient(circle closest-side, var(--kid-halo, #2f2766) 0 86%, transparent 87%);
}
@media (max-width: 760px) {
    body.nt-kid .nt-grid-head[data-grp]::before { width: 52px; height: 52px; }
    body.nt-kid #studentPanel .lms-panel-header h2::before { width: 46px; height: 46px; }
}

/* ---------- Okullar sekmesi (süper admin — çocuk teması DEĞİL): Düzenle penceresi ---------- */
.nt-sl-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary, #a6adc5); }
.nt-se-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--text-secondary, #a6adc5); }
.nt-se-hint.hidden { display: none; }
.nt-se-status { min-height: 1.2em; margin: 6px 0 0; font-size: 13px; color: var(--text-secondary, #a6adc5); }

/* ---------- Faz 62 (iş 18, dalga 2): "Planım" — maskotlu karşılama + şeker renkli günler ---------- */
.nt-plan-kid { display: none; }
body.nt-kid .nt-plan-kid {
    display: flex; align-items: center; gap: 14px; padding: 10px 16px;
    border-radius: 26px; background: var(--surface-1, #1b1640);
    border: 3px solid var(--border-color, #3a3170);
    box-shadow: var(--shadow-card, 0 5px 0 rgba(0, 0, 0, .28));
}
body.nt-kid .nt-plan-owl { flex: 0 0 auto; width: 76px; height: 76px; }
body.nt-kid .nt-plan-kid-text {
    font-family: var(--font-display, inherit); font-size: 18px; font-weight: 800;
    color: var(--accent-text, #d0bcff); overflow-wrap: anywhere;
}
body.nt-kid .nt-plan h3 { font-size: 1.2rem; font-weight: 800; }
body.nt-kid .nt-plan-strip { gap: 8px; padding-top: 10px; }
body.nt-kid .nt-plan-chip { flex-basis: 58px; min-height: 88px; border-radius: 22px; border-width: 3px; }
body.nt-kid .nt-plan-chip-wd { font-size: .86rem; font-weight: 800; }
body.nt-kid .nt-plan-chip-d { font-size: 1.45rem; }
/* Günler sırayla altı şeker renginden birini alır (seçili gün dolu vurgu rengi) */
body.nt-kid .nt-plan-chip:nth-child(6n+1):not([aria-pressed="true"]) { background: var(--kid-c1-bg, #3a2a7a); color: var(--kid-c1-fg, #e0d4ff); }
body.nt-kid .nt-plan-chip:nth-child(6n+2):not([aria-pressed="true"]) { background: var(--kid-c2-bg, #123d6a); color: var(--kid-c2-fg, #a8dcff); }
body.nt-kid .nt-plan-chip:nth-child(6n+3):not([aria-pressed="true"]) { background: var(--kid-c3-bg, #0f4a3a); color: var(--kid-c3-fg, #86f2c8); }
body.nt-kid .nt-plan-chip:nth-child(6n+4):not([aria-pressed="true"]) { background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66); }
body.nt-kid .nt-plan-chip:nth-child(6n+5):not([aria-pressed="true"]) { background: var(--kid-c5-bg, #5a1a45); color: var(--kid-c5-fg, #ffbde2); }
body.nt-kid .nt-plan-chip:nth-child(6n):not([aria-pressed="true"]) { background: var(--kid-c6-bg, #5a2a10); color: var(--kid-c6-fg, #ffc596); }
/* Şeker zeminde dakika satırı ve ilerleme çubuğu zeminin metin renginden (ikincil gri okunmazdı) */
body.nt-kid .nt-plan-chip:not([aria-pressed="true"]) .nt-plan-chip-m { color: inherit; }
body.nt-kid .nt-plan-chip:not([aria-pressed="true"]) .nt-plan-chip-bar { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
body.nt-kid .nt-plan-chip:not([aria-pressed="true"]) .nt-plan-chip-bar > span { background: currentColor; }
body.nt-kid .nt-plan-chip[aria-pressed="true"] { box-shadow: 0 5px 0 rgba(var(--accent-rgb, 155, 107, 255), .35); }
body.nt-kid .nt-plan-chip.is-today:not([aria-pressed="true"]) { border-color: var(--accent-text, #d0bcff); }
body.nt-kid .nt-plan-review, body.nt-kid .nt-plan-pe { border-radius: 22px; border-width: 2px; padding: 12px 16px; }
body.nt-kid .nt-plan-tick { width: 52px; height: 52px; border-radius: 16px; border-width: 3px; font-size: 1.2rem; }
body.nt-kid .nt-plan-rel { min-height: 48px; border-radius: 999px; font-size: 15px; padding: 8px 16px; }
body.nt-kid .nt-plan-rels { margin-left: 64px; }
body.nt-kid .nt-plan-warn { border-radius: 18px; font-weight: 700; padding: 10px 14px; }
body.nt-kid .nt-plan-pe-btn { border-radius: 999px; }
@media (max-width: 480px) {
    body.nt-kid .nt-plan-owl { width: 56px; height: 56px; }
    body.nt-kid .nt-plan-kid-text { font-size: 16px; }
    body.nt-kid .nt-plan-chip { flex-basis: 48px; min-height: 80px; border-radius: 18px; }
    body.nt-kid .nt-plan-rels { margin-left: 0; }
}

/* ---------- Faz 62 (iş 18, dalga 2): Etkileşimli Etkinlik — büyük, yuvarlak, renkli dokunma ---------- */
body.nt-kid .nt-act-item {
    border-radius: 26px; border-width: 3px; padding: 1rem 1.1rem;
    box-shadow: var(--shadow-card, 0 5px 0 rgba(0, 0, 0, .28));
}
body.nt-kid .nt-act-no {
    min-width: 38px; height: 38px; font-size: 1rem; font-weight: 800;
    background: var(--kid-c1-bg, #3a2a7a); color: var(--kid-c1-fg, #e0d4ff);
}
body.nt-kid .nt-act-tag { font-size: .82rem; padding: .2rem .7rem; }
body.nt-kid .nt-act-status { font-size: .95rem; }
body.nt-kid :is(.nt-act-prompt, .nt-act-statement) { font-size: 1.15rem; line-height: 1.5; }
body.nt-kid .nt-act-text { font-size: 1.1rem; }
body.nt-kid .nt-act-chip {
    min-height: 54px; padding: .55rem .95rem; border-radius: 18px; border-width: 3px;
    font-size: 1.05rem; font-weight: 700;
}
/* Sol sütun gökyüzü, sağ sütun sakız, kelime kutusu güneş, Doğru nane / Yanlış mandalina */
body.nt-kid .nt-act-left:not([aria-pressed="true"]):not(.nt-act-paired) {
    background: var(--kid-c2-bg, #123d6a); color: var(--kid-c2-fg, #a8dcff); border-color: var(--kid-c2-fg, #a8dcff);
}
body.nt-kid .nt-act-right:not([aria-pressed="true"]):not(.nt-act-paired) {
    background: var(--kid-c5-bg, #5a1a45); color: var(--kid-c5-fg, #ffbde2); border-color: var(--kid-c5-fg, #ffbde2);
}
body.nt-kid .nt-act-word:not([aria-pressed="true"]) {
    background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66); border-color: var(--kid-c4-fg, #ffdd66);
}
body.nt-kid .nt-act-tfbtn[data-act-tf="1"]:not([aria-pressed="true"]) {
    background: var(--kid-c3-bg, #0f4a3a); color: var(--kid-c3-fg, #86f2c8); border-color: var(--kid-c3-fg, #86f2c8);
}
body.nt-kid .nt-act-tfbtn[data-act-tf="0"]:not([aria-pressed="true"]) {
    background: var(--kid-c6-bg, #5a2a10); color: var(--kid-c6-fg, #ffc596); border-color: var(--kid-c6-fg, #ffc596);
}
/* Seçili / eşleşmiş: dolu vurgu hapı + "basılmış" gölge */
body.nt-kid .nt-act-chip[aria-pressed="true"], body.nt-kid .nt-act-chip.nt-act-paired {
    background: var(--fill-accent, #7c3aed); color: var(--on-accent, #ffffff);
    border-color: var(--fill-accent, #7c3aed);
    box-shadow: 0 4px 0 rgba(var(--accent-rgb, 155, 107, 255), .35);
}
body.nt-kid .nt-act-tf .nt-act-chip { min-width: 140px; justify-content: center; font-size: 1.1rem; }
body.nt-kid .nt-act-blank { min-height: 50px; border-radius: 14px; border-width: 3px; font-size: 1.05rem; }
body.nt-kid .nt-act-step { min-height: 58px; border-radius: 18px; border-width: 2px; font-size: 1.05rem; }
body.nt-kid .nt-act-step::before {
    min-width: 34px; height: 34px; font-size: .95rem; font-weight: 800;
    background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66);
}
body.nt-kid .nt-act-move { width: 52px; height: 52px; border-radius: 16px; border-width: 2px; }
body.nt-kid .nt-act-result { border-radius: 26px; border-width: 3px; text-align: center; padding: 1rem; }
body.nt-kid .nt-act-score { font-family: var(--font-display, inherit); font-size: 1.6rem; }
body.nt-kid .nt-act-result-note { font-size: 1rem; }
body.nt-kid .nt-act-kid { margin-top: 0; }

/* ---------- Faz 62 (iş 18, dalga 2): sesli kitap / söyleşi oynatıcısı (sonuç kartı + görüntüleyici) ---------- */
body.nt-kid .audiobook-output h3 { font-size: 1.2rem; font-weight: 800; }
body.nt-kid .audiobook-output .ab-card-audio { border-radius: 999px; }
body.nt-kid .audiobook-output details > summary { font-weight: 800; font-size: 1rem; }
body.nt-kid .audiobook-output .ab-chap-seek { font-size: 1rem; font-weight: 700; padding: .35rem 0 !important; }
body.nt-kid .nt-ab-missing { font-size: .95rem; border-radius: 16px; }

/* ---------- Faz 64: Sözlü Sınav ve Okuma — nane renkli kart ikonu, büyük yuvarlak kayıt düğmeleri ---------- */
body.nt-kid .module-card[data-type="oral"] .icon-box { background: var(--kid-c3-bg, #0f4a3a); color: var(--kid-c3-fg, #86f2c8); }
body.nt-kid .nt-oral-btn { min-height: 52px; border-radius: 999px; font-size: 1rem; border-width: 2px; padding: 0.5rem 1.2rem; }
body.nt-kid .nt-oral-item { border-radius: 22px; border-width: 2px; }
body.nt-kid .nt-oral-question, body.nt-kid .nt-oral-read-text { font-size: 1.15rem; }
body.nt-kid .nt-oral-metric { border-radius: 18px; }
body.nt-kid .nt-oral-no { min-width: 34px; height: 34px; font-size: .95rem; background: var(--kid-c4-bg, #4a3a0a); color: var(--kid-c4-fg, #ffdd66); }
body.nt-kid .nt-oral-result { border-radius: 26px; border-width: 3px; text-align: center; padding: 1rem; }
body.nt-kid .nt-oral-total { font-family: var(--font-display, inherit); font-size: 1.6rem; }
body.nt-kid .nt-oral-kid { margin-top: 0; }
@media (max-width: 480px) {
    body.nt-kid .nt-act-tf .nt-act-chip { min-width: 0; }
    body.nt-kid .nt-act-move { width: 48px; height: 48px; }
    body.nt-kid .nt-act-match .nt-act-chip { padding: .45rem .5rem; font-size: .95rem; border-radius: 14px; }
}

/* ---------- Hareket azaltma: maskot ve konfeti DURAĞAN ---------- */
@media (prefers-reduced-motion: reduce) {
    body.nt-kid .nt-kid-mascot,
    .nt-kid-pop-owl,
    .nt-kid-cheer-card { animation: none; }
    body.nt-kid .module-card:hover { transform: none; }
    .nt-kid-confetti { display: none; }
}
/* ====================================================================
   Faz 64 (C3) — ÖĞRENME ÇIKTILARI: seçici (#curriculumPicker), sonuç kartı etiketleri (.nt-cur-tags),
   kaydetme penceresi (#smCurRow), görüntüleyici çubuğu (.nt-cur-viewbar), "Çıktıyla etiketle"
   penceresi (#outcomeTagModal), Materyallerim süzgeci, yönetim "Okul Çıktıları" sekmesi.
   Renkler token'la (yedekli); --accent-color yalnız kenarlık / zemin, metin --accent-text; soldurma
   opacity ile DEĞİL --text-secondary / --text-muted ile. Dokunmatikte ≥ 44 px (dosyanın bu bölümündeki
   pointer: coarse bloğu).
   ==================================================================== */
.nt-cur-picker { margin: 0 0 0.75rem; }
.nt-cur-box {
    border: 1px solid var(--border-color, #262b40); border-radius: 10px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
}
.nt-cur-summary {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-height: 44px;
    padding: 0.55rem 0.8rem; cursor: pointer; font-weight: 600; color: var(--text-primary, #f2f4fa);
}
.nt-cur-summary > i { color: var(--accent-text, #a5b4fc); }
.nt-cur-count { font-weight: 600; font-size: 0.8rem; color: var(--accent-text, #a5b4fc); }
.nt-cur-body { padding: 0 0.8rem 0.8rem; display: grid; gap: 0.6rem; min-width: 0; }
.nt-cur-hint, .nt-cur-sub, .nt-cur-source, .nt-cur-limit, .nt-cur-note, .nt-cur-empty, .nt-cur-meta {
    font-size: 0.8rem; color: var(--text-secondary, #a6adc5); margin: 0;
}
.nt-cur-source { color: var(--text-muted, #8f97b3); }
.nt-cur-over { color: var(--error-text, #fca5a5); font-weight: 600; }
.nt-cur-warn-text { color: var(--warn-text, #fbbf24); }
.nt-cur-grid {
    display: grid; gap: 0.5rem 0.75rem; min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.nt-cur-lbl {
    display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
    font-size: 0.82rem; color: var(--text-secondary, #a6adc5);
}
.nt-cur-lbl > select, .nt-cur-lbl > input, .nt-cur-lbl > textarea { width: 100%; min-width: 0; }
.nt-cur-warn {
    margin: 0; padding: 0.45rem 0.65rem; border-radius: 8px; font-size: 0.82rem;
    background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24);
    border: 1px solid var(--warn-text, #fbbf24);
}
.nt-cur-search-row { display: grid; gap: 0.3rem; min-width: 0; position: relative; }
.nt-cur-picker .nt-cur-search, .nt-cur-save .nt-cur-search, .nt-cur-matfilter .nt-cur-search {
    width: 100%; margin: 0; padding: 0.5rem 0.7rem; min-height: 38px; border-radius: 8px;
    background: var(--input-bg, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-strong, #79809c);
}
.nt-cur-results {
    display: grid; gap: 0.3rem; max-height: 240px; overflow-y: auto; padding: 0.35rem;
    border: 1px solid var(--border-color, #262b40); border-radius: 8px;
    background: var(--dropdown-bg, #171a2b);
}
.nt-cur-res {
    display: block; width: 100%; text-align: left; cursor: pointer; padding: 0.4rem 0.6rem; border-radius: 8px;
    background: var(--surface-2, #1c2033); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-strong, #79809c); font-size: 0.82rem; overflow-wrap: anywhere;
}
.nt-cur-res:hover { background: var(--surface-3, #252a42); }
.nt-cur-res.nt-cur-on { background: var(--badge-accent-bg, #1d2142); border-color: var(--accent-color, #6366f1); }
.nt-cur-list {
    max-height: 340px; overflow-y: auto; min-width: 0; padding: 0.35rem;
    border: 1px solid var(--border-color, #262b40); border-radius: 8px; background: var(--surface-1, #151827);
}
.nt-cur-theme { border: 0; margin: 0 0 0.5rem; padding: 0; min-width: 0; }
.nt-cur-theme > legend { font-weight: 700; font-size: 0.84rem; color: var(--text-primary, #f2f4fa); padding: 0.25rem 0.2rem; }
.nt-cur-out { border-radius: 8px; }
.nt-cur-out.nt-cur-on { background: var(--badge-accent-bg, #1d2142); }
.nt-cur-out-lbl {
    display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0.45rem; cursor: pointer;
    border-radius: 8px; color: var(--text-primary, #f2f4fa); font-size: 0.84rem; min-width: 0;
}
.nt-cur-out-lbl:hover { background: var(--surface-3, #252a42); }
.nt-cur-picker input[type="checkbox"], .nt-otm-card input[type="checkbox"],
.nt-cur-tags input[type="checkbox"], .nt-so-check input[type="checkbox"] {
    width: auto; margin: 0.15rem 0 0; padding: 0; flex: 0 0 auto;
}
.nt-cur-code {
    font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; white-space: nowrap;
    color: var(--accent-text, #a5b4fc);
}
.nt-cur-text { color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; min-width: 0; }
.nt-cur-meta { display: inline-block; }
.nt-cur-comp { margin: 0 0 0.35rem 2rem; font-size: 0.8rem; }
.nt-cur-comp > summary { cursor: pointer; color: var(--accent-text, #a5b4fc); font-weight: 600; }
.nt-cur-comp ul { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--text-secondary, #a6adc5); }
.nt-cur-selected-wrap { display: grid; gap: 0.3rem; }
.nt-cur-chips { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; min-width: 0; }
.nt-cur-chip {
    display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.15rem 0.55rem;
    border-radius: 999px; font-size: 0.78rem; overflow-wrap: anywhere;
    background: var(--badge-accent-bg, #1d2142); color: var(--badge-accent-fg, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-cur-chip .nt-cur-code { color: inherit; }
.nt-cur-chip-mute {
    background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db);
    border-color: var(--border-strong, #79809c);
}
.nt-cur-chip-miss {
    background: var(--badge-warn-bg, #2e2416); color: var(--badge-warn-fg, #fbbf24);
    border-color: var(--warn-text, #fbbf24);
}
.nt-cur-chip-x {
    display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem;
    padding: 0; cursor: pointer; border-radius: 999px; font-size: 0.7rem;
    background: var(--surface-3, #252a42); color: var(--text-primary, #f2f4fa);
    border: 1px solid var(--border-strong, #79809c);
}
.nt-cur-chip-x:hover { background: var(--fill-error, #c81e1e); color: var(--on-error, #ffffff); }
.nt-cur-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }

/* Sonuç kartı: kapsama satırı + öğe etiketleri (yalnız öğretmen) */
.nt-cur-tags {
    margin-top: 0.85rem; padding-top: 0.65rem; display: grid; gap: 0.5rem; min-width: 0;
    border-top: 1px solid var(--border-color, #262b40);
}
.nt-cur-cov { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; min-width: 0; }
.nt-cur-cov-lbl { font-weight: 700; font-size: 0.84rem; color: var(--text-secondary, #a6adc5); }
.nt-cur-cov-lbl > i { color: var(--accent-text, #a5b4fc); }
.nt-cur-cov-notes { flex: 1 1 100%; }
.nt-cur-items > summary {
    display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; padding: 0.35rem 0.75rem;
    border-radius: 8px; font-weight: 600; font-size: 0.84rem;
    background: var(--accent-soft, rgba(99, 102, 241, .16)); color: var(--accent-text, #a5b4fc);
    border: 1px solid var(--accent-color, #6366f1);
}
.nt-cur-item-list { margin: 0.5rem 0 0; padding-left: 1.6rem; display: grid; gap: 0.4rem; }
.nt-cur-item { color: var(--text-primary, #f2f4fa); }
.nt-cur-item-row { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; min-width: 0; }
.nt-cur-item-label { flex: 1 1 220px; min-width: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.nt-cur-item-ed {
    display: grid; gap: 0.15rem; margin-top: 0.35rem; padding: 0.35rem; border-radius: 8px;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-cur-none-lbl { border-top: 1px solid var(--border-color, #262b40); border-radius: 0 0 8px 8px; }

/* Kaydetme penceresi + Materyallerim süzgeci + görüntüleyici çubuğu */
.nt-cur-save {
    display: grid; gap: 0.35rem; margin: 0.25rem 0 0.75rem; padding: 0.6rem; border-radius: 8px;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-cur-matfilter {
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; margin: 0 0 0.75rem; min-width: 0;
}
.nt-cur-matfilter > .nt-cur-lbl { flex: 1 1 100%; }
.nt-cur-matfilter > .nt-cur-search { flex: 1 1 200px; width: auto; max-width: 360px; }
.nt-cur-viewbar {
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; margin: 0 0 0.75rem;
    padding: 0.5rem 0.7rem; border-radius: 8px; min-width: 0;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-cur-viewbar .nt-cur-tag-btn { margin-left: auto; }

/* "Çıktıyla etiketle" penceresi */
.nt-otm-card {
    width: min(860px, calc(100vw - 24px)); max-width: 860px; max-height: 88vh; overflow-y: auto;
    display: grid; gap: 0.6rem;
}
.nt-otm-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.nt-otm-head > h3 { margin: 0; }
.nt-otm-mat { margin: 0; font-size: 0.86rem; color: var(--text-secondary, #a6adc5); overflow-wrap: anywhere; }
.nt-otm-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.nt-otm-status { font-size: 0.82rem; color: var(--text-secondary, #a6adc5); }
.nt-otm-ok { color: var(--success-text, #4ade80); }
.nt-otm-warn { color: var(--warn-text, #fbbf24); }
.nt-otm-err { color: var(--error-text, #fca5a5); }
.nt-otm-matrow {
    display: grid; gap: 0.3rem; padding: 0.5rem; border-radius: 8px;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-otm-mat-list { display: grid; gap: 0.1rem; max-height: 320px; overflow-y: auto; }
.nt-otm-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.nt-otm-item {
    display: grid; gap: 0.4rem; padding: 0.55rem 0.65rem; border-radius: 8px; min-width: 0;
    background: var(--surface-2, #1c2033); border: 1px solid var(--border-color, #262b40);
}
.nt-otm-prev { font-weight: 600; font-size: 0.86rem; color: var(--text-primary, #f2f4fa); overflow-wrap: anywhere; }
.nt-otm-row {
    display: grid; gap: 0.4rem 0.75rem; align-items: center; min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.nt-otm-cell { min-width: 0; font-size: 0.82rem; }
.nt-otm-k { font-weight: 600; color: var(--text-secondary, #a6adc5); }
.nt-otm-reason { font-size: 0.78rem; color: var(--text-secondary, #a6adc5); }
.nt-otm-none { align-self: end; }

/* Yönetim → Okul Çıktıları */
.nt-so-h { color: var(--accent-text, #a5b4fc); margin: 0 0 0.5rem; }
.nt-so-info { font-size: 0.82rem; color: var(--text-secondary, #a6adc5); margin: 0 0 0.8rem; }
.nt-so-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }
.nt-so-toolbar > .nt-cur-lbl { flex: 0 1 200px; }
.nt-so-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--text-primary, #f2f4fa); cursor: pointer; }
.nt-so-status { margin: 0 0 0.6rem; font-size: 0.84rem; color: var(--text-secondary, #a6adc5); }
.nt-so-ok { color: var(--success-text, #4ade80); }
.nt-so-warn { color: var(--warn-text, #fbbf24); }
.nt-so-err { color: var(--error-text, #fca5a5); }
.nt-so-form { display: grid; gap: 0.55rem; padding: 0.9rem; margin-bottom: 0.9rem; }
.nt-so-form-h { margin: 0; color: var(--text-primary, #f2f4fa); }
.nt-so-grid { display: grid; gap: 0.5rem 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.nt-so-table td.nt-so-text { min-width: 14rem; overflow-wrap: anywhere; }
.nt-so-table td.nt-num, .nt-so-table th.nt-num { text-align: right; font-variant-numeric: tabular-nums; }
.nt-so-table tr.nt-so-off td { color: var(--text-secondary, #a6adc5); }
.nt-so-acts { white-space: nowrap; }
.nt-so-acts > * + * { margin-left: 0.35rem; }
.nt-so-badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.nt-so-badge-on { background: var(--badge-success-bg, #10291c); color: var(--badge-success-fg, #4ade80); }
.nt-so-badge-off { background: var(--badge-neutral-bg, #232838); color: var(--badge-neutral-fg, #d1d5db); }

@media (pointer: coarse) {
    .nt-cur-out-lbl, .nt-cur-res, .nt-so-check, .nt-otm-none { min-height: 44px; }
    .nt-cur-chip-x { min-width: 44px; min-height: 44px; }
}
@media (max-width: 760px) {
    .nt-cur-viewbar .nt-cur-tag-btn { margin-left: 0; }
    .nt-cur-comp { margin-left: 1.2rem; }
    .nt-so-acts { white-space: normal; }
}
/* ---------- Faz 64 (C3) bölüm sonu ---------- */