@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Geist:wght@300;400;500;600&display=swap');
:root{
  --bg:#070810;--nav:#0b0d18;--surface:#0f1120;--raised:#141728;--high:#1a1e32;--input:#0d0f1e;
  --amber:#d4a632;--amber2:#f0c040;--amber-pale:rgba(212,166,50,.1);--amber-edge:rgba(212,166,50,.22);--amber-glow:rgba(212,166,50,.05);
  --white:#f4f1eb;--soft:#c8c4ba;--muted:#8891a8;--dim:#4a5068;
  --line:rgba(244,241,235,.07);--line2:rgba(244,241,235,.12);
  --green:#34d399;--green-pale:rgba(52,211,153,.1);--red:#f87171;--red-pale:rgba(248,113,113,.1);--blue:#818cf8;--blue-pale:rgba(129,140,248,.1);
  --font:'Geist',system-ui,sans-serif;--display:'Fraunces',Georgia,serif;
  --r:6px;--rl:12px;--rxl:16px;
  --rail:64px;--panel:220px;--sidebar:284px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:var(--font);font-weight:400;background:var(--bg);color:var(--white);min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);border:none;white-space:nowrap;line-height:1}
.btn-amber{background:var(--amber);color:var(--bg);font-weight:600}
.btn-amber:hover{background:var(--amber2)}
.btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted)}
.btn-ghost:hover{border-color:var(--amber-edge);color:var(--white)}
.btn-danger{background:var(--red-pale);border:1px solid rgba(248,113,113,.3);color:var(--red)}
.btn-danger:hover{background:rgba(248,113,113,.18)}
.btn-green{background:var(--green-pale);border:1px solid rgba(52,211,153,.3);color:var(--green)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-lg{padding:12px 24px;font-size:14px;font-weight:600}
.btn-block{width:100%;justify-content:center}

/* INPUTS */
.form-label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;margin-top:12px}
.form-label:first-child{margin-top:0}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],input[type=number],input[type=search],select,textarea{width:100%;padding:9px 12px;background:var(--input);border:1px solid var(--line);border-radius:var(--r);color:var(--white);font-family:var(--font);font-size:13px;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--amber-edge)}
input::placeholder,textarea::placeholder{color:var(--dim)}
select option{background:var(--nav)}
textarea{resize:vertical;min-height:90px;line-height:1.6}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;margin-bottom:14px}
.card-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.card-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.card-body{padding:16px}

/* STATUS PILLS */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;border:1px solid}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill-green{background:var(--green-pale);border-color:rgba(52,211,153,.3);color:var(--green)}
.pill-amber{background:var(--amber-pale);border-color:var(--amber-edge);color:var(--amber)}
.pill-blue{background:var(--blue-pale);border-color:rgba(129,140,248,.3);color:var(--blue)}
.pill-red{background:var(--red-pale);border-color:rgba(248,113,113,.3);color:var(--red)}
.pill-muted{background:rgba(136,145,168,.08);border-color:rgba(136,145,168,.2);color:var(--muted)}

