:root{
  --bg:#fff; --bg2:#fafafa; --text:#262626; --muted:#737373; --line:#dbdbdb;
  --blue:#0095f6; --blue-d:#1877f2; --red:#ed4956; --chip:#efefef;
  --grad:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
  --story:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#000;--bg2:#121212;--text:#f5f5f5;--muted:#a8a8a8;--line:#262626;--chip:#262626}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.35;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
svg{display:block}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

#app{position:relative;height:100dvh;max-width:480px;margin:0 auto;background:var(--bg);overflow:hidden}
@media (min-width:500px){body{background:var(--bg2)} #app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}

/* ---------- Login ---------- */
.login{padding:calc(var(--safe-t) + 48px) 32px 24px;align-items:center;overflow-y:auto}
.logo{font-family:"Grand Hotel","Snell Roundhand","Brush Script MT",cursive;font-size:52px;line-height:1.1;margin:24px 0 28px;letter-spacing:.2px}
.login form{width:100%;display:flex;flex-direction:column;gap:8px}
.field{width:100%;height:44px;padding:9px 8px 7px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:3px;font-size:14px;outline:0}
.field:focus{border-color:var(--muted)}
.btn{display:flex;align-items:center;justify-content:center;height:34px;padding:0 16px;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;font-size:14px;width:100%}
.btn:active{opacity:.7}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.ghost{background:var(--chip);color:var(--text)}
.btn.lg{height:44px;border-radius:10px;font-size:15px}
.or{display:flex;align-items:center;gap:18px;width:100%;margin:22px 0;color:var(--muted);font-weight:600;font-size:13px}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.demo-note{margin-top:auto;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:12.5px;text-align:center}
.demo-note b{color:var(--text)}
.err{color:var(--red);font-size:13px;text-align:center;min-height:18px}

/* ---------- Limit-Picker ---------- */
.setup{padding:calc(var(--safe-t) + 40px) 24px 24px;overflow-y:auto;align-items:center;text-align:center}
.setup h1{font-size:22px;font-weight:600;margin:20px 0 8px}
.setup p{color:var(--muted);margin:0 0 4px}
.ring{width:88px;height:88px;border-radius:50%;background:var(--story);padding:3px}
.ring>div{width:100%;height:100%;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center}
.ring .ic{width:40px;height:40px;stroke-width:1.6}
.picker{width:100%;margin-top:18px}
.pk-num{display:flex;align-items:center;justify-content:center;gap:22px;margin:6px 0 14px}
.pk-num .val{font-size:54px;font-weight:300;min-width:130px;line-height:1;font-variant-numeric:tabular-nums}
.pk-num .val small{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:6px}
.round{width:44px;height:44px;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:300}
.round:active{opacity:.6}
input[type=range]{width:100%;accent-color:var(--blue);margin:6px 0 12px}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.chip{padding:7px 14px;border-radius:8px;background:var(--chip);font-weight:600;font-size:13px}
.chip.on{background:var(--blue);color:#fff}
.hint{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.hint b{color:var(--text)}
.stack{display:flex;flex-direction:column;gap:8px;width:100%}

/* ---------- Main ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 6px) 16px 6px;height:calc(var(--safe-t) + 48px);border-bottom:1px solid var(--line);background:var(--bg);flex:none}
.topbar .logo{font-size:32px;margin:0}
.topbar .right{display:flex;align-items:center;gap:16px}
.pill{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:var(--chip);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pill .ic{width:13px;height:13px;stroke-width:2.4}
.pill.warn{background:var(--red);color:#fff}
.bar{height:3px;background:var(--line);flex:none}
.bar i{display:block;height:100%;width:100%;background:var(--grad);transition:width 1s linear}
.bar.warn i{background:var(--red)}
.views{position:relative;flex:1;min-height:0}
.view{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tabbar{display:flex;justify-content:space-around;align-items:center;height:calc(50px + var(--safe-b));padding-bottom:var(--safe-b);border-top:1px solid var(--line);background:var(--bg);flex:none}
.tabbar button{flex:1;height:50px;display:flex;align-items:center;justify-content:center;opacity:.55}
.tabbar button.on{opacity:1}
.tabbar button.on .ic.fillable{fill:currentColor}
.tabbar .av{width:26px;height:26px;border-radius:50%;border:1px solid transparent}
.tabbar button.on .av{border:2px solid var(--text);padding:0}

.stories{display:flex;gap:14px;padding:12px 12px 10px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{flex:none;width:68px;text-align:center}
.story .ring{width:66px;height:66px;margin:0 auto}
.story .ring.seen{background:var(--line)}
.story .ring>div{border:3px solid var(--bg)}
.story span{display:block;margin-top:5px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;flex:none;width:100%;height:100%}
.post-h{display:flex;align-items:center;gap:10px;padding:10px 12px}
.post-h .a{width:32px;height:32px;border-radius:50%;padding:2px;background:var(--story)}
.post-h .a .avatar{border:2px solid var(--bg);font-size:11px}
.post-h b{font-weight:600}
.post-h .more{margin-left:auto}
.post-h .more .ic{width:20px;height:20px}
.media{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:110px;user-select:none;position:relative}
.media .heart-burst{position:absolute;width:90px;height:90px;fill:#fff;stroke:none;opacity:0;pointer-events:none}
.media .heart-burst.go{animation:burst .7s ease}
@keyframes burst{0%{opacity:0;transform:scale(.4)}25%{opacity:.95;transform:scale(1.1)}70%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
.acts{display:flex;align-items:center;gap:16px;padding:10px 12px 6px}
.acts .sp{margin-left:auto}
.acts .liked{color:var(--red)}
.acts .liked .ic{fill:var(--red)}
.post-t{padding:0 12px 18px}
.post-t .likes{font-weight:600;margin-bottom:3px}
.post-t .cm{color:var(--muted);margin-top:3px}
.post-t .ago{color:var(--muted);font-size:10.5px;letter-spacing:.3px;margin-top:5px;text-transform:uppercase}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.grid div{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:42px}
.search-bar{margin:8px 12px;height:36px;border-radius:10px;background:var(--chip);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted)}
.search-bar .ic{width:16px;height:16px}
.grid .big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;font-size:90px}

.reel{height:100%;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:10px}
.reel .e{font-size:84px}
.reel small{opacity:.7}

.prof-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;height:48px}
.prof-top b{font-size:20px;font-weight:700}
.prof-head{display:flex;align-items:center;gap:20px;padding:6px 16px 12px}
.prof-head .ring{width:86px;height:86px;flex:none}
.stats{display:flex;flex:1;justify-content:space-around;text-align:center}
.stats b{display:block;font-size:17px;font-weight:700}
.stats span{font-size:13px}
.prof-bio{padding:0 16px 12px}
.prof-bio b{font-weight:600}
.prof-btns{display:flex;gap:6px;padding:0 16px 14px}
.prof-btns .btn{flex:1}
.prof-tabs{display:flex;border-top:1px solid var(--line)}
.prof-tabs div{flex:1;display:flex;justify-content:center;padding:10px 0;opacity:.45}
.prof-tabs div.on{opacity:1;border-top:1px solid var(--text);margin-top:-1px}

/* ---------- Sheet / Toast ---------- */
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:20;display:flex;align-items:flex-end;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-height:92%;overflow-y:auto;background:var(--bg);border-radius:14px 14px 0 0;padding:8px 16px calc(var(--safe-b) + 20px);animation:up .25s ease}
@keyframes up{from{transform:translateY(40%);opacity:.4}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 12px}
.sheet h2{font-size:16px;font-weight:700;text-align:center;margin:0 0 14px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.card .row{display:flex;justify-content:space-between;align-items:baseline}
.card .big{font-size:26px;font-weight:300;font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:3px;background:var(--line);margin:10px 0 4px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--grad);width:0}
.meter.warn i{background:var(--red)}
.muted{color:var(--muted);font-size:12.5px}
.info{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--chip);color:var(--muted);font-size:13px;margin-bottom:12px}
.info .ic{width:18px;height:18px;flex:none;margin-top:1px}
.info b{color:var(--text)}
.item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 2px;border-top:1px solid var(--line);font-size:15px;text-align:left}
.item.red{color:var(--red)}
details.dev{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
details.dev summary{color:var(--muted);font-size:12.5px;cursor:pointer}
details.dev .btn{margin-top:6px;height:32px;font-size:13px}

#toast{position:absolute;left:16px;right:16px;top:calc(var(--safe-t) + 58px);z-index:40;background:var(--text);color:var(--bg);padding:11px 14px;border-radius:12px;font-weight:500;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(-10px);transition:.25s;pointer-events:none}
#toast.show{opacity:1;transform:none}

/* ---------- Lock ---------- */
.lock{align-items:center;justify-content:center;text-align:center;padding:calc(var(--safe-t) + 24px) 28px calc(var(--safe-b) + 24px);overflow-y:auto;z-index:30}
.lock h1{font-size:23px;font-weight:700;margin:22px 0 8px;line-height:1.25}
.lock p.sub{color:var(--muted);margin:0 0 22px;font-size:15px}
.quote{width:100%;border-radius:16px;padding:20px 18px;background:var(--bg2);border:1px solid var(--line);position:relative}
.quote:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:16px 0 0 16px;background:var(--story)}
.quote q{display:block;font-size:17px;font-weight:500;line-height:1.4;quotes:"„" "“"}
.quote cite{display:block;margin-top:10px;color:var(--muted);font-size:13px;font-style:normal}
.count{margin-top:22px;color:var(--muted);font-size:13px}
.count b{display:block;color:var(--text);font-size:30px;font-weight:300;font-variant-numeric:tabular-nums;margin-top:2px}
.lock .admin{margin-top:22px;width:auto;padding:0 22px}
.link{color:var(--blue);font-weight:600;font-size:14px;padding:6px 0;text-align:center;width:100%}
.boot{align-items:center;justify-content:center;text-align:center;padding:24px;gap:14px;z-index:50}
.boot p{color:var(--muted);margin:0;max-width:280px}
.boot .btn{width:auto;padding:0 24px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--text);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.legal-links{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:12px}
.legal-links a{color:var(--muted);text-decoration:none}
.login .legal-links{margin-top:12px}