:root{
  --bg:#0a0a0f;--bg2:#13131b;--bg3:#1c1c27;--line:#272735;--text:#f4f4f8;--muted:#9a9ab0;
  --pink:#ff2d78;--purple:#9b3dff;--orange:#ff8a3d;--green:#2bd47d;--red:#ff4d5e;--blue:#3d9bff;
  --grad:linear-gradient(135deg,#ff2d78 0%,#c13dff 55%,#7a3dff 100%);
  --ring:conic-gradient(from 210deg,#ff8a3d,#ff2d78,#c13dff,#7a3dff,#ff8a3d);
  --r:16px;--nav:72px;--side:244px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--text);font:15px/1.45 var(--font);min-height:100%}
body{overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img,video{display:block;max-width:100%}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#2a2a38;border-radius:8px}
.hide{display:none!important}
.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:11.5px}.bold{font-weight:700}.center{text-align:center}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.row{display:flex;align-items:center;gap:10px}.col{display:flex;flex-direction:column;gap:10px}.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}.between{justify-content:space-between}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Layout ---------- */
#app{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);border-right:1px solid var(--line);padding:26px 12px;display:flex;flex-direction:column;gap:4px;background:var(--bg);z-index:30}
.logo{font-size:26px;font-weight:800;letter-spacing:-.5px;padding:4px 12px 24px;display:flex;align-items:center;gap:10px}
.logo .mark{width:34px;height:34px;border-radius:11px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 22px #ff2d7855}
.logo .mark svg{width:20px;height:20px}
.nav-item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;font-size:15.5px;transition:.15s;position:relative}
.nav-item:hover{background:var(--bg3)}
.nav-item.active{font-weight:700}
.nav-item svg{width:26px;height:26px;flex:none}
.nav-item .badge{position:absolute;left:30px;top:6px}
.badge{background:var(--pink);color:#fff;font-size:10.5px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;padding:0 5px}
.sidebar .spacer{flex:1}
main{flex:1;margin-left:var(--side);min-width:0}
.page{max-width:935px;margin:0 auto;padding:28px 20px 60px}
.page.narrow{max-width:630px}
.home-grid{display:grid;grid-template-columns:minmax(0,470px) 320px;gap:56px;justify-content:center}
.bottom-nav,.top-bar{display:none}

@media (max-width:1100px){.home-grid{grid-template-columns:minmax(0,470px)}.home-side{display:none}}
@media (max-width:900px){
  :root{--side:76px}
  .sidebar .label,.logo .word{display:none}
  .logo{justify-content:center;padding:4px 0 24px}
  .nav-item{justify-content:center}
}
@media (max-width:640px){
  .sidebar{display:none}
  main{margin-left:0;padding-bottom:var(--nav)}
  .page{padding:12px 0 30px}
  .top-bar{display:flex;position:sticky;top:0;z-index:25;background:rgba(10,10,15,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);height:54px;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}
  .top-bar .logo{padding:0;font-size:22px}
  .top-bar .icons{display:flex;gap:18px}.top-bar svg{width:26px;height:26px}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(10,10,15,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);z-index:30;justify-content:space-around;align-items:center}
  .bottom-nav a{padding:10px;position:relative}.bottom-nav svg{width:27px;height:27px}
  .bottom-nav .badge{position:absolute;top:4px;right:2px}
  .bottom-nav .create{background:var(--grad);border-radius:12px;padding:6px 14px}
  .bottom-nav .create svg{width:22px;height:22px}
  .pad-m{padding-left:14px;padding-right:14px}
}

