/* ══════════════════════════════════════════════════════════════
   Derja with Aymen
   Visual language: the bilingual enamel street plaques of Algiers.
   White lettering on cobalt, Arabic above the Latin, a hairline
   rule set in from the edge. Each theme is announced like a street.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#F1F4F7; --surface:#FFFFFF; --surface-2:#E8EDF3; --sunk:#DFE6EE;
  --ink:#0D1626; --ink-2:#44546B; --ink-3:#7A8AA1;
  --line:#D2DBE5; --line-soft:#E3EAF1;

  --cobalt:#14417E; --cobalt-lift:#1B55A3;
  --plaque-bg:#14417E; --plaque-ink:#FFFFFF; --plaque-rule:rgba(255,255,255,.34);

  --accent:#14417E; --accent-soft:#DCE6F5;
  --amber:#9C5B08; --amber-soft:#F4E7D2;
  --green:#0C6E51; --green-soft:#D8EDE5;
  --warn:#A32F2F; --warn-soft:#F6E2E2;

  --lv1:#0C6E51; --lv1-bg:#D8EDE5;
  --lv2:#14417E; --lv2-bg:#DCE6F5;
  --lv3:#9C5B08; --lv3-bg:#F4E7D2;

  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Archivo",system-ui,sans-serif;
  --tr:"Noto Sans","Archivo",system-ui,sans-serif;
  --ar:"Noto Naskh Arabic","Segoe UI",Tahoma,serif;
  --arDisp:"Reem Kufi","Noto Naskh Arabic",serif;

  --head-h:118px;
  --radius:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#080D16; --surface:#101827; --surface-2:#161F31; --sunk:#0C1320;
    --ink:#E7EDF5; --ink-2:#9AAABF; --ink-3:#6B7C94;
    --line:#212D42; --line-soft:#182131;
    --cobalt:#4E86E8; --cobalt-lift:#6FA0F2;
    --plaque-bg:#15294A; --plaque-ink:#DFE9FA; --plaque-rule:rgba(140,180,255,.3);
    --accent:#6BA0F5; --accent-soft:#14243D;
    --amber:#E0A24A; --amber-soft:#2A2013;
    --green:#38BC90; --green-soft:#0F281F;
    --warn:#E0736C; --warn-soft:#2C1817;
    --lv1:#38BC90; --lv1-bg:#0F281F;
    --lv2:#6BA0F5; --lv2-bg:#14243D;
    --lv3:#E0A24A; --lv3-bg:#2A2013;
  }
}
:root[data-theme="dark"]{
  --bg:#080D16; --surface:#101827; --surface-2:#161F31; --sunk:#0C1320;
  --ink:#E7EDF5; --ink-2:#9AAABF; --ink-3:#6B7C94;
  --line:#212D42; --line-soft:#182131;
  --cobalt:#4E86E8; --cobalt-lift:#6FA0F2;
  --plaque-bg:#15294A; --plaque-ink:#DFE9FA; --plaque-rule:rgba(140,180,255,.3);
  --accent:#6BA0F5; --accent-soft:#14243D;
  --amber:#E0A24A; --amber-soft:#2A2013;
  --green:#38BC90; --green-soft:#0F281F;
  --warn:#E0736C; --warn-soft:#2C1817;
  --lv1:#38BC90; --lv1-bg:#0F281F;
  --lv2:#6BA0F5; --lv2-bg:#14243D;
  --lv3:#E0A24A; --lv3-bg:#2A2013;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;font-synthesis-weight:none}
h1,h2,h3,h4,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--accent)}
button,input,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ── the plaque, the core motif ─────────────────────────────── */
.plaque{
  position:relative;background:var(--plaque-bg);color:var(--plaque-ink);
  padding:16px 20px 14px;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--plaque-rule), 0 1px 0 rgba(0,0,0,.06);
}
.plaque::after{content:"";position:absolute;inset:5px;border:1px solid var(--plaque-rule);
  border-radius:1px;pointer-events:none}
