:root{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#f6f8f6;color:#20342a;color-scheme:light;font-synthesis:none}
*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh}a{color:#196c4b}
.shell{max-width:850px;margin:0 auto;padding:24px clamp(17px,5vw,40px) 72px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:9px;color:#20342a;font-size:clamp(15px,2.6vw,18px);font-weight:780;letter-spacing:-.025em;text-decoration:none}
.brand-mark{display:grid;place-items:center;border-radius:11px;width:36px;height:36px;color:#167651;background:#ddefe4;flex-shrink:0}
.actions{display:flex;gap:10px;align-items:center}.actions form{margin:0}
.language,.small-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:43px;padding:9px 13px;border-radius:16px;border:1px solid #dce5df;background:white;color:#365448;font-weight:650;font-size:13px;cursor:pointer}
main{padding-top:clamp(40px,7vw,70px)}.intro{max-width:650px;margin-bottom:30px}.overline{display:inline-block;border-radius:99px;background:#e3f4ea;color:#27734e;padding:8px 14px;font-size:13px;font-weight:730}
h1{font-size:clamp(32px,6.5vw,52px);letter-spacing:-.045em;line-height:1.11;margin:20px 0 16px;font-weight:800}
.intro p{font-size:clamp(16px,2.4vw,19px);line-height:1.6;color:#586d61;margin:0}
.panel{border:1px solid #dfe8e1;border-radius:24px;background:#fff;padding:clamp(19px,3.5vw,28px);box-shadow:0 12px 36px rgba(28,69,41,.045);margin-bottom:18px}
.form{display:flex;flex-direction:column;gap:11px;max-width:660px}.form label,.panel label{font-size:14px;font-weight:730;color:#2c4435;margin-top:5px}
input,select{font:inherit;display:block;width:100%;min-height:51px;padding:11px 14px;border:1px solid #cbdacf;background:#fdfefd;border-radius:13px;font-size:16px;color:#1b3127}
input:focus,select:focus{outline:3px solid #95ceb0;outline-offset:1px;border-color:#327756}
input[readonly]{background:#f3f7f3;cursor:text}.button{display:inline-flex;align-items:center;justify-content:center;text-align:center;border:0;border-radius:14px;min-height:51px;padding:13px 21px;background:#197652;color:#fff;font:inherit;font-size:15px;font-weight:760;cursor:pointer;text-decoration:none}
.button:hover{background:#116543}.button.alt{background:#e8f3ed;color:#206745}.button.alt:hover{background:#d8eadf}
.form .button{margin-top:9px}.button-row{display:flex;flex-wrap:wrap;gap:10px}
:focus-visible{outline:3px solid #247957;outline-offset:3px}
.hint{font-size:13px;line-height:1.5;color:#687a6c;margin:4px 0 0}.bottom-switch{text-align:center;color:#5d7063;font-size:15px;line-height:1.7}.bottom-switch a{font-weight:750;text-decoration:none}
.alert{padding:15px 18px;background:#fff1ea;color:#7b3820;border:1px solid #f0cfc1;border-radius:13px;margin-bottom:24px;line-height:1.45}
.alert.ok{background:#eaf7ed;color:#246746;border-color:#d1e7d5}
.shortcuts{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.shortcuts a{white-space:nowrap;border:1px solid #dde7e0;padding:11px 16px;border-radius:100px;background:#fff;font-size:14px;text-decoration:none;font-weight:700}
.section{margin-top:56px;scroll-margin-top:20px}.section-title{display:flex;align-items:flex-start;gap:13px;margin-bottom:17px}
.number{font-size:13px;color:#40865b;background:#e6f5ea;border-radius:12px;padding:10px;font-weight:800}
.section-title h2{font-size:clamp(23px,4vw,29px);letter-spacing:-.03em;margin:2px 0 8px}.section-title p{font-size:15px;color:#65766a;margin:0;line-height:1.6}
.items{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}.item{border:1px solid #e4ebe5;border-radius:14px;padding:13px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.item-desc{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}.item strong{font-size:15px}.item span{font-size:14px;color:#66766b}
.item form{flex:0 0 auto}.remove{border:0;background:#f8eeee;color:#994940;font-size:12px;border-radius:9px;padding:11px 12px;min-height:42px;cursor:pointer;font-weight:730}
.empty{padding:18px;background:#eef2ee;border-radius:14px;color:#6b796d;font-size:14px;margin-bottom:16px}
.notice{margin-top:36px;background:#edf4ef;border:1px solid #dce9df;border-radius:16px;padding:19px;color:#4c6954;line-height:1.55;font-size:14px}
@media(max-width:480px){.shell{padding:15px 16px 58px}.brand{font-size:14px}.brand-mark{width:29px;height:29px}.actions{gap:6px}.language,.small-button{padding:8px 9px;font-size:12px}main{padding-top:38px}.section{margin-top:44px}.panel{border-radius:20px}.button-row .button{flex:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}


/* Stage 1.3 – uncomplicated daily household ledger */
.ledger-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;background:#e8efe9;border-radius:16px;margin-bottom:28px}
.ledger-nav a{text-align:center;display:grid;place-items:center;min-height:44px;padding:10px 8px;border-radius:12px;font-size:14px;font-weight:750;color:#53705d;text-decoration:none}
.ledger-nav a.current{background:white;color:#196748;box-shadow:0 1px 5px #283f3013}
.ledger-intro{margin-bottom:21px}.ledger-intro h1{font-size:clamp(23px,4.5vw,32px);margin-bottom:10px}
.total-money{font-size:clamp(35px,8.5vw,59px)!important;font-weight:820!important;line-height:1.15!important;color:#174c37!important;letter-spacing:-.045em;margin:8px 0 12px!important;overflow-wrap:anywhere}
.ledger-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:35px}
.ledger-stat{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e0e9e2;border-radius:17px;padding:17px}
.ledger-stat span{color:#617368;font-size:13px;font-weight:620}
.ledger-stat strong{font-size:clamp(17px,3.3vw,24px);color:#203f2d;overflow-wrap:anywhere}
.account-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:11px;margin-bottom:25px}
.account-card{background:#fff;border:1px solid #dfebe2;border-radius:17px;padding:18px;display:flex;flex-direction:column;gap:10px}
.account-card span{color:#5c7162;font-size:14px}.account-card strong{font-size:21px;overflow-wrap:anywhere}
.quick-ledger-links{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.quick-ledger-links a{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;background:#e5f3e9;padding:13px 16px;color:#1b6e49;font-size:14px;font-weight:760;text-decoration:none;min-height:45px}
.ledger-section{margin-top:32px;scroll-margin-top:18px}
.ledger-section h2{font-size:clamp(22px,4vw,28px);margin:0 0 16px;letter-spacing:-.025em}
.money-form h3{font-size:16px;margin:0 0 3px}
.money-form label{display:flex;flex-direction:column;gap:9px}
.ledger-history{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.ledger-entry{border:1px solid #e1e8e2;background:white;padding:18px;border-radius:17px}
.ledger-entry-top{display:flex;justify-content:space-between;align-items:start;gap:14px}
.ledger-entry-top div{min-width:0;display:flex;flex-direction:column;gap:4px}
.ledger-entry strong{font-size:16px}
.ledger-entry span,.ledger-entry small{font-size:12px;color:#607364;line-height:1.5;overflow-wrap:anywhere}
.ledger-entry b{white-space:nowrap;font-size:17px}
.ledger-entry.is-corrected{opacity:.62}
.ledger-entry.is-corrected b{text-decoration:line-through}
.correct-details{border-top:1px solid #e8eee9;margin-top:13px;padding-top:12px}
.correct-details summary{cursor:pointer;color:#196d48;font-size:14px;font-weight:740;min-height:36px}
.correct-details .panel{box-shadow:none;margin-top:15px;padding:16px}
.correct-details .cancel-form{margin:15px 0 0}.correct-details .cancel-form button{width:100%;border-radius:12px;min-height:45px}
@media(max-width:460px){.ledger-entry-top{flex-direction:column;gap:7px}.ledger-entry b{font-size:19px}.ledger-stats{gap:8px}.ledger-stat{padding:12px}.account-card{padding:15px}.quick-ledger-links a{flex:1;font-size:12px;padding:10px}}

.spending-list{display:flex;flex-direction:column;gap:15px;border:1px solid #e2e9e2;background:#fff;border-radius:18px;padding:20px;margin-bottom:24px}
.spending-row{display:flex;flex-direction:column;gap:8px}.spending-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px}
.spending-head strong{font-size:14px;overflow-wrap:anywhere}.spending-head span{white-space:nowrap;color:#607466;font-weight:730}
.spending-track{height:9px;border-radius:100px;background:#ecf1ec;overflow:hidden}
.spending-track span{display:block;height:100%;background:#69b38b;border-radius:100px}
.history-pages{display:flex;gap:10px;justify-content:center;margin:20px 0 30px}
.history-pages .button{min-width:130px}


/* 1.4: compact, honest budget planning; all amounts have text labels */
.ledger-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.plan-hero{background:#e9f5ed;border-color:#d3e7d8}
.plan-hero-label{font-size:14px;font-weight:750;color:#32694c}
.plan-hero-number{font-size:clamp(35px,7.7vw,56px);font-weight:800;color:#1b6140;line-height:1.15;margin:12px 0 16px;letter-spacing:-.035em;overflow-wrap:anywhere}
.plan-card h2,.plan-section h2{margin:0 0 16px;font-size:clamp(21px,4vw,27px);letter-spacing:-.025em}
.plan-money-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid #edf0ed;padding:13px 0;font-size:14px}
.plan-money-row:last-of-type{border-bottom:0}.plan-money-row span{color:#516557;max-width:65%;line-height:1.5}
.plan-money-row strong{text-align:right;overflow-wrap:anywhere}
.plan-money-row .warning{color:#a13b32}
.plan-section{margin-top:36px}
.plan-item-list{display:flex;flex-direction:column;gap:12px}
.plan-item{border:1px solid #dfebe2;background:#fff;border-radius:18px;padding:18px;margin-bottom:12px}
.plan-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.plan-item-head>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.plan-item-head strong{overflow-wrap:anywhere}.plan-item-head small{color:#6c7b70}
.plan-item-head b{white-space:nowrap;font-size:17px}
.plan-status{display:inline-block;border-radius:100px;background:#ecf4ef;padding:5px 11px;color:#426f50;font-weight:750;font-size:12px;margin:12px 0}
.plan-action{margin:9px 0 0}.plan-action select{margin-bottom:8px;max-width:100%}
.plan-action .button,.plan-action .plan-text-button{min-height:44px}
.plan-text-button{border:1px solid #d7e7dc;border-radius:11px;background:#f5faf6;color:#236b48;padding:11px 15px;font-weight:760;cursor:pointer;font:inherit;font-size:14px}
.plan-new{margin-top:18px}.plan-new summary{border:1px solid #cfe3d4;border-radius:13px;background:#e8f5eb;padding:14px 17px;font-weight:750;color:#1e704c;cursor:pointer}
.plan-new .panel{margin-top:15px}
.plan-home-preview{background:#eef7f0;padding:17px;border-radius:17px;margin:15px 0;display:flex;flex-direction:column;gap:8px}
.plan-home-caption{color:#40694b;font-size:14px;font-weight:730}
.plan-home-preview strong{font-size:clamp(28px,6vw,40px);overflow-wrap:anywhere;color:#165c38}
.plan-home-preview a{align-self:flex-start;font-weight:750}
@media(max-width:440px){.ledger-nav{gap:2px;padding:4px}.ledger-nav a{font-size:12px;padding:9px 4px}.plan-item{padding:15px}.plan-money-row{gap:8px}.plan-item-head b{font-size:15px}}

.spending-progress{display:block;width:100%;height:10px;border:0;border-radius:999px;overflow:hidden;appearance:none}
.spending-progress::-webkit-progress-bar{background:#ecf1ec;border-radius:999px}
.spending-progress::-webkit-progress-value{background:#69b38b;border-radius:999px}
.spending-progress::-moz-progress-bar{background:#69b38b;border-radius:999px}


/* UX stage 1.5: two everyday actions, short optional forms, 320px Android layout */
.skip-to-content{position:absolute;left:12px;top:-150px;z-index:100;background:#fff;color:#164b32;border:2px solid #247957;border-radius:10px;padding:12px}
.skip-to-content:focus{top:8px}
.primary-money-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 25px}
.money-action{display:flex;align-items:center;justify-content:center;gap:12px;min-height:76px;border-radius:20px;padding:14px 12px;text-align:center;text-decoration:none;font-weight:800;font-size:clamp(14px,2.4vw,17px);line-height:1.3;border:2px solid transparent}
.money-action-expense{background:#1c7952;color:#fff}.money-action-income{background:#e3f2e8;color:#17623f;border-color:#b7ddc4}
.money-action.selected{outline:3px solid #235d42;outline-offset:3px}
.money-action-symbol{font-size:27px;font-weight:500;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#ffffff26;flex-shrink:0}
.money-action-income .money-action-symbol{background:#c2e5cb}
.money-entry-section{margin:20px 0 28px;scroll-margin-top:24px}
.entry-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.entry-heading h2{font-size:22px;margin:0}.entry-close{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:#54685c;font-weight:750;font-size:14px}
.money-entry-section .panel{border-color:#bedec9;box-shadow:0 12px 32px #2a6d4012}
.list-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.list-heading h2{margin:0}.list-heading a{min-height:44px;display:inline-flex;align-items:center;color:#176e4b;font-size:14px;font-weight:800;text-decoration:none}
.extra-actions{margin-top:30px;border-top:1px solid #e3ebe6;padding-top:24px}
.extra-actions h2{font-size:20px}.transfer-link{margin-bottom:16px;max-width:100%}
.setup-add,.plan-accordion,.plan-config,.payment-options{margin-top:12px}
.setup-add>summary,.plan-accordion>summary,.plan-config>summary,.payment-options>summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    list-style:none;cursor:pointer;min-height:55px;
    padding:15px 17px;border:1px solid #d1e3d7;border-radius:15px;
    background:#e9f5ed;color:#1b6642;font-size:15px;font-weight:780;line-height:1.4
}
.setup-add>summary::-webkit-details-marker,.plan-accordion>summary::-webkit-details-marker,.plan-config>summary::-webkit-details-marker,.payment-options>summary::-webkit-details-marker{display:none}
.setup-add>summary:after,.plan-accordion>summary:after,.plan-config>summary:after,.payment-options>summary:after{content:"+";font-size:23px;line-height:1;flex-shrink:0}
.setup-add[open]>summary:after,.plan-accordion[open]>summary:after,.plan-config[open]>summary:after,.payment-options[open]>summary:after{content:"−"}
.setup-add>.panel{margin-top:12px;margin-bottom:0;box-shadow:none}
.plan-config{margin:20px 0}.plan-config>.panel{margin:12px 0 0}
.plan-breakdown>summary{cursor:pointer;min-height:48px;padding:5px 0 12px;font-size:19px;font-weight:800;color:#244535}
.plan-breakdown>summary::marker{color:#2d8456}.plan-breakdown>summary::-webkit-details-marker{color:#2d8456}
.plan-money-row:first-of-type{border-top:1px solid #e2eae3}
.plan-accordion{margin-top:0}.plan-accordion>.plan-item-list,.plan-accordion>.empty,.plan-accordion>.plan-item{margin-top:13px}
.plan-accordion>.plan-new{margin-top:14px}.plan-section>.plan-accordion{display:block}
.payment-options>summary{background:#f3f8f4;padding:12px 14px;min-height:48px}
.payment-options>.hint{margin-top:13px}.payment-options>.plan-action{margin-bottom:12px}
.setup-skip{margin:16px 0}.setup-skip .button{font-size:14px}
.shortcut a{white-space:nowrap}
input,select,textarea{min-width:0;max-width:100%}
label{line-height:1.45}
@media(max-width:600px){
  .shell{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .ledger-nav{position:fixed;left:0;bottom:0;width:100%;margin:0;
      border-top:1px solid #cbded0;border-radius:17px 17px 0 0;z-index:30;
      padding:7px max(8px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));
      background:#f0f6f1;box-shadow:0 -5px 24px #1736211a;
      grid-template-columns:repeat(4,minmax(0,1fr))}
  .ledger-nav a{min-height:49px;padding:9px 2px;font-size:clamp(11px,2.6vw,14px);line-height:1.35;overflow-wrap:anywhere}
  .plan-item-head{flex-wrap:wrap}
  .plan-item-head b{white-space:normal}
  .primary-money-actions{gap:9px}
  .money-action{min-height:78px;gap:7px;padding:11px 6px}
}
@media(max-width:360px){
  .money-action{flex-direction:column;min-height:98px;font-size:14px}
  .money-action-symbol{width:29px;height:29px;font-size:24px}
  .ledger-nav a{font-size:11px}
  .actions{gap:3px}.brand{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}