/* ===========================================================================
   QBank — საბაზისო სტილი
   ქართული შრიფტები: typeface.ge (Mersad · Dachi · Elene · Hakuna)
   =========================================================================== */

/* შრიფტები — typeface.ge, მფლობელის არჩევანი (2026-08-21).
   ხუთი როლი: ნავიგაცია · სექციის სათაური · გვერდის სათაური · საერთო
   ტექსტი · ტესტის ტექსტი. იხ. docs/design/00-system.md.

   ფაილები woff2-ია და არა typeface.ge-ს TTF: `scripts/build_fonts.py`
   მათ გადაიყვანს (291KB → 114KB) და **გატეხილ `cmap`-საც ასწორებს** —
   GL Universiteti-ს ორიგინალს ბრაუზერი უარყოფდა
   („OTS parsing error: cmap: Out of order end range").
   ახალი შრიფტის დამატებისას სკრიპტი ხელით უნდა გაუშვა.

   ⚠ ALK Sanet-ს, Barata-სა და Katerina-ს **ერთი წონა აქვთ**. სქელ
   წარწერას ბრაუზერი სინთეზით ხატავს; მხოლოდ Nino Mtavruli-ს მოაქვს
   სამი ნამდვილი წონა. */
@font-face { font-family:'Sanet';        src:url("../fonts/sanet.46c77ac9ac11.woff2") format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Barata';       src:url("../fonts/barata.d1277d55d301.woff2") format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Katerina';     src:url("../fonts/katerina.55fa754225b0.woff2") format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Universiteti'; src:url("../fonts/universiteti.ad204ceb6bee.woff2") format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Nino';         src:url("../fonts/nino-400.ba8b84724a46.woff2") format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nino';         src:url("../fonts/nino-500.24dbbd584254.woff2") format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Nino';         src:url("../fonts/nino-700.e69715a10776.woff2") format('woff2'); font-weight:600 800; font-display:swap; }

:root{
  /* ინტერფეისი განზრახ მხოლოდ ლაითია — dark თემა არ არსებობს.
     color-scheme აუცილებელია: მის გარეშე ბრაუზერი ფორმის ველებს, scrollbar-ს
     და ავტოშევსების ფონს სისტემის მუქ სქემაზე დაიყვანს და ტექსტი გაქრება. */
  color-scheme:light;

  /* ხუთი როლი — თითო ტოკენი. სახელი უცვლელი დარჩა (`--font-sans`,
     `--font-display`), რომ 60-ზე მეტი გამოყენება ერთბაშად არ შეცვლილიყო;
     შეიცვალა მხოლოდ მნიშვნელობა. */
  --font-sans:'Sanet',ui-sans-serif,system-ui,sans-serif;   /* საერთო */
  /* ⚠ **Barata სტეკიდან გავიდა.** typeface.ge-ს ფაილს ქართული
     საერთოდ არ აქვს (84 სიმბოლო, მხოლოდ ASCII): ის ძველი, Unicode-მდელი
     შრიფტია, სადაც ლათინური სლოტები ქართულ ხატებს ინახავს. შედეგად
     სათაური ისედაც Sanet-ზე ეცემოდა, ხოლო ვარიანტის „B" და „C"
     ქართულ ასოებად იხატებოდა. სანამ სხვა სადისპლეო შრიფტს ავირჩევთ,
     გვერდის სათაური Katerina-ა — მას ქართულიც აქვს და სრული ლათინურიც.
     იცავს `tests/test_design_fonts.py::TestGeorgianCoverage`. */
  --font-display:'Katerina','Sanet',sans-serif;             /* გვერდის სათაური */
  --font-section:'Katerina','Sanet',sans-serif;             /* სექციის სათაური */
  --font-nav:'Nino','Sanet',sans-serif;                     /* ნავიგაცია */
  --font-exam:'Universiteti','Sanet',serif;                 /* ტესტის ტექსტი */

  --paper:#F4F6F8;
  --surface:#FFFFFF;
  --ink:#16202B;
  --muted:#63707E;
  --rule:#DCE3E9;
  --brand:#1F5F8B;
  --brand-ink:#FFFFFF;
  --brand-soft:#E4EDF4;
  --watermark:#A8C0D4;   /* დიდი ციფრი შეცდომის გვერდზე — ჩანს, მაგრამ არ კამათობს */

  /* ღილაკის ოთხი მნიშვნელობა: შავი — ნეიტრალური, მწვანე — დადებითი,
     ყვითელი — ყურადღება, წითელი — შეუქცევადი. ლურჯი ღილაკიდან განზრახ
     გავიდა და ბრენდის ფერად დარჩა (ბმული, ფოკუსი, აქტიური ჩანართი):
     როცა ყველა მთავარი ღილაკი ერთი ფერისაა, ფერი აღარაფერს ამბობს.

     hover/active მხოლოდ **მუქდება** და არასოდეს ღიავდება: ყვითელი
     თეთრ წარწერასთან 4.9:1-ია და ერთი საფეხურით გაღიავება მას WCAG AA-ს
     ქვემოთ ჩააგდებდა. კონტრასტს ტესტი ითვლის —
     `tests/test_design_button_colors.py`. */
  --success:#2E6B50;  --success-hover:#255843;  --success-active:#1D4634;
  --warning:#7A6019;  --warning-hover:#6B5415;  --warning-active:#573F10;
  --danger:#A6392C;   --danger-hover:#8E3025;   --danger-active:#75281F;
  --ink-hover:#243444; --ink-active:#0E1620;

  /* იგივე სამი მნიშვნელობა რბილად — ბეჯი, ჭდე, შეტყობინების ზოლი,
     პასუხის ბარათი. ეს ფერები ისედაც ცხოვრობდნენ კოდში, ოღონდ
     ლიტერალებად, სამ ფაილში გაბნეული — ერთი შესწორება მათგან ორს
     დაივიწყებდა. */
  --success-soft:#EAF3EE; --success-deep:#22523C;
  --warning-soft:#FBF4E3; --warning-line:#B8912E;
  --danger-soft:#F8EBE9;  --danger-deep:#7E2B21;

  --radius:8px;

  /* გვერდის ჩარჩო — ერთი სვეტი ჰედერს, შიგთავსსა და ქვედა ზოლს.
     სამი ცალკეული რიცხვი (1180 ჰედერზე, 900 `main`-ზე, 1180 `main.wide`-ზე)
     ლოგოსა და სათაურის მარცხენა კიდეს ერთმანეთს აცდენდა და გვერდიდან
     გვერდზე გადასვლისას სვეტი ხტებოდა. */
  --page:1180px;
  --gutter:24px;
  /* საკითხავი ზოლი ჩარჩოზე ვიწროა: 1180px-ზე გაწელილი აბზაცი ~130
     სიმბოლოა და თვალი ხაზის დასაწყისს კარგავს. ჩარჩო მაინც ერთი რჩება —
     ვიწროვდება შიგთავსი და არა გვერდი. */
  --measure:900px;
  /* select-ის ისარი ტოკენია: მას ადმინის უფრო სპეციფიკური წესებიც
     იმეორებს და ორი ასლი ერთ დღეს ერთმანეთს გაცდებოდა. */
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363707E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --shadow:0 1px 2px rgba(22,32,43,.06), 0 12px 32px -20px rgba(22,32,43,.3);
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; overflow-x:hidden }

body{
  margin:0;
  /* --- ფონური ილუსტრაცია (მფლობელის გადაწყვეტილება, 2026-08-21) -------
     `background-color` ცხადადაა და არა shorthand-ით: shorthand
     `background-image`-საც ანულებს, ანუ ორი ცალკე body-წესი
     ერთმანეთის რიგზე დამოკიდებული გახდებოდა — მყიფე კონსტრუქცია.
     ⚠ CSS-კომენტარში ხვეული ფრჩხილი არ ჩასვა: ტესტების `rule()`
     დამხმარე პირველივე დამხურავზე ჩერდება და ბლოკს შუაზე ჭრის.
     ფერი სურათის ჩატვირთვამდე და მის კიდეს იქითაც უნდა იდგეს,
     თორემ გვერდი თეთრად აციმციმდება. */
  background-color:var(--paper);
  background-image:url("../img/page-bg.63a1602203a7.webp");
  background-repeat:no-repeat;
  /* ⚠ `cover` **არ** გამოდგება. მისი საზომი მთელი დოკუმენტია და არა
     ეკრანი, დოკუმენტის სიმაღლე კი გვერდიდან გვერდზე იცვლება:
     კითხვების ბანკი 6536px-იანია, ანუ სურათი შვიდჯერ იწელებოდა და
     კუთხეების ნახატი ეკრანს გარეთ რჩებოდა — ბანკში ფონი საერთოდ არ
     ჩანდა, დაფაზე კი სულ სხვა ადგილას იდგა.

     `100% auto` მასშტაბს **სიგანეს** უბამს: ყველა გვერდზე ერთი და
     იგივე სურათი დგას ერთსა და იმავე ადგილას, სიმაღლისგან
     დამოუკიდებლად. ქვემოთ დანარჩენი `--paper`-ია, ხოლო თვით სურათს
     ქვედა კიდე გაფერმკრთალებული აქვს (იხ. `scripts/`), ანუ ნაკერი
     არ ჩანს. */
  background-position:center top;
  background-size:100% auto;
  /* ⚠ `fixed` განზრახ **არ** გამოიყენება. ის ილუსტრაციას ეკრანზე
     აკრავს: შიგთავსი მოძრაობს, ფონი კი ადგილზე რჩება და თვალი ამას
     ფონის ცურვად კითხულობს (პარალაქსი). მფლობელმა ეს ხელისშემშლელად
     შეაფასა (2026-08-21). `scroll`-ზე სურათი გვერდის ნაწილია და
     მასთან ერთად მიდის — მოძრაობა ქრება. */
  background-attachment:scroll;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{flex:1;width:100%;max-width:var(--page);margin:0 auto;padding:32px var(--gutter) 48px}

/* შიგთავსი ვიწრო ზოლშია და **ცენტრში** — მფლობელის გადაწყვეტილება
   (2026-08-23): მარცხნივ მიბჯენილი სვეტი ფართო ეკრანზე ცალ მხარეს
   დიდ სიცარიელეს ტოვებდა. ძველი წესი („სათაურის კიდე ლოგოს კიდეს
   ემთხვევა") ამ ცენტრირებამ შეცვალა.

   `main#main` და არა უბრალო `main`: Django-ს ადმინსაც აქვს საკუთარი
   `<main class="content">` და ბრმა სელექტორი მის შიგთავსსაც შეავიწროებდა.
   დღეს ადმინს id-სელექტორი იცავს, ხვალინდელი Django კი ახალ შვილს
   დაამატებდა და გვერდი ჩუმად გატყდებოდა. */
main#main>*{max-width:var(--measure);margin-inline:auto}
/* დაფა, ტესტების სია, კონსტრუქტორი და სადესანტო გვერდი ბადეებია —
   მათ მთელი ჩარჩო სჭირდებათ. იცვლება მხოლოდ შიგთავსის ზოლი: ჩარჩო
   იგივე რჩება, თორემ სვეტი ისევ დაიწყებდა ხტუნვას. */
main#main.full>*{max-width:none}

/* გვერდის კიდე ვიწროვდება ტოკენში — ჰედერი, შიგთავსი, ქვედა ზოლი და
   ადმინი ერთდროულად მიჰყვებიან და ცალ-ცალკე media-ბლოკები აღარ სჭირდებათ. */
@media (max-width:1023px){
  :root{--gutter:20px}
  main{padding:24px var(--gutter) 40px}
}
@media (max-width:767px){
  :root{--gutter:16px}
  /* ქვედა ზოლი fixed-ია — შიგთავსს მისი სიმაღლე + safe-area უნდა დაუტოვოს */
  main{padding:16px var(--gutter) calc(88px + env(safe-area-inset-bottom))}
}

a{color:var(--brand)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

h1{font-family:var(--font-display);font-weight:400;line-height:1.18;text-wrap:balance;margin:0 0 16px}
/* სექციის სათაური ცალკე შრიფტია და არა გვერდისა: ერთი გვერდი ერთ
   Barata-ს სათაურს ატარებს, სექციები კი რამდენიმეა. */
h2{font-family:var(--font-section);font-weight:400;line-height:1.22;text-wrap:balance;margin:0 0 12px}
h3{font-family:var(--font-section);font-weight:600}

/* --- ცენტრირებული ბლოკი: landing და შეცდომების გვერდები --- */
.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px 20px 80px;
  gap:8px;
}
.stage h1{font-size:clamp(34px,7vw,58px)}
.stage p{color:var(--muted);font-size:17px;max-width:52ch;margin:0 auto}

.mark{
  font-family:var(--font-display);
  font-size:clamp(40px,9vw,72px);
  line-height:1.2;
  letter-spacing:.02em;
  margin-bottom:24px;
}
.mark span{color:var(--brand)}

/* `.stage p`-ს (0,1,1) სპეციფიკურობა `.code`-ს (0,1,0) ჯაბნიდა და დიდი ციფრი
   ნაცრისფრად ხატებოდა. `.stage p.code` (0,2,1) ამ შეჯახებას წყვეტს. */
.stage p.code{
  font-family:var(--font-display);
  font-size:clamp(72px,18vw,140px);
  line-height:.9;
  color:var(--watermark);
  margin:0 0 8px;
  max-width:none;
  user-select:none;
}

.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  /* min-height და არა height: ქართული წარწერა ორ სტრიქონზეც უნდა დაეტიოს */
  min-height:48px;padding:10px 24px;border-radius:var(--radius);
  font-family:var(--font-sans);font-size:16px;font-weight:600;
  line-height:1.25;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background-color .12s ease, border-color .12s ease;
}
.btn-sm{min-height:44px;padding:8px 18px;font-size:15px}
/* --- ღილაკის ოთხი მნიშვნელობა ---------------------------------------
   შავი — ნეიტრალური მთავარი (ნავიგაცია, შესვლა, გაგრძელება)
   მწვანე — დადებითი, დამამტკიცებელი (გამოქვეყნება, შენახვა, დამატება)
   ყვითელი — ყურადღება, დაუმთავრებელი (დრაფტი, შემოწმების რიგი)
   წითელი — შეუქცევადი (წაშლა, ამოღება, არქივი, გამოსვლა)
   ფერს **მნიშვნელობა** ირჩევს და არა ადგილი გვერდზე. */
.btn-primary{background:var(--ink);color:var(--brand-ink);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--ink-hover)}
.btn-primary:active{background:var(--ink-active);box-shadow:none}

.btn-success{background:var(--success);color:var(--brand-ink);box-shadow:var(--shadow)}
.btn-success:hover{background:var(--success-hover)}
.btn-success:active{background:var(--success-active);box-shadow:none}

.btn-warn{background:var(--warning);color:var(--brand-ink);box-shadow:var(--shadow)}
.btn-warn:hover{background:var(--warning-hover)}
.btn-warn:active{background:var(--warning-active);box-shadow:none}

/* წითელი ცალკე დგას: სხვა სამისგან განსხვავებით ის „გავაგრძელოთ?"
   კითხვას სვამს და არა გზას აჩვენებს (დიზაინ-სისტემა: „danger —
   მხოლოდ მართლაც შეუქცევად მოქმედებაზე, ვიზუალურად იზოლირებული"). */
.btn-danger{background:var(--danger);color:var(--brand-ink);box-shadow:var(--shadow)}
.btn-danger:hover{background:var(--danger-hover)}
.btn-danger:active{background:var(--danger-active);box-shadow:none}

/* opacity:.5 განზრახ არ გამოიყენება — ის ტექსტის კონტრასტს ამცირებს
   და გამორთულ ღილაკს წაუკითხავს ხდის. ფერები ცხადადაა მითითებული. */
.btn-primary:disabled,.btn-primary[aria-disabled=true],
.btn-success:disabled,.btn-success[aria-disabled=true],
.btn-warn:disabled,.btn-warn[aria-disabled=true],
.btn-danger:disabled,.btn-danger[aria-disabled=true]{
  background:var(--rule);color:var(--muted);border-color:var(--rule);
  box-shadow:none;cursor:not-allowed;opacity:1;
}
/* ხატულის საკუთარი ფერები აქ უნდა ჩაქრეს. Google-ის „G" ბრენდის ოთხ
   ფერშია და `color`-ს არ ემორჩილება: გამორთულ ღილაკზე წარწერა ნაცრისფრად
   ქრებოდა, ხატულა კი სრულ ფერებში რჩებოდა და თვალს სწორედ ის იზიდავდა —
   ღილაკი აქტიურად გამოიყურებოდა. `filter` ხატულაზეა და არა ღილაკზე:
   ღილაკის ჩრდილსა და ჩარჩოს შეხება არ სჭირდება. */
.btn:disabled .icon,.btn[aria-disabled=true] .icon{
  filter:grayscale(1);opacity:.55;
}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--rule);
  min-height:44px;padding:9px 18px;font-size:15px}