.plaque-ar{font-family:var(--arDisp);direction:rtl;text-align:right;font-size:19px;line-height:1.5;
  opacity:.92;letter-spacing:0}
.plaque-lat{font-family:var(--disp);font-weight:700;font-stretch:118%;text-transform:uppercase;
  letter-spacing:.05em;font-size:15px;line-height:1.25;margin-top:2px}

/* ── sticky header ─────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:80;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar::before{content:"";position:absolute;inset:0;backdrop-filter:saturate(160%) blur(10px);z-index:-1}
.tb1{display:flex;align-items:center;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--plaque-bg);
  color:var(--plaque-ink);font-family:var(--arDisp);font-size:15px;border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--plaque-rule)}
.brand-name{font-family:var(--disp);font-weight:700;font-stretch:118%;font-size:16px;
  letter-spacing:.01em;white-space:nowrap}
.tb-links{display:flex;gap:18px;margin-left:6px}
.tb-links a{font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:5px 0;border-bottom:2px solid transparent}
.tb-links a:hover{color:var(--ink);border-bottom-color:var(--cobalt)}
.tb-links a.is-admin{color:var(--amber)}
.tb-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.whoami{font-size:13px;color:var(--ink-3);white-space:nowrap}
.linkish{font-size:13px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.linkish:hover{color:var(--ink);border-bottom-color:var(--cobalt)}
.themebtn{display:grid;place-items:center;width:32px;height:32px;background:none;
  border:1px solid var(--line);border-radius:50%;color:var(--ink-2);cursor:pointer}
.themebtn:hover{color:var(--ink);border-color:var(--ink-3)}

/* filter row */
.tb2{display:flex;align-items:center;gap:10px;padding-bottom:12px}
.tb2-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.search{position:relative;flex:1 1 auto;min-width:0}
.search input{width:100%;font-size:15px;padding:10px 14px 10px 38px;background:var(--surface);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--radius)}
.search input::placeholder{color:var(--ink-3)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.levels{display:flex;flex:0 0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.levels button{padding:10px 14px;background:none;border:0;border-right:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.levels button:last-child{border-right:0}
.levels button[aria-pressed="true"]{color:#fff}
.levels button[data-lvl="0"][aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.levels button[data-lvl="1"][aria-pressed="true"]{background:var(--lv1)}
.levels button[data-lvl="2"][aria-pressed="true"]{background:var(--lv2)}
.levels button[data-lvl="3"][aria-pressed="true"]{background:var(--lv3)}
.tb2 .tool{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.tb2 .tool:hover{color:var(--ink);border-color:var(--ink-3)}
.tb2 .tool[aria-pressed="true"],.tb2 .tool[aria-expanded="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tool .badge{background:var(--cobalt);color:#fff;border-radius:20px;padding:1px 7px;font-size:10.5px}
.tool[aria-pressed="true"] .badge,.tool[aria-expanded="true"] .badge{background:var(--bg);color:var(--ink)}

.themepanel{border-top:1px solid var(--line-soft);background:var(--surface-2)}
.themepanel[hidden]{display:none}
.themepanel .wrap{padding-top:14px;padding-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:flex;align-items:baseline;gap:8px;padding:6px 12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);border-radius:20px;font-size:12.5px;cursor:pointer}
.chip .cAr{font-family:var(--ar);direction:rtl;font-size:12px;color:var(--ink-3)}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--plaque-bg);border-color:var(--plaque-bg);color:var(--plaque-ink)}
.chip[aria-pressed="true"] .cAr{color:var(--plaque-ink);opacity:.75}
.panel-actions{display:flex;gap:14px;align-items:center;margin-top:12px}

/* ── hero ──────────────────────────────────────────────────── */
.hero{padding:52px 0 44px;border-bottom:1px solid var(--line-soft);background:
  linear-gradient(var(--surface-2), var(--bg))}
.hero-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:48px;align-items:center}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:28px}}
.bigplaque{padding:30px 30px 26px;animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bigplaque .plaque-ar{font-size:clamp(26px,4vw,34px);margin-bottom:6px}
.bigplaque .plaque-lat{font-size:clamp(21px,3vw,27px);letter-spacing:.06em}
.bigplaque .bp-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--plaque-rule);
  display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.8;font-weight:600}
