/* Unified Finance · visual design layer; business logic remains in original scripts */
:root {
  --hub-bg:#f3f6f9; --hub-surface:#ffffff; --hub-surface-alt:#f7fafc;
  --hub-ink:#172e3e; --hub-muted:#718491; --hub-border:#dfe7ee;
  --hub-primary:#167788; --hub-primary-soft:#e6f4f5;
  --hub-shadow:0 5px 24px rgba(23,46,62,.045);
}
body.app-root{--bg:var(--hub-bg);--ink:var(--hub-ink);--muted:var(--hub-muted);--green:var(--hub-primary);--line:var(--hub-border);background:var(--hub-bg);color:var(--hub-ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Arial,sans-serif}
body.app-root>header{background:rgba(255,255,255,.91);border-color:var(--hub-border);height:auto;min-height:83px;padding:17px clamp(18px,5%,70px);box-shadow:0 1px 0 rgba(23,46,62,.03)}
body.app-root .brand{font-size:29px;color:var(--hub-ink);font-weight:800;gap:10px}
body.app-root .brand span{font-size:clamp(17px,2vw,23px);letter-spacing:-.7px}
body.app-root .status{color:#477f76}
body.app-root button{border-radius:11px;transition:background .18s,border-color .18s}
body.app-root button.primary,body.app-root #add,body.app-root .income-actions .primary{background:var(--hub-primary);border-color:var(--hub-primary);color:#fff}
body.app-root button.primary:hover,body.app-root #add:hover{background:#0e6373}
body.app-root #budgetPage,body.app-root #salaryModule .shell{max-width:1390px}
body.app-root #budgetPage{padding-top:25px}
body.app-root .intro{margin-bottom:21px}
body.app-root .intro h1{font-size:clamp(25px,3vw,34px);font-weight:760;letter-spacing:-1px}
body.app-root .stats{gap:13px;margin-bottom:23px}
body.app-root .stats article,body.app-root .panel,body.app-root .salary.panel{
  background:var(--hub-surface);border:1px solid var(--hub-border);border-radius:18px;
  box-shadow:var(--hub-shadow);color:var(--hub-ink);
}
body.app-root .stats .salary-card{background:linear-gradient(145deg,#167788,#1b91a0);color:white;border-color:transparent}
body.app-root .stats .salary-card div,body.app-root .stats .salary-card small{color:#ddf5f6}
body.app-root .stats .hero{background:#e8f3f5;border-color:#d4e9eb;color:var(--hub-ink)}
body.app-root .stats .hero div{color:#456e78}
body.app-root .stats article{padding:20px}
body.app-root .stats strong{font-weight:800;font-size:clamp(22px,2.5vw,29px);letter-spacing:-.8px}
body.app-root .workspace>section>nav{background:transparent}
body.app-root .workspace>section>nav button.active,body.app-root .workspace>section>nav button:hover{color:var(--hub-primary)}
body.app-root input,body.app-root select{border-radius:10px;color:var(--hub-ink)}
body.app-root input:focus-visible,body.app-root select:focus-visible{outline:2px solid #78b9c3;outline-offset:1px}
body.app-root .salary.panel{background:var(--hub-surface)}
body.app-root .distribution-strip{background:var(--hub-primary-soft);border-color:#d3e9eb}
body.app-root .after-amount.has-addition{color:var(--hub-primary);background:var(--hub-primary-soft)}
body.app-root #salaryModule{color:var(--hub-ink)}
body.app-root #salaryModule .shell{padding-top:23px}
body.app-root #salaryModule .salary-intro{margin-top:0}
body.app-root #salaryModule .salary-intro h2{font-size:clamp(25px,3vw,34px);font-weight:770}
body.app-root #salaryModule .salary-flag{color:#48857b}
body.app-root #salaryModule .salary-kpi,
body.app-root #salaryModule .salary-panel,
body.app-root #salaryModule .salary-rate,
body.app-root #salaryModule .salary-method,
body.app-root #salaryModule .salary-insight,
body.app-root #salaryModule .salary-tile{
  background:#fff;border-color:var(--hub-border);border-radius:17px;box-shadow:var(--hub-shadow);color:var(--hub-ink)
}
body.app-root #salaryModule .salary-kpi:first-child{background:#e8f3f5;border-color:#cce5e9}
body.app-root #salaryModule .salary-kpi .s-label{color:#456e78}
body.app-root #salaryModule .btn-primary{background:var(--hub-primary);border-color:var(--hub-primary);color:white}
body.app-root #salaryModule .btn-primary:hover{background:#0e6373}
body.app-root #salaryModule .btn,body.app-root #salaryModule .salary-tools select{border-radius:11px}
body.app-root #salaryModule input,body.app-root #salaryModule textarea,body.app-root #salaryModule select{color:var(--hub-ink);background:#f7fafc;border:1px solid var(--hub-border)}
body.app-root #salaryModule .salary-table-wrap{border-radius:12px;overflow-x:auto}
body.app-root #salaryModule .salary-dialog-box,body.app-root #salaryModule .modal{background:#fff;color:var(--hub-ink);border-color:var(--hub-border)}
body.app-root #salaryModule .salary-panel{box-shadow:var(--hub-shadow)}
body.app-root #salaryModule .salary-panel h3{color:var(--hub-ink)}
/* Common top navigation shared by budget, analytics and crew. */
body.app-root .main-navigation,body.crew-view .main-navigation{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;
 max-width:1390px;margin:19px auto 0;padding:0 clamp(18px,5%,70px);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Arial,sans-serif;
}
body.app-root .unified-nav a,body.app-root .unified-nav button,body.crew-view .unified-nav a{
 min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:12px;
 padding:13px 16px!important;background:#ffffff;border:1px solid #dfe7ee!important;
 border-radius:16px!important;text-decoration:none;color:#263f50;font-size:14px;line-height:1.25;
 box-shadow:0 2px 10px rgba(23,46,62,.025);cursor:pointer;text-align:left;
}
body.app-root .unified-nav .nav-symbol,body.crew-view .unified-nav .nav-symbol{
 width:37px;height:37px;display:inline-flex;align-items:center;justify-content:center;
 flex:none;border-radius:12px;background:#eef4f7;color:#2d6778;font-size:20px;font-weight:500;
}
body.app-root .unified-nav b,body.crew-view .unified-nav b{display:block;font-size:14px;font-weight:760}
body.app-root .unified-nav small,body.crew-view .unified-nav small{display:block;font-size:11px;line-height:1.3;margin-top:3px;color:#748795;font-weight:480}
body.app-root .unified-nav .active,body.crew-view .unified-nav .active{
 background:#e8f3f5!important;border-color:#c5e3e6!important;color:#126e7c!important;
}
body.app-root .unified-nav .active .nav-symbol,body.crew-view .unified-nav .active .nav-symbol{
 background:#167788;color:white;
}
body.app-root .unified-nav a:hover,body.app-root .unified-nav button:hover,body.crew-view .unified-nav a:hover{
 border-color:#9bc9cf!important;background:#f6fbfc!important;
}
/* Crew calculator uses same canvas, card, typography and action color. */
body.crew-view{background:rgb(var(--c-canvas));font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Arial,sans-serif}
body.crew-view .main-navigation{margin-top:16px;margin-bottom:14px;padding:0 14px;max-width:900px}
body.crew-view > header{background:rgb(var(--c-surface) / .93);border-color:rgb(var(--c-line));box-shadow:0 1px 0 rgba(23,46,62,.04)}
body.crew-view #mainContainer{max-width:680px}
body.crew-view #mainContainer > section.card{border-radius:18px!important;box-shadow:0 5px 24px rgba(23,46,62,.045)}
body.crew-view button,body.crew-view input,body.crew-view select{font-family:inherit}
body.crew-view #mainContainer button{border-radius:11px}
body.crew-view .readout{font-variant-numeric:tabular-nums}
/* Two themes remain available in calculator, but the nav follows their background appropriately. */
:root[data-theme="dark"] body.crew-view .unified-nav a{
 background:#151d27!important;border-color:#2b3745!important;color:#e8edf3!important;box-shadow:none;
}
:root[data-theme="dark"] body.crew-view .unified-nav small{color:#a3afbd}
:root[data-theme="dark"] body.crew-view .unified-nav .nav-symbol{background:#26394a;color:#a8dcea}
:root[data-theme="dark"] body.crew-view .unified-nav a.active{background:#203d45!important;border-color:#3e6d7a!important;color:#c5f0f5!important}
:root[data-theme="dark"] body.crew-view .unified-nav .active .nav-symbol{background:#197c92;color:white}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.crew-view .unified-nav a{background:#151d27!important;border-color:#2b3745!important;color:#e8edf3!important;box-shadow:none}:root:not([data-theme="light"]) body.crew-view .unified-nav small{color:#a3afbd}:root:not([data-theme="light"]) body.crew-view .unified-nav .nav-symbol{background:#26394a;color:#a8dcea}:root:not([data-theme="light"]) body.crew-view .unified-nav .active{background:#203d45!important;border-color:#3e6d7a!important;color:#c5f0f5!important}}
@media(max-width:760px){
 body.app-root >header{min-height:70px;padding:14px 16px;gap:8px;flex-wrap:wrap}
 body.app-root .brand span{font-size:17px}
 body.app-root .status{order:3;width:100%;margin:0;color:#64848b}
 body.app-root .main-navigation,body.crew-view .main-navigation{gap:7px;padding:0 12px;margin-top:12px}
 body.app-root .unified-nav a,body.app-root .unified-nav button,body.crew-view .unified-nav a{padding:11px 8px!important;flex-direction:column;align-items:center;text-align:center;gap:7px;min-height:78px}
 body.app-root .unified-nav .nav-symbol,body.crew-view .unified-nav .nav-symbol{width:29px;height:29px;border-radius:9px;font-size:16px}
 body.app-root .unified-nav b,body.crew-view .unified-nav b{font-size:12px}
 body.app-root .unified-nav small,body.crew-view .unified-nav small{display:none}
 body.app-root .stats{gap:9px}
 body.app-root .stats article{padding:15px 13px}
 body.app-root .stats strong{font-size:clamp(18px,4.5vw,25px)}
 body.app-root #salaryModule .shell{padding-inline:12px}
 body.crew-view .main-navigation{margin-bottom:10px}
}
@media(max-width:370px){body.app-root .unified-nav b,body.crew-view .unified-nav b{font-size:11px}}

/* Extra contrast corrections inherited from salary's two earlier skins. */
body.app-root #salaryModule .salary-toggle button.active{color:#0e6475;background:#d8edef;border-color:#badde3}
body.app-root #salaryModule .salary-dialog-close{color:#17384c;background:#edf3f7}
body.app-root #salaryModule .salary-edit-grid textarea{color:#172e3e;background:#f7fafc}
body.app-root #salaryModule .toast{color:#172e3e;background:white}
body.app-root #salaryModule .nav-tab:hover{color:#167788}
body.app-root #salaryModule .salary-panel .panel-caption,body.app-root #salaryModule .salary-footnote{color:#718491}
/* Match the calculator's dark cockpit theme when the user's device uses dark appearance. */
@media(prefers-color-scheme:dark){
 body.app-root{--hub-bg:#0d131a;--hub-surface:#151d27;--hub-surface-alt:#1d2733;--hub-ink:#e8edf3;--hub-muted:#a3afbd;--hub-border:#2b3745;--hub-primary:#5cc8f2;--hub-primary-soft:#203642;--bg:#0d131a;--ink:#e8edf3;--muted:#a3afbd;--green:#5cc8f2;--line:#2b3745;background:#0d131a;color:#e8edf3}
 body.app-root>header{background:#151d27}
 body.app-root .brand,body.app-root .brand span{color:#e8edf3}
 body.app-root button,body.app-root input,body.app-root select,body.app-root .salary.panel,body.app-root .panel,body.app-root .stats article{background:#151d27;color:#e8edf3;border-color:#2b3745}
 body.app-root button:hover{background:#233748}
 body.app-root .stats .salary-card{background:#166c83;color:#fff}
 body.app-root .stats .hero{background:#203642;border-color:#3d626d;color:#e8edf3}
 body.app-root .stats .hero div{color:#bbd9e1}
 body.app-root .distribution-strip{background:#203642;border-color:#3c5b68;color:#e8edf3}
 body.app-root .distribution-strip b,body.app-root .income-stat b{color:#e8edf3}
 body.app-root .unified-nav a,body.app-root .unified-nav button{background:#151d27!important;color:#e8edf3!important;border-color:#2b3745!important;box-shadow:none}
 body.app-root .unified-nav .nav-symbol{background:#26394a;color:#a8dcea}
 body.app-root .unified-nav small{color:#a3afbd}
 body.app-root .unified-nav .active{background:#203d45!important;color:#c5f0f5!important;border-color:#3e6d7a!important}
 body.app-root .unified-nav .active .nav-symbol{background:#197c92;color:#fff}
 body.app-root .salary.panel,body.app-root #salaryModule .salary-kpi,body.app-root #salaryModule .salary-panel,body.app-root #salaryModule .salary-rate,body.app-root #salaryModule .salary-method,body.app-root #salaryModule .salary-insight,body.app-root #salaryModule .salary-tile{background:#151d27;color:#e8edf3;border-color:#2b3745;box-shadow:none}
 body.app-root #salaryModule .salary-kpi:first-child{background:#203642;border-color:#3c5b68}
 body.app-root #salaryModule .salary-kpi .s-label{color:#b3d7dd}
 body.app-root #salaryModule .salary-intro h2,body.app-root #salaryModule .salary-panel h3{color:#e8edf3}
 body.app-root #salaryModule .btn:not(.btn-primary),body.app-root #salaryModule .salary-tools select{background:#1d2733;color:#e8edf3;border-color:#2b3745}
 body.app-root #salaryModule input,body.app-root #salaryModule textarea,body.app-root #salaryModule select{color:#e8edf3;background:#1d2733;border-color:#2b3745}
 body.app-root #salaryModule .salary-dialog-box,body.app-root #salaryModule .modal{background:#151d27;color:#e8edf3;border-color:#2b3745}
 body.app-root #salaryModule .salary-toggle button.active{color:#c1f1f7;background:#285363;border-color:#3a6c76}
 body.app-root #salaryModule .salary-dialog-close,body.app-root #salaryModule .toast{color:#e8edf3;background:#1d2733}
 body.app-root #salaryModule .salary-edit-grid textarea{color:#e8edf3;background:#1d2733}
 body.app-root #salaryModule .salary-table th{background:#1d2733;color:#c5d9e3}
 body.app-root #salaryModule .salary-table td{color:#e8edf3;border-color:#2b3745}
 body.app-root .item,body.app-root .tablehead{background:#151d27;color:#e8edf3;border-color:#2b3745}
 body.app-root .balance-input,body.app-root .alloc,body.app-root #salary{background:#1d2733;color:#e8edf3;border-color:#2b3745}
}