:root{--bg:#F2F5F8;--card:#fff;--ink:#0F2233;--mut:#5C6F80;--line:#DDE4EB;--side:#10283D;--acc:#E9A23B;--inc:#168A5F;--exp:#C9443B;--pri:#1E5A8A;--onpri:#fff;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B151F;--card:#12202D;--ink:#E8EEF3;--mut:#93A5B5;--line:#223545;--side:#08111A;--inc:#3CC48E;--exp:#F06A60;--pri:#6AA9DC;--onpri:#08111A;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B151F;--card:#12202D;--ink:#E8EEF3;--mut:#93A5B5;--line:#223545;--side:#08111A;--inc:#3CC48E;--exp:#F06A60;--pri:#6AA9DC;--onpri:#08111A;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,.disp{font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif;letter-spacing:-.02em;margin:0}
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
aside{background:var(--side);color:#E8EEF3;padding:28px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.logo{font:800 26px "Bricolage Grotesque",sans-serif;padding:0 10px 18px;display:flex;align-items:center;gap:10px}
.logo i{width:26px;height:26px;border-radius:8px;background:var(--acc);display:grid;place-items:center;color:#10283D;font-style:normal;font-size:15px}
nav button{all:unset;box-sizing:border-box;width:100%;padding:11px 12px;border-radius:10px;cursor:pointer;color:#A9BBCB;font-weight:500;display:flex;gap:10px;align-items:center}
nav button:hover{background:rgba(255,255,255,.06)}
nav button[aria-current=page]{background:rgba(255,255,255,.12);color:#fff}
nav button:focus-visible,.btn:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sidefoot{margin-top:auto;font-size:13px;color:#7F93A6;padding:0 10px}
main{padding:34px clamp(16px,4vw,48px) 60px;max-width:1020px;width:100%}
.top{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.top h1{font-size:clamp(26px,4vw,36px);font-weight:800}
.top p{margin:2px 0 0;color:var(--mut)}
.hero{background:var(--side);color:#fff;border-radius:22px;padding:clamp(22px,4vw,38px);position:relative;overflow:hidden}
.hero small{color:#A9BBCB;font-size:15px}
.big{font:800 clamp(44px,9vw,76px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;margin:8px 0 22px;font-variant-numeric:tabular-nums}
.split{display:flex;height:16px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.12)}
.split b{display:block;height:100%;transition:width .5s}
.leg{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:#C6D3DF}
.leg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--c)}
.leg strong{color:#fff;font-weight:600}
.strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:18px;margin:16px 0}
.strip div{padding:18px 20px;border-left:1px solid var(--line)}
.strip div:first-child{border-left:0}
.strip small{color:var(--mut);display:block}
.strip strong{font:700 24px "Bricolage Grotesque",sans-serif;font-variant-numeric:tabular-nums}
.pos{color:var(--inc)}.neg{color:var(--exp)}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.panel h3{font-size:18px;margin-bottom:14px}
.note{color:var(--mut);font-size:13px;margin-top:14px}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row .dot{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;flex:none;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.row .m{flex:1;min-width:0}.row .m b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .m small{color:var(--mut)}
.amt{font:700 17px "Bricolage Grotesque",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.x{all:unset;cursor:pointer;color:var(--mut);padding:6px 9px;border-radius:8px;font-size:13px}
.x:hover{background:var(--bg);color:var(--exp)}
.btn{all:unset;box-sizing:border-box;cursor:pointer;background:var(--pri);color:var(--onpri);padding:12px 20px;border-radius:12px;font-weight:600;text-align:center;display:inline-block}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:8px 13px;font-size:14px}
.btn:hover{filter:brightness(1.08)}
label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
textarea{min-height:90px;resize:vertical}
.amtin{font:800 clamp(36px,8vw,56px) "Bricolage Grotesque",sans-serif;padding:14px 18px;letter-spacing:-.03em}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{all:unset;cursor:pointer;padding:9px 22px;border-radius:9px;font-weight:600;color:var(--mut)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;cursor:pointer;padding:8px 14px;border-radius:99px;border:1px solid var(--line);font-size:14px;background:var(--card)}
.chip.on{background:var(--pri);color:var(--onpri);border-color:var(--pri)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.empty{text-align:center;padding:34px 10px;color:var(--mut)}
.pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.bar{height:8px;border-radius:9px;background:var(--bg);overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--pri);border-radius:9px}
#toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:99px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
#toast.on{opacity:1}
#modal{position:fixed;inset:0;background:rgba(5,12,20,.6);display:none;place-items:center;padding:20px;z-index:40}
#modal.on{display:grid}
#modal .panel{width:min(560px,100%)}
@media (max-width:820px){
.app{display:block}
aside{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));z-index:20;gap:0;border-top:1px solid rgba(255,255,255,.1)}
.logo,.sidefoot{display:none}
nav{display:flex;width:100%}
nav button{flex-direction:column;gap:2px;font-size:11px;padding:8px 2px;text-align:center;align-items:center}
main{padding-bottom:110px}
.strip{grid-template-columns:1fr 1fr}.strip div:nth-child(3){border-left:0}.strip div:nth-child(n+3){border-top:1px solid var(--line)}
.two,.grid2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:root{--bg:#F4F1FF;--ink:#14123A;--line:#D9D3FF;--side:#14123A;--pri:#3A2BE8;--acc:#FFC233;--inc:#0E9F6E;--exp:#E8402F;--bd:#14123A;--onpri:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E0C28;--card:#1A1745;--ink:#F1EEFF;--line:#34307A;--side:#080718;--pri:#4B3CF5;--bd:#8F86FF;--onpri:#fff;--inc:#3CC48E;--exp:#FF7A6B}}
:root[data-theme="dark"]{--bg:#0E0C28;--card:#1A1745;--ink:#F1EEFF;--line:#34307A;--side:#080718;--pri:#4B3CF5;--bd:#8F86FF;--onpri:#fff;--inc:#3CC48E;--exp:#FF7A6B}
body{background:var(--bg);background-image:radial-gradient(var(--line) 1.2px,transparent 1.2px);background-size:22px 22px}
.top h1{font-size:clamp(32px,6vw,54px);font-weight:800;line-height:1}
.logo i{border-radius:50%;width:30px;height:30px;box-shadow:3px 3px 0 var(--pri)}
nav button[aria-current=page]{background:var(--acc);color:#14123A;font-weight:700}
.hero{background:var(--pri);border:2px solid var(--bd);box-shadow:8px 8px 0 var(--bd);border-radius:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hl{min-width:0}.split{display:none}
.big{font-size:clamp(48px,10vw,92px);margin:6px 0 20px}
.jar{width:clamp(90px,17vw,150px);flex:none;transform:rotate(6deg)}
.panel,.strip div{border:2px solid var(--bd);box-shadow:5px 5px 0 var(--bd);border-radius:18px}
.panel h3{font-size:22px}
.strip{background:none;border:0;gap:14px;margin:26px 0}
.strip div,.strip div:first-child,.strip div:nth-child(n){border:2px solid var(--bd);box-shadow:4px 4px 0 var(--bd)}
.strip div:nth-child(1){background:color-mix(in srgb,var(--inc) 20%,var(--card))}
.strip div:nth-child(2){background:color-mix(in srgb,var(--exp) 18%,var(--card))}
.strip div:nth-child(3){background:color-mix(in srgb,var(--pri) 20%,var(--card))}
.strip div:nth-child(4){background:color-mix(in srgb,var(--acc) 35%,var(--card))}
.strip strong{font-size:28px}
.btn,.btn.ghost{border:2px solid var(--bd);box-shadow:3px 3px 0 var(--bd);transition:transform .1s,box-shadow .1s}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.ghost{background:var(--card)}
input,select,textarea{border:2px solid var(--bd);background:var(--card)}
.chip{border:2px solid var(--bd)}.chip.on{background:var(--acc);color:#14123A;border-color:var(--bd);font-weight:600}
.seg{border:2px solid var(--bd)}.seg button.on{background:var(--acc);color:#14123A;box-shadow:none}
.amtin{font-size:clamp(44px,10vw,72px)}
.pill{border:1.5px solid var(--c)}
:root{--bg:#F3F5F4;--card:#fff;--ink:#14201E;--mut:#5E6E6A;--line:#DCE3E0;--side:#0F2B28;--pri:#0F4C45;--acc:#C49A4A;--inc:#2B7A57;--exp:#B04238;--onpri:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1715;--card:#15211F;--ink:#E8EEEC;--mut:#98ABA6;--line:#25352F;--side:#0A110F;--pri:#1F5C52;--acc:#C9A25A;--inc:#4CBF8B;--exp:#E27D72;--onpri:#fff}}
:root[data-theme="dark"]{--bg:#0E1715;--card:#15211F;--ink:#E8EEEC;--mut:#98ABA6;--line:#25352F;--side:#0A110F;--pri:#1F5C52;--acc:#C9A25A;--inc:#4CBF8B;--exp:#E27D72;--onpri:#fff}
body{background-image:none}
h1,h2,h3,.disp,.logo,.big,.strip strong,.amtin{font-family:Newsreader,Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.amt{font-family:Figtree,system-ui,sans-serif;font-weight:600}
.top h1{font-size:clamp(28px,4.5vw,42px);font-weight:600;line-height:1.1}
.logo{font-weight:600;font-size:26px}
.logo i{border-radius:8px;width:26px;height:26px;box-shadow:none;background:var(--acc);color:#0F2B28}
nav button[aria-current=page]{background:rgba(255,255,255,.09);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--acc)}
.hero{background:var(--pri);border:0;border-radius:20px;box-shadow:0 14px 34px -16px rgba(10,40,36,.55)}
.hero small,.leg{color:#B9CFC9}
.big{font-size:clamp(44px,8vw,74px);font-weight:600;margin:6px 0 20px}
.jar{transform:none;width:clamp(78px,14vw,116px);opacity:.95}
.panel,.strip div,.strip div:nth-child(n){border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,32,30,.05);border-radius:16px;background:var(--card)}
.panel h3{font-size:20px;font-weight:600}
.strip{gap:12px;margin:22px 0}
.strip strong{font-size:27px;font-weight:600}
.strip div:nth-child(1){border-top:3px solid var(--inc)}
.strip div:nth-child(2){border-top:3px solid var(--exp)}
.strip div:nth-child(3){border-top:3px solid var(--pri)}
.strip div:nth-child(4){border-top:3px solid var(--acc)}
.btn,.btn.ghost{border:1px solid var(--pri);box-shadow:none;border-radius:10px;font-weight:500}
.btn:active{transform:none}
.btn.ghost{border-color:var(--line);background:var(--card)}
input,select,textarea{border:1px solid var(--line);background:var(--card);border-radius:10px}
.chip{border:1px solid var(--line)}
.chip.on{background:var(--pri);color:var(--onpri);border-color:var(--pri);font-weight:500}
.seg{border:1px solid var(--line)}.seg button.on{background:var(--pri);color:var(--onpri);box-shadow:none}
.amtin{font-size:clamp(38px,8vw,58px);font-weight:600}
.pill{border:0;white-space:nowrap;display:inline-block;margin-top:4px}
.row .m.w b{white-space:normal;overflow:visible}
.row .m.w small{display:block;margin-top:2px}
main a{color:var(--inc);font-weight:500}
.logo svg{flex:none}
@media print{body *{visibility:hidden}#modal,#modal *{visibility:visible}#modal{position:absolute;inset:0;background:#fff;display:block;padding:0}#modal .panel{box-shadow:none;border:0;padding:0}.noprint{display:none!important}}
.seg button{padding:9px 14px;white-space:nowrap}
th{position:sticky;top:0;background:var(--card);text-align:left;padding:8px;border-bottom:1px solid var(--line);font-size:13px;color:var(--mut)}
td{padding:8px;border-bottom:1px solid var(--line)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:820px){nav{overflow-x:auto}nav button{min-width:0;flex:1 1 0;width:auto;font-size:10px;padding:8px 0;letter-spacing:-.01em}}

::selection{background:var(--acc);color:#14201E}
main>*{animation:up .5s cubic-bezier(.2,.7,.2,1) both}
main>*:nth-child(2){animation-delay:.05s}main>*:nth-child(3){animation-delay:.1s}main>*:nth-child(4){animation-delay:.15s}main>*:nth-child(5){animation-delay:.2s}
@keyframes up{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){main>*{animation:none}}
main{padding-top:44px}
.panel,.strip div{transition:box-shadow .2s,transform .2s}
.panel:hover{box-shadow:0 8px 24px -14px rgba(16,32,30,.35)}
.btn:hover{transform:translateY(-1px)}
.row{transition:background .15s;border-radius:10px}.row:hover{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.hero{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 30px)}
.strip small,.hero small{text-transform:uppercase;font-size:11px;letter-spacing:.09em;font-weight:600}
.tr{display:block;font-style:normal;font-size:12px;margin-top:2px;font-weight:500}.tr.g{color:var(--inc)}.tr.b{color:var(--exp)}
nav button{transition:background .15s,color .15s}
nav button svg{flex:none}
.quick{all:unset;box-sizing:border-box;margin:2px 4px 16px;padding:12px 14px;border-radius:12px;background:var(--acc);color:#14201E;font-weight:600;cursor:pointer;display:flex;gap:8px;align-items:center;justify-content:center;transition:transform .12s,filter .12s}
.quick:hover{filter:brightness(1.07);transform:translateY(-1px)}
.quick:focus-visible,.fab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fab{display:none}
.sidefoot b{display:block;color:#C9D6D2;margin-bottom:4px;font-weight:600}
@media (max-width:820px){.quick{display:none}.fab{all:unset;box-sizing:border-box;display:grid;place-items:center;position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:var(--acc);color:#14201E;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);z-index:25;cursor:pointer}main{padding-top:28px}}
:root{--bg:#E8EFE3;--card:#FBFCF7;--line:#CBD8C7;--rule:rgba(52,112,88,.12);--col:rgba(52,112,88,.075);--margin:rgba(196,90,90,.2);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--slip:0 1px 0 rgba(255,255,255,.75) inset,0 1px 2px rgba(30,60,45,.1),0 10px 22px -16px rgba(30,60,45,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0D1814;--card:#14211D;--line:#27382F;--rule:rgba(140,200,175,.065);--col:rgba(140,200,175,.04);--margin:rgba(230,120,120,.14);--slip:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--bg:#0D1814;--card:#14211D;--line:#27382F;--rule:rgba(140,200,175,.065);--col:rgba(140,200,175,.04);--margin:rgba(230,120,120,.14);--slip:0 1px 2px rgba(0,0,0,.4)}
body{background-size:auto,auto,auto,160px 160px;background-color:var(--bg);background-image:linear-gradient(90deg,transparent 246px,var(--margin) 246px 247px,transparent 247px 250px,var(--margin) 250px 251px,transparent 251px),repeating-linear-gradient(90deg,transparent 0 99px,var(--col) 99px 100px),repeating-linear-gradient(0deg,transparent 0 27px,var(--rule) 27px 28px),var(--grain)}
@media (max-width:820px){body{background-size:auto,auto,auto,160px 160px;background-image:linear-gradient(90deg,transparent 7px,var(--margin) 7px 8px,transparent 8px 11px,var(--margin) 11px 12px,transparent 12px),repeating-linear-gradient(90deg,transparent 0 99px,var(--col) 99px 100px),repeating-linear-gradient(0deg,transparent 0 27px,var(--rule) 27px 28px),var(--grain)}}
.panel,.strip div,.strip div:nth-child(n){background-color:var(--card);background-image:var(--grain);box-shadow:var(--slip)}
.panel:hover{box-shadow:var(--slip)}
.hero{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 30px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 96px),var(--grain)}
input,select,textarea{background:color-mix(in srgb,var(--card) 70%,var(--bg))}
.logo svg{width:36px;height:36px}
:root{--rule:rgba(46,120,90,.22);--col:rgba(46,120,90,.14);--margin:rgba(205,85,85,.36)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--rule:rgba(140,205,175,.16);--col:rgba(140,205,175,.10);--margin:rgba(235,125,125,.30)}}
:root[data-theme="dark"]{--rule:rgba(140,205,175,.16);--col:rgba(140,205,175,.10);--margin:rgba(235,125,125,.30)}
.panel,.strip div,.strip div:nth-child(n){background-color:color-mix(in srgb,var(--card) 88%,transparent)}
.logo svg{width:40px;height:40px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:14px 0}
.cal .wd{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);text-align:center}
.cal .cd{min-height:50px;border:1px solid var(--line);border-radius:8px;padding:4px 6px;background:color-mix(in srgb,var(--card) 80%,transparent)}
.cal .cd b{font-size:12px;color:var(--mut);font-weight:600}
.cal .cd i{display:inline-block;width:8px;height:8px;border-radius:50%;margin:3px 3px 0 0}
.cal .cd.td{outline:2px solid var(--acc)}

/* ===== Account, lock screen, guide ===== */
#lock{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:20px}
#lock[hidden]{display:none}
.lockbox{width:min(380px,100%);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;text-align:center;box-shadow:var(--slip)}
.lockbox svg{width:56px;height:56px;margin-bottom:8px}
.lockbox h1{font-size:26px;font-weight:600}
.lockbox p{color:var(--mut)}
.lockbox input{margin:10px 0}
.lerr{min-height:20px;color:var(--exp);font-size:14px;margin-bottom:8px}
body.locked aside,body.locked main{filter:blur(10px);pointer-events:none}
.recbox{font:700 22px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-align:center;padding:16px;border:2px dashed var(--acc);border-radius:14px;background:color-mix(in srgb,var(--acc) 12%,var(--card));word-break:break-all}
.av{width:44px;height:44px;border-radius:50%;background:var(--pri);color:var(--onpri);display:grid;place-items:center;font-weight:700;flex:none}
.av.big{width:56px;height:56px;font-size:20px}
.gd{border-top:1px solid var(--line)}
.gd:first-child{border-top:0}
.gd summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between}
.gd summary::-webkit-details-marker{display:none}
.gd summary::after{content:'+';color:var(--mut)}
.gd[open] summary::after{content:'–'}
.gd .gb{padding:0 0 14px}
.gd .gb p,.gd .gb ol{margin:0 0 10px}
.gd .gb ol{padding-left:20px}
.updbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;display:flex;gap:12px;align-items:center;z-index:60}
.fab{display:none!important}
/* ===== Mobile layout: a wallet-app style home, in Kayod's own look ===== */
@media (max-width:820px){
main{padding-top:20px}
.mh{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mg small{display:block;color:var(--mut);font-size:13px}
.mg b{font:600 22px Newsreader,Georgia,serif}
.mi{margin-left:auto;display:flex;gap:8px}
.mi button{all:unset;cursor:pointer;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);position:relative;box-shadow:var(--slip)}
.dotn{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--exp)}
.bal{background-color:var(--pri);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 30px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 96px);color:#fff;border-radius:22px;padding:18px;box-shadow:0 14px 30px -16px rgba(10,40,36,.6)}
.bl{display:flex;align-items:center;gap:8px}
.bl small{text-transform:uppercase;font-size:11px;letter-spacing:.09em;font-weight:600;color:#B9CFC9}
.eye{all:unset;cursor:pointer;color:#fff;display:grid;place-items:center;opacity:.9}
.bn{font:600 42px/1.1 Newsreader,Georgia,serif;margin:6px 0 16px;font-variant-numeric:tabular-nums}
.bf{display:flex;align-items:flex-end;gap:18px}
.bf small{display:block;font-size:12px;color:#B9CFC9}
.bf b{font-weight:600}
.addb{all:unset;cursor:pointer;margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--acc);color:#14201E;font-weight:700;padding:10px 16px;border-radius:99px}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 4px}
.qa button,.sv button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;font-weight:600;text-align:center}
.qa i,.sv i{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--pri);box-shadow:var(--slip)}
.sv i{width:50px;height:50px;border-radius:16px}
.sec{font:600 19px Newsreader,Georgia,serif;margin:20px 0 10px;display:flex;justify-content:space-between;align-items:baseline}
.sec a{font:500 14px Figtree,system-ui,sans-serif;color:var(--inc)}
.sv{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px}
.pr{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
.pr::-webkit-scrollbar{display:none}
.pc{flex:0 0 78%;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--slip);cursor:pointer;display:flex;flex-direction:column;gap:4px}
.pc small{text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--mut);font-weight:600}
.pc b{font:600 18px Newsreader,Georgia,serif}
.pc span{color:var(--mut);font-size:13px}
.pc.warn{border-color:var(--acc)}
.mg2{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:14px;box-shadow:var(--slip)}
.mg2 button{all:unset;cursor:pointer;display:flex;align-items:center;gap:14px;padding:14px 16px;width:100%;box-sizing:border-box;border-top:1px solid var(--line)}
.mg2 button:first-child{border-top:0}
.mg2 i{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--pri) 12%,transparent);color:var(--pri);display:grid;place-items:center;flex:none;font-style:normal}
.mg2 span{flex:1}
.mg2 b{display:block;font-weight:600}
.mg2 small{color:var(--mut)}
aside{padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
nav{overflow:visible}
nav button{font-size:10.5px}
nav button.ctr{position:relative;color:#E8EEF3}
nav button.ctr span{width:56px;height:56px;border-radius:50%;background:var(--acc);color:#14201E;display:grid;place-items:center;margin-top:-30px;margin-bottom:2px;border:4px solid var(--side);box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
}

/* ===== Sponsor cards (static, owner chosen, never for paid users) ===== */
.spon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:12px 16px;border:1px dashed var(--line);border-radius:14px;background:color-mix(in srgb,var(--card) 70%,transparent);font-size:14px}
.spon small{text-transform:uppercase;font-size:10px;letter-spacing:.09em;color:var(--mut);font-weight:600}
.spon a{color:var(--ink);text-decoration:none;flex:1;min-width:200px}
.spon a span{color:var(--inc);font-weight:600;margin-left:6px}
a.pc.spon{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none;color:var(--ink);border:1px solid var(--line);margin-top:0;border-style:solid}

.wsb{all:unset;cursor:pointer;margin:-6px 4px 12px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);color:#E8EEF3;font-size:14px;font-weight:600;display:block;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.wsb[hidden]{display:none}
@media (max-width:820px){.wsb{display:none!important}}
/* ===== Keep every mobile screen inside the screen width ===== */
@media (max-width:820px){
.row{flex-wrap:wrap;row-gap:4px}
.row .m{flex:1 1 140px;min-width:0}
.seg{max-width:100%;flex-wrap:wrap}
.seg button{padding:9px 14px}
.strip div{min-width:0;padding:14px}
.strip strong{font-size:21px;overflow-wrap:anywhere}
.panel{min-width:0}
}

/* ===== Fine print on every screen ===== */
main::after{content:'Beta · Estimates only, not tax, legal or financial advice · Back up your data';display:block;margin-top:28px;padding-top:12px;border-top:1px solid var(--line);color:var(--mut);font-size:12px;text-align:center}

/* Mobile fix: the first-run pop-up must scroll and sit on a solid background */
@media screen{
  #modal{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:rgba(5,12,20,.82)}
  #modal .panel{
    background:var(--card);background-color:var(--card);background-image:none;
    max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:20px;font-size:16px;line-height:1.5;
    -webkit-backdrop-filter:none;backdrop-filter:none
  }
  #modal .panel p{margin:0 0 10px}
  #modal .panel h3{margin:0 0 10px}
}

/* ===== Guided tour ===== */
#tour{position:fixed;inset:0;z-index:90;touch-action:none}
#tour.blank{background:rgba(14,18,24,.84)}
#tsp{position:fixed;border-radius:16px;box-shadow:0 0 0 100vmax rgba(14,18,24,.84);outline:2px solid var(--acc);pointer-events:none;transition:left .2s,top .2s,width .2s,height .2s}
#tcard{position:fixed;left:12px;right:12px;margin:0 auto;max-width:420px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 12px 40px rgba(0,0,0,.45);max-height:calc(100vh - 24px);overflow:hidden;display:flex;flex-direction:column;touch-action:pan-y}
#tcard .tscroll{overflow-y:auto;min-height:0;flex:1 1 auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#tcard .tbtn,#tcard .tlink{flex:0 0 auto}
#tcard .tlink{align-self:flex-start}
#tcard small{color:var(--mut);font-size:12px}
#tcard h3{margin:4px 0 6px}
#tcard p{margin:0 0 14px;line-height:1.5}
#tcard .tbtn{display:flex;gap:10px;flex-wrap:wrap}
#tcard .tlink,#tcard .tlink:visited{display:inline-block;margin-top:12px;font-size:14px;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
#tcard .tlink:hover,#tcard .tlink:focus-visible{color:var(--ink)}
#tourbtn{display:none;position:fixed;right:18px;bottom:18px;z-index:30;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)}
@media (min-width:821px){#tourbtn{display:flex;align-items:center;justify-content:center}}
@media (prefers-reduced-motion:reduce){#tsp{transition:none}}