*{box-sizing:border-box}
a{color:var(--blue-lt)}
#vmeter{padding:4px 8px 6px}
main{flex:1;min-width:0;padding:22px 26px;max-width:1150px;display:flex;flex-direction:column}
main>.view-panel{flex:0 0 auto}
main>footer.vs-foot{margin-top:auto}
h1.view{font-family:var(--font-serif);font-size:1.5rem;margin:0 0 4px}
h1.view em{font-style:italic;color:var(--gold-lt)}
p.viewsub{color:var(--dim);font-size:.9rem;margin:0 0 18px}
.card{background:var(--bg1);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.card h3{margin:0 0 10px;font-size:1rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
label{display:block;font-size:12px;color:var(--dim);margin:8px 0 4px}
textarea{background:var(--bg2);border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:8px 10px;font:inherit;width:100%;min-height:64px;resize:vertical}
textarea:focus{outline:none;border-color:var(--blue-lt)}
button.act{background:var(--blue);border:1px solid var(--blue-lt);color:#fff;padding:8px 14px;border-radius:9px;cursor:pointer;font:inherit;font-weight:600;line-height:1.1}
button.act:hover{background:var(--blue-lt);border-color:var(--blue-lt)}
button.act.gold{background:linear-gradient(135deg,var(--gold),var(--gold-lt));border-color:var(--gold-lt);color:#0e1320;font-weight:700}
button.act.ghost{background:rgba(255,255,255,.05);border-color:var(--line2);color:var(--text)}button.act.ghost:hover{background:rgba(255,255,255,.1)}
button.act.gray{background:rgba(255,255,255,.06);border-color:var(--line2);color:var(--text)}button.act.gray:hover{background:rgba(255,255,255,.12)}
button.act.sm{padding:4px 10px;font-size:12px;border-radius:7px}
button.act.red{background:var(--rose);border:1px solid var(--rose-lt);color:#fff}button.act.red:hover{background:var(--rose-lt)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat .v{font-size:1.5rem;font-weight:700}.stat .l{color:var(--dim);font-size:12px}
.stat.warn{border-color:var(--gold)}.stat .v.g{color:var(--gold-lt)}
.badge{display:inline-block;font-size:11px;border-radius:100px;padding:2px 9px;background:var(--bg3);color:var(--dim)}
.muted{color:var(--dim)}
.empty{color:var(--dim);padding:14px 2px;font-size:13px}
.hidden{display:none}
.view-panel{display:none}.view-panel.on{display:block}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.burger{display:none;background:none;border:0;color:var(--text);font-size:20px;cursor:pointer;padding:0 4px}
#scrim{display:none}
@media(max-width:999px){
  .burger{display:inline-flex}
  aside{position:fixed;left:0;top:49px;z-index:40;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.5)}
  aside.open{transform:translateX(0)}
  #scrim.on{display:block;position:fixed;inset:49px 0 0;background:rgba(0,0,0,.5);z-index:35}
  main{max-width:none}
}
@media(max-width:800px){
  main{padding:14px}
  header.topbar{padding:11px 14px}
  header.topbar .tsub,header.topbar .who{display:none}
  .card{padding:15px}
  h1.view{font-size:1.35rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  aside button{padding:9px 10px}
  .card,.item{overflow-wrap:break-word}
}
aside button .n{margin-right:7px}

.grid{display:grid;gap:13px}
.grid.cols3{grid-template-columns:repeat(auto-fit,minmax(240px,320px));justify-content:center}
.chip{display:inline-block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:999px;padding:3px 9px}
.pill{display:inline-block;font-size:.71rem;font-weight:700;border-radius:999px;padding:4px 11px}
.pill.received{background:rgba(122,144,184,.16);color:#aeb9d0}
.pill.in_progress{background:rgba(79,134,247,.16);color:#8fb4fb}
.pill.delivered{background:rgba(251,191,36,.16);color:var(--gold-lt)}
.pill.revision_requested{background:rgba(251,113,133,.16);color:var(--rose-lt)}
.pill.accepted{background:rgba(52,211,153,.16);color:var(--green-lt)}
.pill.declined{background:rgba(251,113,133,.16);color:var(--rose-lt)}
.pill.paid{background:rgba(52,211,153,.14);color:var(--green-lt)}
.pill.due{background:rgba(251,191,36,.14);color:var(--gold-lt)}
.order{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.order .main{flex:1 1 260px;min-width:0}
.order .main h4{font-size:.98rem;color:#fff;font-weight:700;margin:0}
.order .meta{font-size:.79rem;color:var(--dim);margin-top:3px}
.deliv{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.deliv:first-child{border-top:0}
.deliv .dt{flex:1 1 240px;min-width:0}
.deliv .dt h4{font-size:.92rem;color:#fff;font-weight:600;margin:0}
.deliv .dt .sub{font-size:.77rem;color:var(--dim);margin-top:2px}
.desk-h{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin:2px 0 8px}
.card.new{display:flex;flex-direction:column;gap:7px;border-color:var(--line2);transition:border-color .15s ease,transform .15s ease;text-decoration:none}
.card.new:hover{border-color:var(--blue-lt);transform:translateY(-1px)}
.card.new .k{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.card.new h4{font-size:.98rem;color:#fff;margin:0}
.card.new p{font-size:.83rem;color:var(--dim);margin:0}
.card.new .go{margin-top:auto;color:var(--blue-lt);font-weight:700;font-size:.83rem}
.overlay{position:fixed;inset:0;background:rgba(3,5,10,.7);z-index:200;display:none;align-items:flex-end;justify-content:center}
.overlay.open{display:flex}
.sheet{width:100%;max-width:620px;max-height:88vh;background:var(--bg1);border:1px solid var(--line2);border-radius:16px 16px 0 0;display:flex;flex-direction:column}
@media(min-width:640px){.overlay{align-items:center;padding:20px}.sheet{border-radius:16px}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.sheet-h h3{font-size:1rem;color:#fff;margin:0}
.sheet-x{background:transparent;border:0;color:var(--dim);font-size:1.5rem;line-height:1;cursor:pointer}
.thread{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 13px;border-radius:12px;font-size:.89rem;line-height:1.5}
.msg .who{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.msg.customer{align-self:flex-end;background:rgba(26,86,219,.2);border:1px solid rgba(79,134,247,.3)}
.msg.staff{align-self:flex-start;background:var(--bg2);border:1px solid var(--line)}
.composer{border-top:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cta-row{display:flex;gap:8px;flex-wrap:wrap}
.thread.detail{display:block}
.dsec{border-top:1px solid var(--line);padding:14px 0}
.dsec:first-child{border-top:0;padding-top:0}
.dsec h4{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 8px;font-family:var(--font-mono)}
.dkv{display:flex;justify-content:space-between;gap:14px;padding:4px 0;font-size:.86rem}
.dkv .k{color:var(--dim);flex:0 0 auto}
.dkv .v{text-align:right;color:var(--text);min-width:0;overflow-wrap:anywhere}
.dfile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:.86rem}
.dfile:first-child{border-top:0}
.dsec .row{margin-top:6px}
.dcomposer{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.dcomposer textarea{min-height:56px}
input[type=file]{color:var(--dim);font-size:.8rem;background:var(--bg2);border:1px solid var(--line2);border-radius:9px;padding:7px 9px;width:100%}
input[type=file]::file-selector-button{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--text);border-radius:7px;padding:5px 10px;font:inherit;font-size:.78rem;cursor:pointer;margin-right:10px}
.order-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:2px}
.order-head h1{margin:0}
.order-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start;margin:14px 0}
.order-grid .card{margin-bottom:0;height:100%}
.order-chat{display:flex;flex-direction:column;gap:8px}
.order-chat .thread{max-height:320px;padding:0}
.blk-cta{margin-top:12px}