/* ---------- Avatars ---------- */
.av{border-radius:50%;object-fit:cover;background:var(--bg3);flex:none;display:grid;place-items:center;font-weight:700;color:#fff;overflow:hidden}
.av.s{width:32px;height:32px;font-size:13px}.av.m{width:44px;height:44px}.av.l{width:86px;height:86px;font-size:30px}.av.xl{width:150px;height:150px;font-size:52px}
.ring{padding:3px;border-radius:50%;background:var(--ring);display:inline-block;flex:none}
.ring>.av{border:3px solid var(--bg)}
.ring.seen{background:#3a3a4a}
.ring.live{background:linear-gradient(135deg,#ff2d78,#ff4d5e)}
.live-tag{background:linear-gradient(135deg,#ff2d78,#ff4d5e);color:#fff;font-size:10px;font-weight:800;letter-spacing:.5px;padding:2px 6px;border-radius:5px;border:2px solid var(--bg)}
.verified{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-left:3px}

/* ---------- Buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;font-weight:650;background:var(--bg3);transition:.15s;white-space:nowrap;font-size:14.5px}
.btn:hover{filter:brightness(1.15)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 6px 20px #ff2d7840}
.btn.blue{background:var(--blue);color:#fff}
.btn.danger{background:#3a1520;color:#ff8091}
.btn.ok{background:#11331f;color:#5df09a}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.block{width:100%}.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}.btn.lg{padding:14px 22px;font-size:16px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transition:.15s}
.icon-btn:hover{background:var(--bg3)}
.icon-btn svg{width:26px;height:26px}
input,textarea,select{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:none;transition:.15s}
input:focus,textarea:focus,select:focus{border-color:#ff2d7899;box-shadow:0 0 0 3px #ff2d781f}
textarea{resize:vertical;min-height:90px}
label.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
label.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text);cursor:pointer}
label.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--pink)}
.form{display:flex;flex-direction:column;gap:14px}
.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;padding:9px 8px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--muted)}
.seg button.on{background:var(--bg3);color:var(--text)}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{font-size:17px;margin-bottom:12px}
.notice{background:#1d1426;border:1px solid #3d2650;border-radius:14px;padding:14px 16px;font-size:13.5px;line-height:1.5}
.notice.warn{background:#2a1d10;border-color:#5a3a15}
.notice.ok{background:#0f2519;border-color:#1d4d32}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;background:var(--bg3)}
.pill.pink{background:#ff2d7826;color:#ff7aa8}.pill.green{background:#2bd47d22;color:#5df09a}.pill.yellow{background:#ffc83d22;color:#ffd36b}.pill.red{background:#ff4d5e22;color:#ff8091}

/* ---------- Stories ---------- */
.stories{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 18px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;flex:none;font-size:12px}
.story .av{width:62px;height:62px}
.story .name{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story .add{position:relative}
.story .plus{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid var(--bg);display:grid;place-items:center;font-weight:800;font-size:15px}

.story-viewer{position:fixed;inset:0;background:#000;z-index:100;display:flex;align-items:center;justify-content:center}
.story-viewer .frame{position:relative;width:min(100vw,calc(100vh * 9/16));height:min(100vh,calc(100vw * 16/9));background:#111;border-radius:12px;overflow:hidden}
.story-viewer .frame img,.story-viewer .frame video{width:100%;height:100%;object-fit:cover}
.story-viewer .bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.story-viewer .bars i{flex:1;height:3px;background:#ffffff4d;border-radius:3px;overflow:hidden}
.story-viewer .bars i b{display:block;height:100%;width:0;background:#fff}
.story-viewer .who{position:absolute;top:22px;left:12px;right:12px;z-index:3;display:flex;align-items:center;gap:10px;font-weight:600;text-shadow:0 1px 4px #0008}
.story-viewer .tap{position:absolute;top:0;bottom:0;width:40%;z-index:2}.story-viewer .tap.l{left:0}.story-viewer .tap.r{right:0;width:60%}
.story-viewer .close{position:absolute;top:18px;right:18px;z-index:5}
@media (max-width:640px){.story-viewer .frame{border-radius:0;width:100vw;height:100%}}

/* ---------- Posts ---------- */
.post{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}
.post-head{display:flex;align-items:center;gap:10px;padding:0 4px 10px}
.post-head .user{font-weight:650;font-size:14.5px}
.post-media{position:relative;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:4/5}
@media (max-width:640px){.post-media{border-radius:0}.post-head,.post-body{padding-left:12px!important;padding-right:12px!important}}
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{flex:0 0 100%;scroll-snap-align:center;height:100%;position:relative}
.carousel img,.carousel video{width:100%;height:100%;object-fit:cover}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:4px;z-index:2;pointer-events:none}
.dots i{width:6px;height:6px;border-radius:50%;background:#ffffff66}.dots i.on{background:#fff}
.count-tag{position:absolute;top:12px;right:12px;background:#000a;padding:3px 9px;border-radius:12px;font-size:12px;font-weight:600;z-index:2}
.mute{position:absolute;bottom:12px;right:12px;z-index:3;width:30px;height:30px;border-radius:50%;background:#000a;display:grid;place-items:center}
.mute svg{width:16px;height:16px}
.locked{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;background:linear-gradient(180deg,#0003,#000a);z-index:2}
.locked .lock{width:62px;height:62px;border-radius:50%;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;border:1px solid #ffffff33}
.locked .lock svg{width:28px;height:28px}
.locked .meta{display:flex;gap:14px;font-size:13px;color:#ddd}
.post-actions{display:flex;align-items:center;padding:8px 0 4px}
.post-actions .icon-btn{width:42px;height:42px}
.post-actions .liked svg{fill:var(--pink);stroke:var(--pink);animation:pop .35s}
@keyframes pop{50%{transform:scale(1.3)}}
.post-body{padding:0 4px;font-size:14.5px}
.post-body .cap{white-space:pre-wrap;word-break:break-word}
.big-heart{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:4}
.big-heart svg{width:110px;height:110px;fill:#fff;filter:drop-shadow(0 6px 24px #ff2d78aa);animation:bh .9s forwards}
@keyframes bh{0%{transform:scale(0);opacity:0}15%{transform:scale(1.15);opacity:1}30%{transform:scale(.95)}70%{opacity:1}100%{transform:scale(1);opacity:0}}
.status-banner{padding:8px 12px;border-radius:10px;font-size:13px;margin:0 4px 10px}

/* ---------- Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.grid .tile{position:relative;aspect-ratio:3/4;background:var(--bg3);overflow:hidden;cursor:pointer}
.grid.square .tile{aspect-ratio:1}
.grid .tile img{width:100%;height:100%;object-fit:cover;transition:.3s}
.grid .tile:hover img{transform:scale(1.04)}
.grid .tile .ic{position:absolute;top:8px;right:8px;z-index:2}
.grid .tile .ic svg{width:20px;height:20px;filter:drop-shadow(0 1px 3px #000)}
.grid .tile .lk{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.grid .tile .lk div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;text-shadow:0 1px 4px #000}
.grid .tile .lk svg{width:26px;height:26px}
.grid .tile .hov{position:absolute;inset:0;background:#0007;display:flex;align-items:center;justify-content:center;gap:18px;font-weight:700;opacity:0;transition:.2s;z-index:3}
.grid .tile:hover .hov{opacity:1}
.explore-grid{grid-template-columns:repeat(3,1fr)}
.explore-grid .tile:nth-child(10n+3),.explore-grid .tile:nth-child(10n+6){grid-row:span 2;aspect-ratio:auto}

/* ---------- Profile ---------- */
.cover{height:220px;border-radius:0 0 20px 20px;background:var(--grad);background-size:cover;background-position:center;margin:-28px -20px 0;position:relative}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--bg));border-radius:inherit}
@media (max-width:640px){.cover{margin:-12px 0 0;height:160px;border-radius:0}}
.prof-head{display:flex;gap:28px;align-items:flex-end;margin-top:-70px;position:relative;z-index:2;padding:0 10px}
.prof-head .av.xl{border:5px solid var(--bg)}
.prof-head .ring{padding:4px}
.prof-info{flex:1;min-width:0;padding-bottom:8px}
.prof-info h1{font-size:24px;font-weight:750;display:flex;align-items:center;gap:6px}
.stats{display:flex;gap:26px;margin:14px 0}
.stats div{font-size:14.5px}.stats b{font-size:16px}
@media (max-width:640px){.prof-head{gap:14px;padding:0 14px;margin-top:-50px}.prof-head .av.xl{width:96px;height:96px;font-size:36px}.prof-info h1{font-size:19px}.stats{gap:16px;margin:8px 0}}
.prof-bio{padding:14px 10px 0;white-space:pre-wrap;max-width:560px}
.prof-actions{display:flex;gap:8px;padding:16px 10px;flex-wrap:wrap}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:6px 10px 20px}
.tier{border-radius:16px;padding:18px;background:var(--bg2);border:1px solid var(--line);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.tier.l2{border-color:#9b3dff66}.tier.l3{border-color:#ff8a3d77;background:linear-gradient(160deg,#2a1a10,var(--bg2) 60%)}
.tier .price{font-size:26px;font-weight:800}.tier .price small{font-size:13px;color:var(--muted);font-weight:500}
.tier .perks{font-size:13px;color:var(--muted);flex:1}
.tier .current{position:absolute;top:12px;right:12px}
.tabs{display:flex;justify-content:center;gap:40px;border-top:1px solid var(--line);margin-top:10px}
.tabs button{padding:14px 0;font-size:12.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-top:1px solid transparent;margin-top:-1px;display:flex;gap:6px;align-items:center}
.tabs button.on{color:var(--text);border-color:var(--text)}
.tabs svg{width:14px;height:14px}
@media (max-width:640px){.tabs{gap:0;justify-content:space-around}}

/* ---------- Reels ---------- */
.reels{height:100vh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;max-width:460px;margin:0 auto}
.reels::-webkit-scrollbar{display:none}
.reel{height:100vh;scroll-snap-align:start;position:relative;display:flex;align-items:center;justify-content:center;padding:16px 0}
.reel .vid{position:relative;height:100%;aspect-ratio:9/16;max-width:100%;border-radius:12px;overflow:hidden;background:#000}
.reel video,.reel .vid>img{width:100%;height:100%;object-fit:cover}
.reel .side{position:absolute;right:10px;bottom:90px;display:flex;flex-direction:column;gap:18px;align-items:center;z-index:3}
.reel .side button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:600;text-shadow:0 1px 3px #000}
.reel .side svg{width:30px;height:30px;filter:drop-shadow(0 1px 3px #0009)}
.reel .side .liked svg{fill:var(--pink);stroke:var(--pink)}
.reel .info{position:absolute;left:14px;right:70px;bottom:22px;z-index:3;text-shadow:0 1px 4px #000}
.reel .shade{position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#000c);z-index:2;pointer-events:none}
@media (max-width:640px){.reels{height:calc(100vh - var(--nav));max-width:none}.reel{height:calc(100vh - var(--nav));padding:0}.reel .vid{border-radius:0;aspect-ratio:auto;width:100%}}

/* ---------- Live ---------- */
.lives-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.live-card{position:relative;aspect-ratio:9/14;border-radius:16px;overflow:hidden;background:var(--grad);display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.live-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(2px) brightness(.6)}
.live-card>*:not(.bg){position:relative}
.live-card .top{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between}
.live-stage{position:fixed;inset:0;background:#000;z-index:60;display:flex;justify-content:center}
.live-stage .screen{position:relative;height:100%;aspect-ratio:9/16;max-width:100%;background:#111;overflow:hidden}
@media (max-width:640px){.live-stage .screen{width:100%;aspect-ratio:auto}}
.live-stage video{width:100%;height:100%;object-fit:cover}
.live-stage .top{position:absolute;top:0;left:0;right:0;padding:14px;display:flex;align-items:center;gap:10px;z-index:5;background:linear-gradient(#0009,transparent)}
.live-stage .viewers{background:#0008;padding:4px 10px;border-radius:14px;font-size:13px;font-weight:600;display:flex;gap:5px;align-items:center}
.live-stage .chat{position:absolute;left:12px;right:80px;bottom:76px;max-height:40%;overflow-y:auto;display:flex;flex-direction:column;gap:6px;z-index:5;mask-image:linear-gradient(transparent,#000 25%);-webkit-mask-image:linear-gradient(transparent,#000 25%);scrollbar-width:none}
.live-stage .chat div{font-size:14px;text-shadow:0 1px 3px #000;line-height:1.3}
.live-stage .chat b{opacity:.75;margin-right:6px}
.live-stage .chat .tip{background:var(--grad);padding:6px 10px;border-radius:12px;align-self:flex-start;text-shadow:none}
.live-stage .chat .sys{opacity:.7;font-size:13px}
.live-stage .bar{position:absolute;left:0;right:0;bottom:0;padding:12px;display:flex;gap:8px;z-index:6;align-items:center;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.live-stage .bar input{background:#ffffff1f;border:1px solid #ffffff2a;border-radius:24px;padding:11px 16px}
.live-stage .bar .icon-btn{background:#ffffff1f;flex:none;width:44px;height:44px}
.hearts{position:absolute;right:20px;bottom:80px;width:60px;height:300px;pointer-events:none;z-index:4}
.hearts span{position:absolute;bottom:0;left:15px;font-size:28px;animation:float 2.6s ease-out forwards}
@keyframes float{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:1}100%{transform:translate(var(--x),-280px) scale(1.2);opacity:0}}
.tip-banner{position:absolute;top:80px;left:50%;transform:translateX(-50%);background:var(--grad);padding:10px 18px;border-radius:30px;font-weight:700;z-index:7;animation:tipin 4s forwards;white-space:nowrap;box-shadow:0 10px 30px #ff2d7866}
@keyframes tipin{0%{opacity:0;transform:translate(-50%,-20px) scale(.8)}10%,85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0}}
.live-ended{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#000d;z-index:8;text-align:center;padding:20px}

/* ---------- Messages ---------- */
.dm{display:grid;grid-template-columns:340px 1fr;height:100vh;border-left:1px solid var(--line)}
.dm-list{border-right:1px solid var(--line);overflow-y:auto}
.dm-list h2{padding:26px 20px 14px;font-size:20px}
.dm-item{display:flex;gap:12px;align-items:center;padding:10px 20px;cursor:pointer}
.dm-item:hover,.dm-item.on{background:var(--bg2)}
.dm-chat{display:flex;flex-direction:column;min-width:0}
.dm-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.dm-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:6px}
.bubble{max-width:72%;padding:10px 14px;border-radius:20px;background:var(--bg3);align-self:flex-start;white-space:pre-wrap;word-break:break-word}
.bubble.me{background:var(--grad);align-self:flex-end;color:#fff}
.bubble.media{padding:4px;background:var(--bg3);overflow:hidden}
.bubble.media img,.bubble.media video{border-radius:16px;max-height:340px;object-fit:cover}
.bubble .lockbox{position:relative;width:240px;height:300px;border-radius:16px;overflow:hidden}
.bubble .lockbox img{width:100%;height:100%;object-fit:cover}
.dm-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:center}
.dm-input input[type=text]{border-radius:24px}
.dm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;color:var(--muted)}
@media (max-width:900px){.dm{grid-template-columns:96px 1fr}.dm-list h2,.dm-item .grow{display:none}.dm-item{justify-content:center;padding:10px}}
@media (max-width:640px){.dm{grid-template-columns:1fr;height:calc(100vh - var(--nav) - 54px);border:0}.dm.chatting .dm-list{display:none}.dm:not(.chatting) .dm-chat{display:none}.dm-list h2,.dm-item .grow{display:block}.dm-item{justify-content:flex-start;padding:10px 16px}}

/* ---------- Modal / sheet ---------- */
.modal-bg{position:fixed;inset:0;background:#000b;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:20px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;animation:up .2s}
.modal.wide{max-width:640px}
@keyframes up{from{transform:translateY(16px);opacity:0}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);font-weight:700;position:sticky;top:0;background:var(--bg2);z-index:2}
.modal-body{padding:18px}
@media (max-width:640px){.modal-bg{align-items:flex-end;padding:0}.modal{border-radius:20px 20px 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom)}}
.menu-list button{display:block;width:100%;padding:15px;text-align:center;border-bottom:1px solid var(--line);font-weight:600}
.menu-list button:last-child{border:0}
.menu-list .red{color:var(--red)}

.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#262634;border:1px solid #34344a;padding:12px 18px;border-radius:14px;font-size:14px;box-shadow:0 10px 30px #0008;animation:up .2s;max-width:90vw}
.toast.err{border-color:#5a2030;background:#2a141b}
@media (max-width:640px){.toast-wrap{bottom:calc(var(--nav) + 14px)}}

/* ---------- Auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;width:100%}
.auth-art{background:var(--grad);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:56px}
.auth-art::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(#ffffff40,transparent 65%);top:-200px;right:-250px}
.auth-art h2{font-size:46px;line-height:1.05;font-weight:800;letter-spacing:-1px;position:relative;max-width:440px}
.auth-art p{position:relative;font-size:17px;opacity:.9;margin-top:14px;max-width:400px}
.auth-art .phones{position:absolute;top:60px;left:56px;display:flex;gap:16px;transform:rotate(-8deg)}
.auth-art .phones div{width:150px;height:270px;border-radius:26px;background:#ffffff26;border:1px solid #ffffff40;backdrop-filter:blur(6px)}
.auth-art .phones div:nth-child(2){margin-top:40px;background:#0003}
.auth-form{display:flex;align-items:center;justify-content:center;padding:30px}
.auth-form .box{width:100%;max-width:380px}
.auth-form h1{font-size:30px;font-weight:800;margin-bottom:6px}
@media (max-width:860px){.auth{grid-template-columns:1fr}.auth-art{display:none}}

/* ---------- Dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:16px}
.kpi .v{font-size:24px;font-weight:800;margin-top:4px}
.kpi.hl{background:var(--grad);border:0}
.kpi.hl .muted{color:#ffffffcc}
.bars{display:flex;align-items:flex-end;gap:4px;height:120px;padding-top:10px}
.bars i{flex:1;background:var(--grad);border-radius:4px 4px 0 0;min-height:2px;opacity:.85}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.scroll-x{overflow-x:auto}
.admin-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);scrollbar-width:none}
.admin-tabs button{padding:8px 14px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--muted);white-space:nowrap;display:flex;gap:6px;align-items:center}
.admin-tabs button.on{background:var(--bg3);color:var(--text)}
.review-item{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;margin-bottom:12px}
.review-item .thumbs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.review-item .thumbs img,.review-item .thumbs video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:#000;cursor:zoom-in}
.review-item .thumbs.one{grid-template-columns:1fr}
@media (max-width:640px){.review-item{grid-template-columns:1fr}}
.docs{display:flex;gap:8px;flex-wrap:wrap}
.docs img{width:150px;height:110px;object-fit:cover;border-radius:10px;cursor:zoom-in;border:1px solid var(--line)}
.countdown{font-variant-numeric:tabular-nums;font-weight:700}
.countdown.late{color:var(--red)}

/* ---------- Create ---------- */
.drop{border:2px dashed #3a3a50;border-radius:18px;padding:40px 20px;text-align:center;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:12px}
.drop:hover{border-color:var(--pink);background:#ff2d780a}
.drop svg{width:56px;height:56px;opacity:.8}
.previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.previews div{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#000}
.previews img,.previews video{width:100%;height:100%;object-fit:cover}
.previews button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:#000b;font-size:14px}
.progress{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--grad);width:0;transition:width .2s}

/* ---------- Legal ---------- */
.legal h1{font-size:28px;margin-bottom:6px}.legal h2{font-size:18px;margin:24px 0 8px}
.legal p,.legal li{color:#d4d4e0;margin-bottom:8px;line-height:1.6}.legal ul{padding-left:22px}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);padding:12px 4px}
.footer-links a:hover{color:var(--text)}

/* ---------- Age gate ---------- */
.gate{position:fixed;inset:0;z-index:150;background:radial-gradient(circle at 30% 20%,#3a1030,#0a0a0f 60%);display:flex;align-items:center;justify-content:center;padding:20px}
.gate .box{max-width:440px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.gate .big{font-size:56px;font-weight:900}

.empty{padding:50px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px}
.empty svg{width:64px;height:64px;opacity:.5}
.spinner{width:28px;height:28px;border:3px solid #ffffff22;border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--bg2),var(--bg3),var(--bg2));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.suggest{display:flex;align-items:center;gap:12px;padding:8px 0}
.side-me{display:flex;align-items:center;gap:12px;margin-bottom:22px}
@media (max-width:640px){
  .stats{gap:0;justify-content:space-between;max-width:300px}
  .stats div{display:flex;flex-direction:column;align-items:center;font-size:12.5px;color:var(--muted)}
  .stats b{font-size:17px;color:var(--text)}
  .tiers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 14px 18px}
  .tiers::-webkit-scrollbar{display:none}
  .tiers .tier{flex:0 0 72%;scroll-snap-align:start;padding:14px;gap:4px}
  .tiers .tier .price{font-size:22px}
  .prof-actions .btn{flex:1}.prof-actions .icon-btn{flex:none}
}