/* Qalam Exam Builder — interface styles (2026 refresh).
   Hand-written, no build step. Qalam-green identity on a calm neutral ground,
   with layered surfaces, soft depth and generous rhythm. Every class name from
   the previous stylesheet is preserved, so all views restyle without edits.
   Logical properties throughout for RTL; print, mobile drawer and a11y kept. */

/* The hidden attribute must actually hide.

   `[hidden]` lives in the user-agent stylesheet, so ANY author rule that sets
   `display` on the same element beats it. Two elements in this application do
   exactly that and were therefore permanently on screen:

     .lp-overlay   display:flex  — the "Writing your lesson plan…" overlay sat
                                   over the planning form from the moment the
                                   page loaded, at a fixed 6%, covering the
                                   Generate button at z-index 1000. No teacher
                                   could submit the form at all.
     .grid         display:grid  — the pacing fields on the exam page.

   Declared here once, with !important, so the attribute wins over any class
   that happens to set display. Anything wanting to show such an element removes
   the attribute, which is what every script here already does. */
[hidden] { display: none !important; }

:root {
  /* Brand — Qalam emerald */
  --green-900:#0c3527; --green-800:#0f3d2e; --green-700:#146b4e; --green-600:#178a63;
  --green-500:#1fa576; --green-100:#e4f4ee; --green-50:#f1f9f5;
  --brand:#178a63; --brand-strong:#0f3d2e;

  /* Ink + surfaces */
  --ink-900:#0f1720; --ink-700:#334155; --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-100:#e8edf3; --ink-50:#f1f5f9;
  --paper:#ffffff; --ground:#eef2f6; --soft:#f6f9fb;

  /* Status */
  --amber:#b4690e; --amber-bg:#fef4e4; --amber-line:#f4dcae;
  --red:#b0332a; --red-bg:#fdecea; --red-line:#f2c9c4;
  --blue:#1f5b8f; --blue-bg:#eaf3fb; --blue-line:#c8dff2;

  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --shadow-sm:0 1px 2px rgba(15,23,32,.06);
  --shadow:0 1px 2px rgba(15,23,32,.05), 0 6px 20px rgba(15,23,32,.06);
  --shadow-lg:0 12px 34px rgba(15,23,32,.12);
  --sidebar-w:250px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink-900);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .55rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--ink-900)}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
p{margin:0 0 .75rem}
hr{border:none;border-top:1px solid var(--ink-100);margin:1.25rem 0}

