@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #163128;
  --muted: #5d7068;
  --subtle: #819088;
  --bg: #f5f7f3;
  --panel: #ffffff;
  --panel-2: #edf3ef;
  --line: rgba(4, 72, 52, 0.10);
  --line-strong: rgba(4, 72, 52, 0.18);
  --acid: #087657;
  --mint: #168b68;
  --coral: #c94f4a;
  --amber: #a27d2d;
  --violet: #607aa3;
  --brand: #00513f;
  --brand-deep: #003a2d;
  --ivory: #f4f4ef;
  --platinum: #adb4b0;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(24, 61, 48, 0.16);
}

* { box-sizing: border-box; }

html { background: var(--bg); color-scheme: light; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, #f8faf7 0, var(--bg) 55%, #eef3ef 100%);
  font-family: Manrope, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }

button, [role="button"] { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #07100e;
  background: linear-gradient(145deg, var(--acid), var(--mint));
  box-shadow: 0 0 30px rgba(185, 255, 102, 0.14);
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(0, 81, 63, .16);
  border-radius: 11px;
  background: #fafaf7;
  box-shadow: 0 12px 34px rgba(0, 46, 35, .08);
}

.brand-lockup img { display: block; width: 100%; height: auto; object-fit: contain; }
.auth-brand .brand-lockup { width: min(390px, 80vw); padding: 11px 16px; border-radius: 16px; }
.sidebar-brand .brand-lockup { width: 190px; }

.brand-mark svg { width: 20px; height: 20px; }
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; }
.brand-name span { color: var(--acid); }

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
}

.auth-showcase {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px clamp(38px, 6vw, 84px);
  color: var(--brand-deep);
  border-right: 1px solid rgba(0, 81, 63, .12);
  background:
    linear-gradient(145deg, rgba(249, 249, 246, .98), rgba(236, 240, 236, .96)),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(0,81,63,.025) 80px),
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(0,81,63,.025) 80px);
}

