:root {
  --color-primary:#003399; --color-primary-hover:#002b80; --color-accent:#ffda1a;
  --color-bg:#f5f5f5; --color-surface:#fff; --color-text:#111; --color-text-secondary:#484848;
  --color-muted:#767676; --color-border:#dfdfdf; --color-success:#0a8a00;
  --color-warning:#e87400; --color-error:#cc0008;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --font-small:12px; --font-meta:13px; --font-body:14px; --font-section:18px;
  --font-page:26px; --font-financial:28px;
  --weight-regular:400; --weight-label:600; --weight-strong:700;
  --radius:4px; --radius-panel:8px; --shadow-dropdown:0 4px 12px rgb(17 17 17 / 8%);
  --control-height:44px; --button-height:40px; --content-width:1400px; --sidebar-width:216px;
}
* { box-sizing:border-box }
html { background:var(--color-bg); color:var(--color-text); font-family:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif }
body { margin:0; font-size:var(--font-body); line-height:1.5 }
a { color:var(--color-primary); text-decoration:none }
a:hover { text-decoration:underline }
button,input,select { font:inherit }
button { cursor:pointer }
input,select { outline:none }
:is(a,button,input,select):focus-visible { outline:2px solid var(--color-primary); outline-offset:2px }

.app-shell { display:flex; min-height:100vh }
.sidebar { width:var(--sidebar-width); flex:none; display:flex; flex-direction:column; height:100vh; position:sticky; top:0; color:#fff; background:var(--color-primary) }
.brand { min-height:50px; display:flex; align-items:center; gap:var(--space-3); padding:var(--space-1) var(--space-5); color:#fff; border-bottom:1px solid rgb(255 255 255 / 22%) }
.brand:hover,.nav-item:hover { text-decoration:none }
.brand-mark,.login-logo { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:var(--radius); background:var(--color-accent); color:var(--color-text); font-size:var(--font-meta); font-weight:var(--weight-strong) }
.brand strong { display:block; font-size:var(--font-body); line-height:1.3 }
.brand small { display:block; margin-top:var(--space-1); color:rgb(255 255 255 / 75%); font-size:var(--font-small) }
.nav-label { margin:var(--space-6) var(--space-5) var(--space-2); color:rgb(255 255 255 / 65%); font-size:var(--font-small); font-weight:var(--weight-label) }
.sidebar nav { display:grid; gap:var(--space-1); padding:0 var(--space-2) }
.nav-item { min-height:var(--control-height); display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-3); border-left:3px solid transparent; border-radius:var(--radius); color:rgb(255 255 255 / 84%); font-weight:var(--weight-label) }
.nav-icon { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.nav-item:hover { background:rgb(255 255 255 / 12%); color:#fff }
.nav-item.active { background:var(--color-primary-hover); border-left-color:var(--color-accent); color:#fff }
.sidebar-foot { margin:auto var(--space-5) var(--space-5); color:rgb(255 255 255 / 60%); font-size:var(--font-small) }
.workspace { flex:1; min-width:0 }
.topbar { height:50px; display:flex; align-items:center; gap:var(--space-4); padding:0 var(--space-6); position:sticky; top:0; z-index:10; background:var(--color-surface); border-bottom:1px solid var(--color-border) }
.eyebrow { color:var(--color-muted); font-size:var(--font-small); font-weight:var(--weight-label) }
.global-filter { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin:-8px 0 var(--space-6); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border) }
.global-filter label { display:flex; align-items:center; color:var(--color-text-secondary); font-size:var(--font-small); font-weight:var(--weight-label); white-space:nowrap }
.global-filter input,.global-filter select,.search-form input,.login-panel input { height:var(--control-height); border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-surface); padding:0 var(--space-3); color:var(--color-text) }
.global-filter input,.global-filter select { height:34px; padding:0 var(--space-2) }
.global-filter input:focus,.global-filter select:focus,.search-form input:focus,.login-panel input:focus { border-color:var(--color-primary); box-shadow:inset 0 0 0 1px var(--color-primary) }
.global-filter select { min-width:106px }
.global-filter input { width:150px }
.global-filter select[name=branch] { min-width:134px }
.locked { height:34px; display:flex; align-items:center; padding:0 var(--space-2); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius); color:var(--color-text-secondary) }
.apply,.search-form button,.login-button { min-height:var(--button-height); padding:0 var(--space-5); border:1px solid var(--color-primary); border-radius:var(--radius); background:var(--color-primary); color:#fff; font-weight:var(--weight-strong) }
.apply { height:34px; min-height:34px; padding:0 var(--space-4) }
.apply:hover,.search-form button:hover,.login-button:hover { background:var(--color-primary-hover) }
.user-area { display:flex; align-items:center; gap:var(--space-2); margin-left:auto; white-space:nowrap }
.avatar { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--color-border); border-radius:50%; color:var(--color-primary); font-size:var(--font-small); font-weight:var(--weight-strong) }
.user-name { font-size:var(--font-meta); font-weight:var(--weight-label) }
.logout { border:0; background:transparent; color:var(--color-primary); font-size:var(--font-meta); font-weight:var(--weight-label) }
.logout:hover { text-decoration:underline }
.menu-button { display:none; border:0; background:transparent; color:var(--color-primary); font-size:20px }

.main { max-width:var(--content-width); margin:auto; padding:var(--space-6) var(--space-8) var(--space-12) }
.page-head { display:flex; justify-content:space-between; align-items:start; gap:var(--space-5); margin-bottom:var(--space-6) }
.page-head h1 { margin:var(--space-1) 0; font-size:var(--font-page); line-height:1.3; font-weight:var(--weight-strong) }
.page-head p { margin:0; color:var(--color-text-secondary); font-size:var(--font-meta) }
.demo-badge { padding:var(--space-1) var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius); color:var(--color-muted); background:var(--color-surface); font-size:var(--font-small); white-space:nowrap }
.section-title { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin:var(--space-8) 0 var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--color-border) }
.section-title h2 { margin:0; font-size:var(--font-section); line-height:1.3; font-weight:var(--weight-strong) }
.section-title span { color:var(--color-muted); font-size:var(--font-small) }
.page-head + .section-title { margin-top:0 }