/* ============================ Shell ============================ */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:linear-gradient(185deg,#0f4231 0%,#0c3527 60%,#092a20 100%);
  color:#c7ddd3;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
.sidebar .brand{padding:1.15rem 1.2rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:.15rem;position:relative;padding-inline-start:3.6rem}
.sidebar .brand::before{content:"Q";position:absolute;inset-inline-start:1.2rem;top:1.05rem;
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,#2bd196,#12734f);color:#06231a;font-weight:800;font-size:1.05rem;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sidebar .brand strong{color:#fff;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
.sidebar .brand span{font-size:.74rem;color:#8fb8a9;line-height:1.35}
.sidebar nav{padding:.7rem .6rem 1rem;flex:1;overflow-y:auto}
.sidebar nav::-webkit-scrollbar{width:8px}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.sidebar nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;margin:.1rem 0;
  color:#c7ddd3;font-size:.9rem;border-radius:var(--radius-sm);border-inline-start:3px solid transparent;
  transition:background .15s ease,color .15s ease}
.sidebar nav a:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.sidebar nav a.active{background:rgba(43,209,150,.16);color:#fff;font-weight:650;
  border-inline-start-color:#2bd196;box-shadow:inset 0 0 0 1px rgba(43,209,150,.15)}
.sidebar .group{padding:1rem .95rem .35rem;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.1em;color:#6f9a8b;font-weight:700}
.sidebar .foot{padding:.9rem 1.1rem 1.1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem}
.sidebar .foot a{display:block;color:#bcd6cb;padding:.28rem 0}
.sidebar .foot a:hover{color:#fff;text-decoration:none}
.sidebar .foot .who{color:#fff;font-weight:650;margin-top:.5rem}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--ink-100);padding:.9rem 1.9rem;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;position:sticky;top:0;z-index:20}
.topbar h1{font-size:1.15rem;font-weight:700}
.content{padding:1.9rem;max-width:1220px;width:100%}

/* ============================ Cards & layout ============================ */
.card{background:var(--paper);border:1px solid var(--ink-100);border-radius:var(--radius);box-shadow:var(--shadow)}
.card + .card{margin-top:1.2rem}
.card-head{padding:1rem 1.25rem;border-bottom:1px solid var(--ink-100);display:flex;
  justify-content:space-between;align-items:center;gap:1rem}
.card-head h2,.card-head h3{margin:0}
.card-body{padding:1.25rem}
.grid{display:grid;gap:1.15rem}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.auto{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem}
@media(max-width:1000px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .content{padding:1.05rem}}

/* ============================ Mobile nav (unchanged behaviour) ============================ */
.nav-toggle-input{position:absolute;opacity:0;pointer-events:none}
.nav-toggle{margin:0;display:none;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--ink-300);border-radius:var(--radius-sm);background:var(--paper);cursor:pointer;flex:0 0 auto}
.nav-toggle span{display:block;width:17px;height:2px;background:var(--ink-700);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--ink-700)}
.nav-toggle span::before{top:-5px} .nav-toggle span::after{top:5px}
.nav-scrim{display:none}
@media(max-width:680px){
  .nav-toggle{display:inline-flex}
  .topbar{padding:.7rem 1rem;gap:.7rem}
  .topbar h1{font-size:1.02rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar{position:fixed;top:0;left:0;z-index:40;height:100dvh;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .nav-toggle-input:checked ~ .shell .sidebar{transform:translateX(0)}
  .nav-toggle-input:checked ~ .shell .nav-scrim{display:block;position:fixed;inset:0;z-index:30;background:rgba(10,20,16,.5)}
  .sidebar nav a{padding:.72rem .95rem}
}
@media print{.sidebar,.topbar,.nav-toggle,.nav-scrim{display:none!important}
  .content{padding:0;max-width:none}.card{border:none;box-shadow:none}}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:60;background:var(--paper);
  padding:.6rem 1rem;border-radius:0 0 var(--radius-sm) 0;font-weight:600}
.skip:focus{inset-inline-start:0}

/* ============================ Metrics ============================ */
.metric{background:var(--paper);border:1px solid var(--ink-100);border-radius:var(--radius);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.metric::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--green-500),var(--green-700));opacity:.9}
.metric .n{font-size:1.8rem;font-weight:750;letter-spacing:-.03em;line-height:1.1;color:var(--ink-900)}
.metric .l{font-size:.8rem;color:var(--ink-500);margin-top:.2rem;font-weight:500}
.metric>span:first-child{display:block;font-size:.78rem;color:var(--ink-500);margin-bottom:.25rem;font-weight:500}
.metric>strong{display:block;font-size:1.65rem;font-weight:750;letter-spacing:-.03em;line-height:1.15;color:var(--ink-900)}
.metric.accent-blue::before{background:linear-gradient(#3b82f6,#1f5b8f)}
.metric.accent-amber::before{background:linear-gradient(#f59e0b,#b4690e)}
.metric.accent-red::before{background:linear-gradient(#ef4444,#b0332a)}

/* ============================ Buttons ============================ */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:var(--radius-sm);
  border:1px solid var(--ink-300);background:var(--paper);color:var(--ink-900);font-size:.88rem;font-weight:600;
  cursor:pointer;text-decoration:none;line-height:1.3;transition:background .15s,box-shadow .15s,transform .05s,border-color .15s}
.btn:hover{background:var(--soft);text-decoration:none;box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green-600);border-color:var(--green-600);color:#fff}
.btn-primary:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;box-shadow:0 4px 14px rgba(23,138,99,.28)}
.btn-danger{color:var(--red);border-color:var(--red-line)}
.btn-danger:hover{background:var(--red-bg)}
.btn-sm{padding:.34rem .7rem;font-size:.8rem;border-radius:var(--radius-xs)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}

/* ============================ Page links ============================
   Used by resources/views/vendor/pagination/qalam.blade.php. Laravel's own
   paginators assume Tailwind or Bootstrap; without these rules a paginated
   page ends in a screen-high empty band. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pager-links{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;padding:.34rem .6rem;
  border:1px solid var(--ink-300);border-radius:var(--radius-xs);background:var(--paper);color:var(--ink-900);
  font-size:.82rem;font-weight:600;text-decoration:none;line-height:1.3}
.pager-btn:hover{background:var(--soft);text-decoration:none}
.pager-btn.is-current{background:var(--green-600);border-color:var(--green-600);color:#fff}
.pager-btn.is-off{opacity:.45;pointer-events:none}
.pager-gap{padding:0 .2rem;color:var(--ink-500)}
.pager-count{margin:0;font-size:.82rem;color:var(--ink-500)}

/* ============================ Forms ============================ */
label{display:block;font-size:.83rem;font-weight:600;color:var(--ink-700);margin-bottom:.35rem}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=date],
input[type=datetime-local],input[type=search],input[type=tel],select,textarea{
  width:100%;padding:.6rem .7rem;border:1px solid var(--ink-300);border-radius:var(--radius-sm);
  font:inherit;font-size:.9rem;background:var(--paper);color:var(--ink-900);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-600);
  box-shadow:0 0 0 3px rgba(31,165,118,.18)}
textarea{min-height:84px;resize:vertical}
.field{margin-bottom:1rem}
.hint{font-size:.78rem;color:var(--ink-500);margin-top:.3rem}
fieldset{border:1px solid var(--ink-100);border-radius:var(--radius-sm);padding:1rem;margin:0 0 1rem;background:var(--soft)}
legend{font-size:.8rem;font-weight:700;color:var(--ink-700);padding:0 .4rem}
.check{display:flex;gap:.55rem;align-items:flex-start;font-weight:400;font-size:.88rem;margin-bottom:.45rem}
.check input{width:auto;margin-top:.2rem}

/* ============================ Tables ============================ */
.table-wrap{overflow-x:auto;border:1px solid var(--ink-100);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
.table-wrap > table{margin:0}
th{text-align:start;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);
  padding:.7rem .9rem;border-bottom:1px solid var(--ink-100);font-weight:700;white-space:nowrap;background:var(--soft)}
td{padding:.72rem .9rem;border-bottom:1px solid var(--ink-100);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--green-50)}

/* ============================ Badges ============================ */
.badge{display:inline-block;padding:.18rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;
  background:var(--ink-50);color:var(--ink-700);white-space:nowrap;border:1px solid var(--ink-100)}
.badge-green{background:var(--green-100);color:var(--green-700);border-color:transparent}
.badge-amber{background:var(--amber-bg);color:var(--amber);border-color:transparent}
.badge-red{background:var(--red-bg);color:var(--red);border-color:transparent}
.badge-blue{background:var(--blue-bg);color:var(--blue);border-color:transparent}

/* ============================ Notices ============================ */
.notice{padding:.85rem 1.05rem;border-radius:var(--radius-sm);margin-bottom:1.2rem;font-size:.9rem;
  border:1px solid;border-inline-start-width:4px}
.notice-ok{background:var(--green-50);border-color:#bfe0d4;border-inline-start-color:var(--green-600);color:var(--green-900)}
.notice-warn{background:var(--amber-bg);border-color:var(--amber-line);border-inline-start-color:var(--amber);color:#7a4708}
.notice-err{background:var(--red-bg);border-color:var(--red-line);border-inline-start-color:var(--red);color:var(--red)}
.notice-info{background:var(--blue-bg);border-color:var(--blue-line);border-inline-start-color:var(--blue);color:var(--blue)}

/* ============================ Empty states ============================ */
.empty{text-align:center;padding:3rem 1.5rem;color:var(--ink-500)}
.empty h3{color:var(--ink-700);margin-bottom:.4rem}
.empty p{max-width:40ch;margin:0 auto 1rem}

/* ============================ Questions ============================ */
.q{border:1px solid var(--ink-100);border-radius:var(--radius);margin-bottom:1rem;background:var(--paper);box-shadow:var(--shadow-sm);overflow:hidden}
.q-head{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1.05rem;
  background:var(--green-50);border-bottom:1px solid var(--ink-100);flex-wrap:wrap;align-items:center}
.q-meta{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.q-body{padding:1.05rem}
.q-text{margin-bottom:.7rem;white-space:pre-wrap}
.choices{list-style:none;padding:0;margin:0}
.choices li{padding:.35rem 0;padding-inline-start:1.7rem;position:relative}
.choices li .lab{position:absolute;inset-inline-start:0;font-weight:700;color:var(--ink-500)}
.choices li.correct{color:var(--green-700);font-weight:600}
.provenance{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--ink-100);font-size:.8rem;color:var(--ink-500)}
.provenance a{font-weight:600}

/* ============================ Progress ============================ */
.bar{height:9px;background:var(--ink-100);border-radius:999px;overflow:hidden}
.bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--green-500),var(--green-700));transition:width .4s ease}

/* ============================ Misc ============================ */
.muted{color:var(--ink-500)}
.small{font-size:.82rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}
.stack > * + *{margin-top:.8rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.right{margin-inline-start:auto}
.code-chip{display:inline-block;background:linear-gradient(150deg,var(--green-700),var(--green-900));color:#fff;
  padding:.4rem .9rem;border-radius:var(--radius-sm);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.1rem;letter-spacing:.08em;font-weight:700;box-shadow:var(--shadow-sm)}

/* ============================ Auth ============================ */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:radial-gradient(1200px 600px at 20% -10%,#1a7a5a 0%,transparent 55%),
             linear-gradient(160deg,#0f4231,#082017)}
.auth .box{width:100%;max-width:400px;background:var(--paper);border-radius:18px;padding:2.1rem;
  box-shadow:0 24px 60px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
.auth h1{font-size:1.3rem;margin-bottom:.25rem}
.auth .sub{color:var(--ink-500);font-size:.88rem;margin-bottom:1.5rem}

/* ============================ RTL / Arabic ============================ */
[dir=rtl],[dir=auto]:dir(rtl){text-align:start}
.q-text[dir=auto],.choices li[dir=auto]{unicode-bidi:plaintext}
[dir=rtl] .sidebar{left:auto;right:0}
@media(max-width:680px){
  [dir=rtl] .sidebar{transform:translateX(100%)}
  [dir=rtl] .nav-toggle-input:checked ~ .shell .sidebar{transform:translateX(0)}
}
[dir=rtl] .say,[dir=rtl] .rev{border-left:none;border-inline-start:3px solid var(--green-600)}
[dir=rtl] .provenance{text-align:start}
[dir=rtl] body{line-height:1.9;font-family:"Noto Naskh Arabic","Amiri","Segoe UI",Tahoma,-apple-system,sans-serif}

/* ============================ Language switcher ============================ */
.lang{display:inline-flex;gap:.15rem;background:#eef2f0;border:1px solid var(--ink-100);border-radius:999px;padding:.14rem}
.lang a{padding:.22rem .65rem;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--ink-500);text-decoration:none;line-height:1.5}
.lang a:hover{color:var(--ink-900);text-decoration:none}
.lang a.on{background:var(--paper);color:var(--green-700);box-shadow:var(--shadow-sm)}
.sidebar .lang{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.sidebar .lang a{color:#a9c9bd}
.sidebar .lang a.on{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}

/* Small helpers used by a few screens (key/value pairs, big figures). These
   were unstyled before; print views carry their own styles and are unaffected. */
.k{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);font-weight:700}
.v{font-size:1.05rem;font-weight:650;color:var(--ink-900)}
.big{font-size:1.9rem;font-weight:750;letter-spacing:-.02em;line-height:1.1}

/* ============================================================================
   Paper Exams & OMR — dashboard components (additive; prefixed to avoid clashes)
   ========================================================================== */
.omr-hero{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:space-between}
.omr-hero .meta{display:flex;flex-direction:column;gap:.25rem}
.omr-hero .meta h2{margin:0;font-size:1.3rem;line-height:1.2}
.omr-hero .sub{color:var(--muted);font-size:.9rem}
.omr-hero .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}

/* progress bar */
.bar{position:relative;height:10px;border-radius:999px;background:var(--ground);overflow:hidden}
.bar > span{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--brand);transition:width .4s ease}
.bar.sm{height:7px}
.bar-label{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:.35rem}

/* workflow stepper */
.omr-steps{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 0}
.omr-step{flex:1 1 130px;min-width:130px;position:relative;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--soft)}
.omr-step .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--ground);color:var(--muted);font-size:.78rem;font-weight:700;margin-bottom:.4rem}
.omr-step .t{font-weight:600;font-size:.9rem;line-height:1.2}
.omr-step .d{color:var(--muted);font-size:.78rem;margin-top:.15rem}
.omr-step.done{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--paper))}
.omr-step.done .n{background:var(--brand);color:#fff}
.omr-step.active{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
.omr-step.active .n{background:var(--brand-strong);color:#fff}

/* stat tiles (large) */
.omr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem}
.omr-stat{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem .85rem;background:var(--paper)}
.omr-stat .k{color:var(--muted);font-size:.8rem}
.omr-stat .v{font-size:1.5rem;font-weight:700;line-height:1.1;margin-top:.15rem;font-variant-numeric:tabular-nums}
.omr-stat.good .v{color:var(--brand)}
.omr-stat.warn .v{color:var(--amber)}
.omr-stat.bad .v{color:var(--red)}

/* score cell */
.score{display:flex;align-items:center;gap:.5rem;min-width:120px}
.score .bar{flex:1}
.score .pct{font-variant-numeric:tabular-nums;font-weight:600;font-size:.85rem;width:3ch;text-align:right}

/* copy / command box */
.copybox{display:flex;align-items:center;gap:.5rem;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-xs);padding:.45rem .6rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;overflow:x auto}
.copybox code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.copybox button{flex:none}

/* status chips (reuse badge palette semantics) */
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .55rem;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid transparent;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor;opacity:.9}
.chip.generated{color:var(--muted);background:var(--ground)}
.chip.scanned{color:var(--blue);background:var(--blue-bg);border-color:var(--blue-line)}
.chip.marked{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--paper));border-color:color-mix(in srgb,var(--brand) 25%,transparent)}
.chip.review{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-line)}
.chip.published{color:#fff;background:var(--brand);border-color:var(--brand)}

.omr-sec-title{display:flex;align-items:center;gap:.5rem;font-weight:600;margin:0}
.omr-sec-title .step-badge{font-size:.72rem;color:var(--muted);font-weight:600;border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem}
.filter-input{max-width:260px}

/* ============================================================================
   OMR review — professional decision view (additive)
   ========================================================================== */
.rev-progress{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.rev-progress .bar{flex:1;min-width:180px}
.rev-grid{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:1.2rem;align-items:start}
@media (max-width:760px){.rev-grid{grid-template-columns:1fr}}
.rev-scanwrap{position:sticky;top:1rem}
.rev-scan{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:zoom-in;display:block}
.rev-scan-tabs{display:flex;gap:.35rem;margin-bottom:.5rem}
.rev-scan-tabs button{font-size:.8rem;padding:.25rem .6rem;border:1px solid var(--line);background:var(--soft);border-radius:999px;cursor:pointer;color:var(--muted)}
.rev-scan-tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.rev-q{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem;background:var(--paper)}
.rev-q + .rev-q{margin-top:.8rem}
.rev-q-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.rev-q-head .qno{font-weight:700;font-size:1.05rem}
.rev-crop{border:1px solid var(--line);border-radius:var(--radius-xs);background:#fff;max-width:100%;cursor:zoom-in;display:block;margin:.2rem 0 .6rem}
.opt-row{display:grid;grid-template-columns:1.4rem 1fr 3.2rem;align-items:center;gap:.5rem;padding:.15rem 0}
.opt-row .lab{font-weight:700;text-align:center}
.opt-row .pct{text-align:right;font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--muted)}
.opt-row.detected .lab{color:var(--brand)}
.opt-row.detected{background:color-mix(in srgb,var(--brand) 8%,transparent);border-radius:var(--radius-xs)}
.opt-bar{height:9px;border-radius:999px;background:var(--ground);overflow:hidden}
.opt-bar > span{display:block;height:100%;border-radius:999px;background:var(--muted)}
.opt-bar.hot > span{background:var(--brand)}
.rev-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line)}
.rev-actions .pick{min-width:2.4rem;font-weight:700}
.rev-actions .pick.sel{background:var(--brand);color:#fff;border-color:var(--brand)}
.rev-reason{flex:1;min-width:140px;padding:.35rem .55rem;border:1px solid var(--line);border-radius:var(--radius-xs);font-size:.85rem}
/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,15,20,.86);display:none;align-items:center;justify-content:center;z-index:1000;padding:1.5rem;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
.lightbox .lb-close{position:absolute;top:1rem;right:1.2rem;color:#fff;font-size:2rem;line-height:1;cursor:pointer;opacity:.85}

/* ============================================================================
   Lesson-plan generation progress overlay (additive)
   ========================================================================== */
.lp-overlay{position:fixed;inset:0;background:rgba(15,23,32,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1.2rem}
.lp-card{background:var(--paper);border-radius:var(--radius);padding:1.7rem 1.8rem;max-width:440px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}
.lp-card h3{margin:.6rem 0 .1rem;font-size:1.15rem}
.lp-spin{width:34px;height:34px;border:3px solid var(--ground);border-top-color:var(--brand);border-radius:50%;margin:0 auto;animation:lpspin .8s linear infinite}
.lp-steps{list-style:none;margin:1rem 0 0;padding:0;text-align:left;display:flex;flex-direction:column;gap:.35rem}
.lp-steps li{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);transition:color .3s}
.lp-steps li .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);flex:none;transition:all .3s}
.lp-steps li.on{color:var(--text)}
.lp-steps li.on .dot{border-color:var(--brand)}
.lp-steps li.done{color:var(--brand)}
.lp-steps li.done .dot{background:var(--brand);border-color:var(--brand)}
@keyframes lpspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lp-spin{animation:none}.bar>span{transition:none}}