:root {
  --bg:        #0a0a0a;
  --bg-card:   #161616;
  --bg-card2:  #111111;
  --border:    #2a2a2a;
  --teal:      #f97316;
  --teal2:     #ea580c;
  --teal-glow: rgba(249,115,22,0.12);
  --indigo:    #ef4444;
  --amber:     #f59e0b;
  --green:     #22c55e;
  --red:       #ef4444;
  --txt:       #f0f0f0;
  --txt2:      #888888;
  --txt3:      #444444;
  --orange-grad: linear-gradient(315deg, #fbbf24 0%, #f97316 45%, #dc2626 100%);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--txt);
  display: flex;
  min-height: 100vh;
  font-size: 12px;
}

/* ── LOADING ── */
#loader {
  position:fixed; inset:0; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; z-index:999;
}
.spin {
  width:42px; height:42px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--teal);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
#loader p { color:var(--txt2); font-size:13px; }

/* ── SIDEBAR ── */
.sidebar {
  width:210px; min-height:100vh; flex-shrink:0;
  background:#080808; border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:28px 16px 24px;
  gap:28px;
}
.profile { display:flex; flex-direction:column; gap:0; }
.logo-wrap img {
  width:140px; height:auto; display:block;
}

.nav { display:flex; flex-direction:column; gap:4px; flex:1; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:8px; cursor:pointer;
  color:var(--txt2); font-size:12.5px; font-weight:500;
  transition:all .2s; border:1px solid transparent;
}
.nav-item:hover { background:var(--border); color:var(--txt); }
.nav-item.active {
  background:var(--teal-glow); color:var(--teal);
  border-color:rgba(0,212,200,.2);
}
.nav-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--txt3); flex-shrink:0; transition:.2s;
}
.nav-item.active .nav-dot { background:var(--teal); }

/* ── MAIN ── */
.main {
  flex:1; min-width:0;
  padding:16px 20px 18px;
  display:flex; flex-direction:column; gap:12px;
}

.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:4px;
}
.page-title { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.page-sub { font-size:11.5px; color:var(--txt2); margin-top:3px; }
.header-right { display:flex; align-items:center; gap:10px; }

.span-btns {
  display:flex; gap:4px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:9px; padding:3px;
}
.span-btn {
  padding:5px 12px; border-radius:6px; border:none;
  background:transparent; color:var(--txt2);
  font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all .15s;
}
.span-btn:hover { color:var(--txt); }
.span-btn.active {
  background:var(--teal-glow); color:var(--teal);
  border:1px solid rgba(0,212,200,.25);
}

.refresh-btn {
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--txt2); padding:7px 14px; border-radius:8px;
  font-size:12px; cursor:pointer; font-family:inherit; transition:.2s;
}
.refresh-btn:hover { color:var(--teal); border-color:var(--teal2); }

/* ── TOP CARDS ── */
.top-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.top-card {
  border-radius:14px; padding:14px 20px;
  display:flex; flex-direction:column; gap:6px;
}
.top-card.booked {
  background: var(--orange-grad);
}
.top-card.collected {
  background:var(--bg-card); border:1px solid var(--border);
}
.tc-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:rgba(255,255,255,0.65);
}
.tc-val {
  font-size:36px; font-weight:900; letter-spacing:-.03em;
  color:#fff; line-height:1;
}
.tc-sub {
  font-size:12px; color:rgba(255,255,255,0.55); font-weight:500;
}
.top-card.collected .tc-sub { color:var(--txt2); }

/* ── UNIFIED GRID ── */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.kpi-col      { grid-column: 1; grid-row: 1; }
.profit-card  { grid-column: 2; grid-row: 1; }
.right-col    { grid-column: 3; grid-row: 1; }
.row-bottom   { grid-column: 1 / 4; grid-row: 2; display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ── CARD BASE ── */
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; padding:20px;
}

/* ── KPI COLUMN ── */
.kpi-col { display:flex; flex-direction:column; gap:16px; }

.kpi-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px; flex:1;
  display:flex; flex-direction:column;
}
.kpi-type {
  font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--txt2); margin-bottom:4px;
}
.kpi-pct {
  font-size:24px; font-weight:900; letter-spacing:-.03em;
  line-height:1; margin-bottom:2px;
}
.kpi-pct.up   { color:var(--teal); }
.kpi-pct.down { color:var(--red);  }
.kpi-row {
  display:flex; gap:0; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border);
}
.kpi-half { flex:1; }
.kpi-half + .kpi-half { padding-left:12px; border-left:1px solid var(--border); margin-left:12px; }
.kpi-val { font-size:18px; font-weight:700; }
.kpi-lbl { font-size:14px; color:var(--txt2); margin-top:2px; }

