/* Layout: soft atelier — pearl ground with slow-drifting blush, champagne and lilac light; frosted glass rail and cards; status told in pastel chips; gold only as a quiet champagne thread. */
:root{
  --bg:#FBF8F5; --glass:rgba(255,255,255,.72); --solid:#FFFFFF; --sunk:#F6F0EB; --ink:#29231F; --ink2:#564C44; --ink3:#857A71; --line:#EEE5DD; --hair:rgba(190,154,96,.35);
  --gold:#9E7A3E; --champ:#D9BE8A; --rose:#E9C8BF; --lilac:#DCD2EC; --peach:#F3D9C2;
  --soft:linear-gradient(135deg,#F7E6D6 0%,#F1D7D1 45%,#E6DDF0 100%);
  --cta:linear-gradient(135deg,#C9A467 0%,#E3C995 50%,#C79E66 100%); --on-cta:#2B200F;
  --orb1:#F4D3C8; --orb2:#F1E0BE; --orb3:#E2D8F2;
  --new:#6A5797; --new-s:#EFEAF8; --prep:#A3612A; --prep-s:#FCEDDF; --ok:#3D7255; --ok-s:#E5F1E9; --ship:#8A6A2F; --ship-s:#F7EEDB; --urg:#A33B3B; --urg-s:#FAE4E1;
  --f-body:"Alexandria","IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --f-disp:"Amiri","Noto Naskh Arabic",serif;
  --f-num:"Cormorant Garamond","Times New Roman",serif;
  --r:24px; --sh:0 1px 2px rgba(120,80,50,.04),0 12px 34px -16px rgba(120,80,50,.22); --sh-up:0 2px 6px rgba(120,80,50,.05),0 28px 60px -24px rgba(120,80,50,.38);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#17141A; --glass:rgba(36,31,40,.72); --solid:#231F27; --sunk:#2C2730; --ink:#F6F0EA; --ink2:#D6CCC4; --ink3:#A99E96; --line:#38323D; --hair:rgba(217,190,138,.32);
  --gold:#E2C48D; --soft:linear-gradient(135deg,#3A2C2A 0%,#36282E 45%,#2D2838 100%);
  --orb1:#4A2F33; --orb2:#463A26; --orb3:#352D48;
  --new:#B9A9E6; --new-s:#2D2840; --prep:#F0B27A; --prep-s:#3A2B1E; --ok:#8CCFA6; --ok-s:#1F3229; --ship:#E2C48D; --ship-s:#3A3121; --urg:#F29A92; --urg-s:#3D2224;
  --sh:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.6); --sh-up:0 28px 60px -24px rgba(0,0,0,.75); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#17141A; --glass:rgba(36,31,40,.72); --solid:#231F27; --sunk:#2C2730; --ink:#F6F0EA; --ink2:#D6CCC4; --ink3:#A99E96; --line:#38323D; --hair:rgba(217,190,138,.32);
  --gold:#E2C48D; --soft:linear-gradient(135deg,#3A2C2A 0%,#36282E 45%,#2D2838 100%);
  --orb1:#4A2F33; --orb2:#463A26; --orb3:#352D48;
  --new:#B9A9E6; --new-s:#2D2840; --prep:#F0B27A; --prep-s:#3A2B1E; --ok:#8CCFA6; --ok-s:#1F3229; --ship:#E2C48D; --ship-s:#3A3121; --urg:#F29A92; --urg-s:#3D2224;
  --sh:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.6); --sh-up:0 28px 60px -24px rgba(0,0,0,.75); color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15.5px;font-weight:500;line-height:1.7;letter-spacing:0;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
.num{font-variant-numeric:tabular-nums lining-nums}
/* ambient light */
.orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orbs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.orbs i:nth-child(1){width:46vmax;height:46vmax;background:var(--orb1);top:-14vmax;right:-10vmax;animation:d1 26s ease-in-out infinite alternate}
.orbs i:nth-child(2){width:38vmax;height:38vmax;background:var(--orb2);bottom:-16vmax;right:30vw;animation:d2 32s ease-in-out infinite alternate}
.orbs i:nth-child(3){width:34vmax;height:34vmax;background:var(--orb3);top:20vh;left:-12vmax;animation:d3 28s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(-8vw,10vh) scale(1.1)}}
@keyframes d2{to{transform:translate(10vw,-12vh) scale(.92)}}
@keyframes d3{to{transform:translate(8vw,-6vh) scale(1.12)}}
.app{position:relative;z-index:1;display:grid;grid-template-columns:268px 1fr;min-height:100%}
/* rail */
.rail{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;max-height:100%;margin:14px;margin-inline-end:0;height:calc(100vh - 28px);background:var(--glass);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border:1px solid rgba(255,255,255,.6);border-radius:28px;box-shadow:var(--sh);display:flex;flex-direction:column;padding:24px 16px 18px;gap:18px;z-index:30}
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.brand img{width:70px;height:70px;object-fit:contain;animation:bloom 1.4s cubic-bezier(.2,.8,.2,1)}
@keyframes bloom{from{transform:rotate(-40deg) scale(.6);opacity:.3}to{transform:none;opacity:1}}
.brand .wm{font-family:var(--f-num);font-weight:600;font-size:24px;letter-spacing:.22em;padding-inline-start:.22em;color:var(--gold)}
.brand .sub{font-size:12.5px;color:var(--ink3);font-weight:600}
.nav{display:flex;flex-direction:column;gap:4px}
.nav button{position:relative;display:flex;align-items:center;gap:13px;padding:12px 15px;border:0;background:none;border-radius:16px;font-weight:600;font-size:15.5px;color:var(--ink2);text-align:start;min-height:50px;transition:background .3s,color .3s,transform .2s}
.nav button svg{width:21px;height:21px;flex:none;stroke-width:1.7}
.nav button .ct{margin-inline-start:auto;background:var(--sunk);color:var(--ink);border-radius:999px;padding:0 9px;font-size:12.5px;font-weight:700;min-width:26px;text-align:center}
.nav button:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--soft);color:var(--ink);box-shadow:0 6px 18px -10px rgba(160,100,70,.45),inset 0 0 0 1px rgba(255,255,255,.6)}
.nav button[aria-current="page"] svg{color:var(--gold)}
.nav button[aria-current="page"] .ct{background:var(--solid)}
.who{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.who label,.mrole label{font-size:12px;color:var(--ink3);font-weight:600}
.who select,.mrole select{width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--solid);font-weight:600}
.powered{font-size:10px;color:var(--ink3);text-align:center;letter-spacing:.24em;font-weight:600;line-height:1.7;margin-top:4px}
.powered b{display:block;font-family:var(--f-num);font-weight:700;letter-spacing:.18em;font-size:15px;color:var(--gold)}
/* canvas */
main{min-width:0;padding-inline:clamp(16px,3.2vw,44px);padding-block:30px 120px}
.top{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.eyebrow{font-family:var(--f-num);font-weight:600;font-size:13px;letter-spacing:.32em;color:var(--gold);margin-bottom:4px}
.top h1{font-family:var(--f-disp);font-size:clamp(30px,3.2vw,40px);font-weight:700;margin:0;line-height:1.2;text-wrap:balance}
.top .date{color:var(--ink3);font-weight:600;font-size:14.5px;margin-top:4px}
.top .act{margin-inline-start:auto;display:flex;gap:10px;flex-wrap:wrap}
.lede{margin:-8px 0 22px;color:var(--ink2);max-width:68ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border-radius:16px;border:1px solid var(--line);background:var(--solid);font-weight:700;font-size:15px;transition:transform .2s,box-shadow .3s,background-position .8s;box-shadow:0 1px 2px rgba(120,80,50,.05)}
.btn:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn svg{width:19px;height:19px;stroke-width:2}
.btn.cta,.done-btn{background:var(--cta);background-size:200% 100%;background-position:100% 0;color:var(--on-cta);border-color:transparent;box-shadow:0 10px 24px -12px rgba(170,125,60,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.cta:hover,.done-btn:hover{background-position:0 0}
.btn.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.ok{background:var(--ok-s);color:var(--ok);border-color:transparent}
.btn.soft{background:var(--urg-s);color:var(--urg);border-color:transparent}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.busy svg{animation:sp .8s linear infinite}
.panel{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.65);border-radius:var(--r);box-shadow:var(--sh)}
.sec-h{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.sec-h h2{font-family:var(--f-disp);font-size:22px;font-weight:600;margin:0}
.sec-h .hint{color:var(--ink3);font-size:14px}
.rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes rise{from{transform:translateY(20px);opacity:.3}to{transform:none;opacity:1}}
/* hello */
.hello{position:relative;overflow:hidden;border-radius:28px;padding:30px 32px;margin-bottom:22px;background:var(--soft);display:flex;align-items:center;gap:24px;flex-wrap:wrap;box-shadow:var(--sh);border:1px solid rgba(255,255,255,.7)}
.hello::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),transparent 70%);top:-120px;left:-60px;animation:glow 9s ease-in-out infinite alternate}
@keyframes glow{to{transform:translate(120px,60px)}}
.hello>*{position:relative}
.hello .g{font-family:var(--f-disp);font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.3}
.hello .g span{color:var(--gold)}
.hello p{margin:6px 0 0;color:var(--ink2);font-weight:600}
.hello .big{margin-inline-start:auto;text-align:center;min-width:140px}
.hello .big b{display:block;font-family:var(--f-num);font-size:68px;line-height:1;font-weight:600}
.hello .big small{font-size:13px;color:var(--ink2);font-weight:600}
/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{padding:18px 20px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .lb{font-size:13.5px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:8px}
.kpi .lb i{width:10px;height:10px;border-radius:50%}
.kpi .v{font-family:var(--f-num);font-size:46px;font-weight:600;line-height:1.1;margin-top:4px}
.kpi .u{font-size:13px;color:var(--ink3);font-weight:600}
.kpi .bar{height:4px;border-radius:4px;margin-top:10px;background:var(--sunk);overflow:hidden}
.kpi .bar span{display:block;height:100%;border-radius:4px;transform-origin:right;animation:grow 1.2s cubic-bezier(.2,.8,.2,1)}
@keyframes grow{from{transform:scaleX(.04)}}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.two>*{min-width:0}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:12.5px;color:var(--ink3);font-weight:700;text-align:start;padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 18px;border-bottom:1px solid var(--line);font-weight:600;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .25s}
tbody tr:hover{background:rgba(255,255,255,.5)}
.thumb{width:46px;height:58px;border-radius:12px;object-fit:cover;background:var(--sunk);flex:none}
.cell-m{display:flex;align-items:center;gap:14px}
.cell-m small{display:block;color:var(--ink3);font-weight:600;font-size:12px}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px var(--solid),0 0 0 3px var(--line);vertical-align:-2px;margin-inline:2px}
.log{list-style:none;margin:0;padding:6px 0;max-height:430px;overflow:auto}
.log li{display:flex;gap:12px;padding:12px 18px;font-size:14.5px;color:var(--ink2);border-bottom:1px solid var(--line);align-items:baseline}
.log li::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--champ);transform:translateY(-2px)}
.log li:last-child{border-bottom:0}
.log li b{color:var(--ink);font-weight:700}
.log time{margin-inline-start:auto;color:var(--ink3);font-size:12px;white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.t-new{background:var(--new-s);color:var(--new)}.t-prep{background:var(--prep-s);color:var(--prep)}.t-ok{background:var(--ok-s);color:var(--ok)}.t-ship{background:var(--ship-s);color:var(--ship)}.t-urg{background:var(--urg-s);color:var(--urg)}
.flow{padding:18px 22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-weight:700;color:var(--ink3)}
/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.search{flex:1 1 260px;display:flex;align-items:center;gap:10px;background:var(--solid);border:1px solid var(--line);border-radius:16px;padding:0 16px;min-height:52px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--champ);box-shadow:0 0 0 4px rgba(217,190,138,.2)}
.search svg{width:20px;height:20px;color:var(--gold)}
.search input{border:0;background:none;outline:none;width:100%;font-weight:600}
.filters select,.filters input[type=date],.filters input[type=month]{min-height:52px;border-radius:16px;border:1px solid var(--line);background:var(--solid);padding:0 14px;font-weight:600}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--solid);font-weight:700;font-size:14px;transition:all .25s}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filters .chip{min-height:52px;border-radius:16px}
.seg{display:inline-flex;background:var(--sunk);border-radius:16px;padding:4px;gap:4px}
.seg button{min-height:44px;padding:0 18px;border:0;border-radius:12px;background:none;font-weight:700;color:var(--ink2);transition:all .3s}
.seg button[aria-pressed="true"]{background:var(--solid);color:var(--ink);box-shadow:var(--sh)}
/* pieces */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.piece{display:flex;flex-direction:column;overflow:hidden;position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,box-shadow .4s}
.piece:hover{transform:translateY(-5px);box-shadow:var(--sh-up)}
.piece.out{transform:translateY(-30px) scale(.92);opacity:0}
.piece .ph{position:relative;aspect-ratio:4/4.5;background:var(--soft);overflow:hidden;max-width:100%;margin:8px 8px 0;border-radius:18px}
.piece .ph img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.piece:hover .ph img{transform:scale(1.06)}
.piece .badges{position:absolute;top:10px;inset-inline-start:10px;display:flex;gap:6px;flex-wrap:wrap}
.piece .badges .tag{background:rgba(255,255,255,.88);color:#3A302A;backdrop-filter:blur(6px)}
.piece .badges .t-urg{background:#F9DFDB;color:#9A3434}
.piece .oid{position:absolute;bottom:10px;inset-inline-end:10px;background:rgba(255,255,255,.9);color:#2A231E;padding:2px 12px;border-radius:999px;font-family:var(--f-num);font-weight:700;font-size:19px}
.piece .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;flex:1}
.piece h3{margin:0;font-family:var(--f-disp);font-size:18.5px;font-weight:700;line-height:1.4}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spec div{border-radius:14px;padding:8px 12px;background:var(--sunk)}
.spec small{display:block;font-size:12px;color:var(--ink3);font-weight:700}
.spec b{font-size:17px;font-weight:700}
.spec .sz b{font-family:var(--f-num);font-size:26px;line-height:1.1}
.meta{font-size:13.5px;color:var(--ink2);font-weight:600;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.note{background:var(--urg-s);color:var(--urg);border-radius:14px;padding:9px 12px;font-size:14px;font-weight:700}
.done-btn{margin-top:auto;min-height:58px;border-radius:18px;border:0;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;transition:background-position .8s,transform .2s,box-shadow .3s}
.done-btn svg{width:25px;height:25px}
.done-btn:active{transform:scale(.97)}
.burst{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--solid) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3;animation:fadein .25s ease;overflow:hidden}
.burst .ring{width:100px;height:100px;border-radius:50%;background:var(--cta);display:grid;place-items:center;animation:pop .6s cubic-bezier(.2,1.6,.4,1);box-shadow:0 0 0 12px rgba(227,201,149,.25),0 0 0 26px rgba(227,201,149,.12)}
.burst svg{width:50px;height:50px;color:#2B200F;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .45s .2s ease forwards}
.burst .pt{position:absolute;left:50%;top:50%;width:14px;height:10px;border-radius:70% 0 70% 0;animation:fly .9s cubic-bezier(.1,.8,.3,1) forwards;opacity:0}
@keyframes fly{0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(260deg) scale(.5)}}
@keyframes pop{from{transform:scale(.2)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}}
/* audit */
.ord{overflow:hidden}
.ord-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(247,230,214,.6),transparent)}
.ord-h .id{font-family:var(--f-num);font-size:30px;font-weight:700;color:var(--gold);line-height:1}
.ord-h .cu{font-weight:700;font-size:17px}
.ord-h .cu small{display:block;color:var(--ink3);font-size:13px;font-weight:600}
.ord-h .end{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.line{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.line:last-child{border-bottom:0}
.line .thumb{width:60px;height:76px}
.line .inf{flex:1 1 200px;min-width:0}
.line .inf b{display:block;font-size:16.5px;font-family:var(--f-disp)}
.line .inf span{color:var(--ink2);font-size:14px;font-weight:600}
.line .ops{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.line.wait{opacity:.55}
.stack{display:flex;flex-direction:column;gap:18px}
/* ship */
.shiprow{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;cursor:pointer;transition:background .25s}
.shiprow:hover{background:rgba(255,255,255,.45)}
.shiprow:last-child{border-bottom:0}
.shiprow input[type=checkbox]{width:24px;height:24px;accent-color:#C9A467}
.shiprow .id{font-family:var(--f-num);font-size:26px;font-weight:700;min-width:78px;color:var(--gold)}
.shiprow .cu{flex:1 1 180px;min-width:0;font-weight:700}
.shiprow .cu small{display:block;color:var(--ink3);font-weight:600;font-size:13px}
.shiprow .cod{font-family:var(--f-num);font-weight:700;font-size:24px}
.bar-s{position:sticky;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px 12px 20px;margin-top:18px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:22px;box-shadow:var(--sh-up);z-index:5;border:1px solid var(--hair)}
.bar-s .btn{margin-inline-start:auto}
.api{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:4px 20px 18px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld label{font-size:13px;font-weight:700;color:var(--ink2)}
.fld input,.fld select{min-height:48px;border-radius:14px;border:1px solid var(--line);background:var(--solid);padding:8px 14px;font-weight:600;width:100%;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus{border-color:var(--champ);box-shadow:0 0 0 4px rgba(217,190,138,.2);outline:none}
pre.json{direction:ltr;text-align:left;margin:0;padding:16px 18px;background:var(--sunk);border-radius:16px;font:500 12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto;max-height:300px;color:var(--ink)}
details summary{cursor:pointer;font-weight:700;padding:16px 20px}
/* models */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.model{overflow:hidden;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.model:hover{transform:translateY(-5px);box-shadow:var(--sh-up)}
.model .ph{aspect-ratio:1/1.1;background:var(--soft);max-width:100%;overflow:hidden;margin:8px 8px 0;border-radius:18px}
.model .ph img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.model:hover .ph img{transform:scale(1.06)}
.model .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.model .code{font-family:var(--f-num);font-size:15px;color:var(--gold);font-weight:700;direction:ltr;text-align:end;letter-spacing:.12em}
.model h3{margin:0;font-family:var(--f-disp);font-size:18px;font-weight:700}
.sizes{display:flex;gap:4px;flex-wrap:wrap}
.sizes span{font-size:12px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--sunk);color:var(--ink2)}
.model .ft{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;font-weight:700}
.model .price{font-family:var(--f-num);font-size:24px}
/* reports */
.chart{padding:18px 18px 8px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .ax{fill:var(--ink3);font:600 11px var(--f-body)}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .br{fill:url(#gb);transition:opacity .2s}
.chart .br:hover{opacity:.75}
.chart .bv{fill:var(--ink2);font:700 11px var(--f-body)}
.chart .bar-anim{transform-box:fill-box;transform-origin:bottom;animation:barup .9s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes barup{from{transform:scaleY(0)}}
.hb{display:flex;flex-direction:column;gap:12px;padding:18px 20px}
.hb div{display:grid;grid-template-columns:minmax(0,1.2fr) 2fr auto;gap:12px;align-items:center;font-weight:600;font-size:14.5px}
.hb div span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb .tr{height:10px;border-radius:10px;background:var(--sunk);overflow:hidden}
.hb .tr i{display:block;height:100%;border-radius:10px;background:var(--cta);transform-origin:right;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) backwards}
.hb b{font-family:var(--f-num);font-size:19px;min-width:44px;text-align:end}
/* modal */
.scrim{position:fixed;inset:0;background:rgba(60,40,30,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;padding:16px;z-index:50;animation:fadein .25s}
.sheet{width:min(700px,100%);max-height:calc(100% - 20px);overflow:auto;background:var(--solid);border-radius:28px;box-shadow:0 40px 100px rgba(80,50,30,.3);animation:sheet .45s cubic-bezier(.2,.9,.2,1)}
@keyframes sheet{from{transform:translateY(30px) scale(.97);opacity:.5}}
.sheet-h{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--solid);z-index:1}
.sheet-h h3{margin:0;font-family:var(--f-disp);font-size:23px;font-weight:700}
.sheet-h .x{margin-inline-start:auto}
.sheet-b{padding:20px 22px;display:flex;flex-direction:column;gap:18px}
.sheet-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--solid)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.colorlist,.chips{display:flex;gap:8px;flex-wrap:wrap}
.colorlist .chip{display:inline-flex;align-items:center;gap:6px}
.upl{display:flex;gap:16px;align-items:center}
.upl .pv{width:90px;height:112px;border-radius:16px;background:var(--soft);object-fit:cover}
.skus{display:flex;gap:6px;flex-wrap:wrap;direction:ltr}
.skus code{font-size:11.5px;font-weight:700;background:var(--sunk);padding:3px 8px;border-radius:8px;color:var(--ink2)}
.prog{display:flex;flex-direction:column;gap:8px}
.prog div{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--sunk);font-weight:700;flex-wrap:wrap}
.prog div span:first-child{font-family:var(--f-num);font-size:20px;color:var(--gold)}
.prog div span:last-child{margin-inline-start:auto}
.spin{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--champ);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{padding:56px 20px;text-align:center;color:var(--ink2)}
.empty b{display:block;font-family:var(--f-disp);font-size:23px;color:var(--ink);margin-bottom:6px}
.empty::before{content:"";display:block;width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:var(--soft);box-shadow:0 0 0 10px rgba(241,215,209,.35)}
.toast{position:fixed;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--solid);color:var(--ink);padding:13px 22px;border-radius:18px;font-weight:700;z-index:80;box-shadow:var(--sh-up);border:1px solid var(--hair);animation:toast .4s cubic-bezier(.2,.9,.2,1);max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px}
.toast::before{content:"";width:10px;height:10px;flex:none;border-radius:50%;background:var(--cta)}
@keyframes toast{from{transform:translate(-50%,16px);opacity:0}}
.view{animation:viewin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes viewin{from{transform:translateY(10px);opacity:.4}}
.ro{font-size:13px;color:var(--ink3);font-weight:600}
.mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:12px}
.mobile-brand img{width:42px;height:42px}
.mobile-brand span{font-family:var(--f-num);font-weight:700;letter-spacing:.2em;font-size:20px;color:var(--gold)}
.mrole{display:none;margin-inline-start:auto;width:150px}
.mrole label{display:none}
/* off-screen PDF page (always light, print colours) */
.pdfdoc{--p-ink:#2A231E;--p-ink2:#5A4F47;--p-line:#EBE2D9;--p-gold:#9E7A3E;--p-soft:#F8EEE6;position:fixed;top:0;left:-12000px;width:794px;background:#FFFFFF;color:var(--p-ink);font-family:var(--f-body);font-weight:500;font-size:13px;padding:36px 40px}
.pdfdoc .ph1{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--p-gold);padding-bottom:16px;margin-bottom:18px}
.pdfdoc .ph1 img{width:64px;height:64px}
.pdfdoc .ph1 h1{margin:0;font-family:var(--f-disp);font-size:26px}
.pdfdoc .ph1 .r{margin-right:auto;text-align:left;color:var(--p-ink2);font-weight:600;font-size:12px}
.pdfdoc .pk{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.pdfdoc .pk div{background:var(--p-soft);border-radius:12px;padding:10px 12px}
.pdfdoc .pk small{display:block;color:var(--p-ink2);font-weight:700;font-size:11px}
.pdfdoc .pk b{font-size:22px;font-weight:700}
.pdfdoc h2{font-family:var(--f-disp);font-size:16px;margin:16px 0 8px;color:var(--p-gold)}
.pdfdoc table{width:100%;border-collapse:collapse;margin-bottom:6px}
.pdfdoc th{background:var(--p-soft);color:var(--p-ink2);font-size:11px;padding:7px 9px;text-align:right;border:0}
.pdfdoc td{padding:7px 9px;border-bottom:1px solid var(--p-line);font-size:12px;font-weight:600}
.pdfdoc .foot{margin-top:22px;padding-top:12px;border-top:1px solid var(--p-line);display:flex;justify-content:space-between;color:var(--p-ink2);font-size:11px;font-weight:600}
@media (max-width:1100px){.two{grid-template-columns:1fr}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));inset-inline:8px;margin:0;height:auto;max-height:none;flex-direction:row;padding:6px;gap:0;border-radius:24px;box-shadow:var(--sh-up)}
  .brand,.who{display:none}
  .nav{flex-direction:row;flex:1;justify-content:space-around;gap:2px}
  .nav button{flex-direction:column;gap:2px;font-size:10.5px;padding:6px 2px;min-height:54px;flex:1;align-items:center;border-radius:18px}
  .nav button .ct{position:absolute;margin:0;top:2px;inset-inline-end:8%;font-size:10px;padding:0 6px;min-width:0}
  .mobile-brand{display:flex}
  .mrole{display:block}
  .bar-s{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  main{padding-block:18px 120px}
}
@media (max-width:560px){.row2{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr;gap:12px}.piece .bd{padding:10px 12px 12px}.spec{grid-template-columns:1fr}.done-btn{min-height:52px;font-size:16px}.piece h3{font-size:15.5px}.hello{padding:22px}.hello .big{margin-inline-start:0;text-align:start}.kpi .v{font-size:38px}.nav button span:not(.ct){font-size:10px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- v4 additions: two systems, order lens ---- */
.mode{display:flex;background:var(--sunk);border-radius:16px;padding:4px;gap:4px}
.mode button{flex:1;min-height:42px;border:0;border-radius:12px;background:none;font-weight:700;font-size:13.5px;color:var(--ink2);transition:all .3s}
.mode button[aria-pressed="true"]{background:var(--solid);color:var(--ink);box-shadow:var(--sh)}
.staff{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.staff .lb{font-weight:700;color:var(--ink2);font-size:14px}
.staff .chip{display:inline-flex;align-items:center;gap:8px}
.staff .chip i{width:26px;height:26px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-style:normal;font-size:13px;color:var(--ink)}
.lensum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.lensum div{padding:14px 18px}
.lensum small{display:block;font-size:13px;font-weight:700;color:var(--ink2)}
.lensum b{font-family:var(--f-num);font-size:36px;line-height:1.1;font-weight:600}
.ocard{overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s;position:relative}
.ocard.out{transform:translateX(-40px) scale(.97);opacity:0}
.oc-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.rank{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--soft);font-family:var(--f-num);font-weight:700;font-size:22px;flex:none}
.rank small{display:block;font:700 9px var(--f-body);color:var(--ink3);margin-top:-6px}
.oc-h .id{font-family:var(--f-num);font-size:28px;font-weight:700;color:var(--gold);line-height:1}
.oc-h .cu{font-weight:700;font-size:16.5px;min-width:0}
.oc-h .cu small{display:block;color:var(--ink3);font-size:13px;font-weight:600}
.oc-h .end{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.age{background:var(--sunk);color:var(--ink2)}
.age.a1{background:var(--prep-s);color:var(--prep)}
.age.a2{background:var(--urg-s);color:var(--urg)}
.lens{padding:12px 20px 4px;display:flex;flex-direction:column;gap:8px}
.lens .segs{display:flex;gap:5px}
.lens .segs i{flex:1;height:8px;border-radius:8px;background:var(--sunk);transition:background .5s}
.lens .segs i.p{background:var(--champ)}
.lens .segs i.k{background:var(--ok)}
.lens .txt{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:700;color:var(--ink2)}
.lens .txt .miss{color:var(--urg)}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);position:relative;transition:background .4s}
.prow:first-of-type{border-top:0}
.prow .thumb{width:72px;height:92px;border-radius:14px}
.prow .inf{min-width:0;display:flex;flex-direction:column;gap:4px}
.prow .nm{font-family:var(--f-disp);font-size:17.5px;font-weight:700;line-height:1.35}
.prow .code{display:inline-flex;align-self:flex-start;font-family:var(--f-num);font-weight:700;font-size:17px;letter-spacing:.06em;direction:ltr;background:var(--ship-s);color:var(--ship);padding:0 10px;border-radius:8px}
.prow .att{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-weight:700;font-size:14.5px;color:var(--ink2)}
.prow .att .sz{font-family:var(--f-num);font-size:24px;color:var(--ink);line-height:1}
.prow.done{background:color-mix(in srgb,var(--ok-s) 60%,transparent)}
.prow.done .thumb{opacity:.75}
.prow.miss{background:color-mix(in srgb,var(--urg-s) 35%,transparent)}
.tick{width:64px;height:64px;border-radius:20px;border:0;background:var(--cta);background-size:200% 100%;color:var(--on-cta);display:grid;place-items:center;box-shadow:0 10px 22px -10px rgba(170,125,60,.75),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,background-position .8s}
.tick:hover{background-position:0 0}
.tick:active{transform:scale(.92)}
.tick svg{width:32px;height:32px}
.donebadge{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ok);font-weight:700;font-size:12px;text-align:center}
.donebadge b{width:44px;height:44px;border-radius:50%;background:var(--ok-s);display:grid;place-items:center}
.donebadge svg{width:24px;height:24px}
.undo{border:0;background:none;color:var(--ink3);font-weight:700;font-size:12px;text-decoration:underline;padding:4px}
.pop{position:absolute;inset-inline-end:20px;top:50%;width:64px;height:64px;margin-top:-32px;border-radius:50%;background:var(--ok);display:grid;place-items:center;color:#fff;animation:pop .5s cubic-bezier(.2,1.6,.4,1);z-index:2}
.pop svg{width:34px;height:34px;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .35s .15s forwards}
.complete{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--solid) 75%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:4;animation:fadein .3s;overflow:hidden}
.complete .in{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-family:var(--f-disp);font-size:22px;font-weight:700}
.complete .ring{width:96px;height:96px;border-radius:50%;background:var(--cta);display:grid;place-items:center;animation:pop .6s cubic-bezier(.2,1.6,.4,1);box-shadow:0 0 0 12px rgba(227,201,149,.25)}
.complete .ring svg{width:48px;height:48px;color:#2B200F;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .45s .2s forwards}
.complete .pt{position:absolute;left:50%;top:45%;width:14px;height:10px;border-radius:70% 0 70% 0;animation:fly .9s cubic-bezier(.1,.8,.3,1) forwards;opacity:0}
.ph-ph{display:grid;place-items:center;font-family:var(--f-num);font-weight:700;color:var(--ink2)}
.olist .orow{display:grid;grid-template-columns:90px minmax(0,1.4fr) minmax(0,1fr) 120px 150px 110px;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .25s;text-align:start;width:100%;background:none;border-inline:0;border-top:0;font:inherit;color:inherit}
.olist .orow:hover{background:rgba(255,255,255,.5)}
.olist .orow:last-child{border-bottom:0}
.olist .orow .id{font-family:var(--f-num);font-weight:700;font-size:22px;color:var(--gold)}
.olist .orow small{display:block;color:var(--ink3);font-weight:600;font-size:12.5px}
.olist .orow .tot{font-family:var(--f-num);font-weight:700;font-size:21px}
.olist .mini{display:flex;gap:3px}
.olist .mini i{width:16px;height:6px;border-radius:6px;background:var(--sunk)}
.olist .mini i.p{background:var(--champ)}.olist .mini i.k{background:var(--ok)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dgrid div{background:var(--sunk);border-radius:14px;padding:10px 14px}
.dgrid small{display:block;color:var(--ink3);font-weight:700;font-size:12px}
.dgrid b{font-weight:700}
.totbox{display:flex;flex-direction:column;gap:6px;background:var(--soft);border-radius:18px;padding:14px 18px;font-weight:700}
.totbox div{display:flex;justify-content:space-between;gap:10px}
.totbox .g{font-family:var(--f-num);font-size:30px}
.storechips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.storechips .chip{display:inline-flex;align-items:center;gap:8px}
.storechips .chip i{width:10px;height:10px;border-radius:50%}
.team td .chips{gap:6px}
@media (max-width:980px){.olist .orow{grid-template-columns:80px minmax(0,1fr) auto;row-gap:6px}.olist .orow .c-store,.olist .orow .c-mini{display:none}}
@media (max-width:820px){.nav{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.nav button{min-width:64px;flex:1 0 auto}.mode{display:none}.mmode{display:flex!important}}
@media (max-width:560px){.prow{grid-template-columns:auto minmax(0,1fr);padding:12px 14px}.prow .act{grid-column:1/-1;display:flex;justify-content:flex-end}.prow .thumb{width:60px;height:76px}.tick{width:100%;height:54px;border-radius:16px}.oc-h{padding:14px}}
.mmode{display:none;margin-bottom:12px}
/* ---- v5: piece queue + eye ---- */
.pq{display:flex;flex-direction:column;gap:12px}
.pcard{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:12px 16px 12px 14px;position:relative;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s,box-shadow .3s}
.pcard:hover{box-shadow:var(--sh-up)}
.pcard.out{transform:translateX(-50px);opacity:0}
.qn{width:36px;height:36px;border-radius:12px;background:var(--soft);display:grid;place-items:center;font-family:var(--f-num);font-weight:700;font-size:18px}
.pimg{width:84px;height:106px;border-radius:16px;object-fit:cover;object-position:center 25%;background:var(--soft)}
.pinf{display:flex;flex-direction:column;gap:4px;min-width:0}
.pinf .code{display:inline-flex;align-self:flex-start;font-family:var(--f-num);font-weight:700;font-size:20px;letter-spacing:.06em;direction:ltr;background:var(--ship-s);color:var(--ship);padding:0 12px;border-radius:9px}
.pinf .nm{font-family:var(--f-disp);font-size:17px;font-weight:700;line-height:1.35}
.pinf .att{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-weight:700;font-size:15px;color:var(--ink2)}
.pinf .att .sz{font-family:var(--f-num);font-size:26px;color:var(--ink);line-height:1}
.pinf .pwho{font-size:14px;font-weight:600;color:var(--ink2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pinf .pwho b{font-family:var(--f-num);font-size:18px;color:var(--gold)}
.eye{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px;padding:10px 12px;border-radius:18px;border:1px solid var(--line);background:var(--solid);transition:all .3s;font-weight:700}
.eye:hover{border-color:var(--champ);box-shadow:0 0 0 4px rgba(217,190,138,.18)}
.eye .eyeic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--ink2)}
.eye .eyeic svg{width:22px;height:22px}
.eye.multi .eyeic{background:var(--soft);color:var(--gold);animation:blink 4s ease-in-out infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}
.eye .et{font-size:12px;color:var(--ink2);text-align:center;line-height:1.35}
.sibs{display:flex;gap:4px}
.sib{position:relative;width:28px;height:36px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1.5px var(--line)}
.sib img{width:100%;height:100%;object-fit:cover}
.sib.me{box-shadow:0 0 0 2.5px var(--champ)}
.sib i{position:absolute;inset:0;display:grid;place-items:center}
.sib.ok i{background:rgba(61,114,85,.72);color:#fff}
.sib.ok i svg{width:16px;height:16px}
.sib:not(.ok):not(.me) img{filter:grayscale(.2) opacity(.8)}
.rstrip{display:flex;gap:12px;flex-wrap:wrap;padding:14px 20px;align-items:stretch}
.ri{display:flex;gap:10px;align-items:center;background:var(--sunk);border-radius:16px;padding:8px 12px 8px 8px}
.ri img{width:46px;height:58px;border-radius:10px;object-fit:cover}
.ri .code{font-family:var(--f-num);font-weight:700;font-size:16px;direction:ltr;display:block;color:var(--ship)}
.ri small{display:block;font-weight:600;font-size:13px}
.ck{width:26px;height:26px;accent-color:#C9A467;flex:none}
.bar-s .chip{margin-inline-start:auto}
.bar-s .chip+.btn{margin-inline-start:0}
.eline{border:1px solid var(--line);border-radius:18px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.eline .eh{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.eline .code{font-family:var(--f-num);font-weight:700;font-size:17px;direction:ltr;background:var(--ship-s);color:var(--ship);padding:0 10px;border-radius:8px}
.eline .eg{display:grid;grid-template-columns:2.2fr 1.4fr 1fr .8fr 1fr;gap:8px}
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:16px;background:var(--sunk);cursor:pointer}
.sw-row small{display:block;color:var(--ink3);font-weight:600;font-size:13px}
.switch{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:30px;background:var(--line);position:relative;transition:background .3s;cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:var(--solid);box-shadow:0 2px 6px rgba(0,0,0,.2);transition:inset-inline-start .3s}
.switch:checked{background:#C9A467}
.switch:checked::after{inset-inline-start:25px}
@media (max-width:900px){.pcard{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"img inf tick" "img eye eye"}.pcard .qn{position:absolute;top:8px;inset-inline-start:8px;width:28px;height:28px;font-size:14px;z-index:1}.pcard .pimg{grid-area:img}.pcard .pinf{grid-area:inf}.pcard .tick{grid-area:tick}.pcard .eye{grid-area:eye;flex-direction:row;justify-content:flex-start;min-width:0;padding:8px 10px;flex-wrap:wrap}.eline .eg{grid-template-columns:1fr 1fr}.eline .eg select:first-child{grid-column:1/-1}}
@media (max-width:560px){.pcard{gap:10px;padding:10px}.pimg{width:70px;height:90px}.pcard .tick{width:56px;height:56px}.pinf .code{font-size:17px}}

/* ---- refined Arabic type ---- */
.top h1{font-weight:700;line-height:1.35;letter-spacing:0;font-size:clamp(32px,3.4vw,44px)}
.sec-h h2,.sheet-h h3,.empty b{font-weight:700;line-height:1.4}
.sec-h h2{font-size:24px}
.hello .g{font-weight:700;line-height:1.45;font-size:clamp(26px,2.8vw,34px)}
.pinf .nm,.prow .nm,.piece h3,.model h3,.line .inf b{font-family:var(--f-disp);font-weight:700;font-size:19px;line-height:1.45}
.nav button{font-weight:600;letter-spacing:0}
.btn,.chip,.tag{font-weight:600}
.lede{font-weight:400;line-height:1.85;color:var(--ink2)}
.kpi .lb,.lensum small,.stg .lb{font-weight:600}
.complete .in{font-family:var(--f-disp)}

/* audit page: ✓ with a small "send back" under it */
.aud-act{display:flex;flex-direction:column;align-items:center;gap:8px}
.aud-act .rej{min-height:34px;padding:0 12px;font-size:13px;white-space:nowrap}
.sib.miss img{filter:grayscale(1) opacity(.35)!important}
.sib.miss{box-shadow:0 0 0 1.5px var(--urg-s),0 0 0 3px transparent}
@media (max-width:900px){.pcard .aud-act{grid-area:tick}.pcard .aud-act .tick{width:56px;height:56px}}
/* ---- login & live app extras ---- */
.login{position:fixed;inset:0;display:grid;place-items:center;padding:16px;z-index:60;background:var(--bg)}
.lcard{position:relative;z-index:1;width:min(420px,100%);padding:34px 30px 24px;display:flex;flex-direction:column;gap:16px;text-align:center;background:var(--glass)}
.llogo{width:96px;height:96px;object-fit:contain;margin:0 auto;animation:bloom 1.4s cubic-bezier(.2,.8,.2,1)}
.lwm{font-family:var(--f-num);font-weight:600;font-size:28px;letter-spacing:.24em;padding-inline-start:.24em;color:var(--gold);margin-top:-8px}
.lsub{margin:-10px 0 6px;color:var(--ink2);font-family:var(--f-disp);font-size:19px;font-weight:700}
.lcard .fld{text-align:start}
.lmsg{margin:0;min-height:1.4em;color:var(--urg);font-weight:600}
.lcard .powered{color:var(--ink3)}
.me{display:flex;flex-direction:column;gap:4px;align-items:center;font-weight:600;font-size:13px;color:var(--ink2)}
.me .btn{min-height:38px;font-size:13px}
.offline{position:fixed;top:0;inset-inline:0;z-index:90;background:var(--urg);color:#fff;text-align:center;font-weight:700;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px}
[hidden]{display:none!important}
@media (max-width:820px){.me{display:none}}
.eg-l{font-size:12px;font-weight:600;color:var(--ink3);margin-bottom:-4px}
@media (max-width:900px){.eg-l{display:none}}

/* =====================================================================
   ALKARMEN · light-gold house theme (matches alkarmen.ps)
   Ivory silk ground, champagne gold as the base colour, deep warm ink.
   One deliberate light look on every device, so it is set for all
   colour-scheme states.
   ===================================================================== */
:root,
:root[data-theme="dark"]{
  --bg:#FBF7EF; --glass:rgba(255,253,248,.82); --solid:#FFFDF8; --sunk:#F5EDDD; --line:#EADFC6; --hair:rgba(176,138,62,.42);
  --ink:#2A2318; --ink2:#55493A; --ink3:#857760;
  --gold:#8C6A2B; --champ:#D6BB7F; --gold-lt:#EFE0BD; --gold-xl:#F8F0DE;
  --soft:linear-gradient(135deg,#F8EDD6 0%,#FCF7EC 50%,#F3E4C3 100%);
  --cta:linear-gradient(135deg,#C6A058 0%,#E8D29E 48%,#F3E6C4 60%,#C49B50 100%); --on-cta:#2A1F0C;
  --orb1:#F2E1BB; --orb2:#F6EAD0; --orb3:#EEDCB4;
  --new:#4F5F80; --new-s:#EDF0F6; --prep:#8C5E17; --prep-s:#F8ECD3; --ok:#356A4C; --ok-s:#E6F1E8; --ship:#8C6A2B; --ship-s:#F6ECD5; --urg:#9E3434; --urg-s:#F9E6E2;
  --sh:0 1px 2px rgba(120,90,30,.05),0 14px 34px -18px rgba(120,90,30,.28);
  --sh-up:0 2px 6px rgba(120,90,30,.06),0 30px 60px -26px rgba(120,90,30,.40);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#FBF7EF; --glass:rgba(255,253,248,.82); --solid:#FFFDF8; --sunk:#F5EDDD; --line:#EADFC6; --hair:rgba(176,138,62,.42);
  --ink:#2A2318; --ink2:#55493A; --ink3:#857760;
  --gold:#8C6A2B; --champ:#D6BB7F; --gold-lt:#EFE0BD; --gold-xl:#F8F0DE;
  --soft:linear-gradient(135deg,#F8EDD6 0%,#FCF7EC 50%,#F3E4C3 100%);
  --orb1:#F2E1BB; --orb2:#F6EAD0; --orb3:#EEDCB4;
  --new:#4F5F80; --new-s:#EDF0F6; --prep:#8C5E17; --prep-s:#F8ECD3; --ok:#356A4C; --ok-s:#E6F1E8; --ship:#8C6A2B; --ship-s:#F6ECD5; --urg:#9E3434; --urg-s:#F9E6E2;
  --sh:0 1px 2px rgba(120,90,30,.05),0 14px 34px -18px rgba(120,90,30,.28);
  --sh-up:0 2px 6px rgba(120,90,30,.06),0 30px 60px -26px rgba(120,90,30,.40);
  color-scheme:light}}

/* silk light behind everything */
body{background:var(--bg)}
.orbs i{filter:blur(80px);opacity:.9}
.orbs::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 60% at 85% -10%,rgba(255,255,255,.9),transparent 60%),
  repeating-linear-gradient(115deg,rgba(214,187,127,.06) 0 2px,transparent 2px 22px);pointer-events:none}

/* gold ornament under every page title — the line · heart · line from the store banner */
.top h1::after{content:"";display:block;width:150px;height:12px;margin-top:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 12'%3E%3Cg fill='none' stroke='%23C6A058' stroke-width='1.2'%3E%3Cpath d='M0 6h62M88 6h62'/%3E%3Cpath d='M75 10.2s-5.4-3.2-5.4-6.2a2.7 2.7 0 0 1 5.4-.6 2.7 2.7 0 0 1 5.4.6c0 3-5.4 6.2-5.4 6.2z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right center/contain}
.eyebrow{color:var(--gold);letter-spacing:.34em}

/* rail: ivory-to-champagne column with a gold hairline */
.rail{background:linear-gradient(180deg,#FFFDF8 0%,#FAF2E2 100%);border:1px solid var(--line);box-shadow:var(--sh)}
.brand{border-bottom:0;position:relative}
.brand::after{content:"";position:absolute;bottom:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,var(--champ),transparent)}
.brand .wm{color:var(--gold);font-weight:600}
.nav button{color:var(--ink2)}
.nav button:hover{background:var(--gold-xl);color:var(--ink)}
.nav button[aria-current="page"]{background:linear-gradient(90deg,#F7EBD0,#FBF5E8);color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold-lt),0 8px 20px -14px rgba(140,106,43,.6)}
.nav button[aria-current="page"]::after{content:"";position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:3px;border-radius:3px;background:linear-gradient(180deg,#C6A058,#E8D29E)}
.nav button[aria-current="page"] svg{color:var(--gold)}
.nav button .ct{background:var(--gold-xl);color:var(--gold);border:1px solid var(--gold-lt)}
.nav button[aria-current="page"] .ct{background:var(--cta);color:var(--on-cta);border-color:transparent}
.mode{background:var(--gold-xl);border:1px solid var(--gold-lt)}
.mode button[aria-pressed="true"]{background:var(--solid);color:var(--gold);box-shadow:0 4px 12px -6px rgba(140,106,43,.45)}
.powered b{color:var(--gold)}
.who{border-top-color:var(--gold-lt)}

/* surfaces */
.panel{background:var(--glass);border-color:rgba(234,223,198,.9)}
.panel:hover{border-color:var(--gold-lt)}
.hello{background:
  radial-gradient(80% 140% at 0% 0%,rgba(255,255,255,.85),transparent 55%),
  linear-gradient(120deg,#F6E8C9 0%,#FCF6EA 45%,#F2E0B8 100%);border:1px solid var(--gold-lt)}
.hello::after{content:"";position:absolute;inset:auto -10% -40% 35%;height:120%;background:radial-gradient(closest-side,rgba(255,255,255,.7),transparent);transform:rotate(-12deg);pointer-events:none}
.hello .g span,.hello .big b{color:var(--gold)}
.kpi .v,.lensum b{color:var(--ink)}
.kpi .bar span{background:linear-gradient(90deg,#C6A058,#E8D29E)!important}
.qn,.rank{background:linear-gradient(135deg,#F6E9CC,#FBF4E5);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-lt)}
.pinf .code,.prow .code,.eline .code{background:linear-gradient(135deg,#F6EAD0,#FBF5E7);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-lt)}
.pimg,.piece .ph,.model .ph,.upl .pv{background:linear-gradient(160deg,#FBF4E6,#F1E3C4)}
.eye{border-color:var(--gold-lt);background:var(--solid)}
.eye .eyeic,.eye.multi .eyeic{background:var(--gold-xl);color:var(--gold)}
.eye:hover{border-color:var(--champ);box-shadow:0 0 0 4px rgba(214,187,127,.2)}
.sib.me{box-shadow:0 0 0 2.5px #C6A058}
.tick{box-shadow:0 12px 24px -12px rgba(140,106,43,.75),inset 0 1px 0 rgba(255,255,255,.6)}
.btn{border-color:var(--line)}
.btn:hover{border-color:var(--champ)}
.btn.cta,.done-btn,.tick{background:var(--cta);background-size:220% 100%;color:var(--on-cta)}
.chip[aria-pressed="true"],.seg button[aria-pressed="true"]{background:var(--ink);color:#FBF5E8;border-color:var(--ink)}
.staff .chip i{background:linear-gradient(135deg,#F3E2BC,#FBF4E5);color:var(--gold)}
.search svg{color:var(--gold)}
.search:focus-within,.fld input:focus,.fld select:focus{border-color:var(--champ);box-shadow:0 0 0 4px rgba(214,187,127,.22)}
.ord-h,.oc-h{background:linear-gradient(90deg,rgba(248,237,214,.55),transparent 70%)}
.oc-h .id,.ord-h .id,.shiprow .id,.olist .orow .id,.prog div span:first-child,.pinf .pwho b,.model .code{color:var(--gold)}
.lens .segs i.p{background:linear-gradient(90deg,#C6A058,#E8D29E)}
.olist .mini i.p{background:#D6BB7F}
.totbox{background:linear-gradient(135deg,#F8EDD6,#FCF7EC);border:1px solid var(--gold-lt)}
.empty::before{background:linear-gradient(135deg,#F3E2BC,#FBF4E5);box-shadow:0 0 0 10px rgba(214,187,127,.18)}
.bar-s{border-color:var(--champ);background:rgba(255,253,248,.9)}
.chart .br{fill:url(#gb)}
.hb .tr i{background:linear-gradient(90deg,#C6A058,#E8D29E)}
.burst .ring,.complete .ring{background:var(--cta);box-shadow:0 0 0 12px rgba(214,187,127,.25),0 0 0 26px rgba(214,187,127,.12)}
.toast{border-color:var(--champ)}
.toast::before{background:var(--cta)}
.sheet{border:1px solid var(--gold-lt)}
.sheet-h h3{color:var(--ink)}
.scrim{background:rgba(70,52,20,.22)}
.switch:checked{background:#C6A058}
pre.json{background:var(--gold-xl);border:1px solid var(--gold-lt)}
.mobile-brand span{color:var(--gold)}
.login{background:var(--bg)}
.lcard{border:1px solid var(--gold-lt)}
.lwm{color:var(--gold)}
@media (max-width:820px){.rail{background:rgba(255,253,248,.94);border-color:var(--gold-lt)}.nav button[aria-current="page"]::after{display:none}}
.hello::after{z-index:0}
.hello>*{z-index:1}
.hello p{color:var(--ink2)}