/* =====================================================================
   MTF · MasterTheFinance — shared design system
   A private-bank-meets-terminal command center.
   Tokens → atmosphere → typography → shell → components → motion.
   ===================================================================== */

:root{
  /* ---- canvas / surfaces (near-black navy, layered) ---- */
  --bg:        #070A12;
  --bg-2:      #090D18;
  --surface:   #0E1320;
  --surface-2: #131A2B;
  --float:     #182138;
  --hair:      rgba(214,177,90,0.14);   /* gold hairline */
  --hair-soft: rgba(231,233,238,0.07);
  --line:      rgba(231,233,238,0.10);

  /* ---- ink ---- */
  --ink:       #ECEAE1;
  --ink-2:     #AEB4C4;
  --dim:       #7A8197;
  --faint:     #525a70;

  /* ---- accents ---- */
  --gold:      #E3C16B;
  --gold-2:    #C99B3E;
  --gold-deep: #8a6a23;
  --emerald:   #34D399;
  --emerald-d: #0f8f64;
  --blue:      #5AA6FF;
  --blue-d:    #2f6bd6;
  --red:       #F0666B;
  --amber:     #F2B65A;

  /* ---- type ---- */
  --display: "Fraunces", "Times New Roman", serif;
  --sans:    "Manrope", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- geometry ---- */
  --r:    14px;
  --r-lg: 22px;
  --r-sm: 9px;
  --maxw: 1240px;

  /* ---- shadows (tinted, layered) ---- */
  --sh-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px -18px rgba(0,0,0,0.9);
  --sh-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -30px rgba(0,0,0,0.95);
  --glow-gold: 0 0 0 1px rgba(227,193,107,0.22), 0 18px 50px -24px rgba(227,193,107,0.30);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  letter-spacing:0.1px;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
/* atmosphere — gradient mesh + grain */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(227,193,107,0.10), transparent 60%),
    radial-gradient(800px 560px at 100% 0%, rgba(90,166,255,0.09), transparent 55%),
    radial-gradient(900px 700px at 80% 110%, rgba(52,211,153,0.07), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-0.01em; line-height:1.08 }
.display{ font-family:var(--display) }
.serif{ font-family:var(--display) }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-0.02em }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold) }
.muted{ color:var(--dim) }
.dim{ color:var(--ink-2) }
a{ color:var(--blue); text-decoration:none }
a:hover{ color:#8fc1ff }
.gold{ color:var(--gold) } .emerald{ color:var(--emerald) } .blue{ color:var(--blue) }
.red{ color:var(--red) } .amber{ color:var(--amber) }
.gradient-text{
  background:linear-gradient(100deg,#fff 6%, var(--gold) 48%, var(--gold-2) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- app shell (dashboard pages) ---------- */
.shell{ display:grid; grid-template-columns:248px 1fr; min-height:100vh }
.sidebar{
  position:sticky; top:0; height:100vh; padding:22px 16px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(14,19,32,0.9), rgba(7,10,18,0.92));
  backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:6px;
}
.brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 16px; }
.brand .mark{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--display); font-weight:600; color:#1a1206;
  background:linear-gradient(150deg, var(--gold), var(--gold-2));
  box-shadow:0 6px 18px -8px rgba(227,193,107,0.6);
}
.brand b{ font-family:var(--display); font-size:18px; letter-spacing:-0.02em }
.brand span{ color:var(--dim); font-size:11px; font-family:var(--mono); letter-spacing:0.1em }
.side-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:14px; font-weight:500; transition:.18s ease;
}
.side-nav a .i{ width:18px; text-align:center; opacity:.85 }
.side-nav a:hover{ background:var(--surface); color:var(--ink) }
.side-nav a.active{
  color:var(--ink); background:linear-gradient(100deg, rgba(227,193,107,0.14), rgba(227,193,107,0.04));
  box-shadow:inset 0 0 0 1px var(--hair);
}
.side-nav a.active .i{ opacity:1; color:var(--gold) }
.side-foot{ margin-top:auto; padding:12px 8px; border-top:1px solid var(--line) }