/* ── PROFIT CARD (center) ── */
.profit-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:14px 18px;
  display:flex; flex-direction:column;
}
.profit-title {
  text-align:center; font-size:17px; font-weight:700;
  letter-spacing:-.01em; margin-bottom:8px;
}
.gauges-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gauge-wrap {
  display:flex; flex-direction:column; align-items:center;
}
.gauge-lbl {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--txt2); margin-bottom:8px; text-align:center;
}
.gauge-clip {
  position:relative; width:230px; height:115px; overflow:hidden;
}
.gauge-clip canvas {
  position:absolute; top:0; left:0;
  width:230px !important; height:230px !important;
}
.gauge-ends {
  display:flex; justify-content:space-between; width:230px; margin-top:2px;
}
.gauge-ends span { font-size:10px; color:var(--txt3); }

.profit-values {
  display:grid; grid-template-columns:1fr 1fr;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--border);
  gap:12px;
}
.profit-trend-wrap {
  position:relative; flex:1; min-height:60px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.profit-trend-lbl {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--txt2); margin-bottom:6px;
}

/* ── CAT CARD SPLIT LAYOUT ── */
.cat-inner { display:flex; gap:20px; align-items:flex-start; }
.cat-donut-side { flex-shrink:0; width:185px; display:flex; flex-direction:column; gap:8px; }
.cat-list-side { flex:1; min-width:0; display:flex; flex-direction:column; }
.cat-list-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--txt2); margin-bottom:8px; }
.cat-top-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.cat-top-row:last-child { border-bottom:none; }
.cat-top-rank { font-size:11px; font-weight:700; color:var(--txt3); width:14px; flex-shrink:0; }
.cat-top-name { font-size:13px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-top-amt { font-size:13px; font-weight:700; flex-shrink:0; }
.pv-item { text-align:center; }
.pv-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--txt2); margin-bottom:3px; }
.pv-val { font-size:18px; font-weight:800; letter-spacing:-.02em; }
.pv-pct { font-size:12px; font-weight:600; color:var(--teal); margin-top:3px; }

/* ── RIGHT COLUMN ── */
.right-col { display:flex; flex-direction:column; gap:16px; }

.outstanding-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px;
}
.out-lbl { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--txt2); margin-bottom:4px; }
.out-val { font-size:22px; font-weight:900; letter-spacing:-.02em; color:var(--txt); }

.status-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; flex:1; display:flex; flex-direction:column;
}
.status-title { font-size:17px; font-weight:700; }
.status-period { font-size:15px; color:var(--txt2); margin-top:2px; margin-bottom:10px; }
.status-legend { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.leg-row { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--txt2); }
.leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-chart-wrap { flex:1; min-height:80px; position:relative; }

/* ── BOTTOM CHARTS ── */
.chart-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px;
}
.chart-head { margin-bottom:12px; }
.chart-head-title { font-size:18px; font-weight:700; }
.chart-head-sub { font-size:15px; color:var(--txt2); margin-top:2px; }
.chart-legend {
  display:flex; gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.cleg { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--txt2); }
.cleg-line { width:18px; height:3px; border-radius:2px; }
.cleg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.chart-box { position:relative; height:185px; }

/* ── PAGE SYSTEM ── */
.page-content { display:flex; flex-direction:column; gap:12px; flex:1; }

