/* XeLiX: quiet, data-first styling. Light + dark, big tap targets, bottom tab bar. */
:root{
  --bg:#f4f5f8; --surf:#ffffff; --surf2:#eef0f5; --line:#dde1ea; --text:#141a29; --muted:#5d667a; --accent:#2c56c9; --accent-ink:#fff;
  --soft:#1f7f86; --hard:#bf4a3f; --neutral:#6b7280; --golden:#a77b12; --warn:#b4541a;
  --fire:#d9785f; --earth:#7b9a5c; --air:#c8a64a; --water:#4f86b8;
  --strong:#2e8b57; --good:#7fb77e; --mixed:#d8d2c0; --avoid:#d98a80;
  --r:14px; --tap:48px; --shadow:0 1px 2px rgba(20,26,41,.06),0 2px 10px rgba(20,26,41,.05);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --glyph:"Segoe UI Symbol","Noto Sans Symbols","Noto Sans Symbols 2","Apple Symbols","DejaVu Sans",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0d1220; --surf:#151b2d; --surf2:#1c2338; --line:#273049; --text:#e6e9f2; --muted:#98a1b8; --accent:#8fb0ff; --accent-ink:#0d1220;
  --soft:#5cc0c4; --hard:#f0857a; --neutral:#9aa3b5; --golden:#e0b84f; --warn:#f0a35e;
  --fire:#e08a70; --earth:#93b571; --air:#dcc069; --water:#6fa2d6;
  --strong:#3fa36c; --good:#2f6b4d; --mixed:#3a3f4f; --avoid:#7a3a36; --shadow:none; color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0d1220; --surf:#151b2d; --surf2:#1c2338; --line:#273049; --text:#e6e9f2; --muted:#98a1b8; --accent:#8fb0ff; --accent-ink:#0d1220;
  --soft:#5cc0c4; --hard:#f0857a; --neutral:#9aa3b5; --golden:#e0b84f; --warn:#f0a35e;
  --fire:#e08a70; --earth:#93b571; --air:#dcc069; --water:#6fa2d6;
  --strong:#3fa36c; --good:#2f6b4d; --mixed:#3a3f4f; --avoid:#7a3a36; --shadow:none; color-scheme:dark; }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 var(--font);-webkit-font-smoothing:antialiased;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
body.modal-open{overflow:hidden}
a{color:var(--accent)}
h1,h2{margin:0;font-weight:650;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.05rem}
p{margin:.5em 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--surf);padding:8px 12px;z-index:50}.skip:focus{left:8px}
.main{max-width:640px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 14px 24px;outline:none}
.loading{padding:40vh 0;text-align:center;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:.875rem} .center{text-align:center} .warn{color:var(--warn)}
.gl{font-family:var(--glyph);font-variant-emoji:text;display:inline-block;min-width:1.1em;text-align:center}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 2px 12px}
.page-head .sub{color:var(--muted);font-size:.9rem;margin-top:2px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 12px;box-shadow:var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.card-head .meta{font-size:.8rem;color:var(--muted);text-align:right}
.note{font-size:.8rem;color:var(--muted);border-left:2px solid var(--line);padding-left:10px;margin:10px 0 4px}
.fibcard{border-color:color-mix(in srgb,var(--golden) 35%,var(--line))}
.interp{font-size:.92rem;margin-top:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--surf2);color:var(--text);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--hard)} .btn.ghost{background:transparent}
.btn.block{display:flex;width:100%;margin-top:10px} .btn.sm{min-height:38px;padding:0 12px;font-size:.875rem}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.iconbtn{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);background:var(--surf);color:var(--text);font-size:1.3rem;text-decoration:none;cursor:pointer}
.linkbtn{background:none;border:0;color:var(--accent);font:inherit;font-size:.85rem;font-weight:600;padding:8px 0;cursor:pointer;text-decoration:none;min-height:36px}
.pill{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:99px;background:var(--surf2);color:var(--muted);vertical-align:middle}
.pill.strong{background:var(--strong);color:#fff}.pill.good{background:var(--good);color:#fff}.pill.mixed{background:var(--mixed);color:var(--text)}.pill.avoid{background:var(--avoid);color:#fff}

.seg{display:flex;background:var(--surf2);border-radius:12px;padding:4px;gap:4px;margin:0 0 12px}
.seg a,.seg button{flex:1;text-align:center;min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--muted);text-decoration:none;font:inherit;font-weight:600;font-size:.92rem;border:0;background:none;cursor:pointer}
.seg .on{background:var(--surf);color:var(--text);box-shadow:var(--shadow)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;align-items:center}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-14px;margin-right:-14px;padding:0 14px}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--surf);color:var(--text);font:inherit;font-size:.9rem;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip.add{color:var(--accent);border-style:dashed}
.sel select,select,input[type=date],input[type=time],input:not([type]),input[type=search],input[inputmode]{min-height:var(--tap);border-radius:10px;border:1px solid var(--line);background:var(--surf);color:var(--text);font:inherit;padding:0 12px;width:100%}
.chips .sel select{min-height:40px;border-radius:99px;width:auto}
.sel.block{display:block;margin-bottom:8px}.sel.block span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}

.banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);margin-bottom:10px;text-decoration:none;color:var(--text);min-height:var(--tap)}
.banner b{display:block;font-size:.95rem}.banner small{color:var(--muted)}
.banner>span:nth-child(2){flex:1}
.banner-ico{font-size:1.3rem;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surf2);font-family:var(--glyph)}
.banner.goal .banner-ico{color:var(--golden)} .banner.bday .banner-ico{color:var(--fire)}
.chev{color:var(--muted);font-size:1.4rem}

.moon-hero{display:flex;gap:16px;align-items:center}
.moon-hero.sm{gap:12px;margin:8px 0}
.moon .moon-dark{fill:var(--surf2);stroke:var(--line)} .moon .moon-lit{fill:#e9e4d4}
:root[data-theme="light"] .moon .moon-lit{fill:#d9d2bb}
.big{font-size:1.35rem;font-weight:650}
.moon-sign{margin-top:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 0;font-size:.92rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.inline-moon{display:flex;align-items:center;gap:6px;justify-content:flex-end}

.plist,.evlist,.alist,.menu,.goals,.wins,.citylist{list-style:none;margin:0;padding:0}
.plist{display:grid;grid-template-columns:1fr;gap:0}
.row-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;text-align:left;padding:6px 0;cursor:pointer}
.plist .row-btn{font-size:.95rem;gap:10px;min-height:44px}
.plist .pn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd{font-variant-numeric:tabular-nums;white-space:nowrap}
.rx{color:var(--hard);width:1em;font-weight:700}
.evlist li:last-child .row-btn,.alist li:last-child .row-btn{border-bottom:0}
.ev-ico{flex:none;min-width:44px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:1px;border-radius:9px;background:var(--surf2);font-size:.95rem;padding:0 6px}
.ev-ico i{font-style:normal;font-family:var(--glyph);font-size:.85rem;margin:0 1px}
.ev-ico.soft i{color:var(--soft)} .ev-ico.hard i{color:var(--hard)} .ev-ico.neutral i{color:var(--neutral)} .ev-ico.golden i,.ev-ico.fib{color:var(--golden);font-weight:700}
.ev-ico.ecl{color:var(--warn);font-size:1.2rem} .ev-ico.st{color:var(--hard)}
.ev .moon{flex:none;margin:0 11px}
.ev-txt{flex:1;min-width:0}.ev-txt b{display:block;font-weight:550;font-size:.93rem}.ev-txt small{display:block;color:var(--muted);font-size:.8rem}
.ev-time{flex:none;text-align:right;font-variant-numeric:tabular-nums;font-size:.9rem}.ev-time small{display:block;color:var(--muted);font-size:.75rem}

.mnav{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
.month .dow,.month .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.month .dow span{text-align:center;font-size:.75rem;color:var(--muted);padding-bottom:4px}
.day{position:relative;aspect-ratio:1/1.08;min-height:44px;border-radius:10px;border:1px solid transparent;background:var(--surf2);color:var(--text);font:inherit;padding:4px 0 0;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.day.blank{background:none}
.day.today{border-color:var(--accent);font-weight:700}
.day.has-ecl{box-shadow:inset 0 0 0 1px var(--warn)}
.dn{font-size:.85rem}
.marks{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin-top:3px;max-width:100%}
.mk{display:inline-block;width:7px;height:7px;border-radius:50%;font-style:normal}
.mk.ph{width:12px;height:12px}.mk.ph .moon{display:block}
.mk.ph-l{background:#d9d2bb;border:1px solid var(--line)}
.mk.ecl{background:var(--warn)}.mk.st{background:var(--hard)}.mk.ing{background:var(--accent)}.mk.bd{background:var(--fire)}
.mk.fib{width:auto;height:auto;color:var(--golden);font-weight:700;font-size:.7rem;line-height:1}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:var(--muted);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.day.out{opacity:.35}
.mlbl{position:absolute;top:2px;left:4px;font-size:.6rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.day.lk .dn{margin-top:6px}
.day.lk.strong,.sw.strong{background:var(--strong);color:#fff}.day.lk.good,.sw.good{background:var(--good)}.day.lk.mixed,.sw.mixed{background:var(--mixed)}.day.lk.avoid,.sw.avoid{background:var(--avoid)}
:root:not([data-theme="dark"]) .day.lk.good{color:#10301c}
.lk-bar{display:none}

.wins li{padding:12px 0;border-bottom:1px solid var(--line)}.wins li:last-child{border-bottom:0}
.win-top{display:flex;align-items:center;gap:10px}
.rank{width:26px;height:26px;border-radius:50%;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex:none}
.win-when{flex:1;font-size:.92rem}
.goals li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.goals li>div{flex:1}.goals small{display:block;color:var(--muted);font-size:.8rem}
.row-form{display:flex;gap:8px;margin-top:10px}.row-form input{flex:1}

.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.big3>div{background:var(--surf2);border-radius:10px;padding:8px 10px}
.big3 small{display:block;color:var(--muted);font-size:.75rem}.big3 b{font-weight:600;font-size:.92rem;white-space:nowrap}
.wheel-wrap{max-width:420px;margin:0 auto}
.wheel{width:100%;height:auto;display:block}
.wheel text{font-family:var(--glyph);text-anchor:middle;dominant-baseline:central;fill:var(--text)}
.w-outer,.w-line,.w-inner{fill:none;stroke:var(--line);stroke-width:1}
.w-outer{stroke:var(--muted);stroke-opacity:.5}
.w-tick{stroke:var(--muted);stroke-width:.6;stroke-opacity:.6}
.w-el-fire{fill:var(--fire);fill-opacity:.16}.w-el-earth{fill:var(--earth);fill-opacity:.16}.w-el-air{fill:var(--air);fill-opacity:.16}.w-el-water{fill:var(--water);fill-opacity:.16}
.w-sign{font-size:14px}
.w-axis{stroke:var(--text);stroke-width:1.4}.w-cusp{stroke:var(--muted);stroke-width:.7;stroke-opacity:.7}
.w-hnum{font-size:8.5px;fill:var(--muted)!important;font-family:var(--font)!important}
.w-axlbl{font-size:9px;font-weight:700;font-family:var(--font)!important}
.w-planet{font-size:15px}.w-planet.lum{font-size:16px}
.w-deg{font-size:8px;fill:var(--muted)!important;font-family:var(--font)!important}
.w-ptick{stroke:var(--text);stroke-width:1}
.w-asp{stroke-width:1}.w-asp.soft{stroke:var(--soft)}.w-asp.hard{stroke:var(--hard)}.w-asp.neutral{stroke:var(--neutral)}.w-asp.golden{stroke:var(--golden);stroke-dasharray:3 2}
.w-phi{fill:var(--golden)}
.ptable{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.ptable th,.ptable td{padding:10px 4px;border-bottom:1px solid var(--line);text-align:left;font-weight:normal}
.ptable thead th{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ptable tbody th{font-weight:550}
.ptable tr[data-act]{cursor:pointer}
.ptable td:nth-child(4){color:var(--hard);font-weight:700}
.cusps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:.88rem;font-variant-numeric:tabular-nums}
.cusps div{background:var(--surf2);border-radius:8px;padding:6px 8px}.cusps small{color:var(--muted);margin-right:6px}
.grid-scroll{overflow-x:auto;margin:0 -4px 8px}
.agrid{border-collapse:collapse;font-size:.75rem}
.agrid td,.agrid th{width:26px;height:26px;border:1px solid var(--line);text-align:center;padding:0;line-height:1}
.agrid th{border:0;font-weight:normal;text-align:left;padding-left:3px}
.agrid td b{display:block;font-family:var(--glyph);font-size:.85rem}.agrid td small{font-size:.55rem;color:var(--muted)}
.agrid td.soft b{color:var(--soft)}.agrid td.hard b{color:var(--hard)}.agrid td.neutral b{color:var(--neutral)}.agrid td.golden b{color:var(--golden)}
.bars{display:grid;gap:6px}
.bar{display:grid;grid-template-columns:72px 1fr 24px;align-items:center;gap:8px;font-size:.85rem}
.bar i{display:block;height:8px;border-radius:4px;background:var(--surf2);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--muted);border-radius:4px}
.bar i.el-fire::after{background:var(--fire)}.bar i.el-earth::after{background:var(--earth)}.bar i.el-air::after{background:var(--air)}.bar i.el-water::after{background:var(--water)}
.bar b{text-align:right;font-weight:600}
details.more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--accent);font-size:.9rem}

.bday-count{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.bday-count .num{font-size:2.6rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.bday-count small{display:block;color:var(--muted);font-size:.85rem}
.when{color:var(--muted);font-size:.9rem;margin-top:2px}
.fibages{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;list-style:none;padding:0;margin:0 0 8px}
.fibages li{text-align:center;border-radius:10px;padding:8px 0;background:var(--surf2)}
.fibages b{display:block;font-size:1.05rem}.fibages small{color:var(--muted);font-size:.72rem}
.fibages li.past{opacity:.55}.fibages li.now{background:var(--golden);color:#1b1505}.fibages li.now small{color:#1b1505}
.fibages li.soon{box-shadow:inset 0 0 0 1.5px var(--golden)}

.pair-sel{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:12px}
.pair-sel>span{color:var(--muted)}
.compat-res{border-radius:12px;padding:12px;background:var(--surf2)}
.compat-lbl{display:flex;justify-content:space-between;align-items:baseline}.compat-lbl span{font-size:.8rem;color:var(--muted)}
.cgrid{border-collapse:separate;border-spacing:2px;font-size:.8rem;margin:0 auto}
.cgrid th{font-family:var(--glyph);font-weight:normal;color:var(--muted);width:24px;height:24px}
.cgrid td{width:24px;height:24px;padding:0;border-radius:4px}
.cgrid td button{display:block;width:100%;height:100%;min-height:24px;border:0;background:none;cursor:pointer;border-radius:4px}
.cgrid td.sel{outline:2px solid var(--text);outline-offset:-1px}
.t3{background:color-mix(in srgb,var(--soft) 75%,transparent)}.t2{background:color-mix(in srgb,var(--soft) 38%,transparent)}.t1{background:color-mix(in srgb,var(--golden) 40%,transparent)}.t0{background:color-mix(in srgb,var(--hard) 28%,transparent)}
.compat-res.t3,.compat-res.t2,.compat-res.t1,.compat-res.t0{background:var(--surf2);border-left:4px solid var(--soft)}
.compat-res.t1{border-left-color:var(--golden)}.compat-res.t0{border-left-color:var(--hard)}

.date-row{display:flex;gap:8px;align-items:center;margin-bottom:12px}.date-row input{flex:1}
.menu{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.menu.flat{border:0;background:none}
.menu a{display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:60px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.menu li:last-child a{border-bottom:0}.menu a>span:first-child{flex:1}
.menu small{display:block;color:var(--muted);font-size:.82rem}
.form label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:12px}
.form label input,.form label select{margin-top:4px;color:var(--text);font-size:1rem}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label.check{display:flex;align-items:center;gap:10px;min-height:var(--tap);color:var(--text);font-size:.95rem}
.check input{width:22px;height:22px}
.citylist{margin:-6px 0 12px;border-radius:10px;overflow:hidden}
.citylist button{display:block;width:100%;text-align:left;min-height:var(--tap);padding:8px 12px;background:var(--surf2);border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer}
.citylist small{display:block;color:var(--muted);font-size:.78rem}
.form-err{color:var(--hard);font-size:.9rem;min-height:1.2em}
.switch-row,.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px solid var(--line);font-size:.95rem}
.card .switch-row:last-of-type{border-bottom:0}
.field-row select{width:auto;max-width:60%}
input[role=switch]{appearance:none;-webkit-appearance:none;flex:none;width:50px;height:30px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;transition:background .15s;margin:0}
input[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
input[role=switch]:checked{background:var(--accent)}input[role=switch]:checked::after{transform:translateX(20px)}
.search input{margin-bottom:12px}
.faq{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:0 14px;margin-bottom:8px}
.faq summary{min-height:52px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.faq p{font-size:.92rem}
.gloss dt{font-weight:650;margin-top:12px}.gloss dd{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.bul{padding-left:18px;margin:6px 0}.bul li{margin:4px 0}
.empty{text-align:center;padding:20px 8px;color:var(--muted)}.empty h2{color:var(--text);margin:10px 0 4px}.empty .btn{margin-top:12px}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:color-mix(in srgb,var(--surf) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;color:var(--muted);text-decoration:none;font-size:.7rem;font-weight:600}
.tabbar svg{width:24px;height:24px}
.tabbar a.on{color:var(--accent)}
.help-fab{position:fixed;right:14px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:15;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surf);color:var(--muted);font:600 1.1rem var(--font);box-shadow:var(--shadow);cursor:pointer}
.sheet-wrap,.guide-wrap{position:fixed;inset:0;z-index:40;background:rgba(5,8,16,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet-wrap[hidden],.guide-wrap[hidden]{display:none}
.sheet{background:var(--surf);width:100%;max-width:640px;max-height:85vh;overflow:auto;border-radius:18px 18px 0 0;padding:8px 18px calc(16px + env(safe-area-inset-bottom))}
.sheet-grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 12px}
.sheet h2{font-size:1.2rem}
.guide-wrap{align-items:center;padding:16px}
.guide-card{background:var(--surf);border-radius:18px;padding:16px 18px;max-width:420px;width:100%;border:1px solid var(--line)}
.guide-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem}
.guide-dots{display:flex;gap:6px;margin:6px 0 12px}.guide-dots i{flex:1;height:3px;border-radius:2px;background:var(--line)}.guide-dots i.on{background:var(--accent)}
.guide-card h2{font-size:1.25rem;margin-bottom:4px}
.guide-acts{display:flex;justify-content:space-between;gap:10px;margin-top:14px}.guide-acts .btn{flex:1}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.9rem;opacity:0;pointer-events:none;transition:.2s;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%)}
@media (min-width:600px){ .plist{grid-template-columns:1fr 1fr;gap:0 16px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* Markets */
.tabbar a{font-size:.66rem}
.nfa{position:sticky;top:0;z-index:10;margin:0 -14px 12px;padding:9px 14px;padding-top:calc(9px + env(safe-area-inset-top));background:color-mix(in srgb,var(--warn) 14%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));font-size:.82rem;line-height:1.35}
.nfa b{color:var(--warn)}
.m-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.m-name{font-weight:650}.m-name small{color:var(--muted);font-weight:500}
.m-price{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}.m-price span{font-size:.9rem;font-weight:600}
.up{color:var(--soft)}.dn{color:var(--hard)}
.day .dn{color:inherit} /* 0.4.0 fix: calendar day numbers share the .dn class */
.mchart-wrap{margin:4px -6px 6px;touch-action:pan-y}
.mchart{width:100%;height:auto;display:block;font-family:var(--font)}
.mchart text{font-size:7.5px;fill:var(--muted);dominant-baseline:central}
.m-grid{stroke:var(--line);stroke-width:.6}
.m-ax{text-anchor:start}
.m-wick{stroke-width:.7}.m-wick.up{stroke:var(--soft)}.m-wick.dn{stroke:var(--hard)}
.m-body.up{fill:var(--soft)}.m-body.dn{fill:var(--hard)}
.m-fib{stroke:var(--golden);stroke-width:.7;stroke-opacity:.85}.m-fib.gold{stroke-width:1.3}.m-fib.extension{stroke-dasharray:4 3;stroke-opacity:.7}
.mchart .m-fibl{text-anchor:end;fill:var(--golden);font-size:7px;font-weight:600}
.m-last{stroke:var(--accent);stroke-width:.8;stroke-dasharray:2 2}.m-lastbox{fill:var(--accent)}.mchart .m-lastt{fill:var(--accent-ink);font-weight:700;text-anchor:start}
.m-tz{stroke:var(--neutral);stroke-width:.6;stroke-dasharray:1 2.5}.mchart .m-tzl{text-anchor:middle;font-size:6.5px}
.m-rx{fill:var(--hard);fill-opacity:.07}.mchart .m-rxl{fill:var(--hard);font-size:7px;font-family:var(--glyph)}
.m-moon.new{fill:var(--text)}.m-moon.full{fill:var(--bg);stroke:var(--text);stroke-width:1}
.m-ecl{fill:var(--warn)}
.mchart .m-asp{text-anchor:middle;font-family:var(--glyph);font-size:7.5px;fill:var(--text)}.mchart .m-asp.hard{fill:var(--hard)}.mchart .m-asp.soft{fill:var(--soft)}
.mchart .m-fd{text-anchor:middle;fill:var(--golden);font-size:6.5px;font-weight:700}
.mchart .m-date{text-anchor:end;font-size:7px}
.m-tap{fill:transparent}.m-tap.armed{cursor:crosshair;fill:var(--accent);fill-opacity:.04}
.m-handle{cursor:grab}.m-hit{fill:transparent}.m-dot{fill:var(--surf);stroke:var(--accent);stroke-width:2}.m-handle.armed .m-dot{fill:var(--accent)}
.mchart .m-hl{text-anchor:middle;font-weight:700;fill:var(--accent);font-size:7.5px}
.chips.small .chip{min-height:36px;font-size:.82rem;padding:0 11px}
.swing{margin:2px 0 4px}
.m-legend{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted);margin:6px 0}
.m-legend span{display:inline-flex;align-items:center;gap:5px}
.lg{display:inline-block;width:10px;height:10px;border-radius:50%}
.lg.rx{border-radius:2px;background:color-mix(in srgb,var(--hard) 20%,transparent)}.lg.new{background:var(--text)}.lg.full{border:1.5px solid var(--text)}.lg.ecl{background:var(--warn);transform:rotate(45deg);border-radius:1px;width:8px;height:8px}.lg.tz{border-radius:0;width:2px;height:12px;background:var(--neutral)}
.ptable.lv tr.cur th,.ptable.lv tr.cur td{color:var(--accent);font-weight:700;border-bottom:2px solid var(--accent)}
.ptable.lv tr.extension th{color:var(--muted)}
.ptable.lv td,.ptable.st td{text-align:right}.ptable.lv th .pill{margin-left:4px}
.ptable.st{font-size:.82rem}.ptable.st th,.ptable.st td{padding:8px 3px}
textarea.csv{width:100%;border-radius:10px;border:1px solid var(--line);background:var(--surf);color:var(--text);font:13px/1.4 ui-monospace,monospace;padding:8px;margin:6px 0}
.mchart .m-date.start{text-anchor:start}
.ptable.lv td,.ptable.st td,.ptable.lv th,.ptable.st th{color:var(--text)}
.ptable.st thead th,.ptable.lv thead th{color:var(--muted)}
.ptable.lv tr.extension th{color:var(--muted)}
.ptable.lv tr.cur th,.ptable.lv tr.cur td{color:var(--accent)}
.ptable.st td:nth-child(4),.ptable.lv td:nth-child(4){font-weight:400}
/* 0.4.0: "What this means" breakdowns */
details.bd{margin:12px 0 2px;border:1px solid var(--line);border-radius:12px;background:var(--surf2);overflow:hidden}
details.bd summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;font-weight:600;font-size:.9rem;color:var(--accent)}
details.bd summary::-webkit-details-marker{display:none}
details.bd summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
details.bd[open] summary::after{transform:rotate(-135deg)}
.bd-q{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.75rem;font-weight:700}
.bd-body{padding:0 12px 12px;font-size:.88rem;line-height:1.5}
.bd-sum{margin:0 0 6px;font-weight:600;color:var(--text)}
.bd-list{margin:0 0 6px;padding-left:18px}.bd-list li{margin:4px 0}
.bd-you{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.bd-you h3{font-size:.85rem;margin:0 0 4px;color:var(--text)}.bd-you p{margin:0 0 4px}
.bd-foot{margin:6px 0 0;font-size:.78rem;color:var(--muted)}
.bd-keys{display:inline-flex;flex-wrap:wrap;gap:2px 10px;vertical-align:middle}
.bd-key{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:.82rem}
.bd-dot{display:inline-block;width:14px;height:10px;border-radius:3px;flex:none}
.bd-dot.soft{background:var(--soft);height:3px}.bd-dot.hard{background:var(--hard);height:3px}.bd-dot.neutral{background:var(--neutral);height:3px}
.bd-dot.golden.dash{height:0;border-top:2px dashed var(--golden);border-radius:0}
.bd-dot.el-fire{background:var(--fire)}.bd-dot.el-earth{background:var(--earth)}.bd-dot.el-air{background:var(--air)}.bd-dot.el-water{background:var(--water)}
.bd-dot.t3{background:color-mix(in srgb,var(--soft) 75%,transparent)}.bd-dot.t2{background:color-mix(in srgb,var(--soft) 38%,transparent)}.bd-dot.t1{background:color-mix(in srgb,var(--golden) 40%,transparent)}.bd-dot.t0{background:color-mix(in srgb,var(--hard) 35%,transparent)}
.bd-dot.lk-strong{background:var(--strong)}.bd-dot.lk-good{background:var(--good)}.bd-dot.lk-mixed{background:var(--mixed)}.bd-dot.lk-avoid{background:var(--avoid)}
.bd-dot.ph{width:10px;border-radius:50%;background:#d9d2bb;border:1px solid var(--line)}.bd-dot.ecl{width:8px;height:8px;border-radius:50%;background:var(--warn)}.bd-dot.ing{width:8px;height:8px;border-radius:50%;background:var(--accent)}.bd-dot.st{width:8px;height:8px;border-radius:50%;background:var(--hard)}
.bd-dot.up{width:6px;height:12px;border-radius:1px;background:var(--soft)}.bd-dot.dn{width:6px;height:12px;border-radius:1px;background:var(--hard)}
.bd-dot.mnew{width:9px;height:9px;border-radius:50%;background:var(--text)}.bd-dot.mfull{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--text)}.bd-dot.mecl{width:8px;height:8px;background:var(--warn);transform:rotate(45deg);border-radius:1px}.bd-dot.mrx{background:color-mix(in srgb,var(--hard) 20%,transparent)}
@media print{details.bd{break-inside:avoid}}
/* 0.5.0: XeLiX brand mark (black-and-white), used on About and the first walkthrough step. The app theme stays navy/gold. */
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:56px;height:56px;border-radius:13px;box-shadow:0 0 0 1px rgba(0,0,0,.12);background:#fff;flex:none}
.brand-word{font-weight:800;font-size:1.9rem;letter-spacing:.01em;color:var(--text);line-height:1}
.brandcard{display:flex;flex-direction:column;gap:8px}.brand-tag{margin:0;color:var(--muted);font-size:.9rem}
.guide-brand{margin:6px 0 10px}.guide-brand .brand-icon{width:64px;height:64px;border-radius:15px}