/* Ownvale visual system: quiet surfaces, precise figures, a restrained contour motif.
   Loaded after the legacy presentation layers; no financial or access logic lives here. */
:root{
  --ds-ink:#06111d;--ds-canvas:#091725;--ds-panel:#102336;--ds-panel-2:#142b40;
  --ds-line:#2a465b;--ds-line-soft:#203a4f;--ds-text:#eaf3f7;--ds-secondary:#b4c9d5;
  --ds-muted:#8ea8b8;--ds-teal:#64decf;--ds-teal-soft:#173c43;--ds-red:#f18d9c;
  --ds-amber:#f0c77c;--ds-blue:#8bbfdd;--ds-radius:17px;--ds-radius-sm:10px;
  --ds-space-1:4px;--ds-space-2:8px;--ds-space-3:12px;--ds-space-4:16px;
  --ds-space-5:24px;--ds-space-6:32px;--ds-motion:180ms ease;
}
html{background:var(--ds-ink)}
body{background:radial-gradient(ellipse at 80% -10%,rgba(50,115,125,.15),transparent 44%),linear-gradient(180deg,#0a1929,var(--ds-ink) 75%);color:var(--ds-text);font-variant-numeric:tabular-nums lining-nums}
body::before{opacity:.08;background-size:64px 64px}
*{min-width:0}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--ds-teal);outline-offset:3px}
[hidden]{display:none!important}