.btn-ghost:hover{background:#F8FBFD;border-color:var(--brand)}
.btn-ghost:active{background:var(--brand-soft);border-color:var(--brand)}
.btn-ghost:disabled{color:var(--muted);cursor:not-allowed}

/* პროვაიდერების ბრენდ-ღილაკები (მფლობელი, 2026-08-23): Google — თეთრი,
   Facebook — ბრენდის ლურჯი (#1877F2). ფერი აქ ბრენდს ეკუთვნის და არა
   ჩვენს პალიტრას, ამიტომ ტოკენებში არ შეგვაქვს. */
.btn-google{background:#fff;color:var(--ink);border-color:var(--rule);box-shadow:var(--shadow)}
.btn-google:hover{background:#F8FBFD;border-color:var(--brand)}
.btn-google:active{background:var(--brand-soft);box-shadow:none}
.btn-facebook{background:#1877F2;color:#fff;border-color:#1877F2;box-shadow:var(--shadow)}
.btn-facebook:hover{background:#166FE5;border-color:#166FE5}
.btn-facebook:active{background:#125FCA;box-shadow:none}

/* ===========================================================================
   Სავარჯიშო / შეცდომების ბანკი — გამოცდის ეკრანის (player) ვიზუალური ენა
   (2026-08-23, მფლობელი: „სქროლვაც უჭირს და დიზაინიც არ უვარგა").
   Ქმედებების ზოლი ძირშია მიმაგრებული — ღილაკის საძებნელად სქროლი აღარ.
   =========================================================================== */
.pr{display:flex;flex-direction:column;gap:14px}
.pr-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pr-head .page-title{margin:0}
.pr-count{color:var(--muted);font-size:13.5px}
.pr-q{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:20px}
.pr-q-body{font-size:16.5px;line-height:1.6;overflow-wrap:anywhere}
.pr-q-body img,.pr-q-image{display:block;max-width:100%;height:auto;
  margin-top:10px;border-radius:8px}
.pr-opts{list-style:none;margin:18px 0 0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.pr-opt{
  display:flex;align-items:flex-start;gap:12px;width:100%;
  padding:12px 14px;border:1.5px solid var(--rule);border-radius:10px;
  cursor:pointer;line-height:1.5;background:var(--surface);
}
.pr-opt input{position:absolute;opacity:0;pointer-events:none}
.pr-opt:hover{border-color:var(--brand)}
.pr-opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.pr-opt-letter{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;border:1.5px solid currentColor;
  font-weight:700;font-size:13px;
}
.pr-opt:has(input:checked) .pr-opt-letter{background:var(--brand);
  border-color:var(--brand);color:#fff}
.pr-opt-body{min-width:0;overflow-wrap:anywhere;align-self:center}
.pr-opt-body img{max-width:100%;height:auto}
.pr-opt-stack{min-width:0;display:flex;flex-direction:column;gap:8px}

/* პასუხის ეკრანი: მწვანე — სწორად აირჩიე, წითელი — შეცდომა,
   ყვითელი — სწორი, რომელიც გამოგრჩა */
.pr-opts-result .pr-opt{cursor:default}
.pr-opt-good{border-color:var(--success);background:#EAF7EF}
.pr-opt-good .pr-opt-letter{background:var(--success);border-color:var(--success);color:#fff}
.pr-opt-bad{border-color:#C0392B;background:#FDECEA}
.pr-opt-bad .pr-opt-letter{background:#C0392B;border-color:#C0392B;color:#fff}
.pr-opt-missed{border-color:#B7791F;background:#FEF6E7}
.pr-opt-missed .pr-opt-letter{background:#B7791F;border-color:#B7791F;color:#fff}
.pr-exp{color:var(--ink);font-size:14.5px;line-height:1.55;
  border-top:1px dashed var(--rule);padding-top:8px}
.pr-exp-missing{color:var(--muted);font-style:italic}
.pr-exp-image{max-width:100%;height:auto;border-radius:8px}

.pr-verdict{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-radius:var(--radius);border:1px solid;
  font-size:15px;
}
.pr-verdict b{font-size:17px}
.pr-verdict-ok{background:#EAF7EF;border-color:var(--success);color:#1E6B3C}
.pr-verdict-fail{background:#FDECEA;border-color:#C0392B;color:#96281B}
.pr-verdict span{color:inherit;opacity:.85}

/* შედეგის გვერდის ქულის ბარათი — რგოლი player-ის ტაიმერის ყაიდაზე */
.res-hero{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:20px 24px;border:1px solid var(--rule);border-radius:12px;
  background:var(--surface);
}
.res-ring{position:relative;width:120px;height:120px;flex:none}
.res-ring svg{width:100%;height:100%}
.res-ring-track{fill:none;stroke:var(--brand-soft);stroke-width:10}
.res-ring-value{fill:none;stroke-width:10;stroke-linecap:round}
.res-ok .res-ring-value{stroke:var(--success)}
.res-fail .res-ring-value{stroke:#C0392B}
.res-pending .res-ring-value{stroke:#B7791F}
.res-ring-center{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center}
.res-ring-center strong{font-size:22px;font-variant-numeric:tabular-nums}
.res-facts{min-width:0}
.res-score{margin:0 0 8px;font-size:30px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.res-score span{font-size:16px;font-weight:600;color:var(--muted)}
.res-badge{margin:0;display:inline-block;padding:6px 14px;border-radius:999px;
  font-size:14px;font-weight:700}
.res-ok .res-badge{background:#EAF7EF;color:#1E6B3C}
.res-fail .res-badge{background:#FDECEA;color:#96281B}
.res-pending .res-badge{background:#FEF6E7;color:#8A5A12}
.res-note{margin:8px 0 0;color:var(--muted);font-size:13px}
.pr-q-head-line{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pr-q-num{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;border-radius:50%;
  background:var(--ink);color:var(--brand-ink);font-weight:700;font-size:14px}
.pr-q-score{margin-left:auto;color:var(--muted);font-size:13px}
.res-open{border:1.5px dashed var(--rule);border-radius:10px;
  padding:12px 14px;margin-top:14px}
.res-open-text{margin:0 0 6px;white-space:pre-wrap;line-height:1.55}
/* მასწავლებლის შენიშვნა — მოსწავლის პასუხისგან ცხადად უნდა გაირჩეოდეს,
   ამიტომ ცალკე, შევსებული ბლოკია და არა წყვეტილჩარჩოიანი. */
.res-remark{margin:10px 0 0;padding:12px 14px;border-radius:10px;
  background:var(--brand-soft,#EAF1FA);border-inline-start:3px solid var(--brand)}
.res-remark h3{margin:0 0 5px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.res-remark p{margin:0;line-height:1.55}
@media (max-width:560px){
  .res-hero{gap:16px;padding:16px}
  .res-ring{width:96px;height:96px}
  .res-score{font-size:24px}
}

.pr-actions{
  position:sticky;bottom:0;z-index:15;display:flex;gap:10px;flex-wrap:wrap;
  padding:12px 0;background:var(--paper);
  border-top:1px solid var(--rule);
}
@media (max-width:767px){
  .pr-q{padding:16px}
  .pr-actions .btn{flex:1;min-width:0}
}

/* დრაფტის გამოქვეყნება დანიშვნის გვერდზე — მოდალის ბადეს იზიარებს */
.publish-inline{margin:0 0 24px;padding:16px;border:1px solid var(--rule);
  border-radius:var(--radius);background:var(--surface)}
.publish-inline .btn{margin-top:12px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* --- ფუტერი --- */
/* `body > footer` და არა `footer`: ცენტრირება და მუქი ჩარჩო გვერდის
   ქვედა ზოლს ეკუთვნის. ბრმა `footer{}` კომპონენტის შიგნით მოქცეულ
   `<footer>`-საც იჭერდა — რედაქტორის „რა აკლია" ზოლი სწორედ ასე
   გახდა ცენტრირებული, ტყვიებიანი სიის ჩათვლით. */
body > footer{
  width:100%;
  max-width:var(--page);
  margin:0 auto;
  border-top:1px solid var(--rule);
  padding:22px var(--gutter);
  text-align:center;
  color:var(--muted);
  font-size:13.5px;
}

/* --- ინფო-ბარათები landing-ზე --- */
.cards{
  display:grid;gap:14px;grid-template-columns:1fr;
  width:100%;max-width:760px;margin:44px auto 0;text-align:right;
}
@media (min-width:680px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:20px;text-align:center;
}
.card b{display:block;font-size:15.5px;margin-bottom:4px}
.card span{color:var(--muted);font-size:14px}

/* --- დროებითი მდგომარეობა: შესვლა ჯერ არ ჩართულა --- */
.pending{
  display:inline-block;padding:12px 22px;border-radius:var(--radius);
  border:1px dashed var(--rule);color:var(--muted);font-size:15.5px;margin:0;
}

/* --- ტესტების სია და გავლა --- */
/* margin-top განზრახ 0-ია: გვერდის ზედა ჰაერი `main`-ის padding-ია
   (32px) და მეორედ დამატება სათაურს ჰედერიდან 60px-ით აშორებდა —
   განსაკუთრებით Barata-თი, რომლის ხატიც ხაზის ყუთს ზემოთ სცდება. */
.page-title{font-size:clamp(28px,5vw,42px);margin:0 0 6px}
.meta{color:var(--muted);font-size:14.5px;margin:2px 0}
.empty{color:var(--muted);padding:28px 0}
.list{display:grid;gap:12px;margin:24px 0 48px}
.row{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between}
.row h2{font-family:var(--font-sans);font-size:17px;font-weight:600;margin:0 0 4px}
/* სათაურის ბმული `inline` იყო, ანუ სამიზნე მხოლოდ 13px სიმაღლისა —
   ტელეფონზე გაზომილი (2026-09-03). თითი ხშირად ააცილებდა. padding სამიზნეს
   ~41px-მდე ზრდის, უარყოფითი margin კი განლაგებას უცვლელს ტოვებს. */
.row h2 a{display:inline-block;padding:14px 0;margin:-14px 0}
.tag{display:inline-block;padding:6px 12px;border:1px dashed var(--rule);
  border-radius:var(--radius);color:var(--muted);font-size:14px}
/* დასრულებული ტესტის ჭდე. იმავე სიმაღლისაა, რაც ღილაკი და უკუთვლის უჯრა —
   რიგი ერთ ხაზზე უნდა იკითხებოდეს. ტონი ნეიტრალურია: ვადის გასვლა
   ჩვეულებრივი ამბავია და არა შეცდომა (ვარდისფერი ავარიად იკითხებოდა). */
.state-chip{display:inline-flex;align-items:center;gap:7px;height:48px;
  padding:0 16px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);color:var(--muted);
  font-size:14.5px;font-weight:600;white-space:nowrap}
.state-chip .icon{opacity:.6}

/* --- უკუთვლა ტესტის გახსნამდე (2026-09-03) --- */
/* თარიღი მარტო ვერ პასუხობს კითხვას „რამდენი დარჩა" — ციფრები პასუხობს */
.countdown{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cd-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.cd-cells{display:flex;gap:6px;align-items:stretch}
/* ქვედა კიდეზე სწორდება: სათაური („დარჩა") უჯრებს ზემოთ დგას და ცენტრში
   გასწორებისას ღილაკს ქვემოთ ჩამოსწევდა — რიგი მრუდე ჩანდა. */
.row-action{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  justify-content:flex-end}
/* უჯრაც და ღილაკიც ერთ სიმაღლეზე — 80px-იანი ბლოკი 48px-იან ღილაკს
   ეთანხმებოდა და თვალში ეს პირველი ხვდებოდა. */
.cd-cell,.row-action .btn{height:48px}
.cd-cell{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;min-width:46px;padding:0 8px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface)}
.cd-cell b{font-size:18px;line-height:1.05;font-variant-numeric:tabular-nums}
.cd-cell span{font-size:12px;line-height:1.1;color:var(--muted)}

/* ორი უკუთვლა ორ სხვადასხვა ამბავს ჰყვება, ამიტომ ფერიც სხვაა:
   `live` — ტესტი ღიაა და დრო იწურება (მწვანე, მოქმედების ტონი);
   `soon` — ჯერ არ გახსნილა (ლურჯი, მოლოდინის ტონი). */
.countdown-live .cd-title{color:var(--success)}
.countdown-live .cd-cell{border-color:#5cb98b;background:#EAF7EF}
.countdown-live .cd-cell b{color:#1f6f4a}
.countdown-soon .cd-title{color:#2f6fb5}
.countdown-soon .cd-cell{border-color:#a9c4e2;background:#EEF4FB}
.countdown-soon .cd-cell b{color:#2f6fb5}

@media (max-width:479px){
  .cd-cell{min-width:40px;padding:0 6px}
  .cd-cell b{font-size:16px}
}

.exam-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.timer{font-family:var(--font-section);font-size:34px;color:var(--brand);
  font-variant-numeric:tabular-nums}
.timer-low{color:var(--danger)}
/* ულიმიტო ცდის წარწერა ციფრებს ცვლის — 34px-ზე ის სათაურს გადაწონიდა. */
.timer-open{font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--muted)}

/* ტესტის ტექსტი ცალკე შრიფტია — GL Universiteti. მოსწავლე მას ყველაზე
   დიდხანს კითხულობს და ინტერფეისის ხმისგან უნდა გაირჩეოდეს: კითხვაც და
   პასუხებიც ერთ ოჯახშია, თორემ ვარიანტი „ღილაკად" წაიკითხებოდა. */
.q{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:20px 22px;margin:16px 0;font-family:var(--font-exam)}
.q h3{font-family:var(--font-exam);font-size:17px;font-weight:600;margin:0 0 14px;
  line-height:1.5}
.opts{font-family:var(--font-exam)}
.q-num{display:inline-block;min-width:28px;color:var(--brand);font-weight:700}
.q-points{color:var(--muted);font-size:13.5px;margin:12px 0 0}
.opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.opts label{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;
  border:1px solid var(--rule);border-radius:var(--radius);cursor:pointer}
.opts label:hover{border-color:var(--brand)}
.opts input{margin-top:4px;flex:none}
.q textarea{width:100%;padding:12px 14px;border:1px solid var(--rule);
  border-radius:var(--radius);font-family:var(--font-sans);font-size:16px;
  background:var(--paper);color:var(--ink);resize:vertical}
.exam-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 56px}

.verdict{background:var(--surface);border:1px solid var(--rule);border-left-width:4px;
  border-radius:var(--radius);padding:20px 24px;margin:20px 0}
.verdict b{font-family:var(--font-section);font-size:32px;display:block}
.verdict span{color:var(--muted)}
.verdict p{margin:8px 0 0;font-weight:600}
.verdict.ok{border-left-color:var(--success)}
.verdict.ok p{color:var(--success)}
.verdict.fail{border-left-color:var(--danger)}
.verdict.fail p{color:var(--danger)}
.verdict.pending{border-left-color:var(--warning)}
.verdict.pending p{color:var(--warning)}

.opts.result li{padding:11px 14px;border:1px solid var(--rule);
  border-radius:var(--radius);list-style:none}
.opts.result li em{display:block;color:var(--muted);font-style:normal;
  font-size:14px;margin-top:6px}
.opts.result .good{border-color:var(--success);background:var(--success-soft)}
.opts.result .bad{border-color:var(--danger);background:var(--danger-soft)}
.opts.result .missed{border-color:var(--warning-line);background:var(--warning-soft)}
.answer-text{white-space:pre-wrap;padding:12px 14px;border:1px solid var(--rule);
  border-radius:var(--radius)}

/* --- საჯარო სავარჯიშო: hero-ღილაკი და ვიტრინა (2026-08-24) --- */
.btn-exercise{
  position:relative;overflow:hidden;display:flex;align-items:center;
  width:fit-content;margin:22px auto 0;  /* შუაში — hero-სვეტის ცენტრზე */
  gap:10px;padding:16px 34px;border-radius:999px;
  font-size:18px;font-weight:700;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#1D4ED8,var(--brand) 60%,#3B82F6);
  box-shadow:0 10px 28px rgb(29 78 216/.35);
  animation:ex-pulse 2.4s ease-in-out infinite;
}
.btn-exercise:hover{text-decoration:none;color:#fff;transform:translateY(-1px)}
.btn-exercise::after{ /* პრიალი — გადამავალი ათინათი */
  content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:34%;
  background:linear-gradient(105deg,transparent,rgb(255 255 255/.5),transparent);
  transform:skewX(-20deg);animation:ex-shine 2.8s ease-in-out infinite;
}
@keyframes ex-pulse{
  0%,100%{box-shadow:0 10px 28px rgb(29 78 216/.35),0 0 0 0 rgb(29 78 216/.30)}
  50%{box-shadow:0 10px 28px rgb(29 78 216/.35),0 0 0 14px rgb(29 78 216/0)}
}
@keyframes ex-shine{0%{left:-40%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){
  .btn-exercise{animation:none}
  .btn-exercise::after{animation:none;display:none}
}

.ex-tabs{margin:6px 0 20px}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;margin:0 0 48px}
/* დესკტოპზე ზუსტად 4 ბარათი რიგში (მფლობელი, 2026-08-24) */
@media (min-width:1100px){.ex-grid{grid-template-columns:repeat(4,1fr)}}
.ex-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);text-decoration:none;color:var(--ink)}
.ex-card:hover{border-color:var(--brand);text-decoration:none}
.ex-card b{font-size:16px;line-height:1.35}
.ex-count{color:var(--muted);font-size:13.5px}
.ex-go{margin-top:auto;display:inline-flex;align-items:center;gap:4px;
  color:var(--brand);font-size:14px;font-weight:600}
.ex-card.is-empty{opacity:.55}
.ex-desc{color:var(--muted);font-size:13px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
/* საგნის ბარათი ემბლემით — რეფერენსის scard-ის ჩვენი, ლაითი ვერსია */
.ex-scard{display:flex;flex-direction:column;gap:8px;padding:0 0 14px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);
  overflow:hidden}
.ex-scard:hover{border-color:var(--brand);text-decoration:none}
.ex-thumb{display:grid;place-items:center;height:110px;
  background:var(--brand-soft);border-bottom:1px solid var(--rule)}
.ex-thumb img{width:56px;height:56px;object-fit:contain}
.ex-scard b{font-size:15px;line-height:1.35;padding:2px 14px 0}
.ex-foot{margin-top:auto;display:flex;align-items:center;gap:8px;
  padding:0 14px}
.ex-tag{margin-inline-start:auto;border:1px solid var(--rule);
  border-radius:999px;padding:2px 10px;font-size:12px;color:var(--muted)}
.ex-scard.is-empty{opacity:.55}
/* hero: სავარჯიშოს ღილაკი ავტორიზაციის ღილაკების ჯგუფის ცენტრზე */
.hero-cta{width:fit-content;max-width:100%}
.hero-cta .hero-note{text-align:center}
@media (max-width:767px){.hero-cta{width:100%}}
/* პასუხის ღილაკები pr-opt-ს იმეორებენ, ოღონდ <button>-ზე */
.ex-opt{width:100%;text-align:start;cursor:pointer;font-family:var(--font-sans);
  font-size:inherit;background:var(--surface)}
.ex-opt:disabled{cursor:default;opacity:1;color:var(--ink)}
.ex-q.is-done .ex-opt:not(.pr-opt-good):not(.pr-opt-bad){opacity:.6}
/* შეცდომებზე მუშაობა — ინფო-ბარათები და შეცდომის ბლოკის თავი */
.ex-info{display:grid;gap:14px;margin:18px 0 30px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.ex-info-card{background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:16px 18px}
.ex-info-num{display:block;font-family:var(--font-section);font-size:26px;
  color:var(--brand);margin-bottom:6px}
.ex-info-card h3{margin:0 0 6px;font-family:var(--font-sans);
  font-size:15.5px;font-weight:700}
.ex-info-card p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.ex-given{margin-inline-start:auto;border:1px solid var(--warning);
  color:var(--warning);border-radius:999px;padding:2px 10px;
  font-size:12.5px;font-weight:600;white-space:nowrap}
.ex-x-form{margin:0}
.ex-x{width:30px;height:30px;border:1px solid var(--rule);border-radius:8px;
  background:var(--surface);color:var(--muted);font-size:18px;line-height:1;
  cursor:pointer}
.ex-x:hover{border-color:var(--danger);color:var(--danger)}
.ex-given + .ex-x-form,.ex-given + .ex-x{margin-inline-start:8px}
.ex-q .pr-q-head-line .ex-x-js{margin-inline-start:auto}
.ex-q .pr-q-head-line .ex-given ~ .ex-x-js{margin-inline-start:8px}
.ex-mist-count{min-width:20px;padding:1px 6px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:12px;text-align:center}
/* ტესტირების პროცესი — რეფერენსის ვიზუალი ლაითში: თითო კითხვა ცალ
   ეკრანზე, ✕/✓ ნიშნები ვარიანტის მარჯვენა კიდეზე, ქვემოთ ნავიგაცია */
.is-playing .pr-q-num{display:none}
.is-playing .ex-q{min-height:min(52vh,420px)}
.ex-q .ex-opt.pr-opt-bad::after,.ex-q .ex-opt.pr-opt-good::after{
  flex:none;margin-inline-start:auto;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;color:#fff;
  font-size:12px;font-weight:700}
.ex-q .ex-opt.pr-opt-bad::after{content:"✕";background:#C0392B}
.ex-q .ex-opt.pr-opt-good::after{content:"✓";background:var(--success)}
.ex-nav{display:flex;align-items:center;justify-content:space-between;
  gap:12px;position:sticky;bottom:10px;margin-top:16px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:10px 14px;box-shadow:var(--shadow)}
.ex-nav-count{border:1px solid var(--rule);border-radius:10px;
  padding:6px 14px;font-size:14px;color:var(--muted);white-space:nowrap}
.ex-nav-count b{color:var(--ink);font-size:16px}
/* დამუშავებულობის ბეჯები ბანკის ბარათზე — ორივე მდგომარეობა ცხადად */
.pill-processed{border:1px solid var(--success);color:var(--success);
  border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:600}
.pill-unprocessed{border:1px dashed var(--warning);color:var(--warning);
  border-radius:999px;padding:1px 8px;font-size:11.5px}
/* წყარო/საავტორო: დამკვეთი ლურჯი · გარე საიტი იისფერი · NAEC წითელი */
.pill-src-client{background:var(--brand-soft);color:var(--brand);
  border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:600}
.pill-src-site{background:#F1EAFB;color:#6B46C1;
  border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:600}
.pill-src-naec{background:#FDECEA;color:#C0392B;
  border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:600}
/* განმარტებების მოდალი — ვარიანტი-ვარიანტ, სწორი მწვანე ჩიპით */
.ex-q-foot{margin-top:14px;display:flex;justify-content:flex-end}
.ex-explain-dialog{border:none;border-radius:16px;padding:0;
  max-width:560px;width:calc(100% - 32px);box-shadow:var(--shadow)}
.ex-explain-dialog::backdrop{background:rgba(14,22,32,.45)}
.ex-explain-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--rule)}
.ex-explain-head form{margin:0}
.ex-explain-body{padding:16px 18px;display:flex;flex-direction:column;
  gap:14px;max-height:70vh;overflow:auto}
.ex-explain-row{display:flex;gap:12px;align-items:flex-start}
.ex-chip-good{background:var(--success);border-color:var(--success);color:#fff}
.ex-explain-text{font-size:14.5px;line-height:1.55;min-width:0}
/* არევის ჩამრთველები — ჩიპები, ჩართული ბრენდისფრად ივსება */
.ex-tools{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 18px}
.ex-tool{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--rule);border-radius:999px;padding:7px 15px;
  font-size:13.5px;background:var(--surface);user-select:none}
.ex-tool input{accent-color:var(--brand);margin:0}
.ex-tool:hover{border-color:var(--brand)}
.ex-tool:has(input:checked){border-color:var(--brand);
  background:var(--brand-soft);font-weight:600}
/* hero-ს ღილაკზე ვიტრინის კითხვების ჯამი — თეთრი პილულა გრადიენტზე */
.btn-exercise .ex-btn-count{margin-inline-start:4px;padding:3px 12px;
  border-radius:999px;background:rgba(255,255,255,.18);font-weight:800;
  font-size:.95em;letter-spacing:.5px;white-space:nowrap}

/* --- სავარჯიშო --- */
.bank-card{display:block;background:var(--brand-soft);border:1px solid var(--brand);
  border-radius:var(--radius);padding:18px 22px;margin:24px 0;text-decoration:none;color:var(--ink)}
.bank-card b{display:block;font-size:17px;margin-bottom:4px;color:var(--brand)}
.bank-card span{color:var(--muted);font-size:14.5px}
.subject{margin:32px 0}
.subject h2{font-family:var(--font-sans);font-size:18px;font-weight:600;margin:0 0 12px}
.subject h2 em{color:var(--muted);font-style:normal;font-size:14px;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;gap:8px;align-items:center;padding:9px 15px;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  text-decoration:none;color:var(--ink);font-size:14.5px}
.chip:hover{border-color:var(--brand)}
.chip i{color:var(--muted);font-style:normal;font-size:13px}

/* --- შემოწმება --- */
/* რიგი მოსწავლეების ბარათებად (2026-08-24): თითო ბარათი — ერთი მოსწავლე,
   შიგნით მისი ტესტები ღია პასუხების რაოდენობით. */
.gq-list{display:grid;gap:14px;margin:24px 0 48px}
.gq-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.gq-head{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--rule)}
.gq-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.gq-name{font-size:16px}
.gq-mail{color:var(--muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.gq-count{margin-inline-start:auto;color:var(--warning);background:var(--warning-soft);
  border-radius:999px;padding:5px 13px;font-size:13.5px;white-space:nowrap}
.gq-details summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:10px 18px;color:var(--muted);font-size:14px;user-select:none;
}
.gq-details summary::-webkit-details-marker{display:none}
.gq-details summary:hover{color:var(--brand)}
.gq-details summary b{color:var(--ink);font-size:13.5px;background:var(--paper);
  border:1px solid var(--rule);border-radius:999px;padding:1px 9px}
.gq-caret{transition:transform .12s ease}
.gq-details[open] .gq-caret{transform:rotate(180deg)}
.gq-details[open] summary{border-bottom:1px solid var(--rule)}
.gq-tests{list-style:none;margin:0;padding:6px 0}
.gq-test{display:flex;align-items:center;gap:12px;padding:10px 18px}
.gq-test+.gq-test{border-top:1px solid var(--rule)}
.gq-test-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.gq-test-name{font-weight:600;font-size:15px}
.gq-test-meta{color:var(--muted);font-size:13.5px}
.gq-test .btn{margin-inline-start:auto}
@media (max-width:560px){
  .gq-head{flex-wrap:wrap}
  .gq-head .btn{width:100%;margin-inline-start:0}
  .gq-count{margin-inline-start:auto}
  .gq-test{flex-wrap:wrap}
  .gq-test .btn{width:100%;margin-inline-start:0}
}
.grade-grid{display:grid;gap:14px;grid-template-columns:1fr;margin:16px 0}
/* ერთი სვეტი: მეორეში ეტალონი იდგა და ის აღარ ჩანს (2026-08-21).
   ორსვეტიანი ბადე ცარიელ ნახევარს ტოვებდა. */

/* --- შემოწმება: ყველა პასუხი ერთ გვერდზე (2026-09-03) --- */
/* ზედა დაშორება სათაურის ბლოკზე დიდია: პირველი კითხვა „გასასწორებელია N
   პასუხი"-ს ეკვროდა და სია სათაურის ნაწილად ჩანდა. */
.grade-list{list-style:none;margin:34px 0 0;padding:0;
  display:flex;flex-direction:column;gap:26px}
/* შიდა padding აუცილებელია: მის გარეშე კითხვა ფერად ზოლს პირდაპირ ეკვროდა
   და ბლოკი ჩარჩოში ჩატენილი ჩანდა. */
.grade-item{list-style:none;scroll-margin-top:22px;
  border-inline-start:4px solid transparent;
  padding:16px 16px 18px;padding-inline-start:18px}
/* სწორი/შეცდომა ჩარჩოს ფერით გაირჩევა — გრძელ ნაშრომში თვალი ასე სწრაფად
   პოულობს, სად რა მოხდა. ფერი ნაზია: ბეჯებს ხმას არ უნდა უსწრებდეს. */
.grade-item-correct{border-inline-start-color:#5cb98b;
  background:linear-gradient(90deg,rgba(92,185,139,.10),transparent 220px);
  border-radius:var(--radius)}
.grade-item-wrong{border-inline-start-color:#e0a3a3;
  background:linear-gradient(90deg,rgba(224,163,163,.10),transparent 220px);
  border-radius:var(--radius)}
/* გამოტოვებული — ქარვისფერი, იმავე ტონში, რითაც სწორი პასუხია მონიშნული */
.grade-item-skipped{border-inline-start-color:#B7791F;
  background:linear-gradient(90deg,rgba(183,121,31,.10),transparent 220px);
  border-radius:var(--radius)}
/* შესაფასებელი — ლურჯი: სწორედ აქ რჩება მასწავლებლის საქმე */
.grade-item-pending{border-inline-start-color:#2f6fb5;
  background:linear-gradient(90deg,rgba(47,111,181,.10),transparent 220px);
  border-radius:var(--radius)}
.grade-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
/* ნომერი მრგვალი ჟეტონია — გრძელ სიაში თვალი მას მიჰყვება.
   `margin-top` სათაურის პირველ ხაზზე ასწორებს. გეომეტრიული ცენტრი აქ
   მაღლა ჩანდა: ქართულ ასოებს მაღალი ასენდერი აქვთ და ოპტიკური ცენტრი
   ხაზის შუაზე ქვემოთაა — ამიტომ ჟეტონი ოდნავ ჩამოწეულია. */
.grade-num{flex:0 0 auto;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;margin-top:2px;
  background:var(--accent,#1f6f4a);color:#fff;
  font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
/* ჟეტონი კითხვის მდგომარეობის ფერშია — ზოლთან ერთად სიგნალი ორჯერ იკითხება */
.grade-item-correct .grade-num{background:var(--success)}
.grade-item-wrong .grade-num{background:#C0392B}
.grade-item-skipped .grade-num{background:#B7791F}
.grade-item-pending .grade-num{background:#2f6fb5}
.grade-head-text{min-width:0}
.grade-head-text h3{margin:0 0 2px;font-size:17px;line-height:1.45}
/* `frozen` ფილტრი სათაურს `<p>`-ში ახვევს; მისი ნაგულისხმევი margin ტექსტს
   17px-ით ჩამოსწევდა და ნომერს კითხვას აცდენდა. */
.grade-head-text h3>p{margin:0}
.grade-head-text h3>p+p{margin-top:6px}
.grade-head-text .meta{margin:0}
/* დროის სტრიქონი ერთი ტონით ჩუმია — კონტექსტია, სათაური არა */
.grade-when{display:flex;align-items:center;gap:6px;margin-top:3px!important;
  font-size:13px;opacity:.85}
.grade-when .icon{flex:0 0 auto;opacity:.7}
/* ქულა და კომენტარი გვერდიგვერდ: ვიწრო ველი ცარიელ ადგილს არ ტოვებს */
.grade-fields{display:grid;gap:14px;grid-template-columns:150px 1fr;
  align-items:start}
.grade-fields .score-label{margin-bottom:0}
.grade-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin-top:14px}

/* --- ვერდიქტი: ორი ღილაკი ქულის ველის ნაცვლად (2026-09-03) --- */
/* კითხვა ბლოკშივე მეორდება: 20-პასუხიან გვერდზე სათაური ეკრანს გარეთაა */
.grade-verdict-q{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:0 0 14px;font-size:14.5px;color:var(--muted)}
.grade-verdict-q strong{margin-inline-start:auto;color:var(--ink);
  white-space:nowrap}
.grade-verdict-n{flex:0 0 auto;display:inline-grid;place-items:center;
  width:22px;height:22px;border-radius:50%;background:#2f6fb5;color:#fff;
  font-size:12.5px;font-weight:700}
.verdict-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.verdict-btn{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 16px;border:1.5px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);cursor:pointer;font-weight:600;font-size:15px;
  user-select:none}
.verdict-btn input{position:absolute;opacity:0;pointer-events:none}
.verdict-btn .icon{opacity:.55}
.verdict-yes:hover{border-color:var(--success)}
.verdict-no:hover{border-color:#C0392B}
/* არჩეული ვერდიქტი ცხადად უნდა გამოირჩეოდეს — 20 ბლოკში თვალი ასე პოულობს,
   რომელი დარჩა მოუნიშნავი */
.verdict-yes:has(input:checked){border-color:var(--success);background:#EAF7EF;
  color:var(--success)}
.verdict-no:has(input:checked){border-color:#C0392B;background:#FDECEA;
  color:#C0392B}
.verdict-btn:has(input:checked) .icon{opacity:1}
.grade-verdict .grade-comment{margin-top:14px}

/* დასრულების ზოლი — გვერდის ერთადერთი ჩამწერი მოქმედება */
.grade-finish{margin:28px 0 8px;padding:20px 22px;text-align:center;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius)}
.grade-finish .btn{min-width:280px}
.grade-finish .meta{margin:10px 0 0}
@media (max-width:719px){
  .verdict-choice{grid-template-columns:1fr}
  .grade-finish .btn{width:100%;min-width:0}
}
@media (max-width:719px){
  .grade-fields{grid-template-columns:1fr}
  .grade-actions .btn{width:100%}
}

/* ფოტოს გამადიდებელი: ახალი ტაბი მრავალგვერდიან ნაშრომს ვერ ათვალიერებინებდა */
.lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;gap:12px;padding:24px;
  background:rgba(16,22,30,.86)}
/* `display:flex` `hidden`-ს ჩრდილავს — გამადიდებელი დაუძახებლად იხსნებოდა */
.lightbox[hidden]{display:none}
.lb-img{max-width:min(92vw,1100px);max-height:88vh;object-fit:contain;
  border-radius:var(--radius);background:#fff}
.lb-nav,.lb-close{border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);
  border-radius:50%;display:grid;place-items:center;line-height:1}
.lb-nav{width:48px;height:48px;flex:0 0 auto;font-size:30px}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.26)}
.lb-close{position:absolute;top:18px;right:18px;width:40px;height:40px;font-size:18px}
.lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  margin:0;color:#fff;font-variant-numeric:tabular-nums;font-size:14px}
@media (max-width:719px){
  .lightbox{padding:10px;gap:4px}
  .lb-nav{width:40px;height:40px;font-size:24px}
}
.grade-col{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px 20px}
.grade-col h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.grade-col h4+p+h4{margin-top:16px}
.grade-form{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:20px 22px;margin:16px 0}
.score-label{display:block;margin-bottom:16px;font-weight:600;font-size:14.5px}
.score-label input,.score-label textarea{display:block;width:100%;margin-top:8px;
  padding:11px 14px;border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:16px;font-weight:400;
  background:var(--paper);color:var(--ink)}
.score-label input[type=number]{max-width:140px;font-variant-numeric:tabular-nums}
.inline-check{display:flex;gap:8px;align-items:center;color:var(--muted);
  font-size:14.5px;margin-bottom:8px}
.chips button.chip{cursor:pointer;font-family:var(--font-sans);text-align:left}

/* --- გასაჩივრება და შეტყობინებები --- */
.appeal-box{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.appeal-box summary{cursor:pointer;color:var(--muted);font-size:14px}
.appeal-box summary:hover{color:var(--brand)}
.appeal-box form{display:grid;gap:10px;margin-top:12px;max-width:520px}
.appeal-box select,.appeal-box textarea{padding:10px 12px;border:1px solid var(--rule);
  border-radius:var(--radius);font-family:var(--font-sans);font-size:15px;
  background:var(--paper);color:var(--ink)}
.appeal-box .btn{justify-self:start}

.correction{border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px 18px;margin:0 0 16px}
.correction legend{font-weight:600;font-size:14.5px;padding:0 6px}
.correction .opts{margin-top:10px}
.score-label select{display:block;width:100%;max-width:320px;margin-top:8px;
  padding:11px 14px;border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:16px;background:var(--paper);color:var(--ink)}

.alert{background:var(--warning-soft);border-left:4px solid var(--warning-line);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;margin:20px 0}
.alert b{color:var(--warning)}
.alert p,.alert ul{margin:6px 0 0}
.alert ul{padding-left:20px;font-size:14.5px}

/* შეტყობინების ზოლი გვერდის ჩარჩოშია, `main`-ის გარეთ — ყველა გვერდზე
   ერთ ადგილას დგას, მათ შორის იქაც, სადაც `main` ხელით არის აწყობილი. */
.messages-bar{
  width:100%;max-width:var(--page);margin:0 auto;padding:16px var(--gutter) 0;
}
.messages{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.msg{padding:12px 16px;border-radius:var(--radius);font-size:14.5px;border:1px solid var(--rule)}
.msg-success{background:var(--success-soft);border-color:var(--success);color:var(--success-deep)}
.msg-error{background:var(--danger-soft);border-color:var(--danger);color:var(--danger-deep)}

/* --- შეტყობინებები --- */
.bell{display:inline-flex;align-items:center;justify-content:center;min-width:22px;
  height:22px;padding:0 6px;margin-left:6px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.note-unread{border-left:3px solid var(--brand)}
.note-body{white-space:pre-line}

/* --- შეტყობინების ტიპი: ხატულა და ფერი (2026-09-03) --- */
/* ხუთივე ტიპი ერთნაირად ჩანდა და სიაში თვალი მათ ვერ არჩევდა */
.note{display:flex;align-items:flex-start;gap:14px}
.note-icon{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--paper);color:var(--muted);
  border:1px solid var(--rule)}
.note-icon .icon{width:20px;height:20px}
.note .row-main{flex:1 1 auto;min-width:0}

.note-test_assigned .note-icon{background:#EEF4FB;border-color:#a9c4e2;color:#2f6fb5}
.note-test_opened .note-icon{background:#EAF7EF;border-color:#5cb98b;color:#1f6f4a}
.note-deadline_soon .note-icon{background:#FEF6E7;border-color:#e2c07a;color:#B7791F}
.note-graded .note-icon{background:#EAF7EF;border-color:#5cb98b;color:#1f6f4a}
.note-appeal_answered .note-icon{background:#F3EEFA;border-color:#bda9e0;color:#6b4ea8}
@media (max-width:479px){
  .note{gap:10px}
  .note-icon{width:32px;height:32px}
  .note-icon .icon{width:17px;height:17px}
}

/* --- პროგრესი --- */
.bar{position:relative;height:26px;background:var(--surface);border:1px solid var(--rule);
  border-radius:999px;overflow:hidden;margin:8px 0}
.bar span{display:block;height:100%;background:var(--brand);transition:width .3s ease}
.bar b{position:absolute;top:0;right:12px;line-height:26px;font-size:13px;
  font-variant-numeric:tabular-nums}
.bar-sm{height:10px;margin:0}
.bar-good span{background:var(--success)}
.bar-mid span{background:var(--warning-line)}
.bar-weak span{background:var(--danger)}

.topic-row{display:grid;grid-template-columns:1fr 90px 52px 60px;gap:12px;
  align-items:center;padding:9px 0;border-bottom:1px solid var(--rule)}
@media (min-width:620px){.topic-row{grid-template-columns:1fr 200px 52px 60px}}
.topic-row:last-child{border-bottom:none}
.topic-name{font-size:15px}
.topic-pct,.topic-count{font-size:13.5px;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}

.scroll-x{overflow-x:auto}
table.results{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px}
table.results th{text-align:left;font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);padding:8px 12px;
  border-bottom:1px solid var(--rule)}
table.results td{padding:10px 12px;border-bottom:1px solid var(--rule)}
table.results tr:last-child td{border-bottom:none}
table.results .num{font-variant-numeric:tabular-nums;text-align:right}
.ok{color:var(--success)}
.fail{color:var(--danger)}
.muted{color:var(--muted)}

/* --- საჯარო ანგარიში --- */
.report-head{padding:40px 0 8px;border-bottom:2px solid var(--ink);margin-bottom:24px}
.report-brand{font-family:var(--font-display);font-size:22px;color:var(--brand);margin:0}
.report-note{color:var(--muted);font-size:13.5px;border-top:1px solid var(--rule);
  padding-top:16px;margin:40px 0 56px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.compare div{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px 20px;text-align:center}
.compare b{display:block;font-family:var(--font-section);font-size:30px}
.compare span{color:var(--muted);font-size:13.5px}

/* --- ფოტო-პასუხები --- */
.photo-box{border:1px dashed var(--rule);border-radius:var(--radius);padding:16px 18px}
.photo-box input[type=file]{display:block;margin:10px 0;font-family:var(--font-sans);
  font-size:15px}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.thumb{position:relative;display:block;width:96px;height:96px;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--rule);background:var(--paper)}
.thumb-lg{width:150px;height:150px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb span{position:absolute;left:4px;bottom:4px;background:rgba(22,32,43,.8);
  color:#fff;font-size:11.5px;padding:1px 6px;border-radius:4px}
.photo-upload{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* --- ადმინის დაფა --- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin:20px 0}
@media (min-width:720px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:block;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:var(--ink)}
a.tile:hover{border-color:var(--brand)}
.tile b{display:block;font-family:var(--font-section);font-size:34px;line-height:1.2;
  font-variant-numeric:tabular-nums}
.tile span{color:var(--muted);font-size:13.5px}
.tile-alert{border-left:4px solid var(--danger)}
.tile-alert b{color:var(--danger)}
.tile-quiet b{color:var(--muted)}

/* --- პრევიუს ბანერი --- */
.preview-bar{position:sticky;top:0;z-index:50;display:flex;gap:16px;flex-wrap:wrap;
  align-items:center;justify-content:center;background:var(--warning);color:#fff;
  padding:10px 18px;font-size:14.5px}
.preview-bar b{font-weight:700}
.preview-bar a{color:#fff;text-decoration:underline;font-weight:600}

/* --- მასობრივი იმპორტი --- */
.upload-grid{display:grid;gap:14px;grid-template-columns:1fr;margin:20px 0}
@media (min-width:760px){.upload-grid{grid-template-columns:1fr 1fr}}
.upload-card{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:20px 22px}
.upload-card h2{font-family:var(--font-sans);font-size:18px;font-weight:600;margin:0 0 6px}
/* ფაილის ამრჩევი — ბრაუზერის ნაგულისხმევი კონტროლის ნაცვლად.
   „Choose File / No file chosen" ინგლისურად და სისტემის სტილით ჩნდებოდა,
   ანუ ერთადერთი ადგილი მთელ ადმინში, სადაც ღილაკი ჩვენი არ იყო
   (მფლობელი, 2026-09-06). იგივე ხერხი, რაც პროფილის `.avatar-upload`-ში:
   ველი ღილაკის ქვეშ დევს გამჭვირვალედ — ანუ ფოკუსსა და `required`-ის
   შეტყობინებას ინარჩუნებს, `display:none` კი ორივეს კლავდა. */
.file-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0}
.file-pick-btn{position:relative;overflow:hidden;cursor:pointer;flex:none}
.file-pick-btn input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;
}
.file-pick-name{min-width:0;flex:1 1 140px;color:var(--muted);font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-pick.has-file .file-pick-name{color:var(--ink);font-weight:600}
.upload-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* --- კითხვის და განმარტების ილუსტრაციები --- */
.q-image{display:block;max-width:100%;height:auto;margin:12px 0 4px;
  border:1px solid var(--rule);border-radius:var(--radius)}
.exp-image{display:block;max-width:min(100%,320px);height:auto;margin:8px 0 0;
  border:1px solid var(--rule);border-radius:var(--radius)}

/* --- განმარტება: ვიზუალურ რედაქტორში დაწერილი HTML --- */
/* ტიპოგრაფია აქ ცალკე იწერება, რადგან შიგთავსი მასწავლებელს დაუწერია:
   სია, ცხრილი და სათაური მოსწავლის ეკრანზე ისევე უნდა გამოიყურებოდეს,
   როგორც რედაქტორში. */
.exp-text{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:6px}
.exp-text > :first-child{margin-top:0}
.exp-text > :last-child{margin-bottom:0}
.exp-text p{margin:0 0 8px}
.exp-text ul,.exp-text ol{margin:0 0 8px;padding-inline-start:22px}
.exp-text li{margin-bottom:4px}
.exp-text h3,.exp-text h4{
  font-family:var(--font-sans);font-size:15.5px;font-weight:600;
  color:var(--ink);margin:12px 0 6px;
}
.exp-text strong{color:var(--ink)}
.exp-text a{color:var(--brand)}
.exp-text blockquote{
  margin:8px 0;padding:6px 0 6px 12px;
  border-inline-start:3px solid var(--rule);color:var(--muted);
}
.exp-text code{
  background:var(--paper);border-radius:4px;padding:1px 5px;font-size:13.5px;
}
.exp-text img{max-width:100%;height:auto;border-radius:var(--radius);margin:6px 0}
.exp-text table{border-collapse:collapse;width:100%;margin:8px 0;font-size:13.5px}
.exp-text th,.exp-text td{border:1px solid var(--rule);padding:6px 8px;text-align:start}
.exp-text th{background:var(--paper);font-weight:600;color:var(--ink)}
/* ცხრილი ვიწრო ეკრანს სცდება — გვერდი კი არ უნდა გაიწელოს, თვითონ
   ცხრილმა უნდა იცოცოს. */
.exp-text{overflow-x:auto}

/* ვიდეო 16:9-ში — `aspect-ratio` padding-hack-ს ცვლის */
.exp-video-frame{
  position:relative;margin:10px 0 0;max-width:560px;
  aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--rule);background:var(--paper);
}
.exp-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.exp-video{display:inline-block;margin-top:8px;font-size:14px;color:var(--brand)}

/* ===========================================================================
   აპლიკაციის კარკასი — ჰედერი, ნავიგაცია, ქვედა ზოლი
   ზომები: docs/design/01-shell-home.md
   =========================================================================== */

/* მხოლოდ სკრინრიდერისთვის — ფერი ან ხატულა მარტო ვერ ატარებს მნიშვნელობას */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--surface);color:var(--ink);padding:12px 18px;
  border:1px solid var(--rule);border-radius:var(--radius);font-weight:600;
}
.skip-link:focus{left:12px;top:12px}

.icon{flex:none;display:inline-block;vertical-align:middle}

.app-header{background:var(--surface);border-bottom:1px solid var(--rule)}
.app-header-inner{
  max-width:var(--page);margin:0 auto;padding:0 var(--gutter);
  min-height:72px;display:flex;align-items:center;gap:24px;
}

/* ლოგო ახლა სურათია და არა ტექსტი — სიმაღლე მართავს, სიგანე თავად ჯდება.
   display:flex კონტეინერზე აუცილებელია: inline-სურათს baseline-ის ქვეშ
   რამდენიმე პიქსელი რჩებოდა და ჰედერი ასიმეტრიული იყო. */
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{display:block;height:48px;width:auto}

.app-nav{display:flex;align-items:center;gap:28px;margin-inline-start:auto}

.nav-link{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 2px;
  /* ნავიგაცია მთავრულია — BPG Nino Mtavruli. ეს შრიფტის სტილია და არა
     ტექსტისა: ბაზაში და HTML-ში ასოები ჩვეულებრივი რჩება. */
  font-family:var(--font-nav);
  font-size:15px;font-weight:500;line-height:1.2;
  color:var(--ink);text-decoration:none;
  /* ქართული პუნქტები გრძელია: გადატანა ჰედერს ორ სტრიქონად ჭიმავს */
  white-space:nowrap;
}
.nav-link:hover{color:var(--brand)}
.nav-link.is-active{font-weight:600;box-shadow:inset 0 -2px 0 var(--brand)}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);
  font-size:11px;font-weight:700;line-height:1;
}

.header-bell{
  display:none;position:relative;color:var(--ink);
  align-items:center;justify-content:center;min-width:44px;min-height:44px;
}
.header-bell:hover{color:var(--brand)}
.bell-badge{
  position:absolute;top:-4px;right:-6px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);
  font-size:10px;font-weight:700;line-height:1;
}

.user-menu{position:relative;flex:none}
.user-menu summary{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 10px;border-radius:var(--radius);
  cursor:pointer;list-style:none;
}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary:hover{background:var(--paper)}
.user-menu[open] summary{background:var(--brand-soft)}
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);
  font-size:16px;font-weight:700;line-height:1;
}
.user-name{
  font-size:15px;font-weight:600;max-width:12ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.caret{color:var(--muted)}
.user-menu-panel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  min-width:200px;padding:6px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.user-menu-panel a{
  display:block;padding:11px 12px;border-radius:6px;
  color:var(--ink);text-decoration:none;font-size:15px;
}
.user-menu-panel a:hover{background:var(--paper)}

.tabbar{display:none}

@media (max-width:1023px){
  /* 768px-ზე ლოგო + 4 პუნქტი + მომხმარებელი ერთ სტრიქონში ვერ ეტევა.
     ჯერ სახელს ვიღებთ (ავატარი რჩება), მერე რიტმს ვამჭიდროვებთ. */
  .app-header-inner{min-height:68px;padding:0 20px;gap:16px}
  .brand img{height:40px}
  .app-nav{gap:18px}
  .nav-link{font-size:14.5px}
  .user-name{display:none}
  .user-menu summary{padding:0 6px;gap:6px}
}

/* ადმინის ჰედერი 768px-ზე (iPad portrait): მოსწავლის 4 პუნქტის ნაცვლად
   6 პუნქტი + „გამოსვლა" 7px-ით სცდებოდა და გვერდი ჰორიზონტალურად
   მიცურავდა, „გამოსვლა" კი შუა სიტყვაზე იჭრებოდა (მფლობელი, 2026-09-06).
   რიტმის დამჭიდროება ჯობია ბმულის დამალვას — გამოსვლა ერთადერთი გზაა. */
@media (max-width:899px){
  .app-header-inner{gap:12px}
  .app-nav{gap:12px}
  .nav-link{font-size:14px;gap:6px}
  .header-exit{margin-inline-start:6px}
}

@media (max-width:767px){
  .app-header-inner{min-height:56px;padding:0 16px;gap:12px}
  .brand img{height:36px}
  .app-nav{display:none}
  .header-bell{display:inline-flex;margin-inline-start:auto}
  /* მოსწავლეს ზარი ქვედა ზოლშია — ჰედერში ის დუბლი იყო, ორივე ბეჯით */
  .header-bell.bell-dup{display:none}
  /* მარჯვნივ მიწოლა ზარზე იდგა; მისი დამალვისას ავატარი ლოგოს მიეკრა */
  .user-menu{margin-inline-start:auto}
  .header-bell:not(.bell-dup)+.user-menu{margin-inline-start:0}
  .user-name,.caret{display:none}
  .user-menu summary{padding:0 4px}

  /* ცერა თითი ეკრანის ქვედა მესამედს სწვდება — ამიტომ მოსწავლის
     ნავიგაცია ქვემოთაა და არა ჰამბურგერში. */
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:flex;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--rule);
    box-shadow:0 -1px 2px rgba(22,32,43,.06), 0 -12px 32px -20px rgba(22,32,43,.2);
  }
  /* `1 1 0`: მოსწავლეს 4 ჩანართი აქვს, ადმინს — 5; ორივე თანაბრად
     იყოფა და პროცენტს არ ეკიდება. */
  .tab{
    flex:1 1 0;min-width:0;min-height:48px;border-radius:6px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:var(--muted);text-decoration:none;
    /* ქვედა ზოლიც ნავიგაციაა — იგივე შრიფტი, რაც ჰედერში. */
    font-family:var(--font-nav);
    /* 12px და არა 11: ქართული 11-ზე მჭიდროდ იკითხება, ეს კი ერთადერთი
       ნავიგაციაა მობილურზე (მფლობელი, 2026-09-06). */
    font-size:12px;font-weight:500;line-height:1.2;text-align:center;
  }
  /* ხატულა სპრაიტიდანაა, ანუ `currentColor`-ს ემორჩილება: ფერს `.tab`
     და `.tab.is-active` ისედაც აყენებენ და ხატულა თავისთავად მიჰყვება.
     PNG-ის დროს იმავეს გამჭვირვალობით ვაღწევდით. */
  .tab-img{display:block;width:24px;height:24px}
  .tab.is-active{color:var(--brand);font-weight:600}
  .tab:active{background:var(--brand-soft)}
  .tab-icon-wrap{position:relative;display:inline-flex}
}

/* თითის სამიზნე სენსორულ ეკრანზე (მფლობელი, 2026-09-06): სახელის ბმული
   15px სიმაღლის იყო, ჯგუფის pill — 25px. `padding`-ს ვუმატებთ და არა
   `height`-ს, რომ სტრიქონების რიტმი არ შეიცვალოს. */
@media (pointer:coarse){
  .test-name a{display:inline-block;padding:6px 0}
  .pill-group{padding-top:6px;padding-bottom:6px;line-height:1.4}
  .topic-row,.result-row,.quick-row{min-height:44px}
}

/* ===========================================================================
   სადესანტო გვერდი
   =========================================================================== */

/* ორსვეტიანი ჰერო: ტექსტი მარცხნივ, ილუსტრაცია მარჯვნივ.
   ილუსტრაცია ფონად არ იდება — დეტალური ხატვაა და გამჭვირვალობის ქვეშ
   ტექსტის კონტრასტს ამცირებდა. */
.hero{
  display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:center;
  text-align:start;
}
.hero-text{min-width:0}
.hero h1{margin:0 0 12px}
.hero-lead{margin:0 0 24px}
.hero-note{text-align:start}
.hero-art{display:block;width:100%;max-width:380px;height:auto;justify-self:end}


.hero h1{font-size:42px;margin:0 0 12px}
.hero-lead{color:var(--muted);font-size:17px;max-width:52ch;margin:0 auto 24px}

.features{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin:0}
.feature{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:24px 20px;
}
/* წრე დაბრუნდა. ის მაშინ გავიდა, როცა ხატულა ფერადი ნახატი იყო და
   ორი კონცენტრული ფორმა ერთმანეთს ეჯიბრებოდა; ხაზოვან ხატულას კი
   პირიქით — ფონი სჭირდება, თორემ 96px-იან ველში ის ცარიელ ადგილს
   ჰგავს. */
.feature .feature-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:96px;height:96px;border-radius:999px;margin-bottom:16px;
  background:var(--brand-soft);color:var(--brand);
}
.feature .feature-icon .icon{width:40px;height:40px}
.feature-body b{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.feature-body span{color:var(--muted);font-size:14px}

@media (max-width:1023px){
  .hero{grid-template-columns:1fr 280px;gap:28px}
  .hero h1{font-size:36px}
  .features{grid-template-columns:repeat(2,1fr)}
  .features .feature:last-child{grid-column:1 / -1}
}
@media (max-width:767px){
  /* ერთი სვეტი და ცენტრი: 375px-ზე ორი სვეტი ორივეს ჭყლეტს.
     ილუსტრაცია ღილაკის ქვემოთ მიდის, რომ შესვლა პირველ ეკრანზე დარჩეს. */
  .hero{grid-template-columns:1fr;gap:24px;text-align:center;justify-items:center}
  .hero-note{text-align:center}
  .hero-art{max-width:240px;justify-self:center}
  .hero h1{font-size:28px}
  .hero-lead{font-size:16px}
  .features{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .features .feature:last-child{grid-column:auto}
  .feature{padding:20px 16px}
  .feature .feature-icon{width:80px;height:80px;margin-bottom:12px}
  .feature .feature-icon .icon{width:34px;height:34px}
}

/* ===========================================================================
   მოსწავლის მთავარი — დღევანდელი სურათი
   =========================================================================== */

.greeting{font-size:42px;margin:0 0 20px}

.now-card{
  position:relative;display:grid;grid-template-columns:96px 1fr;
  align-items:center;column-gap:16px;
  min-height:192px;padding:20px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;
}
.now-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--watermark);
}
.now-card.is-urgent{background:var(--warning-soft);border-color:var(--warning-line)}
.now-card.is-urgent::before{background:var(--warning-line)}
.now-card.is-empty::before{background:var(--rule)}

.now-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:80px;height:80px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);
}
.now-card.is-urgent .now-icon{background:#F5EAD0;color:var(--warning)}

.now-body{min-width:0}
.tag{
  display:inline-flex;align-items:center;
  min-height:28px;padding:0 10px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);
  font-size:13px;font-weight:600;line-height:1;
}
.tag.is-urgent{background:#F5EAD0;color:var(--warning)}
.now-title{
  font-family:var(--font-sans);font-size:28px;font-weight:700;
  line-height:1.2;margin:10px 0 0;
}
.now-meta{
  display:flex;align-items:center;gap:8px;
  color:var(--muted);font-size:15px;font-weight:500;margin:8px 0 0;
}
.now-card.is-urgent .now-meta{color:var(--warning)}
.now-card .btn{margin-top:16px}

.summary{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin:16px 0}
.summary-card{
  display:block;min-height:136px;padding:18px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);
}
a.summary-card:hover{border-color:var(--brand)}
.summary-card .summary-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:999px;margin-bottom:12px;
}
.summary-card .summary-icon.is-practice{background:#EAF1F8;color:var(--brand)}
.summary-card .summary-icon.is-mistakes{background:var(--danger-soft);color:var(--danger)}
.summary-card .summary-icon.is-progress{background:var(--success-soft);color:var(--success)}
.summary-card > b{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.summary-card > span{display:block;color:var(--muted);font-size:14px}
.summary-card .summary-number{
  display:block;font-family:var(--font-section);font-size:42px;font-weight:700;
  line-height:1.18;color:var(--ink);margin:2px 0;
}
.summary-card .summary-bar{
  height:10px;border-radius:999px;background:var(--rule);
  overflow:hidden;margin-top:10px;
}
.summary-bar i{display:block;height:100%;background:var(--success);border-radius:999px}

.recent{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px;margin:16px 0 32px;
}
.recent h2{
  font-family:var(--font-sans);font-size:18px;font-weight:600;
  line-height:1.3;margin:0 0 8px;
}
.recent-row{
  display:grid;grid-template-columns:minmax(0,1fr) 96px 128px;
  align-items:center;column-gap:16px;
  min-height:52px;padding:10px 0;border-bottom:1px solid var(--rule);
  color:var(--ink);text-decoration:none;
}
.recent-row:last-child{border-bottom:0}
a.recent-row:hover{background:#F8FBFD}
.recent-name{
  font-size:14.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recent-score{
  font-size:14.5px;font-weight:600;text-align:end;
  font-variant-numeric:tabular-nums;
}
.verdict-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:999px;border:1px solid;
  font-size:12px;font-weight:600;line-height:1;
}
.verdict-badge.is-pass{background:var(--success-soft);color:var(--success);border-color:var(--success)}
.verdict-badge.is-fail{background:var(--danger-soft);color:var(--danger-deep);border-color:var(--danger)}
.verdict-badge.is-pending{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}

@media (max-width:1023px){
  .greeting{font-size:34px}
  .now-card{min-height:176px;padding:18px}
  .now-icon{width:72px;height:72px}
  .now-title{font-size:24px}
  .summary{grid-template-columns:repeat(2,1fr)}
  .summary-card:last-child{grid-column:1 / -1}
  .summary-card{min-height:132px}
  .summary-card .summary-number{font-size:40px}
  .recent{padding:16px}
  .recent-row{min-height:50px}
}

@media (max-width:767px){
  .greeting{font-size:28px}
  .now-card{
    grid-template-columns:64px 1fr;align-items:start;
    column-gap:12px;min-height:148px;padding:16px;
  }
  .now-icon{width:56px;height:56px}
  .now-title{font-size:20px}
  .now-meta{font-size:14px}
  .now-card .btn{margin-top:12px;width:100%}
  .summary{grid-template-columns:1fr;gap:12px}
  .summary-card:last-child{grid-column:auto}
  .summary-card{min-height:120px;padding:16px}
  .summary-card > b{font-size:16px}
  .summary-card > span{font-size:13.5px}
  .summary-card .summary-number{font-size:34px}
  .recent{padding:14px}
  .recent-row{
    grid-template-columns:minmax(0,1fr) 64px 84px;
    column-gap:10px;min-height:44px;padding:8px 0;
  }
  .recent-name,.recent-score{font-size:13.5px}
  .verdict-badge{padding:4px 8px;font-size:12px}
}

/* ===========================================================================
   სადესანტო გვერდის სექციები — ნაბიჯები, მასწავლებლის ზოლი, დამხურავი
   ზომები: docs/design/01-shell-home.md
   =========================================================================== */

/* სექციების რიტმი განზრახ ცალკეა და არა საერთო `main`-ის padding-ში:
   სადესანტო გვერდი სექციების თანმიმდევრობაა და არა ერთი ბლოკი. */
.landing{padding-top:48px;padding-bottom:40px}
.landing .section{margin-top:48px}
.landing .hero + .section{margin-top:64px}

.hero{padding:0}
.hero .btn{margin:0}
.btn-wide{min-width:272px}

/* ორი პროვაიდერის ღილაკი: დესკტოპზე გვერდიგვერდ, ვიწროზე — სვეტად,
   შესამჩნევი დაშორებით (მფლობელი, 2026-08-23). ერთ პროვაიდერზეც
   უვნებელია — flex ერთ შვილს უბრალოდ განზე არ წევს. */
.login-choices{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.login-choices form{margin:0}
.hero .login-choices{justify-content:flex-start}
.auth-card .login-choices{flex-direction:column;gap:16px;align-items:stretch}
@media (max-width:767px){
  .login-choices{flex-direction:column;gap:18px;align-items:center;width:100%}
  .login-choices form{width:100%;max-width:320px}
  .login-choices .btn-wide{width:100%}
}
.hero-note{color:var(--muted);font-size:13.5px;line-height:1.45;
  text-align:center;margin:12px 0 0}

.section-title{
  font-family:var(--font-section);font-size:30px;font-weight:400;
  line-height:1.2;color:var(--ink);text-align:center;margin:0 0 20px;
}

.steps{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.step{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:190px;padding:24px 20px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
}
.step .step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:999px;margin-bottom:16px;
  background:var(--brand-soft);border:1px solid var(--rule);
  font-family:var(--font-display);font-size:26px;font-weight:600;
  line-height:1.2;color:var(--brand);
}
.step > b{font-size:17px;font-weight:600;line-height:1.35;margin-bottom:8px}
.step > span{color:var(--muted);font-size:14px;line-height:1.55}

@media (max-width:1023px){
  .landing{padding-top:40px;padding-bottom:36px}
  .landing .section{margin-top:40px}
  .landing .hero + .section{margin-top:52px}

  .section-title{font-size:28px;margin-bottom:18px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps .step:last-child{grid-column:1 / -1}
  .step{min-height:178px;padding:22px 18px}

}

@media (max-width:767px){
  .landing{padding-top:28px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .landing .section{margin-top:36px}
  .landing .hero + .section{margin-top:40px}

  .section-title{font-size:24px;line-height:1.15;margin-bottom:16px}
  .steps{grid-template-columns:1fr;gap:12px}
  .steps .step:last-child{grid-column:auto}
  .step{min-height:164px;padding:20px 16px}
  .step > b{font-size:16px}
  .step > span{font-size:13.5px}

  .btn-wide{width:100%;max-width:320px}
  .hero-note{font-size:13px;margin-top:10px}
}

/* ===========================================================================
   შესვლის გვერდები — allauth და ადმინი
   ერთი ბარათი ეკრანის ცენტრში: ამ გვერდებზე ერთადერთი მოქმედებაა.
   =========================================================================== */

.auth-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px 16px;background:var(--paper);
}
.auth-card{
  width:100%;max-width:420px;margin:32px auto;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:32px 28px;text-align:center;
}
.auth-logo{display:block;height:48px;width:auto;margin:0 auto 20px}
.auth-art{display:block;width:100%;max-width:260px;height:auto;margin:0 auto 18px}
.auth-card h1{font-size:28px;margin:0 0 10px}
.auth-lead{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 22px}
.auth-card .btn-wide{width:100%;max-width:none;min-width:0}
.auth-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.auth-note{color:var(--muted);font-size:13.5px;margin:18px 0 0}

/* `align-content:start` აუცილებელია: გვერდიგვერდ ველებში მინიშნების
   ხაზი მეზობლის ინპუტს ჭიმავდა და სიმაღლეები ცდებოდა (2026-08-24) */
.auth-field,.form-field{display:grid;gap:6px;margin-bottom:16px;
  text-align:start;align-content:start}
.auth-field > span,.form-field > span{
  font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
}
.auth-field input,.form-field input,.form-field textarea{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;
}
.auth-field select,.auth-field input[type="number"],.form-field select{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background-color:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;
}
.auth-field select,.form-field select{padding-inline-end:36px}
.auth-field input:focus-visible,.auth-field select:focus-visible{
  outline:2px solid var(--brand);outline-offset:1px;
}
/* `.auth-field`-ს `display:grid` აქვს და ის ბრაუზერის `[hidden]`-ს ჯაბნის:
   კლასის ველი დამალვის მიუხედავად ჩანდა. */
.auth-field[hidden]{display:none}
.field-error{display:block;font-style:normal;font-size:13px;color:var(--danger)}
.field-hint{display:block;font-style:normal;font-size:13px;color:var(--muted)}

/* პროფილის ფორმა ექვსველიანია — 420px მისთვის ვიწროა. */
.auth-card-wide{max-width:520px;text-align:start}
/* ⚠ სპეციფიკურობა: `main#main>*{max-width:var(--measure)}` (0,1,1) უბრალო
   `.auth-card`-ს (0,1,0) ჯაბნიდა და ბარათი 900px-ზე იწელებოდა — ველები
   გაწელილი იყო და ავატარების რიგი 160px-იან სურათებად იშლებოდა.
   იგივე სელექტორი იმავე წონით ამ შეჯახებას წყვეტს. */
main#main>.auth-card{max-width:420px}
/* პროფილიც ცენტრშია, დანარჩენი გვერდების მსგავსად (მფლობელის
   გადაწყვეტილება, 2026-08-23 — მანამდე ყველა გვერდი მარცხნივ იდგა). */
main#main>.auth-card-wide{max-width:var(--measure)}
/* ბრიფინგი ვიწროა განზრახ: 900px-ზე გაწელილი `dt`/`dd` წყვილი თვალს
   მთელ სიგანეზე ატარებდა და „ბარიერი … 60%" კავშირი იკარგებოდა.
   იმავე წონის სელექტორი — იგივე მიზეზი, რაც `.auth-card`-ზე. */
main#main>.test-card{max-width:640px}

/* --- ფონური ილუსტრაცია ---------------------------------------------------
   ცალკეული გვერდი (დღეს — ტესტის ბრიფინგი) მთელ ტილოზე ხატავს რბილ
   ილუსტრაციას. კლასი `<body>`-ზეა და არა `main`-ზე: `main#main>*`
   შვილს სიგანეში ზღუდავს, ანუ ფონი ბარათის უკან ვერ გავიდოდა.

   `background-color` ცხადადაა მითითებული — სურათის კიდეს იქით და მის
   ჩატვირთვამდე გვერდი მაინც `--paper`-ია და არა თეთრი ციმციმი.
   (სურათის ფონი #F4F7F9-ია, ჩვენი --paper #F4F6F8 — სხვაობა ერთი
   ერთეულია და ნაკერი არ ჩანს.)

   `fixed` განზრახ მხოლოდ დიდ ეკრანზეა: ილუსტრაცია სქროლზე ადგილზე
   რჩება და ჩარჩოს ქმნის. მობილურზე იგივე თვისება iOS-ის ძველ
   ვერსიებზე ხტუნვას იწვევს, ხოლო `cover` ვიწრო, მაღალ ეკრანზე
   სურათს იმდენად აწელავს, რომ კუთხეების ნახატი ეკრანს გარეთ რჩება —
   ამიტომ იქ სიგანეზე მიბმული, ზემოდან დაწყობილი ვარიანტია. */
@media (max-width:768px){
  /* ვიწრო ეკრანზე სრული სიგანე ნახატს ისე ამცირებს, რომ კუთხეების
     დეტალი ლაქად იქცევა — 160% მას წასაკითხ ზომაზე აბრუნებს. */
  body{background-size:160% auto}
}
.auth-card-wide h1,.auth-card-wide .auth-lead{text-align:start}
/* ველები ვიწრო რჩება: 900 პიქსელზე გაწელილი „სახელი" კითხვას ურთულებს. */
main#main>.auth-card-wide .auth-field,
main#main>.auth-card-wide>form>button{max-width:520px}

@media (max-width:767px){
  .auth-card{padding:24px 20px;margin:16px auto}
  .auth-art{max-width:200px;margin-bottom:14px}
  .auth-card h1{font-size:24px}
}

/* ===========================================================================
   ადმინის დაფა
   ზომები: docs/design/02-dashboard.md
   =========================================================================== */


.section-label{
  font-family:var(--font-sans);font-size:16px;font-weight:600;
  line-height:1.35;color:var(--ink);margin:28px 0 12px;
}
.page-title + .section-label{margin-top:24px}

.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* --- „საქმის" ბარათი: მთელი ბარათი ბმულია --- */
.work-tile,.fact-tile{
  position:relative;display:block;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);
}
/* ხატულა და რიცხვი ერთ რიგშია, წარწერა — ქვემოთ, სრულ სიგანეზე.
   ხატულა ამბობს **რა არის** ბარათი, რიცხვი — **რამდენად სასწრაფოა**;
   ორივე ერთ ხაზზე უფრო სწრაფად იკითხება, ვიდრე ერთმანეთის ქვეშ. */
.work-tile{
  /* ისარი ბადის სვეტია და არა `position:absolute`: აბსოლუტურ ისარს
     რიცხვი ქვემოდან ეფარებოდა („113121"), padding-ით მისი არიდება კი
     მუდმივ თვალზომას ნიშნავდა. სამი სვეტი თვითონ იცავს მანძილს. */
  /* წარწერა ცალკე რიგშია და მთელ სიგანეს იკავებს: ხატულის გვერდით მას
     111px რჩებოდა, „დასასრულებელი" კი 139px-ია — სიტყვა შუაზე იჭრებოდა.
     ახლა ხატულა და რიცხვი ერთ რიგშია, წარწერა — ქვემოთ, სრულ სიგანეზე. */
  display:grid;grid-template-columns:64px minmax(0,1fr) 18px;
  grid-template-areas:
    "icon number chevron"
    "label label label"
    "sub sub sub";
  column-gap:16px;align-content:center;
  min-height:148px;padding:18px 20px 18px 24px;
  /* ერთეული `cqi` ბარათის სიგანეს ეყრდნობა — რიცხვი მასთან ერთად
     პატარავდება და ექვსნიშნა „113121"-იც ეტევა. */
  container-type:inline-size;
}
.work-tile .tile-icon{grid-area:icon;align-self:center}
.work-tile .tile-number{grid-area:number;align-self:center}
.work-tile .tile-label{grid-area:label}
.work-tile .tile-sub{grid-area:sub}
.fact-tile{
  display:grid;grid-template-columns:56px minmax(0,1fr);
  grid-template-areas:
    "icon number"
    "label label";
  column-gap:14px;align-content:center;
  min-height:112px;padding:18px 20px;
  container-type:inline-size;
}
.fact-tile .tile-icon{grid-area:icon;align-self:center}
.fact-tile .tile-number{grid-area:number;align-self:center}
.fact-tile .tile-label{grid-area:label}

/* ხატულა ბეჯშია და არა შიშველი. 64px-იან ველში 28px-იანი ხაზოვანი
   ხატულა დაკარგული ჩანდა — ფერადი ველი მას იმავე წონას უბრუნებს,
   რაც ადრე ფერად PNG-ს ჰქონდა, ოღონდ ფერს ახლა მდგომარეობა კარნახობს:
   წითელი „საქმეზე", ლურჯი „კონტექსტზე", ნაცრისფერი ნულზე. PNG-ს ვერც
   ერთს ვერ ვეტყოდით — რასტრს `currentColor` არ ესმის. */
.tile-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:64px;height:64px;border-radius:14px;
  background:var(--danger-soft);color:var(--danger);
}
.tile-icon .icon{width:28px;height:28px}
.fact-tile .tile-icon{width:56px;height:56px;background:var(--brand-soft);color:var(--brand)}
.fact-tile .tile-icon .icon{width:26px;height:26px}
/* ნული კარგი ამბავია — ხატულაც ჩუმდება, რომ „0" განგაშად არ იკითხებოდეს */
.work-tile.is-zero .tile-icon{background:var(--paper);color:var(--muted)}

.work-tile::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:var(--danger);border-radius:var(--radius) 0 0 var(--radius);
}
/* ნული კარგი ამბავია — წითლად არ უნდა ყვიროდეს */
.work-tile.is-zero::before{background:var(--rule)}

.work-tile .tile-number{
  display:block;font-family:var(--font-section);font-weight:600;
  /* 42px მხოლოდ ერთ- და ორნიშნა რიცხვს უხდება; „113121" ბარათს
     სცდებოდა და ისარს ეფარებოდა. `cqi` ბარათის სიგანის პროცენტია. */
  font-size:clamp(22px,15cqi,42px);
  line-height:1;color:var(--danger);margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.work-tile.is-zero .tile-number{color:var(--muted)}
.work-tile .tile-label{display:block;font-size:14.5px;font-weight:500;
  line-height:1.45;color:var(--ink)}
.work-tile.is-zero .tile-label{color:var(--muted)}
.tile-sub{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:4px}

.tile-go{
  grid-area:chevron;align-self:center;
  color:var(--muted);transition:color .12s ease, transform .12s ease;
}
.work-tile:hover{border-color:var(--watermark);background:#F8FBFD}
.work-tile:hover .tile-go{color:var(--brand);transform:translateX(2px)}
.work-tile:active{background:var(--brand-soft);border-color:var(--watermark)}
.work-tile:focus-visible{border-color:var(--brand)}

.fact-tile .tile-number{
  display:block;font-family:var(--font-section);font-weight:500;
  font-size:clamp(22px,15cqi,36px);
  line-height:1;color:var(--brand);margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.fact-tile .tile-label{display:block;font-size:14px;line-height:1.4;color:var(--muted)}
/* ბმულიანი ფაქტი-ბარათი (2026-08-24): ისარი მესამე სვეტია, work-tile-ის წესით */
.fact-tile.is-link{
  grid-template-columns:56px minmax(0,1fr) 18px;
  grid-template-areas:
    "icon number chevron"
    "label label label";
}
.fact-tile.is-link:hover{border-color:var(--watermark);background:#F8FBFD}
.fact-tile.is-link:hover .tile-go{color:var(--brand);transform:translateX(2px)}
.fact-tile.is-link:focus-visible{border-color:var(--brand)}

/* --- ცხრილი + სწრაფი ბმულები --- */
.dash-split{
  display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.95fr);
  gap:16px;align-items:start;margin:16px 0 40px;
}
/* ბადის ელემენტს ნაგულისხმევად `min-width:auto` აქვს, ანუ ის შიგთავსის
   მინიმუმამდე იზრდება. ცხრილს კი 478px მინიმუმი აქვს — 384px-იან
   ტელეფონზე ეს მთელ გვერდს აწვდიდა და Chrome გვერდს ამცირებდა, რომ
   ჩაეტია: ყველაფერი წვრილად და დამტვრეულად ჩანდა. */
.dash-split > *{min-width:0}

/* სქროლი ცხრილშივეა და არა გვერდზე. ცხრილი განზრახ რჩება ცხრილად
   (მასწავლებელი მას თვალით სკანირებს) — ამიტომ სიგანე მას უნდა
   შეუნარჩუნდეს, გვერდს კი არა. */
.run-table{overflow-x:auto}
.panel{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px;
}
.panel-title{
  font-family:var(--font-sans);font-size:18px;font-weight:600;
  line-height:1.3;color:var(--ink);margin:0 0 4px;
}
/* ქვესათაური სათაურს ხსნის — „ახლა წერენ" თავისთავად ცხადია, მაგრამ
   რას ითვლის, ეს ერთი ხაზი ამბობს. */
.panel-sub{color:var(--muted);font-size:13.5px;line-height:1.45;margin:0 0 14px}

/* ხუთი სვეტი: პროგრესი და „გავიდა" 2026-09-03-ს დაემატა — დაწყების
   საათი მარტო არ პასუხობდა კითხვას „რამდენი ხანია ზის და სად მივიდა". */
.run-head,.run-row{
  display:grid;
  grid-template-columns:minmax(140px,1fr) minmax(180px,1.5fr) 74px 74px 74px;
  column-gap:14px;align-items:center;
}
/* დაწყების საათი ტესტის ქვეშ, ჩუმად — ის კონტექსტია და არა მთავარი რიცხვი */
.run-started{display:block;color:var(--muted);font-size:12px;line-height:1.3}
.run-test{white-space:normal}
.run-progress{font-weight:600}
.run-head{
  min-height:36px;padding:0 12px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--rule);
}
.run-row{
  min-height:48px;padding:8px 12px;font-size:14px;line-height:1.35;
  border-bottom:1px solid var(--rule);
}
.run-row:last-of-type{border-bottom:0}
.run-user{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-test{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-head .num,.run-row .num{text-align:end;font-variant-numeric:tabular-nums}

/* ფერი დროის სისწრაფეს მიჰყვება; რიცხვი თავადაც ინფორმაციაა,
   ანუ ფერი ერთადერთი სიგნალი არ არის */
.run-left.is-calm{color:var(--ink)}
.run-left.is-warning{color:var(--warning);font-weight:600}
.run-left.is-critical{color:var(--danger);font-weight:600}

.panel-more{
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;margin-top:8px;
  font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;
}
.panel-more:hover{text-decoration:underline;text-underline-offset:3px}

/* --- სწრაფი ბმულები --- */
.quick-row{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:8px 12px;border-bottom:1px solid var(--rule);
  color:var(--ink);text-decoration:none;
  font-size:14.5px;font-weight:500;line-height:1.35;
}
.quick-row:last-child{border-bottom:0}
.quick-row:hover{background:#F8FBFD}
.quick-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.quick-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:var(--radius);
  background:var(--brand-soft);color:var(--brand);
}
/* ხატულა სპრაიტიდან მოდის და ფერს ბეჯისგან იღებს (`currentColor`).
   ადრე აქ PNG იდგა და ორი სხვადასხვა ბმული — „კატალოგი" და
   „მოსწავლეები" — ერთსა და იმავე ჭანჭიკს იზიარებდა. */
.quick-img{display:block;width:24px;height:24px}
.quick-go{margin-inline-start:auto;color:var(--muted)}

/* --- ცარიელი მდგომარეობა --- */
.panel-empty{
  min-height:260px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:32px 24px;
}
.empty-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);margin-bottom:16px;
}
.panel-empty b{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:6px}
.panel-empty p{font-size:14px;line-height:1.5;color:var(--muted);max-width:420px;margin:0}
.empty-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}

@media (max-width:1023px){
  .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .work-tile{min-height:136px}
  .dash-split{grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:14px}
  .run-head,.run-row{
    grid-template-columns:minmax(130px,1fr) minmax(180px,1.4fr) 70px 70px;
    column-gap:12px;
  }
}

@media (max-width:767px){
  /* სათაურამდე 36px + main-ის 16px = 52px ცარიელი ადგილი ეკრანის თავში.
     ტელეფონზე პირველი ეკრანი შიგთავსს ეკუთვნის და არა ჰაერს. */
  .page-title{margin-top:0}
  .page-head{gap:10px;margin-bottom:4px}
  .page-actions{padding-bottom:0;width:100%}
  .page-actions .btn{flex:1}

  .tile-grid{gap:12px}
  /* 375px-ზე ბარათი ~168px-ია: ხატულა და ტექსტი გვერდიგვერდ რომ დარჩეს,
     წარწერას 60px ეთმობა და ქართული სიტყვები შუაზე იჭრებოდა.
     ამიტომ ხატულა რიცხვის თავზე გადადის და chevron ქრება — ბარათი
     ისედაც მთლიანად შესახებია. */
  .work-tile,.fact-tile{
    /* `grid-template-areas` ცხადად უნდა გაითიშოს: სამსვეტიანი რუკა
       ერთსვეტიან ბადეში არასწორია და ბრაუზერი მთელ წესს აგდებს. */
    grid-template-areas:none;
    grid-template-columns:1fr;grid-template-rows:auto auto auto;
    row-gap:6px;padding:16px;
  }
  .work-tile .tile-icon,.work-tile .tile-number,.work-tile .tile-label,
  .work-tile .tile-sub,.fact-tile .tile-icon,.fact-tile .tile-number,
  .fact-tile .tile-label{grid-area:auto}
  /* ბმულიანი ვარიანტიც იმავე ერთსვეტიან რუკაზე გადადის — chevron ისედაც ქრება */
  .fact-tile.is-link{grid-template-areas:none;grid-template-columns:1fr}
  .work-tile{min-height:128px}
  .work-tile .tile-icon,.fact-tile .tile-icon{grid-row:auto;width:44px;height:44px}
  .work-tile .tile-icon .icon,.fact-tile .tile-icon .icon{width:22px;height:22px}
  .work-tile .tile-sub{grid-column:auto}
  /* რიცხვის ზომას `clamp(…cqi…)` თვითონ არჩევს ბარათის სიგანიდან —
     ფიქსირებული ზომა მას ჯაბნიდა და „113121" ისევ სცდებოდა. */
  .tile-go{display:none}
  /* ცხრილი მაინც ცხრილად რჩება — მასწავლებელი მას თვალით სკანირებს */
  .dash-split{grid-template-columns:1fr;gap:16px}
  .run-head,.run-row{
    grid-template-columns:minmax(120px,1fr) minmax(180px,1.4fr) 64px 64px;
    column-gap:10px;padding-inline:10px;
  }
  .run-head{font-size:11.5px}
  .run-row{font-size:13.5px;min-height:46px}
}

/* ===========================================================================
   ადმინის სიის გვერდები (ტესტები) — 1180px კონტეინერი, იგივე ტოკენები
   =========================================================================== */

.page-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px 20px;margin-bottom:8px;
}
.page-head .page-title{margin-bottom:0}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:6px}

.filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:20px 0 16px;
}
.filter-bar .field{flex:1 1 240px;min-width:0}
.filter-bar .chips{flex:0 1 auto}

/* საერთო ველი: აქამდე ყოველი გვერდი თავისას იმეორებდა */
.field{
  min-height:44px;padding:0 12px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background-color:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:14.5px;
}
.field:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

.chip.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);
  font-weight:600}

.test-list{display:grid;gap:10px;margin:0 0 56px}
.test-row{
  display:grid;gap:12px 20px;align-items:center;
  grid-template-columns:minmax(0,1fr) auto auto;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:14px 16px;
}
.test-row:hover{border-color:var(--brand)}
.test-main{min-width:0}
.test-name{font-family:var(--font-sans);font-size:17px;font-weight:600;margin:0 0 6px;
  line-height:1.35}
.test-name a{color:var(--ink);text-decoration:none}
.test-name a:hover{color:var(--brand)}
.test-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;
  margin:0;color:var(--muted);font-size:13px}

.state-badge{
  display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:600;border:1px solid var(--rule);
}
.state-badge.is-draft{background:var(--warning-soft);border-color:var(--warning-line);color:var(--warning)}
.state-badge.is-published{background:var(--success-soft);border-color:var(--success);color:var(--success-deep)}
.state-badge.is-archived{background:var(--paper);color:var(--muted)}
.state-badge.is-window{background:var(--brand-soft);border-color:var(--brand-soft);
  color:var(--brand)}

.test-figures{display:flex;gap:18px;flex-wrap:wrap}
.test-figure{display:grid;justify-items:center}
.test-figure b{font-family:var(--font-section);font-size:22px;font-weight:500;
  color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.test-figure span{font-size:12px;color:var(--muted)}
.test-actions{display:flex;gap:8px;flex-wrap:wrap}

@media (max-width:900px){
  /* სამსვეტიანი სტრიქონი 900px-ზე ქვემოთ იჭყლიტება: რიცხვები და ღილაკები
     ცალკე სართულზე გადადის, სახელი კი სრულ სიგანეს იღებს */
  .test-row{grid-template-columns:1fr;gap:12px}
  .test-figures{justify-content:space-between}
  .test-actions .btn{flex:1}
}

/* ტესტის ბარათი — ბრიფინგი გაზიარებულ ლინკზე. `dl` და არა ცხრილი:
   375px-ზე ორსვეტიანი ცხრილი ჰორიზონტალურ სქროლს ითხოვდა. */
/* --- ტესტის ბარათი — გასაზიარებელი ბრიფინგი ---------------------------
   ზედაპირი `.panel`/`.auth-card`-ის იმავე ტოკენებზე დგას; ახალი ფერი
   ან რადიუსი არ იბადება (`docs/design/00-system.md` ერთადერთი
   ჭეშმარიტებაა). */
.test-card{
  margin:0 auto;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:28px;
}
.test-card-head{border-bottom:1px solid var(--rule);padding-bottom:18px;margin:0 0 18px}
.test-card-title{
  font-family:var(--font-section);font-size:26px;font-weight:400;
  line-height:1.2;color:var(--ink);margin:0;
}
.test-card-lead{color:var(--muted);font-size:15.5px;line-height:1.55;margin:10px 0 0}

/* ტაიმერი ბარათის თავშია: მოსწავლე პირველად სწორედ დარჩენილ დროს
   ეძებს. `tabular-nums` აუცილებელია — თანაბარსიგანიანი ციფრების
   გარეშე წამის ცვლა მთელ სტრიქონს არხევს. */
.test-clock{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  background:var(--brand-soft);border:1px solid var(--brand);
  border-radius:var(--radius);padding:14px 18px;margin:0 0 20px;
}
.test-clock-label{color:var(--brand);font-size:14.5px;font-weight:600}
.test-clock-value{
  font-family:var(--font-sans);font-size:22px;font-weight:700;
  color:var(--brand);font-variant-numeric:tabular-nums;
}
.test-clock.is-out{background:var(--warning-soft);border-color:var(--warning-line)}
.test-clock.is-out .test-clock-label,
.test-clock.is-out .test-clock-value{color:var(--warning)}

.test-facts{display:grid;gap:0;margin:0 0 24px}
.test-facts>div{display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.test-facts>div:last-child{border-bottom:0}
.test-facts dt{color:var(--muted);font-size:15px}
.test-facts dd{margin:0;font-weight:600;text-align:right}
.test-card-action{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.test-card-action .meta{flex-basis:100%;margin:0}

@media (max-width:520px){
  .test-card{padding:20px 18px}
  .test-card-title{font-size:22px}
  .test-clock{flex-direction:column;align-items:flex-start;gap:4px}
  .test-card-action .btn{width:100%}
}

/* ===========================================================================
   ფორმის კონტროლები — რადიო, ჩექბოქსი, select

   სისტემური ნაგულისხმევი ბრაუზერისა და OS-ის მიხედვით იცვლებოდა: Windows-ზე
   ლურჯი კვადრატი, macOS-ზე სხვა ფორმა, ანდროიდზე მესამე. ერთი ინტერფეისი
   სამნაირად გამოიყურებოდა. აქ ისინი QBank-ის ტოკენებზე გადადის — ახალი
   ფერის გარეშე, იმავე `--brand` / `--rule` / `--surface`-ით.
   =========================================================================== */

input[type="radio"],input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  flex:none;width:22px;height:22px;
  border:1.5px solid var(--rule);background:var(--surface);
  cursor:pointer;transition:border-color .12s ease,background-color .12s ease;
}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]{border-radius:6px}

input[type="radio"]:hover:not(:disabled),
input[type="checkbox"]:hover:not(:disabled){border-color:var(--brand)}

/* რადიოს წერტილი ჩარჩოს გასქელებით კეთდება — ცალკე ფსევდოელემენტის გარეშე
   ის ყოველთვის ზუსტად ცენტრშია, შრიფტისა და მასშტაბისგან დამოუკიდებლად. */
input[type="radio"]:checked{border:6px solid var(--brand)}

input[type="checkbox"]:checked{
  border-color:var(--brand);background-color:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:68%;
}

input[type="radio"]:focus-visible,input[type="checkbox"]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}
input[type="radio"]:disabled,input[type="checkbox"]:disabled{
  opacity:.55;cursor:not-allowed;background-color:var(--paper);
}
input[type="checkbox"]:disabled:checked{background-color:var(--watermark);border-color:var(--watermark)}

/* select — ნაგულისხმევი ისარიც სისტემისა იყო; ჩვენი chevron ჰედერის
   ხატულებს ერგება. `appearance:none`-ის შემდეგ ისარი ხელით ვხატავთ. */
select{
  appearance:none;-webkit-appearance:none;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-inline-end:36px;
}
select:disabled{opacity:.6}

/* პასუხის ვარიანტი: მონიშნული სტრიქონი მთლიანად უნდა ინათოს და არა
   მხოლოდ პატარა კვადრატი — ტესტის დროს მოსწავლე ეკრანს სწრაფად ათვალიერებს. */
.opts label{transition:border-color .12s ease,background-color .12s ease}
.opts label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}

/* ფაილის არჩევა — ღილაკის ნაწილი ჩვენს სტილში.
   წარწერას („Choose File") ბრაუზერი თავად წერს და CSS-ით არ იცვლება;
   მარკაპის შეცვლა ოთხივე ადგილას (ფოტო-პასუხი, ორი იმპორტი, რედაქტორი)
   უფრო დიდი რისკია, ვიდრე მოგებული ერთი სიტყვა. */
input[type="file"]{
  font-family:var(--font-sans);font-size:14px;color:var(--muted);
}
input[type="file"]::file-selector-button{
  margin-inline-end:12px;min-height:40px;padding:0 16px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:14.5px;font-weight:600;cursor:pointer;
  transition:border-color .12s ease,background-color .12s ease,color .12s ease;
}
input[type="file"]::file-selector-button:hover{
  border-color:var(--brand);background:var(--brand-soft);color:var(--brand);
}
input[type="file"]:disabled::file-selector-button{opacity:.55;cursor:not-allowed}


/* --- ტესტის პარამეტრების ფორმა (შექმნა და რედაქტირება) ---
   ერთი გვერდი ორ როლში, ამიტომ ბადეც ერთია. ორი სვეტი მხოლოდ იქ, სადაც
   ველი მოკლეა (თარიღი, პროცენტი); სახელი და აღწერა მთელ სიგანეზე რჩება. */
/* ფორმაც ადმინის ჩარჩოშია — ბარათი იქ მთავრდება, სადაც ჰედერი.
   ველი მაინც ვიწრო რჩება: სვეტები `auto-fit`-ით ისე ეწყობა, რომ
   თითოეული 260–380px იყოს და 1180px-ზე სამი გამოვიდეს. */
.form-page{max-width:none}
.form-card{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 18px;margin-top:20px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:24px 22px;
}
.form-wide{grid-column:1 / -1}
.form-field i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.8}
.form-field input[type="checkbox"]{min-height:0;width:auto}
.form-checks{display:grid;gap:10px;margin:4px 0 18px}
.form-check{display:flex;align-items:center;gap:10px;font-size:15px}
.form-check input{width:20px;height:20px;accent-color:var(--brand)}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){
  .form-card{grid-template-columns:1fr;padding:18px 16px}
}


/* ===========================================================================
   ჩვენი ადმინი — კითხვების ბანკის სია (`/admin/questions/`)
   ბარათი და არა ცხრილი: რვასვეტიანი ცხრილი 384px-ზე ჰორიზონტალურ სქროლს
   ითხოვს. ვიზუალი კონსტრუქტორის ბანკიდანაა — ახალი ენა არ იბადება.
   =========================================================================== */

.builder-top{
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;
  justify-content:space-between;padding-bottom:16px;
  border-bottom:1px solid var(--rule);margin-bottom:16px;
}
.bank-top-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ფილტრები ბადეშია და არა ერთ რიგში: რვა ველი 1180px-ზეც ვერ ეტევა,
   ტელეფონზე კი ერთ სვეტად ჩამოდის. */
/* ძებნა ყოველთვის ჩანს, დანარჩენი შვიდი ველი დაკეცილია: 384px-ზე
   გახსნილი ფილტრები 1027px-ს იკავებდა და პირველი კითხვა ეკრანს ქვემოთ
   რჩებოდა. იგივე წესი, რაც კონსტრუქტორის ბანკში. */
.bank-filters{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;
}
.bank-search{margin-bottom:0}
.bank-search-actions{display:flex;gap:10px;align-items:end;padding-bottom:2px}
.bank-more{grid-column:1 / -1;border-top:1px solid var(--rule);padding-top:12px}
.bank-more > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;color:var(--brand);font-size:14px;font-weight:600;
}
.bank-more > summary::-webkit-details-marker{display:none}
.bank-more > summary::before{content:"▸";font-size:12px}
.bank-more[open] > summary::before{content:"▾"}
.bank-more-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px;
  padding-top:8px;
}
.bank-more-actions{grid-column:1 / -1;margin-bottom:4px}
@media (max-width:1023px){.bank-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .bank-filters{grid-template-columns:1fr;padding:14px}
  .bank-search-actions{align-items:stretch}
  .bank-more-grid{grid-template-columns:1fr}
}

.bank-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bank-row{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);display:flex;align-items:stretch}
.bank-row:hover{border-color:var(--brand)}
/* ⚠ **შიგთავსის padding `.bank-row`-ს არ აქვს** — მას `.bank-row-main`
   ატარებს. სადაც ტექსტი პირდაპირ რიგშია (გაფრთხილების ბლოკი ჯგუფის
   გვერდზე, დანიშვნის ბარათი), არავის ჰქონდა: ტექსტი ჩარჩოს ეკვროდა,
   ღილაკი ტექსტს — და მარჯვნივ ნახევარი რიგი ცარიელი რჩებოდა. */
.bank-row > .person-text{flex:1 1 auto;min-width:0;padding:12px 0 12px 14px}
.bank-row > .person-text ~ .btn{align-self:center;flex:none;margin-inline:12px 14px}
/* მონიშვნის ჩექბოქსი ბმულის გარეთაა — გადატანისთვის (2026-08-24) */
.bank-pick{display:flex;align-items:center;padding:0 4px 0 14px;cursor:pointer}
.bank-pick input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
/* მთელი ბარათი ბმულია — 384px-ზე პატარა ტექსტურ ბმულში მოხვედრა ძნელია. */
.bank-row-main{display:flex;align-items:center;gap:12px;padding:12px 14px;
  text-decoration:none;color:inherit;min-height:44px;flex:1 1 auto;min-width:0}
.bank-row-text{flex:1 1 auto;min-width:0}
.bank-thumb{flex:none;width:72px;height:72px;object-fit:cover;
  border:1px solid var(--rule);border-radius:8px;background:var(--paper)}
/* ტიპი ფერით ირჩევა: მარცხენა ზოლი + ხატულიანი ჭდე (2026-08-24).
   ტესტური — ლურჯი, ტექსტური — მწვანე, ფოტო-პასუხი — ყვითელი. */
.bank-row{border-inline-start:3px solid var(--rule)}
.bank-row.bank-type-choice{border-inline-start-color:var(--brand)}
.bank-row.bank-type-text{border-inline-start-color:var(--success)}
.bank-row.bank-type-photo{border-inline-start-color:var(--warning-line)}
.pill-type-choice,.pill-type-text,.pill-type-photo{display:inline-flex;
  align-items:center;gap:4px}
.pill-type-choice{background:var(--brand-soft);color:var(--brand)}
.pill-type-text{background:var(--success-soft);color:var(--success-deep)}
.pill-type-photo{background:var(--warning-soft);color:var(--warning)}
@media (max-width:560px){.bank-thumb{width:56px;height:56px}}
.bank-row-main:hover{text-decoration:none}
/* გადატანის ზოლი — ეკრანის ქვედა კიდეზე ეკვრის და მონიშვნისას ჩნდება.
   JS-ის გარეშე მუდმივად ჩანს (`is-idle`-ს სკრიპტი აწებებს). */
.bank-bulk-bar{position:sticky;bottom:12px;z-index:5;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  background:var(--surface);border:1px solid var(--brand);
  border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow)}
.bank-bulk-bar.is-idle{display:none}
.bank-bulk-label{color:var(--muted);font-size:14px}
.bank-bulk-bar select{padding:8px 10px;border:1px solid var(--rule);
  border-radius:var(--radius);font-family:var(--font-sans);font-size:14px;
  background:var(--paper);color:var(--ink);max-width:280px}
.bank-pick-all{gap:8px;padding:0;font-size:13.5px;color:var(--muted);
  white-space:nowrap}
@media (max-width:560px){
  .bank-bulk-bar select{max-width:100%;width:100%}
  .bank-bulk-bar .btn{width:100%}
}

.card-id{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.card-body{margin:2px 0 6px;font-size:15px;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin:0;font-size:12.5px;color:var(--muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}

.bank-pager{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:18px 0 40px;color:var(--muted);font-size:14px}

.panel-empty{
  display:grid;justify-items:start;gap:12px;padding:28px 20px;margin:0;
  background:var(--surface);border:1px dashed var(--rule);
  border-radius:var(--radius);color:var(--muted);
}
.panel-empty b{color:var(--ink);font-size:16px}

/* ჭდე — იგივე კლასები, რაც ადმინის თემაში; ფერი ტოკენებიდან. */
.pill{display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.6;white-space:nowrap}
.pill-ok{background:var(--success-soft);color:var(--success);
  border:1px solid var(--success)}
.pill-warn{background:var(--warning-soft);color:var(--warning);
  border:1px solid var(--warning-line)}
.pill-bad{background:var(--danger-soft);color:var(--danger-deep);
  border:1px solid var(--danger)}
.pill-quiet{background:var(--paper);color:var(--muted);
  border:1px solid var(--rule)}


/* ===========================================================================
   პროფილის სურათი — ატვირთული ფოტო ან მზა ავატარი
   სურათი ფორმის პირველი ბლოკია: ადამიანი ჯერ საკუთარ თავს ხედავს.
   =========================================================================== */

.avatar-img{object-fit:cover;background:var(--brand-soft)}

.avatar-block{
  display:grid;gap:18px;margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.avatar-now{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.avatar-big{
  width:88px;height:88px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid var(--rule);background:var(--brand-soft);
}
.avatar-letter{
  display:grid;place-items:center;
  font-family:var(--font-section);font-size:34px;color:var(--brand);
}
.avatar-now-actions{display:flex;gap:10px;flex-wrap:wrap}
/* ფაილის ველი ბრაუზერისეულია და სტილს ვერ იღებს — ღილაკში ვმალავთ. */
.avatar-upload{position:relative;overflow:hidden;cursor:pointer}
.avatar-upload input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;
}

.avatar-picker{border:0;padding:0;margin:0;min-width:0}
.avatar-picker legend{
  padding:0;margin-bottom:10px;
  font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
}
/* ბადე და არა flex: ათი ავატარი 375px-ზე ხუთ-ხუთად უნდა დაწყობილიყო,
   flex-wrap კი ბოლო რიგს არათანაბრად ტოვებდა. */
.avatar-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.avatar-pick{
  position:relative;display:grid;place-items:center;cursor:pointer;
  border:2px solid transparent;border-radius:50%;padding:2px;
}
.avatar-pick img{display:block;width:100%;height:auto;border-radius:50%}
.avatar-pick input{position:absolute;opacity:0;width:0;height:0}
.avatar-pick:hover{border-color:var(--rule)}
.avatar-pick.is-on,.avatar-pick:focus-within{border-color:var(--brand)}
@media (max-width:400px){.avatar-row{gap:8px}}


/* --- მოსწავლეების სია: ავატარი, სახელი, ჭდეები, „ნახე მისი ხედი" --- */
.person-row{display:flex;align-items:center;gap:10px;padding-inline-end:12px;flex-wrap:wrap}
/* მთელი მარცხენა ნაწილი ბმულია — სახელზე ზუსტად მოხვედრა 384px-ზე ძნელია. */
.person-main{
  flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:12px;
  padding:12px 0 12px 14px;text-decoration:none;color:inherit;min-height:44px;
}
.person-main:hover{text-decoration:none}
.person-avatar{
  width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid var(--rule);background:var(--brand-soft);
}
.person-letter{
  display:grid;place-items:center;
  font-family:var(--font-section);font-size:18px;color:var(--brand);
}
.person-text{min-width:0;display:grid;gap:2px}
.person-name{font-size:15.5px;font-weight:600;color:var(--ink)}
.person-preview{flex:none}
@media (max-width:640px){
  .person-preview{margin:0 0 12px 70px}
}

/* ბარათის თავი: სურათი და სახელი ერთ რიგში */
.person-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.person-head .page-title{margin-bottom:2px}


/* ===========================================================================
   კატალოგი — მიმართულება → საგანი → თემა

   ხე შეწევით იხატება და არა ხაზებით: სამ დონეზე ხაზები ხმაურია, შეწევა კი
   თვალს მაშინვე ეუბნება, რა რის ქვეშაა.

   ⚠ **სტრიქონი კითხულობს, მენიუ მოქმედებს.** ადრე ყოველ სტრიქონში ოთხი
   კონტროლი იდგა და 106-ჯერ მეორდებოდა — ღილაკები შიგთავსზე ხმაურიანი
   იყო. ახლა სტრიქონზე სახელი, ემბლემა და რიცხვია; მოქმედება ორ
   ჩამოსაშლელშია.

   ⚠ **ტექსტი არ იჭრება.** „ოტორინოლარინგოლოგია" ოცდაათსიმბოლოიანია და
   მისი სამი წერტილით დამთავრება მას გაუგებარს ხდის — ამიტომ
   `overflow-wrap` და არა `ellipsis`.
   =========================================================================== */

/* ფესვის დამატება თავსართშია: მას მშობელი არ ჰყავს, ანუ `+`-ის
   დასაკიდებელი სტრიქონიც არ არსებობს. */
.cat-new{position:relative}
.cat-new > summary{list-style:none;cursor:pointer}
.cat-new > summary::-webkit-details-marker{display:none}
.cat-new > summary::marker{content:""}
.cat-new-form{
  position:absolute;z-index:20;inset-inline-end:0;top:calc(100% + 6px);
  width:min(300px,calc(100vw - 48px));
  display:flex;flex-direction:column;gap:8px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;
}
/* იგივე ველი, რაც cat-pop-panel-ს — ნაგულისხმევი ბრაუზერული ინპუტი
   გაფორმებულ ღილაკთან უცხოდ იჯდა (2026-08-24) */
.cat-new-form input[type=text]{
  width:100%;min-height:40px;padding:6px 10px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:14px;
}
.cat-new-form input[type=text]:focus{border-color:var(--brand);outline:none}

/* ხელსაწყოების ზოლი: ძებნა + ფილტრი */
.cat-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.cat-search{
  flex:1 1 260px;display:flex;align-items:center;gap:8px;min-height:44px;
  padding:0 12px;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);color:var(--muted);
}
.cat-search:focus-within{border-color:var(--brand)}
.cat-search input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--font-sans);font-size:15px;color:var(--ink);
}
/* ფილტრი ბმულია და არა ღილაკი — ის მისამართს ცვლის. ლურჯი აქ აქტიური
   მდგომარეობაა და არა ღილაკის ფერი. */
.cat-filter{display:flex;gap:6px;flex-wrap:wrap}
.cat-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border-radius:999px;border:1px solid var(--rule);background:var(--surface);
  color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:none;
}
.cat-chip:hover{border-color:var(--brand);color:var(--brand)}
.cat-chip.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

.cat-tree{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cat-node{min-width:0}
.cat-node.is-off .cat-row{opacity:.62}
/* ძებნა: არ-ნაპოვნი ქრება, ნაპოვნის წინაპარი კონტექსტისთვის რჩება. */
.cat-node.is-miss{display:none}
.cat-blank{color:var(--muted);padding:12px 2px}

.cat-row{
  position:relative;display:flex;align-items:center;gap:10px;min-height:56px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:8px 10px;
}
/* დონე ფერადი ზოლით იკითხება — სამი შეწევა ერთმანეთს 375px-ზე ჰგავს. */
/* მთელი მიმართულება ერთი ბარათია (მფლობელი, 2026-08-24): საგნები და
   თემები მის შიგნით სხედან და დონე ფერითაც ირჩევა — მიმართულება ლურჯი
   ველით, საგანი თეთრი ლურჯი ზოლით, თემა ქვიშისფერი მწვანე ზოლით. */
/* გარე თეთრი ბუდე მოიხსნა (მფლობელი, 2026-08-24) — სტრიქონები თავად
   ფერადი ბარათებია და ორმაგი ჩარჩო ზედმეტი აღმოჩნდა. */
.cat-root > .cat-node{padding:0 0 6px}
.cat-l1 > .cat-row{background:var(--brand-soft);border-color:var(--brand);
  border-inline-start:4px solid var(--brand)}
.cat-l2 > .cat-row{background:var(--surface);
  border-inline-start:3px solid var(--brand)}
.cat-l3 > .cat-row{background:var(--paper);
  border-inline-start:3px solid var(--success)}
/* შტო სტრიქონზე დაწკაპუნებით იხსნება; ქვედა summary მხოლოდ JS-ის
   გარეშე რჩება (fallback). ისარი სტრიქონის ბოლოშია და ღიაობას აჩვენებს. */
.js .cat-kids > summary{display:none}
.js .cat-node:has(> .cat-kids) > .cat-row{cursor:pointer}
.js .cat-node:has(> .cat-kids) > .cat-row::after{content:"▸";
  color:var(--muted);font-size:13px;padding-inline:4px}
.js .cat-node:has(> .cat-kids[open]) > .cat-row::after{content:"▾";
  color:var(--brand)}

/* მიმართულების თრევისას გამოჩენილი ჩასაგდები სლოტები */
.cat-slot{list-style:none;height:16px;border:2px dashed var(--rule);
  border-radius:10px;margin:2px 0;transition:height .12s ease,
  border-color .12s ease,background .12s ease}
.cat-slot.is-over{height:48px;border-color:var(--brand);
  background:var(--brand-soft)}

/* გადატანილი კვანძი ადგილზე „ციმციმებს" — თვალი მიჰყვება სად ჩაჯდა */
@keyframes cat-flash{0%,60%{box-shadow:0 0 0 3px var(--brand);
  background:var(--brand-soft)}100%{box-shadow:none}}
.cat-row.is-flash{animation:cat-flash 1.2s ease}

/* ფილტრის კონტექსტი: წინაპარი პასუხი არ არის — ის მხოლოდ „საიდანაა?"-ს
   პასუხობს, ამიტომ დამდაბლებულია და პასუხს არ ეცილება.

   `is-branch` იგივეა, ოღონდ ძებნიდან: ნაპოვნის წინაპარი.

   ⚠ **სამწონიანი და დონის ზოლის შემდეგ.** `.cat-l1>.cat-row` (0,2,0)-ია;
   ორწონიანი კონტექსტი მასთან ფრეს გამოიღებდა და რიგზე წააგებდა —
   იგივე ხაფანგი ამ პროექტში მეხუთედაა. იცავს
   `tests/test_design_widths.py`. */
.cat-tree .cat-node.is-context > .cat-row,
.cat-tree .cat-node.is-branch > .cat-row{background:transparent;border-style:dashed}
.cat-tree .cat-node.is-context > .cat-row .cat-title b,
.cat-tree .cat-node.is-branch > .cat-row .cat-title b{font-weight:500;color:var(--muted)}

/* შვილის შექმნის რიგი შტოს ბოლოში (2026-08-24): სტრიქონის ხატულა-`+`
   საკმარისად თვალსაჩინო არ აღმოჩნდა — აქ ტექსტით წერია, რა იქმნება. */
.cat-add{list-style:none}
.cat-add-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;padding:9px 14px;border:1px dashed var(--rule);
  border-radius:var(--radius);color:var(--muted);font-size:14px;
  background:transparent}
.cat-add-btn::-webkit-details-marker{display:none}
.cat-add-btn:hover{color:var(--brand);border-color:var(--brand)}
/* იგივე შეწევა, რაც cat-kids-ის ქვესიას — კიბე უშვილო კვანძთანაც გრძელდება */
.cat-tree-empty{margin-top:6px;padding-inline-start:34px}

/* ადმინობის ბარათი ანგარიშის გვერდზე — მხოლოდ superuser ხედავს */
.admin-grant{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding:16px 20px}
.admin-grant-body{display:flex;flex-direction:column;gap:3px;flex:1 1 260px}
.admin-grant-body b{font-size:15px}
.admin-grant-body span{color:var(--muted);font-size:13.5px}

/* Drag&drop (2026-08-24): სახელური, თრევის მდგომარეობა და სამიზნეები.
   ზოლი ჩასმის ადგილს აჩვენებს, გალურჯება — „შიგნით გადავა"-ს. */
.cat-drag{flex:none;cursor:grab;color:var(--muted);font-size:15px;
  padding:4px 2px;user-select:none;letter-spacing:-2px}
.cat-drag:hover{color:var(--brand)}
.cat-node.is-dragging > .cat-row{opacity:.45}
.cat-row.drop-into{border-color:var(--brand);background:var(--brand-soft)}
.cat-row.drop-before::before,.cat-row.drop-after::after{
  content:"";position:absolute;inset-inline:8px;height:3px;
  background:var(--brand);border-radius:2px;pointer-events:none}
.cat-row.drop-before::before{top:-2px}
.cat-row.drop-after::after{bottom:-2px}
.cat-dnd-error{margin:0 0 14px}
@media (pointer:coarse){.cat-drag{display:none}} /* HTML5 DnD სენსორზე არ მუშაობს */

/* ემბლემის ვიზუალური ამრჩევი (2026-08-24): ერთი საერთო <dialog> მთელ
   გვერდზე — თითო სტრიქონში ჩაშენებული ბადე HTML-ს მეგაბაიტებად ზრდიდა. */
.emblem-open{display:flex;align-items:center;gap:8px;cursor:pointer;width:100%;
  padding:8px 10px;border:1px solid var(--rule);
  border-radius:var(--radius);background:var(--paper);font-size:14px;
  font-family:var(--font-sans);color:var(--ink);text-align:start}
.emblem-open:hover{border-color:var(--brand)}
.emblem-now{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emblem-cta{color:var(--brand);font-size:13px;white-space:nowrap}
.emblem-dialog{width:min(700px,94vw);max-height:82vh;overflow:auto;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.emblem-dialog::backdrop{background:rgb(15 23 42/.45)}
.emblem-title{display:block;font-size:16px;margin-bottom:6px}
.emblem-group{margin:12px 0 8px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.emblem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px}
.emblem-cell{display:flex;flex-direction:column;
  align-items:center;gap:6px;padding:10px 6px 8px;border:1px solid var(--rule);
  border-radius:10px;cursor:pointer;text-align:center;font-size:12px;
  line-height:1.25;color:var(--ink);background:var(--paper);
  font-family:var(--font-sans)}
.emblem-cell:hover{border-color:var(--brand);background:var(--brand-soft)}
.emblem-cell img{width:44px;height:44px;object-fit:contain}
.emblem-hint{margin:14px 0 0;color:var(--muted);font-size:13px}
/* „გადატანა…" მოდალი — იმავე ჩარჩოში, ორი ველი და მოქმედება */
.move-dialog{width:min(460px,94vw)}
.move-field{display:block;margin:12px 0;font-size:14px;font-weight:600}
.move-field i{font-weight:400;color:var(--muted);font-style:normal;font-size:12.5px}
.move-field select{display:block;width:100%;margin-top:6px;padding:9px 11px;
  border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:14.5px;background:var(--paper);
  color:var(--ink)}
.move-actions{display:flex;gap:10px;margin-top:14px}

.cat-emblem{flex:none;width:28px;height:28px;object-fit:contain}
.cat-title{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0}
/* `break-word` და არა `anywhere`: `anywhere` სიტყვას ნებისმიერ ასოზე ტეხდა
   და 375px-ზე „აბიტურიენ/ტი", „რეზიდენტ/ურა" გამოდიოდა (მფლობელი,
   2026-09-06). ახლა ტეხს მხოლოდ მაშინ, თუ სიტყვა მარტო არ ეტევა. */
/* პირველი დონის სტრიქონი `--brand-soft`-ზე ზის და იქ `--muted` 4.27:1-ია;
   ტოკენს გლობალურად არ ვცვლით — მხოლოდ ამ ფონზე ვამუქებთ (AA, 2026-09-06). */
.cat-l1 > .cat-row .cat-sub,
.cat-l1 > .cat-row .cat-drag{color:#57626F}
.cat-title b{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:break-word}
.cat-sub{color:var(--muted);font-size:12.5px;line-height:1.3}
.cat-flag{flex:none;align-self:center}

/* ორივე ჩამოსაშლელი — `+` და `⋯` */
.cat-pop{position:relative;flex:none}
.cat-pop > summary{list-style:none;cursor:pointer}
.cat-pop > summary::-webkit-details-marker{display:none}
.cat-pop > summary::marker{content:""}
.cat-icon-btn{width:40px;min-height:40px;padding:0;justify-content:center}
.cat-pop-panel{
  position:absolute;z-index:20;inset-inline-end:0;top:calc(100% + 6px);
  width:min(280px,calc(100vw - 48px));
  display:flex;flex-direction:column;gap:8px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;
  text-align:start;
}
.cat-pop-label{color:var(--muted);font-size:12px;font-weight:600}
.cat-pop-panel input[type=text],
.cat-pop-panel select{
  width:100%;min-height:40px;padding:6px 10px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:14px;
}
.cat-pop-panel input[type=text]:focus,
.cat-pop-panel select:focus{border-color:var(--brand);outline:none}
.cat-pop-panel .btn{min-height:40px;font-size:13.5px}
.cat-pop-wide{width:100%;justify-content:center}
.cat-pop-rule{border:0;border-top:1px solid var(--rule);margin:2px 0}
.cat-edit{display:flex;flex-direction:column;gap:6px}

/* შვილების ჩაკეცვა */
.cat-kids{margin-top:6px}
.cat-kids > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding-inline-start:22px;
  color:var(--brand);font-size:13.5px;font-weight:600;
}
.cat-kids > summary::-webkit-details-marker{display:none}
.cat-kids > summary::before{content:"▸";font-size:11px}
.cat-kids[open] > summary::before{content:"▾"}
/* 34px და არა 22: მე-3 დონეზე 22 ლამის უჩინარი იყო და კიბე ბრტყლად
   იკითხებოდა (მფლობელი, 2026-08-24) */
.cat-kids > .cat-tree{padding-inline-start:34px;margin-top:2px}

/* წაშლის დადასტურება — გვერდის თავში, რომ ის ხის ქვეშ არ დაიკარგოს */
.cat-doom{
  display:flex;flex-direction:column;gap:12px;margin-bottom:20px;
  background:var(--danger-soft);border:1px solid var(--danger);
  border-radius:var(--radius);padding:16px 18px;
}
.cat-doom.is-blocked{background:var(--warning-soft);border-color:var(--warning-line)}
.cat-doom-head{display:flex;gap:12px;align-items:flex-start}
.cat-doom-icon{
  flex:none;display:grid;place-items:center;width:36px;height:36px;
  border-radius:999px;background:var(--surface);color:var(--danger);
}
.cat-doom.is-blocked .cat-doom-icon{color:var(--warning)}
.cat-doom-icon .icon{width:20px;height:20px}
.cat-doom .section-label{margin:0}
.cat-doom .meta{margin:2px 0 0}
.cat-doom-facts{margin:0;padding-inline-start:20px;display:grid;gap:4px;font-size:14px}
.cat-doom-actions{display:flex;gap:8px;flex-wrap:wrap}

@media (max-width:640px){
  /* სახელს ადგილი უნდა დარჩეს: ოთხი ხატულა-ღილაკი 375px-ზე სტრიქონის
     ორ მესამედს იკავებდა და მიმართულების სახელი ორ ხაზად იტეხებოდა. */
  .cat-row{gap:6px;padding:8px}
  .cat-emblem{width:24px;height:24px}
  .cat-icon-btn{width:34px;min-height:34px}
  .cat-title{min-width:110px}

  .cat-tools{gap:8px}
  .cat-filter{width:100%}
  .cat-chip{flex:1;justify-content:center;padding:0 8px}
  .cat-kids > summary{padding-inline-start:12px}
  .cat-kids > .cat-tree{padding-inline-start:16px}
  .cat-tree-empty{padding-inline-start:16px}
  .cat-doom-actions .btn{width:100%;justify-content:center}
  .cat-doom-actions form{width:100%}
}

/* ორსვეტიანი „დამატება" ფორმა — ჯგუფების გვერდი (`/admin/groups/`).
   კატალოგმა ის დატოვა: `+` ახლა თვითონ მშობელზეა. */
.cat-add{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:12px;align-items:end;margin-bottom:20px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:16px 18px;
}
.cat-add .form-field{margin-bottom:0}
@media (max-width:640px){.cat-add{grid-template-columns:1fr}}


/* ჯგუფების სია (`/admin/groups/`): `.bank-row`-ის ქვეშ ერთი ფორმაა
   ორი ტექსტური ველითა და სამი ღილაკით — კატალოგზე ეს სამ ცალკე
   ფორმად იყო გაყოფილი (`.cat-name` + `.cat-actions`), მაგრამ ჯგუფს
   ცალკე „რედაქტირების გვერდი“ არ აქვს, ამიტომ სახელი, შენიშვნა და
   მოქმედებები ერთადაა. */
.cat-row-actions{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:0 14px 12px;
}
.cat-row-actions input{
  flex:1 1 160px;min-width:0;min-height:36px;padding:6px 10px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:13.5px;
}
.cat-row-actions input:focus{border-color:var(--brand);outline:none}
.cat-row-actions .btn{min-height:36px;padding:0 12px;font-size:13px}
@media (max-width:640px){
  .cat-row-actions{flex-direction:column;align-items:stretch}
  .cat-row-actions .btn{width:100%}
}


/* ადმინის გამოსვლა — ნავიგაციის პუნქტის ტოლი, ოღონდ მარჯვნივ გაწეული
   და მდუმარე: ის მოქმედებაა და არა გზა. */
.header-exit{margin-inline-start:12px;color:var(--muted)}
.header-exit:hover{color:var(--danger)}


/* --- დანიშვნა: ორი სია გვერდიგვერდ --- */
.assign-quick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
/* სამიზნის ამრჩევი: ჩამონათვალი და ღილაკი ერთ ხაზზე, მობილურზე კი
   ერთმანეთის ქვეშ — 375px-ზე გვერდიგვერდ ორივე იჭყლიტებოდა. */
.assign-quick-pick,.assign-quick-grade{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
/* ⚠ **წარწერა ველის მარცხნივ და არა ზემოთ.** საერთო `.form-field`
   ბადეა (წარწერა ველზე ზემოთ), ანუ ეს ფორმა მეზობელ ღილაკებზე ორჯერ
   მაღალი ხდებოდა: რიგი ჩამოვარდნილად ჩანდა და გვერდით ღილაკი ზემოთ
   რჩებოდა. ერთსიტყვიან წარწერას („კლასი" · „ჯგუფს") ცალკე ხაზი არ
   სჭირდება — გვერდიგვერდ სამივე ერთსიმაღლისაა. */
.assign-quick-pick .form-field,.assign-quick-grade .form-field{
  display:flex;align-items:center;gap:8px;margin:0;min-width:0;
}
.assign-quick-pick .form-field > span,
.assign-quick-grade .form-field > span{margin:0;white-space:nowrap}
.assign-quick-pick select{min-width:150px}
.assign-quick-pick input[type="number"],
.assign-quick-grade input[type="number"]{width:84px;min-width:0}

/* გაზიარების რიგი — ველი და ღილაკი ერთ ხაზზე, მობილურზე ერთმანეთის ქვეშ. */
.share-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.share-row .meta{flex-basis:100%;margin:0}
.share-link{margin:0;flex:1;min-width:260px}
.share-link input{font-family:var(--font-sans);font-size:14px}

.assign-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:40px}
@media (min-width:1024px){.assign-grid{grid-template-columns:1fr 1fr;gap:24px}}
.assign-col h2{font-size:18px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
/* მთელი სტრიქონი მონიშვნადია — 44px-იანი ჩექბოქსი ტელეფონზე ცოტაა. */
.assign-pick{
  flex:1;display:flex;align-items:center;gap:12px;min-width:0;
  padding:12px 14px;cursor:pointer;min-height:44px;
}
.assign-pick input{width:20px;height:20px;flex:none;accent-color:var(--brand)}
.assign-actions{margin-top:14px}

/* ვიწრო ჩარჩოზე პუნქტები ერთმანეთს უახლოვდება. */
@media (max-width:1180px){.app-nav{gap:16px}}

/* ⚠ ჰედერის ხატულები მხოლოდ იქ ჩანს, სადაც ეტევა.

   ზღვარი ადრე 1240px იყო: მაშინ ნავიგაცია შვიდპუნქტიანი იყო და
   ხატულების გარეშეც ძლივს ეტეოდა. „შემოწმება" და „საჩივრები" დაფის
   ბარათებს იმეორებდნენ და ჰედერიდან გავიდნენ — ხუთი პუნქტი კი
   ხატულებითაც 1024px-ზე 36 პიქსელის მარაგით ჯდება (გაზომილი).

   768px-ზე მაინც არ ეტევა (−29px), ამიტომ ზღვარი რჩება — ოღონდ
   1023px-ზე. ხატულა აქ დამატებაა და არა ფუნქცია: ვიწრო ეკრანზე
   სწორედ ის უნდა დაითმოს, და არა პუნქტი ან შრიფტი. */
@media (max-width:1023px){
  .app-nav .icon,
  .header-exit .icon{display:none}
}

/* ===========================================================================
   ჩემი პროგრესი — მოსწავლის სიღრმისეული ხედი
   =========================================================================== */

/* რიგი განზრახია: ჯერ მოქმედება (გასასწორებელი), მერე მიმართულება
   (ტენდენცია), მერე დეტალი (სრული სურათი). ადრე გვერდი დეტალით
   იწყებოდა და მოსწავლეს თვითონ უნდა ეპოვა, სად აქვს პრობლემა. */

.page-lead{margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.5}

.section-label .prog-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;margin-inline-start:8px;
  border-radius:999px;background:var(--danger);color:#fff;
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;
  vertical-align:1px;
}
.section-label .prog-count.is-quiet{background:var(--rule);color:var(--muted)}

/* --- გასასწორებელი ---------------------------------------------------- */
.focus-list{display:grid;gap:10px;margin-bottom:28px}
/* ბადე და არა flex: ღილაკს ფიქსირებული სვეტი აქვს, ანუ გრძელი ქართული
   თემის სახელი მას ვერ გამოაძევებს. */
.focus-row{
  display:grid;grid-template-columns:56px minmax(0,1fr);
  grid-template-areas:"pct body" "go go";
  gap:6px 14px;align-items:center;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:14px 16px;
  border-inline-start:4px solid var(--rule);
}
.focus-weak{border-inline-start-color:var(--danger)}
.focus-mid{border-inline-start-color:var(--warning-line)}
.focus-good{border-inline-start-color:var(--success)}

.focus-pct{
  grid-area:pct;font-family:var(--font-section);font-size:26px;font-weight:600;
  line-height:1;color:var(--danger);font-variant-numeric:tabular-nums;
}
.focus-mid .focus-pct{color:var(--warning)}
.focus-good .focus-pct{color:var(--success)}

.focus-body{grid-area:body;display:flex;flex-direction:column;gap:3px;min-width:0}
.focus-name{font-size:15.5px;font-weight:600;line-height:1.35}
.focus-meta{font-size:13px;color:var(--muted);line-height:1.35}

/* „სავარჯიშოში ვიცი, ტესტში — არა". ეს ჭდე მაშინაც ჩნდება, როცა შერეული
   პროცენტი კარგია — სწორედ იმ შემთხვევაში, რომელსაც შერეული რიცხვი მალავს. */
.focus-gap{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  margin-top:5px;padding:4px 9px;border-radius:6px;
  background:var(--warning-soft);color:var(--warning);
  font-size:12.5px;font-weight:600;line-height:1.3;
}
/* ღილაკი მარჯვნივ და შიგთავსის ზომაზე. მთელ სიგანეზე გაწელილი სამი
   შავი ღილაკი ერთმანეთის ქვეშ თემებზე მძიმე გამოდიოდა — ბარათს ღილაკი
   კითხულობდა და არა შედეგი. ცალკე რიგში კი იმიტომაა, რომ „დერმატოლოგია
   სალიცენზიო"-ს სიგრძის სახელს 375px-ზე ადგილი დარჩეს. */
.focus-go{grid-area:go;justify-self:end;margin-top:4px}

/* --- ტენდენცია -------------------------------------------------------- */
.trend-card{padding:16px;margin-bottom:28px}
.trend-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.trend-title{font-size:13.5px;color:var(--muted)}
.trend-delta{
  padding:4px 10px;border-radius:999px;background:var(--paper);
  color:var(--muted);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.trend-delta.is-up{background:var(--success-soft);color:var(--success-deep)}
.trend-delta.is-down{background:var(--danger-soft);color:var(--danger-deep)}

/* preserveAspectRatio:none — ხაზი სიგანეზე იჭიმება, სიმაღლე ფიქსირებული.
   ამით შტრიხი და წრეები დაიმახინჯებოდა, ამიტომ vector-effect. */
/* სვეტები ქვემოდან (2026-08-24): სიმაღლე = ქულის პროცენტი, მასშტაბი 0–100.
   Სვეტები ვიწროა და მარცხნიდან ეწყობა — მთელი წლის შედეგები უნდა
   ეტეოდეს; სიგანეს რომ გადააჭარბოს, ზოლი თავად სქროლავს. */
.trend-bars{display:flex;justify-content:flex-start;align-items:flex-end;
  gap:10px;margin:14px 0 4px;overflow-x:auto;padding-bottom:4px}
.trend-col{flex:0 0 44px;display:flex;flex-direction:column;
  align-items:center;gap:6px}
.trend-col-val{font-size:12.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.trend-col-track{display:flex;align-items:flex-end;width:100%;
  height:110px;border-radius:8px;background:var(--paper)}
.trend-col-track i{display:block;width:100%;min-height:4px;border-radius:8px;
  background:var(--brand-soft);border:1px solid var(--brand)}
.trend-col.is-last .trend-col-track i{background:var(--brand)}
.trend-col-day{font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.trend-svg{display:block;width:100%;height:72px;margin:10px 0 2px;overflow:visible}
.trend-area{fill:var(--brand-soft);stroke:none}
.trend-line{fill:none;stroke:var(--brand);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.trend-dot{fill:var(--surface);stroke:var(--brand);stroke-width:2;
  vector-effect:non-scaling-stroke}

.trend-axis{display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.trend-foot{display:flex;align-items:baseline;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--rule)}
.trend-latest{font-family:var(--font-section);font-size:28px;font-weight:600;
  line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.trend-latest-name{font-size:13px;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.trend-thin{display:flex;align-items:center;gap:10px;margin:0;
  color:var(--muted);font-size:14px;line-height:1.45}
.trend-thin .icon{flex:none;color:var(--watermark)}

/* --- სრული სურათი: სამი დონე ------------------------------------------ */
/* details და არა JavaScript: ჩაშლა ბრაუზერის ფუნქციაა, კლავიატურით
   მუშაობს და სკრინრიდერს ისედაც ესმის. */
.mastery{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;margin-bottom:28px}
.mastery-subject{border-bottom:1px solid var(--rule)}
.mastery-subject:last-child{border-bottom:0}

.mastery-subject > summary,
.mastery-topic > summary,
.mastery-topic.is-leaf,
.mastery-sub{
  display:grid;align-items:center;gap:4px 10px;
  min-height:52px;padding:10px 16px;
}
.mastery-subject > summary,.mastery-topic > summary{cursor:pointer;list-style:none}
.mastery-subject > summary::-webkit-details-marker,
.mastery-topic > summary::-webkit-details-marker{display:none}

.mastery-subject > summary{
  grid-template-columns:36px minmax(0,1fr) auto auto 16px;
  grid-template-areas:"em name pct band caret" "em meta meta meta caret";
  background:var(--paper);
}
/* ⚠ ბუდე **ნეიტრალურია და არა ლურჯი.** ემბლემა ფერადი ნახატია და
   `--brand-soft` ფონი მას ეჯიბრება — იგივე მიზეზი, რომლის გამოც
   სადესანტო გვერდზე წრე ერთხელ უკვე მოვხსენით. ხაზოვან ხატულას
   პირიქით, ფონი სჭირდება. */
.mastery-emblem{grid-area:em;display:block;width:36px;height:36px;
  align-self:center;border-radius:8px}
.mastery-emblem.is-sm{width:26px;height:26px}
.mastery-subject > summary .mastery-name{grid-area:name;font-size:15.5px;font-weight:600}
.mastery-subject > summary .mastery-meta{grid-area:meta;font-size:12.5px;color:var(--muted)}
.mastery-subject > summary .mastery-pct{
  grid-area:pct;font-family:var(--font-section);font-size:19px;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.mastery-subject > summary .band{grid-area:band}
.mastery-caret{grid-area:caret;color:var(--muted);transition:transform .15s ease}
details[open] > summary > .mastery-caret{transform:rotate(180deg)}

.mastery-topic,.mastery-topic.is-leaf{border-top:1px solid var(--rule)}
.mastery-topic > summary,.mastery-topic.is-leaf{
  grid-template-columns:26px minmax(0,1fr) 64px 40px 14px;
  grid-template-areas:"em name bar pct caret" "em count count count caret";
  padding-inline-start:20px;
}
.mastery-sub{
  grid-template-columns:minmax(0,1fr) 64px 40px;
  grid-template-areas:"name bar pct" "count count count";
  padding-inline-start:40px;border-top:1px dashed var(--rule);
  background:#FBFCFD;
}
.mastery-topic .mastery-name,.mastery-sub .mastery-name{
  grid-area:name;font-size:14.5px;line-height:1.35;min-width:0;
}
.mastery-sub .mastery-name{font-size:13.5px;color:var(--muted)}

/* --- ერთი კვანძის ზოლი (analytics/_bar.html) --------------------------- */
/* კლასები node-*-ია და არა bar-*: .bar უკვე დაკავებულია მშობლის ბარათით
   (reports/progress_card.html), სადაც სხვა სტრუქტურა და 26px სიმაღლეა. */
.node-bar{grid-area:bar;display:block;height:8px;border-radius:999px;
  background:var(--rule);overflow:hidden}
.node-fill{display:block;height:100%;border-radius:999px;background:var(--brand)}
.node-good .node-fill{background:var(--success)}
.node-mid .node-fill{background:var(--warning-line)}
.node-weak .node-fill{background:var(--danger)}
.node-pct{grid-area:pct;font-size:13.5px;font-weight:600;text-align:end;
  font-variant-numeric:tabular-nums}
.node-count{grid-area:count;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* თხელი მონაცემი ზოლისა და პროცენტის ადგილს იკავებს — იქ არაფერი დაიხატება. */
.node-thin{grid-area:bar / bar / count / pct;align-self:center;
  font-size:12.5px;color:var(--muted);text-align:end}

.band{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;
}
.band-good{background:var(--success-soft);color:var(--success-deep)}
.band-mid{background:var(--warning-soft);color:var(--warning)}
.band-weak{background:var(--danger-soft);color:var(--danger-deep)}
.band-unknown{background:var(--paper);color:var(--muted)}

/* --- შეცდომების ბანკი (პროგრესის გვერდი) ------------------------------- */
/* `.bank-panel` და არა `.bank-card`: ამ სახელს სავარჯიშოს მთავარიც
   იყენებს სულ სხვა აგებულებით, და საზიარო კლასი ბარათს ამსხვრევდა. */
.bank-panel{
  display:grid;grid-template-columns:48px minmax(0,1fr);
  grid-template-areas:"icon body" "go go";
  gap:10px 14px;align-items:center;padding:16px;margin-bottom:28px;
}
.bank-icon{
  grid-area:icon;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  background:var(--brand-soft);color:var(--brand);
}
.bank-icon .icon{width:24px;height:24px}
.bank-body{grid-area:body;display:flex;flex-direction:column;gap:2px;min-width:0}
.bank-count{font-family:var(--font-section);font-size:26px;font-weight:600;
  line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.bank-label{font-size:14.5px;font-weight:500;color:var(--ink)}
/* `bank-hint`: `.bank-note` სავარჯიშოს ბანერს ეკუთვნის (grid+ჩარჩო) და
   საზიარო სახელი ამ სტრიქონს ბოქსად აქცევდა, სიტყვა-სიტყვად დამტვრეულს. */
.bank-hint{font-size:12.5px;color:var(--muted);line-height:1.4}
.bank-panel .btn{grid-area:go;justify-self:stretch}

/* --- დასრულებული ტესტები ---------------------------------------------- */
/* ბარათები და არა ცხრილი: 375px-ზე ოთხსვეტიანი ცხრილი გვერდით
   გადახვევას ითხოვდა, ანუ მოსწავლე ვერდიქტს სქროლის გარეშე ვერ ხედავდა. */
.result-list{display:grid;gap:8px;margin-bottom:32px}
.result-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto 14px;
  grid-template-areas:"body score go" "verdict verdict go";
  gap:6px 12px;align-items:center;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:12px 14px;
  color:var(--ink);text-decoration:none;
}
.result-row:hover{border-color:var(--watermark);background:#F8FBFD}
.result-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.result-body{grid-area:body;display:flex;flex-direction:column;gap:2px;min-width:0}
.result-name{font-size:14.5px;font-weight:600;line-height:1.35}
.result-meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.result-score{grid-area:score;display:flex;align-items:baseline;gap:8px;
  font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.result-score b{font-size:15px;color:var(--ink)}
.result-go{grid-area:go;color:var(--muted)}

.verdict{grid-area:verdict;justify-self:start;
  padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.3}
.verdict-pass{background:var(--success-soft);color:var(--success-deep)}
.verdict-fail{background:var(--danger-soft);color:var(--danger-deep)}
.verdict-wait{background:var(--warning-soft);color:var(--warning)}

/* --- ცარიელი მდგომარეობა ---------------------------------------------- */
.prog-empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:40px 24px;margin-bottom:32px}
.prog-empty-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:88px;height:88px;border-radius:999px;margin-bottom:18px;
  background:var(--brand-soft);color:var(--brand);
}
.prog-empty-icon .icon{width:40px;height:40px}
.prog-empty h2{font-family:var(--font-section);font-size:21px;margin:0 0 8px}
.prog-empty p{margin:0 0 20px;color:var(--muted);font-size:14.5px;
  line-height:1.55;max-width:44ch}
.prog-empty-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

@media (min-width:600px){
  /* ღილაკი რიგის ბოლოში დგება — ვიწრო ეკრანზე ის ქვემოთ იყო, რომ
     გრძელ ქართულ სახელს ადგილი დარჩენოდა. */
  .focus-row{grid-template-columns:56px minmax(0,1fr) auto;
    grid-template-areas:"pct body go"}
  .focus-go{justify-self:end;margin-top:0}
  .bank-panel{grid-template-columns:48px minmax(0,1fr) auto;
    grid-template-areas:"icon body go"}
  .bank-panel .btn{justify-self:end}
  .result-row{grid-template-columns:minmax(0,1fr) auto auto 14px;
    grid-template-areas:"body score verdict go"}
  .verdict{justify-self:end}
  .mastery-topic > summary,.mastery-topic.is-leaf{
    grid-template-columns:26px minmax(0,1fr) 96px 44px 52px 14px;
    grid-template-areas:"em name bar pct count caret"}
  .mastery-sub{grid-template-columns:minmax(0,1fr) 96px 44px 52px;
    grid-template-areas:"name bar pct count"}
  .node-thin{grid-area:auto / bar / auto / count}
}

/* განმარტების არქონა ცხადად ითქმის — ცარიელი ბლოკი მოსწავლეს გატეხილ
   გვერდს აჩვენებდა და არა დაუსრულებელ კითხვას. ტონი ჩუმია: ეს
   შეცდომა არ არის, უბრალოდ ჯერ არ დაწერილა. */
.exp-missing{margin-top:6px;font-size:13.5px;font-style:italic;color:var(--muted)}

/* ===========================================================================
   სავარჯიშო — მიმართულებები და თემები
   =========================================================================== */

/* --- არჩეული მიმართულებების ზოლი -------------------------------------- */
.dir-bar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label edit" "chips chips";
  gap:8px 12px;align-items:center;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;
}
.dir-label{grid-area:label;font-size:13px;color:var(--muted)}
.dir-chips{grid-area:chips;display:flex;flex-wrap:wrap;gap:8px}
.dir-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  background:var(--paper);border:1px solid var(--rule);
  font-size:14px;font-weight:500;
}
.dir-chip img{display:block;width:20px;height:20px;flex:none}
.dir-edit{
  grid-area:edit;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 4px;
  color:var(--brand);font-size:14px;font-weight:600;text-decoration:none;
}
.dir-edit:hover{text-decoration:underline;text-underline-offset:3px}

/* --- შეცდომების ბანკის ზოლი -------------------------------------------- */
/* ორი ტონი: სავსე ყვითელია (საქმეა), ცარიელი მწვანე (კარგი ამბავია).
   იგივე გაყოფა, რაც დაფაზე — „საქმე" და „კონტექსტი". */
.bank-note{
  display:grid;grid-template-columns:44px minmax(0,1fr);
  grid-template-areas:"icon body" "go go";
  gap:10px 14px;align-items:center;
  border-radius:var(--radius);padding:14px 16px;margin-bottom:24px;
  border:1px solid var(--rule);background:var(--surface);
}
.bank-note.is-open{background:var(--warning-soft);border-color:var(--warning-line)}
.bank-note.is-clear{background:var(--success-soft);border-color:#BFDCCB}
.bank-note-icon{
  grid-area:icon;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:var(--surface);
}
.bank-note-icon .icon{width:22px;height:22px}
.bank-note.is-open .bank-note-icon{color:var(--warning)}
.bank-note.is-clear .bank-note-icon{color:var(--success)}
.bank-note-body{grid-area:body;display:flex;flex-direction:column;gap:3px;min-width:0}
.bank-note-body b{font-size:15px;display:flex;align-items:center;gap:8px}
.bank-note-body span{font-size:13px;line-height:1.45;color:var(--muted)}
.bank-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 8px;border-radius:999px;
  background:var(--warning);color:#fff;font-size:12.5px;font-weight:600;
}
.bank-note .btn{grid-area:go;justify-self:stretch}

/* --- ძებნა -------------------------------------------------------------- */
.topic-search{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:0 14px;margin-bottom:12px;
}
.topic-search .icon{color:var(--muted);flex:none}
.topic-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  min-height:48px;font:inherit;font-size:15px;color:var(--ink);
}

/* --- მიმართულების ჯგუფი ------------------------------------------------- */
.dir-group{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);margin-bottom:12px;overflow:hidden;
}
.dir-group > summary{
  display:grid;grid-template-columns:32px minmax(0,1fr) 16px;
  grid-template-areas:"em name caret" "em meta caret";
  gap:2px 12px;align-items:center;
  padding:14px 16px;cursor:pointer;list-style:none;
  background:var(--paper);
}
.dir-group > summary::-webkit-details-marker{display:none}
.dir-emblem{grid-area:em;display:block;width:32px;height:32px;align-self:center}
.dir-name{grid-area:name;font-size:15.5px;font-weight:600;min-width:0}
.dir-meta{grid-area:meta;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.dir-caret{grid-area:caret;color:var(--muted);transition:transform .15s ease}
details[open] > summary > .dir-caret{transform:rotate(180deg)}
.dir-empty{margin:0;padding:18px 16px;color:var(--muted);font-size:14px}

/* --- თემის რიგი --------------------------------------------------------- */
.topic-row{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto 16px;
  gap:12px;align-items:center;
  min-height:56px;padding:10px 16px;
  border-top:1px solid var(--rule);
  color:var(--ink);text-decoration:none;
}
.topic-row:hover{background:#F8FBFD}
.topic-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.topic-emblem{display:block;width:26px;height:26px}
.topic-name{font-size:14.5px;line-height:1.35;min-width:0}
.topic-count{font-size:13.5px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
.topic-go{color:var(--muted)}

/* ექვსზე მეტი თემა დამალულია, სანამ „ყველას ჩვენებას" არ დააჭერ:
   47-რიგიანი სია 375px-ზე დაახლოებით ექვსი სრული გადახვევაა.
   ⚠ დამალვა CSS-ითაა და არა შაბლონით — ასე ძებნას მთელი სია აქვს. */
.topic-row.is-extra{display:none}
.topic-list.is-open .topic-row.is-extra{display:grid}
/* ⚠ სელექტორი ზემოთას **ზუსტად უნდა უტოლდებოდეს** წონაში.
   `.topic-list.is-open` ერთ ელემენტზე ორი კლასია, ანუ ზემოთა წესი
   (0,4,0)-ია. ჯერ `.topic-row.is-hidden` (0,2,0) მქონდა, მერე
   `.topic-list .topic-row.is-hidden` (0,3,0) — ორივემ წააგო და
   ძებნით გაფილტრული რიგი გაშლილ სიაში მაინც ჩანდა: „ქირ"-ზე
   „შინაგანი მედიცინა" ბრუნდებოდა.

   ახლა წონა თანაბარია და გამარჯვებულს რიგი წყვეტს — ეს წესი ქვემოთაა.
   იცავს `tests/test_design_widths.py`. */
.topic-list.is-open .topic-row.is-hidden,
.topic-list .topic-row.is-hidden{display:none}

.topic-more{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:48px;border:0;border-top:1px solid var(--rule);
  background:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--brand);
}
.topic-more:hover{background:#F8FBFD}
.topic-more .icon{transform:rotate(90deg)}
.dir-group.is-blank .topic-more{display:none}

/* --- მიმართულებების ამრჩევი --------------------------------------------- */
/* ამრჩევი ყოველთვის გვერდზეა და არა ცალკე მისამართზე: ახალ მომხმარებელს
   ის პირველივე ეკრანზე ხვდება, არჩეულს კი „შეცვლა" აქვე ჩამოაგდებს. */
.dir-picker{margin:28px 0 32px;scroll-margin-top:80px}
.dir-lead{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.5}
.dir-form{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;
}
.dir-option{
  display:grid;grid-template-columns:22px 32px minmax(0,1fr);
  gap:14px;align-items:center;
  padding:12px 16px;min-height:64px;cursor:pointer;
  border-bottom:1px solid var(--rule);
}
.dir-option:hover{background:#F8FBFD}
.dir-option input{width:22px;height:22px;accent-color:var(--brand);flex:none}
.dir-option img{display:block;width:32px;height:32px}
.dir-option-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.dir-option-body b{font-size:15px;font-weight:600}
.dir-option-body span{font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.dir-save{margin:14px 16px;width:calc(100% - 32px)}

/* არჩევანი უკვე გაკეთებულია — ამრჩევი გვერდის ბოლოში, ჩუმად. */
.dir-picker.is-secondary .dir-form{background:var(--paper)}

@media (min-width:600px){
  .dir-bar{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"label chips edit"}
  .bank-note{grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:"icon body go"}
  .bank-note .btn{justify-self:end}
  .dir-save{width:auto;min-width:200px}
}

@media (min-width:1024px){
  /* დესკტოპზე ორი სვეტი: მარცხნივ თემები, მარჯვნივ ბანკი — მაკეტის
     მიხედვით. ბანკი მარჯვნივ იმიტომ, რომ ის მუდმივი შესასვლელია და
     არა სიის ნაწილი. */
  /* 900px-იან ზოლში: 560 + 20 + 320 = 900. ჩარჩო აღარ იხსნება —
     მოსწავლის ყველა გვერდი ერთ სვეტში დგას. */
  .practice-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;
    gap:20px;align-items:start}
  .practice-split > *{min-width:0}
  /* DOM-ის რიგი მობილურისაა (ბანკი ჯერ) — დესკტოპზე ბადე თვითონ
     გადაალაგებს და შაბლონში ორი ვარიანტი აღარ გვჭირდება. */
  .practice-main{grid-column:1;grid-row:1}
  .practice-side{grid-column:2;grid-row:1}
  /* ⚠ სელექტორი `.practice-split`-ით იწყება განზრახ. ეს წესები **ვიწრო
     სვეტისთვისაა** — ღილაკი მთელ სიგანეზე იჭიმება, რადგან 320 პიქსელში
     მარჯვნივ მიბჯენა უაზროა. არჩევანის გარეშე კი იგივე ბარათი მთელ
     1132 პიქსელს იკავებს და ღილაკიც მასთან ერთად იწელებოდა. */
  .practice-split .practice-side .bank-note{margin-bottom:16px;
    grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:"icon body" "go go"}
  .practice-split .practice-side .bank-note .btn{justify-self:stretch}
}

/* --- „რაზე ემზადები" პროფილის შევსებაში ---------------------------------
   `CheckboxSelectMultiple` სიად იხატება — ის ბარათებად გადაგვყავს, რომ
   არჩევა თითის ზომაზე იყოს და არა ჩექბოქსის. */
.dir-field{border:0;padding:0;margin:0 0 18px;min-width:0}
.dir-field legend{padding:0;margin:0 0 8px;font-size:14px;color:var(--muted)}
.dir-field ul{list-style:none;margin:0;padding:0;
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.dir-field li{border-bottom:1px solid var(--rule)}
.dir-field li:last-child{border-bottom:0}
.dir-field label{
  display:flex;align-items:center;gap:12px;
  min-height:52px;padding:10px 14px;cursor:pointer;
  background:var(--surface);font-size:15px;
}
.dir-field label:hover{background:#F8FBFD}
.dir-field input{width:20px;height:20px;flex:none;accent-color:var(--brand)}
.dir-field .field-hint{display:block;margin-top:8px}

/* ცარიელ მდგომარეობაზე ბადე არ იშლება: ბანკი მთელ სიგანეს იკავებს და
   ვიწრო სვეტში მარტო აღარ რჩება. */
.practice-solo{display:block}

/* „როგორ მუშაობს" — მხოლოდ არჩევანის შემდეგ; ცარიელ ეკრანზე ამრჩევის
   ტექსტი იმავეს უკვე ამბობს და ორი ახსნა ერთმანეთს ასუსტებს. */
.how-note{padding:16px}
.how-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;margin-bottom:10px;
  background:var(--brand-soft);color:var(--brand);
}
.how-icon .icon{width:20px;height:20px}
.how-note b{display:block;font-size:15px;margin-bottom:6px}
.how-note p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* --- ჯგუფების ბარათები (2026-08-23: ავატარები, დანიშვნა, ისტორია) ------ */
.group-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.group-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.group-card.is-off{opacity:.65}
.group-card-main{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.group-card-main:hover .person-name{color:var(--brand)}

/* ავატარები ერთმანეთს გადაფარებით — რვა სახე ერთ ზოლში, მეტი „+N"-ად */
.avatar-stack{display:flex;align-items:center}
.avatar-stack img,.avatar-stack .person-letter{width:32px;height:32px;border-radius:999px;
  border:2px solid var(--surface);margin-inline-start:-8px;object-fit:cover;
  background:var(--paper);display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted)}
.avatar-stack img:first-child,.avatar-stack .person-letter:first-child{margin-inline-start:0}
.avatar-more{margin-inline-start:6px;font-size:12.5px;color:var(--muted)}

.group-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
  border-top:1px solid var(--rule);padding-top:10px}
.group-assign{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0}
.group-assign select{max-width:280px;min-height:36px;padding:6px 10px;border:1px solid var(--rule);
  border-radius:var(--radius);background-color:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:13.5px}

/* რედაქტირება დასაკეცია — ღია ველები ყოველ ბარათზე კედელს ქმნიდა */
.group-edit summary{list-style:none;cursor:pointer;display:inline-flex}
.group-edit summary::-webkit-details-marker{display:none}
.group-edit[open] summary{margin-bottom:8px}
.group-edit .cat-row-actions{display:flex;flex-wrap:wrap;gap:8px}
.group-edit input[type="text"]{min-height:36px;padding:6px 10px;border:1px solid var(--rule);
  border-radius:var(--radius);font-size:13.5px;background-color:var(--surface);color:var(--ink)}

.group-history{margin-bottom:20px}

/* --- ტესტის ამრჩევი მოდალი (ჯგუფზე დანიშვნა) --------------------------- */
.picker{width:min(560px,calc(100vw - 32px));max-height:min(640px,86vh);
  border:0;border-radius:12px;padding:0;background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow);display:none;flex-direction:column}
.picker[open]{display:flex}
.picker::backdrop{background:rgba(22,32,43,.45)}
.picker form{display:flex;flex-direction:column;min-height:0;padding:16px 18px}
.picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.picker-head h2{font-family:var(--font-sans);font-size:17px;font-weight:600;margin:0}
.picker-search{margin:10px 0;min-height:42px;padding:8px 12px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background-color:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:14.5px}
.picker-search:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.picker-list{list-style:none;margin:0;padding:0;overflow-y:auto;min-height:0}
.picker-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:start;cursor:pointer;padding:10px 12px;
  background:none;border:0;border-bottom:1px solid var(--rule);
  font-family:var(--font-sans);color:var(--ink)}
.picker-row:hover{background:var(--brand-soft)}
.picker-row .pill{flex:none}
.picker-empty{margin:12px 0}

/* ამრჩევის მე-2 ნაბიჯი: ვადები და ხანგრძლივობა */
.picker-chosen{margin:10px 0 12px;font-size:15px}
.picker-when-grid{display:grid;gap:10px 14px;grid-template-columns:1fr 1fr}
.picker-when-grid .form-field:last-child{grid-column:1/-1}
.picker-when-grid input{min-height:42px;padding:8px 10px;border:1px solid var(--rule);
  border-radius:var(--radius);background-color:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:14.5px}
.picker-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
@media (max-width:520px){.picker-when-grid{grid-template-columns:1fr}}

/* ── მოსწავლის ბარათი (ადმინი) და ნაშრომის ჭრილი ─────────────────────────
   ორივე ერთ ბლოკშია: იგივე ტიპოგრაფია და იგივე ჭდეები აქვთ, და ერთმანეთს
   ბმულით ებმებიან — ცალკე გატანა ორ ადგილას გასასწორებელს გახდიდა. */
.dsr{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.dsr-head{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:12px;margin-bottom:14px}
.dsr h2{margin:0;font-size:19px}
.dsr h3{margin:18px 0 8px;font-size:15px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.dsr-facts{display:flex;flex-wrap:wrap;gap:16px;margin:0;color:var(--muted);
  font-size:14px}
.dsr-facts strong{color:var(--ink);font-size:17px}
.dsr-up{color:var(--success)}
.dsr-down{color:var(--danger-deep)}

.dsr-topics{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dsr-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dsr-list li{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background-color:var(--surface)}
.dsr-list li span:first-child{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dsr-list strong{font-size:15px}
.dsr-list small{color:var(--muted);font-size:12.5px}
.dsr-good{color:var(--success)}
.dsr-bad{color:var(--danger-deep)}
.dsr-flag{flex-basis:100%;color:var(--warn, var(--danger-deep));font-size:12.5px;
  font-style:normal}

.dsr-attempts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dsr-attempts a{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  justify-content:space-between;padding:12px 14px;border:1px solid var(--rule);
  border-radius:var(--radius);background-color:var(--surface);
  color:inherit;text-decoration:none}
.dsr-attempts a:hover{border-color:var(--brand);background-color:var(--paper)}
.dsr-att-title{font-weight:600}
.dsr-att-meta{display:flex;align-items:center;gap:10px;color:var(--muted);
  font-size:13px}
.dsr-att-meta strong{color:var(--ink);font-size:16px}
.dsr-pending{color:var(--muted)}

.rev{max-width:920px;margin:0 auto}
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;gap:16px;margin-bottom:20px}
.rev-score{display:flex;align-items:center;gap:12px}
.rev-score strong{font-size:28px}
.rev-score span{color:var(--muted);font-size:14px}
.rev-signals{margin-bottom:22px;padding:14px 16px;border-radius:var(--radius);
  border:1px solid var(--rule);background-color:var(--paper)}
.rev-signals h2{margin:0 0 4px;font-size:16px}
.rev-signals-note{margin:0 0 8px;color:var(--muted);font-size:13px}
.rev-signals ul{margin:0;padding-left:20px}
.rev-q-meta{display:flex;align-items:center;gap:10px}
.rev-open h3{margin:14px 0 6px;font-size:14px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.rev-open p{margin:0}

@media (max-width:720px){
  .dsr-topics{grid-template-columns:1fr}
  .rev-head{flex-direction:column}
}

/* ── ნაშრომებზე გადასვლის ღილაკი (მოსწავლის ბარათი) ──────────────────────
   Მთავარი მოქმედებაა ბარათზე, ამიტომ ცალკე ღილაკია და არა რიგითი ბმული.
   Პულსაცია მხოლოდ `.dsr-cta-live`-ზეა — ანუ როცა ნაშრომი მართლა არსებობს. */
.dsr-cta{display:inline-flex;align-items:center;gap:10px;position:relative;
  overflow:hidden;  /* ათინათი ღილაკის კიდეს არ უნდა გასცდეს */
  padding:11px 16px;border-radius:999px;text-decoration:none;font-weight:600;
  font-size:14.5px;color:#fff;background:linear-gradient(135deg,#1F5F8B,#2E86AB);
  box-shadow:0 2px 10px rgba(31,95,139,.28);
  transition:transform .15s ease, box-shadow .15s ease}
.dsr-cta:hover{transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(31,95,139,.38)}
.dsr-cta:active{transform:translateY(0)}
.dsr-cta:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.dsr-cta-label{display:inline-flex;align-items:center;gap:8px}
.dsr-cta .icon{color:#fff}
.dsr-cta-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  background:rgba(255,255,255,.22);font-size:13px;font-weight:700}

/* Პულსი და ათინათი — იგივე ხერხი, რაც სავარჯიშოს hero-ღილაკს (`.btn-exercise`).
   Რგოლი box-shadow-ითაა და არა ელემენტის გადიდებით: `transform:scale`
   ტექსტს არყევდა და მეზობლებს წევდა. */
.dsr-cta-live{animation:dsr-pulse 2.4s ease-in-out infinite}
@keyframes dsr-pulse{
  0%,100%{box-shadow:0 2px 10px rgb(31 95 139/.28),0 0 0 0 rgb(46 134 171/.32)}
  50%{box-shadow:0 2px 10px rgb(31 95 139/.28),0 0 0 12px rgb(46 134 171/0)}
}
.dsr-cta-live::after{ /* გადამავალი ათინათი */
  content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:34%;
  background:linear-gradient(105deg,transparent,rgb(255 255 255/.45),transparent);
  transform:skewX(-20deg);animation:dsr-shine 2.8s ease-in-out infinite;
  pointer-events:none}
@keyframes dsr-shine{0%{left:-40%}55%,100%{left:130%}}

/* Ვესტიბულური ხელმისაწვდომობა — მოძრაობა გამორთულია, ფერი რჩება. */
@media (prefers-reduced-motion:reduce){
  .dsr-cta-live{animation:none}
  .dsr-cta-live::after{animation:none;display:none}
  .dsr-cta{transition:none}
}

/* Ღილაკი სათაურის მარჯვენა კიდეზე — `margin-left:auto` თავისუფალ ადგილს
   მთლიანად შთანთქავს, ანუ სახელის სიგრძეზე აღარაა დამოკიდებული. */
.person-head .dsr-cta{margin-left:auto}
@media (max-width:640px){
  /* ვიწრო ეკრანზე ღილაკი ახალ ხაზზე ჩამოდის — გვერდით მას ადგილი აღარ აქვს */
  .person-head .dsr-cta{margin-left:0;width:100%;justify-content:center}
}

/* Ნაშრომების ფილტრი — ერთ ხაზზე, ძებნის ველი იჭიმება.
   `align-items:end` ღილაკს ველების ქვედა კიდეზე უსწორებს (წარწერები
   სხვადასხვა სიმაღლისაა). */
.res-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;
  margin-bottom:6px}
.res-filters .form-field{margin-bottom:0}
.res-filters .bank-search{flex:1 1 260px;min-width:200px}
.res-filters .form-field:not(.bank-search){flex:0 0 auto;min-width:170px}
@media (max-width:640px){
  .res-filters{flex-direction:column;align-items:stretch}
  .res-filters .form-field{min-width:0}
}

/* Თემის მშობელი საგანი — კონტექსტისთვის. „წილადები 20%" მარტო
   არაფერს ეუბნება მასწავლებელს; „წილადები · მათემატიკა" — ეუბნება. */
.dsr-list span{display:flex;flex-direction:column;gap:2px}
.dsr-parent{font-style:normal;font-size:12px;color:var(--muted)}

/* ═══ მოსწავლის შედეგების გვერდი ═══════════════════════════════════════
   განლაგება ChatGPT-ის ჩანახატისაა (2026-08-26) — აქ მხოლოდ დანერგვაა. */
.res-page{max-width:1180px;margin:0 auto}
.res-page .page-head{display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px;margin-bottom:18px}

/* ── სწავლის სურათი ── */
.snap{padding:20px 24px;margin-bottom:16px}
.snap-title{margin:0 0 16px;font-size:17px}
.snap-body{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.snap-stats{display:flex;align-items:stretch;gap:0;flex:0 0 auto}
.snap-stat{display:flex;flex-direction:column;gap:2px;padding:0 30px}
.snap-stat:first-child{padding-left:0}
/* გამყოფი ხაზი ბოლო სვეტს არ სჭირდება */
.snap-stat + .snap-stat{border-left:1px solid var(--rule)}
.snap-big{display:flex;align-items:center;gap:6px;font-size:38px;
  line-height:1.1;color:var(--brand)}
.snap-big i{font-style:normal;font-size:22px}
.snap-stat span{color:var(--muted);font-size:13.5px}
.snap-up{color:var(--success)}
.snap-down{color:var(--danger-deep)}
.snap-muted{color:var(--muted)}

/* სვეტოვანი გრაფიკი — inline და არა ბიბლიოთეკით (რვა სვეტი ღირს) */
/* ⚠ `overflow` აქ **განზრახ არ არის**: მხოლოდ `overflow-x`-ის მითითება
   `overflow-y`-საც `auto`-ზე გადაიყვანს (CSS-ის წესი) და გრაფიკს
   ვერტიკალური სქროლი უჩნდებოდა. ვიწრო ეკრანზე ჰორიზონტალური სქროლი
   ცალკე, ორივე ღერძის ცხადი მითითებით ირთვება. */
.snap-chart{position:relative;display:flex;align-items:flex-end;gap:14px;
  margin-left:auto;padding-left:20px}
/* ტენდენციის ხაზი სვეტების ზონაზე ზუსტად აწერია: ზემოდან პროცენტის
   წარწერა (18px) და ქვემოდან თარიღი (22px) გამოაკლდა.
   ⚠ ზომა **ცხადად** იწერება: SVG ჩანაცვლებადი ელემენტია და `width:auto`
   მას საკუთარ ჩაშენებულ 300×150-ს აძლევს, და არა კონტეინერის ზომას —
   სწორედ ეს აგდებდა `scrollHeight`-ს 294-მდე. */
.snap-line{position:absolute;left:20px;top:18px;
  width:calc(100% - 20px);height:calc(100% - 40px);
  pointer-events:none;opacity:.7}
.snap-col{display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:44px}
.snap-col-pct{font-size:12px;color:var(--muted)}
.snap-col-bar{display:block;width:26px;border-radius:6px 6px 3px 3px;
  background:#BFD4E4}
.snap-col-now .snap-col-bar{background:var(--brand)}
.snap-col-now .snap-col-pct{color:var(--brand);font-weight:700}
.snap-col-date{font-size:11.5px;color:var(--muted)}

/* ── ძლიერი / სუსტი მხარეები ── */
.sw{padding:20px 24px;margin-bottom:16px}
.sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.sw-col{padding:0 26px}
.sw-col:first-child{padding-left:0}
.sw-col + .sw-col{border-left:1px solid var(--rule)}
.sw-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-size:16px}
.sw-badge{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:999px;color:#fff;flex:0 0 auto}
.sw-badge-good{background:var(--success)}
.sw-badge-bad{background:var(--danger-deep)}

.sw-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
/* ბადე: იკონი · სახელი (იჭიმება) · % · წილადი · ჭდე
   ზოლი და შედარება მთელ სიგანეზე ჩამოდის (`grid-column:1/-1`) */
.sw-row{display:grid;grid-template-columns:auto 1fr auto auto auto;
  align-items:center;gap:6px 10px}
/* ემბლემა რეალური სურათია (`CatalogNode.emblem` → static/img/emblems/),
   ანუ `<img>` და არა SVG-სპრაიტი. ფონი რბილი ჩარჩოა — სურათებს
   გამჭვირვალე კუთხეები აქვთ და უფონოდ „ჰაერში ეკიდებოდნენ". */
.sw-ico{display:block;width:36px;height:36px;border-radius:10px;
  flex:0 0 auto;object-fit:contain;padding:3px}
.sw-ico-good{background:#E8F5EE}
.sw-ico-bad{background:#FDECEA}
.sw-name{display:flex;flex-direction:column;gap:1px;min-width:0;
  font-size:14.5px}
.sw-name i{font-style:normal;font-size:12px;color:var(--muted)}
.sw-pct{font-size:19px}
.sw-frac{color:var(--muted);font-size:12.5px}
.sw-good{color:var(--success)}
.sw-bad{color:var(--danger-deep)}
.sw-warn{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
  border-radius:999px;border:1px solid var(--warning-line);
  background:var(--warning-soft);color:#8A5A08;font-size:12px;
  white-space:nowrap}
.sw-bar{grid-column:1/-1;display:block;height:6px;border-radius:999px;
  background:var(--rule);overflow:hidden}
.sw-bar-fill{display:block;height:100%;border-radius:999px}
.sw-fill-good{background:var(--success)}
.sw-fill-bad{background:var(--danger-deep)}
.sw-split{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.sw-empty{margin:0}
.sw-note{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--rule);
  color:var(--muted);font-size:13px}
.sw-note .icon{flex:0 0 auto;margin-top:1px}

/* ── ფილტრი ── */
.res-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:14px}
.res-filters .form-field{margin-bottom:0}
/* საერთო `.form-field` ბადეა (წარწერა + ველი). აქ წარწერა ეკრანის
   მკითხველისთვისაა (`.sr-only`), ანუ ბადე ზედმეტ მწკრივს ქმნიდა და
   მობილურზე ველი 260px სიმაღლისა ხდებოდა — ამიტომ განლაგებას ცხადად
   ვცვლით. */
.res-search{display:block;position:relative;flex:1 1 280px;min-width:200px}
.res-search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;z-index:1}
.res-search input{display:block;width:100%;padding-left:42px}
.res-filters select{min-width:180px}

/* ── ნაშრომების სია ── */
.attempt-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.attempt-rows a{display:grid;
  grid-template-columns:auto 1fr auto auto auto auto;
  align-items:center;gap:14px;padding:14px 18px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background-color:var(--surface);color:inherit;text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease}
.attempt-rows a:hover{border-color:var(--brand);
  box-shadow:0 3px 12px rgba(31,95,139,.12)}
.ar-ico{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:var(--paper);color:var(--brand)}
.ar-title{font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ar-pct{font-size:20px;color:var(--brand)}
.ar-pending{display:inline-flex;color:var(--muted)}
.ar-date{color:var(--muted);font-size:12.5px;white-space:nowrap}
.ar-go{color:var(--muted)}

.pager{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:18px}
.pager-now{color:var(--muted);font-size:14px}

/* ── ცარიელი მდგომარეობა ── */
.res-empty-card{display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:38px 24px;border:1px solid var(--rule);
  border-radius:var(--radius);background-color:var(--surface);
  text-align:center;color:var(--muted)}
.res-empty-card .icon{color:var(--muted)}
.res-empty-card b{color:var(--ink);font-size:16px}
.res-empty-card .btn{margin-top:10px}

@media (max-width:900px){
  .sw-grid{grid-template-columns:1fr;gap:22px}
  .sw-col{padding:0}
  .sw-col + .sw-col{border-left:0;border-top:1px solid var(--rule);
    padding-top:20px}
  /* ვიწრო ეკრანზე სვეტები შეიძლება არ დაეტიოს — ჰორიზონტალურ სქროლს
     ვრთავთ, ვერტიკალურს კი ცხადად ვკეტავთ (იხ. ზედა გაფრთხილება). */
  .snap-chart{margin-left:0;padding-left:0;width:100%;
    overflow-x:auto;overflow-y:hidden}
  .snap-line{left:0;width:100%}
}
@media (max-width:640px){
  .res-page .page-head{flex-direction:column}
  .snap-stats{width:100%;flex-direction:column}
  .snap-stat{padding:12px 0}
  .snap-stat + .snap-stat{border-left:0;border-top:1px solid var(--rule)}
  .snap-big{font-size:32px}
  /* სვეტურ ბადეში `flex-basis` **სიმაღლეა** და არა სიგანე — 280px-იანი
     საფუძველი ძებნის ველს 260px-ად აბერავდა. */
  .res-filters{flex-direction:column;align-items:stretch}
  .res-filters .form-field,
  .res-search{flex:0 0 auto;min-width:0}
  .res-filters select{min-width:0}
  /* ვიწრო ეკრანზე ბადეს ვხსნით — ელემენტები ბუნებრივად ეხვევა.
     Grid-areas აქ არ გამოდგება: ოთხი ელემენტი ერთ უჯრაში ერთმანეთს
     გადაეფარებოდა. */
  .attempt-rows a{display:flex;flex-wrap:wrap;gap:8px 12px}
  .ar-title{flex:1 1 100%;white-space:normal;order:1}
  .ar-ico{order:0}
  .ar-pct,.ar-pending{order:2}
  .attempt-rows .pill{order:3}
  .ar-date{order:4;flex:1 1 100%}
  .ar-go{display:none}   /* მთელი რიგი ისედაც დასაწკაპუნებელია */
}


/* SMS-ის გაგზავნის რიგი დანიშვნის გვერდზე — ღილაკი და ფასის მინიშნება
   ერთ ხაზზე, მობილურზე ერთმანეთის ქვეშ. */
.sms-send-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.sms-send-row .meta{margin:0}


/* ==========================================================================
   ტესტის დანიშვნის გვერდი (გადაკეთებული 2026-08-28, დიზაინი: ChatGPT)

   ძველ ვერსიაში ხუთი ერთნაირი მწვანე ღილაკი იდგა ერთ რიგში და ორს
   იდენტური სახელიც ჰქონდა („დანიშვნა"). გვერდის ყველაზე ხმაურიანი
   ელემენტი კი წითელი „მოხსნა" იყო — ეკრანი შეუქცევად მოქმედებას
   აძლიერებდა. აქ იერარქია სამ საფეხურზეა:

     1. ბარათი (`.route`) — დანიშვნის გზა, რიცხვით და ერთი მწვანე ღილაკით
     2. `.sms-card` — ხარჯი, გაგზავნამდე დათვლილი
     3. `.btn-quiet-danger` — მოხსნა ჩუმდება; ხმა სასარგებლოს რჩება
   ========================================================================== */

/* --- სათაურის ზოლი: მარცხნივ კონტექსტი, მარჯვნივ ბმული --- */
.asg-top{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:20px}
@media (min-width:1024px){
  .asg-top{grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:start;gap:24px}
}
.asg-top .page-title{margin:4px 0 6px}
.asg-top-links{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 0}
.asg-top-links a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--brand);text-decoration:none;font-size:14px;
}
.asg-top-links a:hover{text-decoration:underline}

.asg-share{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
}
.asg-share .form-field{margin-bottom:6px}
.asg-share .meta{margin:0;font-size:13px}
/* `span` და არა `div`: მშობელი `<label>`-ია და ბლოკის ჩალაგება
   HTML-ის ვალიდაციას არღვევს. */
.asg-share-row{display:flex;gap:8px;align-items:center}
.asg-share-row input{flex:1;min-width:0}

/* --- „ვის მივცე ტესტი?" + SMS-ის სვეტი --- */
.asg-main{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:28px}
@media (min-width:1024px){
  .asg-main{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:24px;align-items:start}
}
.asg-routes .panel-sub{margin:0 0 16px}

.route-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.route-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.route-grid{grid-template-columns:repeat(4,1fr)}}

/* თითო გზა ცალკე ფორმაა (ცალკე `action`), ამიტომ ბარათი `<form>`-ია. */
.route{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:18px 14px;
}
.route-icon{color:var(--brand);display:flex}
.route-name{font-size:15px;line-height:1.3}
.route-count{color:var(--muted);font-size:13px}
/* ღილაკი ბოლოში ეკვრის — ბარათებს სხვადასხვა სიმაღლის შიგთავსი აქვთ
   (ერთს ჩამონათვალი, მეორეს რიცხვი) და ღილაკები ერთ ხაზზე უნდა დადგეს. */
.route .btn{margin-top:auto;width:100%;justify-content:center}
/* ⚠ **ეს ველები `.form-field`-ში არ არიან.** ბაზისური სტილი
   `.form-field select` / `.form-field input`-ზეა მიბმული, ანუ ბარათში
   ჩასმულ შიშველ ველს ბრაუზერის ნაგულისხმევი ჩარჩო რჩებოდა — თხელი,
   მოუმრგვალებელი, დაბალი. აქ იგივე გარეგნობა ხელით მიეწერება.
   ⚠ ისარს გლობალური `select{}` ხატავს — აქ მისი გამეორება არ სჭირდება. */
.route select,
.route input[type="number"]{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background-color:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;
  text-align:center;
}
/* ისრის ადგილი — ცენტრირებული ტექსტი მასზე რომ არ გადავიდეს. */
.route select{text-align:start;padding-inline-end:36px}
.route select:hover,
.route input[type="number"]:hover{border-color:var(--muted)}
.route select:focus-visible,
.route input[type="number"]:focus-visible{
  outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand);
}
.route .btn:disabled{opacity:.45;cursor:not-allowed}

/* --- SMS: ხარჯი გაგზავნამდე --- */
.asg-side{display:flex;flex-direction:column;gap:14px}
.sms-card{
  background:var(--success-soft);border:1px solid var(--success);
  border-radius:var(--radius);padding:16px;
}
.sms-card-head{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-weight:700;color:var(--success-deep);
}
.sms-card-sub{margin:0 0 12px;color:var(--ink);font-size:14px;line-height:1.5}
.sms-card .btn{width:100%;justify-content:center}
.sms-done{
  display:flex;flex-direction:column;gap:2px;margin:0;
  color:var(--success-deep);font-weight:600;
}
.sms-done span{font-weight:400;color:var(--muted);font-size:13px}

.sms-stats{list-style:none;margin:0;padding:0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.sms-stats li{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--rule);font-size:14px;color:var(--muted);
}
.sms-stats li:last-child{border-bottom:0}
.sms-stats b{margin-left:auto;color:var(--ink);font-size:16px}
.sms-stats .is-ok{color:var(--success)}
.sms-stats .is-warn{color:var(--danger)}

/* --- ორი სია --- */
/* ძებნა · ფილტრი · ღილაკი — **ერთ ხაზზე**. საერთო `.res-filters`
   ძებნის ველს 260px მინიმუმს აძლევს, რაც ორსვეტიან ბადეში ღილაკს
   ცალკე ხაზზე აგდებდა. აქ სვეტი ვიწროა, ანუ ველი უნდა შეიკუმშოს. */
.asg-find{margin-bottom:12px}
.asg-find .bank-search{flex:1 1 140px;min-width:0}
.asg-find .form-field:not(.bank-search){flex:0 0 auto;min-width:0}
.asg-find select{min-width:120px}
.asg-find .btn{flex:0 0 auto}

/* ⚠ **მოხსნა ჩუმდება.** სავსე წითელი ღილაკი გვერდის ყველაზე ხმაურიანი
   ელემენტი იყო, თუმცა ის იშვიათი და შეუქცევადი მოქმედებაა. ფერი რჩება
   (მნიშვნელობა იგივეა), იცვლება მხოლოდ წონა — hover-ზე ისევ ივსება,
   ანუ განზრახ დაჭერისას უკუკავშირი არ სუსტდება. */
.btn-quiet-danger{
  background:transparent;color:var(--danger);border:1px solid var(--danger);
}
.btn-quiet-danger:hover{background:var(--danger);color:#fff}
.btn-quiet-danger:active{background:var(--danger-active);border-color:var(--danger-active);color:#fff}

.asg-locked{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);font-size:13px;white-space:nowrap;
}
.asg-phone{display:flex;align-items:center;padding-inline-start:8px}
.asg-phone.is-ok{color:var(--success)}
.asg-phone.is-off{color:var(--danger)}

/* --- ვიწრო ეკრანი: ბარათი რიგად იქცევა ---
   ცენტრირებული ბარათი 375px-ზე 165px სიმაღლისაა და ოთხივე ერთად
   660px უსაქმო სქროლს იძლევა. აქ იგივე შიგთავსი ერთ რიგშია:
   ხატულა — ტექსტი — ღილაკი. */
@media (max-width:559px){
  .route{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "icon name   btn"
      "icon detail btn";
    align-items:center;text-align:start;
    gap:2px 12px;padding:12px 14px;
  }
  .route-icon{grid-area:icon}
  .route-name{grid-area:name;align-self:end}
  .route-count{grid-area:detail;align-self:start}
  /* `.route-count` და ველი ერთსა და იმავე უჯრაშია — ბარათს ერთდროულად
     ორივე არასოდეს აქვს (რიცხვი ან ამრჩევი). */
  .route select,
  .route input[type="number"]{grid-area:detail;width:100%;align-self:center}
  .route .btn{grid-area:btn;width:auto;margin:0}
}

@media (max-width:600px){
  /* ⚠ **სვეტოვან flex-ში `flex-basis` სიმაღლეა და არა სიგანე.**
     `flex:1 1 140px` მობილურზე ძებნის ველს 140px სიმაღლეს აძლევდა.
     იგივე შეცდომა შედეგების გვერდზეც დაშვებულა — იხ. `.res-filters`. */
  .asg-find .bank-search,
  .asg-find .form-field{flex:0 0 auto}

  .asg-share{padding:14px}
  /* ღილაკი ველის ქვეშ ჩადის: გვერდიგვერდ URL-ის ველს 167px რჩებოდა
     და მისამართი აღარ იკითხებოდა. */
  .asg-share-row{flex-wrap:wrap}
  .asg-share-row input{flex:1 1 100%}
  .asg-share-row .btn{width:100%;justify-content:center}
}


/* ჯგუფის ბეჯი მოსწავლეების სიაში — ბმულია და არა მხოლოდ ჭდე:
   „ვინ რომელ ჯგუფშია" კითხვას ხშირად „გამიყვანე იქ" მოსდევს. */
.pill-group{
  background:var(--brand-soft);color:var(--brand);
  text-decoration:none;border:1px solid transparent;
}
.pill-group:hover{border-color:var(--brand);text-decoration:none}

/* ინსტრუქცია — ვიდეო-გაკვეთილების სია და მოდალური ფლეიერი (2026-09-03).
   მოდალი `.lightbox`-ის წესითაა: `[hidden]` ცხადად display:none-ია, თორემ
   display:flex ატრიბუტს გადაფარავდა (იგივე ხაფანგი, რაც გასწორების ფოტოზე). */
.guide-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px}
.guide-open{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  text-align:start;font:inherit;color:var(--ink);cursor:pointer}
button.guide-open:hover,button.guide-open:focus-visible{border-color:var(--brand);background:var(--brand-soft)}
.guide-row.is-soon .guide-open{cursor:default;color:var(--muted)}
.guide-num{font-family:var(--font-display);font-size:22px;line-height:1;color:var(--brand);min-width:2.2ch}
.guide-row.is-soon .guide-num{color:var(--muted)}
.guide-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.guide-text small{color:var(--muted)}
.guide-go{color:var(--brand);flex:none}
.guide-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(22,32,43,.74)}
.guide-modal[hidden]{display:none}
/* ყუთი ეკრანზე უნდა ეტეოდეს (მფლობელი, 2026-09-04: „ზედა ნაწილი დაიმალა,
   ქვედაც არ ეტევა") — ვიდეო სიმაღლით იზღუდება, დანარჩენი ყუთშივე სქროლდება;
   `align-items:flex-start` + სქროლი ოვერლეიზე: ცენტრირებულ ყუთს, რომელიც
   viewport-ზე მაღალია, თავი ეჭრება და ვერაფრით ასწევ. */
.guide-modal{align-items:flex-start;overflow:auto;padding:16px}
.guide-modal-box{width:max-content;max-width:min(1200px,100%);min-width:min(760px,100%);margin:auto;max-height:calc(100dvh - 32px);
  box-sizing:border-box;overflow:auto;background:var(--surface);border-radius:16px;
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.guide-modal-head,.guide-modal-foot,.guide-remarks{flex:none}
.guide-modal-head,.guide-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.guide-modal-head h2{margin:0;font-family:var(--font-section);font-size:20px}
/* სიმაღლის ბიუჯეტი: სათაური + ღილაკები + შესწორების ბლოკი ≈ 430px; დანარჩენი ვიდეოსია,
   რომ 768px-იან ლეპტოპზეც ყუთი უსქროლოდ ეტეოდეს. */
.guide-modal video{width:auto;max-width:100%;height:auto;max-height:clamp(240px,calc(100dvh - 430px),675px);aspect-ratio:16/9;margin:0 auto;background:#000;border-radius:10px;display:block;flex:none}
.guide-modal-pos{color:var(--muted)}
@media (max-width:767px){
  .guide-modal{padding:8px}
  .guide-modal-box{padding:10px;gap:8px;max-height:calc(100dvh - 16px)}
  .guide-modal video{max-height:45dvh}
}
/* შესწორება ვიდეოს ქვემოთ (2026-09-03) */
.guide-remarks{border-top:1px solid var(--rule);padding-top:10px;display:grid;gap:8px}
.guide-remarks h3{margin:0;font-size:15px;font-family:var(--font-section)}
#guide-remark-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:120px;overflow:auto}
#guide-remark-list li{background:var(--paper);border-radius:10px;padding:8px 10px}
#guide-remark-list small{color:var(--muted);margin-inline-start:6px}
#guide-remark-list p{margin:4px 0 0;white-space:pre-wrap}
#guide-remark-form{display:grid;gap:8px}
#guide-remark-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--rule);border-radius:10px;padding:8px 10px;font:inherit;resize:vertical}
.guide-remark-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.guide-remark-status{color:var(--muted);font-size:14px}