:root{--bg:#0a0a0a;--fg:#f5f2ea;--mut:#a39d8c;--gold:#d4af37;--card:#16140f;--line:#2b2718;box-sizing:border-box}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#app{height:100%;max-width:520px;margin:0 auto;position:relative;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);border-inline:1px solid var(--line)}
header{padding:10px 16px 6px;display:flex;align-items:center;gap:10px}
.logo{width:30px;height:30px;border-radius:6px;display:block}
.brand{font:800 19px Fraunces,Georgia,serif}.tag{font-size:11px;color:var(--mut)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 16px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{padding:6px 14px;border:1px solid var(--line);border-radius:99px;font-size:13px;white-space:nowrap;color:var(--mut)}
.chip.on{background:var(--gold);color:#111;border-color:var(--gold);font-weight:600}
#feed{flex:1;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-width:none}
#feed::-webkit-scrollbar{display:none}
.slide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;padding:4px 16px 12px;display:flex;flex-direction:column;gap:10px;position:relative}
.img{flex:0 0 38%;border-radius:14px;position:relative;overflow:hidden;border:1px solid var(--line)}
.img svg{width:100%;height:100%}
.cat{position:absolute;left:10px;top:10px;background:#000c;color:var(--gold);font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid var(--gold)}
.demo{position:absolute;right:10px;top:10px;background:var(--gold);color:#111;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px}
h2{font:800 clamp(22px,6vw,29px)/1.15 Fraunces,Georgia,serif}
.sum{color:#d8d3c4;font-size:15px;line-height:1.55;max-width:60ch}
.meta{font-size:12px;color:var(--mut)}
.row{margin-top:auto;display:flex;align-items:center;gap:4px;padding-right:44px}
.act{padding:8px 10px;border-radius:10px;font-size:13px;color:var(--fg)}.act.on{color:var(--gold)}
.more{margin-left:auto;background:var(--gold);color:#111;font-weight:600;padding:9px 16px;border-radius:10px;font-size:14px}
.prog{position:absolute;right:8px;top:30%;display:flex;flex-direction:column;gap:5px;z-index:2}
.dot{width:4px;height:14px;border-radius:2px;background:var(--line);transition:.25s}.dot.on{background:var(--gold);height:26px}
.ad{align-items:center;justify-content:center;text-align:center;border:1px dashed var(--line);border-radius:14px;margin:4px 16px 12px;height:calc(100% - 16px);color:var(--mut)}
.ad b{display:block;font-size:11px;letter-spacing:.04em;margin-bottom:6px}
nav{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);background:#0a0a0a}
nav button{padding:11px 0 9px;font-size:11px;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:3px}
nav button.on{color:var(--gold)}nav span{font-size:18px}
.state{height:100%;display:grid;place-content:center;text-align:center;padding:30px;gap:12px;color:var(--mut)}
.spin{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:s 1s linear infinite;margin:auto}
@keyframes s{to{rotate:360deg}}
.sheet{position:absolute;inset:0;background:var(--bg);z-index:10;padding:20px 18px;overflow:auto;display:none}
.sheet.show{display:block}.sheet h3{font:800 22px Fraunces,serif;margin-bottom:12px}
.sheet p{color:#d8d3c4;line-height:1.6;margin-bottom:10px;font-size:14px}
input{width:100%;padding:12px;margin-bottom:10px;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:10px;font:inherit}
.close{float:right;color:var(--gold)}
.item{padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.toast{position:absolute;left:50%;bottom:90px;translate:-50% 0;background:var(--gold);color:#111;padding:8px 14px;border-radius:10px;font-size:13px;z-index:20;opacity:0;transition:.3s;pointer-events:none}.toast.show{opacity:1}
@media(prefers-reduced-motion:reduce){#feed{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---- Profile and sign in ---- */
.pf-brand{text-align:center;margin:8px 0 18px}
.pf-brand img{border-radius:12px;box-shadow:0 0 0 1px var(--gold),0 8px 30px #d4af3722}
.pf-brand h3{margin:12px 0 4px!important}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:16px}
.tabs button{padding:10px;border-radius:9px;font-size:14px;color:var(--mut)}
.tabs button.on{background:var(--gold);color:#111;font-weight:600}
.pwwrap{position:relative}
.pwwrap input{padding-right:64px}
.eye{position:absolute;right:6px;top:6px;padding:8px 10px;font-size:12px;color:var(--gold)}
.btn-block{display:block;width:100%;background:var(--gold);color:#111;font-weight:600;padding:13px;border-radius:12px;font-size:15px;margin-top:4px}
.sheet input:focus{border-color:var(--gold)}
.codebox{text-align:center;font-size:24px;letter-spacing:.35em}
.pf-msg{min-height:20px;font-size:13px;margin-top:10px}
.pf-links{text-align:center;margin-top:16px;font-size:13px;color:var(--mut)}
.pf-links a{color:var(--gold)}
.pf-hero{text-align:center;padding:18px 0 14px}
.avatar{width:84px;height:84px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font:800 36px Fraunces,Georgia,serif;color:#111;background:linear-gradient(135deg,#f1d57a,#d4af37 55%,#a8821c);box-shadow:0 0 0 4px #d4af3730,0 10px 30px #d4af3733}
.pf-name{font:800 22px Fraunces,Georgia,serif;text-transform:capitalize}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.stat b{display:block;font:800 24px Fraunces,Georgia,serif;color:var(--gold)}
.stat span{font-size:12px;color:var(--mut)}
.menu{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px}
.menu button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:14px 16px;font-size:15px;border-bottom:1px solid var(--line)}
.menu button:last-child{border-bottom:0}
.menu button:hover{background:#d4af3710}
.signout{display:block;width:100%;padding:13px;border:1px solid #e07a6a66;color:#e07a6a;border-radius:12px;font-size:15px}
.slide{overflow:hidden}
.img{flex:0 1 30%;min-height:110px}
h2{flex:0 0 auto;font-size:clamp(20px,5.4vw,26px);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sum{flex:1 1 auto;min-height:0;overflow-y:auto;font-size:clamp(14px,3.9vw,16px);line-height:1.5;padding-right:4px;scrollbar-width:none}
.sum::-webkit-scrollbar{display:none}
.meta{flex:0 0 auto}
.row{flex:0 0 auto;margin-top:0;padding-bottom:4px}
.prog{align-items:center;gap:7px;padding:10px 6px;background:#0a0a0acc;border:1px solid var(--line);border-radius:99px;backdrop-filter:blur(6px);top:32%;right:6px}
.dot{width:5px;height:5px;border-radius:99px;background:#6b6248;transition:height .3s,background .3s,box-shadow .3s,opacity .3s}
.dot.near{height:8px;background:#9a8a52}
.dot.far{width:3px;height:3px;opacity:.55}
.dot.on{height:26px;background:linear-gradient(#f1d57a,#d4af37);box-shadow:0 0 10px #d4af37aa}
/* ---- Themes ---- */
:root{--soft:#d8d3c4;--dot:#6b6248;--dotn:#9a8a52}
:root[data-theme="light"]{--bg:#ffffff;--fg:#16140e;--mut:#6b665a;--gold:#a67c00;--card:#f5f3ec;--line:#e5e1d3;--soft:#3a362d;--dot:#d3cdb8;--dotn:#a89d78}
:root[data-theme="warm"]{--bg:#f5ead6;--fg:#3a2a14;--mut:#85704f;--gold:#b0761a;--card:#fdf5e4;--line:#e3d1ab;--soft:#5a4426;--dot:#dcc9a0;--dotn:#b69a62}
nav{background:var(--bg)}
.sum,.sheet p{color:var(--soft)}
.prog{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.dot{background:var(--dot)}.dot.near{background:var(--dotn)}
.dot.on{background:linear-gradient(#f1d57a,var(--gold))}
.cat{color:#d4af37;border-color:#d4af37}

/* ---- Smaller header ---- */
header{padding:8px 14px 2px;gap:9px}
.logo{width:26px;height:26px;border-radius:6px}
.brand{font-size:16px;line-height:1.1}
.tag{font-size:10px;letter-spacing:.02em}
.hbtn{margin-left:auto;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);color:var(--gold)}
.hbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.chips{padding:4px 14px 7px;gap:6px}
.chip{padding:4px 11px;font-size:12px}

/* ---- Smaller bottom bar with icons ---- */
nav button{position:relative;padding:8px 0 6px;font-size:10px;gap:2px;letter-spacing:.02em}
nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
nav button.on svg{fill:currentColor;fill-opacity:.18;transform:translateY(-1px)}
nav button.on::before{content:"";position:absolute;top:0;width:22px;height:3px;border-radius:0 0 4px 4px;background:var(--gold)}

/* ---- Theme picker ---- */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:13px}
.theme.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.sw{width:42px;height:42px;border-radius:50%;border:1px solid var(--line)}
.sw-dark{background:linear-gradient(135deg,#0a0a0a 55%,#d4af37 55%)}
.sw-light{background:linear-gradient(135deg,#fff 55%,#a67c00 55%)}
.sw-warm{background:linear-gradient(135deg,#f5ead6 55%,#b0761a 55%)}