/* Shell and navigation. The brand mark is intentionally independent of the name. */
.shell{grid-template-columns:248px minmax(0,1fr)}
aside{padding:24px 15px 18px;background:#071421;border-right:1px solid #213a4d;box-shadow:none;backdrop-filter:none}
aside .brand{gap:12px;padding:0 9px 6px;font-size:18px;line-height:1.12}
.brand-mark{position:relative;border-radius:11px;background:linear-gradient(155deg,#6ee7d5,#42b5b0);box-shadow:0 0 0 1px rgba(130,250,229,.22),0 8px 22px rgba(26,175,165,.10)}
.brand-mark img.brand-symbol{width:100%;height:100%;object-fit:contain}
.brand-mark:not(:has(img))::after{content:"";position:absolute;inset:6px;border:1px solid rgba(5,47,51,.30);border-radius:7px;transform:rotate(-12deg);pointer-events:none}
.brand small{font-size:9px;letter-spacing:.14em;color:var(--ds-muted)}
.brand-person{color:var(--ds-secondary);font-size:12px}
aside nav{padding-right:2px;gap:3px}
aside nav button{min-height:39px;border-radius:9px;color:#a9bece;transition:background var(--ds-motion),color var(--ds-motion),border-color var(--ds-motion)}
aside nav button:hover{transform:none;background:#172f43;color:#fff}
aside nav button.active{background:#1b394a;color:#ecfffa;border-color:#346977;box-shadow:none}
aside nav button.active::after{top:8px;bottom:8px;box-shadow:none;width:2px}
.nav-group[open]{background:#0c2030;border-color:#29465a}
.nav-group>summary{min-height:40px;color:#c3d4de}
.nav-group.has-active>summary{color:var(--ds-teal)}
.side-note{border-radius:11px;background:#0d2030;border-color:#244154;box-shadow:none;color:#90aabb}
main{max-width:1680px;padding:30px clamp(20px,3vw,46px) 64px}
.topbar{margin-bottom:20px;align-items:center}
.topbar h1{font-size:clamp(29px,2.8vw,42px);line-height:1.08;letter-spacing:-.045em;margin:7px 0 7px}
.topbar .sub{color:var(--ds-secondary);font-size:14px;line-height:1.45}
.eyebrow{color:#8db3c1;letter-spacing:.14em;font-size:10px}
.topbar .actions{gap:10px}
.button,.small-button{min-height:40px;border:1px solid #35576b;border-radius:9px;background:#173046;color:#e0edf3;box-shadow:none;transition:background var(--ds-motion),border-color var(--ds-motion),color var(--ds-motion),transform var(--ds-motion)}
.button:hover,.small-button:hover{background:#204058;border-color:#64d8ca;color:#f2fffc;transform:none;box-shadow:none}
.button.primary,.small-button.primary{background:var(--ds-teal);border-color:#75e9da;color:#08232a;box-shadow:none;font-weight:750}
.button.primary:hover,.small-button.primary:hover{background:#83ebdc;color:#072028;box-shadow:none}
.button:disabled,.small-button:disabled{opacity:.5}
.select,.field input,.field select,textarea.select,.management-form input,.management-form textarea{border:1px solid #34566b;border-radius:9px;background:#0b2031;color:#e7f2f5;min-height:40px}
.select:focus,.field input:focus,.field select:focus,textarea.select:focus{outline:2px solid var(--ds-teal);outline-offset:2px;box-shadow:none}

/* The contour line gives the first screen an identity without competing with values. */
.overview-lead{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(290px,.78fr);gap:16px;margin-bottom:16px;align-items:stretch}
body.empty-overview .overview-lead{display:block}
body.empty-overview .overview-lead>.first-run{width:100%;max-width:760px}
.overview-lead>.card{margin:0;min-width:0;min-height:0}
.card{border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius);background:#102236;box-shadow:0 9px 30px rgba(0,7,15,.13);padding:20px;animation:none;transition:border-color var(--ds-motion),background var(--ds-motion),box-shadow var(--ds-motion)}
.card::after{display:none}
.card:hover,.grid>.card:hover,#financialPosition:hover,#cashForecast:hover{box-shadow:0 10px 32px rgba(0,7,15,.18);border-color:#3a6577}
.card-head{margin-bottom:14px}
.card-head h2,.section-panel h2{font-size:17px;line-height:1.25;letter-spacing:-.02em}
.card-head p{color:var(--ds-muted);font-size:12px;line-height:1.45}
#financialPosition{position:relative;isolation:isolate;background:linear-gradient(135deg,#173447 0%,#10293a 52%,#102236 100%);border-color:#3a6e75;overflow:hidden}
#financialPosition::before{content:"";position:absolute;z-index:-1;right:-75px;top:-95px;width:280px;height:280px;border:1px solid rgba(136,230,220,.16);border-radius:50%;box-shadow:0 0 0 45px rgba(112,206,199,.035),0 0 0 90px rgba(112,206,199,.025);pointer-events:none}
#financialPosition .management-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 7px}
#financialPosition .management-metrics>div{padding:12px 14px;border:1px solid rgba(112,173,182,.19);border-radius:11px;background:rgba(5,25,36,.24)}
#financialPosition .management-metrics>div:last-child{background:rgba(91,219,202,.10);border-color:rgba(113,226,212,.36)}
#financialPosition .metric-label{color:#a9c8d0;font-size:10px;line-height:1.3;letter-spacing:.08em;margin-bottom:6px}
#financialPosition .metric-value{font-size:clamp(23px,2.2vw,34px);font-weight:770;line-height:1.12;overflow-wrap:anywhere;white-space:normal}
#financialPosition .management-metrics>div:last-child .metric-value{color:#86ecdb}
.position-details,.forecast-details{margin-top:auto;border-top-color:rgba(114,172,182,.27)}
.position-details>summary,.forecast-details>summary{color:#95e9dc;min-height:38px;display:list-item}
#financialPosition .stale-balance{font-size:12px;color:var(--ds-amber)}
#cashForecast{display:flex;flex-direction:column;background:linear-gradient(155deg,#14283c,#102236 75%)}
#cashForecast .card-head{align-items:flex-start}
#cashForecast .card-head .button{flex:0 0 auto}
#cashForecast .forecast-topline{display:block;margin:17px 0 7px}
#cashForecast .forecast-topline b{display:block;font-size:clamp(28px,2.7vw,40px);line-height:1.12;overflow-wrap:anywhere}
#cashForecast .forecast-topline span{display:block;margin-top:9px;color:var(--ds-secondary);font-size:13px}
#cashForecast .forecast-warning{font-size:12px;line-height:1.45;padding:10px 12px;margin:8px 0;border-radius:9px}
#cashForecast .forecast-warning .button{margin:7px 0 0;min-height:32px;padding:5px 9px;font-size:12px}
#cashForecast .forecast-details{width:100%}

/* Period movement is secondary to current position, and distinctly labelled. */
main>.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
main>.metrics>.card{min-height:106px;padding:16px 18px;background:#0d2031;border-color:#254258;border-radius:12px;box-shadow:none}
main>.metrics>.card::before{left:18px;right:18px;height:2px;opacity:.8}
main>.metrics .metric-label{font-size:10px;color:#a1b7c5;line-height:1.35;letter-spacing:.07em;margin-bottom:12px}
main>.metrics .metric-value{font-size:clamp(21px,1.8vw,30px);line-height:1.14;white-space:normal;overflow-wrap:anywhere}
main>.metrics .metric-foot{font-size:11px;line-height:1.4;margin-top:7px}
.positive{color:#7be6d5}.negative{color:#f39aa6}

/* Distinct work surfaces instead of one endless grid of identical cards. */
.grid{gap:16px;margin-top:0;grid-template-columns:minmax(0,1.35fr) minmax(300px,.78fr)}
.overview-column{gap:16px}
.overview-column>.card{min-width:0}
.overview-column:first-child>.card:first-child{background:#11283a}
.bar-chart{border-color:#294b60;background:repeating-linear-gradient(to bottom,rgba(131,170,187,.09) 0,rgba(131,170,187,.09) 1px,transparent 1px,transparent 25%);height:260px!important;min-height:260px}
.bar{min-width:20px;max-width:38px;border-radius:5px 5px 2px 2px!important;box-shadow:none;animation:barRise .45s ease-out both}
.bar:hover,.bar.is-hovered{transform:translateY(-2px)!important;filter:brightness(1.15)}
.bar-label{font-size:11px;color:#a9c1ce}
.chart-readout{min-height:54px;border-radius:9px!important;background:#0a2d37!important;color:#d9f5f0;line-height:1.4}
#insights .insight{padding:13px 14px;margin-bottom:8px;background:#0e2a38;border:1px solid #2a4b5a;transform:none}
#insights .insight:hover{transform:none;background:#143444}
#insights .insight b{font-size:14px;color:#eef6f7}
#insights .insight span{font-size:12px;line-height:1.5;color:#b3c9d3}
#insights .recommendation{background:#173c3d;border-color:#407f79}
.donut-row{gap:16px}
.expense-summary{align-items:center}
.expense-breakdown>summary,.fold-card>summary{min-height:44px}
.upload{border-radius:11px;border-style:dashed;background:#0b2634}
.market-card,.section-panel{margin-top:18px}
.market-sections>div{background:#0b2433}
.market-rate{background:#143043}
.table-wrap{border-radius:10px}
.table th{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#a3b8c5}
.table td{line-height:1.45}
.table .amount,.debt-amount,.forecast-grid b,.recurring-summary b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;white-space:normal}
.section-panel>.card,.section-panel .card{box-shadow:none}
body[data-view="operations"] .section-panel>.card:first-child{border-top:2px solid var(--ds-blue)}
body[data-view="debts"] .section-panel>.card:first-child{border-top:2px solid var(--ds-teal)}
body[data-view="goals"] .section-panel>.card:first-child,body[data-view="budgets"] .section-panel>.card:first-child{border-top:2px solid var(--ds-amber)}
body[data-view="chats"] .section-panel>.card:first-child{border-top:2px solid var(--ds-blue)}
.debt-card,.support-ticket,.recurring-rule{background:#0d2536;border-radius:11px}
.debt-tabs .debt-tab{min-height:44px}
.work-metrics>div,.forecast-grid>div,.recurring-summary>div{background:#0d2a38!important}
.progress,.goal-progress{height:7px;border-radius:8px;overflow:hidden}
.progress i,.goal-progress i{background:#6ee2d0}
.toast{max-width:min(460px,calc(100vw - 28px));border-radius:10px;background:#173b4a;color:#effaf8}
.toast[data-kind="warning"]{background:#42351f;border-color:#ad8445;color:#fff3d7}
.toast[data-kind="error"]{background:#4a2831;border-color:#c66d7d;color:#fff0f2}
.modal,.management-dialog,.avatar-crop-dialog{border-radius:15px;background:#10283b}
dialog{max-width:min(620px,calc(100vw - 24px));max-height:min(90vh,calc(100dvh - 24px));overflow:auto}

/* Mobile has a real bottom task dock; the complete sidebar remains under More. */
.mobile-dock{display:none}
.mobile-nav-backdrop{display:none}
@media(max-width:1180px){.overview-lead{grid-template-columns:minmax(0,1.1fr) minmax(275px,.9fr)}.grid{grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)}}
@media(max-width:960px){.overview-lead,.grid{grid-template-columns:1fr}.overview-lead{gap:12px}.grid{gap:12px}main>.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  main{padding:18px 14px calc(94px + env(safe-area-inset-bottom));max-width:100vw}
  .topbar{margin-bottom:14px;padding-right:0}
  .topbar h1{font-size:28px}
  .topbar .sub{font-size:12px;max-width:42ch}
  .topbar .actions{justify-content:flex-start;margin-top:13px}
  .topbar .actions .button.primary{min-height:42px}
  .mobile-menu-toggle{display:none!important}
  .mobile-dock{position:fixed;left:0;right:0;bottom:0;z-index:65;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));background:#071725;border-top:1px solid #315063;box-shadow:0 -10px 28px rgba(0,7,15,.27)}
  .mobile-dock button{display:grid;justify-items:center;align-content:center;gap:2px;min-height:48px;border:1px solid transparent;border-radius:8px;background:transparent;color:#a9c2ce;padding:3px 1px;line-height:1.05}
  .mobile-dock button span{font-size:21px;line-height:1}
  .mobile-dock button small{font-size:10px;font-weight:650}
  .mobile-dock button.active{color:#77e5d5;background:#173642;border-color:#315c66}
  body.mobile-nav-open .mobile-dock{display:none}
  body.mobile-nav-open .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:75;width:100%;border:0;background:rgba(0,7,15,.58)}
  body.mobile-nav-open aside{width:min(310px,88vw);padding-top:20px;z-index:80;box-shadow:18px 0 50px rgba(0,0,0,.55)}
  body.mobile-nav-open aside nav{padding-bottom:24px}
  .overview-lead{gap:10px;margin-bottom:10px}
  .card{padding:16px;border-radius:13px}
  #financialPosition .management-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #financialPosition .management-metrics>div{padding:10px}
  #financialPosition .metric-value{font-size:clamp(19px,5.4vw,27px)}
  #cashForecast .forecast-topline{margin-top:10px}
  main>.metrics{gap:8px;margin-bottom:12px}
  main>.metrics>.card{padding:12px;min-height:96px}
  main>.metrics .metric-value{font-size:clamp(18px,4.9vw,25px)}
  .grid{gap:12px}
  .bar-chart{overflow-x:auto;scrollbar-width:thin}
  .bar-col{min-width:49px}
  .card-head{gap:9px}
  .section-panel,.market-card{margin-top:12px}
  .modal-backdrop,.management-dialog::backdrop{padding-bottom:env(safe-area-inset-bottom)}
  .modal{max-height:calc(100dvh - 24px);overflow:auto}
  .table-wrap{overflow-x:auto}
  .table td,.table th{padding:10px 9px}
}
@media(max-width:360px){.topbar h1{font-size:26px}.mobile-dock button small{font-size:9px}#financialPosition .metric-value{font-size:19px}main>.metrics .metric-value{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Auth/email pages share the same material, rhythm and focus treatment. */
body.auth-screen,body.email-screen{display:grid;place-items:center;min-height:100dvh;padding:24px;background:radial-gradient(circle at 75% 5%,rgba(56,141,139,.18),transparent 36%),#071725}
body.auth-screen::before,body.email-screen::before{content:"";position:fixed;right:max(-80px,8vw);top:8vh;width:min(44vw,480px);aspect-ratio:1;border:1px solid rgba(109,215,204,.18);border-radius:50%;box-shadow:0 0 0 55px rgba(94,204,194,.025),0 0 0 110px rgba(94,204,194,.02);pointer-events:none}
body.auth-screen main,body.email-screen main{position:relative;width:min(480px,100%);max-width:480px;padding:clamp(22px,4vw,34px);background:#102638;border:1px solid #3a6371;border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.27)}
body.auth-screen main h1,body.email-screen main h1{font-size:clamp(26px,4vw,34px);line-height:1.1;letter-spacing:-.035em}
body.auth-screen main .brand,body.email-screen main>p:first-child{color:#7fe4d4;letter-spacing:.02em}
body.auth-screen main .brand,body.email-screen main .auth-brand{display:flex;align-items:center;gap:11px;color:#eaf8f5;font-size:18px;font-weight:800;line-height:1.15}
.brand-emblem{display:block;flex:0 0 36px;width:36px;height:36px;border-radius:10px}
body.auth-screen main .brand small,body.email-screen main .auth-brand small{display:block;margin-top:3px;color:#91c7c5;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none}
body.auth-screen main input,body.email-screen main input:not([type="checkbox"]){background:#0a1e2d;border-color:#43677a;min-height:46px;color-scheme:dark}
body.auth-screen input:-webkit-autofill,body.auth-screen input:-webkit-autofill:hover,body.auth-screen input:-webkit-autofill:focus,body.email-screen input:-webkit-autofill,body.email-screen input:-webkit-autofill:hover,body.email-screen input:-webkit-autofill:focus{-webkit-text-fill-color:#eaf3f7!important;box-shadow:0 0 0 1000px #0a1e2d inset!important;caret-color:#eaf3f7!important}
body.auth-screen main button,body.email-screen main button{min-height:46px;background:#67decf;color:#08262a}
body.auth-screen main a,body.email-screen main a{color:#8be6da}
body.auth-screen main p,body.email-screen main p{color:#b7cbd7}
@media(max-width:520px){body.auth-screen,body.email-screen{padding:12px}body.auth-screen main,body.email-screen main{padding:21px;border-radius:13px}}

/* Sound preferences: each label is one full-size touch and keyboard target. */
.sound-settings{display:grid;gap:16px;min-width:0}
.sound-settings h2{margin:0}
.sound-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;min-width:0}
.sound-option{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:11px;min-height:48px;padding:12px;border:1px solid var(--ds-line-soft);border-radius:10px;background:rgba(8,28,43,.56);line-height:1.4;cursor:pointer;overflow-wrap:anywhere}
.sound-option:focus-within{border-color:var(--ds-teal)}
.sound-option input{width:18px;height:18px;min-width:18px;margin:2px 0 0;accent-color:var(--ds-teal);cursor:pointer}
.sound-option span{min-width:0}
.sound-preview{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px 18px;min-width:0}
.sound-preview .button{min-height:44px;white-space:normal;text-align:center}
.sound-preview .work-note{margin:0;line-height:1.55;overflow-wrap:anywhere}
@media(max-width:700px){.sound-options{grid-template-columns:1fr}.sound-preview{grid-template-columns:1fr}.sound-preview .button{justify-self:start}}