.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-border) }
.secondary-grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
.ratio-grid { grid-template-columns:repeat(5,minmax(0,1fr)) }
.nominal-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
.metric-card { position:relative; min-width:0; min-height:108px; padding:var(--space-4) var(--space-5); background:var(--color-surface) }
.primary-grid .metric-card { min-height:132px; padding:var(--space-5) }
.metric-link:hover { background:#f8faff }
.metric-hit { position:absolute; inset:0; z-index:1 }
.metric-label { color:var(--color-text-secondary); font-size:var(--font-small); font-weight:var(--weight-label); text-transform:uppercase }
.metric-value { margin:var(--space-2) 0 var(--space-1); color:var(--color-text); font-size:22px; line-height:1.3; font-weight:var(--weight-strong); font-variant-numeric:tabular-nums; white-space:nowrap }
.primary-grid .metric-value { font-size:var(--font-financial) }
.metric-foot { color:var(--color-muted); font-size:var(--font-small) }
.change { margin-right:var(--space-1); color:var(--color-text-secondary); font-weight:var(--weight-label); font-variant-numeric:tabular-nums }
.metric-arrow { position:absolute; top:var(--space-3); right:var(--space-4); color:var(--color-primary); font-size:var(--font-body) }
.loan-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5) }
.loan-grid,.maturity-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
.loan-group .section-title,.maturity-group .section-title { margin-top:var(--space-6) }
.maturity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4) }
.maturity-card-grid .metric-value { font-size:20px }

.chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-border) }
.chart-grid.single { grid-template-columns:1fr }
.panel { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius) }
.chart-panel { border:0; border-radius:0 }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border) }
.panel-head h2 { margin:0; font-size:var(--font-body); font-weight:var(--weight-strong) }
.panel-head span { color:var(--color-muted); font-size:var(--font-small) }
.panel-head a { font-size:var(--font-meta); font-weight:var(--weight-label) }
.chart-panel .panel-head { flex-wrap:wrap }
.chart-panel .panel-head span { margin-left:auto; text-align:right }
.chart { width:100%; height:256px; padding:var(--space-2) }
.tabs { display:flex; gap:var(--space-5); margin-bottom:var(--space-5); border-bottom:1px solid var(--color-border) }
.tabs a { display:inline-block; padding:var(--space-2) var(--space-1) var(--space-3); border-bottom:3px solid transparent; color:var(--color-text-secondary); font-weight:var(--weight-label) }
.tabs a:hover,.tabs a.selected { color:var(--color-primary); text-decoration:none }
.tabs a.selected { border-color:var(--color-primary) }