/* FLASHES */
.flash{padding:12px 16px;border-radius:var(--rl);font-size:13px;margin-bottom:14px}
.flash-ok{background:var(--green-pale);border:1px solid rgba(52,211,153,.25);color:#6ee7b7}
.flash-err{background:var(--red-pale);border:1px solid rgba(248,113,113,.25);color:#fca5a5}
.flash-warn{background:var(--amber-pale);border:1px solid var(--amber-edge);color:var(--amber)}

/* AVATARS */
.av{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.av-amber{background:var(--amber-pale);border:1px solid var(--amber-edge);color:var(--amber)}
.av-blue{background:var(--blue-pale);border:1px solid rgba(129,140,248,.25);color:var(--blue)}
.av-green{background:var(--green-pale);border:1px solid rgba(52,211,153,.25);color:var(--green)}
.av-muted{background:rgba(136,145,168,.1);border:1px solid rgba(136,145,168,.2);color:var(--muted)}

/* MISC */
.ref{font-family:monospace;font-size:10px;color:var(--amber);background:var(--amber-pale);padding:2px 7px;border-radius:4px}
.accent-bar{height:2px;background:linear-gradient(90deg,var(--amber) 0%,transparent 60%);flex-shrink:0}
.divider{height:1px;background:var(--line);margin:14px 0}
.muted{color:var(--muted)}
.text-amber{color:var(--amber)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.num{font-family:var(--display)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* ADMIN LAYOUT */
.icon-rail{width:var(--rail);background:var(--nav);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:14px 0;position:fixed;top:0;left:0;bottom:0;z-index:200}
.rail-logo{width:38px;height:38px;margin-bottom:20px}
.rail-logo img{width:100%;height:100%;object-fit:contain}
.rail-btn{width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;margin-bottom:3px;color:var(--muted);transition:all .15s;position:relative;border:none;background:none}
.rail-btn:hover{background:rgba(255,255,255,.05);color:var(--white)}
.rail-btn.on{background:var(--amber-pale);color:var(--amber)}
.rail-btn .dot{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.rail-sep{width:28px;height:1px;background:var(--line);margin:6px 0}
.rail-bottom{margin-top:auto}
.nav-panel{width:var(--panel);background:var(--nav);border-right:1px solid var(--line);position:fixed;top:0;left:var(--rail);bottom:0;z-index:150;display:flex;flex-direction:column;padding:14px 0}
.np-label{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding:10px 16px 4px}
.np-item{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:13px;color:var(--muted);cursor:pointer;border-radius:var(--r);margin:1px 8px;transition:all .13s}
.np-item:hover{background:rgba(255,255,255,.04);color:var(--white)}
.np-item.on{background:var(--amber-pale);color:var(--amber);font-weight:500}
.np-badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--amber);color:var(--bg);padding:1px 6px;border-radius:999px}
.np-footer{margin-top:auto;padding:12px;border-top:1px solid var(--line)}
.np-user{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--r);cursor:pointer}
.np-user:hover{background:rgba(255,255,255,.04)}
.admin-wrap{display:flex;min-height:100vh}
.admin-topbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(7,8,16,.9);backdrop-filter:blur(16px);position:sticky;top:0;z-index:50;flex-shrink:0}
.bc{display:flex;align-items:center;gap:7px;font-size:13px}
.bc-sep{color:var(--line2)}
.bc-item{color:var(--muted)}
.bc-cur{font-family:var(--display);font-size:15px;font-weight:600;color:var(--white)}
.admin-main{margin-left:var(--sidebar);flex:1;display:flex;flex-direction:column;min-height:100vh}
.admin-body{padding:22px 24px;flex:1}
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:7px 12px;font-size:12px;color:var(--muted);min-width:180px;cursor:text}
.topbar-search:hover{border-color:var(--line2)}
.page-head{margin-bottom:18px}
.page-title{font-family:var(--display);font-size:22px;font-weight:600}
.page-title span{color:var(--amber);font-style:italic}
.page-sub{font-size:13px;color:var(--muted);margin-top:4px}
.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;margin-bottom:20px}
.metric{background:var(--surface);padding:16px 18px;position:relative}
.metric-icon{position:absolute;right:14px;top:14px;font-size:18px;opacity:.12}
.metric-val{font-family:var(--display);font-size:26px;font-weight:700;line-height:1;margin-bottom:5px}
.metric-val.amber{color:var(--amber)}.metric-val.red{color:var(--red)}.metric-val.green{color:var(--green)}
.metric-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.metric-sub{font-size:11px;color:var(--muted);margin-top:4px}

/* TABLE ROWS */
.trow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.trow:hover{background:var(--amber-glow)}
.trow:last-child{border-bottom:none}
.trow-name{font-size:13px;font-weight:500}
.trow-sub{font-size:11px;color:var(--muted);margin-top:2px}
.trow-right{margin-left:auto;text-align:right;flex-shrink:0}