.intro{font-size:clamp(17px,2.2vw,20px);line-height:1.62;max-width:58ch;color:var(--ink-2)}
.intro strong{color:var(--ink);font-weight:600}
.intro + .intro{margin-top:14px;font-size:16px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.fact{display:flex;align-items:baseline;gap:7px;padding:7px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;font-size:13px;color:var(--ink-2)}
.fact b{font-family:var(--disp);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── sections ──────────────────────────────────────────────── */
section{padding:56px 0}
section[id]{scroll-margin-top:132px}
section + section{border-top:1px solid var(--line-soft)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:10px}
.sec-head h2{font-family:var(--disp);font-weight:700;font-stretch:112%;
  font-size:clamp(23px,3.2vw,31px);letter-spacing:-.005em}
.sec-head .ar{font-family:var(--arDisp);direction:rtl;color:var(--ink-3);font-size:20px}
.sec-sub{color:var(--ink-2);max-width:66ch;margin-bottom:26px;font-size:15.5px}
.count{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ── vocabulary ────────────────────────────────────────────── */
.themeblock{margin-top:34px}
.themeblock:first-child{margin-top:0}
.themeblock > .plaque{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.plaque-n{font-family:var(--disp);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;
  opacity:.72;letter-spacing:.04em}
.entries{border:1px solid var(--line);border-top:0;background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.entry{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,1.6fr) 38px;
  gap:18px;padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.entry:last-child{border-bottom:0}
.entry:hover{background:var(--surface-2)}
.headword{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ar{font-family:var(--ar);direction:rtl;font-size:24px;line-height:1.75;font-weight:600;cursor:pointer}
.ar:hover{color:var(--cobalt)}
.ar.lat{font-family:var(--disp);direction:ltr;font-size:20px;font-weight:600;font-style:italic}
.lv{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;line-height:1.5;white-space:nowrap}
.lv-1{background:var(--lv1-bg);color:var(--lv1)}
.lv-2{background:var(--lv2-bg);color:var(--lv2)}
.lv-3{background:var(--lv3-bg);color:var(--lv3)}
.tr{font-family:var(--tr);font-size:14px;color:var(--cobalt);letter-spacing:.01em}
.en{font-size:15.5px;margin-top:1px}
.fr{font-family:var(--tr);font-size:13px;font-style:italic;color:var(--ink-3);margin-top:1px}
.note{font-size:13.5px;color:var(--ink-2);margin-top:8px;padding-left:12px;
  border-left:2px solid var(--line)}
.note.flag{border-left-color:var(--amber)}
.star{background:none;border:0;cursor:pointer;color:var(--ink-3);opacity:.4;padding:3px;line-height:0}
.star:hover{color:var(--lv3);opacity:1}
.star[aria-pressed="true"]{color:var(--lv3);opacity:1}
.empty{padding:52px 20px;text-align:center;color:var(--ink-3);border:1px dashed var(--line);
  border-radius:var(--radius)}

/* ── sentences ─────────────────────────────────────────────── */
.sgroup{margin-top:32px}
.sgroup:first-child{margin-top:0}
.sgroup > .plaque{margin-bottom:0}
.sents{border:1px solid var(--line);border-top:0;background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius)}
.sent{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 34px;gap:6px 32px;
  padding:18px 20px;border-bottom:1px solid var(--line-soft);align-items:start}
.sent .star{grid-column:3;grid-row:1}
.sent:last-child{border-bottom:0}
.s-ar{grid-column:2;grid-row:1 / span 3;align-self:center;font-family:var(--ar);direction:rtl;
  text-align:right;font-size:23px;line-height:1.95;font-weight:600}
.s-tr{grid-column:1;grid-row:1;font-family:var(--tr);font-size:14px;color:var(--cobalt)}
.s-en{grid-column:1;grid-row:2;font-size:16px}
.s-fr{grid-column:1;grid-row:3;font-family:var(--tr);font-size:13.5px;font-style:italic;color:var(--ink-3)}
@media(max-width:760px){
  .sent{grid-template-columns:1fr 30px;gap:4px 10px}
  .sent .star{grid-column:2;grid-row:1}
  .s-ar{grid-column:1;grid-row:1;margin-bottom:6px}
  .s-tr{grid-row:2}.s-en{grid-row:3}.s-fr{grid-row:4}
}

/* ── tables ────────────────────────────────────────────────── */
.tbl-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin:0 0 10px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:640px}
th{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:14.5px}
tr:last-child td{border-bottom:0}
td.meaning{font-weight:600;min-width:150px}
td.why{color:var(--ink-2);font-size:13.5px;min-width:230px}
td.why span[dir="rtl"]{font-family:var(--ar);font-size:16px;padding:0 .18em;unicode-bidi:isolate}
.pairs{display:flex;flex-direction:column;gap:8px}
.pair{display:flex;flex-direction:column;gap:1px}
.pair .a{font-family:var(--ar);direction:rtl;text-align:left;font-size:19px;line-height:1.7}
.pair .l{font-family:var(--tr);font-size:12px;color:var(--ink-3)}
td.dz .a{color:var(--ink)} td.dz .l{color:var(--cobalt)}
td.ma .a{color:var(--warn)} td.ma .l{color:var(--warn);opacity:.8}
.shared td.ma .a,.shared td.ma .l{color:var(--ink-3);opacity:1}
.tablewrap + .tbl-label{margin-top:36px}

/* ── forms, cards, alerts ──────────────────────────────────── */
.gate{padding:56px 0 88px}
.gate-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:60px;align-items:start}
@media(max-width:900px){.gate-grid{grid-template-columns:1fr;gap:36px}}
.sell{margin-top:26px;display:grid;gap:16px;max-width:54ch}
.sell li{display:flex;gap:13px;font-size:15.5px;color:var(--ink-2)}
.sell b{color:var(--ink);font-weight:600}
.sell .mark{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:2px;
  background:var(--plaque-bg);color:var(--plaque-ink);font-family:var(--ar);font-size:13px;margin-top:2px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card h2{font-family:var(--disp);font-weight:700;font-size:23px;margin-bottom:4px}
.card .sub{font-size:14.5px;color:var(--ink-2);margin-bottom:22px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.field input,.field textarea{width:100%;font-size:15px;padding:11px 13px;background:var(--bg);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--radius)}
.field input:focus,.field textarea:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.field .hint{font-size:12.5px;color:var(--ink-3)}
.btn{display:inline-block;width:100%;text-align:center;font-size:13px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:13px 20px;background:var(--plaque-bg);
  color:var(--plaque-ink);border:1px solid var(--plaque-bg);border-radius:var(--radius);
  cursor:pointer;text-decoration:none}
.btn:hover{background:var(--cobalt-lift);border-color:var(--cobalt-lift)}
.btn-sm{width:auto;padding:7px 13px;font-size:11px;letter-spacing:.05em}
.btn-ghost{background:none;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{background:none;color:var(--ink);border-color:var(--ink-3)}
.btn-danger{background:none;color:var(--warn);border-color:var(--warn)}
.btn-danger:hover{background:var(--warn);color:#fff;border-color:var(--warn)}
.card .alt{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink-2)}
.alert{border:1px solid var(--line);border-left-width:3px;padding:13px 16px;margin:0 0 22px;
  font-size:14.5px;background:var(--surface);border-radius:2px}
.alert-info{border-left-color:var(--cobalt)}
.alert-ok{border-left-color:var(--green);background:var(--green-soft)}
.alert-warn{border-left-color:var(--amber);background:var(--amber-soft)}
.alert-error{border-left-color:var(--warn);background:var(--warn-soft)}

/* ── admin ─────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;margin:24px 0 18px;flex-wrap:wrap}
.tabs a{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:9px 15px;
  border:1px solid var(--line);color:var(--ink-2);text-decoration:none;background:var(--surface);border-radius:2px}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tabs .n{opacity:.6;margin-left:6px}
.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px}
.pill-pending{background:var(--lv3-bg);color:var(--lv3)}
.pill-approved{background:var(--lv1-bg);color:var(--lv1)}
.pill-rejected{background:var(--warn-soft);color:var(--warn)}
.pill-admin{background:var(--lv2-bg);color:var(--lv2)}
td.acts{white-space:nowrap;text-align:right}
td.acts form{display:inline}
td .em{font-size:12.5px;color:var(--ink-3);display:block}
td .note{font-size:13px;color:var(--ink-2);font-style:italic;margin-top:4px;max-width:38ch;border:0;padding:0}

footer{border-top:1px solid var(--line);padding:34px 0 56px;color:var(--ink-3);font-size:13.5px}

/* ── responsive ────────────────────────────────────────────── */
@media(max-width:960px){
  .tb-links{display:none}
}
@media(max-width:720px){
  .tb1{height:54px;gap:10px}
  .whoami{display:none}
  .tb2{flex-direction:column;align-items:stretch;gap:8px;padding-bottom:10px}
  .tb2-tools{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
  .tb2-tools::-webkit-scrollbar{display:none}
  .levels{flex:0 0 auto}
  .levels button{padding:9px 11px;font-size:11.5px}
  .tb2 .tool{padding:9px 12px;font-size:11.5px}
  section[id]{scroll-margin-top:150px}
  .entry{grid-template-columns:1fr 34px;gap:3px 10px;padding:14px 16px}
  .headword{grid-column:1}
  .star{grid-column:2;grid-row:1}
  .entry > .meaning{grid-column:1/-1}
  .hero{padding:34px 0 32px}
  .bigplaque{padding:22px 22px 20px}
}
@media print{.topbar,.themepanel,.star{display:none}body{background:#fff;color:#000}}

/* ── portrait logo ─────────────────────────────────────────── */
.brand-photo{width:34px;height:34px;border-radius:9px;object-fit:cover;display:block;
  box-shadow:0 0 0 1px var(--line), 0 1px 3px rgba(0,0,0,.18)}
.teacher{display:flex;align-items:center;gap:13px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line-soft)}
.teacher img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(0,0,0,.16)}
.teacher b{display:block;font-size:15.5px;font-weight:700;line-height:1.3}
.teacher span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.selfcard{padding:18px 20px;margin-bottom:24px}
.selfform{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.selfpic{width:46px;height:46px;border-radius:11px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line)}
.selffield{flex:1 1 240px;display:grid;gap:6px}
.selffield label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.selffield input{width:100%;font-size:15px;padding:10px 13px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius)}
.selfform .btn{padding:11px 20px}
.tb-links a .wait{display:inline-block;min-width:17px;margin-left:6px;padding:1px 5px;border-radius:20px;
  background:var(--amber);color:var(--bg);font-size:10.5px;font-weight:700;text-align:center;line-height:1.5}
.testmail{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.testmail .hint{font-size:12.5px;color:var(--ink-3);flex:1 1 240px}

/* saved page */
.pagehead{padding:44px 0 8px;border-bottom:0}
.pagehead + section{border-top:0;padding-top:26px}
.subhead{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.01em}
.empty b{color:var(--ink);font-weight:700}
.wait-saved{background:var(--cobalt);color:#fff}
.steps{counter-reset:s;display:grid;gap:11px;margin:6px 0 0}
.steps li{counter-increment:s;position:relative;padding-left:34px;font-size:15px;color:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:22px;height:22px;
  display:grid;place-items:center;border-radius:5px;background:var(--plaque-bg);color:var(--plaque-ink);
  font-size:11.5px;font-weight:700}
.steps b{color:var(--ink);font-weight:600}
.fineprint{font-size:13px;color:var(--ink-3);margin-top:14px;line-height:1.6}
.advanced{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.advanced summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.advanced summary:hover{color:var(--ink)}
.testmail{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft)}

/* ── Saved: given its own button so nobody has to hunt for it ── */
.savedbtn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:7px 13px 7px 11px;border:1px solid var(--cobalt);border-radius:20px;
  color:var(--cobalt);font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.savedbtn:hover{background:var(--accent-soft)}
.savedbtn.on{background:var(--plaque-bg);border-color:var(--plaque-bg);color:var(--plaque-ink)}
.savedbtn svg{flex:0 0 auto}
.savedbtn b{background:var(--cobalt);color:#fff;border-radius:20px;padding:1px 7px;font-size:10.5px}
.savedbtn.on b{background:var(--plaque-ink);color:var(--plaque-bg)}

/* ── bottom tab bar, phones only ───────────────────────────── */
.tabbar{display:none}
@media(max-width:960px){
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -2px 14px rgba(0,0,0,.07);
  }
  .tabbar a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 2px 8px;text-decoration:none;color:var(--ink-3);font-size:10.5px;font-weight:600;
    letter-spacing:.01em;border-top:2px solid transparent}
  .tabbar a svg{width:21px;height:21px;display:block}
  .tabicon{position:relative;display:block;line-height:0}
  .tabicon b{position:absolute;top:-5px;right:-9px;min-width:16px;padding:0 4px;border-radius:20px;
    background:var(--amber);color:#fff;font-size:9.5px;line-height:16px;text-align:center;font-weight:700}
  .tablabel{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar a[aria-current="page"]{color:var(--cobalt);border-top-color:var(--cobalt)}
  .tabbar a:active{background:var(--surface-2)}
  /* Saved is the one students look for, so it is coloured, not grey */
  .tabbar a.tab-saved{color:var(--cobalt)}
  .tabbar a.tab-saved svg{fill:var(--accent-soft)}
  .tabbar a.tab-saved[aria-current="page"] svg{fill:var(--cobalt)}
  .tabbar a.tab-saved .tabicon b{background:var(--cobalt)}
  body{padding-bottom:76px}
  .savedbtn span{display:none}
  .savedbtn{padding:7px 10px;gap:5px}
}
@media(max-width:420px){
  .savedbtn{display:none}   /* the bottom bar covers it on the smallest screens */
}

/* ── watermark: the reader's own name, tiled faintly across the page ── */
.watermark{position:fixed;inset:0;z-index:70;pointer-events:none;
  color:var(--ink);opacity:.055;
  background:currentColor;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:420px 260px;mask-size:420px 260px}
@media print{.watermark{opacity:.16}}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.check input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--cobalt);cursor:pointer}
.check b{color:var(--ink);font-weight:600}

/* ── comparison tables: stack into cards on a phone, no sideways scrolling ── */
.scrollhint{display:none}
@media(max-width:760px){
  .scrollhint{display:none}
  .tablewrap{border:0;background:none;overflow:visible}
  table.cmp{min-width:0;width:100%;display:block}
  table.cmp thead{display:none}
  table.cmp tbody,table.cmp tr,table.cmp td{display:block;width:100%}
  table.cmp tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:6px 0;margin-bottom:12px}
  table.cmp td{border:0;padding:9px 16px}
  table.cmp td::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:5px}
  table.cmp td.meaning{font-size:17px;font-weight:700;padding-bottom:4px}
  table.cmp td.meaning::before{display:none}
  table.cmp td.dz,table.cmp td.ma{display:inline-block;width:50%;vertical-align:top}
  table.cmp td.why{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:11px}
  table.cmp td.empty-why{display:none}
  table.cmp .pair .a{font-size:18px}
}
.matchmsg{font-size:12.5px;min-height:1.2em;display:block}
.matchmsg.good{color:var(--green)}
.matchmsg.bad{color:var(--warn)}
.field input.is-bad{border-color:var(--warn)}
.field input.is-good{border-color:var(--green)}

/* ══ home page ══════════════════════════════════════════════ */
.home-hero{padding:56px 0 60px;background:linear-gradient(var(--surface-2),var(--bg));
  border-bottom:1px solid var(--line-soft)}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:auto auto;gap:26px 52px;align-items:center}
.home-copy{grid-column:1;grid-row:1;align-self:end}
.home-cta{grid-column:1;grid-row:2;align-self:start}
.videoframe{grid-column:2;grid-row:1 / span 2;align-self:center}
/* On a phone the video belongs above the buttons, not below them. */
@media(max-width:900px){
  .home-grid{grid-template-columns:1fr;grid-template-rows:none;gap:26px}
  .home-copy,.home-cta,.videoframe{grid-column:1;grid-row:auto}
  .home-hero{padding:30px 0 38px}
}
.home-h1{font-family:var(--disp);font-weight:700;font-stretch:112%;letter-spacing:-.015em;
  font-size:clamp(34px,5.4vw,54px);line-height:1.06}
.home-lede{margin-top:18px;font-size:clamp(16px,2vw,19px);line-height:1.62;color:var(--ink-2);max-width:52ch}
.home-lede b{color:var(--ink);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.videoframe{max-width:100%}
.videobox{position:relative;padding-top:56.25%;background:var(--plaque-bg);border-radius:var(--radius);
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--plaque-rule),0 10px 30px rgba(13,22,38,.14)}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videocap{margin-top:11px;font-size:13px;color:var(--ink-3);text-align:center}

.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.offer{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column}
.offer > .plaque{border-radius:0}
.offer-body{padding:20px 22px 24px}
.offer-for{font-size:14.5px;color:var(--ink-2);margin-bottom:14px}
.ticks{display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.ticks.big li{font-size:16.5px;padding-left:32px;color:var(--ink)}
.ticks.big li::before{left:4px;top:9px;width:14px;height:7px;border-width:2.5px}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:30px}
.quotes blockquote{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--radius);padding:16px 18px;font-size:15.5px;color:var(--ink-2);font-style:italic}
.quotes blockquote::before{content:"“"}
.quotes blockquote::after{content:"”"}
.punch{font-family:var(--disp);font-weight:700;font-size:clamp(21px,3vw,28px);line-height:1.3;
  letter-spacing:-.005em}
.punch span{color:var(--cobalt)}
.punch.small{font-size:clamp(18px,2.4vw,23px);margin-top:28px}
.trial{max-width:60ch}

.libcard{display:grid;gap:16px;padding:30px 32px}
.libcard p{font-size:15.5px;line-height:1.6;opacity:.9;max-width:60ch}
.btn-onplaque{background:var(--plaque-ink);color:var(--plaque-bg);border-color:var(--plaque-ink)}
.btn-onplaque:hover{background:#fff;border-color:#fff;color:var(--plaque-bg)}
.linkish.onplaque{color:var(--plaque-ink);opacity:.85}
.linkish.onplaque:hover{opacity:1;border-bottom-color:var(--plaque-ink)}
@media(max-width:600px){.libcard{padding:24px 20px}}

/* The public header carries two extra buttons. Without this the row overflows
   and flexbox quietly squashes the theme button instead of the long brand name. */
.brand{min-width:0;flex:0 1 auto}
.brand-photo{flex:0 0 auto}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tb-right{min-width:0;flex-wrap:nowrap;flex:0 0 auto}
.tb-right .btn,.tb-right .linkish,.themebtn,.savedbtn{flex:0 0 auto}
@media(max-width:600px){
  .tb1{gap:8px}
  .tb-right{gap:8px}
  .topbar.is-public .tb-right .linkish{display:none}   /* the page offers both actions itself */
  .topbar.is-public .brand-name{display:none}          /* the photo is the logo at this size */
  .tb-right .btn-sm{padding:8px 13px;font-size:11.5px;white-space:nowrap}
}
.topbar{overflow-x:hidden;overflow-x:clip}


/* ══ vocabulary editor ══════════════════════════════════════ */
.vsearch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.vsearch input[type=search]{flex:1 1 240px;min-width:0;font-size:15px;padding:10px 13px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius)}
.vsearch .btn-sm{white-space:nowrap}
.vlist{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.vrow{display:flex;gap:18px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.vrow:last-child{border-bottom:0}
.vrow:hover{background:var(--surface-2)}
.vmain{flex:1 1 auto;min-width:0}
.vhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vhead .ar{font-family:var(--ar);direction:rtl;font-size:21px;font-weight:600;cursor:auto}
.vcat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.vid{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.vsub{font-family:var(--tr);font-size:13.5px;color:var(--cobalt);margin-top:2px}
.ven{font-size:14.5px;margin-top:1px}
.vnote{font-size:13px;color:var(--ink-2);margin-top:5px;padding-left:11px;border-left:2px solid var(--line)}
.vacts{display:flex;gap:8px;align-items:center;flex:0 0 auto;flex-wrap:wrap}
.vacts form{display:inline}
.vform{display:block;background:var(--surface-2);border-left:3px solid var(--cobalt)}
.vform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.vform-grid label,.catfields label{display:grid;gap:5px;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700}
.vform-grid label.wide{grid-column:1 / -1}
.vform-grid input,.vform-grid select,.catfields input{width:100%;font-size:15px;padding:10px 12px;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  text-transform:none;letter-spacing:0;font-weight:400}
.vform-grid .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}
.vform-acts{display:flex;gap:10px;margin-top:16px}
.catrow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.catfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;flex:1 1 340px}
.pager{display:flex;flex-wrap:wrap;gap:4px;margin-top:20px}
.pager a{padding:7px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  text-decoration:none;font-size:13px;border-radius:2px;font-variant-numeric:tabular-nums}
.pager a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.errlist{margin:0 0 18px;display:grid;gap:5px}
.errlist li{font-size:13.5px;color:var(--warn);padding-left:14px;position:relative}
.errlist li::before{content:"·";position:absolute;left:2px}
.field select{width:100%;font-size:15px;padding:11px 13px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius)}
.field input[type=file]{width:100%;font-size:14px;padding:10px;background:var(--bg);
  border:1px dashed var(--line);border-radius:var(--radius)}
@media(max-width:700px){
  .vrow{flex-direction:column;gap:12px}
  .vacts{width:100%}
}

/* ── teacher strip: the admin pages, reachable on a phone too ── */
.teacherbar{background:var(--plaque-bg);border-bottom:1px solid var(--plaque-bg)}
.teacherbar .wrap{display:flex;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;
  overflow-x:auto;scrollbar-width:none}
.teacherbar .wrap::-webkit-scrollbar{display:none}
.tb-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--plaque-ink);opacity:.6;white-space:nowrap;flex:0 0 auto}
.teacherbar a{display:inline-flex;align-items:center;gap:6px;color:var(--plaque-ink);
  text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;flex:0 0 auto;
  padding:4px 0;border-bottom:2px solid transparent;opacity:.82}
.teacherbar a:hover{opacity:1}
.teacherbar a[aria-current="page"]{opacity:1;border-bottom-color:var(--plaque-ink)}
.teacherbar a b{background:var(--amber);color:#fff;border-radius:20px;padding:1px 7px;font-size:10.5px}