@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #10171a;
  --panel: #172024;
  --panel-2: #1d282d;
  --line: #2a373c;
  --petrol: #1f8a8f;
  --petrol-light: #52c7c2;
  --brass: #c9a227;
  --rust: #c1573f;
  --text: #ece8df;
  --text-dim: #94a3a0;
  --text-faint: #5f716e;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: radial-gradient(1200px 600px at 15% -10%, rgba(31,138,143,0.08), transparent 60%), var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  min-height:100vh;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
.display{ font-family:'Fraunces', serif; }
a{ color:inherit; }

.app{ display:flex; min-height:100vh; }

/* Sidebar */
aside{
  width:230px; min-width:230px; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:28px 20px; position:sticky; top:0; height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.brand svg{ width:26px; height:26px; }
.brand-name{ font-family:'Fraunces', serif; font-size:20px; font-weight:600; letter-spacing:0.3px; }
.brand-sub{ font-size:11px; color:var(--text-faint); margin-bottom:34px; letter-spacing:0.5px; text-transform:uppercase; }
nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.navitem{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px;
  color:var(--text-dim); font-size:14px; font-weight:500; text-decoration:none;
  cursor:pointer; transition:.15s; border:1px solid transparent;
}
.navitem svg{ width:17px; height:17px; opacity:.85; flex-shrink:0; }
.navitem:hover{ background:var(--panel-2); color:var(--text); }
.navitem.active{
  background:linear-gradient(90deg, rgba(31,138,143,0.18), rgba(31,138,143,0.03));
  border-color:rgba(31,138,143,0.35); color:var(--petrol-light);
}
.sidebar-foot{ font-size:11px; color:var(--text-faint); padding-top:16px; border-top:1px solid var(--line); }

/* Main */
main{ flex:1; padding:36px 44px; max-width:1180px; }
.pagehead{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; flex-wrap:wrap; gap:12px;}
.pagehead h1{ font-family:'Fraunces', serif; font-size:30px; font-weight:500; }
.pagehead p{ color:var(--text-dim); font-size:14px; margin-top:4px; }

.btn{
  background:var(--petrol); color:#0b1416; border:none; padding:10px 18px; border-radius:8px;
  font-weight:600; font-size:13px; cursor:pointer; transition:.15s; text-decoration:none; display:inline-block;
}
.btn:hover{ background:var(--petrol-light); }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--text-dim); }
.btn.ghost:hover{ border-color:var(--petrol); color:var(--petrol-light); }
.btn.danger{ background:var(--rust); color:#fff; }
.btn.small{ padding:6px 12px; font-size:12px; }

.grid{ display:grid; gap:16px; }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width: 900px){ .grid.cols-4, .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr 1fr; } }

.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }
.card .label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); margin-bottom:8px; }
.card .value{ font-family:'IBM Plex Mono', monospace; font-size:26px; font-weight:600; }
.card .delta{ font-size:12px; margin-top:6px; }
.delta.up{ color:var(--petrol-light); }
.delta.down{ color:var(--rust); }

table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); padding:10px 14px; border-bottom:1px solid var(--line); font-weight:600;}
td{ padding:13px 14px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:middle;}
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:rgba(255,255,255,0.015); }
.num{ font-family:'IBM Plex Mono', monospace; text-align:right; }
.tag{ display:inline-block; font-size:11px; padding:3px 9px; border-radius:20px; background:var(--panel-2); color:var(--text-dim); border:1px solid var(--line);}
.tag.petrol{ color:var(--petrol-light); border-color:rgba(82,199,194,0.35); background:rgba(82,199,194,0.08);}
.tag.rust{ color:#f0a48f; border-color:rgba(193,87,63,0.35); background:rgba(193,87,63,0.1);}

section.block{ margin-bottom:32px; }
section.block h2{ font-family:'Fraunces',serif; font-size:18px; font-weight:500; margin-bottom:14px; color:var(--text); }

.glasses-row{ display:flex; gap:28px; align-items:flex-end; padding:30px 10px 10px; overflow-x:auto; }
.glass-wrap{ display:flex; flex-direction:column; align-items:center; width:130px; flex-shrink:0; }
.glass-rank{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint); margin-bottom:8px; }
.glass-svg{ width:92px; height:150px; }
.glass-name{ margin-top:12px; font-size:13px; font-weight:600; text-align:center; }
.glass-amt{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); margin-top:3px; }
.glass-pct{ font-size:11px; margin-top:2px; }
.glass-pct.full{ color:var(--brass); font-weight:600; }
.pour{ position:relative; width:28px; height:150px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:34px; }
.pour svg{ width:100%; height:100%; }

