@font-face{font-family:"Oswald";src:url(../assets/fonts/oswald-300.woff2) format("woff2");font-weight:300}
@font-face{font-family:"Oswald";src:url(../assets/fonts/oswald-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Oswald";src:url(../assets/fonts/oswald-600.woff2) format("woff2");font-weight:600}
@font-face{font-family:"Hayyakum";src:url(../assets/fonts/hayyakum-regular.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Hayyakum";src:url(../assets/fonts/hayyakum-medium.woff2) format("woff2");font-weight:500}
:root{color-scheme:dark;--night:#04061A;--panel:#0a0f2e;--panel2:#0f1640;--line:rgba(190,210,255,.14);--light:#EEF2F6;--mist:#AEBBD2;--dim:#6F7FA0;--horizon:#3FE0E8;--hour:#2E62FF;--dusk:#8B5CFF;--venus:#E07BE0;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--night);color:var(--light);font-family:"Oswald","Hayyakum",system-ui,sans-serif;font-size:15px;line-height:1.6}
body{background:radial-gradient(80% 60% at 90% -10%,rgba(46,98,255,.25),transparent 60%),radial-gradient(70% 50% at 0% 110%,rgba(139,92,255,.18),transparent 60%),var(--night);min-height:100vh}
a{color:inherit}
:focus-visible{outline:2px solid var(--horizon);outline-offset:2px}
.muted{color:var(--mist)}.small{font-size:13px}
.btn{font:inherit;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:0;cursor:pointer;color:var(--light);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.primary{background:var(--light);color:var(--night);font-weight:600;box-shadow:0 8px 24px -10px rgba(63,224,232,.6)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 11px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}

.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:min(380px,100%);display:grid;gap:12px;padding:32px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px rgba(0,0,0,.7);text-align:center;justify-items:center}
.login h1{margin:0;font-size:22px}
.login label{justify-self:stretch;text-align:start;font-size:13px;color:var(--mist)}
.login input{justify-self:stretch}
.login .btn{justify-self:stretch;justify-content:center}

.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:20px 14px;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:18px;background:rgba(4,6,26,.6)}
.side .brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.side .brand b{font-family:Oswald,sans-serif;letter-spacing:.24em;font-size:13px}
.side .brand span{color:var(--dim);font-size:12px;margin-inline-start:auto}
#tabs{display:grid;gap:4px}
#tabs button{font:inherit;text-align:start;padding:10px 14px;border-radius:12px;border:0;background:none;color:var(--mist);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
#tabs button:hover{background:rgba(255,255,255,.05);color:var(--light)}
#tabs button[aria-current="true"]{background:rgba(63,224,232,.1);color:var(--light);box-shadow:inset 0 0 0 1px rgba(63,224,232,.35)}
#tabs .count{font-size:12px;background:var(--venus);color:var(--night);border-radius:999px;padding:0 8px;font-weight:600}
.mode{margin-top:auto;font-size:12.5px;color:var(--mist);padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04)}
.mode b{color:var(--light)}
.main{min-width:0}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:14px 24px;background:rgba(4,6,26,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top h2{margin:0;font-size:19px;margin-inline-end:auto}
.state{font-size:13px;color:var(--ok)}
.state.dirty{color:var(--warn)}
.panel{padding:24px;display:grid;gap:18px;max-width:1100px}

.sec{padding:20px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:14px}
.sec>h3{margin:0;font-size:16px;display:flex;align-items:center;gap:10px}
.sec>p.hint{margin:-8px 0 0;font-size:13px;color:var(--dim)}
.field{display:grid;gap:6px}
.field>label{font-size:13px;color:var(--mist)}
.field .hint{font-size:12px;color:var(--dim)}
.bi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bi>div{display:grid;gap:4px}
.bi small{font-size:11px;color:var(--dim);letter-spacing:.08em}
input,textarea,select{font:inherit;width:100%;color:var(--light);background:rgba(4,6,26,.7);border:0;border-radius:10px;padding:9px 12px;box-shadow:inset 0 0 0 1px var(--line);outline:none}
input:focus,textarea:focus,select:focus{box-shadow:inset 0 0 0 1.5px var(--horizon)}
textarea{min-height:76px;resize:vertical;line-height:1.6}
[dir="ltr"]{text-align:left}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:18px;height:18px;accent-color:var(--horizon)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}

.rep{display:grid;gap:10px}
.item{border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--line)}
.item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 14px}
.item>summary::-webkit-details-marker{display:none}
.item>summary b{margin-inline-end:auto;font-weight:500}
.item>summary .chev{transition:transform .2s;color:var(--dim)}
.item[open]>summary .chev{transform:rotate(90deg)}
.item .body{padding:4px 14px 16px;display:grid;gap:12px}
.media{display:flex;gap:10px;align-items:center}
.media .thumb{width:72px;height:44px;border-radius:8px;object-fit:cover;background:#000;flex:0 0 auto}

.orders{display:grid;gap:12px}
.order{padding:16px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:8px}
.order .head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.order .code{font-family:Oswald,sans-serif;letter-spacing:.1em;font-weight:600}
.order .pill{font-size:12px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.order .pill.new{background:var(--venus);color:var(--night)}
.order pre{margin:0;white-space:pre-wrap;font:inherit;color:var(--mist)}
.order select{width:auto}
.empty{padding:40px;text-align:center;color:var(--dim)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:50;padding:11px 18px;border-radius:999px;background:#151c4a;box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.toast.bad{background:#3a1220}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  #tabs{display:flex;flex-wrap:wrap}
  .mode{margin-top:0;width:100%}
  .bi{grid-template-columns:1fr}
  .top{flex-wrap:wrap;padding:12px 16px}
  .panel{padding:16px}
}

/* orders workflow */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kpis>div{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:2px}
.kpis b{font-family:Oswald,sans-serif;font-weight:300;font-size:28px;line-height:1.1}
.kpis span{font-size:12.5px;color:var(--mist)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.order.item>summary{flex-wrap:wrap}
.order .code{font-family:Oswald,sans-serif;letter-spacing:.1em;font-weight:600}
.order .pill{font-size:12px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.order .pill.new{background:var(--venus);color:var(--night)}
.order .pill.awaiting-payment{background:var(--warn);color:var(--night)}
.order .pill.paid,.order .pill.delivered{background:rgba(74,222,128,.2);color:var(--ok)}
.order .pill.cancelled{background:rgba(248,113,113,.15);color:var(--bad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ofields{display:grid;gap:10px;align-content:start}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.replybox{display:grid;gap:8px}
.replybox textarea{min-height:140px}
.order pre{margin:0;white-space:pre-wrap;font:inherit;color:var(--mist)}
@media (max-width:860px){ .grid2{grid-template-columns:1fr} }