.main{ min-width:0; display:flex; flex-direction:column }
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:16px 28px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(9,13,24,0.92), rgba(9,13,24,0.7)); backdrop-filter:blur(10px);
}
.topbar h1{ font-size:22px } .topbar .sub{ color:var(--dim); font-size:13px }
.spacer{ flex:1 }
.container{ padding:26px 28px 60px; max-width:1180px; width:100%; margin:0 auto }
@media(max-width:880px){
  .shell{ grid-template-columns:1fr }
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-105%); z-index:80; width:248px; transition:.25s }
  .sidebar.open{ transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.55) }
  .container{ padding:18px 16px 60px }
  .topbar{ padding:14px 16px }
}

/* ---------- cards / panels ---------- */
.card{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); padding:20px;
  box-shadow:var(--sh-1); position:relative;
}
.card.lg{ border-radius:var(--r-lg); padding:26px }
.card.gold{ border-color:var(--hair); box-shadow:var(--glow-gold) }
.panel-h{ display:flex; align-items:center; gap:10px; margin-bottom:14px }
.panel-h h3{ font-size:16px } .panel-h .eyebrow{ margin-bottom:2px }
.grid{ display:grid; gap:16px }
.cols-2{ grid-template-columns:repeat(2,1fr) }
.cols-3{ grid-template-columns:repeat(3,1fr) }
.cols-4{ grid-template-columns:repeat(4,1fr) }
@media(max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr } }

/* ---------- KPI ---------- */
.kpi{ display:flex; flex-direction:column; gap:6px }
.kpi .k-lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--dim) }
.kpi .k-val{ font-family:var(--mono); font-size:28px; font-weight:600; letter-spacing:-0.03em }
.kpi .k-sub{ font-size:12.5px; color:var(--ink-2) }
.kpi .k-val.sm{ font-size:22px }

/* ---------- pills / badges ---------- */
.pill,.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:999px; font-family:var(--mono); letter-spacing:0.04em }
.badge{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line) }
.badge.good{ color:var(--emerald); background:rgba(52,211,153,0.10); border-color:rgba(52,211,153,0.22) }
.badge.warn{ color:var(--amber); background:rgba(242,182,90,0.10); border-color:rgba(242,182,90,0.22) }
.badge.bad{ color:var(--red); background:rgba(240,102,107,0.10); border-color:rgba(240,102,107,0.24) }
.badge.info{ color:var(--blue); background:rgba(90,166,255,0.10); border-color:rgba(90,166,255,0.22) }
.badge.gold{ color:var(--gold); background:rgba(227,193,107,0.10); border-color:var(--hair) }

