:root{
--ink:#0d0d0e;--ink2:#141416;--ink3:#1c1c1f;--line:#2a2a2e;
--cream:#f6f4ee;--fg:#d7d4cd;--fg2:#9c998f;--fg3:#8a8880;
--gold:#c19a3e;--gold-bg:rgba(193,154,62,.1);
--grn:#3bb45f;--grn-bg:rgba(59,180,95,.12);--red:#d9534f;--red-bg:rgba(217,83,79,.12);
--f:'Outfit',-apple-system,sans-serif;--m:'JetBrains Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--f);background:var(--ink);color:var(--fg);-webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}
a{color:var(--gold);text-decoration:none}
.mono{font-family:var(--m)}
/* top bar */
.pnav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.6rem;background:rgba(13,13,14,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pnav .brand{font-weight:800;letter-spacing:.14em;color:var(--cream);font-size:.9rem}
.pnav .who{display:flex;align-items:center;gap:1rem;font-size:.76rem;color:var(--fg2)}
.pnav .who b{color:var(--cream);font-weight:600}
.tag{font-family:var(--m);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:2px;padding:.15rem .45rem}
.wrap{max-width:1080px;margin:0 auto;padding:2.4rem 1.6rem 4rem}
h1.page{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;color:var(--cream);margin-bottom:.3rem}
.sub{color:var(--fg2);font-size:.86rem;margin-bottom:2rem}
/* cards / panels */
.panel{background:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:1.6rem;margin-bottom:1.2rem}
.panel h2{font-size:1rem;font-weight:700;color:var(--cream);margin-bottom:1rem;letter-spacing:-.01em}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.2rem}
.stat{background:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:1.3rem}
.stat .n{font-family:var(--m);font-size:1.7rem;font-weight:600;color:var(--cream)}
.stat .l{font-size:.68rem;color:var(--fg2);margin-top:.2rem;text-transform:uppercase;letter-spacing:.06em}
.stat .n.gold{color:var(--gold)}.stat .n.grn{color:var(--grn)}
/* tables */
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{text-align:left;font-family:var(--m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);padding:.6rem .7rem;border-bottom:1px solid var(--line);font-weight:500}
td{padding:.7rem .7rem;border-bottom:1px solid var(--line);color:var(--fg)}
tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto}
.badge{display:inline-block;font-family:var(--m);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;padding:.15rem .45rem;border-radius:2px;border:1px solid var(--line)}
.badge.paid{color:var(--grn);border-color:rgba(59,180,95,.4);background:var(--grn-bg)}
.badge.pending{color:var(--gold);border-color:rgba(193,154,62,.4);background:var(--gold-bg)}
.badge.shipped{color:#6ab0ff33}
.badge.cancelled{color:var(--fg3)}
.empty{text-align:center;color:var(--fg2);padding:2.5rem 1rem;font-size:.85rem}
/* forms */
label{display:block;font-size:.72rem;color:var(--fg2);margin-bottom:.35rem;letter-spacing:.02em}
input,select,textarea{width:100%;padding:.7rem .85rem;background:var(--ink);border:1px solid var(--line);border-radius:4px;color:var(--cream);font-family:var(--f);font-size:.9rem;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold)}
.field{margin-bottom:1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:linear-gradient(180deg,#cca244,#b48c32);color:var(--ink);border:0;border-radius:4px;padding:.75rem 1.4rem;font-weight:700;font-size:.85rem;cursor:pointer;font-family:var(--f);transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--cream)}
.btn.ghost:hover{border-color:var(--gold);transform:none}
.btn.sm{padding:.45rem .8rem;font-size:.74rem}
.btn.wa{background:#25d366}
.msg{padding:.7rem .9rem;border-radius:4px;font-size:.8rem;margin-bottom:1rem;display:none}
.msg.show{display:block}
.msg.err{background:var(--red-bg);color:#f0a6a3;border:1px solid rgba(217,83,79,.3)}
.msg.ok{background:var(--grn-bg);color:#8fe0a6;border:1px solid rgba(59,180,95,.3)}
.link-btn{background:none;border:0;color:var(--gold);cursor:pointer;font-size:.78rem;font-family:var(--f);text-decoration:underline}
/* login */
.login-wrap{max-width:400px;margin:0 auto;padding:6rem 1.6rem}
.login-brand{text-align:center;font-weight:800;letter-spacing:.16em;color:var(--cream);margin-bottom:.4rem}
.login-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;justify-content:center}
.login-tabs button{background:none;border:0;color:var(--fg2);font-family:var(--m);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:.3rem 0;border-bottom:2px solid transparent}
.login-tabs button.on{color:var(--gold);border-bottom-color:var(--gold)}
.muted{color:var(--fg3);font-size:.72rem;text-align:center;margin-top:1.2rem}
.copyfield{display:flex;gap:.5rem;align-items:center}
.copyfield input{font-family:var(--m);font-size:.82rem}
@media(max-width:560px){.row2{grid-template-columns:1fr}.wrap{padding:1.6rem 1rem 3rem}}