:root {
  --bg: #0f1419; --panel: #1a2027; --panel2: #232b34; --border: #2d3742;
  --text: #e6edf3; --muted: #8b96a3; --accent: #4fc3f7; --good: #69db7c;
  --bad: #ff6b6b; --warn: #ffd43b; --purple: #b197fc;
  --mono: 'JetBrains Mono', 'Consolas', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; min-height: 100vh }
.container { max-width: 1400px; margin: 0 auto; padding: 20px }
h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--accent) }
h3 { font-size: 13px; font-weight: 600; margin: 14px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px }
.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 20px }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap }
.tab { padding: 10px 16px; background: transparent; border: none; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 14px; border-bottom: 2px solid transparent; transition: all 0.15s }
.tab:hover { color: var(--text) }
.tab.active { color: var(--accent); border-bottom-color: var(--accent) }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px }
.grid { display: grid; gap: 12px }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px }
.kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px }
.kpi-value { font-family: var(--mono); font-size: 20px; font-weight: 600 }
.kpi-sub { font-size: 11px; color: var(--muted); margin-top: 4px }
.num { font-family: var(--mono); text-align: right }
.pos { color: var(--good) }
.neg { color: var(--bad) }
.warn { color: var(--warn) }
table { width: 100%; border-collapse: collapse; font-size: 13px }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px; border-bottom: 1px solid var(--border) }
td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle }
tr:last-child td { border-bottom: none }
tbody tr:hover { background: var(--panel2) }
input, select, textarea { background: var(--panel2); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 4px; font-family: var(--mono); font-size: 13px; width: 100% }
input[type="text"], select, textarea { font-family: var(--sans) }
input[type="date"] { font-family: var(--mono) }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) }
input.num-input { text-align: right }
button { background: var(--panel2); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 4px; font-family: inherit; font-size: 13px; cursor: pointer; transition: all 0.15s }
button:hover { background: var(--border) }
button.primary { background: var(--accent); color: #0f1419; border-color: var(--accent); font-weight: 500 }
button.primary:hover { background: #29b6f6 }
button.danger { color: var(--bad); border-color: #5a2a30 }
button.danger:hover { background: #3d1a1f }
button.small { padding: 3px 8px; font-size: 12px }
.row { display: flex; gap: 8px; align-items: center }
.row.wrap { flex-wrap: wrap }
.tab-content { display: none }
.tab-content.active { display: block }
.field { margin-bottom: 10px }
.field label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px }
.cat-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500 }
.status { padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 10px }
.status.info { background: #1a3a4a; color: #74c0fc }
.status.success { background: #1e3a2e; color: #69db7c }
.status.error { background: #3d1a1f; color: #ff8787 }
.muted { color: var(--muted) }
.slider-row { display: grid; grid-template-columns: 220px 1fr 100px; gap: 12px; align-items: center; margin-bottom: 8px }
.slider-row label { font-size: 12px }
.slider-row input[type="range"] { padding: 0 }
.slider-row .val { font-family: var(--mono); text-align: right; font-size: 13px }
.chart-wrap { position: relative; height: 300px; margin-top: 12px }
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center }
.toolbar .spacer { flex: 1 }
.amort-table { max-height: 400px; overflow-y: auto }
.amort-table table { font-size: 12px }
.amort-table th { position: sticky; top: 0; background: var(--panel); z-index: 1 }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0 }
details { margin-bottom: 8px }
summary { cursor: pointer; padding: 6px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px }
summary:hover { color: var(--text) }
.warning-box { background: #3d2818; border: 1px solid #6b4423; color: #ffd180; padding: 10px; border-radius: 4px; font-size: 12px; margin: 10px 0 }
.info-box { background: #1a3a4a; border: 1px solid #2d5a7a; color: #aed6f5; padding: 10px; border-radius: 4px; font-size: 12px; margin: 10px 0 }
.txn-table { max-height: 600px; overflow-y: auto }
.txn-table table { font-size: 12px }
.txn-table th { position: sticky; top: 0; background: var(--panel); z-index: 1 }
.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; background: var(--panel2); color: var(--muted); margin-right: 4px; cursor: pointer }
.tag:hover { background: var(--border) }
.tag.matched { background: #1e3a2e; color: #69db7c }
.tag.unmatched { background: #3d1a1f; color: #ff8787 }
.balance-row { display: grid; grid-template-columns: 1fr 140px 30px; gap: 8px; margin-bottom: 6px; align-items: center }
.balance-row input[type="text"] { padding: 4px 8px }
.balance-row input[type="number"] { padding: 4px 8px; text-align: right }
.sro-asset-row { display: grid; grid-template-columns: 1fr 120px 120px 30px; gap: 8px; margin-bottom: 6px; align-items: center }
.sro-asset-row input[type="text"] { padding: 4px 8px }
.sro-asset-row input[type="number"] { padding: 4px 8px; text-align: right }
.sro-asset-header { display: grid; grid-template-columns: 1fr 120px 120px 30px; gap: 8px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; padding: 0 4px }
.fixations-list { margin-top: 8px }
.fixation-item { display: grid; grid-template-columns: 140px 100px 100px 100px 30px; gap: 8px; margin-bottom: 6px; align-items: center }
.fixation-item input { padding: 4px 8px }
.timeline { position: relative; padding: 20px 0 }
.timeline-item { display: grid; grid-template-columns: 120px 1fr 140px 100px 30px; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); align-items: center }
.timeline-item:hover { background: var(--panel2) }
.timeline-item.past { opacity: 0.5 }

/* Utility classes replacing inline styles */
.header-bar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px }
.mt-16 { margin-top: 16px }
.mt-12 { margin-top: 12px }
.mt-8 { margin-top: 8px }
.mb-0 { margin-bottom: 0 }
.mb-4 { margin-bottom: 4px }
.mb-6 { margin-bottom: 6px }
.mb-8 { margin-bottom: 8px }
.mb-12 { margin-bottom: 12px }
.pt-12 { padding-top: 12px }
.gap-12 { gap: 12px }
.hidden { display: none }
.chart-short { height: 240px }
.chart-medium { height: 280px }
.chart-tall { height: 200px }
.font-11 { font-size: 11px }
.font-12 { font-size: 12px }
.text-center { text-align: center }
.inline-select { display: inline-block; width: auto; padding: 2px 6px }
.col-w80 { width: 80px }
.col-w90 { width: 90px }
.col-w110 { width: 110px }
.col-w120 { width: 120px }
.col-w130 { width: 130px }
.col-w140 { width: 140px }
.col-w240 { width: 240px }
.col-w60 { width: 60px }
.col-w40 { width: 40px }
.col-w30 { width: 30px }
.sro-flex-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px }
.salary-projection-wrap { max-height: 280px; overflow-y: auto }
.ai-oneoff-header { display: grid; grid-template-columns: 130px 1fr 140px 40px; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); padding: 0 4px 4px }
.ai-oneoff-row { display: grid; grid-template-columns: 130px 1fr 140px 40px; gap: 6px; align-items: center; margin-bottom: 4px }
.indent-20 { padding-left: 20px }
ol.indent { margin-left: 20px; margin-top: 8px }