.table-panel { margin-top:var(--space-6) }
.table-scroll { overflow-x:auto }
table { width:100%; border-collapse:collapse; font-size:var(--font-meta) }
th,td { height:46px; padding:var(--space-2) var(--space-4); text-align:left; border-bottom:1px solid var(--color-border); white-space:nowrap }
thead th { height:40px; background:var(--color-bg); color:var(--color-text-secondary); font-size:var(--font-small); font-weight:var(--weight-label) }
tbody tr:hover { background:var(--color-bg) }
td { color:var(--color-text-secondary) }
td strong { color:var(--color-text); font-weight:var(--weight-label) }
th.right,td.right { text-align:right; font-variant-numeric:tabular-nums }
tfoot th { background:var(--color-bg); color:var(--color-text); font-weight:var(--weight-strong) }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums; font-size:var(--font-small) }
.empty,.empty-panel { padding:var(--space-8); text-align:center; color:var(--color-muted) }
.empty-panel { border:1px solid var(--color-border); background:var(--color-surface) }
.detail-summary { display:flex; flex-wrap:wrap; gap:1px; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-border) }
.detail-summary > div { flex:1; min-width:190px; padding:var(--space-4) var(--space-5); background:var(--color-surface) }
.detail-summary span { display:block; color:var(--color-text-secondary); font-size:var(--font-small); font-weight:var(--weight-label); text-transform:uppercase }
.detail-summary strong { display:block; margin-top:var(--space-2); font-size:20px; font-weight:var(--weight-strong); font-variant-numeric:tabular-nums }
.back-link { display:block; margin-bottom:var(--space-4); font-size:var(--font-meta); font-weight:var(--weight-label) }
.search-form { display:flex; gap:var(--space-2) }
.search-form input { width:260px }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-4); color:var(--color-text-secondary); font-size:var(--font-meta) }
.pagination div { display:flex; gap:var(--space-4) }
.pagination a { font-weight:var(--weight-label) }
.alert { margin-bottom:var(--space-5); padding:var(--space-3) var(--space-4); border:1px solid var(--color-error); border-radius:var(--radius); background:#fff5f5; color:var(--color-error) }
.htmx-indicator { opacity:0; color:var(--color-muted); font-size:var(--font-small) }
.freshness { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-2); color:var(--color-muted); font-size:var(--font-small) }
.freshness button { border:0; padding:0; background:none; color:var(--color-primary); font:inherit; font-weight:var(--weight-label); cursor:pointer }
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator { opacity:1 }
.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 }

.login-screen { min-height:100vh; display:grid; grid-template-columns:minmax(420px,48%) 1fr; background:var(--color-surface) }
.login-panel { width:min(390px,calc(100% - 40px)); margin:auto }
.login-logo { width:48px; height:48px; margin-bottom:var(--space-8); font-size:var(--font-section) }
.login-panel h1 { margin:var(--space-2) 0; font-size:var(--font-page) }
.login-panel p { margin:0 0 var(--space-8); color:var(--color-text-secondary) }
.login-panel form { display:grid; gap:var(--space-4) }
.login-panel label { display:grid; gap:var(--space-2); color:var(--color-text-secondary); font-size:var(--font-meta); font-weight:var(--weight-label) }
.login-button { height:var(--control-height); margin-top:var(--space-2) }
.demo-help { margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--color-border); color:var(--color-muted); font-size:var(--font-small) }
.demo-help strong { color:var(--color-text-secondary) }
.login-side { display:flex; align-items:center; padding:10%; background:var(--color-primary); color:#fff }
.login-side-content { max-width:470px }
.login-side .eyebrow { color:var(--color-accent) }
.login-side h2 { margin:var(--space-4) 0; font-size:30px; line-height:1.3 }
.login-side p { color:rgb(255 255 255 / 85%); font-size:var(--font-body) }

@media (max-width:1180px) {
  .ratio-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .maturity-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:900px) {
  .sidebar { position:fixed; left:calc(-1 * var(--sidebar-width)); z-index:20; transition:left .2s }
  .sidebar.open { left:0 }
  .menu-button { display:block }
  .chart-grid,.loan-comparison,.maturity-grid { grid-template-columns:1fr }
  .login-screen { grid-template-columns:1fr }
  .login-side { display:none }
}
@media (max-width:640px) {
  .main { padding:var(--space-5) var(--space-4) var(--space-8) }
  .topbar { padding:0 var(--space-4) }
  .user-name { display:none }
  .kpi-grid,.ratio-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .primary-grid .metric-value { font-size:22px }
  .metric-card,.primary-grid .metric-card { padding:var(--space-4) }
  .page-head h1 { font-size:24px }
  .search-form input { width:min(200px,42vw) }
  .panel-head { flex-wrap:wrap }
}
@media (max-width:430px) {
  .kpi-grid,.ratio-grid { grid-template-columns:1fr }
  .demo-badge,.section-title span { display:none }
}