.auth-showcase::before {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  right: -200px;
  top: -230px;
  border: 1px solid rgba(0, 81, 63, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 82px rgba(0, 81, 63, 0.022), 0 0 0 164px rgba(0, 81, 63, 0.016);
}

.auth-brand, .sidebar-brand { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.auth-copy { position: relative; z-index: 1; max-width: 740px; margin: 70px 0; }
.eyebrow { color: var(--acid); font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: 0.15em; text-transform: uppercase; }
.auth-copy h1 { margin: 18px 0 22px; color: #063b2e; font-size: clamp(44px, 5.5vw, 78px); line-height: 0.98; letter-spacing: -0.06em; }
.auth-copy h1 em { color: #087154; font-style: normal; font-weight: 500; }
.auth-copy > p { max-width: 600px; margin: 0; color: #66766f; font-size: 17px; line-height: 1.7; }
.auth-proof { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
.proof-card { min-width: 144px; padding: 16px 18px; border: 1px solid rgba(0,81,63,.12); border-radius: 14px; background: rgba(255,255,255,.58); backdrop-filter: blur(12px); }
.proof-card strong { display: block; color: #063b2e; font-size: 20px; letter-spacing: -0.04em; }
.proof-card span { display: block; margin-top: 5px; color: #6e7d76; font-size: 11px; }
.auth-foot { position: relative; z-index: 1; display: flex; gap: 28px; color: #7d8883; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }

.auth-panel { display: grid; place-items: center; padding: 36px; background: linear-gradient(160deg, #03140f, #020907); }
.auth-card { width: min(430px, 100%); }
.auth-card h2 { margin: 16px 0 9px; font-size: 30px; letter-spacing: -0.04em; }
.auth-card > p { margin: 0 0 30px; color: var(--muted); font-size: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.auth-tab { padding: 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; }
.auth-tab.active { color: var(--ink); background: var(--panel-2); box-shadow: 0 3px 12px rgba(0,0,0,.22); }
.form-stack { display: grid; gap: 17px; }
.field { display: grid; gap: 8px; }
.field label, .field-label { color: #bdc9c4; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.input-wrap { position: relative; }
.input-wrap .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--subtle); width: 17px; height: 17px; pointer-events: none; }
.field input, .field select, .field textarea, .search-input {
  width: 100%;
  border: 1px solid var(--line-strong);
  outline: none;
  border-radius: 12px;
  color: var(--ink);
  background: #09100e;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field input, .field select { min-height: 48px; padding: 0 14px; }
.input-wrap input { padding-left: 44px; }
.field textarea { min-height: 88px; padding: 13px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { border-color: rgba(185,255,102,.55); box-shadow: 0 0 0 3px rgba(185,255,102,.08); background: #0b1411; }
.field input::placeholder, .field textarea::placeholder, .search-input::placeholder { color: #56635e; }
.field-hint { color: var(--subtle); font-size: 11px; }
.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: transform .18s, filter .18s, border-color .18s, background .18s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn-primary { color: #07100e; background: linear-gradient(145deg, var(--acid), #94ee5f); box-shadow: 0 9px 28px rgba(185, 255, 102, 0.13); }
.btn-secondary { color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,.035); }
.btn-ghost { color: var(--muted); border-color: transparent; background: transparent; }
.btn-danger { color: #ffaaa6; border-color: rgba(255,117,111,.2); background: rgba(255,117,111,.07); }
.btn-block { width: 100%; min-height: 49px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--subtle); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.note-box { padding: 13px 14px; border: 1px solid rgba(8,118,87,.15); border-radius: 12px; background: rgba(8,118,87,.045); color: var(--muted); font-size: 11px; line-height: 1.5; }
.note-box strong { color: var(--mint); }
.auth-error { min-height: 18px; color: #ff938e; font-size: 11px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: 252px;
  display: flex;
  flex-direction: column;
  padding: 25px 17px 20px;
  border-right: 1px solid var(--line);
  background: rgba(7, 13, 11, 0.94);
  backdrop-filter: blur(18px);
}
.sidebar-brand { padding: 0 3px 22px; }
.workspace-chip { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 8px 0 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #07100e; background: linear-gradient(135deg, var(--mint), var(--acid)); font-size: 11px; font-weight: 800; }
.workspace-copy { min-width: 0; flex: 1; }
.workspace-copy strong, .workspace-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-copy strong { font-size: 11px; }
.workspace-copy span { margin-top: 2px; color: var(--subtle); font-size: 9px; }
.nav-label { padding: 0 10px; margin-bottom: 7px; color: #53615b; font: 500 9px/1 "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.nav-list { display: grid; gap: 3px; }
.nav-item { min-height: 41px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border: 0; border-radius: 10px; color: #899991; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; text-align: left; }
.nav-item:hover { color: var(--ink); background: rgba(255,255,255,.03); }
.nav-item.active { color: var(--ink); background: linear-gradient(90deg, rgba(185,255,102,.11), rgba(98,228,194,.035)); box-shadow: inset 2px 0 var(--acid); }
.nav-item.active .icon { color: var(--acid); }
.nav-badge { margin-left: auto; padding: 2px 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--subtle); font: 500 9px/1.4 "DM Mono", monospace; }
.sidebar-cta { margin-top: 18px; }
.sidebar-bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

.main { grid-column: 2; min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(22px, 3vw, 42px); border-bottom: 1px solid var(--line); background: rgba(5, 9, 8, 0.82); backdrop-filter: blur(20px); }
.topbar-title strong { display: block; font-size: 13px; letter-spacing: -0.02em; }
.topbar-title span { display: block; margin-top: 4px; color: var(--subtle); font: 400 9px/1 "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.sync-pill { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 9px; }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(98,228,194,.08); }

.content { width: min(1500px, 100%); margin: 0 auto; padding: clamp(24px, 3vw, 42px); padding-bottom: 100px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.page-head h1 { margin: 5px 0 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.055em; line-height: 1.08; }
.page-head p { max-width: 650px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.date-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font: 500 9px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.02); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi-card { position: relative; overflow: hidden; min-height: 142px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.kpi-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -60px; top: -60px; border-radius: 50%; background: var(--kpi-color, var(--acid)); filter: blur(35px); opacity: .08; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.kpi-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--kpi-color, var(--acid)) 20%, transparent); border-radius: 9px; color: var(--kpi-color, var(--acid)); background: color-mix(in srgb, var(--kpi-color, var(--acid)) 7%, transparent); }
.kpi-icon .icon { width: 15px; height: 15px; }
.kpi-value { margin-top: 17px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.055em; }
.kpi-foot { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--subtle); font-size: 9px; }
.trend-up { color: var(--mint); }
.trend-neutral { color: var(--muted); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .95fr); gap: 12px; margin-top: 12px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(255,255,255,.026), rgba(255,255,255,.012)); }
.panel-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-title strong { display: block; font-size: 12px; }
.panel-title span { display: block; margin-top: 4px; color: var(--subtle); font-size: 9px; }
.panel-body { padding: 18px; }
.metric-toggle { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); }
.metric-toggle button { padding: 6px 9px; border: 0; border-radius: 6px; color: var(--subtle); background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
.metric-toggle button.active { color: var(--ink); background: rgba(255,255,255,.07); }
.chart-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.chart-summary strong { font-size: 25px; letter-spacing: -.04em; }
.chart-summary span { color: var(--mint); font-size: 9px; }
.line-chart { width: 100%; height: 235px; overflow: visible; }
.line-chart .grid { stroke: rgba(206,232,220,.075); stroke-width: 1; }
.line-chart .axis-text { fill: #617069; font: 9px "DM Mono", monospace; }
.line-chart .area { fill: url(#area-gradient); }
.line-chart .line { fill: none; stroke: var(--acid); stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(185,255,102,.28)); }
.line-chart .point { fill: #08110e; stroke: var(--acid); stroke-width: 2; }
.line-chart .point-last { fill: var(--acid); stroke: #08110e; stroke-width: 3; }
.line-chart-empty { height: 235px; display: grid; place-items: center; color: var(--subtle); font-size: 11px; text-align: center; }

.mix-layout { display: grid; grid-template-columns: 136px minmax(0,1fr); align-items: center; gap: 22px; }
.donut { position: relative; width: 136px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--acid) 0 var(--p1), var(--mint) var(--p1) var(--p2), var(--violet) var(--p2) var(--p3), var(--coral) var(--p3) 100%); }
.donut.empty { background: rgba(206, 232, 220, 0.08); }
.donut::after { content: ""; position: absolute; inset: 22px; border: 1px solid var(--line); border-radius: 50%; background: #0b1311; }
.donut-center { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center strong { font-size: 20px; letter-spacing: -.04em; }
.donut-center span { margin-top: 3px; color: var(--subtle); font-size: 8px; text-transform: uppercase; }
.legend { display: grid; gap: 12px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; font-size: 9px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.legend-row span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-row strong { font: 500 9px/1 "DM Mono", monospace; }
.payment-bars { display: grid; gap: 15px; }
.payment-row { display: grid; grid-template-columns: 58px 1fr 62px; align-items: center; gap: 10px; color: var(--muted); font-size: 9px; }
.bar-track { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.05); }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--acid)); }
.payment-row strong { color: var(--ink); font: 500 9px/1 "DM Mono", monospace; text-align: right; }

.section-space { margin-top: 12px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.data-table th { padding: 11px 15px; color: #64736c; font: 500 8px/1 "DM Mono", monospace; letter-spacing: .08em; text-align: left; text-transform: uppercase; background: rgba(255,255,255,.015); }
.data-table td { padding: 14px 15px; border-top: 1px solid var(--line); color: #aab8b2; font-size: 10px; white-space: nowrap; }
.data-table tbody tr { transition: background .16s; }
.data-table tbody tr:hover { background: rgba(255,255,255,.022); }
.data-table td strong { color: var(--ink); font-size: 11px; }
.money { color: var(--ink) !important; font: 500 10px/1 "DM Mono", monospace !important; }
.positive { color: var(--mint) !important; }
.negative { color: var(--coral) !important; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tag-color, var(--mint)); }
.tag-sale { --tag-color: var(--mint); color: #9eeed7; background: rgba(98,228,194,.045); }
.tag-purchase { --tag-color: var(--coral); color: #f4a29e; background: rgba(255,117,111,.045); }
.tag-saved { --tag-color: var(--acid); }
.tag-live { --tag-color: var(--amber); }
.row-action { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; color: var(--subtle); background: transparent; cursor: pointer; }
.row-action:hover { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.03); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.search-wrap { position: relative; flex: 1; max-width: 380px; }
.search-wrap .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--subtle); width: 15px; height: 15px; }
.search-input { height: 40px; padding: 0 13px 0 39px; font-size: 10px; }
.filter-group { display: flex; gap: 5px; }
.filter-chip { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--subtle); background: rgba(255,255,255,.015); cursor: pointer; font-size: 9px; font-weight: 700; }
.filter-chip.active { border-color: rgba(185,255,102,.25); color: var(--acid); background: rgba(185,255,102,.06); }

.show-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.show-card { position: relative; min-height: 210px; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); cursor: pointer; transition: border-color .18s, transform .18s, background .18s; }
.show-card:hover { transform: translateY(-2px); border-color: rgba(185,255,102,.23); background: linear-gradient(155deg, rgba(185,255,102,.04), rgba(255,255,255,.012)); }
.show-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.show-card-date { color: var(--acid); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.show-card h3 { margin: 11px 0 5px; font-size: 16px; letter-spacing: -.035em; }
.show-card-meta { color: var(--subtle); font-size: 9px; }
.show-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.show-card-stat strong { display: block; font: 500 13px/1.2 "DM Mono", monospace; }
.show-card-stat span { display: block; margin-top: 5px; color: var(--subtle); font-size: 8px; text-transform: uppercase; }
.new-show-card { display: grid; place-content: center; justify-items: center; gap: 12px; border-style: dashed; color: var(--muted); text-align: center; background: rgba(185,255,102,.012); }
.new-show-card .plus-orb { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(185,255,102,.23); border-radius: 50%; color: var(--acid); background: rgba(185,255,102,.05); }
.new-show-card strong { color: var(--ink); font-size: 12px; }
.new-show-card span { font-size: 9px; }

.owner-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 13px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(78,208,160,.055), rgba(217,197,143,.025));
}
.owner-bar > div:first-child span { display: block; color: var(--subtle); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.owner-bar > div:first-child strong { display: block; margin-top: 5px; font-size: 11px; }
.range-pills { display: flex; gap: 5px; margin-left: auto; }
.owner-dates { color: var(--muted); font: 500 9px/1 "DM Mono", monospace; }
.total-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); gap: 12px; margin-top: 12px; }
.pnl-statement { display: grid; }
.pnl-line { display: grid; grid-template-columns: 125px minmax(0, 1fr) 120px; gap: 15px; align-items: center; min-height: 47px; padding: 0 5px; border-bottom: 1px solid var(--line); }
.pnl-line span { color: var(--muted); font-size: 10px; }
.pnl-line .pnl-group { color: var(--subtle); font: 500 8px/1.2 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.pnl-line strong { font: 500 11px/1 "DM Mono", monospace; text-align: right; }
.pnl-line.subtotal { margin-top: 5px; border-top: 1px solid var(--line-strong); background: rgba(255,255,255,.02); }
.pnl-line.total { min-height: 57px; margin-top: 5px; border-top: 1px solid rgba(78,208,160,.32); border-bottom: 0; background: linear-gradient(90deg, rgba(78,208,160,.06), transparent); }
.pnl-line.total span, .pnl-line.total strong { color: var(--ink); font-weight: 800; }
.pnl-line.total strong.positive { color: var(--acid); }
.pnl-note { margin-top: 16px; padding: 11px 12px; border-left: 2px solid rgba(217,197,143,.5); color: var(--subtle); background: rgba(217,197,143,.03); font-size: 8px; line-height: 1.65; }
.spend-total { font-size: 28px; font-weight: 700; letter-spacing: -.05em; }
.spend-total span { display: block; margin-top: 5px; color: var(--subtle); font-size: 8px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; }
.source-split { display: flex; height: 9px; overflow: hidden; margin: 22px 0 15px; border-radius: 99px; background: rgba(255,255,255,.05); }
.source-segment.show { background: var(--acid); }
.source-segment.outside { background: var(--amber); }
.source-legend { display: grid; gap: 12px; }
.source-legend > div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; }
.source-legend i { width: 7px; height: 7px; border-radius: 50%; }
.source-legend span { color: var(--muted); font-size: 9px; }
.source-legend strong { font: 500 9px/1 "DM Mono", monospace; }
.quick-buy-panel p { margin: 0 0 15px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.operating-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.operating-grid > div { min-height: 92px; padding: 18px; border-right: 1px solid var(--line); }
.operating-grid > div:last-child { border-right: 0; }
.operating-grid span { display: block; color: var(--subtle); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.operating-grid strong { display: block; margin-top: 13px; font: 500 14px/1 "DM Mono", monospace; }
.outside-entry-card { display: grid; grid-template-columns: .62fr 1.38fr; gap: 24px; padding: 22px; background: linear-gradient(135deg, rgba(0,81,63,.22), rgba(217,197,143,.025)); }
.outside-entry-copy { padding: 7px 8px; }
.outside-entry-copy h2 { margin: 9px 0 7px; font-size: 22px; letter-spacing: -.045em; }
.outside-entry-copy p { margin: 0; color: var(--muted); font-size: 10px; }
.outside-entry-form { display: grid; grid-template-columns: .75fr .75fr 1.25fr auto; align-items: end; gap: 10px; }
.outside-entry-form .field input { min-height: 46px; }
.outside-note label span { color: var(--subtle); font-weight: 500; }
.outside-submit { min-height: 46px; white-space: nowrap; }
.export-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.export-choice { min-height: 120px; display: grid; align-content: center; justify-items: start; gap: 7px; padding: 17px; border: 1px solid var(--line-strong); border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.02); cursor: pointer; text-align: left; }
.export-choice:hover { border-color: rgba(78,208,160,.32); background: rgba(78,208,160,.04); }
.export-choice .icon { color: var(--acid); }
.export-choice strong { font-size: 12px; }
.export-choice span { color: var(--subtle); font-size: 8px; line-height: 1.5; }

.empty-state { min-height: 330px; display: grid; place-content: center; justify-items: center; padding: 40px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(185,255,102,.17); border-radius: 17px; color: var(--acid); background: rgba(185,255,102,.04); }
.empty-state h3 { margin: 17px 0 7px; font-size: 16px; }
.empty-state p { max-width: 360px; margin: 0 0 20px; color: var(--muted); font-size: 10px; line-height: 1.7; }

.live-page { padding-bottom: 120px; }
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.live-title { display: flex; align-items: center; gap: 13px; }
.back-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.02); cursor: pointer; }
.live-title h1 { margin: 0; font-size: 23px; letter-spacing: -.045em; }
.live-title p { margin: 5px 0 0; color: var(--subtle); font-size: 9px; }
.live-actions { display: flex; gap: 8px; }
.live-status { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; color: var(--amber); font: 500 8px/1 "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; vertical-align: middle; }
.live-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255,189,89,.08); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.show-meta-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
.meta-cell { padding: 13px 16px; background: #09110f; }
.meta-cell span { display: block; color: var(--subtle); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.meta-cell strong { display: block; margin-top: 6px; font: 500 11px/1.2 "DM Mono", monospace; }
.live-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.live-kpis .kpi-card { min-height: 101px; padding: 13px; border-radius: 14px; }
.live-kpis .kpi-top { font-size: 7px; }
.live-kpis .kpi-value { margin-top: 15px; font: 500 17px/1 "DM Mono", monospace; }
.live-kpis .kpi-foot, .live-kpis .kpi-icon { display: none; }
.live-grid { display: grid; grid-template-columns: minmax(360px, .72fr) minmax(0, 1.28fr); gap: 12px; margin-top: 12px; }
.quick-entry { position: sticky; top: 86px; align-self: start; }
.quick-form { display: grid; gap: 16px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.segment { min-height: 39px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.segment.active.sale { color: #07100e; background: var(--mint); }
.segment.active.purchase { color: #1a0b0a; background: var(--coral); }
.quick-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; }
.money-input input { padding-left: 34px; font: 500 17px/1 "DM Mono", monospace; }
.money-input::before { content: "$"; position: absolute; z-index: 1; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font: 500 13px/1 "DM Mono", monospace; }
.payment-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: #09100e; }
.payment-switch button { min-height: 38px; border: 0; border-radius: 8px; color: var(--subtle); background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.payment-switch button.active { color: var(--ink); background: rgba(255,255,255,.07); }
.category-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.category-selector { margin-top: 8px; }
.category-chip { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--subtle); background: rgba(255,255,255,.015); cursor: pointer; font-size: 8px; }
.category-chip:hover { color: var(--acid); border-color: rgba(185,255,102,.2); }
.category-chip.active { color: #fff; border-color: var(--brand); background: var(--brand); box-shadow: 0 5px 14px rgba(0,81,63,.16); }
.keyboard-tip { display: flex; align-items: center; gap: 7px; color: var(--subtle); font-size: 8px; }
kbd { padding: 3px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); background: rgba(255,255,255,.03); font: 500 8px/1 "DM Mono", monospace; }
.activity-list { max-height: 610px; overflow-y: auto; }
.activity-row { display: grid; grid-template-columns: 34px 1.35fr .65fr .7fr 70px 32px; align-items: center; gap: 10px; padding: 11px 15px; border-top: 1px solid var(--line); }
.activity-row:first-child { border-top: 0; }
.activity-index { color: var(--subtle); font: 500 8px/1 "DM Mono", monospace; }
.activity-item strong { display: block; color: var(--ink); font-size: 10px; }
.activity-item span { display: block; margin-top: 3px; color: var(--subtle); font-size: 8px; }
.activity-payment, .activity-running { color: var(--muted); font-size: 8px; }
.activity-amount { font: 500 10px/1 "DM Mono", monospace; text-align: right; }
.activity-running { text-align: right; }
.running-label { display: none; }
.complete-bar { position: fixed; z-index: 25; right: 0; bottom: 0; left: 252px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(22px,3vw,42px); border-top: 1px solid var(--line); background: rgba(7, 13, 11, .93); backdrop-filter: blur(20px); }
.complete-summary strong { display: block; font-size: 11px; }
.complete-summary span { display: block; margin-top: 4px; color: var(--subtle); font-size: 8px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); backdrop-filter: blur(9px); animation: fade-in .16s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.modal { width: min(540px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 20px; background: #0a1210; box-shadow: var(--shadow); animation: modal-in .2s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px 22px 17px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
.modal-header p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.close-btn { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.02); cursor: pointer; }
.modal-body { padding: 22px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.modal-grid .span-2 { grid-column: 1 / -1; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--line); }
.danger-note { padding: 13px; border: 1px solid rgba(255,117,111,.15); border-radius: 11px; color: #d4a09d; background: rgba(255,117,111,.04); font-size: 9px; line-height: 1.6; }
.detail-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.detail-kpi { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.detail-kpi span { display: block; color: var(--subtle); font-size: 7px; text-transform: uppercase; }
.detail-kpi strong { display: block; margin-top: 7px; font: 500 12px/1 "DM Mono", monospace; }

.toast-region { position: fixed; z-index: 150; right: 20px; bottom: 20px; display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 260px; max-width: 380px; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 12px; color: #cdd9d4; background: rgba(13, 23, 20, .96); box-shadow: var(--shadow); font-size: 10px; animation: toast-in .22s ease-out; }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(98,228,194,.08); }
.toast.error .toast-dot { background: var(--coral); box-shadow: 0 0 0 4px rgba(255,117,111,.08); }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }

.mobile-nav { display: none; }
.mobile-menu-btn { display: none; }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .show-grid { grid-template-columns: repeat(2, 1fr); }
  .live-kpis { grid-template-columns: repeat(4, 1fr); }
  .live-grid { grid-template-columns: 1fr; }
  .quick-entry { position: static; }
  .total-grid { grid-template-columns: 1fr; }
  .operating-grid { grid-template-columns: repeat(3, 1fr); }
  .operating-grid > div:nth-child(3) { border-right: 0; }
  .operating-grid > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .outside-entry-card { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-showcase { min-height: 470px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-copy { margin: 55px 0 20px; }
  .auth-copy h1 { max-width: 700px; }
  .auth-foot { display: none; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main { grid-column: auto; }
  .topbar { min-height: 63px; }
  .mobile-menu-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.02); }
  .topbar-title { margin-right: auto; }
  .sync-pill { display: none; }
  .mobile-nav { position: fixed; z-index: 40; right: 10px; bottom: 10px; left: 10px; display: grid; grid-template-columns: repeat(6, 1fr); padding: 6px; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(10,18,16,.94); box-shadow: 0 15px 50px rgba(0,0,0,.4); backdrop-filter: blur(22px); }
  .mobile-nav button { min-height: 45px; display: grid; place-content: center; justify-items: center; gap: 4px; border: 0; border-radius: 10px; color: var(--subtle); background: transparent; font-size: 7px; font-weight: 800; }
  .mobile-nav button .icon { width: 16px; height: 16px; }
  .mobile-nav button.active { color: var(--acid); background: rgba(185,255,102,.06); }
  .mobile-nav .mobile-new { color: #07100e; background: var(--acid); }
  .complete-bar { left: 0; bottom: 67px; }
  .content { padding-bottom: 120px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .auth-showcase { min-height: 420px; padding: 27px 23px; }
  .auth-copy { margin: 45px 0 20px; }
  .auth-copy h1 { font-size: 42px; }
  .auth-copy > p { font-size: 14px; }
  .proof-card:nth-child(3) { display: none; }
  .proof-card { min-width: 125px; padding: 13px; }
  .auth-panel { padding: 38px 22px 55px; }
  .topbar { padding: 0 15px; }
  .topbar .btn span { display: none; }
  .content { padding: 22px 15px 110px; }
  .page-head { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  .page-head h1 { font-size: 31px; }
  .date-pill { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card { min-height: 122px; padding: 14px; border-radius: 15px; }
  .kpi-value { font-size: 23px; }
  .kpi-top { font-size: 8px; }
  .panel-header { min-height: 59px; padding: 13px 14px; }
  .panel-body { padding: 14px; }
  .metric-toggle { display: none; }
  .mix-layout { grid-template-columns: 115px 1fr; gap: 16px; }
  .donut { width: 115px; }
  .donut::after { inset: 19px; }
  .show-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-wrap { max-width: none; }
  .filter-group { overflow-x: auto; }
  .live-head { align-items: flex-start; }
  .live-title h1 { font-size: 18px; }
  .live-head .btn-secondary { display: none; }
  .show-meta-strip { grid-template-columns: 1fr 1fr; }
  .live-kpis { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .live-kpis .kpi-card { min-height: 85px; }
  .live-grid { grid-template-columns: 1fr; }
  .quick-row { grid-template-columns: 1fr; }
  .activity-row { grid-template-columns: 28px 1fr 65px 28px; gap: 7px; padding: 11px; }
  .activity-payment, .activity-running { display: none; }
  .complete-bar { padding: 11px 15px; }
  .complete-summary { display: none; }
  .complete-bar .btn { flex: 1; }
  .modal-grid { grid-template-columns: 1fr; }
  .modal-grid .span-2 { grid-column: auto; }
  .detail-kpis { grid-template-columns: 1fr 1fr; }
  .owner-bar { align-items: flex-start; flex-wrap: wrap; }
  .range-pills { order: 3; width: 100%; margin-left: 0; }
  .owner-dates { margin-left: auto; }
  .pnl-line { grid-template-columns: 1fr 92px; gap: 8px; }
  .pnl-line .pnl-group { display: none; }
  .operating-grid { grid-template-columns: 1fr 1fr; }
  .operating-grid > div, .operating-grid > div:nth-child(3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .operating-grid > div:nth-child(even) { border-right: 0; }
  .outside-entry-form { grid-template-columns: 1fr 1fr; }
  .outside-note, .outside-submit { grid-column: 1 / -1; }
  .export-choice-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Chad Sports Cards — bright private office theme */
.auth-showcase { background: linear-gradient(145deg, rgba(251,252,249,.98), rgba(232,241,235,.98)); }
.auth-panel { background: #fff; }
.auth-card { padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(26,65,51,.10); }
.auth-card h2 { color: var(--ink); font-size: 32px; }
.auth-tabs { background: #eef3ef; }
.auth-tab.active { color: #fff; background: var(--brand); box-shadow: 0 5px 14px rgba(0,81,63,.16); }
.auth-copy .eyebrow, .auth-card .eyebrow, .setup-card .eyebrow { color: var(--brand); }
.proof-card { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; }
.proof-card .icon { grid-row: 1 / 3; color: var(--brand); }
.proof-card strong, .proof-card span { margin: 0; }
.field label, .field-label { color: #465c53; font-size: 12px; }
.field input, .field select, .field textarea, .search-input { color: var(--ink); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { border-color: rgba(0,81,63,.45); box-shadow: 0 0 0 4px rgba(0,81,63,.08); background: #fff; }
.field input::placeholder, .field textarea::placeholder, .search-input::placeholder { color: #9aa8a2; }
.btn { font-size: 12px; }
.btn-primary { color: #fff; background: linear-gradient(145deg, #006b50, #004c3b); box-shadow: 0 10px 25px rgba(0,81,63,.18); }
.btn-secondary { color: var(--ink); background: #fff; }
.btn-danger { color: #a33834; border-color: rgba(201,79,74,.22); background: rgba(201,79,74,.06); }
.auth-error { color: #b53d38; font-size: 12px; }
.auth-link { display: block; margin: 18px auto 0; padding: 4px; border: 0; color: var(--brand); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.auth-notice, .security-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; margin: 0 0 18px; border: 1px solid rgba(0,81,63,.15); border-radius: 12px; color: #355f50; background: #f1f7f3; font-size: 11px; line-height: 1.55; }
.auth-notice .icon, .security-note .icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); }
.auth-card .security-note { margin: 22px 0 0; }

.sidebar { border-color: var(--line); background: rgba(255,255,255,.96); box-shadow: 10px 0 40px rgba(24,61,48,.04); }
.workspace-chip { background: #f4f7f4; }
.avatar { color: #fff; background: linear-gradient(135deg, var(--brand), #178363); }
.nav-label { color: #8a9992; }
.nav-item { color: #62736b; font-size: 12px; }
.nav-item:hover { color: var(--brand); background: #f1f6f2; }
.nav-item.active { color: #003f31; background: linear-gradient(90deg, rgba(0,81,63,.10), rgba(0,81,63,.025)); box-shadow: inset 3px 0 var(--brand); }
.nav-item.active .icon { color: var(--brand); }
.topbar { border-color: var(--line); background: rgba(250,252,249,.90); }
.topbar-title strong { font-size: 15px; }
.topbar-title span, .sync-pill { font-size: 10px; }
.sync-pill { background: #fff; }
.sync-dot { background: #168b68; box-shadow: 0 0 0 4px rgba(22,139,104,.10); }
.content { max-width: 1440px; }
.page-head h1 { color: #133329; }
.page-head p { color: #63756d; font-size: 13px; }
.date-pill, .filter-chip, .metric-toggle { background: #fff; }
.filter-chip.active { border-color: rgba(0,81,63,.24); color: var(--brand); background: rgba(0,81,63,.07); }

.kpi-card, .panel, .show-card { border-color: var(--line); background: #fff; box-shadow: 0 10px 34px rgba(32,68,55,.055); }
.kpi-card { min-height: 150px; }
.kpi-top { color: #65766e; font-size: 11px; }
.kpi-value { color: #102e24; }
.kpi-foot { color: #7b8b84; font-size: 10px; }
.panel-title strong { font-size: 14px; }
.panel-title span { font-size: 10px; }
.panel-body { padding: 20px; }
.metric-toggle button.active { color: #fff; background: var(--brand); }
.line-chart .grid { stroke: rgba(0,81,63,.10); }
.line-chart .axis-text { fill: #72837b; }
.line-chart .line { stroke: var(--brand); filter: none; }
.line-chart .point { fill: #fff; stroke: var(--brand); }
.line-chart .point-last { fill: var(--brand); stroke: #fff; }
.donut::after { background: #fff; }
.bar-track, .source-split { background: #e8eeea; }
.data-table th { color: #65766e; background: #f5f8f5; font-size: 9px; }
.data-table td { color: #53675e; font-size: 11px; }
.data-table tbody tr:hover { background: #f7faf8; }
.tag-sale { color: #087153; background: rgba(8,113,83,.07); }
.tag-purchase { color: #aa403b; background: rgba(201,79,74,.07); }
.show-card:hover { border-color: rgba(0,81,63,.24); background: #fbfdfb; }
.show-card-date, .new-show-card .plus-orb { color: var(--brand); }
.new-show-card { background: #f7faf7; }
.owner-bar { background: linear-gradient(90deg, rgba(0,81,63,.075), rgba(162,125,45,.035)); }
.pnl-line span, .quick-buy-panel p, .outside-entry-copy p { font-size: 11px; }
.pnl-line.subtotal { background: #f7faf7; }
.pnl-line.total { border-color: rgba(0,81,63,.28); background: linear-gradient(90deg, rgba(0,81,63,.08), transparent); }
.outside-entry-card { background: linear-gradient(135deg, rgba(0,81,63,.08), rgba(162,125,45,.025)); }
.export-choice { background: #fff; }
.export-choice:hover { border-color: rgba(0,81,63,.28); background: #f6faf7; }
.export-choice .icon { color: var(--brand); }
.empty-icon { border-color: rgba(0,81,63,.18); color: var(--brand); background: rgba(0,81,63,.05); }
.meta-cell, .payment-switch { background: #fff; }
.segmented, .category-chip, .back-btn, .close-btn, kbd { background: #f7f9f7; }
.payment-switch button.active { color: #fff; background: var(--brand); }
.complete-bar { background: rgba(255,255,255,.94); box-shadow: 0 -10px 35px rgba(24,61,48,.06); }
.modal-backdrop { background: rgba(15,40,31,.34); }
.modal { background: #fff; }
.detail-kpi { background: #f8faf8; }
.toast { color: var(--ink); background: rgba(255,255,255,.98); }

.setup-gate, .loading-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 0, #e5f1e9, transparent 42rem), var(--bg); }
.setup-card { width: min(680px, 100%); padding: clamp(28px, 5vw, 56px); border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.setup-card .brand-lockup { width: min(340px, 100%); margin-bottom: 34px; }
.setup-card h1 { margin: 13px 0 12px; color: #14372b; font-size: clamp(32px, 5vw, 48px); letter-spacing: -.05em; }
.setup-card > p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.setup-card ol { display: grid; gap: 10px; margin: 26px 0; padding-left: 23px; color: #3d574d; font-size: 13px; line-height: 1.6; }
.setup-card code { padding: 2px 5px; border-radius: 5px; color: #004d3b; background: #edf4ef; }
.loading-screen { align-content: center; gap: 24px; color: var(--muted); }
.loading-screen .brand-lockup { width: min(320px, 75vw); }
.loading-pulse { width: 32px; height: 4px; border-radius: 99px; background: var(--brand); animation: loading-pulse 1.1s ease-in-out infinite; }
@keyframes loading-pulse { 50% { width: 74px; opacity: .45; } }

@media (max-width: 900px) {
  .mobile-nav { border-color: var(--line-strong); background: rgba(255,255,255,.96); box-shadow: 0 15px 50px rgba(24,61,48,.16); }
  .mobile-nav button.active { color: var(--brand); background: rgba(0,81,63,.07); }
  .mobile-nav .mobile-new { color: #fff; background: var(--brand); }
}

@media (max-width: 650px) {
  .auth-panel { padding: 18px; }
  .auth-card { padding: 25px 20px; border-radius: 20px; }
  .auth-card h2 { font-size: 28px; }
  .setup-card { padding: 28px 22px; border-radius: 20px; }
}