/* Dark surfaces are the default, including native controls and launch splash. */
:root{color-scheme:dark;color:#e4ede8;background:#101815;--green:#b6dfc7;--muted:#a2b5a9;--line:#33463b;--accent:#c5dc85;--surface:#19251f;--raised:#24352b;--brand:#b6dfc7}
body{background:#101815;color:#e4ede8}
button,.sidebar,.panel,.metric,.search,.skip{background:var(--surface);color:inherit}
button:hover{background:var(--raised)}
.brand-mark,.primary{background:#b6dfc7;color:#132d20;border-color:#b6dfc7}
.primary:hover{background:#ccebd8;color:#132d20}
.nav-item{color:var(--muted);background:transparent}
.nav-item.active{background:#2d4535;color:#e0f1e5}
.nav-label,.footer{color:var(--muted)}
.metric.result{background:#264733;border-color:#42614d;color:#f0f6ed}
.metric.result .metric-title,.metric.result small{color:#d6e6d7}
.setup-note{background:#26382b;border-color:#496344}
.setup-note p{color:#bfd1b9}
.empty-symbol{background:#283a2e;color:#c5dc85}
th,.dialog-footer{background:#1c2b22}
td{border-color:var(--line)}
.pill{background:#304932;color:#cee9b5}
.pill.pending{background:#483a21;color:#f0d398}
.field input,.field select,.field textarea,.search{background:#111d16;color:#e4ede8;border-color:#506657}
input::placeholder,textarea::placeholder{color:#9aafa0;opacity:1}
dialog{background:var(--surface);color:#e4ede8;box-shadow:0 20px 60px #0006}
dialog::backdrop{background:#050d09b8;backdrop-filter:none}
.danger{background:transparent;color:#ffb4a9;border-color:#85574f}
.error{background:#40261f;color:#ffd1c6}
.toast{background:#d8eadb;color:#14251b;box-shadow:0 4px 18px #0005}
.category-meter,.category-meter::-webkit-meter-bar{background:#334437}
.category-meter::-webkit-meter-optimum-value{background:#b6d683}
.category-meter::-moz-meter-bar{background:#b6d683}
hr{border:0;border-top:1px solid var(--line)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#d3e5a0}
/* Intrinsic sizes must not force a page wider than a narrow Android screen. */
.metric,.panel,.field,.form-grid>*,.page-heading>*,.setting-line>*{min-width:0}
.metric strong{font-size:clamp(19px,2.5vw,32px);overflow-wrap:anywhere;letter-spacing:-.5px}
td strong,td small,.panel-body p,.subtitle{overflow-wrap:anywhere}
.actions{flex-wrap:wrap}
dialog{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.dialog-footer{position:sticky;bottom:0}
.dialog-header{background:var(--surface)}
.month-picker{max-width:100%}
@media(max-width:760px){
 .sidebar{background:var(--surface)}
 .nav-item.active{background:#2d4535}
 .workspace{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
 main{padding-inline:16px;min-height:calc(100dvh - 210px)}
 .metric strong{font-size:clamp(18px,5.6vw,28px)}
 .metric.result strong{font-size:clamp(24px,7.5vw,34px)}
 .table-wrap{overflow:visible}
 .table-wrap table{min-width:0;width:100%;display:block}
 .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .table-wrap tbody{display:block}
 .table-wrap tr{display:block;padding:16px;border-top:1px solid var(--line)}
 .table-wrap tr:first-child{border-top:0}
 .table-wrap td{display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 12px;align-items:start;border:0;padding:6px 0;text-align:left;white-space:normal;overflow-wrap:anywhere}
 .table-wrap td::before{content:attr(data-label);font-size:11px;color:var(--muted);font-weight:400;grid-column:1;grid-row:1/3}
 .table-wrap td small,.table-wrap td strong,.table-wrap td .pill,.table-wrap td button{grid-column:2}
 .table-wrap td .pill{justify-self:start}
 .table-wrap td button{justify-self:start;min-width:96px}
 .form-grid{grid-template-columns:1fr}
 .field input,.field select,.field textarea,.search{font-size:16px}
 .dialog-header h2{font-size:20px}
 .dialog-footer{gap:8px}
 .dialog-footer .actions{flex:1;justify-content:flex-end}
 .dialog-footer button{padding-inline:12px}
 .toast{bottom:calc(88px + env(safe-area-inset-bottom));max-width:calc(100% - 24px)}
 .setting-line{flex-wrap:wrap}
 .panel-header{flex-wrap:wrap}
 .connection{font-size:12px}
 #sync-status{min-width:0;overflow-wrap:anywhere}
 .month-picker input{width:165px;max-width:100%}
 .footer{height:auto;min-height:59px;flex-wrap:wrap;gap:8px}
}