:root {
    color-scheme:light;
    --bg:#f5f6f2; --surface:#ffffff; --text:#203b2d; --muted:#53675d;
    --line:#dce6df; --control-border:#758b7e; --green:#235c40; --soft:#e8f1eb;
    --income:#226448; --expense:#a73d30; --warning:#805b12; --danger:#a72f32;
    --focus:#a06d12; --button:#235c40; --button-text:#fff;
    --radius:18px; --radius-sm:10px; --shadow:0 2px 4px #132e1f03,0 8px 28px #132e1f05;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:24px; --space-6:32px; --sidebar:252px;
    font-family:Inter,"Segoe UI",sans-serif; font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
:root[data-theme=dark] {
    color-scheme:dark;
    --bg:#101b17; --surface:#18271f; --text:#edf5ef; --muted:#b1c6b8;
    --line:#354d40; --control-border:#6e8b79; --green:#a9d7b8; --soft:#254434;
    --income:#9fdbb5; --expense:#ffc1b2; --warning:#f0d08c; --danger:#ffb8b8;
    --focus:#e6bf70; --button:#9fd3b1; --button-text:#142a1d; --shadow:none;
}
@media(prefers-color-scheme:dark) {
    :root:not([data-theme]) {
        color-scheme:dark; --bg:#101b17; --surface:#18271f; --text:#edf5ef;
        --muted:#b1c6b8; --line:#354d40; --control-border:#6e8b79; --green:#a9d7b8;
        --soft:#254434; --income:#9fdbb5; --expense:#ffc1b2; --warning:#f0d08c;
        --danger:#ffb8b8; --focus:#e6bf70; --button:#9fd3b1; --button-text:#142a1d; --shadow:none;
    }
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--bg); color:var(--text); }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
a { color:var(--green); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.6; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(28px,2.6vw,36px); line-height:1.2; font-weight:650; letter-spacing:-1.1px; }
h2 { font-size:19px; line-height:1.4; letter-spacing:-.4px; }
h3 { font-size:15px; font-weight:650; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:fixed; top:-70px; left:16px; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); z-index:100; }
.skip-link:focus { top:12px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); padding:28px 18px 20px; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto; z-index:40; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:700; white-space:nowrap; min-height:44px; }
.brand-mark { display:grid; place-items:center; background:#235c40; color:#fff; border-radius:12px; width:40px; height:40px; font:32px Georgia,serif; flex-shrink:0; box-shadow:0 4px 10px #132e1f18; }
.brand-name { font-size:16px; letter-spacing:-.4px; }
.nav-label { margin:34px 12px 10px; font-size:10px; font-weight:650; letter-spacing:1.7px; color:var(--muted); }
.sidebar nav { display:grid; gap:6px; }
.nav-item { display:flex; align-items:center; gap:12px; color:var(--muted); text-decoration:none; padding:10px 12px; min-height:44px; border-radius:var(--radius-sm); font-weight:550; }
.nav-item:hover { background:var(--bg); color:var(--text); }
.nav-item.active { background:var(--soft); color:var(--green); font-weight:700; box-shadow:inset 3px 0 var(--green); }
.nav-icon,.nav-item>span:first-child { width:22px; height:22px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.nav-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ledger-nav { margin-top:4px; }
.sidebar-note { display:flex; align-items:center; gap:8px; margin-top:auto; padding:24px 12px 16px; font-size:11px; color:var(--muted); }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--income); flex-shrink:0; }
.sidebar-toggle { display:flex; align-items:center; gap:12px; min-height:44px; text-align:left; background:none; padding:12px; border:0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.sidebar-collapsed { --sidebar:84px; }
.sidebar-collapsed .sidebar { padding-inline:15px; }
.sidebar-collapsed :is(.brand-name,.nav-text,.nav-label) { display:none; }
.sidebar-collapsed .nav-item { justify-content:center; padding:11px; }
.sidebar-collapsed .sidebar nav:first-of-type { margin-top:32px; }
.sidebar-collapsed :is(.sidebar-note,.sidebar-toggle) { justify-content:center; padding-inline:0; }
.workspace { margin-left:var(--sidebar); min-width:0; }
.topbar { min-height:76px; padding:14px clamp(20px,3vw,42px); display:flex; gap:12px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--bg); color:var(--muted); font-size:12px; }
.header-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.header-actions a { display:inline-flex; align-items:center; min-height:44px; }
.header-actions form { margin:0; }
.theme-toggle { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:9px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
main { max-width:1440px; min-width:0; margin:0 auto; padding:40px clamp(20px,3vw,42px) 24px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.eyebrow { margin-bottom:10px; color:var(--muted); font-size:10px; font-weight:650; letter-spacing:1.8px; text-transform:uppercase; }
.subtitle { margin-top:12px; color:var(--muted); line-height:1.7; max-width:70ch; }
.phase-badge { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:30px; background:var(--surface); padding:8px 12px; font-size:11px; white-space:nowrap; }
footer { max-width:1440px; margin:auto; padding:24px clamp(20px,3vw,42px); display:flex; gap:16px; justify-content:space-between; color:var(--muted); font-size:11px; }
.mobile-menu-toggle,.mobile-menu-close { display:none; }
.nav-backdrop { position:fixed; inset:0; background:#07190ec9; border:0; z-index:30; }
:where(.primary-button,.secondary-button,.danger-button,.button-link) { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 17px; border-radius:var(--radius-sm); border:1px solid transparent; font-weight:650; text-decoration:none; line-height:1.4; }
.primary-button { background:var(--button); color:var(--button-text); box-shadow:0 2px 3px #132e1f12; }
.secondary-button { background:var(--surface); border-color:var(--control-border); color:var(--text); }
.danger-button { background:var(--surface); color:var(--danger); border-color:var(--danger); }
:where(.primary-button,.secondary-button,.danger-button):hover { filter:brightness(.94); text-decoration:none; }
.link-button { background:none; border:0; color:var(--green); padding:10px 0; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
.field-help { color:var(--muted); font-size:12px; line-height:1.7; }
:where(.auth-form,.ledger-form) input:not([type=hidden]):not([type=checkbox]), :where(.auth-form,.ledger-form) select, :where(.auth-form,.ledger-form) textarea { width:100%; min-width:0; min-height:46px; padding:11px 12px; background:var(--bg); color:var(--text); border:1px solid var(--control-border); border-radius:var(--radius-sm); }
:where(input,textarea)::placeholder { color:var(--muted); opacity:1; }
:where(.auth-form,.ledger-form) :is(input,select,textarea):focus-visible { background:var(--surface); }
:where(.auth-form,.ledger-form) input[readonly] { border-style:dashed; }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--button); }
.form-error,.form-notice { margin:18px 0; padding:14px 16px; border:1px solid currentColor; border-radius:var(--radius-sm); line-height:1.7; overflow-wrap:anywhere; }
.form-error { color:var(--danger); background:color-mix(in srgb,var(--danger) 5%,var(--surface)); }
.form-notice { color:var(--income); background:color-mix(in srgb,var(--income) 5%,var(--surface)); }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:6px; font-size:11px; font-weight:650; background:var(--soft); color:var(--green); white-space:nowrap; }
.badge-income,.status-normal { color:var(--income); }
.badge-expense,.status-exceeded { color:var(--expense); }
.status-warning { color:var(--warning); }
.badge-expense { background:color-mix(in srgb,var(--expense) 8%,var(--surface)); }
.settings-sections { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.settings-sections a { padding:9px 14px; min-height:44px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); text-decoration:none; }
.danger-panel { border-color:color-mix(in srgb,var(--danger) 45%,var(--line)); }
.settings-panel { scroll-margin-top:100px; }
.page-heading,.field-help,.subtitle,.ledger-panel>p { overflow-wrap:anywhere; }
.settings-panel>p { margin-bottom:18px; max-width:85ch; }
@media(max-width:1100px) { :root { --sidebar:226px; } .sidebar { padding-inline:14px; } .brand-name { font-size:14px; } }
@media(max-width:760px) {
    .workspace,.sidebar-collapsed .workspace { margin-left:0; }
    .sidebar { position:relative; width:100%; max-height:none; padding:16px; border-right:0; border-bottom:1px solid var(--line); }
    .sidebar .nav-label { margin-top:16px; }
    .sidebar-collapsed :is(.brand-name,.nav-text,.nav-label) { display:initial; }
    .sidebar-collapsed .nav-item { justify-content:flex-start; }
    .sidebar-toggle,.sidebar-note { display:none; }
    .topbar { position:sticky; top:0; z-index:20; min-height:68px; padding:10px 16px; }
    .topbar>span { display:none; }
    .header-actions { gap:10px; margin-left:auto; }
    .theme-label { display:none; }
    main { padding:24px 16px 16px; }
    .page-heading { align-items:flex-start; flex-direction:column; gap:14px; }
    footer { padding:20px 16px; flex-direction:column; gap:4px; }
    html[data-navigation=ready] .sidebar { position:fixed; inset:0 auto 0 0; width:min(300px,calc(100vw - 48px)); height:100dvh; overflow-y:auto; transform:translateX(-100%); border-right:1px solid var(--line); }
    html[data-navigation=ready] .navigation-open .sidebar { transform:translateX(0); }
    html[data-navigation=ready] .mobile-menu-toggle,html[data-navigation=ready] .mobile-menu-close { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
    .mobile-menu-close { align-self:flex-end; margin-bottom:12px; }
    body.navigation-open { overflow:hidden; }
}
@media(prefers-reduced-motion:no-preference) { .nav-item,.theme-toggle,.primary-button,.secondary-button,.danger-button { transition:background .15s ease,box-shadow .15s ease; } }

.welcome-card {
    display:grid;
    grid-template-columns:1.15fr 1fr;
    min-height:325px;
    background:#eaf0df;
    border:1px solid #e0e8d3;
    border-radius:14px;
    overflow:hidden;
    color:#244834
}

.welcome-copy {
    padding:36px 38px;
    z-index:1
}

.section-number {
    font-size:9px;
    letter-spacing:2px;
    color:#59754f
}

.welcome-copy h2 {
    font:normal clamp(25px,2.5vw,35px)/1.18 Georgia,serif;
    letter-spacing:-.6px;
    margin-top:23px
}

.welcome-copy p {
    max-width:350px;
    font-size:12px;
    line-height:1.8;
    color:#5a7059;
    margin:17px 0
}

.text-link {
    display:inline-flex;
    gap:20px;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
    padding:5px 0
}

.foundation-art {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:300px
}

.orbit {
    position:absolute;
    border:1px solid #cbd8ba;
    border-radius:50%;
    width:320px;
    height:320px
}

.orbit-two {
    width:230px;
    height:230px
}

.art-tile {
    position:absolute;
    border-radius:14px;
    box-shadow:0 12px 25px #214f3d16
}

.tile-back {
    width:165px;
    height:196px;
    background:#d3dfbe;
    transform:rotate(15deg) translate(45px,-15px);
    padding:24px;
    font:65px Georgia,serif;
    color:#7b956a
}

.tile-front {
    width:185px;
    height:220px;
    background:#fdfef8;
    transform:rotate(-9deg);
    padding:24px
}

.tile-front>span {
    font-size:8px;
    letter-spacing:1.6px;
    color:#819374
}

.tile-front strong {
    display:block;
    font:29px/1.1 Georgia,serif;
    letter-spacing:-1px;
    margin-top:18px
}

.art-bars {
    height:51px;
    display:flex;
    align-items:flex-end;
    gap:7px;
    margin-top:17px
}

.art-bars i {
    background:#bdd0a5;
    border-radius:3px 3px 0 0;
    width:21px;
    height:30%
}

.art-bars i:nth-child(2) {
    height:50%
}

.art-bars i:nth-child(3) {
    height:43%
}

.art-bars i:nth-child(4) {
    height:75%
}

.art-bars i:nth-child(5) {
    height:100%;
    background:#396444
}

.art-spark {
    position:absolute;
    font-size:45px;
    right:12%;
    top:17%;
    color:#72915a
}

.foundation-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin:26px 0 43px
}

.foundation-stats article {
    display:flex;
    gap:12px;
    align-items:center;
    padding:8px 0
}

.stat-icon {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:10px;
    border:1px solid var(--line);
    background:var(--surface);
    font-size:21px;
    flex-shrink:0
}

.foundation-stats h3 {
    font-size:12px
}

.foundation-stats p {
    font-size:10px;
    color:var(--muted);
    margin-top:6px
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
}

.section-heading .eyebrow {
    font-size:9px;
    margin-bottom:7px
}

.section-heading h2 {
    font-size:21px;
    font-weight:500;
    letter-spacing:-.5px
}

.muted {
    font-size:11px;
    color:var(--muted)
}

.phase-list {
    list-style:none;
    padding:0;
    margin:0;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    overflow:hidden
}

.phase-list li {
    display:flex;
    gap:19px;
    align-items:center;
    padding:21px 25px;
    border-bottom:1px solid var(--line)
}

.phase-list li:last-child {
    border-bottom:0
}

.phase-index {
    font-size:12px;
    color:var(--muted);
    font-variant-numeric:tabular-nums
}

.phase-list h3 {
    font-size:12px
}

.phase-list p {
    margin-top:6px;
    color:var(--muted);
    font-size:11px;
    line-height:1.5
}

.phase-list .current {
    background:color-mix(in srgb,var(--soft) 55%,var(--surface))
}

.tag,.future {
    margin-left:auto;
    white-space:nowrap;
    font-size:10px
}

.tag {
    background:var(--soft);
    color:var(--green);
    padding:6px 9px;
    border-radius:5px
}

.future {
    color:var(--muted)
}

.empty-note {
    display:flex;
    gap:13px;
    align-items:center;
    margin:22px 0 8px;
    padding:15px 20px;
    border:1px dashed var(--line);
    border-radius:8px;
    color:var(--muted);
    font-size:11px;
    line-height:1.7
}

.empty-note>span {
    font-size:20px
}

html[data-theme=dark] .welcome-card { background:#263e2e; border-color:var(--line); color:var(--text); }
html[data-theme=dark] :is(.welcome-copy p,.section-number) { color:#c3d4b9; }
html[data-theme=dark] .tile-front { color:#244834; }
@media(max-width:1100px) { .welcome-copy { padding:30px 26px; } .foundation-stats { gap:12px; } }
@media(max-width:760px) {
    .welcome-card { grid-template-columns:1fr; }
    .foundation-art { min-height:245px; order:-1; }
    .welcome-copy { padding:10px 24px 28px; }
    .foundation-stats { grid-template-columns:1fr; gap:12px; margin:24px 0 30px; }
    .phase-list li { padding:18px 16px; flex-wrap:wrap; gap:12px; }
    .phase-list li>div { flex:1; min-width:120px; }
    .phase-list .tag,.phase-list .future { margin-left:28px; }
    .section-heading { gap:12px; }
    .section-heading .muted { display:none; }
    .orbit { width:250px; height:250px; }
    .orbit-two { width:190px; height:190px; }
    .phase-badge { white-space:normal; }
}