:root {
    --ink:#0A0E13; --panel:#131A22; --panel-2:#1B242E; --line:#2A3644;
    --text:#EAF1F8; --muted:#8697A8; --focus:#4EA8DE;
    --info:#4EA8DE; --info-flood:#06192A;
    --ok:#23C083; --ok-flood:#07231A;
    --err:#F0484F; --err-flood:#250809;
    --dup:#F2A73B; --dup-flood:#241A06;
    --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
    --font-ui:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
    --font-mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  }
  * { box-sizing: border-box; }
  body {
    margin:0; background:var(--ink); color:var(--text);
    font-family:var(--font-ui); min-height:100vh;
    display:flex; flex-direction:column;
  }
  [hidden] { display:none !important; }
  button { font:inherit; color:inherit; cursor:pointer; }

  .bara-sus {
    display:flex; align-items:center; gap:10px; padding:9px 16px;
    background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap;
  }
  .marca { display:flex; align-items:baseline; gap:8px; }
  .marca strong { font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-0.01em; }
  .marca span { font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }

  .comutator { display:flex; gap:2px; padding:2px; background:var(--ink); border:1px solid var(--line); border-radius:9px; margin-right:auto; }
  .comutator button { padding:6px 13px; border:none; background:transparent; border-radius:7px; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
  .comutator button[aria-selected="true"] { background:var(--panel-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
  .comutator button:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }

  .insigna { font-family:var(--font-mono); font-size:11px; font-weight:600; padding:1px 6px; border-radius:999px; background:var(--dup); color:#201400; }
  .insigna.zero { background:var(--line); color:var(--muted); }

  .setare { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 10px; border:1px solid var(--line); border-radius:999px; background:var(--panel-2); font-size:11px; color:var(--muted); }
  .setare label { letter-spacing:0.1em; text-transform:uppercase; font-weight:600; font-size:9.5px; }
  .setare select {
    appearance:none; -webkit-appearance:none; border:none; background:var(--ink); color:var(--text);
    font:inherit; font-size:12px; padding:4px 22px 4px 9px; border-radius:999px; cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,#8697A8 50%),linear-gradient(135deg,#8697A8 50%,transparent 50%);
    background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;
    background-size:4px 4px,4px 4px; background-repeat:no-repeat;
  }
  .setare select:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }

  .pastila { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--panel-2); font-size:11.5px; color:var(--muted); white-space:nowrap; }
  .pastila b { color:var(--text); font-family:var(--font-mono); font-weight:600; }
  .bulina { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(35,192,131,0.16); }

  .btn { padding:6px 12px; border-radius:7px; border:1px solid var(--line); background:var(--panel-2); font-size:12.5px; transition:border-color .15s, background .15s; }
  .btn:hover { border-color:var(--focus); }
  .btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
  .btn[aria-pressed="true"] { border-color:var(--focus); background:rgba(78,168,222,0.14); color:#CDE8FA; }

  .scena {
    flex:1; display:flex; flex-direction:column; justify-content:center;
    padding:34px; min-height:46vh; background:var(--ink);
    border-bottom:1px solid var(--line); transition:background .12s linear;
  }
  .scena[data-stare="deschis"] { background:var(--info-flood); }
  .scena[data-stare="gasit"]   { background:var(--ok-flood); }
  .scena[data-stare="negasit"] { background:var(--err-flood); }
  .scena[data-stare="dubla"]   { background:var(--dup-flood); }

  .astept { display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
  .tinta { width:78px; height:52px; border:2px solid var(--line); border-radius:6px; position:relative; overflow:hidden; }
  .tinta::after {
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background:var(--focus); box-shadow:0 0 12px var(--focus);
    animation:baleiaj 2.1s ease-in-out infinite;
  }
  @keyframes baleiaj { 0%,100% { transform:translateY(2px);} 50% { transform:translateY(46px);} }
  @media (prefers-reduced-motion:reduce) { .tinta::after { animation:none; top:24px; } }
  .astept h1 { margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(30px,6vw,58px); letter-spacing:-0.02em; text-wrap:balance; }
  .astept p { margin:0; color:var(--muted); font-size:15px; max-width:50ch; }

  .antet-stare { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
  .eticheta-stare { font-family:var(--font-display); font-weight:800; font-size:clamp(15px,2.2vw,21px); letter-spacing:0.08em; text-transform:uppercase; }
  .scena[data-stare="deschis"] .eticheta-stare { color:var(--info); }
  .scena[data-stare="gasit"]   .eticheta-stare { color:var(--ok); }
  .scena[data-stare="negasit"] .eticheta-stare { color:var(--err); }
  .scena[data-stare="dubla"]   .eticheta-stare { color:var(--dup); }

  .awb-citit { font-family:var(--font-mono); font-size:14px; color:var(--muted); letter-spacing:.06em; }
  .awb-citit b { color:var(--text); font-weight:600; }
  .recunoscut { font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }

  .avertisment { margin-left:auto; padding:7px 15px; border-radius:6px; font-family:var(--font-display); font-weight:800; font-size:clamp(15px,2.4vw,24px); letter-spacing:0.04em; background:var(--dup); color:#201400; }

  .banda { padding:11px 16px; border-left:4px solid var(--dup); background:rgba(242,167,59,0.12); color:#FFDCA6; font-size:15px; margin-bottom:18px; }
  .banda.rea { border-left-color:var(--err); background:rgba(240,72,79,0.16); color:#FFD7D9; font-weight:600; }
  .banda.buna { border-left-color:var(--ok); background:rgba(35,192,131,0.12); color:#B7F0D8; }

  .progres { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .progres-text { font-family:var(--font-mono); font-size:14px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .progres-bara { flex:1; height:6px; background:rgba(234,241,248,0.12); border-radius:999px; overflow:hidden; }
  .progres-umplut { height:100%; background:var(--info); border-radius:999px; transition:width .2s ease-out; }

  .produse { display:flex; flex-direction:column; gap:2px; }
  .produs {
    display:grid;
    grid-template-columns:auto minmax(86px,auto) 1fr auto;
    grid-template-rows:repeat(4, auto);
    align-items:baseline;
    gap:6px 22px;
    padding:14px 0;
    border-top:1px solid rgba(234,241,248,0.11);
  }
  .produs:first-child { border-top:none; padding-top:0; }

  .poza {
    grid-row:1 / span 4;
    grid-column:1;
    align-self:center;
    width:clamp(84px,15vw,190px);
    aspect-ratio:1;
    border-radius:10px;
    background:#F2F5F8;
    padding:6px;
    object-fit:contain;
    display:block;
    border:1px solid rgba(234,241,248,.14);
  }
  .poza[hidden] { display:none !important; }
  .produs.gata .poza { opacity:.4; }
  .produs.gata .nume, .produs.gata .titlu-lung, .produs.gata .varianta { opacity:.42; text-decoration:line-through; }
  .produs.gata .cant { color:var(--ok); }

  .cant { grid-column:2; grid-row:1 / span 4; align-self:center; font-family:var(--font-display); font-weight:800; font-size:clamp(40px,8vw,92px); line-height:.88; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--info); text-align:right; }
  .scena[data-stare="gasit"] .cant { color:var(--ok); }
  .cant small { font-size:.36em; font-weight:600; color:var(--muted); margin-left:4px; letter-spacing:0; }

  .nume { grid-column:3; font-family:var(--font-display); font-weight:800; font-size:clamp(24px,4.6vw,52px); line-height:1.05; letter-spacing:-0.02em; text-wrap:balance; text-transform:uppercase; }
  .titlu-lung { grid-column:3; color:var(--muted); font-size:clamp(12px,1.4vw,15px); margin-top:7px; line-height:1.4; max-width:70ch; }
  .varianta { grid-column:3; color:#B9CBDA; font-size:clamp(13px,1.6vw,18px); margin-top:5px; }
  .cod-produs {
    grid-column:3;
    font-family:var(--font-mono);
    font-size:clamp(13px,1.7vw,19px);
    color:#CDE8FA;
    background:rgba(78,168,222,.12);
    border:1px solid rgba(78,168,222,.3);
    border-radius:6px;
    padding:4px 10px;
    margin-top:8px;
    justify-self:start;
    letter-spacing:.05em;
  }
  .bifa { grid-row:1 / span 4; grid-column:4; align-self:center; font-size:26px; line-height:1; color:var(--ok); }

  .meta-comanda { display:flex; gap:26px; flex-wrap:wrap; margin-top:24px; padding-top:15px; border-top:1px solid rgba(234,241,248,0.11); }
  .meta-comanda > div { display:flex; flex-direction:column; gap:3px; }
  .meta-k { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .meta-v { font-size:15px; font-family:var(--font-mono); }
  .meta-v.text { font-family:var(--font-ui); }

  .indemn { margin-top:20px; padding:13px 17px; border:1px dashed var(--info); border-radius:8px; color:#BFE2F8; font-size:clamp(14px,1.9vw,19px); font-weight:600; }

  .eroare h2 { margin:0 0 14px; font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5.5vw,62px); letter-spacing:-0.02em; }
  .eroare .cod { font-family:var(--font-mono); font-size:clamp(20px,3.4vw,34px); color:var(--err); letter-spacing:0.06em; margin-bottom:22px; }
  .motive { margin:0 0 24px; padding-left:20px; color:#F5C9CB; font-size:15px; line-height:1.65; max-width:60ch; }

  .camera-zona { background:var(--panel); border-bottom:1px solid var(--line); padding:14px 18px; display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
  .video-cadru { position:relative; width:min(320px,100%); aspect-ratio:4/3; background:#000; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-shrink:0; }
  .video-cadru video { width:100%; height:100%; object-fit:cover; display:block; }
  .ghidaj { position:absolute; inset:26% 12%; border:2px solid rgba(78,168,222,.85); border-radius:4px; box-shadow:0 0 0 2000px rgba(0,0,0,.32); }
  .camera-info { display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--muted); max-width:44ch; line-height:1.6; }
  .camera-info strong { color:var(--text); }
  .camera-info p { margin:0; }

  .lista-cap { display:flex; align-items:center; gap:12px; padding:13px 18px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
  .filtre { display:flex; gap:2px; padding:2px; background:var(--ink); border:1px solid var(--line); border-radius:9px; }
  .filtre button { padding:6px 13px; border:none; background:transparent; border-radius:7px; font-size:13px; color:var(--muted); }
  .filtre button[aria-selected="true"] { background:var(--panel-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
  .filtre button:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }

  #cauta { flex:1; min-width:180px; padding:8px 13px; background:var(--ink); border:1px solid var(--line); border-radius:8px; color:var(--text); font-size:14px; }
  #cauta:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(78,168,222,.18); }
  #cauta::placeholder { color:#4C5B6B; }
  .rezumat { font-size:12px; color:var(--muted); font-family:var(--font-mono); white-space:nowrap; }

  .tabel-zona { flex:1; overflow-x:auto; }
  .colete { width:100%; border-collapse:collapse; min-width:880px; }
  .colete thead th { position:sticky; top:0; background:var(--ink); text-align:left; padding:10px 14px; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap; }
  .colete tbody tr { border-bottom:1px solid rgba(42,54,68,.6); cursor:pointer; transition:background .12s; }
  .colete tbody tr:hover { background:var(--panel); }
  .colete tbody tr:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
  .colete td { padding:11px 14px; font-size:14px; vertical-align:top; }

  .td-urgenta { width:4px; padding:0 !important; }
  .dunga { display:block; width:4px; height:100%; min-height:46px; background:var(--line); }
  .dunga.intarziat { background:var(--err); }
  .dunga.azi { background:var(--dup); }

  .td-awb { font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .td-awb small { display:block; color:var(--muted); font-size:11.5px; margin-top:3px; }
  .td-continut { line-height:1.4; display:flex; gap:10px; align-items:flex-start; }
  .mini { width:40px; height:40px; border-radius:6px; background:#F2F5F8; padding:2px; object-fit:contain; flex-shrink:0; border:1px solid rgba(234,241,248,.14); }
  .td-continut b { text-transform:uppercase; font-weight:600; }
  .td-continut small { display:block; color:var(--muted); font-size:11.5px; margin-top:3px; }
  .td-termen { white-space:nowrap; font-size:13.5px; }
  .td-termen.intarziat { color:var(--err); font-weight:600; }
  .td-termen.azi { color:var(--dup); font-weight:600; }
  .td-stare small { display:block; color:var(--muted); font-size:11.5px; margin-top:4px; }

  .chip { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; white-space:nowrap; border:1px solid var(--line); color:var(--muted); }
  .chip.gata { border-color:rgba(35,192,131,.5); color:var(--ok); background:rgba(35,192,131,.1); }
  .chip.lucru { border-color:rgba(242,167,59,.55); color:var(--dup); background:rgba(242,167,59,.1); }

  .gol { padding:60px 24px; text-align:center; color:var(--muted); }
  .gol strong { display:block; font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--text); margin-bottom:8px; }

  .panou { background:var(--panel); padding:15px 18px 19px; }
  .panou-cap { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
  .panou-cap h2 { margin:0; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .rand-input { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:13px; }
  #camp { flex:1; min-width:190px; padding:11px 15px; background:var(--ink); border:1px solid var(--line); border-radius:8px; color:var(--text); font-family:var(--font-mono); font-size:16px; letter-spacing:.08em; }
  #camp:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(78,168,222,.18); }
  #camp::placeholder { color:#4C5B6B; letter-spacing:.04em; }

  .grup-demo { margin-bottom:12px; }
  .grup-titlu { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:7px; }
  .demo { display:flex; gap:7px; flex-wrap:wrap; }
  .demo-btn { padding:8px 12px; border-radius:7px; border:1px solid var(--line); background:var(--panel-2); font-family:var(--font-mono); font-size:12px; display:flex; align-items:center; gap:9px; }
  .demo-btn:hover { border-color:var(--focus); }
  .demo-btn.produs-btn { border-color:rgba(78,168,222,.4); }
  .demo-btn.gresit { border-color:rgba(240,72,79,.45); }
  .demo-btn i { font-style:normal; font-family:var(--font-ui); font-size:11px; color:var(--muted); }

  .nota { margin:14px 0 0; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; line-height:1.7; max-width:84ch; }
  .nota b { color:var(--text); font-weight:600; }

  @media (max-width:760px) {
    .scena { padding:24px 18px; min-height:40vh; }
    .produs { grid-template-columns:auto minmax(52px,auto) 1fr auto; gap:5px 12px; padding:12px 0; }
    .meta-comanda { gap:16px; margin-top:20px; }
    .bara-sus { padding:9px 13px; gap:8px; }
    .panou { padding:14px; }
    .marca { display:none; }
    .comutator { flex:1; }
    .comutator button { flex:1; justify-content:center; }

  }