/* SpaceyDevs client area - same look as the website */
:root{--bg:#0f0b1c;--surface:#1a1430;--surface2:#211a3b;--border:#2e2550;--text:#f3effc;--muted:#a79fc4;--purple:#8b5cf6;--purple-d:#7c3aed;--purple-b:#a78bfa;--tint:rgba(139,92,246,.14);--ok:#34d399;--warn:#fbbf24;--bad:#f87171;--r:16px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font:15px/1.6 'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(1100px 520px at 75% -8%,rgba(139,92,246,.2),transparent 70%),radial-gradient(800px 420px at -5% 30%,rgba(236,72,153,.07),transparent 70%),var(--bg);background-attachment:fixed}
a{color:var(--purple-b);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Manrope',sans-serif;margin:0;line-height:1.2}
button,input,textarea,select{font:inherit;color:inherit}
.hide{display:none!important}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
/* sidebar (same idea as the admin panel) */
.layout{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 14px;background:rgba(15,11,28,.9);border-right:1px solid var(--border);overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;font:800 17px 'Manrope',sans-serif;color:var(--text)}.brand:hover{text-decoration:none}
.brand img{width:32px;height:32px;border-radius:50%}
.brand small{display:block;font:600 11px 'Inter',sans-serif;color:var(--muted);margin-top:1px}
.snav{display:flex;flex-direction:column;gap:2px;flex:1}
.grp{margin:16px 10px 6px;font:700 11px 'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6f6790}.grp:first-child{margin-top:4px}
.snav a.it{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px}
.snav a.it svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snav a.it:hover{background:var(--tint);color:var(--text);text-decoration:none}.snav a.it.on{background:var(--tint);color:#fff}
.snav a.it .dot{margin-left:auto}
.snav a.ord{display:flex;align-items:center;gap:9px;padding:7px 12px 7px 14px;border-radius:9px;color:var(--muted);font-size:13.5px}
.snav a.ord:hover{background:var(--tint);color:var(--text);text-decoration:none}.snav a.ord.on{background:var(--tint);color:#fff}
.snav a.ord i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--purple)}.snav a.ord span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snav a.ord i.new{background:#60a5fa}.snav a.ord i.awaiting_payment{background:var(--warn)}.snav a.ord i.in_review{background:#f472b6}.snav a.ord i.completed{background:var(--ok)}.snav a.ord i.cancelled{background:#94a3b8}
.snav .more{padding:5px 14px;font-size:12.5px;color:var(--muted)}
.sfoot{margin-top:14px;display:grid;gap:8px}
.sfoot .ext{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;color:var(--muted);font-size:13px;border-radius:10px}.sfoot .ext:hover{background:var(--tint);color:var(--text);text-decoration:none}.sfoot .ext svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.ucard{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.ucard img,.ucard .av{width:34px;height:34px;border-radius:50%;background:var(--surface2);object-fit:cover;flex:none}
.ucard b{display:block;font-size:13.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.ucard button{background:none;border:0;padding:0;color:var(--muted);font-size:12.5px;cursor:pointer}.ucard button:hover{color:#fff;text-decoration:underline}
.av{width:30px;height:30px;border-radius:50%;background:var(--surface2);object-fit:cover}
.mbar{display:none}.scrim{display:none}
.main{min-width:0;padding:34px 34px 70px;max-width:1180px;width:100%}
.link-btn{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px 8px;border-radius:8px}.link-btn:hover{color:#fff;background:var(--tint)}
.dot{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--purple);color:#fff;font-size:11px;font-weight:700}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:28px;letter-spacing:-.02em}.page-head p{margin:4px 0 0;color:var(--muted)}
/* buttons + fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;font-size:14px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--purple);text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.p{background:var(--purple);border-color:var(--purple);color:#fff}.btn.p:hover{background:var(--purple-d)}
.btn.danger{color:var(--bad);border-color:rgba(248,113,113,.4)}.btn.danger:hover{background:rgba(248,113,113,.1);border-color:var(--bad)}
.btn.sm{padding:7px 14px;font-size:13px}
label.f{display:block;margin-bottom:16px}.f>span{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}.f>span i{font-weight:400;opacity:.8}
input[type=text],textarea,select{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);outline:none;transition:.15s}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.2)}
textarea{resize:vertical;min-height:90px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px}
.muted{color:var(--muted)}.small{font-size:13px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:700;background:var(--tint);color:var(--purple-b);white-space:nowrap}
.chip.new{background:rgba(96,165,250,.15);color:#93c5fd}.chip.awaiting_payment{background:rgba(251,191,36,.15);color:var(--warn)}
.chip.in_progress{background:var(--tint);color:var(--purple-b)}.chip.in_review{background:rgba(236,72,153,.15);color:#f9a8d4}
.chip.completed,.chip.paid,.chip.cust{background:rgba(52,211,153,.15);color:var(--ok)}.chip.cancelled{background:rgba(148,163,184,.15);color:#94a3b8}
/* order list */
.list{display:grid;gap:12px}
.order{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);color:var(--text);transition:.15s}
.order:hover{border-color:var(--purple);transform:translateY(-1px);text-decoration:none}
.order .t{flex:1;min-width:0}.order .t b{display:block;font:700 16px 'Manrope',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.order .t span{font-size:13px;color:var(--muted)}
.empty{text-align:center;padding:54px 20px;border:1px dashed var(--border);border-radius:var(--r);color:var(--muted)}.empty h3{color:var(--text);margin-bottom:6px}
/* new order */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.types label{cursor:pointer}.types input{position:absolute;opacity:0}
.types div{padding:14px 10px;text-align:center;border-radius:14px;border:1px solid var(--border);background:var(--bg);font-weight:600;font-size:14px;transition:.15s}
.types input:checked+div{border-color:var(--purple);background:var(--tint);color:#fff}.types input:focus-visible+div{outline:2px solid var(--purple-b)}
.files{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.fchip{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--border);font-size:13px;max-width:240px}
.fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fchip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
.err{margin:0 0 14px;padding:11px 14px;border-radius:12px;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.35);color:#fca5a5;font-size:14px}
.note{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:var(--tint);border:1px solid rgba(139,92,246,.3);font-size:14px}
/* order page */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.chat{display:flex;flex-direction:column;height:calc(100vh - 230px);min-height:480px;padding:0;overflow:hidden}
.msgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.m{display:flex;gap:10px;max-width:86%}.m.client{align-self:flex-end;flex-direction:row-reverse}
.m .b{padding:10px 14px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);overflow-wrap:anywhere}
.m.client .b{background:var(--purple-d);border-color:var(--purple)}.m .who{font-size:12px;color:var(--muted);margin:0 4px 3px}.m.client .who{text-align:right}
.m .av{flex:none;width:32px;height:32px;align-self:flex-end}
.sys{align-self:center;font-size:12px;color:var(--muted);padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.05)}
.m .b a{color:#fff;text-decoration:underline}
.att{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.att img{max-width:260px;max-height:200px;border-radius:10px;display:block;border:1px solid rgba(255,255,255,.12)}
.att a.file{display:inline-flex;gap:6px;padding:6px 12px;border-radius:10px;background:rgba(0,0,0,.25);text-decoration:none;font-size:13px}
.composer{border-top:1px solid var(--border);padding:14px;background:var(--surface)}
.composer textarea{min-height:46px;max-height:160px;resize:none}
.composer .row{display:flex;gap:10px;align-items:flex-end}
.composer .row textarea{flex:1}
.closed{padding:16px 20px;text-align:center;color:var(--muted);border-top:1px solid var(--border);background:var(--surface)}
.oside h3{font-size:15px;margin-bottom:12px}.oside dl{margin:0;display:grid;gap:12px}.oside dt{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.oside dd{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}.steps li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.steps li i{width:12px;height:12px;border-radius:50%;border:2px solid var(--border);flex:none}.steps li.done{color:var(--text)}.steps li.done i{background:var(--purple);border-color:var(--purple)}.steps li.now{color:#fff;font-weight:700}.steps li.now i{box-shadow:0 0 0 4px rgba(139,92,246,.3)}
/* downloads */
.dls{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.dl{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.dl .img{aspect-ratio:2/1;background:var(--surface2) center/cover}.dl.locked .img{filter:grayscale(.7) brightness(.55)}
.dl .bd{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}.dl h3{font-size:16px}.dl p{margin:0;font-size:13.5px;color:var(--muted);flex:1}
.dl .ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* account */
.acct{display:grid;gap:18px;max-width:720px}.acct h2{font-size:18px;margin-bottom:6px}.acct .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;align-items:center}
.profile{display:flex;gap:16px;align-items:center}.profile img,.profile .av{width:64px;height:64px}
.switch{display:flex;gap:12px;align-items:flex-start;cursor:pointer}.switch input{accent-color:var(--purple);width:18px;height:18px;margin-top:3px}
/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login .card{max-width:420px;text-align:center;padding:38px 30px}.login img.logo{width:64px;height:64px;border-radius:50%;margin-bottom:14px}.login h1{font-size:26px;margin-bottom:8px}.login p{color:var(--muted);margin:0 0 22px}
.login ul{list-style:none;margin:0 0 24px;padding:0;text-align:left;display:grid;gap:8px;font-size:14px;color:var(--muted)}.login li::before{content:'✓';color:var(--ok);font-weight:700;margin-right:10px}
.dbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border-radius:12px;background:#5865f2;color:#fff;font-weight:700;border:0;cursor:pointer}.dbtn:hover{background:#4752c4;text-decoration:none}
.foot{margin-top:46px;text-align:center;font-size:13px;color:var(--muted)}
/* dialog + toast */
.ov{position:fixed;inset:0;z-index:80;background:rgba(5,3,12,.7);display:grid;place-items:center;padding:20px}
.dlg{max-width:440px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px}.dlg h2{font-size:20px;margin-bottom:8px}.dlg p{color:var(--muted);margin:0 0 16px}.dlg .row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:grid;gap:8px}
.toast{padding:11px 18px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4)}.toast.bad{border-color:var(--bad);color:#fca5a5}.toast.ok{border-color:var(--ok)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--purple);animation:sp .8s linear infinite;margin:60px auto}@keyframes sp{to{transform:rotate(360deg)}}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .mbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;padding:10px 16px;background:rgba(15,11,28,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
  .mbar .brand{padding:0;flex:1}.mbar button{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:40px;height:40px;color:var(--text);font-size:20px;cursor:pointer}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:60;width:272px;background:#0f0b1c;transform:translateX(-102%);transition:transform .22s ease;box-shadow:20px 0 60px rgba(0,0,0,.5)}
  .side.open{transform:none}.scrim.open{display:block;position:fixed;inset:0;z-index:55;background:rgba(5,3,12,.6)}
  .main{padding:22px 16px 60px}
  .cols{grid-template-columns:1fr}.chat{height:70vh}.types{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.m{max-width:94%}
}