:root{
    --paper:#F7F2E9; --cream:#FBF8F1;
    --ink:#11211B; --ink-soft:#3A4A42;
    --pine:#0E4736; --pine-2:#13694F; --pine-3:#1C8C68;
    --sage:#DDE8E0; --sage-2:#CBDDD0;
    --saffron:#E8A038; --saffron-deep:#C9802A; --coral:#E0573B;
    --line:rgba(17,33,27,.14); --shadow:0 1px 2px rgba(17,33,27,.05),0 12px 40px -12px rgba(14,71,54,.22);
    --ff-display:"Fraunces",Georgia,serif; --ff-body:"Hanken Grotesk",system-ui,sans-serif; --ff-urdu:"Noto Nastaliq Urdu",serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--ff-body);color:var(--ink);background:#F7F2E9;line-height:1.55;-webkit-font-smoothing:antialiased;
    background-image:radial-gradient(900px 500px at 12% -5%,rgba(28,140,104,.10),transparent 60%),radial-gradient(700px 460px at 100% 0%,rgba(232,160,56,.12),transparent 55%);min-height:100vh}
  h1,h2,h3{font-family:var(--ff-display);font-weight:600;letter-spacing:-.01em;line-height:1.05}
  .urdu{font-family:var(--ff-urdu);direction:rtl}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}

  nav{position:sticky;top:0;z-index:50;background:rgba(247,242,233,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:600;font-size:1.25rem}
  .brand b{color:var(--pine-2)} .brand .mark{width:32px;height:32px}
  .status-pill{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--ink-soft);
    background:var(--cream);border:1px solid var(--line);padding:7px 14px;border-radius:100px}
  .status-pill .d{width:8px;height:8px;border-radius:50%;background:#c0c9c4}
  .status-pill.ok .d{background:var(--pine-3)} .status-pill.warn .d{background:var(--saffron)}

  header{padding:34px 0 12px}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--saffron-deep);background:rgba(232,160,56,.14);padding:6px 13px;border-radius:100px;margin-bottom:14px}
  header h1{font-size:clamp(2rem,4.4vw,3.1rem)} header h1 em{font-style:italic;color:var(--pine-2);font-weight:500}
  header p{color:var(--ink-soft);max-width:62ch;margin-top:12px;font-size:1.06rem}

  /* stepper / mode tabs */
  .tabs{display:flex;gap:10px;margin:26px 0 22px;flex-wrap:wrap}
  .tab{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px;border:1px solid var(--line);
    background:var(--cream);cursor:pointer;font-weight:600;font-size:.98rem;transition:all .2s;color:var(--ink-soft)}
  .tab .step-n{width:24px;height:24px;border-radius:50%;background:var(--sage);color:var(--pine);display:grid;place-items:center;font-size:.82rem;font-family:var(--ff-display)}
  .tab.active{background:var(--pine);color:#EAF3ED;border-color:var(--pine)}
  .tab.active .step-n{background:var(--saffron);color:#1a1a1a}
  .tab:not(.active):hover{border-color:var(--pine-3);color:var(--pine-2)}

  .layout{display:grid;grid-template-columns:1.25fr .9fr;gap:24px;padding-bottom:60px;align-items:start}
  @media(max-width:900px){.layout{grid-template-columns:1fr}}

  /* camera panel */
  .stage{background:linear-gradient(155deg,#0E4736,#0a2f24);border-radius:24px;padding:16px;position:relative;
    box-shadow:0 30px 60px -24px rgba(10,47,36,.55);border:1px solid rgba(255,255,255,.08)}
  .videobox{position:relative;border-radius:16px;overflow:hidden;background:#06231b;aspect-ratio:4/3}
  video,canvas.overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
  .videobox .placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#9fd9c4;gap:14px;padding:30px}
  .videobox .placeholder svg{margin:0 auto;opacity:.8}
  .stage .toptag{position:absolute;top:26px;left:28px;z-index:5;font-size:.72rem;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:#9fd9c4;display:flex;align-items:center;gap:8px}
  .rec{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(224,87,59,.6)}
  .rec.live{animation:pulse2 1.3s infinite}
  @keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(224,87,59,.6)}70%{box-shadow:0 0 0 9px rgba(224,87,59,0)}100%{box-shadow:0 0 0 0 rgba(224,87,59,0)}}
  .readout{margin-top:14px;background:rgba(247,242,233,.97);border-radius:14px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;min-height:74px}
  .readout .lab{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron-deep)}
  .readout .en{font-family:var(--ff-display);font-size:1.5rem;font-weight:600;line-height:1.1}
  .readout .ur{font-family:var(--ff-urdu);font-size:1.7rem;color:var(--pine-2);direction:rtl}
  .meter{height:6px;background:var(--sage);border-radius:6px;margin-top:8px;overflow:hidden;width:130px}
  .meter i{display:block;height:100%;width:0;background:var(--saffron);transition:width .2s}
  .countdown{position:absolute;inset:0;display:none;place-content:center;z-index:8;background:rgba(6,35,27,.55)}
  .countdown b{font-family:var(--ff-display);font-size:6rem;color:#fff}

  /* control panel */
  .panel{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:24px}
  .panel h3{font-size:1.3rem;margin-bottom:6px}
  .panel .sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:18px}
  .mode-pane{display:none} .mode-pane.active{display:block}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ff-body);font-weight:600;
    font-size:.98rem;padding:13px 20px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:all .18s;width:100%}
  .btn+.btn{margin-top:10px}
  .btn-primary{background:var(--pine);color:#F7F2E9} .btn-primary:hover{background:var(--pine-2);transform:translateY(-1px)}
  .btn-primary:disabled{background:#9bb3a9;cursor:not-allowed;transform:none}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--pine-2);color:var(--pine-2)}
  .btn-amber{background:var(--saffron);color:#241a05} .btn-amber:hover{background:var(--saffron-deep);color:#fff}
  .row{display:flex;gap:10px} .row .btn{margin-top:0}

  .wordsel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 18px;max-height:240px;overflow:auto}
  .wbtn{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;border-radius:11px;
    border:1px solid var(--line);background:#F7F2E9;cursor:pointer;font-weight:600;font-size:.92rem;transition:all .15s}
  .wbtn .u{font-family:var(--ff-urdu);color:var(--pine-2);font-weight:700}
  .wbtn .cnt{font-size:.72rem;background:var(--sage);color:var(--pine);padding:2px 8px;border-radius:100px;min-width:26px;text-align:center}
  .wbtn.sel{border-color:var(--pine);background:var(--sage)} .wbtn.done .cnt{background:var(--pine-3);color:#fff}
  .hint{font-size:.85rem;color:var(--ink-soft);display:flex;gap:8px;margin-top:14px}
  .hint svg{flex:0 0 auto;margin-top:2px}
  .progress{height:10px;background:var(--sage);border-radius:8px;overflow:hidden;margin:14px 0}
  .progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pine-3),var(--saffron));transition:width .3s}
  .stat-line{display:flex;justify-content:space-between;font-size:.92rem;color:var(--ink-soft);margin:6px 0}
  .stat-line b{color:var(--ink);font-family:var(--ff-display)}
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
    padding:13px 22px;border-radius:12px;font-weight:500;font-size:.95rem;opacity:0;transition:all .3s;z-index:200;pointer-events:none}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .err{background:rgba(224,87,59,.12);border:1px solid rgba(224,87,59,.4);color:#9c2f1b;border-radius:12px;padding:12px 16px;font-size:.9rem;margin-top:12px;display:none}
  .err.show{display:block}
  .navgroup{display:flex;align-items:center;gap:12px}
  .helpbtn{display:flex;align-items:center;gap:7px;font-family:var(--ff-body);font-weight:600;font-size:.88rem;color:var(--pine-2);
    background:var(--cream);border:1px solid var(--line);padding:7px 14px;border-radius:100px;cursor:pointer;transition:all .18s}
  .helpbtn:hover{border-color:var(--pine-2);transform:translateY(-1px)}
  @media(max-width:560px){.helpbtn span,.helpbtn{font-size:0}.helpbtn svg{margin:0}}

  .modal-bg{position:fixed;inset:0;background:rgba(6,35,27,.55);backdrop-filter:blur(5px);z-index:300;
    display:none;align-items:center;justify-content:center;padding:24px;animation:fade .25s ease}
  .modal-bg.show{display:flex}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{background:var(--cream);border-radius:24px;max-width:560px;width:100%;padding:36px;position:relative;
    box-shadow:0 40px 90px -22px rgba(6,35,27,.55);max-height:90vh;overflow:auto;animation:rise .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
  .modal .gclose{position:absolute;top:18px;right:18px;width:34px;height:34px;border:none;background:var(--sage);
    border-radius:50%;cursor:pointer;font-size:.95rem;color:var(--pine);display:grid;place-items:center}
  .modal .geyebrow{font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-deep);margin-bottom:8px}
  .modal h2{font-size:1.85rem;margin-bottom:6px} .modal .msub{color:var(--ink-soft);margin-bottom:26px}
  .gsteps{display:grid;gap:16px;margin-bottom:24px}
  .gstep{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
  .gstep .gn{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-family:var(--ff-display);
    font-weight:600;font-size:1.15rem;flex:0 0 auto;background:var(--pine);color:#EAF3ED}
  .gstep:nth-of-type(2) .gn{background:var(--saffron);color:#241a05}
  .gstep:nth-of-type(3) .gn{background:var(--pine-3);color:#fff}
  .gstep h4{font-family:var(--ff-display);font-size:1.14rem;margin-bottom:3px}
  .gstep p{font-size:.95rem;color:var(--ink-soft)} .gstep b{color:var(--ink)}
  .gnote{background:var(--sage);border-radius:13px;padding:13px 16px;font-size:.9rem;color:var(--pine);
    display:flex;gap:9px;margin-bottom:24px} .gnote svg{flex:0 0 auto;margin-top:2px}

  input[type=file]{display:none}