.finance { max-width: 1200px; margin: 0 auto; }
.finance-demo-banner { display:inline-block; padding:6px 12px; margin:0 0 20px; background:var(--accent-soft); color:var(--accent); border-radius:6px; font-size:12px; font-weight:600; line-height:1.6; }
.finance-demo-banner[hidden] { display:none; }
#app-rail .sidebar-group { border-bottom:1px solid var(--border-light); padding:8px 0; }
#app-rail .sidebar-group > summary { display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; padding:10px 12px; font-size:12px; font-weight:650; color:var(--fg-secondary); border-radius:8px; }
#app-rail .sidebar-group > summary::-webkit-details-marker { display:none; }
#app-rail .sidebar-group > summary::after { content:'›'; font-size:18px; transform:rotate(0); transition:transform .15s; }
#app-rail .sidebar-group[open] > summary::after { transform:rotate(90deg); }
#app-rail .sidebar-group.has-active > summary { color:var(--accent); }
#app-rail .sidebar-group > summary:hover { background:var(--surface-alt); }
#app-rail .sidebar-group > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#app-rail .sidebar-subnav { display:grid; gap:2px; padding:0 0 4px 8px; }
#app-rail .sidebar-subnav .nav__link { min-height:38px; font-size:12px; }
#app-rail #nav-support { text-decoration:none; }
@media(max-width:990px) { #app-shell #app-main.board { padding-top:76px; } }
.finance-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
#app-shell .finance h1 { font-size:clamp(26px,3vw,36px); letter-spacing:-.04em; margin:0 0 8px; line-height:1.15; }
.finance-header p:not(.plan-eyebrow), .finance-register header p { margin:0; color:var(--fg-secondary); font-size:14px; line-height:1.6; }
.finance .button { min-height:42px; border-radius:10px; white-space:normal; }
.finance .button { scroll-margin-top:90px; }
.finance-header > div { flex:1; }
.finance-guide { padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:24px; }
.finance-guide summary { cursor:pointer; font-size:13px; color:var(--fg-secondary); font-weight:550; }
.finance-guide summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.finance-guide p { font-size:13px; line-height:1.6; color:var(--fg-secondary); margin:5px 0 0; max-width:90ch; }
.finance-filters { display:flex; gap:12px; align-items:end; }
.finance label { display:flex; flex-direction:column; gap:7px; color:var(--fg-secondary); font-size:12px; font-weight:550; }
.finance input, .finance select, .finance textarea { width:100%; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); color:var(--fg); font:inherit; font-size:14px; min-height:42px; padding:10px 12px; box-sizing:border-box; }
.finance input:focus-visible, .finance select:focus-visible, .finance textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.finance-search { flex:1; }
.finance-period-note, .finance-footnote { font-size:12px; line-height:1.6; color:var(--fg-tertiary); margin:12px 0 24px; }
.finance-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-bottom:16px; }
.finance-stat { padding:24px; border-right:1px solid var(--border); }
.finance-stat:last-child { border:0; }
.finance-stat:first-child { background:var(--accent-soft); }
.finance-stat span { display:block; font-size:12px; color:var(--fg-secondary); margin-bottom:12px; }
.finance-stat strong { display:block; font-size:clamp(22px,2.2vw,32px); font-variant-numeric:tabular-nums; letter-spacing:-.045em; color:var(--fg); white-space:nowrap; }
.finance-stat small { display:block; font-size:11px; color:var(--fg-tertiary); margin-top:10px; line-height:1.5; }
.finance-collection { display:flex; align-items:center; gap:20px; padding:0 4px 20px; color:var(--fg-secondary); font-size:12px; }
.finance-collection p { margin:0; }
.finance-collection progress { flex:1; min-width:60px; height:6px; appearance:none; border:0; border-radius:3px; background:var(--border); accent-color:var(--accent); }
.finance-collection progress::-webkit-progress-bar { background:var(--border); border-radius:3px; }
.finance-collection progress::-webkit-progress-value { background:var(--accent); border-radius:3px; }
.finance-collection progress::-moz-progress-bar { background:var(--accent); border-radius:3px; }
@media(max-width:600px) { .finance-collection { flex-wrap:wrap; gap:10px; } .finance-collection p { width:100%; } }
.finance-insights { display:flex; flex-wrap:wrap; gap:10px 24px; margin:0 0 28px; font-size:12px; color:var(--fg-secondary); }
.finance-insights strong { color:var(--fg); }
.finance-register { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.finance-register > header { display:flex; align-items:center; justify-content:space-between; padding:24px; gap:16px; }
.finance-register h2 { font-size:18px; margin:0 0 4px; letter-spacing:-.025em; }
#finance-count { font-size:12px; white-space:nowrap; color:var(--fg-secondary); }
.finance-row { display:grid; grid-template-columns:minmax(160px,1.4fr) minmax(120px,.85fr) minmax(110px,.75fr) minmax(140px,1fr) auto; align-items:center; gap:16px; padding:20px 24px; border-top:1px solid var(--border); }
.finance-row h3 { font-size:14px; margin:0 0 6px; word-break:break-word; }
.finance-row a { color:var(--accent); font-size:12px; text-decoration:none; }
.finance-row a:hover { text-decoration:underline; }
.finance-row small { display:block; color:var(--fg-tertiary); font-size:11px; line-height:1.6; }
.finance-row .finance-money { font-size:14px; color:var(--fg); font-variant-numeric:tabular-nums; }
.finance-stage { display:inline-block; font-size:11px; font-weight:600; padding:5px 9px; border-radius:6px; background:var(--surface-alt); color:var(--fg-secondary); }
.finance-stage[data-status=negotiating] { background:var(--accent-soft); color:var(--accent); }
.finance-stage[data-status=won] { background:color-mix(in srgb,var(--green) 10%,transparent); color:var(--green); }
.finance-row .finance-overdue { color:var(--red); }
.finance-pagination { display:flex; justify-content:flex-end; align-items:center; gap:16px; padding:16px 24px; border-top:1px solid var(--border); font-size:12px; }
#finance-feedback:not(:empty) { padding:24px; background:var(--surface-alt); font-size:14px; line-height:1.7; }
#finance-dialog { width:min(600px,calc(100vw - 32px)); box-sizing:border-box; border:1px solid var(--border); border-radius:20px; padding:28px; max-height:calc(100dvh - 32px); overflow:auto; color:var(--fg); background:var(--surface); }
#finance-dialog::backdrop { background:rgba(20,20,28,.4); backdrop-filter:blur(4px); }
.finance-editor-head { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:24px; }
.finance-editor-head h2 { margin:0; font-size:24px; letter-spacing:-.03em; }
.finance-editor-head button { font-size:22px; }
.finance-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
#finance-editor > .button { width:100%; }
#finance-editor-feedback { font-size:13px; line-height:1.5; color:var(--red); }
@media(max-width:1100px) { .finance-summary { grid-template-columns:1fr 1fr; } .finance-stat:nth-child(2) { border-right:0; } .finance-stat:nth-child(-n+2) { border-bottom:1px solid var(--border); } .finance-row { grid-template-columns:1fr 1fr; } .finance-row > :first-child { grid-column:1/-1; } }
@media(max-width:600px) { .finance-header { flex-wrap:wrap; align-items:start; gap:12px; } .finance-header > div { flex-basis:100%; } .finance-header > button { font-size:12px; padding:8px 12px; } .finance-guide { padding:16px; } .finance-filters { display:grid; grid-template-columns:1fr 1fr; } .finance-search { grid-column:1/-1; } .finance-filters > button { grid-column:1/-1; } .finance-stat { padding:16px; } .finance-stat strong { font-size:23px; } .finance-register > header,.finance-row { padding:20px 16px; } .finance-register header { align-items:start; flex-direction:column; } .finance-editor-grid { grid-template-columns:1fr; } #finance-dialog { padding:20px; } }