/* ── EXPENSES PAGE ── */
.exp-bottom-row { display:grid; grid-template-columns:1fr 1.5fr; gap:12px; }
.exp-donut-container { position:relative; height:220px; }
.exp-cat-legend { display:flex; flex-direction:column; gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.exp-leg-row { display:flex; align-items:center; justify-content:space-between; }
.exp-leg-left { display:flex; align-items:center; gap:8px; }
.exp-leg-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.mcmp-header { display:grid; grid-template-columns:1fr 1fr 1fr; padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.mcmp-hcell { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--txt2); }
.mcmp-hcell:not(:first-child) { text-align:right; }
.mcmp-total-row { display:grid; grid-template-columns:1fr 1fr 1fr; padding:10px 0; border-bottom:1px solid var(--border); margin-bottom:6px; align-items:start; }
.mcmp-row { display:grid; grid-template-columns:1fr 1fr 1fr; padding:6px 0; align-items:center; }
.mcmp-row:not(:last-child) { border-bottom:1px solid rgba(42,42,42,0.5); }
.mcmp-label { font-size:15.5px; color:var(--txt2); display:flex; align-items:center; gap:7px; }
.mcmp-val { font-size:16px; font-weight:600; text-align:right; }
.mcmp-tval { font-size:24px; font-weight:900; letter-spacing:-.02em; text-align:right; }
.mcmp-chg { font-size:15px; font-weight:600; text-align:right; margin-top:3px; }
.mcmp-chg.up   { color:var(--red); }
.mcmp-chg.down { color:var(--green); }

/* ── REVENUE PAGE ── */
.rev-bottom-row      { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.rev-placeholder-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.inv-header {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  padding:8px 0 10px; border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.inv-hcell { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--txt2); }
.inv-hcell-right { text-align:right; }

.inv-row {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  padding:9px 0; align-items:center; border-bottom:1px solid rgba(42,42,42,0.5);
}
.inv-row:last-child { border-bottom:none; }
.inv-client { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:12px; }
.inv-date   { font-size:12px; color:var(--txt2); }
.inv-age    { font-size:12px; color:var(--txt2); }
.inv-age.old { color:var(--red); font-weight:600; }
.inv-badge  { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:20px; display:inline-block; }
.inv-badge.pending  { background:rgba(245,158,11,0.15); color:#f59e0b; }
.inv-badge.overdue  { background:rgba(239,68,68,0.15);  color:#ef4444; }
.inv-badge.other    { background:rgba(136,136,136,0.15); color:#888; }
.inv-amount { font-size:13px; font-weight:700; text-align:right; }
.inv-empty  { font-size:13px; color:var(--txt2); text-align:center; padding:20px 0; }

.pipeline-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:28px 0; gap:8px; text-align:center;
}
.pipeline-icon { font-size:28px; color:var(--txt3); line-height:1; }
.pipeline-msg  { font-size:14px; font-weight:600; color:var(--txt2); }
.pipeline-hint { font-size:12px; color:var(--txt3); max-width:380px; line-height:1.6; }

.mrr-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:24px 0; gap:6px; text-align:center;
}
.mrr-empty-lbl  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--txt2); }
.mrr-empty-val  { font-size:42px; font-weight:900; letter-spacing:-.03em; color:var(--txt3); line-height:1; }
.mrr-empty-hint { font-size:12px; color:var(--txt3); max-width:240px; line-height:1.6; margin-top:4px; }

/* ── UPWORK STATS PAGE ── */
.uw-top-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.uw-stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px;
  display:flex; flex-direction:column; gap:4px;
}
.uw-stat-label { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--txt2); margin-bottom:4px; }
.uw-stat-val   { font-size:42px; font-weight:900; letter-spacing:-.03em; line-height:1; color:var(--txt); }
.uw-stat-pct   { font-size:14px; color:var(--txt2); margin-top:4px; }
.uw-stat-pct b { font-weight:700; color:var(--teal); }
.uw-bottom-row { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.uw-connects-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:20px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:10px;
}
.uw-spend-val { font-size:28px; font-weight:900; letter-spacing:-.02em; color:var(--teal); line-height:1; }
.uw-connects-lbl { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--txt2); }
.uw-connects-val { font-size:58px; font-weight:900; letter-spacing:-.03em; color:var(--teal); line-height:1; }
.uw-connects-sub { font-size:13px; color:var(--txt2); }

/* ── UPCOMING SUBSCRIPTIONS ── */
.sub-list { display:flex; flex-direction:column; }
.sub-row { display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--border); }
.sub-row:last-child { border-bottom:none; }
.sub-name { font-size:14px; font-weight:600; flex:1; }
.sub-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:20px; flex-shrink:0; }
.sub-tag.monthly { background:rgba(249,115,22,0.15); color:#f97316; }
.sub-tag.annual  { background:rgba(167,139,250,0.15); color:#a78bfa; }
.sub-date { font-size:13px; color:var(--txt2); flex-shrink:0; text-align:right; min-width:110px; }
.sub-days { font-size:11px; color:var(--txt3); }
.sub-amount { font-size:14px; font-weight:700; flex-shrink:0; text-align:right; min-width:65px; }
.sub-empty { font-size:13px; color:var(--txt2); text-align:center; padding:18px 0; }

.uw-chart-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.uw-cv-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.uw-cv-item { border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.uw-cv-title { font-size:17px; font-weight:700; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uw-cv-meta { font-size:14px; color:var(--txt2); margin-bottom:6px; }
.uw-cv-snippet { font-size:15px; color:var(--txt2); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.uw-no-data { font-size:16px; color:var(--txt2); text-align:center; padding:20px 0; }
.uw-span-btns {
  display:flex; gap:4px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:9px; padding:3px;
}
.uw-span-btn {
  padding:5px 12px; border-radius:6px; border:none;
  background:transparent; color:var(--txt2);
  font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all .15s;
}
.uw-span-btn:hover { color:var(--txt); }
.uw-span-btn.active {
  background:var(--teal-glow); color:var(--teal);
  border:1px solid rgba(0,212,200,.25);
}