/* Armstrong Y1-Y3 design system tokens (teacher/admin surface: calm, professional) */
[hidden]{display:none !important}
:root{
  --brand-blue:#0E4C89;--brand-blue-600:#0A3A6A;--brand-blue-400:#1F66AC;--brand-blue-200:#BFD5EA;--brand-blue-100:#E6EEF7;--brand-blue-50:#F4F8FC;
  --brand-yellow:#FFCC06;--brand-yellow-600:#E0B200;--brand-yellow-100:#FFF5C9;
  --brand-orange:#F15934;--brand-orange-100:#FCE1D7;--brand-cyan:#12E0E0;--brand-cyan-100:#CFF8F8;
  --brand-magenta:#E9078A;--brand-green:#50B879;--brand-green-100:#D7F0E0;
  --ink-800:#181D27;--ink-600:#414651;--ink-400:#717680;--ink-300:#A4A7AE;--ink-200:#D5D7DA;--ink-100:#E9EAEB;--ink-50:#F5F5F6;
  --paper:#FFFFFF;--bg-soft:#FAFAFA;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--pill:999px;
  --shadow-sm:0 1px 2px rgba(10,13,18,.06),0 1px 3px rgba(10,13,18,.08);
  --shadow-md:0 4px 8px -2px rgba(10,13,18,.08),0 2px 4px -2px rgba(10,13,18,.05);
  --shadow-lg:0 12px 16px -4px rgba(10,13,18,.08),0 4px 6px -2px rgba(10,13,18,.04);
  --focus:0 0 0 4px rgba(14,76,137,.14);
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;--font-ar:'IBM Plex Sans Arabic','Geeza Pro',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg-soft);color:var(--ink-800);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--brand-blue);text-decoration:none}
button{font:inherit}
.ar{font-family:var(--font-ar);direction:rtl}
.wrap{max-width:1200px;margin:0 auto;padding:24px 24px 64px}
.loading{padding:80px 0;text-align:center;color:var(--ink-400)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:10px 24px;background:var(--paper);border-bottom:1px solid var(--ink-100)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;display:block}
.brand-sub{font-weight:700;color:var(--ink-600);border-left:1px solid var(--ink-200);padding-left:10px}
.curr{display:flex;gap:4px;background:var(--ink-50);border-radius:var(--pill);padding:4px;margin:0 auto}
.curr-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--pill);color:var(--ink-600);font-weight:500;white-space:nowrap}
.curr-btn.active{background:var(--brand-blue);color:#fff}
.curr-btn:not(.active):hover{background:rgba(14,76,137,.08)}
.who{display:flex;align-items:center;gap:10px;color:var(--ink-600)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-blue-100);color:var(--brand-blue);display:grid;place-items:center;font-weight:700}