/* ---------- progress bars ---------- */
.bar{ height:9px; border-radius:999px; background:rgba(255,255,255,0.06); overflow:hidden; position:relative }
.bar-fill{ height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg, var(--gold-2), var(--gold)); transition:width .7s cubic-bezier(.2,.8,.2,1) }
.bar-fill.emerald{ background:linear-gradient(90deg, var(--emerald-d), var(--emerald)) }
.bar-fill.blue{ background:linear-gradient(90deg, var(--blue-d), var(--blue)) }
.bar-fill.red{ background:linear-gradient(90deg,#9b3338, var(--red)) }
.bar-fill.amber{ background:linear-gradient(90deg,#9a6a1f, var(--amber)) }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:14px; padding:11px 18px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease; user-select:none }
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
.btn-gold{ background:linear-gradient(140deg, var(--gold), var(--gold-2)); color:#1a1206; border-color:transparent;
  box-shadow:0 12px 28px -14px rgba(227,193,107,0.7) }
.btn-gold:hover{ box-shadow:0 16px 34px -14px rgba(227,193,107,0.85) }
.btn-emerald{ background:linear-gradient(140deg, var(--emerald), var(--emerald-d)); color:#04130d; border-color:transparent }
.btn-ghost{ background:transparent }
.btn-ghost:hover{ background:var(--surface) }
.btn-sm{ padding:8px 13px; font-size:13px; border-radius:9px }
.btn-block{ width:100% }
.btn[disabled]{ opacity:.5; pointer-events:none }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px }
.field label{ font-size:12.5px; color:var(--ink-2); font-weight:600 }
.field .hint{ font-size:11.5px; color:var(--dim) }
input,select,textarea{ font-family:var(--sans); font-size:14.5px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:11px 13px; width:100%;
  transition:.18s ease }
input::placeholder,textarea::placeholder{ color:var(--faint) }
input:focus,select:focus,textarea:focus{ outline:none; border-color:rgba(227,193,107,0.5);
  box-shadow:0 0 0 3px rgba(227,193,107,0.12) }
input.num,.amount-in{ font-family:var(--mono) }
textarea{ resize:vertical; min-height:84px; line-height:1.5 }
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8197' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px }

/* segmented control */
.seg{ display:inline-flex; padding:4px; gap:4px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; flex-wrap:wrap }
.seg button{ border:none; background:transparent; color:var(--ink-2); font-family:var(--sans); font-weight:600;
  font-size:13px; padding:8px 14px; border-radius:9px; cursor:pointer; transition:.16s }
.seg button.on{ background:linear-gradient(120deg, rgba(227,193,107,0.18), rgba(227,193,107,0.05)); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair) }

/* range slider */
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; padding:0; border:none; border-radius:999px;
  background:rgba(255,255,255,0.08) }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(145deg, var(--gold), var(--gold-2)); cursor:pointer; box-shadow:0 4px 12px -3px rgba(227,193,107,.7); border:2px solid #120d05 }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--gold); cursor:pointer; border:2px solid #120d05 }

/* ---------- table ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:14px }
.tbl th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--dim); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line) }
.tbl td{ padding:12px; border-bottom:1px solid var(--hair-soft); color:var(--ink-2) }
.tbl tr:hover td{ background:rgba(255,255,255,0.018) }
.tbl .amt{ font-family:var(--mono); color:var(--ink); text-align:right }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(4,6,12,0.66); backdrop-filter:blur(6px) }
.modal.open{ display:flex; animation:fade .2s ease }
.modal-card{ width:100%; max-width:480px; background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--hair); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-2);
  animation:pop .26s cubic-bezier(.2,.9,.2,1) }
.modal-card h3{ font-size:20px; margin-bottom:4px }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; right:18px; bottom:18px; z-index:120; display:flex; flex-direction:column; gap:10px }
.toast{ background:var(--float); border:1px solid var(--hair); border-radius:12px; padding:12px 16px; min-width:240px;
  max-width:340px; box-shadow:var(--sh-2); font-size:13.5px; animation:slidein .3s cubic-bezier(.2,.9,.2,1);
  display:flex; gap:10px; align-items:flex-start }
.toast b{ display:block; font-size:13px } .toast .em{ font-size:18px }

/* ---------- misc ---------- */
.row{ display:flex; align-items:center; gap:12px } .wrap{ flex-wrap:wrap }
.between{ justify-content:space-between } .center{ align-items:center; justify-content:center }
.col{ display:flex; flex-direction:column }
.divider{ height:1px; background:var(--line); margin:18px 0 }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ font-size:12.5px; padding:7px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg-2);
  cursor:pointer; transition:.16s; color:var(--ink-2); font-weight:500 }
.chip.on{ border-color:rgba(227,193,107,0.5); color:var(--ink); background:rgba(227,193,107,0.08) }
.scrim-x{ font-size:12px; color:var(--faint) }
.empty{ text-align:center; padding:34px 16px; color:var(--dim) }
.empty .em{ font-size:32px; display:block; margin-bottom:8px; opacity:.7 }
.ring-wrap{ position:relative; width:128px; height:128px }
.ring-wrap .center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center }

/* ---------- motion ---------- */
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }
@keyframes slidein{ from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:none} }
@keyframes fadeup{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
[data-anim]{ opacity:0; animation:fadeup .6s cubic-bezier(.2,.8,.2,1) forwards }
@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } [data-anim]{opacity:1} }

/* confetti */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden }
.confetti i{ position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:fall linear forwards }
@keyframes fall{ to{ transform:translateY(108vh) rotate(720deg); opacity:.2 } }