:root{
    --bg:#eef4f0; --panel:#ffffff; --panel2:#f4f9f6; --line:#dde8e2;
    --ink:#16241d; --mut:#5f7468; --mut2:#8aa093;
    --green:#16a34a; --green2:#1eb85a; --green-d:#0c7a3c; --accent:#42e283;
    --hero1:#114433; --hero2:#0a2a20;
    --ok:#16a34a; --miss:#ef4444; --extra:#ea580c; --partial:#ca8a04;
    --r:14px; --r2:10px;
    --shadow:0 1px 2px rgba(15,40,28,.06), 0 12px 30px -16px rgba(15,40,28,.22);
    --glow:0 10px 26px -12px rgba(22,163,74,.55);
  }
  *{ box-sizing:border-box; }
  body{ margin:0; font:14.5px/1.6 ui-sans-serif,system-ui,"Segoe UI",Arial; color:var(--ink); background:var(--bg);
        -webkit-font-smoothing:antialiased; min-height:100vh; }
  a{ color:inherit; text-decoration:none; } .hidden{ display:none !important; }

  nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px;
       padding:11px 30px; background:#fff; border-bottom:1px solid var(--line); }
  .brand{ display:flex; align-items:center; gap:11px; }
  .brand img{ height:46px; width:auto; display:block; }
  .brand .bt{ font-size:21px; font-weight:800; letter-spacing:.2px; color:var(--ink); }
  .brand .bt em{ font-style:normal; color:var(--green); }
  .brand .bs{ font-size:11px; color:var(--mut); margin-top:-3px; }
  .navlinks{ display:flex; gap:4px; margin-left:14px; }
  .navlinks a{ padding:8px 16px; border-radius:999px; color:var(--mut); font-weight:600; font-size:14px; cursor:pointer; transition:.15s; }
  .navlinks a:hover{ color:var(--ink); }
  .navlinks a.active{ color:var(--green); background:#e7f6ee; }
  .navspace{ flex:1; }
  .navprog{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--green-d);
            background:#e7f6ee; border:1px solid #bfe6cd; padding:7px 13px; border-radius:999px; cursor:pointer; }
  .spin{ width:13px;height:13px;border-radius:50%; border:2px solid #bfe6cd; border-top-color:var(--green); animation:sp .8s linear infinite; }
  @keyframes sp{ to{ transform:rotate(360deg); } }
  .getstarted{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border:0; border-radius:11px; cursor:pointer;
        font-weight:800; font-size:14.5px; color:#fff; background:linear-gradient(180deg,var(--green2),var(--green-d)); box-shadow:var(--glow); }
  .getstarted:hover{ filter:brightness(1.06); }

  .wrap{ max-width:1400px; margin:0 auto; padding:30px 26px 70px; }

  /* hero (dark green) */
  .hero{ position:relative; overflow:hidden; color:#eafff3; min-height:calc(100vh - 69px);
         background:linear-gradient(100deg, rgba(8,32,24,.80) 0%, rgba(8,32,24,.40) 52%, rgba(8,32,24,.12) 100%), #0a2a20 url("/static/hero-bg.png") center right / cover no-repeat; }
  .herobg{ display:none; }   /* hero art now comes from the background image (hero-bg.png) */
  .hero .wrap{ position:relative; padding-top:40px; padding-bottom:34px; }
  h1.hero-h{ font-size:50px; line-height:1.05; margin:6px 0 14px; font-weight:800; letter-spacing:-.6px; color:#fff; max-width:640px; }
  h1.hero-h .b{ color:var(--accent); }
  .sub{ color:#bfe7d2; font-size:16.5px; max-width:560px; margin:0; }

  .uploads{ display:grid; grid-template-columns:1fr 64px 1fr; align-items:stretch; margin:30px 0 6px; }
  .ucard{ background:#fff; border-radius:var(--r); padding:20px; box-shadow:0 16px 40px -20px rgba(0,0,0,.5); color:var(--ink); display:flex; flex-direction:column; }
  .ucard h3{ display:flex; align-items:center; gap:12px; margin:4px 0 16px; font-size:24px; font-weight:800; letter-spacing:-.3px; }
  .ucard h3 .ic{ width:42px;height:42px;border-radius:50%; display:grid;place-items:center; background:#e7f6ee; color:var(--green); flex:none; }
  .drop{ border:1.6px dashed #c2d6cb; border-radius:12px; padding:30px 16px; text-align:center; cursor:pointer; transition:.18s; background:#f7fbf9; flex:1; display:flex; flex-direction:column; justify-content:center; min-height:160px; }
  .drop:hover,.drop.over{ border-color:var(--green); background:#eef9f2; }
  .drop .cl{ font-size:34px; color:var(--green); }
  .drop .t{ color:var(--mut); margin-top:6px; }
  .drop .t a,.fmt a{ color:var(--green); font-weight:700; }
  .drop.has{ border-color:var(--green); background:#eafaf0; } .drop.has .t{ color:#15803d; }
  .fmt{ margin-top:12px; color:var(--mut2); font-size:12.5px; display:flex; align-items:flex-start; gap:7px; flex-wrap:wrap; min-height:40px; }
  .vs{ display:grid; place-items:center; }
  .vs span{ width:52px;height:52px;border-radius:50%; display:grid;place-items:center; font-weight:800; color:#eafff3;
            background:var(--green-d); border:3px solid rgba(255,255,255,.15); }
  .startbar{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:24px; }
  .progwrap{ width:100%; max-width:680px; display:flex; flex-direction:column; align-items:stretch; gap:15px; margin-top:6px; }
  .proghead{ display:flex; align-items:center; justify-content:center; gap:12px; font-weight:800; font-size:23px; color:#eafff3; letter-spacing:-.2px; }
  .proghead .pdot{ width:13px; height:13px; border-radius:50%; background:var(--accent); animation:ppulse 1.4s infinite; }
  @keyframes ppulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)} 70%{box-shadow:0 0 0 12px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
  .proghead.q{ color:#ffe9b8; } .proghead.q .pdot{ background:#fbbf24; animation:ppulseq 1.4s infinite; }
  @keyframes ppulseq{ 0%{box-shadow:0 0 0 0 rgba(251,191,36,.5)} 70%{box-shadow:0 0 0 12px rgba(251,191,36,0)} 100%{box-shadow:0 0 0 0 rgba(251,191,36,0)} }
  .progbar{ width:100%; height:26px; border-radius:14px; background:rgba(255,255,255,.14); overflow:hidden; position:relative; box-shadow:inset 0 1px 3px rgba(0,0,0,.3); }
  .progfill{ height:100%; width:0%; border-radius:14px; background:linear-gradient(90deg,var(--green2),var(--accent)); transition:width .35s ease; }
  /* QUEUED: don't fake progress with a partial fill — show a moving barber-pole stripe */
  .progbar.queued .progfill{ width:100%!important; transition:none; border-radius:14px;
    background:repeating-linear-gradient(45deg,rgba(251,191,36,.6) 0 20px,rgba(251,191,36,.2) 20px 40px);
    background-size:200% 100%; animation:qmove 1s linear infinite; }
  @keyframes qmove{ from{background-position:0 0} to{background-position:56.6px 0} }
.progtxt{ color:#cfeede; font-weight:700; font-size:16px; letter-spacing:.2px; text-align:center; min-height:20px; }
.progtxt b{ color:#eafff3; }
.queue-moved{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:rgba(52,211,153,.14); color:#86efac; font-size:12px; font-weight:800;
  animation:queueMoved .7s ease both; }
@keyframes queueMoved{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
  .status{ color:#bfe7d2; min-height:18px; font-size:13.5px; } .status.err,.err{ color:#fda4a4; }
  .diskmode{ margin-top:4px; width:100%; max-width:640px; }
  .diskmode summary{ color:#bfe7d2; cursor:pointer; font-size:13px; text-align:center; }
  .diskgrid{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
  .diskgrid input{ padding:11px 13px; border:1px solid rgba(255,255,255,.22); border-radius:10px; background:rgba(255,255,255,.96); color:#16241d; font:inherit; }
  .diskgrid .btn{ align-self:center; }
  .dnote{ color:#bfe7d2; font-size:12px; text-align:center; opacity:.85; }
  .lightsec .status.err,.lightsec .err{ color:var(--miss); }

  .btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 32px; border-radius:12px; border:0; cursor:pointer;
        font-weight:800; font-size:16px; color:#fff; background:linear-gradient(180deg,var(--green2),var(--green-d)); box-shadow:var(--glow); transition:.15s; }
  .btn:hover{ filter:brightness(1.06); } .btn:active{ transform:translateY(1px); } .btn:disabled{ opacity:.55; cursor:default; }
  .btn.sec{ background:#fff; box-shadow:var(--shadow); border:1px solid var(--line); color:var(--green-d); font-size:13.5px; padding:10px 18px; }
  .btn.ghost{ background:#fff; border:1px solid var(--line); color:var(--mut); box-shadow:none; }
  .btn.mini{ padding:6px 12px; font-size:12.5px; border-radius:8px; }
  .btn.ghost.mini.active{ background:#16365c; color:#fff; border-color:#16365c; }
  .seg3d-legend label{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; }
  .seg3d-legend i{ width:11px; height:11px; border-radius:2px; display:inline-block; }

  .lightsec{ background:var(--bg); }
  .sectwrap{ text-align:center; margin-top:8px; }
  .sechead{ display:inline-flex; align-items:center; gap:12px; font-size:24px; font-weight:800; }
  .sechead::before,.sechead::after{ content:""; width:34px; height:2px; background:var(--green); border-radius:2px; }
  .sectsub{ color:var(--mut); margin:6px 0 18px; }
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:6px; }
  .stepc{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); position:relative; }
  .stepc .n{ width:34px;height:34px;border-radius:50%; display:grid;place-items:center; font-weight:800; color:#fff;
             background:linear-gradient(180deg,var(--green2),var(--green-d)); position:absolute; top:18px; left:74px; font-size:14px; }
  .stepc .ic{ width:54px;height:54px;border-radius:50%; background:#e7f6ee; color:var(--green); display:grid;place-items:center; font-size:22px; margin-bottom:12px; }
  .stepc h4{ margin:4px 0 6px; font-size:17px; } .stepc p{ color:var(--mut); margin:0; font-size:13.5px; }

  .secttitle{ font-size:24px; font-weight:800; margin:6px 0 4px; padding-left:14px; border-left:5px solid var(--green); }
  .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .muted{ color:var(--mut); } .row{ display:flex; gap:14px; } .grow{ flex:1; }

  table{ width:100%; border-collapse:collapse; }
  th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid #eef3f0; }
  th{ color:var(--mut); font-size:12.5px; cursor:pointer; user-select:none; font-weight:600; }
  tbody tr{ cursor:pointer; transition:.1s; } tbody tr:hover{ background:#f1f8f4; }
  tr.sel{ background:#e7f6ee; box-shadow:inset 3px 0 0 var(--green); }
  .pill{ padding:3px 11px; border-radius:20px; font-weight:800; font-size:12.5px; color:#fff; display:inline-block; min-width:50px; text-align:center; }

  /* friendly results rows (thumbnail + info + big report button) */
  .srow{ display:flex; align-items:center; gap:16px; padding:11px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow); margin-bottom:10px; transition:.12s; }
  .srow:hover{ box-shadow:0 12px 28px -14px rgba(15,40,28,.42); transform:translateY(-1px); }
  .sthumb{ width:92px; height:68px; object-fit:contain; background:#f7fbf9; border:1px solid var(--line); border-radius:10px; flex:none; }
  .sinfo{ flex:1; min-width:0; }
  .sname{ font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .smeta{ color:var(--mut); font-size:12.5px; margin-top:4px; display:flex; gap:14px; flex-wrap:wrap; }
  .smeta.err{ color:var(--miss); } .smeta b{ color:var(--ink); }
  .rflag{ background:#fff7ed; color:var(--extra); border:1px solid #fed7aa; padding:1px 8px; border-radius:20px; font-size:10.5px; font-weight:700; margin-left:7px; vertical-align:middle; }
  .report-btn{ flex:none; padding:10px 18px; font-size:13.5px; }
  .sortsel{ padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; color:var(--ink); cursor:pointer; }
  .tips{ display:flex; align-items:center; gap:10px; margin:16px auto 0; max-width:660px; padding:10px 15px; border-radius:11px;
         background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:#d6f3e4; font-size:13px; }
  .tips .tk{ flex:none; font-size:16px; } .tips b{ color:#eafff3; }

  .resultcard{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr); gap:22px; align-items:stretch; }
  .resultcard>div:first-child{ display:grid !important; grid-template-columns:150px minmax(0,1fr); gap:18px !important; align-items:center !important; min-width:0; }
  .scorehero{ display:grid; place-items:center; }
  .donut{ position:relative; } .donut .lbl{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
  .donut .lbl b{ font-size:30px; } .donut .lbl span{ color:var(--mut); font-size:12px; display:block; }
  .metricgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .metric{ display:flex; align-items:center; gap:10px; min-height:58px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
  .metric .ic{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:900; font-size:13px; flex:none; }
  .metric .mtext{ min-width:0; }
  .metric .mlabel{ font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.055em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .metric .mvalue{ margin-top:3px; font-size:20px; font-weight:900; font-variant-numeric:tabular-nums; }
  .metric.ok .mvalue{ color:var(--ok); } .metric.warn .mvalue{ color:var(--partial); } .metric.bad .mvalue{ color:var(--miss); } .metric.extra .mvalue{ color:var(--extra); }
  .metric.hatch .mvalue{ color:var(--ok); }
  .crit{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .crit .li{ display:flex; align-items:center; gap:10px; min-height:62px; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); color:var(--ink); font-size:13px; line-height:1.25; }
  .crit .li .ic{ width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:900;font-size:13px; flex:none; }
  .crit .li b{ margin-left:auto; font-size:20px; font-variant-numeric:tabular-nums; }
  .crit .li.layer-summary{ display:none; }
  .feedback{ margin:0; padding:13px 15px; border-radius:12px; background:#eafaf0; border:1px solid #bfe6cd; color:#15803d; font-size:13.5px; line-height:1.45; }
  .report-actions{ display:grid; grid-template-columns:86px 1fr auto; gap:10px; align-items:end; margin-top:12px; }
  .report-actions textarea{ min-height:46px; }
  .report-actions #ovState{ grid-column:1 / -1; }
  .secondary-strip{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 16px; }
  .secondary-strip details{ flex:1 1 280px; }
  .warnbanner{ margin:0 0 16px; padding:12px 15px; border-radius:10px; background:#fff7ed; border:1px solid #fed7aa; border-left:4px solid var(--extra); color:#9a3412; font-size:13.5px; }
  .warnbanner b{ color:#7c2d12; }
  .calc{ margin:0; font-size:12.5px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:#101b17; overflow:hidden; }
  .calc>summary{ cursor:pointer; color:#d9efe3; font-weight:800; list-style:none; padding:12px 14px; }
  .calc>summary::-webkit-details-marker{ display:none; }
  .calc>summary::after{ content:"Open"; float:right; color:#6ee7a8; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
  .calc[open]>summary::after{ content:"Close"; }
  .calc>table,.calc>.formula,.calc>.brk,.calc>.cnote{ margin-left:12px; margin-right:12px; }
  .calc table{ margin:8px 0; } .calc td{ padding:3px 9px; border-bottom:1px solid #eef3f0; }
  .calc td.n{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .calc td.ok{ color:var(--ok); } .calc td.miss{ color:var(--miss); } .calc td.ex{ color:var(--extra); } .calc td.partial{ color:var(--partial); }
  .calc .formula{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:9px 11px;
        font-family:ui-monospace,Consolas,monospace; font-size:12px; line-height:1.8; margin:6px 0; overflow-x:auto; }
  .calc .cnote{ color:var(--mut); margin-top:6px; }
  .calc .brk{ margin:8px 0; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .calc .brow{ display:flex; justify-content:space-between; gap:10px; padding:6px 11px; border-bottom:1px solid #eef3f0; }
  .calc .brow:last-child{ border-bottom:0; }
  .calc .brow.tot{ background:var(--panel2); font-weight:800; }
  .calc .bok{ color:var(--ok); } .calc .bmiss{ color:var(--miss); } .calc .bex{ color:var(--extra); } .calc .bpartial{ color:var(--partial); }
  .ehint{ padding:8px 14px 10px; font-size:11.5px; color:var(--mut2); border-bottom:1px solid var(--line); line-height:1.5; }
  .bbar{ height:16px; border-radius:6px; overflow:hidden; display:flex; background:#eef3f0; border:1px solid var(--line); }
  .bbar>span{ display:block; height:100%; } .bcap{ margin-top:8px; font-size:12.5px; color:var(--mut); }

  .ovbox{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
  .toolbar{ display:flex; align-items:center; gap:8px; padding:11px 12px; border-bottom:1px solid var(--line); background:var(--panel2); flex-wrap:wrap; }
  .map-title{ font-weight:900; color:var(--ink); margin-right:8px; }
  .stepper{ display:flex; align-items:center; gap:4px; } .stepper .cnt{ font-size:12.5px; color:var(--mut); min-width:96px; text-align:center; }
  .toggles{ display:flex; gap:12px; margin-left:auto; font-size:12px; color:var(--mut); align-items:center; }
  .toggles label{ display:flex; align-items:center; gap:5px; cursor:pointer; }
  .toggles .leg{ display:flex; align-items:center; gap:4px; color:var(--partial); }
  .toggles .leg i{ width:11px; height:11px; border-radius:2px; display:inline-block; }
  .svgwrap{ position:relative; height:clamp(460px,62vh,760px); background:#fbfdfc; cursor:grab; } .svgwrap.drag{ cursor:grabbing; }
  svg.ov{ width:100%; height:100%; display:block; touch-action:none; }
  .it{ fill:none; }
  .it.matched{ stroke:var(--ok); stroke-width:1.4; }
  .it.matched.partial{ stroke:var(--partial); stroke-width:2; }
  .it.missing{ stroke:var(--miss); stroke-width:1.7; }
  .it.extra{ stroke:var(--extra); stroke-width:1.5; }
  .it.shifted{ stroke:var(--partial); stroke-width:2.2; }
  .it.sectionmarker.matched{ stroke:#d000d8; stroke-width:1.7; }
  .it.sectionhead{ stroke:#d000d8; stroke-width:1.6; fill:none; }
  .it.hatch{ stroke-width:1.8; fill:rgba(47,179,116,.10); }
  .it.hatch.missing{ fill:rgba(255,93,93,.08); }
  .it.hatch.shifted,.it.hatch.wrongtype{ fill:rgba(255,211,61,.08); }
  .it.active{ stroke-width:3.4; filter:drop-shadow(0 0 4px currentColor); }
  .hide-matched .matched{ display:none; } .hide-missing .missing{ display:none; } .hide-extra .extra{ display:none; } .hide-shifted .shifted{ display:none; }
  .cloud{ fill:none; stroke-dasharray:7 5; stroke-width:1.4; opacity:.55; }
  .cloud.missing{ stroke:var(--miss); } .cloud.extra{ stroke:var(--extra); } .cloud.shifted,.cloud.wrongtype{ stroke:var(--partial); } .cloud.active{ opacity:1; stroke-width:2; }
  .badges{ position:absolute; inset:0; pointer-events:none; }
  .badge{ position:absolute; transform:translate(-50%,-50%); width:24px;height:24px;border-radius:50%; color:#fff; font-weight:800; font-size:12px;
          display:grid;place-items:center; pointer-events:auto; cursor:pointer; box-shadow:0 2px 6px rgba(15,40,28,.35); border:2px solid #fff; transition:.12s; }
  .badge.missing{ background:var(--miss); } .badge.extra{ background:var(--extra); } .badge.shifted,.badge.wrongtype{ background:var(--partial); }
  .badge.active{ transform:translate(-50%,-50%) scale(1.35); z-index:3; }
  .elist{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
  .elist h4{ margin:0; padding:15px 15px; font-size:15px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .elist h4 .ecount{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 8px; border-radius:999px; background:rgba(255,211,61,.16); color:#ffd33d; font-weight:900; letter-spacing:0; }
  .escroll{ overflow:auto; max-height:calc(68vh + 1px); }
  .erow{ display:flex; align-items:center; gap:10px; padding:12px 13px; border-bottom:1px solid #eef3f0; cursor:pointer; }
  .erow:hover{ background:#f1f8f4; } .erow.active{ background:#e7f6ee; }
  .enum{ width:26px;height:26px;border-radius:50%; color:#fff; font-weight:900; font-size:12px; display:grid;place-items:center; flex:none; }
  .enum.missing{ background:var(--miss); } .enum.extra{ background:var(--extra); } .enum.shifted,.enum.wrongtype{ background:var(--partial); }
  .einfo{ flex:1; min-width:0; } .einfo b{ font-size:13px; } .einfo .s{ color:var(--mut); font-size:11.5px; }
  .ecost{ font-weight:800; } .ecost.missing{ color:var(--miss); } .ecost.extra{ color:var(--extra); } .ecost.shifted,.ecost.wrongtype{ color:var(--partial); }
  .report-previews{ margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }
  .preview-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .preview-heading h3{ margin:0; font-size:16px; color:var(--ink); }
  .preview-heading span{ color:var(--mut); font-size:12px; }
  .panels{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:0; }
  .panel{ background:#fff; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
  .panel .cap{ background:var(--panel2); color:var(--ink); padding:8px 12px; font-weight:700; font-size:13px; border-bottom:1px solid var(--line); }
  .panel img{ width:100%; height:clamp(240px,34vw,440px); object-fit:contain; display:block; background:#fff; }

  .statcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
  .sc{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); }
  .sc .l{ color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
  .sc .v{ font-size:30px; font-weight:800; margin-top:4px; }
  .chartrow{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
  .chartcard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow); }
  .chartcard h4{ margin:0 0 14px; font-size:15px; }
  .back{ color:var(--green-d); cursor:pointer; font-weight:600; display:inline-flex; gap:6px; align-items:center; margin-bottom:12px; }
  .legend{ display:flex; gap:14px; margin-top:10px; font-size:12px; color:var(--mut); flex-wrap:wrap; }
  .dot{ display:inline-block; width:10px;height:10px;border-radius:3px; margin-right:5px; vertical-align:middle; }
  input[type=number]{ width:80px; padding:7px 9px; background:#fff; border:1px solid var(--line); border-radius:8px; color:var(--ink); font:inherit; }
  textarea{ width:100%; padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:8px; color:var(--ink); font:inherit; resize:vertical; min-height:42px; }
  .empty{ color:var(--mut); text-align:center; padding:50px; }

  .doc h3{ font-size:18px; margin:0 0 8px; } .doc p{ margin:8px 0; }
  .doc .ar{ display:none; }
  .doc .ex{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); margin:16px 0; }
  .doc table td,.doc table th{ border-bottom:1px solid #eef3f0; padding:7px 10px; }
  .doc .fig{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; justify-content:center; margin:6px 0 14px; }
  .doc .fig figcaption{ text-align:center; color:var(--mut); font-size:12.5px; margin-top:4px; }
  .pillbox{ display:inline-block; padding:2px 8px; border-radius:6px; font-weight:700; font-size:12px; }
  .pm{ background:#fef2f2; color:var(--miss); } .pe{ background:#fff7ed; color:var(--extra); } .pk{ background:#eafaf0; color:var(--ok); }
  .gcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .gnum{ display:flex; gap:12px; align-items:flex-start; }
  .gnum .ic{ width:46px;height:46px;border-radius:50%; display:grid;place-items:center; color:#fff; font-size:18px; flex:none; }
  .contact-card{ max-width:520px; margin:0 auto; }
  .contact-card .ci{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #eef3f0; }
  .contact-card .ci:last-child{ border-bottom:0; }
  .contact-card .ci .ic{ width:40px;height:40px;border-radius:10px;background:#e7f6ee;color:var(--green);display:grid;place-items:center;font-size:18px; }
  .contact-card .ci b{ display:block; } .contact-card .ci a{ color:var(--green-d); }
  @media(max-width:980px){ .uploads{ grid-template-columns:1fr; } .vs{ margin:10px 0; } .steps,.statcards,.gcards{ grid-template-columns:1fr 1fr; }
     .chartrow,.grid2,.resultcard,.panels{ grid-template-columns:1fr; } h1.hero-h{ font-size:36px; } .herobg{ display:none; } }

  /* ===== v2 chrome: left icon rail + account top-bar ===== */
  nav{ z-index:60; }
  .navlinks{ display:none; }                 /* navigation moved to the left rail */
  .acct{ display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 7px; border:1px solid var(--line);
         border-radius:999px; background:#fff; cursor:pointer; transition:.15s; }
  .acct:hover{ background:#f1f8f4; box-shadow:var(--shadow); }
  .acct .av{ width:30px;height:30px;border-radius:50%; background:linear-gradient(180deg,var(--green2),var(--green-d));
             color:#fff; display:grid;place-items:center; font-size:14px; }
  .acct .nm{ font-weight:700; font-size:13.5px; } .acct .cr{ color:var(--mut2); font-size:11px; }
  .rail{ position:fixed; left:0; top:69px; bottom:0; width:66px; background:#fff; border-right:1px solid var(--line);
         display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 0; z-index:55; }
  .ri{ width:44px;height:44px;border-radius:13px; display:grid;place-items:center; color:var(--mut2); cursor:pointer; transition:.15s; }
  .ri:hover{ background:#eef6f1; color:var(--green-d); }
  .ri.active{ background:#e7f6ee; color:var(--green-d); box-shadow:inset 0 0 0 1.5px #c8e9d6; }
  .ri svg{ width:21px;height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .view{ padding-left:66px; }
  .lightsec{ min-height:calc(100vh - 69px); }

  /* class-average card (results header) */
  .avgcard{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px;
            padding:22px 24px; box-shadow:var(--shadow); margin-bottom:18px; }
  .avgcard .wave{ position:absolute; right:0; bottom:0; width:60%; height:118%; opacity:.6; pointer-events:none; }
  .avgrow{ position:relative; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .avgico{ width:64px;height:64px;border-radius:17px; background:linear-gradient(160deg,#d8f5e3,#9fe6bd); display:grid;place-items:center; flex:none; }
  .avgico svg{ width:32px;height:32px; fill:none; stroke:var(--green-d); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .avgcap{ color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
  .avgbig{ font-size:42px; font-weight:800; line-height:1.02; margin-top:2px; }
  /* per-group header (multiple sections graded together) */
  .grphead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:22px 2px 12px;
            padding:9px 14px; background:linear-gradient(180deg,#f3faf6,#eaf6ef); border:1px solid var(--line);
            border-radius:13px; }
  .grphead:first-of-type{ margin-top:6px; }
  .grpbadge{ background:linear-gradient(160deg,var(--green),var(--green-d)); color:#fff; font-weight:800;
             font-size:13px; padding:5px 13px; border-radius:9px; letter-spacing:.02em; }

  /* refined result rows */
  .srow{ padding:13px 16px; border-radius:16px; gap:18px; }
  .sthumb{ width:106px; height:76px; border-radius:12px; padding:4px; }
  .snames{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .sname{ font-size:15.5px; white-space:normal; } .sar{ color:var(--mut); font-size:13.5px; direction:rtl; }
  .pill.big{ min-width:76px; padding:9px 14px; border-radius:13px; font-size:15px; box-shadow:none; }
  .report-btn{ padding:11px 22px; border-radius:12px; font-size:13.5px; }
  @media(max-width:760px){ .rail{ top:auto; bottom:0; right:0; width:auto; height:58px; flex-direction:row; justify-content:center;
        border-right:0; border-top:1px solid var(--line); padding:0; gap:4px; } .view{ padding-left:0; padding-bottom:64px; } }
  /* unified 2D/3D/Mixed report additions */
  .tbadge{ font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:20px; letter-spacing:.03em; }
  .tbadge.t2d{ background:#e0f2fe; color:#0369a1; } .tbadge.t3d{ background:#dbeafe; color:#1d4ed8; }
  .tbadge.tmixed{ background:#ede9fe; color:#6d28d9; } .tbadge.tempty{ background:#f1f5f9; color:#64748b; }
  .pill.mixpill{ background:#ede9fe; color:#6d28d9; min-width:auto; }
  .mixscores{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .mixscores .pill.big{ min-width:96px; font-size:17px; font-weight:800; text-align:center; }
  .mixscores .pill.big small{ font-size:11px; font-weight:700; opacity:.75; display:block; line-height:1; margin-bottom:2px; }
  .tabbar{ display:flex; gap:6px; border-bottom:2px solid var(--line); margin-bottom:16px; }
  .tabb{ border:0; background:none; padding:10px 18px; font:inherit; font-weight:700; color:var(--mut); cursor:pointer;
         border-bottom:3px solid transparent; margin-bottom:-2px; border-radius:8px 8px 0 0; }
  .tabb:hover{ color:#0c7a3c; background:#f1f8f4; } .tabb.active{ color:#0c7a3c; border-bottom-color:#1eb85a; }

/* ===== merged from index.html <style> blocks ===== */

/* ================================================================
   v4 — "Blueprint Workspace" : dark engineering desk, glass chrome,
   emerald→cyan accents; content pages float as light sheets.
   ================================================================ */
:root{
  --dk:#070d0b; --dk2:#0a1210; --glass:rgba(255,255,255,.055); --glassbr:rgba(255,255,255,.12);
  --em:#34d399; --cy:#22d3ee; --emd:#10b981;
  --txt:#eef7f1; --txtm:#9db5a8; --txtd:#6d8579;
  --grad:linear-gradient(95deg,#34d399 10%,#22d3ee 90%);
  --r:18px;
  --shadow:0 1px 2px rgba(13,42,28,.05), 0 18px 44px -26px rgba(13,42,28,.28);
  --glow:0 14px 38px -10px rgba(16,185,129,.45);
}
html{ scroll-behavior:smooth; }
body{ font-family:"Inter",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif; letter-spacing:-.006em;
      background:var(--dk); color:var(--ink); position:relative; }
/* engineering blueprint grid over the whole workspace */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(52,211,153,.13), transparent 60%),
    radial-gradient(820px 520px at 95% 12%, rgba(34,211,238,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,190,160,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(120,190,160,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(120,190,160,.075) 0 1px, transparent 1px 170px),
    repeating-linear-gradient(90deg, rgba(120,190,160,.075) 0 1px, transparent 1px 170px); }
/* blueprint grid sits at z:-1, so nav/rail/views keep their original stacking */
::selection{ background:#134e3a; color:#eafff3; }
*{ scrollbar-width:thin; scrollbar-color:#2a4237 transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:#273d33; border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:#33584a; }
*::-webkit-scrollbar-track{ background:transparent; }

@keyframes v4fade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.view:not(.hidden){ animation:v4fade .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes orbf{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(26px,-18px) scale(1.06); } }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none!important; transition:none!important; } }

/* ---------- chrome: top bar + left rail (dark glass) ---------- */
nav{ padding:10px 28px; background:rgba(8,14,12,.72); border-bottom:1px solid rgba(255,255,255,.08);
     backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.brand img{ height:42px; background:#fff; border-radius:11px; padding:3px; }
.brand .bt{ color:#fff; } .brand .bt em{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand .bs{ color:var(--txtd); }
.navprog{ background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.35); color:#7df3b0; }
.rail{ width:72px; padding-top:18px; background:rgba(8,14,12,.72); border-right:1px solid rgba(255,255,255,.08);
       backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.ri{ width:48px; height:48px; border-radius:15px; color:var(--txtd); }
.ri:hover{ background:rgba(255,255,255,.08); color:#d9efe3; }
.ri.active{ background:rgba(52,211,153,.14); color:var(--em); box-shadow:inset 0 0 0 1.5px rgba(52,211,153,.4), 0 0 22px -6px rgba(52,211,153,.5); }
.view{ padding-left:72px; }

/* ---------- buttons ---------- */
.btn{ border-radius:13px; background:linear-gradient(135deg,#10b981,#0ea5b7); box-shadow:var(--glow);
      transition:transform .16s ease, box-shadow .2s ease, filter .16s ease; }
.btn:hover{ transform:translateY(-1.5px); box-shadow:0 20px 44px -12px rgba(16,185,129,.6); filter:brightness(1.07); }
.btn:active{ transform:translateY(0); }
.btn:disabled:hover{ transform:none; }
.btn:focus-visible{ outline:3px solid rgba(52,211,153,.5); outline-offset:2px; }
.btn.xl{ padding:18px 52px; font-size:17px; border-radius:999px; letter-spacing:.01em; }
.btn.xl svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn.sec,.btn.ghost{ background:#fff; }
.btn.sec:hover,.btn.ghost:hover{ box-shadow:var(--shadow); }

/* ---------- light "sheets" for the data pages ---------- */
.lightsec{ background:transparent; }
#view-results .wrap,#view-report .wrap,#view-stats .wrap,#view-how .wrap,#view-contact .wrap{
  background:#f3f7f4; border:1px solid rgba(255,255,255,.10); border-radius:28px;
  padding:30px 32px 42px; margin:24px auto 64px; max-width:1220px;
  box-shadow:0 40px 90px -36px rgba(0,0,0,.75); }
.card,.sc,.chartcard,.stepc,.ovbox,.elist,.panel,.avgcard,.contact-card,.ex{ border-radius:var(--r); }
.srow{ border-radius:18px; }
.srow:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(13,42,28,.4); }
.sthumb{ width:118px; height:84px; border-radius:14px; background:#fff; }
th{ letter-spacing:.05em; text-transform:uppercase; font-size:11.5px; }
input[type=number],textarea,select.sortsel{ transition:border-color .15s, box-shadow .15s; }
input[type=number]:focus,textarea:focus,select.sortsel:focus{ outline:none; border-color:var(--emd); box-shadow:0 0 0 3px rgba(16,185,129,.18); }

/* ---------- HERO — centred, typographic, glowing ---------- */
.hero{ background:transparent; min-height:auto; overflow:hidden; }
.hero .wrap{ max-width:1400px; padding-top:30px; padding-bottom:56px; }
.hero-inner{ text-align:center; max-width:880px; margin:0 auto; position:relative; }
.hero-inner::before{ content:""; position:absolute; top:-90px; left:50%; transform:translateX(-50%);
  width:680px; height:420px; border-radius:50%; pointer-events:none; filter:blur(70px); opacity:.5; z-index:-1;
  background:radial-gradient(closest-side, rgba(16,185,129,.4), rgba(34,211,238,.12), transparent); animation:orbf 9s ease-in-out infinite; }
.hbadge{ display:inline-flex; align-items:center; gap:9px; padding:8px 18px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glassbr); color:#a9e8c8; font-size:13px; font-weight:600; letter-spacing:.02em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hbadge i{ width:7px; height:7px; border-radius:50%; background:var(--em); box-shadow:0 0 12px 2px rgba(52,211,153,.8); }
h1.hero-h{ font-family:"Space Grotesk","Inter",sans-serif; font-size:40px; line-height:1.04; letter-spacing:-1.4px;
  margin:14px auto 4px; max-width:none; color:#fff; font-weight:700; }
h1.hero-h .b{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
h1.hero-h br{ display:none; } h1.hero-h .b::before{ content:" "; }
.sub{ font-size:17.5px; color:var(--txtm); max-width:600px; margin:0 auto; }
.feats{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:26px 0 8px; }
.feat{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glassbr); color:#cfe9da; font-size:13.5px; font-weight:600;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.feat svg{ width:17px; height:17px; fill:none; stroke:var(--em); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- key guide — dark glass, framed white plates ---------- */
.kguide{ margin:34px 0 0; background:var(--glass); border:1px solid var(--glassbr); border-radius:24px;
  padding:20px 22px 17px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-align:left; }
.kg-head{ display:flex; align-items:center; gap:13px; margin-bottom:15px; color:var(--txt); }
.kg-ic{ width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg,#10b981,#0ea5b7);
  display:grid; place-items:center; flex:none; box-shadow:var(--glow); }
.kg-ic svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kg-head b{ font-size:16px; letter-spacing:-.2px; color:#fff; }
.kg-ar{ display:block; color:var(--txtd); font-size:12.5px; direction:rtl; text-align:left; margin-top:1px; }
.kg-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kg-fig{ margin:0; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.04);
  border:1px solid var(--glassbr); }
.kg-fig.good{ box-shadow:inset 0 0 0 1.5px rgba(52,211,153,.45); }
.kg-fig.bad{ box-shadow:inset 0 0 0 1.5px rgba(244,98,98,.5); }
.kg-imgwrap{ position:relative; height:300px; display:grid; place-items:center; background:#fff; border-radius:14px; margin:12px 12px 0; }
.kg-imgwrap img{ max-height:276px; max-width:94%; object-fit:contain; }
.kg-badge{ position:absolute; top:10px; left:10px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:900; font-size:17px; border:2.5px solid rgba(255,255,255,.9); z-index:2; box-shadow:0 6px 18px rgba(0,0,0,.4); }
.kg-badge.ok{ background:#10b981; } .kg-badge.no{ background:#ef4444; }
.kg-fig figcaption{ padding:12px 16px 13px; font-size:13px; display:flex; justify-content:space-between; gap:12px;
  align-items:center; color:var(--txtm); flex-wrap:wrap; border-top:0; }
.kg-fig.good figcaption b{ color:#4ade80; } .kg-fig.bad figcaption b{ color:#f87171; }
.kg-fig figcaption .kg-ar{ margin:0; font-size:12.5px; }
.kg-note{ margin-top:13px; color:var(--txtd); font-size:12.5px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; line-height:1.55; }
.kg-note svg{ width:16px; height:16px; flex:none; fill:none; stroke:var(--em); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kg-note .kg-ar{ display:inline; margin:0; }

/* ---------- upload cards — dark glass drop zones ---------- */
.uploads{ grid-template-columns:1fr 1fr; gap:22px; margin-top:30px; }
.vs{ display:none; }
.ucard{ background:var(--glass); border:1px solid var(--glassbr); border-radius:22px; padding:26px 24px 20px;
  box-shadow:none; color:var(--txt); position:relative; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.step-tag{ position:absolute; top:-13px; left:20px; background:linear-gradient(135deg,#10b981,#0ea5b7); color:#fff;
  font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px;
  border-radius:999px; box-shadow:var(--glow); }
.ucard h3{ color:#fff; }
.ucard h3 .ic{ background:rgba(52,211,153,.14); }
.ucard h3 .ic svg{ width:22px; height:22px; fill:none; stroke:var(--em); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.drop{ background:rgba(255,255,255,.03); border:2px dashed rgba(160,200,180,.3); border-radius:16px; min-height:182px; transition:.2s ease; }
.drop .t{ color:var(--txtm); } .drop .t a,.fmt a{ color:var(--em); }
.drop:hover,.drop.over{ border-color:var(--em); background:rgba(52,211,153,.07); }
.drop.over{ box-shadow:0 0 0 5px rgba(52,211,153,.15), 0 0 30px -4px rgba(52,211,153,.35); }
.drop.has{ border-color:var(--em); border-style:solid; background:rgba(52,211,153,.09); }
.drop.has .t,.drop.has .t b{ color:#6ee7a8 !important; }
.drop .cl{ display:grid; place-items:center; }
.drop .cl svg{ width:46px; height:46px; fill:none; stroke:var(--em); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.drop:hover .cl svg,.drop.over .cl svg{ transform:translateY(-3px) scale(1.06); }
.fmt{ color:var(--txtd); }
.startbar{ margin-top:32px; }
.progbar{ background:rgba(255,255,255,.12); }
.progtxt,.status{ color:var(--txtm); }
.tips{ background:var(--glass); border:1px solid var(--glassbr); border-radius:14px; color:var(--txtm);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.tips b{ color:#d9efe3; }

/* ---------- report: final-mark row breathes ---------- */
.resultcard .row{ row-gap:10px; }
.resultcard .row .grow{ flex:1 1 240px; min-width:200px; }
.resultcard .row .grow .muted{ white-space:nowrap; }
#ovNote{ min-height:46px; }
#ovMark{ width:92px; padding:10px 11px; font-weight:700; }
.resultcard #ovState{ flex-basis:100%; }

/* ---------- responsive — keep LAST so it beats the base rules ---------- */
@media(max-width:980px){
  h1.hero-h{ font-size:30px; letter-spacing:-.8px; }
  .hero .wrap{ padding-top:38px; }
  .kg-row{ grid-template-columns:1fr; }
  .uploads{ grid-template-columns:1fr; gap:26px; }
  .kg-imgwrap{ height:236px; } .kg-imgwrap img{ max-height:212px; }
  #view-results .wrap,#view-report .wrap,#view-stats .wrap,#view-how .wrap,#view-contact .wrap{
    border-radius:20px; padding:20px 16px 30px; margin:14px 10px 50px; }
}
@media(max-width:760px){
  .rail{ top:auto; bottom:0; right:0; left:0; width:auto; height:60px; flex-direction:row;
         justify-content:center; border-right:0; border-top:1px solid rgba(255,255,255,.1); padding:0; gap:6px; }
  .ri{ width:46px; height:46px; }
  .view{ padding-left:0; padding-bottom:66px; }
}
/* report error-map + list: side panel stacks under the map on small screens */
.ovgrid{ display:grid; grid-template-columns:1fr 340px; }
@media(max-width:1100px){
  .resultcard{ grid-template-columns:1fr; }
  .resultcard>div:first-child{ grid-template-columns:150px minmax(0,1fr); }
  .ovgrid{ grid-template-columns:1fr; }
  .elist{ border-radius:0; border-left:0; border-right:0; border-bottom:0; }
  .escroll{ max-height:340px; }
  #view-report .report-previews .panels{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
  .resultcard>div:first-child{ grid-template-columns:1fr; justify-items:center; }
  .resultcard .crit{ width:100%; }
  .toolbar{ align-items:flex-start; }
  .toolbar .map-title{ width:100%; margin:0 0 2px; }
  .toolbar .toggles{ width:100%; margin-left:0; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap; }
  .secondary-strip{ flex-direction:column; }
  .secondary-strip details{ flex-basis:auto; width:100%; }
  #view-report .report-previews .panels{ grid-template-columns:1fr; }
  .panel img{ height:auto; max-height:420px; }
}
@media(max-width:640px){
  .srow{ flex-wrap:wrap; }
  .sthumb{ width:86px; height:64px; }
  .report-btn{ flex:1 1 100%; justify-content:center; text-align:center; }
  .svgwrap{ height:clamp(360px,52vh,560px); }
  .toolbar{ gap:6px; }
  .fseg{ width:100%; }
  .fseg button{ flex:1; }
  .statcards{ grid-template-columns:1fr 1fr; }
  .metricgrid,.crit{ grid-template-columns:1fr; }
  .crit .li{ min-height:54px; }
  .report-actions{ grid-template-columns:1fr; }
  .report-actions #ovState{ grid-column:auto; }
  .report-actions .btn{ width:100%; }
  .preview-heading{ align-items:flex-start; flex-direction:column; gap:4px; }
}

/* ===== merged from index.html <style> blocks ===== */

/* ================================================================
   v5 — DARK report workspace (الدكتور: "الأبيض مش حلو") + كل التصليح
   في مكان واحد: تبويبات 2D/3D كبيرة + لون بنفسجي لنوع-الخط الخاطئ.
   Scoped to #view-report so the rest of the site is untouched.
   ================================================================ */
#view-report .wrap{ background:#0e1714; border-color:rgba(255,255,255,.09); color:#e7f2ec; }
#view-report h2{ color:#fff; }
#view-report .muted{ color:#93aa9d; }
#view-report .card{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); box-shadow:none; color:#e7f2ec; }
#view-report .crit .li{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11); color:#dcebe3; }
#view-report .crit .li .muted{ color:#8da69a; }
#view-report .crit .li b{ color:#fff; }
#view-report .metric{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.10); }
#view-report .metric .mlabel{ color:#8aa294; }
#view-report .metric .mvalue{ color:#eafff3; }
#view-report .metric.ok .mvalue,#view-report .metric.hatch .mvalue{ color:#2dd482; }
#view-report .metric.warn .mvalue{ color:#ffd33d; }
#view-report .metric.bad .mvalue{ color:#ff5d5d; }
#view-report .metric.extra .mvalue{ color:#ff9b45; }
#view-report .feedback{ background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.25); color:#a7e8c6; }
#view-report .warnbanner{ background:rgba(244,150,98,.09); border-color:rgba(244,150,98,.3); color:#fbbf8f; }
#view-report .warnbanner b{ color:#fdd9a7; }
#view-report .calc>summary{ color:#6ee7a8; }
#view-report .calc td{ border-color:rgba(255,255,255,.08); }
#view-report .calc .formula{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); color:#cfe9da; }
#view-report .calc .brk{ border-color:rgba(255,255,255,.10); }
#view-report .calc .brow{ border-color:rgba(255,255,255,.07); }
#view-report .calc .brow.tot{ background:rgba(255,255,255,.06); }
#view-report .calc .cnote{ color:#8aa294; }
#view-report .ovbox{ background:#101b17; border-color:rgba(255,255,255,.10); box-shadow:none; }
#view-report .toolbar{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.08); color:#cfe9da; }
#view-report .map-title{ color:#eafff3; }
#view-report .stepper .cnt{ color:#9db5a8; }
#view-report .toggles{ color:#b9cdc1; }
#view-report .svgwrap{ background:#0a1411; }
#view-report .elist{ background:#101b17; border-color:rgba(255,255,255,.10); box-shadow:none; }
#view-report .elist h4{ color:#eafff3; border-color:rgba(255,255,255,.08); background:rgba(255,211,61,.055); }
#view-report .elist h4 .ecount{ background:rgba(255,211,61,.18); color:#ffd33d; }
#view-report .ehint{ color:#7d978a; border-color:rgba(255,255,255,.08); }
#view-report .erow{ border-color:rgba(255,255,255,.06); }
#view-report .erow:hover{ background:rgba(255,255,255,.05); }
#view-report .erow.active{ background:rgba(52,211,153,.13); }
#view-report .einfo b{ color:#fff; } #view-report .einfo .s{ color:#8aa294; }
#view-report .panel{ background:#101b17; border-color:rgba(255,255,255,.10); }
#view-report .panel .cap{ background:rgba(255,255,255,.05); color:#d9efe3; border-color:rgba(255,255,255,.08); }
#view-report .report-previews{ background:#101b17; border-color:rgba(255,255,255,.10); }
#view-report .preview-heading h3{ color:#eafff3; }
#view-report .preview-heading span{ color:#8da69a; }
/* the key/student PNGs are white-paper line drawings -> show them as dark plates */
#view-report .panel img{ filter:invert(.92) hue-rotate(180deg) saturate(.85); background:#f7faf8; }
#view-report .bbar{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.10); }
#view-report .bcap{ color:#9db5a8; }
#view-report input[type=number],#view-report textarea{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff; }
#view-report .btn.ghost{ background:rgba(255,255,255,.08); color:#d9efe3; border:1px solid rgba(255,255,255,.14); }
#view-report .btn.ghost:hover{ background:rgba(255,255,255,.15); }
#view-report .donut svg circle:first-of-type{ stroke:rgba(255,255,255,.13); }
#view-report .donut .lbl span{ color:#8aa294; }
#view-report .back{ color:#6ee7a8; }
/* brighter line colours on the dark map (AutoCAD-style dark model space) */
#view-report .it.matched{ stroke:#2dd482; }
#view-report .it.missing{ stroke:#ff5d5d; }
#view-report .it.extra{ stroke:#ff9b45; }
#view-report .it.shifted,#view-report .it.matched.partial{ stroke:#ffd33d; }
#view-report .it.sectionmarker.matched,#view-report .it.sectionhead{ stroke:#ff4eea; }
#view-report .it.hatch{ fill:rgba(45,212,130,.12); }
#view-report .it.hatch.missing{ fill:rgba(255,93,93,.10); }

/* WRONG LINE-TYPE: same GOLD as a shifted line (الدكتور: أخضر صح، أحمر غلط،
   ذهبي "صح بس فيه غلط" — مُزاح أو نوع خط). One gold family, one toggle. */
.it.wrongtype{ stroke:var(--partial); stroke-width:2.2; }
#view-report .it.wrongtype{ stroke:#ffd33d; }
.hide-shifted .wrongtype{ display:none; }
.it.ignored{ stroke:#82948b; stroke-width:1.1; opacity:.55; }
.hide-ignored .ignored{ display:none; }

.layer-audit{ margin:0 0 16px; border:1px solid rgba(255,255,255,.10); border-radius:14px;
  background:#101b17; overflow:hidden; direction:ltr; text-align:left; }
.layer-audit summary{ cursor:pointer; padding:13px 16px; font-weight:800; color:#d9efe3;
  display:flex; align-items:center; justify-content:flex-start; gap:10px; }
.layer-audit summary::-webkit-details-marker{ display:none; }
.layer-audit summary::after{ content:"Open"; margin-left:auto; color:#6ee7a8; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.layer-audit[open] summary::after{ content:"Close"; }
.layer-audit .lawarn{ margin:0 14px 12px; padding:10px 12px; border-radius:9px;
  background:rgba(245,158,11,.13); border:1px solid rgba(245,158,11,.28); color:#fde68a;
  font-size:12px; line-height:1.45; }
.layer-tools{ display:flex; justify-content:flex-start; gap:7px; flex-wrap:wrap; padding:0 14px 12px; }
.layer-chip{ border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05);
  color:#cfe9da; border-radius:999px; padding:5px 10px; cursor:pointer; font:inherit;
  font-size:11.5px; }
.layer-chip.on{ background:#0ea86f; color:white; border-color:transparent; }
.layer-table-wrap{ overflow:auto; border-top:1px solid rgba(255,255,255,.08); }
.layer-table{ width:100%; border-collapse:collapse; font-size:12px; min-width:720px; direction:ltr; }
.layer-table th,.layer-table td{ padding:9px 11px; text-align:left;
  border-bottom:1px solid rgba(255,255,255,.06); white-space:nowrap; }
.layer-table th{ color:#8fa99b; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; }
.layer-table td{ color:#d5e7dd; }
.layer-table tr[data-layer]{ cursor:pointer; }
.layer-table tr[data-layer]:hover{ background:rgba(255,255,255,.05); }
.layer-table .bad{ color:#ffd33d; font-weight:800; }
.layer-table .mut{ color:#789184; }
.la-ok{ color:#6fcf97; } .la-warn{ color:#ffd33d; font-weight:700; } .la-bad{ color:#ff9b6b; font-weight:700; }
.la-unused{ padding:9px 14px 13px; color:#789184; font-size:11.5px; }
.la-swatch{ vertical-align:middle; margin-right:6px; }

/* 3D compare — proportion bar + toggle chips (replaces cramped checkboxes) */
.v3dbar{ height:12px; border-radius:7px; overflow:hidden; display:flex; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10); margin:0 auto 9px; max-width:560px; }
.v3dbar>span{ display:block; height:100%; transition:width .3s; }
.v3dhead{ text-align:center; font-size:12px; color:#9db5a8; margin-bottom:8px; }
.v3dhead b{ color:#eafff3; }
.v3dchips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.v3dchip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#cfe9da;
  font:inherit; font-size:12.5px; cursor:pointer; transition:.13s; }
.v3dchip i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.v3dchip b{ color:#fff; font-variant-numeric:tabular-nums; }
.v3dchip.off{ opacity:.4; text-decoration:line-through; }
.v3dchip:hover{ background:rgba(255,255,255,.1); }

/* legend swatches in the toolbar toggles */
.toggles label i.sw{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }

/* frame selector: two explicit buttons instead of the confusing "Frame ⇄" */
.fseg{ display:inline-flex; border:1px solid rgba(255,255,255,.18); border-radius:10px; overflow:hidden; }
.fseg button{ border:0; background:transparent; color:inherit; padding:6px 13px; font:inherit; font-size:12.5px; cursor:pointer; }
.fseg button.on{ background:linear-gradient(135deg,#10b981,#0ea5b7); color:#fff; font-weight:700; }

/* mixed exam: BIG obvious 2D / 3D tabs (the doctor must not hunt for the 3D) */
.mixtabs{ display:flex; gap:14px; margin:6px 0 18px; }
.mixtab{ flex:1; display:flex; align-items:center; justify-content:center; gap:14px; padding:16px 18px;
  border-radius:18px; border:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05);
  color:#cfe9da; font-weight:800; font-size:17px; cursor:pointer; transition:.15s; user-select:none; }
.mixtab .em{ font-size:26px; }
.mixtab small{ display:block; font-size:11.5px; font-weight:600; opacity:.7; letter-spacing:.02em; }
.mixtab .pct{ font-size:24px; font-variant-numeric:tabular-nums; }
.mixtab:hover{ background:rgba(255,255,255,.10); transform:translateY(-1px); }
.mixtab.on{ background:linear-gradient(135deg,#10b981,#0ea5b7); border-color:transparent; color:#fff;
  box-shadow:0 16px 40px -12px rgba(16,185,129,.55); }
@media(max-width:640px){ .mixtabs{ flex-direction:column; } }

/* ---------- student upload: ONE rectangle split 50/50 by a center line ---------- */
.drop.split{ padding:0; overflow:hidden; }                 /* let the two halves reach the border */
.splitdrop{ display:flex; align-items:stretch; flex:1; width:100%; }
.half{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px; padding:34px 14px; cursor:pointer; text-align:center; font:inherit; border:0;
  background:rgba(16,180,110,.10); color:#0d7a50; transition:.15s; }
.half + .half{ border-left:1.6px solid rgba(0,0,0,.10); }   /* the center divider line */
.half:hover{ background:rgba(16,180,110,.20); color:#065e3a; }
.half svg{ width:36px; height:36px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.half b{ font-size:16px; font-weight:800; }
.half small{ font-size:12px; font-weight:500; opacity:.82; white-space:normal; line-height:1.35; }
.half.alt{ background:rgba(6,155,195,.10); color:#0a6d8a; }
.half.alt:hover{ background:rgba(6,155,195,.20); color:#064f64; }
.subnote{ padding:9px 12px; border-top:1.6px dashed rgba(0,0,0,.12); font-size:12.5px; text-align:center; color:#555; }
.uppreview{ margin-top:13px; }
.student-preview{ border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; background:rgba(5,18,14,.42); }
.student-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 13px;
  border-bottom:1px solid rgba(255,255,255,.09); }
.student-preview-head b{ color:#eafff3; font-size:14px; }
.student-preview-head small{ display:block; margin-top:2px; color:var(--txtd); font-size:11.5px; }
.student-ready-count{ flex:none; color:#6ee7a8; font-size:12px; font-weight:800; }
.student-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:10px; }
.student-row{ min-width:0; display:flex; align-items:center; gap:9px; padding:8px 9px; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; background:rgba(255,255,255,.035); }
.student-avatar{ width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:8px;
  background:rgba(52,211,153,.13); color:#86efac; font-size:10px; font-weight:900; }
.student-info{ min-width:0; flex:1; }
.student-info b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dff7ea; font-size:11.5px; }
.student-info small{ color:var(--txtd); font-size:10.5px; }
.student-roster{ border-top:1px solid rgba(255,255,255,.08); }
.student-roster summary{ padding:10px 13px; color:#a9e8c8; cursor:pointer; font-size:12px; font-weight:800; }
.student-roster[open] summary{ border-bottom:1px solid rgba(255,255,255,.08); }
.student-roster .student-grid{ max-height:260px; overflow:auto; }
@media(max-width:600px){ .student-grid{ grid-template-columns:1fr; } .student-preview-head{ align-items:flex-start; } }

/* ===== merged from index.html <style> blocks ===== */

/* Simple report layout: score, layers, error map, and drawing comparison. */
#view-report .wrap{
  max-width:1500px;
  padding:24px;
  border-radius:24px;
}
#view-report .report-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:2px 2px 16px;
}
#view-report .report-header h2{
  margin:2px 0 0;
  font-size:clamp(20px,2vw,28px);
  line-height:1.2;
  letter-spacing:-.025em;
}
#view-report .report-eyebrow{
  color:#6ee7a8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
#view-report .report-summary{
  display:grid;
  grid-template-columns:156px minmax(0,1fr);
  align-items:stretch;
  gap:0;
  margin-bottom:14px;
  padding:16px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  background:#101b17;
}
#view-report .score-block{
  display:grid;
  place-items:center;
  padding-right:16px;
  border-right:1px solid rgba(255,255,255,.09);
}
#view-report .summary-metrics{
  display:grid;
  grid-template-columns:repeat(5,minmax(130px,1fr));
  gap:10px;
  align-content:center;
  padding-left:16px;
}
#view-report .summary-metric{
  min-width:0;
  min-height:78px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.045);
}
#view-report .summary-metric .metric-icon{
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.08);
}
#view-report .summary-metric span:last-child{ min-width:0; }
#view-report .summary-metric small{
  display:block;
  overflow:hidden;
  color:#a9bbb1;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
}
#view-report .summary-metric b{
  display:block;
  margin-top:3px;
  color:#f3faf6;
  font-size:24px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
#view-report .summary-metric.ok .metric-icon{ color:#42e283; background:rgba(45,212,130,.13); }
#view-report .summary-metric.ok b{ color:#42e283; }
#view-report .summary-metric.wrong .metric-icon,
#view-report .summary-metric.partial .metric-icon{ color:#ffd33d; background:rgba(255,211,61,.12); }
#view-report .summary-metric.wrong b,
#view-report .summary-metric.partial b{ color:#ffd33d; }
#view-report .summary-metric.missing .metric-icon{ color:#ff6b6b; background:rgba(255,93,93,.13); }
#view-report .summary-metric.missing b{ color:#ff6b6b; }
#view-report .summary-metric.extra .metric-icon{ color:#ff9b45; background:rgba(255,155,69,.13); }
#view-report .summary-metric.extra b{ color:#ff9b45; }
#view-report .layers-full{ width:100%; margin-bottom:14px; }
#view-report .layers-full .layer-audit{ width:100%; margin:0; border-radius:16px; }
#view-report .layer-audit summary{
  min-height:58px;
  padding:15px 18px;
  gap:12px;
  background:rgba(255,255,255,.025);
}
#view-report .layer-title{ color:#f0faf4; font-size:16px; }
#view-report .layer-summary-text{ color:#91a89b; font-size:12px; font-weight:600; }
#view-report .layer-audit summary::after{ margin-left:auto; }
#view-report .layer-tools{ padding:2px 18px 14px; }
#view-report .layer-chip{ min-height:32px; padding:6px 13px; font-weight:700; }
#view-report .layer-table{ min-width:680px; font-size:13px; }
#view-report .layer-table th{ padding:10px 16px; font-size:10px; }
#view-report .layer-table td{ height:48px; padding:10px 16px; }
#view-report .la-unused{ padding:11px 18px 14px; }
#view-report .ovbox{ border-radius:16px; }
#view-report .toolbar{
  display:block;
  padding:0;
  background:#101b17;
}
#view-report .toolbar-main{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
}
#view-report .map-heading{
  min-width:150px;
  display:flex;
  flex-direction:column;
  margin-right:auto;
}
#view-report .map-heading .map-title{ width:auto; font-size:16px; font-weight:850; }
#view-report .map-heading small{ margin-top:1px; color:#789184; font-size:10.5px; }
#view-report .stepper,
#view-report .zoom-controls{ display:flex; align-items:center; gap:5px; }
#view-report .stepper{
  min-height:36px;
  padding:3px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
#view-report .stepper .cnt{
  min-width:92px;
  padding:0 5px;
  text-align:center;
  font-size:11.5px;
  font-weight:700;
}
#view-report .toolbar .btn.mini{ min-height:34px; padding:6px 11px; }
#view-report .toolbar .zoom-btn{ width:36px; justify-content:center; padding:6px; font-size:17px; }
#view-report .fseg{ min-height:36px; border-radius:10px; }
#view-report .fseg button{ min-width:88px; padding:7px 12px; }
#view-report .map-legend{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#c7d8cf;
}
#view-report .legend-title{
  margin-right:2px;
  color:#789184;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#view-report .map-legend label{
  min-height:32px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  font-size:11.5px;
  font-weight:700;
}
#view-report .map-legend label:hover{ background:rgba(255,255,255,.07); }
#view-report .map-legend label:has(input:not(:checked)){ opacity:.45; }
#view-report .map-legend input{ width:14px; height:14px; margin:0; accent-color:#19bf78; }
#view-report .map-legend label i.sw{ width:12px; height:12px; }
#view-report .ovgrid{ grid-template-columns:minmax(0,1fr) 360px; }
#view-report .svgwrap{ height:clamp(520px,68vh,820px); }
#view-report .elist h4{
  min-height:58px;
  padding:15px 16px;
  color:#f0faf4;
  font-size:14px;
  text-transform:none;
  letter-spacing:0;
}
#view-report .ehint{ padding:11px 16px; font-size:11px; line-height:1.45; }
#view-report .erow{ min-height:70px; padding:13px 15px; }
#view-report .report-previews{ margin-top:14px; padding:14px; border-radius:16px; }
#view-report .preview-heading{ margin-bottom:10px; padding:0 2px; }
#view-report .preview-heading h3{ font-size:15px; }
#view-report .panel{ border-radius:12px; }
#view-report .panel .cap{ padding:10px 13px; font-size:12px; }
#view-report .panel img{ height:clamp(240px,29vw,420px); }
@media(max-width:1250px){
  #view-report .summary-metrics{ grid-template-columns:repeat(3,minmax(140px,1fr)); }
}
@media(max-width:1100px){
  #view-report .ovgrid{ grid-template-columns:1fr; }
  #view-report .svgwrap{ height:clamp(480px,62vh,720px); }
  #view-report .elist{ border-top:1px solid rgba(255,255,255,.10); }
  #view-report .escroll{ max-height:320px; }
}
@media(max-width:820px){
  #view-report .wrap{ padding:16px; }
  #view-report .report-summary{ grid-template-columns:1fr; }
  #view-report .score-block{ padding:0 0 14px; border-right:0; border-bottom:1px solid rgba(255,255,255,.09); }
  #view-report .summary-metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px 0 0; }
  #view-report .toolbar-main{ flex-wrap:wrap; }
  #view-report .map-heading{ width:100%; min-width:0; margin:0 0 2px; }
  #view-report .map-heading .map-title{ width:auto; }
  #view-report .fseg{ flex:1; }
  #view-report .map-legend{ flex-wrap:wrap; }
  #view-report .legend-title{ width:100%; }
}
@media(max-width:520px){
  #view-report .wrap{ margin-left:6px; margin-right:6px; padding:12px; border-radius:18px; }
  #view-report .report-summary{ padding:12px; }
  #view-report .summary-metrics{ grid-template-columns:1fr; }
  #view-report .summary-metric{ min-height:66px; }
  #view-report .stepper{ flex:1; justify-content:space-between; }
  #view-report .zoom-controls{ width:100%; }
  #view-report .zoom-controls .btn:first-child{ flex:1; justify-content:center; }
  #view-report .fseg{ width:100%; }
  #view-report .map-legend label{ flex:1 1 calc(50% - 8px); }
  #view-report .svgwrap{ height:430px; }
}

/* ===== merged from index.html <style> blocks ===== */

:root{--lm-green:#079669;--lm-green-dark:#087452;--lm-cyan:#0ea5b7;--lm-bg:#f4f7f5;--lm-paper:#fff;--lm-ink:#17231e;--lm-muted:#66756e;--lm-line:#dce5e0;--lm-soft:#edf7f2;--lm-shadow:0 12px 34px rgba(18,55,40,.08)}
html,body{background:var(--lm-bg);color:var(--lm-ink)}
body::before{background:linear-gradient(rgba(9,150,105,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(9,150,105,.035) 1px,transparent 1px);background-size:42px 42px}
nav{height:70px;padding:10px 24px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--lm-line);box-shadow:0 4px 18px rgba(21,54,42,.05);backdrop-filter:blur(14px)}
nav .brand .bt{color:var(--lm-ink)} nav .brand .bs{color:var(--lm-muted)} nav .navlinks{display:none}
.rail{top:70px;bottom:0;left:0;width:68px;height:auto;padding:18px 10px;gap:8px;align-items:stretch;background:#fff;border-right:1px solid var(--lm-line);box-shadow:5px 0 24px rgba(20,52,40,.04);overflow:hidden;transition:width .2s ease,box-shadow .2s ease;z-index:59}
.rail:hover,.rail:focus-within{width:220px;box-shadow:12px 0 34px rgba(20,52,40,.12)}
.ri{width:100%;height:46px;min-height:46px;display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:0 13px;border-radius:10px;color:#65756d;white-space:nowrap}
.ri:hover{background:#f0f6f3;color:var(--lm-green-dark)} .ri.active{background:#e9f6f0;color:var(--lm-green-dark);box-shadow:inset 3px 0 0 var(--lm-green)}
.ri svg{width:20px;height:20px;flex:0 0 20px}.ri-label{font-weight:750;opacity:0;transform:translateX(-5px);transition:.16s}
.rail:hover .ri-label,.rail:focus-within .ri-label{opacity:1;transform:none}.view{padding-left:68px}
.hero{background:transparent;color:var(--lm-ink);padding:42px 0 70px}.hero::before,.herobg{display:none}.hero .wrap{max-width:1400px}
.hero-inner{text-align:left}.hbadge{display:none}.hero-h{color:var(--lm-ink);font-size:44px;line-height:1.12}.hero-h .b{background:linear-gradient(90deg,var(--lm-green),var(--lm-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.uploads{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start}.uploads .vs{display:none}
.ucard{background:#fff;border:1px solid var(--lm-line);border-radius:18px;padding:22px;box-shadow:var(--lm-shadow);color:var(--lm-ink)}.ucard h3{color:var(--lm-ink)}
.drop{background:#fbfdfc;border-color:#c9d8d1}.drop .t{color:var(--lm-muted)}.drop:hover,.drop.over{background:#eff9f4;border-color:var(--lm-green)}
.fmt{color:var(--lm-muted)}.student-preview{background:#fff;border-color:var(--lm-line)}
.key-card-head{display:flex;align-items:center;gap:12px}.key-card-head h3{margin:0}.key-config{margin-left:auto;padding:5px 10px;border-radius:999px;background:#eef3f0;color:var(--lm-muted);font-size:11px;font-weight:800}.key-config.ready{background:#def6e9;color:#06734e}
.key-help{margin:10px 0 14px;color:var(--lm-muted);font-size:12.5px}.key-summary{display:grid;gap:10px}
.key-slot{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:84px;padding:13px;border:1px solid var(--lm-line);border-radius:12px;background:#fff;cursor:pointer;transition:.15s}.key-slot:hover,.key-slot:focus{border-color:#86c9ad;box-shadow:0 0 0 3px rgba(9,150,105,.09);outline:0}.key-slot.uploaded{background:#f6fcf9;border-color:#a8ddc6}
.key-thumb{width:44px;height:44px;border-radius:9px;display:grid;place-items:center;font-weight:900}.key-thumb-2d{background:#edf5ff;color:#2674bf}.key-thumb-3d{background:#eeeafe;color:#6c4ad0}
.key-slot-copy{min-width:0}.key-slot-copy b,.key-slot-copy small{display:block}.key-slot-copy small{margin-top:3px;color:var(--lm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.key-state{color:var(--lm-green-dark);font-size:12px;font-weight:800}.key-remove{border:1px solid var(--lm-line);background:#fff;color:#5e6b65;padding:7px 9px;border-radius:8px;cursor:pointer}.key-rule{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--lm-muted);font-size:11.5px}.key-rule button{border:0;background:none;color:var(--lm-green-dark);font-weight:750;cursor:pointer}
.startbar{margin-top:22px}.startbar .btn.xl{min-width:220px}.progwrap{max-width:760px;padding:30px 42px;background:#fff;border:1px solid var(--lm-line);border-radius:18px;box-shadow:var(--lm-shadow);color:var(--lm-ink)}
.proghead,.proghead.q{color:var(--lm-ink);font-size:18px}.proghead.q .pdot{background:#f5a800}.progbar{height:16px;background:#e7eee9;box-shadow:none}.progbar.queued .progfill{background:repeating-linear-gradient(120deg,#ffd868 0 14px,#fff1bb 14px 28px);background-size:44px 100%;animation:queueMove 1.1s linear infinite}.progtxt{color:var(--lm-muted)}.progtxt b{color:var(--lm-ink)}
@keyframes queueMove{to{background-position:44px 0}}body.job-active .uploads,body.job-active .kguide,body.job-active .tips,body.job-active .hero-inner{display:none}body.job-active .hero{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:34px}body.job-active .startbar{margin:0;width:min(760px,100%)}
.queue-hero{display:flex;flex-direction:column;align-items:center;text-align:center}.queue-kicker{color:#c77d00;font-weight:800}.queue-pos-label{margin-top:14px;color:var(--lm-muted);font-size:13px}.queue-number{font-size:70px;line-height:1;font-weight:900;color:var(--lm-ink)}.queue-next{font-weight:800}.queue-live{margin:13px 0;color:var(--lm-muted);font-size:12px}.queue-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#20c77a;margin-right:7px;animation:ppulse 1.4s infinite}.queue-moved{display:block;width:max-content;margin:18px auto 0;color:#07845c;background:#edfaf4;border:1px solid #99ddc0}
.queue-steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--lm-line);font-size:11px;color:var(--lm-muted)}.queue-steps b{color:#c78200}.queue-steps span:nth-child(2){color:var(--lm-ink)}
.lightsec,#view-results,#view-stats,#view-contact{background:transparent}.results-shell{max-width:1080px;margin:auto}.results-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.results-head h2{margin:0;font-size:25px}.results-head .results-count{color:var(--lm-muted)}.results-actions{margin-left:auto;display:flex;gap:8px}.results-search{width:100%;max-width:360px;margin-bottom:12px;padding:11px 13px;border:1px solid var(--lm-line);border-radius:10px;background:#fff;color:var(--lm-ink)}
.results-table-wrap{overflow:auto;background:#fff;border:1px solid var(--lm-line);border-radius:16px;box-shadow:var(--lm-shadow)}.results-table{width:100%;border-collapse:collapse}.results-table th{padding:13px 16px;color:var(--lm-muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:left;border-bottom:1px solid var(--lm-line)}.results-table td{padding:12px 16px;border-bottom:1px solid #edf1ef;vertical-align:middle}.results-table tbody tr:hover{background:#f8fbf9}.results-table .student-cell{display:flex;align-items:center;gap:12px;font-weight:750}.results-table .sthumb{width:62px;height:46px;border-radius:7px}.mark-cell{min-width:180px}.mark-line{display:flex;align-items:center;gap:10px}.mark-bar{width:82px;height:6px;background:#e7eee9;border-radius:8px;overflow:hidden}.mark-bar i{display:block;height:100%;border-radius:8px}.open-report{padding:8px 12px;border-radius:8px;background:#fff;color:var(--lm-green-dark);border:1px solid #69c7a0;font-weight:750;cursor:pointer}.mixed-mark{font-size:12px;line-height:1.45}
#view-stats .wrap{max-width:1040px}.statcards{gap:12px}.statcards .sc,.chartcard{background:#fff;border:1px solid var(--lm-line);box-shadow:var(--lm-shadow);border-radius:14px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stats-grid .chartcard{margin:0}.stats-list{display:grid;gap:9px}.stats-list-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:9px;align-items:center}.stats-list-row b{white-space:nowrap}.weak-bar{height:7px;border-radius:8px;background:#e9efec;overflow:hidden}.weak-bar i{display:block;height:100%;background:#ef4444}
.support-shell{max-width:720px;margin:20px auto 60px;background:#fff;border:1px solid var(--lm-line);border-radius:18px;box-shadow:var(--lm-shadow);padding:26px}.support-brand{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;margin-bottom:24px}.support-brand img{width:42px;height:42px}.support-brand b,.support-brand span{display:block}.support-brand b{font-size:18px}.support-brand span{color:var(--lm-green-dark);font-size:12px}.support-contacts{display:grid;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--lm-line)}.support-contacts>div{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:12px}.support-contacts span{color:var(--lm-muted);font-size:10px}.support-contacts a{color:var(--lm-green-dark);text-decoration:none}.support-contacts button{border:1px solid var(--lm-line);background:#fff;padding:6px 10px;border-radius:7px;cursor:pointer}.support-form{padding-top:20px}.support-form h3{margin:0}.support-form p{margin:4px 0 16px;color:var(--lm-muted)}.support-form label{display:block;margin:11px 0;font-size:12px;font-weight:750}.support-form input,.support-form textarea{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--lm-line);border-radius:8px;background:#fff;color:var(--lm-ink);font:inherit}.support-file{padding:12px;border:1px dashed #b9cbc2;border-radius:9px}.support-context{display:flex;gap:14px;justify-content:space-between;padding:9px 11px;background:#f4f7f5;border-radius:8px;color:var(--lm-muted);font-size:11px}.support-submit{width:100%;justify-content:center;margin-top:13px}.support-state{min-height:20px;margin-top:8px;color:var(--lm-green-dark);font-size:12px}
@media(max-width:760px){nav{height:60px}.rail{top:auto;bottom:0;right:0;width:auto!important;height:62px;flex-direction:row;padding:7px 10px;justify-content:space-around;overflow:visible}.ri{width:48px;padding:0;justify-content:center}.ri-label{display:none}.view{padding-left:0;padding-bottom:68px}.hero{padding:26px 0}.hero-h{font-size:34px}.uploads{grid-template-columns:1fr}.key-slot{grid-template-columns:44px minmax(0,1fr) auto}.key-remove{grid-column:2/4;width:max-content}.results-head{align-items:flex-start;flex-wrap:wrap}.results-actions{margin-left:0;width:100%}.results-actions .btn{flex:1}.stats-grid{grid-template-columns:1fr}.support-shell{padding:18px}.support-contacts>div{grid-template-columns:58px minmax(0,1fr) auto}}
html.admin-embed nav,html.admin-embed .rail{display:none}html.admin-embed .view{padding-left:0}html.admin-embed #view-report .back{display:none}html.admin-embed #view-report .wrap{margin:0 auto;border-radius:0;max-width:none;min-height:100vh}
/* === answer-key auto-detect + EQUAL-SIZE cards + readable headings === */
.uploads{grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.ucard.key-card{display:flex;flex-direction:column}
.keydrop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;min-height:196px;padding:26px 18px;border:1.6px dashed #b9cbc2;border-radius:14px;background:#f7fcfa;cursor:pointer;transition:.15s}
.keydrop:hover,.keydrop:focus,.keydrop.over{border-color:#5fc49b;background:#eefaf4;outline:0;box-shadow:0 0 0 3px rgba(9,150,105,.10)}
.keydrop.has{border-style:solid;border-color:#a8ddc6;background:#f3fcf8}
.keydrop .cl svg{width:44px;height:44px;fill:none;stroke:var(--lm-green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.keydrop:hover .cl svg{transform:translateY(-3px)}
.keydrop .t{color:var(--lm-muted);font-size:13px;line-height:1.55}.keydrop .t a{color:var(--lm-green-dark);font-weight:750}.keydrop.has .t{color:var(--lm-ink);font-weight:650;word-break:break-word}
.key-detected{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:2px}
.ktag{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 11px;border-radius:999px;font-size:11.5px;background:#eef3f0;color:var(--lm-ink);border:1px solid var(--lm-line)}
.ktag>:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.ktag b{font-size:9.5px;font-weight:900;letter-spacing:.3px;padding:2px 6px;border-radius:6px}
.ktag.k-2d b{background:#edf5ff;color:#2674bf}.ktag.k-3d b{background:#eeeafe;color:#6c4ad0}.ktag.k-mixed b{background:#e7f7ef;color:#06734e}
.key-config.ready{background:#def6e9;color:#06734e}
/* the light theme used low-specificity selectors -> old dark-theme #fff headings
   were winning and rendered invisible on white. Force them to the ink colour. */
h1.hero-h{color:var(--lm-ink)!important}h1.hero-h .b{color:transparent!important}
.kguide{background:#fff;border:1px solid var(--lm-line);box-shadow:var(--lm-shadow)}
.kg-head{color:var(--lm-muted)}.kg-head b{color:var(--lm-ink)}
.kg-fig{background:#f7faf8}.kg-fig figcaption{color:var(--lm-muted)}
.secttitle{color:var(--lm-ink)}
/* student-preview list — dark-theme greens were invisible on the light card. Force readable ink/green. */
.student-preview{background:#fff;border:1px solid var(--lm-line);box-shadow:var(--lm-shadow)}
.student-preview-head{border-bottom:1px solid var(--lm-line)}
.student-preview-head b{color:var(--lm-ink)}
.student-preview-head small{color:var(--lm-muted)}
.student-ready-count{color:var(--lm-green-dark)}
.student-row{border:1px solid var(--lm-line);background:#f9fcfb}
.student-avatar{background:#def6e9;color:var(--lm-green-dark)}
.student-info b{color:var(--lm-ink)}
.student-info small{color:var(--lm-muted)}
.student-roster{border-top:1px solid var(--lm-line)}
.student-roster summary{color:var(--lm-green-dark)}
.student-roster[open] summary{border-bottom:1px solid var(--lm-line)}
/* key processing spinner + remove button */
.key-spin{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 10px;color:var(--lm-green-dark);font-size:13px;font-weight:700}
.key-spin .ring{width:40px;height:40px;border:4px solid #d8ece3;border-top-color:var(--lm-green);border-radius:50%;animation:keyspin .8s linear infinite}
@keyframes keyspin{to{transform:rotate(360deg)}}
.key-remove{margin-top:12px;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid #e6b8b8;border-radius:10px;background:#fdf2f2;color:#c0392b;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.key-remove:hover{background:#fbe3e3;border-color:#d99}
.key-remove svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* per-file ✕ remove button on each key preview card */
.key-x{position:absolute;top:7px;right:7px;z-index:2;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(192,57,43,.92);color:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:.13s}
.key-x:hover{background:#a93226;transform:scale(1.08)}
.key-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}