/* CLIENT PORTAL */
.appbar{position:sticky;top:0;z-index:80;background:rgba(52,38,16,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(212,166,50,.3);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.appbar-logo img{width:140px;height:auto}
.client-body{padding:16px 16px calc(76px + env(safe-area-inset-bottom,0px));max-width:680px;margin:0 auto;width:100%}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:100;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:rgba(11,13,24,.96);backdrop-filter:blur(20px);border-top:1px solid var(--line)}
.tabbar-inner{display:flex;gap:4px;max-width:440px;margin:0 auto}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border-radius:var(--r);font-size:10px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.05em;position:relative;text-decoration:none}
.tab-item:hover{background:rgba(255,255,255,.03)}
.tab-item.on{background:var(--amber-pale);color:var(--amber)}
.tab-icon{font-size:17px;line-height:1}
.tab-badge{position:absolute;top:4px;right:calc(50% - 18px);background:var(--amber);color:var(--bg);font-size:9px;font-weight:700;padding:1px 5px;border-radius:999px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.menu-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);padding:16px 14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all .15s;position:relative;text-decoration:none;color:inherit}
.menu-card:hover{border-color:var(--amber-edge);background:var(--raised)}
.menu-card.featured{border-color:var(--amber-edge);background:var(--amber-glow)}
.menu-icon{font-size:22px;line-height:1}
.menu-label{font-size:13px;font-weight:600}
.menu-sub{font-size:11px;color:var(--muted);line-height:1.4}
.menu-badge{position:absolute;top:10px;right:10px;background:var(--amber);color:var(--bg);font-size:9px;font-weight:700;padding:2px 6px;border-radius:999px}
@media(min-width:768px){
  .tabbar{display:none}
  .client-body{padding:24px 28px;max-width:900px}
  .menu-grid{grid-template-columns:repeat(3,1fr)}
  .client-sidebar{width:230px;flex-shrink:0;background:var(--nav);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
}
@media(max-width:900px){.metric-strip{grid-template-columns:1fr 1fr}.admin-main{margin-left:0}.icon-rail,.nav-panel{display:none}}

/* === LEGACY COMPAT === */

/* LEGACY COMPAT - pages transformed from old design */
.admin-body .wrap{max-width:100%}
.admin-body .top,.admin-body .topbar-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.admin-body .note,.admin-body .small,.admin-body .small2{font-size:12px;color:var(--muted)}
.admin-body .muted{color:var(--muted)}
.admin-body label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.admin-body hr,.admin-body hr.sep{height:1px;border:none;background:var(--line);margin:14px 0}
.admin-body table{width:100%;border-collapse:collapse;font-size:13px}
.admin-body th,.admin-body td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.admin-body th{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:var(--raised)}
.admin-body tr:hover td{background:rgba(212,166,50,.03)}
.admin-body .table-wrap,.admin-body .table-scroll{border:1px solid var(--line);border-radius:var(--rl);overflow:hidden}
.admin-body input[type=text],.admin-body input[type=email],.admin-body input[type=date],.admin-body input[type=password],.admin-body input[type=tel],.admin-body input[type=number],.admin-body select,.admin-body textarea{background:var(--input);border:1px solid var(--line);border-radius:var(--r);color:var(--white);padding:9px 12px;font-size:13px;font-family:var(--font);outline:none;width:100%}
.admin-body input:focus,.admin-body select:focus,.admin-body textarea:focus{border-color:var(--amber-edge)}
.admin-body textarea{resize:vertical;line-height:1.6}
.admin-body .searchbox{background:var(--input);border:1px solid var(--line);border-radius:var(--rl);color:var(--white);padding:9px 14px;font-size:13px;font-family:var(--font);outline:none}
.admin-body .searchbox:focus{border-color:var(--amber-edge)}
.admin-body .alert{padding:12px 16px;border-radius:var(--rl);font-size:13px;margin-bottom:14px}
.admin-body .ok,.admin-body .flash-ok,.admin-body .alert.ok{background:var(--green-pale);border:1px solid rgba(52,211,153,.25);color:#6ee7b7}
.admin-body .err,.admin-body .flash-err,.admin-body .alert.err{background:var(--red-pale);border:1px solid rgba(248,113,113,.25);color:#fca5a5}
.admin-body .kv{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.admin-body .k{width:100px;flex-shrink:0;font-size:12px;color:var(--muted)}
.admin-body .v{flex:1;font-size:13px}
.admin-body .divline{height:1px;background:var(--line);margin:12px 0}
.admin-body .client-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);padding:14px;margin-bottom:10px}
.admin-body .client-name{font-weight:600;font-size:14px}
.admin-body .client-sub{font-size:12px;color:var(--muted);margin-top:4px}
.admin-body .client-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.admin-body .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-body a{color:var(--white)}
.admin-body a:hover{color:var(--amber)}