/* type */
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-blue)}
h1{font-size:30px;line-height:1.2;margin:4px 0 6px;letter-spacing:-.01em}
h2{font-size:20px;margin:0 0 4px}
.muted{color:var(--ink-400)}
.lead{color:var(--ink-600);font-size:16px;margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--pill);border:1px solid transparent;font-weight:500;cursor:pointer;transition:transform 120ms,background 200ms;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary{background:var(--brand-yellow);color:var(--ink-800)}
.btn-primary:hover{background:var(--brand-yellow-600)}
.btn-blue{background:var(--brand-blue);color:#fff}
.btn-blue:hover{background:var(--brand-blue-600)}
.btn-green{background:var(--brand-green);color:#fff}
.btn-ghost{background:transparent;border-color:var(--ink-200);color:var(--ink-800)}
.btn-ghost:hover{background:rgba(14,76,137,.08)}
.btn-danger{background:transparent;border-color:var(--brand-orange);color:#B83A1B}
.btn-danger:hover{background:var(--brand-orange-100)}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--pill);font-size:12px;font-weight:500;background:var(--ink-50);color:var(--ink-600);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.st-processing,.st-rebuilding{background:var(--brand-blue-100);color:var(--brand-blue)}
.st-in_review{background:var(--brand-yellow-100);color:#7A5B00}
.st-changes_requested{background:var(--brand-orange-100);color:#B83A1B}
.st-approved{background:var(--brand-green-100);color:#1F7A47}
.st-published{background:var(--brand-blue);color:#fff}

/* cards & grids */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 24px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{height:32px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--ink-200);background:var(--paper);color:var(--ink-600);cursor:pointer}
.filter.on{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.card{background:var(--paper);border:1px solid var(--ink-100);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:20px;transition:transform 200ms var(--ease),box-shadow 200ms}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.course-card{display:flex;flex-direction:column;gap:10px;color:inherit}
.course-num{width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;font-weight:700;color:#fff}
.course-card h3{margin:0;font-size:18px}
.course-card .ar{color:var(--ink-400);font-size:14px}
.bar{height:8px;background:var(--ink-100);border-radius:var(--pill);overflow:hidden;display:flex}
.bar span{display:block;height:100%}
.counts{display:flex;gap:6px;flex-wrap:wrap}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.stat{background:var(--paper);border:1px solid var(--ink-100);border-radius:var(--radius-lg);padding:14px 16px}
.stat b{display:block;font-size:24px}

/* lesson list */
.crumbs{display:flex;gap:8px;align-items:center;color:var(--ink-400);font-size:13px;margin-bottom:6px;flex-wrap:wrap}
.crumbs a{color:var(--ink-600)}
.lessons{display:flex;flex-direction:column;gap:12px}
.lesson-row{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center}
.lesson-n{width:48px;height:48px;border-radius:var(--radius-md);background:var(--brand-blue-50);color:var(--brand-blue);font-weight:700;font-size:18px;display:grid;place-items:center}
.lesson-title b{font-size:16px}
.lang-cells{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lang-cell{display:flex;align-items:center;gap:8px;border:1px solid var(--ink-100);border-radius:var(--radius-md);padding:6px 6px 6px 12px;background:var(--bg-soft)}
.lang-cell .lang{font-weight:700;font-size:12px;color:var(--ink-600);width:22px}

/* review page */
.review{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
.tab{display:flex;flex-direction:column;gap:4px;min-width:150px;text-align:left;padding:10px 14px;border-radius:var(--radius-lg);border:1px solid var(--ink-100);background:var(--paper);cursor:pointer}
.tab.on{border-color:var(--brand-blue);box-shadow:var(--focus)}
.tab b{font-size:14px}
.player{background:#000;border-radius:var(--radius-xl);overflow:hidden;position:relative}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.markers{position:relative;height:18px;margin:8px 4px 0}
.marker{position:absolute;top:2px;width:12px;height:12px;border-radius:50%;background:var(--brand-orange);border:2px solid #fff;transform:translateX(-50%);cursor:pointer;box-shadow:var(--shadow-sm)}
.marker.res{background:var(--brand-green)}
.track{position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink-200);border-radius:2px}
.src-info{font-size:12px;color:var(--ink-400);margin:6px 4px 0;min-height:18px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.panel{background:var(--paper);border:1px solid var(--ink-100);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.panel-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--ink-100)}
.comments{max-height:56vh;overflow:auto;padding:8px}
.comment{padding:10px;border-radius:var(--radius-md);display:grid;grid-template-columns:auto 1fr;gap:4px 10px}
.comment:hover{background:var(--ink-50)}
.comment.resolved .ctext{color:var(--ink-400);text-decoration:line-through}
.tstamp{font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand-blue);background:var(--brand-blue-100);border:0;border-radius:var(--pill);padding:2px 8px;cursor:pointer;height:22px}
.cmeta{grid-column:2;font-size:12px;color:var(--ink-400);display:flex;gap:8px;align-items:center}
.cmeta button{border:0;background:none;color:var(--brand-blue);cursor:pointer;padding:0;font-size:12px}
.compose{padding:12px;border-top:1px solid var(--ink-100)}
textarea,input[type=text],input[type=password],input[type=number],select{width:100%;font:inherit;border:1px solid var(--ink-200);border-radius:var(--radius-sm);padding:10px 12px;background:#fff;color:var(--ink-800)}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--brand-blue);box-shadow:var(--focus)}
textarea{min-height:72px;resize:vertical}
.compose-row{display:flex;gap:8px;align-items:center;margin-top:8px;justify-content:space-between}
.history{padding:8px 16px 16px;font-size:13px;color:var(--ink-600)}
.history li{margin:4px 0}
.empty{padding:24px;text-align:center;color:var(--ink-400)}
.meta-line{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--ink-400);font-size:13px}
.lang-switch{display:flex;gap:4px;background:var(--ink-50);border-radius:var(--pill);padding:4px}
.lang-switch a{padding:6px 14px;border-radius:var(--pill);color:var(--ink-600);font-weight:500}
.lang-switch a.on{background:var(--paper);color:var(--ink-800);box-shadow:var(--shadow-sm)}

/* login */
.login{max-width:420px;margin:72px auto;padding:32px}
.login h1{font-size:24px}
.field{margin:14px 0}
.field label{display:block;font-weight:500;margin-bottom:6px}
.err{color:#B83A1B;min-height:20px;margin:6px 0}

/* modal & toast */
.modal{position:fixed;inset:0;background:rgba(10,58,106,.45);display:grid;place-items:center;z-index:50;padding:16px}
.dialog{background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:90vh;overflow:auto}
.dialog-h{padding:20px 24px 8px}
.dialog-b{padding:8px 24px}
.dialog-f{padding:16px 24px 20px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.opt{border:1px solid var(--ink-100);border-radius:var(--radius-lg);padding:12px 14px;margin:10px 0}
.opt > label{display:flex;gap:10px;align-items:center;font-weight:500;cursor:pointer}
.opt .sub{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt .sub .full{grid-column:1/-1}
.inline{display:flex;gap:6px;align-items:center}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink-800);color:#fff;padding:10px 18px;border-radius:var(--pill);z-index:60;box-shadow:var(--shadow-lg)}

@media (max-width:900px){
  .review{grid-template-columns:1fr}
  .comments{max-height:none}
}
@media (max-width:640px){
  .wrap{padding:16px 16px 48px}
  .top{flex-wrap:wrap;gap:10px;padding:10px 16px}
  .curr{order:3;width:100%;margin:0}
  .curr-btn{flex:1;justify-content:center;padding:8px 10px;font-size:13px}
  .brand-sub,.who .name{display:none}
  h1{font-size:24px}
  .lesson-row{grid-template-columns:44px 1fr}
  .lang-cells{grid-column:1/-1;justify-content:flex-start}
  .lesson-n{width:40px;height:40px;font-size:16px}
  .actions .btn{flex:1}
}

.kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.kinds .filter{padding:4px 10px;font-size:12px}
#cw{width:100%;margin-bottom:8px}
.chip.kind-pronunciation{background:#FDE7F3;color:#B8056C}
.chip.kind-audio{background:#E6FBFB;color:#0B7F80}
.chip.kind-video{background:#EAF1FA;color:#0E4C89}
.chip.kind-content{background:#FFF6D6;color:#7A5B00}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line,#E6E9EF);vertical-align:top}
.tbl tr.resolved{opacity:.55}
.card:has(.tbl){overflow-x:auto}

.vnote{background:#FFF6D6;border-color:#FFE48A;font-size:14px;margin-top:10px}

.course-num.wide{width:auto;min-width:40px;padding:0 10px;white-space:nowrap;font-size:14px}
.prog-tabs .filter{display:inline-flex;align-items:center;text-decoration:none}