.liquid-note{
  display:flex; gap:10px; align-items:center; margin-top:22px; padding:14px 16px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; font-size:13px; color:var(--text-dim);
}
.liquid-note b{ color:var(--text); }

.acct-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px;
  display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
}
.acct-card::before{ content:""; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--accent, var(--petrol)); }
.acct-top{ display:flex; justify-content:space-between; align-items:center; gap:8px;}
.acct-name{ font-weight:600; font-size:15px; }
.acct-type{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; }
.acct-balance{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; margin-top:4px; }
.acct-actions{ display:flex; gap:10px; margin-top:6px; font-size:12px; }
.acct-actions a{ color:var(--text-faint); text-decoration:none; }
.acct-actions a:hover{ color:var(--petrol-light); }

.flowbox{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:26px; }
.flow-node{ display:inline-flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line); padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.flow-row{ display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap; }
.flow-row:last-child{ border-bottom:none; }
.flow-arrow{ color:var(--petrol-light); font-family:'IBM Plex Mono',monospace; font-size:13px; display:flex; align-items:center; gap:6px;}
.flow-meta{ margin-left:auto; display:flex; gap:14px; align-items:center; font-size:12px; color:var(--text-dim); }

.barchart{ display:flex; align-items:flex-end; gap:14px; height:190px; padding:10px 6px 0; }
.bargroup{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.bars{ display:flex; gap:4px; align-items:flex-end; height:150px; }
.bar{ width:16px; border-radius:3px 3px 0 0; }
.bar.in{ background:linear-gradient(180deg, var(--petrol-light), var(--petrol)); }
.bar.out{ background:linear-gradient(180deg, #d98a6f, var(--rust)); }
.bargroup .lbl{ font-size:11px; color:var(--text-faint); margin-top:4px; }
.legend{ display:flex; gap:18px; font-size:12px; color:var(--text-dim); margin-top:6px; }
.legend span{ display:flex; align-items:center; gap:6px; }
.dot{ width:9px; height:9px; border-radius:50%; }
.sparkline{ width:100%; height:70px; }

.formgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:end; }
@media (max-width: 900px){ .formgrid{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
.field input, .field select{
  width:100%; padding:10px 11px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; color:var(--text); font-size:14px; font-family:'Inter',sans-serif;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--petrol); }

.msg{ padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:20px; }
.msg.ok{ background:rgba(82,199,194,0.1); border:1px solid rgba(82,199,194,0.3); color:var(--petrol-light); }
.msg.err{ background:rgba(193,87,63,0.1); border:1px solid rgba(193,87,63,0.3); color:#f0a48f; }

footer.note{ margin-top:40px; font-size:12px; color:var(--text-faint); text-align:center; padding-bottom:20px;}

/* Login */
.login-wrap{ min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center; }
.login-box{ width:360px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:34px 30px; box-shadow:0 20px 60px rgba(0,0,0,0.35); }
.field{ margin-bottom:16px; }
.pw-rules{ display:flex; flex-direction:column; gap:5px; margin-top:2px; margin-bottom:4px; }
.pw-rules .rule{ font-size:12px; color:var(--text-faint); display:flex; align-items:center; gap:8px; transition:.15s; }
.pw-rules .rule .dot{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex-shrink:0; }
.pw-rules .rule.ok{ color:var(--petrol-light); }
.pw-rules .rule.ok .dot{ background:var(--petrol-light); }
.login-foot{ margin-top:18px; font-size:11px; color:var(--text-faint); text-align:center; }