/* ============================================================
   Leng Social — design system
   Palette: River Ink #0B1B33 · ALS Blue #1043C9 · Sky #E8F0FE
            Surface #FFFFFF · Canvas #F0F2F7 · Heart #F0345C
   Type: Suwannaphum everywhere (Khmer-friendly)
   ============================================================ */
:root{
  --blue:#1043C9; --blue-dark:#0B2E91; --blue-soft:#E8F0FE;
  --ink:#0B1B33; --ink-2:#4A5A75; --ink-3:#8A97AD;
  --canvas:#F0F2F7; --surface:#FFFFFF; --surface-2:#EEF1F6; --line:#E3E8F1;
  --blue-soft-2:#D7E5FD;
  --heart:#F0345C; --green:#0FA968; --gold:#1043C9; --gold-rgb:16,67,201;
  --on-accent:#fff;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(11,27,51,.07),0 4px 16px rgba(11,27,51,.05);
  --shadow-lg:0 8px 40px rgba(11,27,51,.16);
  --nav-bar:65px;                                        /* visible nav height */
  --nav-h:calc(65px + env(safe-area-inset-top, 0px));    /* nav + iOS status-bar inset (PWA standalone) */
  --font:'Suwannaphum',serif;
}
/* ===== Dark mode = light-blue branding ===== */
html[data-theme="dark"]{
  --blue:#5BA4FF; --blue-dark:#2f7fd6; --blue-soft:rgba(91,164,255,.14); --blue-soft-2:rgba(91,164,255,.26);
  --gold:#5BA4FF; --gold-rgb:91,164,255;
  --ink:#eaf0f7; --ink-2:#aeb9c6; --ink-3:#7a8694;
  --canvas:#0a0d12; --surface:#121620; --surface-2:#1a2030; --line:rgba(255,255,255,.09);
  --on-accent:#06223f;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 14px 50px rgba(0,0,0,.6);
}
html[data-theme="dark"] body{background:var(--canvas)}
html[data-theme="dark"] .nav{background:rgba(12,15,22,.88);box-shadow:0 1px 0 rgba(0,0,0,.2),0 6px 22px rgba(0,0,0,.4)}
html[data-theme="dark"] .nav-mark{background:linear-gradient(135deg,#a8d4ff 0%,var(--blue) 55%,var(--blue-dark) 100%);box-shadow:0 4px 12px rgba(var(--gold-rgb),.32),inset 0 1px 0 rgba(255,255,255,.25)}
html[data-theme="dark"] .nav-mark,html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .chip.active,html[data-theme="dark"] .ru-mode.active{color:var(--on-accent)}
html[data-theme="dark"] .btn-primary svg{fill:var(--on-accent)}
html[data-theme="dark"] .icon-btn{background:var(--surface-2)}
html[data-theme="dark"] .icon-btn:hover{background:#222a3a}
/* always-dark components (reel modal / episodes / reels feed): cool the warm-brown surfaces in dark mode */
html[data-theme="dark"] .rum,html[data-theme="dark"] .ep-sheet{background:#121620}
html[data-theme="dark"] .rum-tab,html[data-theme="dark"] .rum-input,html[data-theme="dark"] .rum-chip,html[data-theme="dark"] .rum-mt,html[data-theme="dark"] .rum-track,html[data-theme="dark"] .rum-x,html[data-theme="dark"] .rum-drama-card,html[data-theme="dark"] .ep-thumb{background:#1a2030}
html[data-theme="dark"] .rum-drop{background:#141a26}
html[data-theme="dark"] .rum-track:hover{background:#222a3a}
html[data-theme="dark"] .rum-x:hover{background:#222a3a}
html[data-theme="dark"] .nav-search:focus-within,html[data-theme="dark"] .field input:focus,html[data-theme="dark"] .field textarea:focus,html[data-theme="dark"] .field select:focus{box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field textarea,html[data-theme="dark"] .field select{background:var(--surface-2)}
html[data-theme="dark"] ::selection{color:var(--on-accent)}
html[data-theme="dark"] .story .s-av{background:var(--surface-2)}
/* Always-dark media UIs (reel upload modal, reels feed, episodes) keep a light-blue
   accent in BOTH themes — a dark-blue accent would have poor contrast on their dark surface */
.rum, .reels-stage, .ep-sheet{
  --gold:#5BA4FF; --gold-rgb:91,164,255;
  --blue:#5BA4FF; --blue-dark:#2f7fd6; --blue-soft:rgba(91,164,255,.16);
  --on-accent:#06223f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--canvas);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input,textarea,select{font-family:var(--font);font-size:15px;color:var(--ink)}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid rgba(16,67,201,.45);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- Top navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);padding-top:env(safe-area-inset-top, 0px);background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(11,27,51,.02),0 6px 22px rgba(11,27,51,.05);display:flex;align-items:center;gap:12px;padding-left:16px;padding-right:16px;z-index:100}
.nav-logo{display:flex;align-items:center;gap:9px;flex-shrink:0;font-weight:900;letter-spacing:-1px;line-height:1;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.nav-logo:hover{transform:translateY(-1px)}
.nav-logo:active{transform:scale(.96)}
.nav-mark{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;font-size:24px;color:#fff;background:linear-gradient(135deg,#3E7BFA 0%,var(--blue) 55%,var(--blue-dark) 100%);border-radius:13px;box-shadow:0 4px 12px rgba(16,67,201,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.nav-mark em{font-style:normal;color:var(--heart)}
.nav-logo-img{width:40px;height:40px;border-radius:11px;object-fit:cover;flex-shrink:0;box-shadow:0 4px 12px rgba(16,67,201,.28)}
.nav-word{font-size:25px;color:var(--blue)}
.nav-word em{font-style:normal;color:var(--heart)}
.nav-search{flex:0 1 280px;display:flex;align-items:center;gap:8px;background:var(--canvas);border:1.5px solid transparent;border-radius:999px;padding:8px 15px;color:var(--ink-3);transition:border-color .15s,background .15s,box-shadow .15s}
.nav-search:focus-within{background:var(--surface);border-color:var(--blue);box-shadow:0 0 0 4px rgba(16,67,201,.1)}
.nav-search svg{width:18px;height:18px;flex-shrink:0}
.nav-search input{flex:1;border:none;background:none;outline:none;min-width:0;color:var(--ink)}
.nav-tabs{position:absolute;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:4px}
.nav-tab{display:flex;align-items:center;justify-content:center;width:92px;height:var(--nav-bar);color:var(--ink-2);position:relative;border-radius:10px 10px 0 0;transition:background .15s,color .15s}
.nav-tab:hover{background:var(--canvas);color:var(--blue)}
.nav-tab.active{color:var(--blue)}
.nav-tab.active::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px;background:linear-gradient(90deg,var(--blue),#3E7BFA);border-radius:3px 3px 0 0}
.nav-tab svg{width:26px;height:26px}
.nav-ico-gif{width:30px;height:30px;object-fit:contain;display:block}
/* Animated outline play button (Watch nav) — draws the circle then the triangle, loops */
.nav-ico-play{width:29px;height:29px;display:block;overflow:visible}
.nav-ico-play .np-draw{fill:none;stroke:url(#navPlayGrad);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.nav-ico-play .np-c{animation:npDraw 3.4s cubic-bezier(.65,0,.35,1) infinite}
.nav-ico-play .np-t{animation:npDraw 3.4s cubic-bezier(.65,0,.35,1) infinite;animation-delay:.7s}
@keyframes npDraw{0%{stroke-dashoffset:1}35%{stroke-dashoffset:0}82%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@media (prefers-reduced-motion:reduce){.nav-ico-play .np-draw{animation:none;stroke-dashoffset:0}}
.nav-ico-cart{width:26px;height:26px}
.nav-lottie{display:flex;align-items:center;justify-content:center;width:26px;height:26px}
.nav-lottie svg{width:100%!important;height:100%!important}
.nav-lottie.mob{width:24px;height:24px}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.nav-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--surface);box-shadow:0 0 0 2px var(--blue);transition:box-shadow .15s,transform .15s}
.nav-avatar:hover{transform:scale(1.05);box-shadow:0 0 0 2px var(--blue-dark)}
.icon-btn{width:40px;height:40px;border-radius:50%;background:var(--canvas);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s}
.icon-btn:hover{background:var(--line)}
.icon-btn svg{width:20px;height:20px}

/* ---------- Layout ---------- */
.shell{display:grid;grid-template-columns:280px minmax(0,640px) 300px;gap:24px;max-width:1280px;margin:0 auto;padding:calc(var(--nav-h) + 20px) 16px 80px;align-items:start}
.col-side{position:sticky;top:calc(var(--nav-h) + 16px);align-self:start}
.page-full{padding-top:var(--nav-h)}
@media (max-width:1100px){.shell{grid-template-columns:minmax(0,640px) 300px;justify-content:center}.col-left{display:none}}
@media (max-width:860px){.shell{grid-template-columns:minmax(0,640px)}.col-right{display:none}}

/* ---------- Cards & common ---------- */
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--r-sm);font-weight:700;transition:filter .15s,background .15s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{filter:brightness(1.12)}
.btn-soft{background:var(--blue-soft);color:var(--blue)}
.btn-soft:hover{background:var(--blue-soft-2)}
.btn-ghost{background:var(--canvas);color:var(--ink)}
.btn-ghost:hover{background:var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.avatar{border-radius:50%;object-fit:cover;background:var(--blue-soft)}
.av-32{width:32px;height:32px}.av-40{width:40px;height:40px}.av-48{width:48px;height:48px}
.muted{color:var(--ink-3);font-size:13px}
.divider{height:1px;background:var(--line);margin:8px 0}
.chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:var(--canvas);font-weight:700;font-size:13px;color:var(--ink-2);transition:.15s}
.chip:hover{background:var(--line)}
.chip.active{background:var(--blue);color:#fff}

/* ---------- Left rail ---------- */
.rail{display:flex;flex-direction:column;gap:2px}
.rail-item{display:flex;align-items:center;gap:12px;padding:2px 12px;border-radius:var(--r-sm);font-weight:700;transition:background .15s;color:var(--ink)}
.rail-item:hover{background:var(--line)}
.rail-item .ric{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface);box-shadow:var(--shadow);color:var(--blue)}
.rail-item .ric svg{width:20px;height:20px}

/* ---------- Stories ---------- */
.stories{display:flex;gap:10px;overflow-x:auto;padding:4px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{position:relative;flex:0 0 112px;height:190px;border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--shadow)}
.story img.bg{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.story:hover img.bg{transform:scale(1.06)}
.story::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,27,51,.25),transparent 35%,transparent 60%,rgba(11,27,51,.65))}
.story .s-av{position:absolute;top:10px;left:10px;width:38px;height:38px;border-radius:50%;border:3px solid var(--blue);z-index:2;object-fit:cover;background:#fff}
.story .s-name{position:absolute;left:10px;right:10px;bottom:8px;color:#fff;font-weight:700;font-size:12.5px;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.story.create{background:var(--surface)}
.story.create .plus{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;border:4px solid var(--surface);z-index:2}
.story.create::after{background:none}
.story.create .s-name{color:var(--ink);text-shadow:none;text-align:center}

/* ---------- Composer ---------- */
.composer{padding:14px 16px}
.composer-top{display:flex;gap:10px;align-items:center}
.composer-input{flex:1;background:var(--canvas);border:none;border-radius:999px;padding:11px 18px;color:var(--ink-2);text-align:left;font-size:15px;transition:background .15s}
.composer-input:hover{background:var(--line)}
.composer-actions{display:flex;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.composer-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border-radius:var(--r-sm);font-weight:700;color:var(--ink-2)}
.composer-actions button:hover{background:var(--canvas)}
.dot-video{color:var(--heart)}.dot-photo{color:var(--green)}.dot-reel{color:var(--gold)}

/* ---------- Post card ---------- */
.post{margin-bottom:18px;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.post-head{display:flex;align-items:center;gap:10px;padding:13px 16px 5px}
.post-head .who{flex:1;min-width:0}
.post-head .who b{display:block;font-size:15px}
.post-menu-btn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-3);background:transparent;border:none;cursor:pointer;transition:background .15s}
.post-menu-btn:hover{background:var(--canvas);color:var(--ink)}
.post-menu-btn svg{width:20px;height:20px}
/* post options dropdown */
.pm-backdrop{position:fixed;inset:0;z-index:120}
.pm-menu{position:fixed;z-index:121;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);padding:8px;max-height:86vh;overflow-y:auto;animation:pmIn .12s ease}
@keyframes pmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pm-item{display:flex;align-items:flex-start;gap:7px;width:100%;text-align:left;padding:4px 4px;border:none;background:transparent;border-radius:9px;cursor:pointer;color:var(--ink)}
.pm-item:hover{background:var(--canvas)}
.pm-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.pm-ic svg{width:16px;height:16px}
.pm-tx{display:flex;flex-direction:column;gap:1px;min-width:0;padding-top:2px}
.pm-tx b{font-size:13px;font-weight:700;line-height:1}
.pm-tx span{font-size:11.5px;color:var(--ink-3);line-height:1.3}
.pm-danger .pm-tx b{color:var(--heart)}
.pm-sep{height:1px;background:var(--line);margin:7px 8px}
.post-text{padding:10px 16px;white-space:pre-wrap;word-wrap:break-word}
/* Caption "See more": show first 2 lines/paragraphs, fold the rest behind a toggle */
.pt-collapsible .pt-rest{display:none}
.pt-collapsible.expanded .pt-rest{display:inline}
.pt-collapsible:not(.expanded) .pt-clip::after{content:'… '}
.pt-toggle{margin-left:4px;padding:0;border:0;background:none;color:var(--ink-3);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.pt-toggle:hover{text-decoration:underline}
.post-media{margin-top:2px;background:#000;max-height:680px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.post-media img{width:100%;object-fit:cover;max-height:680px}

/* Multi-photo album collage (Facebook-style) */
.post-gallery{margin-top:2px;display:grid;gap:3px;background:var(--surface)}
.post-gallery .pg-cell{position:relative;overflow:hidden;background:var(--surface-2);cursor:pointer}
.post-gallery .pg-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.post-gallery .pg-cell:hover img{transform:scale(1.03)}
.post-gallery.g2{grid-template-columns:1fr 1fr;aspect-ratio:2/1.05}
.post-gallery.g3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1.7/1}
.post-gallery.g3 .pg-cell:first-child{grid-row:1/3}
.post-gallery.g4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1/1}
.post-gallery.g5{grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;aspect-ratio:1.5/1}
.post-gallery.g5 .pg-cell:nth-child(1){grid-column:1/4}
.post-gallery.g5 .pg-cell:nth-child(2){grid-column:4/7}
.post-gallery.g5 .pg-cell:nth-child(3){grid-column:1/3}
.post-gallery.g5 .pg-cell:nth-child(4){grid-column:3/5}
.post-gallery.g5 .pg-cell:nth-child(5){grid-column:5/7}
.pg-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-size:30px;font-weight:800}
/* Multi-photo album — in-feed peek carousel (~1.5 slides, no arrows) */
.post-carousel{position:relative;margin-top:2px;background:var(--surface);overflow:hidden}
.post-carousel .pc-track{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:6px}
.post-carousel .pc-track::-webkit-scrollbar{display:none}
.post-carousel .pc-slide{flex:0 0 66.5%;scroll-snap-align:start;aspect-ratio:1/1;max-height:560px;background:#000;border-radius:10px;overflow:hidden;cursor:pointer}
.post-carousel .pc-slide img{width:100%;height:100%;object-fit:cover;display:block}
.post-carousel .pc-arrow{display:none}
.post-carousel .pc-count{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;z-index:2}
.post-carousel .pc-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2;pointer-events:none}
.post-carousel .pc-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .15s,transform .15s}
.post-carousel .pc-dot.on{background:#fff;transform:scale(1.35)}
/* In-feed reel post (5:6 auto-crop, opens reels watcher on click) */
.post-reel{position:relative;margin-top:2px;background:#000;overflow:hidden;cursor:pointer;aspect-ratio:5/6;max-height:680px;margin-left:auto;margin-right:auto}
.post-reel-vid{width:100%;height:100%;object-fit:cover;display:block}
.post-reel-badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.55);color:#fff;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;z-index:2}
.post-reel-badge svg{width:15px;height:15px;fill:currentColor}
.post-reel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;opacity:.9;pointer-events:none}
.post-reel-play svg{width:26px;height:26px;color:#fff;margin-left:3px}
/* composer multi-photo preview */
.cp-prev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.cp-thumb{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.cp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* photo album popup: carousel + actions/comments */
.lb-back{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:20px}
.lb-card{width:min(540px,96vw);max-height:94vh;background:var(--surface);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.lb-carousel{position:relative;background:#000;flex:0 0 auto}
.lb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;max-height:56vh;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.lb-slide img{max-width:100%;max-height:100%;object-fit:contain;display:block;transform-origin:center center;will-change:transform}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);color:#111;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:2}
.lb-nav:hover{background:#fff}
.lb-nav svg{width:20px;height:20px}
.lb-nav[hidden]{display:none}
.lb-prev{left:10px}
.lb-next{right:10px;transform:translateY(-50%) rotate(180deg)}
.lb-count{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;z-index:2}
.lb-carousel .pc-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2;pointer-events:none}
.lb-carousel .pc-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .15s,transform .15s}
.lb-carousel .pc-dot.on{background:#fff;transform:scale(1.35)}
.lb-foot{flex:1;min-height:0;display:flex;flex-direction:column}
.lb-scroll{flex:1;min-height:0;overflow-y:auto}
.lb-foot .post-stats{padding:12px 16px 8px}
.lb-comments.open{display:block;padding:0 16px 8px}
/* composer is a fixed footer row — always visible, never pushed off-screen */
.lb-foot .comment-form{flex:0 0 auto;margin:0;background:var(--surface);padding:10px 16px;border-top:1px solid var(--line)}
.lb-x{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;z-index:131}
.lb-x svg{width:22px;height:22px}

/* In-feed Reels carousel (injected every 5 posts) */
.reel-shelf{padding:14px 0 16px;margin-bottom:18px}
.reel-shelf-head{display:flex;align-items:center;gap:8px;padding:0 16px 12px}
.reel-shelf-head .rs-ic svg{width:22px;height:22px;color:var(--blue);display:block}
.reel-shelf-head b{font-size:16px}
.reel-shelf-head .rs-all{margin-left:auto;font-size:13px;font-weight:600;color:var(--blue)}
.reel-shelf-row{display:flex;gap:10px;overflow-x:auto;padding:0 16px;scroll-snap-type:x mandatory;scrollbar-width:none}
.reel-shelf-row::-webkit-scrollbar{display:none}
.reel-chip{position:relative;flex:0 0 150px;height:266px;border-radius:14px;overflow:hidden;background:#000;scroll-snap-align:start;box-shadow:var(--shadow);text-decoration:none}
.reel-chip-vid{width:100%;height:100%;object-fit:cover;display:block}
.reel-chip-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 38%,transparent 58%,rgba(0,0,0,.72))}
.reel-chip-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;opacity:.92}
.reel-chip-play svg{width:20px;height:20px;color:#fff;margin-left:2px}
.reel-chip-likes{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:4px;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.reel-chip-likes svg{width:13px;height:13px}
.reel-chip-user{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;color:#fff;font-size:12.5px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.reel-chip-user img{width:24px;height:24px;border-radius:50%;border:2px solid #fff;object-fit:cover;flex:0 0 auto}
.reel-chip-user{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* People you may know — in-feed carousel (after the 3rd post) */
.pyk{padding:14px 0 16px;margin-bottom:18px}
.pyk-head{display:flex;align-items:center;gap:9px;padding:0 16px 12px}
.pyk-head .pyk-ic svg{width:22px;height:22px;color:var(--ink-3);display:block}
.pyk-head b{font-size:16px}
.pyk-row{display:flex;gap:10px;overflow-x:auto;padding:0 16px 2px;scroll-snap-type:x mandatory;scrollbar-width:none}
.pyk-row::-webkit-scrollbar{display:none}
.pyk-card{position:relative;flex:0 0 168px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);scroll-snap-align:start;box-shadow:var(--shadow)}
.pyk-photo{display:block;width:100%;aspect-ratio:1/1;background:var(--surface-2)}
.pyk-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pyk-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pyk-x svg{width:15px;height:15px}
.pyk-body{padding:10px 11px 12px}
.pyk-name{display:block;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pyk-mutual{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:12.5px;margin:5px 0 11px;min-height:18px}
.pyk-mutual.pyk-empty{margin:5px 0 11px}
.pyk-mavs{display:inline-flex}
.pyk-mavs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid var(--surface);margin-left:-6px}
.pyk-mavs img:first-child{margin-left:0}
.pyk-add{width:100%;padding:10px;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;border:1.5px solid transparent;background:var(--blue-soft);color:var(--blue);box-shadow:none;transition:background .16s,color .16s,border-color .16s,transform .1s,box-shadow .16s}
.pyk-add svg{width:17px;height:17px;fill:currentColor}
.pyk-add:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 6px 18px rgba(var(--gold-rgb),.32)}
.pyk-add:hover svg{fill:#fff}
.pyk-add:active{transform:scale(.95)}
.pyk-add.pyk-added{background:transparent;color:var(--ink-3);border-color:var(--line);box-shadow:none}
.pyk-add.pyk-added:hover{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);box-shadow:none}
.post-stats{display:flex;justify-content:space-between;padding:10px 16px 8px;color:var(--ink-3);font-size:13.5px}
.post-stats .likes{display:flex;align-items:center;gap:6px}
.like-bubble{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--heart),#FF7A9C);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.like-bubble svg{width:11px;height:11px}
.post-actions{display:flex;border-top:1px solid var(--line);margin:0 12px;padding:4px 0}
.post-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border-radius:var(--r-sm);font-weight:700;color:var(--ink-2);transition:background .12s}
.post-actions button:hover{background:var(--canvas)}
.post-actions button svg{width:19px;height:19px}
.post-actions button.liked{color:var(--heart)}
.post-actions button.liked svg{animation:pop .35s cubic-bezier(.2,2.2,.5,1)}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- Comments ---------- */
.comments{padding:6px 16px 14px;display:none}
.comments.open{display:block}
.comments [data-clist]{max-height:360px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
#cc-list,#rc-list{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.comment{display:flex;gap:8px;margin-top:10px}
.comment .bubble{background:var(--canvas);border-radius:14px;padding:8px 12px;max-width:85%}
.comment .bubble b{font-size:13.5px;display:block}
.comment-form{display:flex;gap:8px;margin-top:12px;align-items:center}
.comment-form input{flex:1;background:var(--canvas);border:none;border-radius:999px;padding:9px 16px;outline:none}
.comment-form button{color:var(--blue)}

/* ============================================================
   VIDEO PLAYER — the beautiful one
   ============================================================ */
.vp{position:relative;width:100%;background:#000;overflow:hidden;--accent:var(--blue)}
.vp video{width:100%;max-height:680px;cursor:pointer}
.vp.theater video{max-height:82vh}
.vp-scrim{position:absolute;inset:auto 0 0 0;height:110px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));opacity:0;transition:opacity .25s;pointer-events:none}
.vp-controls{position:absolute;inset:auto 0 0 0;padding:0 14px 10px;opacity:0;transition:opacity .25s;color:#fff}
.vp:hover .vp-controls,.vp:hover .vp-scrim,.vp.paused .vp-controls,.vp.paused .vp-scrim,.vp.touch .vp-controls,.vp.touch .vp-scrim{opacity:1}
.vp-seek{position:relative;height:18px;display:flex;align-items:center;cursor:pointer}
.vp-track{position:relative;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.28);transition:height .15s}
.vp-seek:hover .vp-track{height:6px}
.vp-buffer{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.4);border-radius:4px;width:0}
.vp-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:4px;width:0}
.vp-knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%) scale(0);transition:transform .15s;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.vp-seek:hover .vp-knob{transform:translate(-50%,-50%) scale(1)}
.vp-row{display:flex;align-items:center;gap:4px;margin-top:2px}
.vp-row .grow{flex:1}
.vp-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#fff;transition:background .15s}
.vp-btn:hover{background:rgba(255,255,255,.15)}
.vp-btn svg{width:21px;height:21px;fill:currentColor}
.vp-time{font-size:12.5px;font-weight:700;padding:0 8px;letter-spacing:.3px;font-variant-numeric:tabular-nums;opacity:.95}
.vp-vol{display:flex;align-items:center}
.vp-vol input{width:0;opacity:0;transition:.2s;accent-color:#fff;cursor:pointer}
.vp-vol:hover input{width:68px;opacity:1;margin-right:6px}
.vp-speed{font-size:12.5px;font-weight:900;width:auto;padding:0 10px}
.vp-big{display:none}
.vp-big svg{width:34px;height:34px;fill:#fff;margin-left:4px}
.vp-views{position:absolute;top:10px;left:12px;background:rgba(11,27,51,.55);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;opacity:0;transition:opacity .25s}
.vp:hover .vp-views,.vp.paused .vp-views{opacity:1}

/* ---------- Watch page ---------- */
.watch-wrap{max-width:1100px;margin:0 auto;padding:24px 16px 80px}
.watch-wrap h1{font-size:26px;font-weight:900;margin-bottom:4px}
.watch-wrap .sub{color:var(--ink-3);margin-bottom:20px}
.watch-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.watch-head h1{margin-bottom:4px}
.watch-head .btn svg{width:17px;height:17px;fill:currentColor}
.watch-item{margin-bottom:26px}
.watch-player{border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:#000}
.watch-player .video-js{width:100%}
.watch-player .vjs-poster{background-size:cover}
.watch-meta{padding:14px 16px}
.watch-meta h3{font-size:17px;margin-bottom:8px}
/* ---- Watch carousels (by category + interleaved marketplace) ---- */
.wc-sec{margin-bottom:26px}
.wc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:0 2px}
.wc-head h2{font-size:18px;font-weight:900;display:flex;align-items:center;gap:8px;color:var(--ink)}
.wc-head h2 svg{width:20px;height:20px;fill:none;stroke:currentColor}
.wc-count{font-size:12px;font-weight:800;color:var(--ink-3);background:var(--surface-2);padding:3px 11px;border-radius:999px;flex:0 0 auto}
.wc-more{font-size:13px;font-weight:800;color:var(--blue);flex:0 0 auto}
.wc-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;-ms-overflow-style:none;scrollbar-width:none}
.wc-rail::-webkit-scrollbar{display:none}
.wc-card{flex:0 0 auto;width:260px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .12s,border-color .15s,box-shadow .15s}
.wc-card:hover{transform:translateY(-3px);border-color:rgba(var(--gold-rgb),.4);box-shadow:var(--shadow-lg)}
.wc-card:active{transform:scale(.985)}
.wc-thumb{position:relative;aspect-ratio:16/9;background:var(--canvas);display:flex;align-items:center;justify-content:center;overflow:hidden}
.wc-thumb img{width:100%;height:100%;object-fit:cover}
.wc-thumb-ph{color:var(--muted)}.wc-thumb-ph svg{width:34px;height:34px}
.wc-play{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.wc-play svg{width:20px;height:20px;fill:#fff;margin-left:2px}
.wc-card:hover .wc-play{opacity:1}
.wc-badge{position:absolute;right:6px;bottom:6px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.7);padding:2px 7px;border-radius:6px}
.wc-info{display:flex;gap:10px;padding:10px 12px}
.wc-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px}
.wc-txt{min-width:0}
.wc-txt b{display:block;font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-txt span{font-size:12px;color:var(--ink-3)}
/* product cards in the marketplace rail */
.wc-sec-prod{background:linear-gradient(135deg,rgba(var(--gold-rgb),.06),transparent 60%);border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 0 26px}
.wc-pcard{width:188px}
.wc-pthumb{aspect-ratio:1}
.wc-pinfo{flex-direction:column;gap:3px}
.wc-pinfo b{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.wc-price{font-size:15px;font-weight:900;color:var(--blue)}
@media (max-width:560px){.wc-card{width:230px}.wc-pcard{width:160px}}
/* Reels browse — portrait cards in the carousels */
.rb-card{flex:0 0 auto;width:152px;scroll-snap-align:start;display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .12s,border-color .15s,box-shadow .15s}
.rb-card:hover{transform:translateY(-3px);border-color:rgba(var(--gold-rgb),.4);box-shadow:var(--shadow-lg)}
.rb-card:active{transform:scale(.985)}
.rb-thumb{position:relative;aspect-ratio:9/16;background:var(--canvas);display:flex;align-items:center;justify-content:center;overflow:hidden}
.rb-thumb img{width:100%;height:100%;object-fit:cover}
.rb-ph{color:var(--muted)}.rb-ph svg{width:34px;height:34px}
.rb-play{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.rb-play svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.rb-card:hover .rb-play{opacity:1}
.rb-views{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:2px 7px;border-radius:6px}
.rb-views svg{width:12px;height:12px;fill:#fff}
.rb-meta{display:flex;align-items:center;gap:8px;padding:8px 9px}
.rb-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 28px}
.rb-t{min-width:0}
.rb-t b{display:block;font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-t span{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
@media (max-width:560px){.rb-card{width:135px}}

/* ============================================================
   REELS PLAYER — full-screen vertical snap
   ============================================================ */
.reels-stage{position:fixed;inset:0;background:#05080F;z-index:90;display:flex;align-items:center;justify-content:center}
.reels-scroll{height:100dvh;width:100%;max-width:480px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.reels-scroll::-webkit-scrollbar{display:none}
.reel{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:12px 0}
.reel-frame{position:relative;width:100%;height:calc(100dvh - 24px);max-height:860px;border-radius:18px;overflow:hidden;background:#0B1B33;box-shadow:0 12px 60px rgba(0,0,0,.6)}
.reel-frame video{width:100%;height:100%;object-fit:cover;cursor:pointer}
.reel-frame video.clip-contain{object-fit:contain;background:#000}
/* anti-flash poster overlay: covers the black gap between play() and first decoded frame */
.reel-thumb-hold{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;transition:opacity .26s ease}
.reel-thumb-hold.gone{opacity:0}
/* rotate-to-fullscreen button — only on LANDSCAPE video clips, mobile only (hidden by default) */
.clip-rotate{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;display:none;align-items:center;justify-content:center;padding:7px 12px;border-radius:12px;background:rgba(5,8,15,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:none;cursor:pointer}
.clip-rotate img{width:30px;height:18px;display:block;object-fit:contain}
@media (max-width:680px){
  .clip-reel.is-landscape .clip-rotate{display:inline-flex;top:calc(var(--safe-top) + 12px)}
}
/* rotate-to-fullscreen overlay: video turned 90° to fill the screen in landscape */
.clip-fs-back{position:fixed;inset:0;z-index:9999;background:#000}
.clip-fs-stage{position:absolute;top:50%;left:50%;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}
video.clip-fs-vid{width:100%;height:100%;object-fit:contain;background:#000}
.clip-fs-close{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.reel-top{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(255,255,255,.2);z-index:5}
.reel-top i{display:block;height:100%;width:0;background:#22c55e;border-radius:0 3px 3px 0}
.reel-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,15,.35),transparent 22%,transparent 55%,rgba(5,8,15,.78));pointer-events:none}
.reel-info{position:absolute;left:14px;right:74px;bottom:16px;color:#fff;z-index:4}
.reel-user{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.reel-user a img{width:38px;height:38px;border-radius:50%;border:2px solid #fff}
.reel-user b{font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.reel-follow{margin-left:4px;padding:4px 12px;border:1.5px solid rgba(255,255,255,.85);border-radius:8px;color:#fff;font-size:12.5px;font-weight:700;backdrop-filter:blur(4px)}
.reel-cap{font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6);margin-bottom:8px}
.reel-music{display:flex;align-items:center;gap:8px;font-size:12.5px;opacity:.92}
.reel-music .disc{width:26px;height:26px;border-radius:50%;background:conic-gradient(#222,#555,#222,#555,#222);border:2px solid rgba(255,255,255,.7);animation:spin 4s linear infinite;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.reel-music .disc::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.reel-music .mtxt{white-space:nowrap;overflow:hidden;max-width:200px;mask-image:linear-gradient(90deg,#000 85%,transparent)}
.reel-rail{position:absolute;right:10px;bottom:22px;display:flex;flex-direction:column;gap:10px;align-items:center;z-index:4}
.reel-rb{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:11.5px;font-weight:700;text-shadow:0 1px 5px rgba(0,0,0,.6)}
.reel-rb .rico{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s}
.reel-rb:hover .rico{transform:scale(1.1);background:rgba(255,255,255,.24)}
.reel-rb .rico svg{width:21px;height:21px;fill:#fff}
.reel-rb.liked .rico{background:var(--heart)}
.reel-rb.liked .rico svg{animation:pop .4s cubic-bezier(.2,2.2,.5,1)}
.reel-mute{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;background:rgba(5,8,15,.5);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center}
.reel-mute svg{width:19px;height:19px;fill:#fff}
.reels-close{position:fixed;top:16px;left:16px;z-index:95;width:44px;height:44px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.reels-close:hover{background:rgba(255,255,255,.15);border-color:#fff}
.reels-close svg{width:22px;height:22px}
/* Mobile (incl. installed PWA): clear the iOS status bar with safe-area + a 10px buffer */
@media (max-width:680px){
  /* Regular browser tabs (Safari/Chrome): the browser chrome already provides top spacing,
     so use the real inset (≈0 at top, the notch when scrolled) → header sits flush. The
     installed-PWA floor is restored in the display-mode:standalone block below. */
  :root{--safe-top:env(safe-area-inset-top, 0px);--nav-h:calc(65px + var(--safe-top) + 10px)}
  /* nav top padding is set in the mobile block below (.nav padding shorthand) */
  /* full-screen Reels viewer has no nav — push its top controls below the status bar */
  .reels-close{top:calc(var(--safe-top) + 16px)}
  /* progress bar now lives at the BOTTOM — lift it above the home indicator */
  .reel-top{top:auto;bottom:env(safe-area-inset-bottom, 0px)}
  /* reels sound button + reels-AD sound button: align on the same row as the back (<) circle */
  .reel-mute,.reel-vad-sound{top:calc(var(--safe-top) + 16px)}
  /* story-viewer header offset is handled in the base .sv-bars/.sv-head rules (max(safe-area, …)) */
}
/* Installed PWA (Add to Home Screen) draws under the status bar and some devices report a
   0 inset — restore a floor there so the header still clears it. Regular tabs are unaffected. */
@media (display-mode: standalone){ :root{ --safe-top: max(env(safe-area-inset-top, 0px), 44px) } }
/* NATIVE iOS/Android app (Capacitor): the native shell already insets below the status bar,
   so drop the web safe-area floor — the header sits flush at the top like a standard mobile app. */
html.native{--safe-top:0px;--nav-h:var(--nav-bar)}
html.native .nav{padding-top:0}
.reel-heart-burst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:6}
.reel-heart-burst svg{width:110px;height:110px;fill:var(--heart);filter:drop-shadow(0 4px 20px rgba(240,52,92,.6));animation:burst .8s ease forwards}
@keyframes burst{0%{transform:scale(0) rotate(-12deg);opacity:0}25%{transform:scale(1.25) rotate(4deg);opacity:1}60%{transform:scale(1);opacity:1}100%{transform:scale(.9) translateY(-30px);opacity:0}}
.reel-title{font-weight:900}
.reel-follow.following{background:rgba(255,255,255,.18);border-color:transparent}
.reel-rb.saved .rico{background:var(--gold)}
.reel-rb.saved .rico svg{fill:#fff}
/* post button */
.reel-sentinel{height:2px}
/* VAST ad overlay (Google IMA) — sits above the video, below close/cat controls */
.reel-ad{position:absolute;inset:0;z-index:7;background:#000}
.reel-ad>div{width:100%;height:100%}
/* self-hosted video ad overlay */
.reel-vad{display:block}
.reel-vad-vid{width:100%;height:100%;object-fit:cover;display:block}
.reel-vad-bar{position:absolute;left:14px;right:14px;bottom:18px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px}
.reel-vad-label{background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:6px}
.reel-vad-cta{position:absolute;left:14px;right:14px;bottom:74px;display:block;text-align:center;background:var(--blue);color:#fff;font-weight:800;font-size:15px;padding:12px 16px;border-radius:10px;text-decoration:none;z-index:2;box-shadow:0 6px 20px rgba(16,67,201,.45)}
.reel-vad-tap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2}
.reel-vad-tap[hidden]{display:none}
.reel-vad-tap svg{width:28px;height:28px;color:#fff;margin-left:3px}
.reel-vad-sound{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.reel-vad-sound svg{width:18px;height:18px;fill:#fff;color:#fff}
.reel-vad-skip{background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;cursor:pointer}
.reel-vad-skip:disabled{opacity:.7;cursor:default}
.ad-badge.on{background:#dff3e8;color:#1a8a52}
html[data-theme="dark"] .ad-badge.on{background:rgba(34,165,101,.18);color:#46c98a}
.reel-empty{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;text-align:center;padding:20px}
.reel-empty svg{width:54px;height:54px;fill:rgba(255,255,255,.5)}
/* reel upload modal */
.ru-modes{display:flex;gap:8px;margin-bottom:16px}
.ru-mode{flex:1;padding:10px;border-radius:var(--r-sm);background:var(--canvas);font-weight:700;color:var(--ink-2)}
.ru-mode.active{background:var(--blue);color:#fff}
.ru-thumbs{display:flex;align-items:center;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.ru-thumb-label{font-size:13px;font-weight:700;color:var(--ink-2);flex-shrink:0}
.ru-thumb{width:50px;height:80px;object-fit:cover;border-radius:8px;border:2.5px solid transparent;cursor:pointer;flex-shrink:0}
.ru-thumb.sel{border-color:var(--blue)}
.ru-cats{display:flex;flex-wrap:wrap;gap:7px}
.ru-music-tabs{display:flex;gap:7px;margin-bottom:10px}
.ru-mt{flex:1;padding:8px;border-radius:var(--r-sm);background:var(--canvas);font-weight:700;font-size:13px;color:var(--ink-2)}
.ru-mt.active{background:var(--blue-soft);color:var(--blue)}
.ru-music-lib{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}
.ru-track{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);background:var(--canvas);text-align:left}
.ru-track svg{width:20px;height:20px;fill:var(--blue);flex-shrink:0}
.ru-track span{display:flex;flex-direction:column;line-height:1.2}
.ru-track b{font-size:14px}
.ru-track i{font-size:12px;color:var(--ink-3);font-style:normal}
.ru-track.sel{background:var(--blue-soft);outline:2px solid var(--blue)}

/* ---------- Reel upload modal — dark "Upload Reel" concept ---------- */
/* size the backdrop to the DYNAMIC viewport so the modal (and its footer button) sits ABOVE Safari's bottom toolbar */
.rum-back{bottom:auto;height:100vh;height:100dvh}
.rum{width:100%;max-width:520px;background:#14110a;border:1px solid rgba(var(--gold-rgb),.2);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(var(--gold-rgb),.06);overflow:hidden;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;animation:rise .25s}
.rum-head{padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rum-title{font-size:18px;font-weight:900;color:#f3efe6;display:flex;align-items:center;gap:9px}
.rum-title svg{width:21px;height:21px;color:var(--gold);fill:var(--gold)}
.rum-sub{font-size:12.5px;color:#9a9385;margin-top:4px}
.rum-x{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#1d1810;border:1px solid rgba(255,255,255,.08);color:#9a9385;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.rum-x:hover{background:#2a2316;color:#f3efe6}
.rum-body{flex:1 1 auto;min-height:0;padding:20px 24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
/* sticky Publish footer — always visible, clears the iOS home indicator */
.rum-foot{flex-shrink:0;padding:12px 24px calc(12px + env(safe-area-inset-bottom, 0px));border-top:1px solid rgba(255,255,255,.07)}
.rum-foot .rum-submit{margin-top:0}
.rum-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rum-tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:12px;border:1.5px solid rgba(255,255,255,.1);background:#1d1810;color:#9a9385;font-weight:800;font-size:14px;transition:all .15s}
.rum-tab svg{width:16px;height:16px}
.rum-tab.active{border-color:var(--gold);background:rgba(var(--gold-rgb),.1);color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.08)}
.rum-drop{border:2px dashed rgba(255,255,255,.14);border-radius:16px;padding:30px 16px;text-align:center;cursor:pointer;background:#181309;transition:all .15s}
.rum-drop:hover,.rum-drop.drag{border-color:var(--gold);background:rgba(var(--gold-rgb),.05)}
.rum-drop.ready{border-color:rgba(var(--gold-rgb),.5);border-style:solid;background:rgba(var(--gold-rgb),.04);padding:16px}
.rum-drop.busy{cursor:default}
.rum-drop.sm{padding:16px}
.rum-drop-ic{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:rgba(var(--gold-rgb),.1);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.rum-drop.ready .rum-drop-ic{display:none}
.rum-drop-ic svg{width:26px;height:26px}
.rum-drop-t{font-size:15px;font-weight:800;color:#e8e2d5}
.rum-drop-s{font-size:12.5px;color:#8a8478;margin-top:5px;word-break:break-word}
.rum-thumbs{display:flex;align-items:center;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.rum-thumb-label{font-size:13px;color:#bdb6a6;flex-shrink:0}
.rum-thumb{width:50px;height:80px;object-fit:cover;border-radius:8px;border:2.5px solid transparent;cursor:pointer;flex-shrink:0}
.rum-thumb.sel{border-color:var(--gold)}
.rum-field{display:flex;flex-direction:column}
.rum-field>label{font-size:13.5px;font-weight:800;color:#cfc8b8;margin-bottom:8px}
.rum-field>label span{color:#857f72;font-weight:400}
.rum-input{background:#1d1810;border:1.5px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 14px;color:#f3efe6;font-family:var(--font);font-size:14px;outline:none;width:100%;resize:vertical;transition:border-color .15s}
.rum-input:focus{border-color:var(--gold)}
/* Admin "Upload as" owner picker (inside the uploader modal) */
.rum-owner-field{background:rgba(var(--gold-rgb),.06);border:1px solid rgba(var(--gold-rgb),.25);border-radius:12px;padding:12px}
.rum-owner{position:relative}
.rum-owner-list{position:relative;margin-top:6px;max-height:230px;overflow-y:auto;background:#15110a;border:1px solid rgba(255,255,255,.1);border-radius:10px;display:none}
.rum-owner-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;text-align:left}
.rum-owner-opt:hover{background:rgba(var(--gold-rgb),.08)}
.rum-owner-opt img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}
.rum-owner-opt div{display:flex;flex-direction:column;min-width:0}
.rum-owner-opt b{font-size:14px;color:#f3efe6}
.rum-owner-opt i{font-size:12px;color:#8a8478;font-style:normal}
.rum-owner-empty{padding:12px;color:#8a8478;font-size:13px;text-align:center}
.rum-owner-chip{display:flex;align-items:center;gap:10px;background:#1d1810;border:1.5px solid rgba(var(--gold-rgb),.5);border-radius:10px;padding:8px 10px;margin-bottom:8px}
.rum-owner-chip img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.rum-owner-chip div{display:flex;flex-direction:column;flex:1;min-width:0}
.rum-owner-chip b{font-size:14px;color:#f3efe6}
.rum-owner-chip i{font-size:12px;color:#8a8478;font-style:normal}
.rum-owner-chip button{background:none;border:none;color:#cfc8b8;cursor:pointer;font-size:15px;padding:4px 8px}
/* Admin → Upload Media section */
.admin-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.admin-upload-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:22px;border-radius:16px;border:1px solid var(--border);background:var(--card);cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s}
.admin-upload-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.admin-upload-card b{font-size:16px;color:var(--text)}
.admin-upload-card i{font-size:12.5px;color:var(--muted);font-style:normal}
.auc-ic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.auc-ic svg{width:24px;height:24px;color:#fff}
.auc-ic.pink{background:linear-gradient(135deg,#E91E63,#9C27B0)}
.auc-ic.blue{background:linear-gradient(135deg,#1976D2,#0D47A1)}
.admin-upload-note .auc-note-ic{display:inline-flex;vertical-align:-3px}
.admin-upload-note .auc-note-ic svg{width:15px;height:15px}
.admin-upload-recent{margin-top:22px}
.admin-upload-recent-t{font-size:14px;color:var(--text);margin-bottom:10px}
.au-recent-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.au-recent-item{flex-shrink:0;width:84px;text-decoration:none}
.au-recent-item img,.au-recent-ph{width:84px;height:134px;border-radius:10px;object-fit:cover;display:block;background:var(--card2,#1a2030)}
.au-recent-ph{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.au-recent-ph svg{width:26px;height:26px}
.au-recent-item span{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.admin-upload-grid{grid-template-columns:1fr}}
.rum-input::placeholder{color:#6e695e}
.rum-cats{display:flex;flex-wrap:wrap;gap:8px}
.rum-chip{padding:8px 16px;border-radius:999px;background:#1d1810;border:1px solid rgba(255,255,255,.1);color:#bdb6a6;font-size:13px;font-weight:700;transition:all .15s}
.rum-chip:hover{border-color:rgba(var(--gold-rgb),.4)}
.rum-chip.active{background:rgba(var(--gold-rgb),.12);border-color:var(--gold);color:var(--gold)}
.rum-chip-add{border-style:dashed;color:var(--gold);background:transparent}
.rum-newcat-wrap{display:inline-flex;align-items:center;gap:6px;margin-left:4px}
.rum-newcat-in{padding:8px 12px;border-radius:999px;background:#1a2030;border:1px solid var(--gold);color:#fff;font-size:13px;font-weight:600;width:170px;outline:none}
.rum-newcat-go{padding:8px 14px;border-radius:999px;background:var(--gold);border:none;color:#1a1408;font-size:13px;font-weight:800;cursor:pointer}
.rum-newcat-go:disabled{opacity:.5;cursor:default}
.rum-newcat-x{width:30px;height:30px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.18);color:#bdb6a6;font-size:13px;cursor:pointer}
/* Category selector — searchable list + inline "＋ New" (Psar-style) */
.rum-catsel{position:relative}
.rum-catpick{display:flex;gap:8px;align-items:stretch}
.rum-catbox{position:relative;flex:1;min-width:0}
.rum-catinput{padding-right:34px}
.rum-catic{position:absolute;right:11px;top:0;bottom:0;display:flex;align-items:center;color:#857f72;pointer-events:none}
.rum-catic[data-mode="clear"]{pointer-events:auto;cursor:pointer;color:#bdb6a6;font-size:14px;font-weight:700}
.rum-catic svg{width:15px;height:15px}
.rum-catmenu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:70;background:#15110a;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.55);max-height:210px;overflow-y:auto}
.rum-catopt{display:block;width:100%;text-align:left;padding:9px 13px;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.05);color:#d8d2c4;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--font)}
.rum-catopt:last-child{border-bottom:none}
.rum-catopt:hover{background:rgba(255,255,255,.05)}
.rum-catopt.sel{background:rgba(var(--gold-rgb),.12);color:var(--gold);font-weight:800}
.rum-catempty{padding:11px 13px;font-size:12.5px;color:#857f72;line-height:1.4}
.rum-catnew{flex-shrink:0;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1.5px dashed var(--gold);background:transparent;color:var(--gold);font-size:13px;font-weight:800;cursor:pointer;font-family:var(--font);white-space:nowrap}
.rum-catnew:hover{background:rgba(var(--gold-rgb),.08)}
.rum-catadd{display:flex;gap:8px;align-items:stretch}
.rum-catadd-in{flex:1}
.rum-catadd-go{flex-shrink:0;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;border:none;background:var(--gold);color:#1a1408;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--font)}
.rum-catadd-go:disabled{opacity:.5;cursor:default}
.rum-catadd-x{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.18);color:#bdb6a6;font-size:14px;cursor:pointer}
.rum-mtabs{display:flex;gap:8px;margin-bottom:10px}
.rum-mt{flex:1;padding:9px;border-radius:10px;background:#1d1810;border:1px solid rgba(255,255,255,.1);color:#9a9385;font-weight:700;font-size:13px;transition:all .15s}
.rum-mt.active{background:rgba(var(--gold-rgb),.12);border-color:var(--gold);color:var(--gold)}
#ru-music-lib.ru-music-lib{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto}
.rum-track{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#1d1810;border:1px solid rgba(255,255,255,.08);color:#e8e2d5;text-align:left;transition:all .15s}
.rum-track:hover{background:#241d12}
.rum-track svg{width:20px;height:20px;fill:var(--gold);flex-shrink:0}
.rum-track span{display:flex;flex-direction:column;line-height:1.25}
.rum-track b{font-size:14px}
.rum-track i{font-size:12px;color:#8a8478;font-style:normal}
.rum-track.sel{background:rgba(var(--gold-rgb),.12);border-color:var(--gold)}
/* Music library search box (in the dark upload modal) */
.rum-msearch{margin-bottom:8px}
.rum-tracklist{display:flex;flex-direction:column;gap:6px;max-height:168px;overflow-y:auto}
#ru-music-lib.ru-music-lib{max-height:none;overflow:visible}
/* Theme-aware searchable category selector (feed composer video upload) */
.cs-sel{position:relative}
.cs-pick{display:flex;gap:8px;align-items:stretch}
.cs-box{position:relative;flex:1;min-width:0}
.cs-input{padding-right:34px}
.cs-ic{position:absolute;right:11px;top:0;bottom:0;display:flex;align-items:center;color:var(--muted);pointer-events:none}
.cs-ic[data-mode="clear"]{pointer-events:auto;cursor:pointer;font-size:14px;font-weight:700}
.cs-ic svg{width:15px;height:15px}
.cs-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:70;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.25);max-height:210px;overflow-y:auto}
.cs-opt{display:block;width:100%;text-align:left;padding:9px 13px;background:none;border:none;border-bottom:1px solid var(--line);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--font)}
.cs-opt:last-child{border-bottom:none}
.cs-opt:hover{background:var(--surface-2)}
.cs-opt.sel{background:var(--blue-soft);color:var(--blue);font-weight:800}
.cs-empty{padding:11px 13px;font-size:12.5px;color:var(--muted);line-height:1.4}
.cs-new{flex-shrink:0;display:inline-flex;align-items:center;padding:0 16px;border-radius:10px;border:1.5px dashed var(--blue);background:transparent;color:var(--blue);font-size:13px;font-weight:800;cursor:pointer;font-family:var(--font);white-space:nowrap}
.cs-new:hover{background:var(--blue-soft)}
.cs-add{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.cs-add-in{flex:1}
.cs-add-go{flex-shrink:0;display:inline-flex;align-items:center;padding:0 18px;border-radius:10px;border:none;background:var(--blue);color:#fff;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--font)}
.cs-add-go:disabled{opacity:.5;cursor:default}
.cs-add-x{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border-radius:10px;background:transparent;border:1px solid var(--line);color:var(--muted);font-size:14px;cursor:pointer}
.fld-opt{color:var(--muted);font-weight:500;font-size:12px}
.rum-submit{margin-top:4px;width:100%;padding:14px;border-radius:12px;background:var(--gold);color:var(--on-accent);font-weight:900;font-size:15px;transition:filter .15s}
.rum-submit:hover{filter:brightness(1.08)}
/* merged uploader: Reel|Video type toggle + featured (share) image */
.rum-type{display:flex;gap:8px;margin-bottom:14px;background:rgba(127,127,127,.12);padding:5px;border-radius:14px}
.rum-typebtn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-radius:10px;font-weight:800;font-size:14.5px;color:var(--ink-2);background:transparent;border:none;cursor:pointer;transition:all .15s}
.rum-typebtn svg{width:18px;height:18px}
.rum-typebtn.active{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.rum-share{display:flex;gap:12px;align-items:stretch}
.rum-share .rum-drop.sm{flex:1}
.rum-share-prev{width:120px;height:68px;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex:0 0 auto}
.rum-hint{font-size:12px;color:var(--ink-3);margin:6px 2px 0}
/* music trim: drag a window over the song timeline */
.rum-trim{margin-top:12px;background:rgba(127,127,127,.10);border-radius:12px;padding:12px}
.rum-trim-lbl{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:9px}
.rum-trim-track{position:relative;height:44px;border-radius:9px;overflow:hidden;touch-action:none;cursor:default;
  background:repeating-linear-gradient(90deg,rgba(127,127,127,.22) 0 2px,transparent 2px 7px),linear-gradient(var(--canvas),var(--canvas))}
.rum-trim-win{position:absolute;top:0;bottom:0;left:0;min-width:28px;background:rgba(62,123,250,.28);border:2px solid var(--blue);border-radius:9px;cursor:grab;box-sizing:border-box;box-shadow:0 0 0 100vmax rgba(0,0,0,.18)}
.rum-trim-win::before,.rum-trim-win::after{content:'';position:absolute;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:3px;background:var(--blue)}
.rum-trim-win::before{left:5px}.rum-trim-win::after{right:5px}
.rum-trim-win:active{cursor:grabbing}
.rum-trim-row{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.rum-trim-play{font-size:13px;font-weight:800;color:var(--blue);padding:6px 14px;border:1px solid var(--blue);border-radius:999px;background:transparent;cursor:pointer}
.rum-trim-times{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rum-submit:disabled{opacity:.6;cursor:not-allowed}
/* drama card in modal */
.rum-drama-card{border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#1d1810;padding:14px 16px}
.rum-drama-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;color:#e8e2d5}
.rum-drama-toggle input{width:18px;height:18px;accent-color:var(--gold);flex-shrink:0}
.rum-drama-ic{display:flex}
.rum-drama-ic svg{width:20px;height:20px;fill:var(--gold)}
.rum-drama-toggle b{font-size:14px}
.rum-drama-hint{margin-left:auto;font-size:12.5px;color:#857f72}
.rum-drama-fields{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.rum-drama-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* drama badge on a reel */
.reel-drama{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:5px 11px;border-radius:999px;background:rgba(var(--gold-rgb),.18);backdrop-filter:blur(6px);color:#e6f0ff;font-size:12.5px;font-weight:700;width:max-content;max-width:90%}
.reel-drama svg{width:15px;height:15px;fill:var(--gold);flex-shrink:0}
.reel-drama span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* episodes sheet */
.ep-back{align-items:flex-end}
@media (min-width:640px){.ep-back{align-items:center}}
.ep-sheet{width:100%;max-width:560px;max-height:80vh;background:#14110a;border:1px solid rgba(var(--gold-rgb),.2);border-radius:20px 20px 0 0;overflow:hidden;display:flex;flex-direction:column;animation:rise .25s}
@media (min-width:640px){.ep-sheet{border-radius:20px}}
.ep-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07);color:#f3efe6;font-size:16px}
.ep-grid{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;overflow-y:auto}
.ep-card{text-align:left;color:#cfc8b8}
.ep-thumb{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#1d1810;display:flex;align-items:center;justify-content:center;border:2px solid transparent}
.ep-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ep-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ep-thumb svg{width:28px;height:28px;fill:#4a4438}
.ep-card.cur .ep-thumb{border-color:var(--gold)}
.ep-no{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:800;z-index:2}
.ep-t{margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- Profile dashboard (gold style, theme-aware) ---------- */
.pd-page{background:var(--canvas);min-height:100vh}
.pd-wrap{max-width:920px;margin:0 auto;padding:24px 16px 80px}
.pd-hero{position:relative;background:radial-gradient(ellipse at 50% 38%,#10245e 0%,#0a1738 42%,#040a1e 72%,#01030c 100%);border:1px solid rgba(91,164,255,.28);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg),0 0 60px rgba(16,67,201,.18);margin-bottom:20px}
/* animated glowing data-squares backdrop */
.pd-hero-fx{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.pd-sq{position:absolute;border-radius:2px;opacity:.2;will-change:opacity,transform;animation:pdSq ease-in-out infinite}
.pd-sq.f{background:#2f6bff;box-shadow:0 0 8px rgba(59,130,246,.85)}
.pd-sq.o{border:1px solid rgba(120,170,255,.8)}
.pd-sq.b{background:#dbe7ff;box-shadow:0 0 11px rgba(207,224,255,.95)}
@keyframes pdSq{0%,100%{opacity:.1;transform:translateY(0)}50%{opacity:.85;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.pd-sq{animation:none;opacity:.45}}
.pd-hero-top{position:relative;z-index:1}
/* readable content on the dark hero (both themes) */
.pd-hero .pd-name-row h1{color:#fff}
.pd-hero .pd-edit{color:rgba(255,255,255,.65)}
.pd-hero .pd-edit:hover{color:#9ec3ff}
.pd-hero .pd-role{color:#bcd6ff;background:rgba(91,164,255,.16);border-color:rgba(91,164,255,.5)}
.pd-hero .pd-meta{color:rgba(255,255,255,.66)}
.pd-hero .pd-stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.pd-hero .pd-stat:hover{border-color:rgba(91,164,255,.5)}
.pd-hero .pd-stat b{color:#fff}
.pd-hero .pd-bio{color:rgba(255,255,255,.8)}
.pd-hero .pd-actions{border-top-color:rgba(255,255,255,.12)}
.pd-hero .pd-act{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.pd-hero .pd-act:hover{border-color:rgba(91,164,255,.6);color:#cfe0ff}
.pd-hero .pd-act.primary{background:var(--gold);border-color:var(--gold);color:#fff}
.pd-hero-bar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold) 30%,#5BA4FF 70%,transparent);box-shadow:0 0 18px rgba(var(--gold-rgb),.5);z-index:2}
.pd-hero-glow{position:absolute;top:0;left:0;right:0;height:180px;background:radial-gradient(ellipse at 50% -20%,rgba(var(--gold-rgb),.14),transparent 70%);pointer-events:none}
.pd-hero-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:32px 22px 22px;position:relative}
.pd-avatar-wrap{position:relative;flex-shrink:0}
.pd-avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid rgba(var(--gold-rgb),.5);background:var(--surface-2);box-shadow:0 0 0 6px rgba(var(--gold-rgb),.12),0 0 22px rgba(var(--gold-rgb),.25)}
.pd-cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;border:3px solid var(--surface)}
.pd-cam svg{width:15px;height:15px;fill:var(--on-accent)}
.pd-cam.busy{opacity:.5}
.pd-id{flex:1;min-width:0;padding-top:2px}
.pd-id{width:100%}
.pd-name-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pd-name-row h1{font-size:24px;font-weight:900;color:var(--ink);line-height:1.2}
.pd-edit{color:var(--ink-3);display:flex}
.pd-edit svg{width:16px;height:16px}
.pd-edit:hover{color:var(--gold)}
.pd-role{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.1em;padding:5px 12px;border-radius:999px;background:rgba(var(--gold-rgb),.12);color:var(--gold);border:1px solid rgba(var(--gold-rgb),.4)}
html[data-theme="dark"] .pd-role{color:var(--gold)}
.pd-role.admin{background:rgba(96,165,250,.14);color:#3b82f6;border-color:rgba(96,165,250,.4)}
html[data-theme="dark"] .pd-role.admin{color:#7fb4ff}
.pd-meta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;color:var(--ink-3);font-size:13px}
.pd-meta span{display:flex;align-items:center;gap:6px}
.pd-meta svg{width:13px;height:13px}
.pd-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;width:100%}
.pd-stat{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;color:var(--ink-3);font-size:12.5px;transition:border-color .15s,transform .12s}
.pd-stat:hover{border-color:rgba(var(--gold-rgb),.4)}
.pd-stat:active{transform:scale(.97)}
.pd-stat .ic{display:flex}
.pd-stat .ic svg{width:14px;height:14px;fill:var(--ink-3)}
.pd-stat .ic.heart svg{fill:#ff6b8a}
.pd-stat b{font-weight:800;color:var(--ink)}
.pd-stat b.heart{color:#ff6b8a}
.pd-bio{margin-top:12px;color:var(--ink-2);font-size:14px;line-height:1.5;text-align:center}
.pd-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:14px 26px 20px;border-top:1px solid var(--line)}
.pd-act{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);transition:border-color .15s,color .15s,transform .12s,box-shadow .15s}
.pd-act svg{width:15px;height:15px;fill:currentColor}
.pd-act:hover{border-color:rgba(var(--gold-rgb),.5);color:var(--gold)}
.pd-act:active{transform:scale(.96)}
.pd-act.primary{background:var(--gold);color:var(--on-accent);border-color:var(--gold);box-shadow:0 6px 18px rgba(var(--gold-rgb),.3)}
.pd-act.primary svg{fill:var(--on-accent)}
.pd-act.primary:hover{filter:brightness(1.08);color:var(--on-accent)}
.pd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:26px}
.pd-tile{position:relative;display:flex;align-items:center;gap:14px;padding:15px 16px;background:linear-gradient(145deg,var(--tile-a),var(--tile-b));border:1px solid var(--tile-bd);border-radius:16px;text-align:left;box-shadow:0 4px 16px rgba(16,67,201,.07);transition:transform .15s,border-color .15s,box-shadow .15s;overflow:hidden}
/* soft accent glow in the corner of each card */
.pd-tile::after{content:"";position:absolute;top:-40%;right:-15%;width:130px;height:130px;border-radius:50%;background:var(--tile-glow);filter:blur(26px);opacity:.55;pointer-events:none;transition:opacity .2s}
.pd-tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,67,201,.16)}
.pd-tile:hover::after{opacity:.9}
.pd-tile:active{transform:scale(.985)}
/* ---- tile gradient tones (light mode defaults) ---- */
.pd-tile{--tile-a:#ffffff;--tile-b:#eef2fb;--tile-bd:#e3e8f1;--tile-glow:rgba(16,67,201,.18)}
.pd-tile.t-gold{--tile-b:#eaf0ff;--tile-glow:rgba(16,67,201,.22)}
.pd-tile.t-green{--tile-b:#e7f6ee;--tile-bd:#d6ebdf;--tile-glow:rgba(22,163,74,.22)}
.pd-tile.t-blue{--tile-b:#e9f1ff;--tile-bd:#d8e6fb;--tile-glow:rgba(59,130,246,.24)}
.pd-tile.t-pink{--tile-b:#fdeaf0;--tile-bd:#f6d9e2;--tile-glow:rgba(240,52,92,.2)}
.pd-tile.t-slate{--tile-b:#eef1f6;--tile-bd:#e1e6ee;--tile-glow:rgba(120,135,160,.18)}
/* ---- tile gradient tones (dark mode) ---- */
html[data-theme="dark"] .pd-tile{--tile-a:#18223a;--tile-b:#0c1322;--tile-bd:rgba(255,255,255,.08);--tile-glow:rgba(80,130,255,.28)}
html[data-theme="dark"] .pd-tile.t-gold{--tile-a:#1a2747;--tile-b:#0b1120;--tile-glow:rgba(70,120,255,.34)}
html[data-theme="dark"] .pd-tile.t-green{--tile-a:#10271d;--tile-b:#0a1320;--tile-bd:rgba(22,163,74,.22);--tile-glow:rgba(22,200,120,.3)}
html[data-theme="dark"] .pd-tile.t-blue{--tile-a:#122544;--tile-b:#0a1120;--tile-bd:rgba(59,130,246,.24);--tile-glow:rgba(59,130,246,.36)}
html[data-theme="dark"] .pd-tile.t-pink{--tile-a:#2a1622;--tile-b:#120a12;--tile-bd:rgba(240,52,92,.22);--tile-glow:rgba(240,52,92,.32)}
html[data-theme="dark"] .pd-tile.t-slate{--tile-a:#1a2030;--tile-b:#0c0f18;--tile-bd:rgba(255,255,255,.08);--tile-glow:rgba(150,165,190,.22)}
.pd-tile>*{position:relative;z-index:1}
.pd-tile:hover .pd-tile-ch{opacity:1;transform:translateX(3px)}
.pd-tile-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd-tile-ic svg{width:21px;height:21px}
.pd-tile-ic.gold{background:rgba(var(--gold-rgb),.14)}.pd-tile-ic.gold svg{fill:var(--gold);stroke:var(--gold)}
.pd-tile-ic.pink{background:rgba(255,107,138,.14)}.pd-tile-ic.pink svg{fill:#ff6b8a}
.pd-tile-ic.blue{background:rgba(96,165,250,.14)}.pd-tile-ic.blue svg{fill:none;stroke:#3b82f6}
.pd-tile-ic.green{background:rgba(22,163,74,.14)}.pd-tile-ic.green svg{fill:#16a34a;stroke:#16a34a}
html[data-theme="dark"] .pd-tile-ic.blue svg{stroke:#7fb4ff}
.pd-tile-t{flex:1;min-width:0}
.pd-tile-t b{display:block;color:var(--ink);font-size:15px;font-weight:700;margin-bottom:1px}
.pd-tile-t i{font-size:12.5px;color:var(--ink-3);font-style:normal}
.pd-tile-ch{color:var(--ink-3);opacity:.55;display:flex;transition:opacity .15s,transform .15s}
.pd-tile-ch svg{width:16px;height:16px}
.pd-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.pd-tab{display:flex;align-items:center;gap:7px;padding:11px 16px;color:var(--ink-3);font-weight:800;font-size:14px;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.pd-tab svg{width:17px;height:17px;fill:currentColor}
.pd-tab span{color:var(--ink-3);font-weight:600;opacity:.8}
.pd-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.pd-tab.active svg{fill:var(--gold)}
.pd-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.pd-sec-head h2{font-size:18px;font-weight:900;color:var(--ink)}
.pd-sec-head h2 span{color:var(--ink-3);font-weight:400}
.pd-upload{padding:9px 18px;border-radius:999px;background:var(--gold);color:var(--on-accent);font-weight:800;font-size:13.5px;box-shadow:0 6px 18px rgba(var(--gold-rgb),.3)}
.pd-upload:hover{filter:brightness(1.08)}
.pd-reels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.pd-reel{cursor:pointer;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.pd-reel:hover{transform:translateY(-3px);border-color:rgba(var(--gold-rgb),.4)}
.pd-reel-thumb{position:relative;aspect-ratio:9/16;background:var(--surface-2);overflow:hidden}
.pd-reel-thumb img{width:100%;height:100%;object-fit:cover}
.pd-reel-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pd-reel-noimg svg{width:40px;height:40px;fill:var(--ink-3);opacity:.5}
.pd-live{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:7px;background:rgba(var(--gold-rgb),.92);color:var(--on-accent);font-size:10.5px;font-weight:800;letter-spacing:.03em}
.pd-live.off{background:rgba(255,77,77,.8);color:#fff}
.pd-reel-ep{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:7px;background:rgba(0,0,0,.6);color:#e6f0ff;font-size:10.5px;font-weight:800}
.pd-reel-info{padding:10px 12px}
.pd-reel-title{font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}
.pd-reel-title.pd-dim{color:var(--ink-3);font-weight:400;font-style:italic}
.pd-reel-stats{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-3)}
.pd-reel-stats .ago{margin-left:auto;opacity:.7}
.pd-empty{padding:48px 24px;text-align:center;color:var(--ink-3)}
.pd-empty .big{font-size:42px;margin-bottom:10px}
.pd-empty p{margin-bottom:14px}
@media (max-width:560px){
  .pd-hero-top{padding:26px 18px 18px}
  .pd-actions{padding:14px 18px 18px}
  .pd-reels-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  /* tiles: 2 columns on mobile, horizontal list-item layout (same as desktop) */
  .pd-tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .pd-tile{padding:13px;gap:10px}
  .pd-tile-ic{width:40px;height:40px;border-radius:12px}
  .pd-tile-ic svg{width:19px;height:19px}
  .pd-tile-t b{font-size:13.5px}
  .pd-tile-t i{font-size:11px}
  .pd-tile-ch{align-self:center}
  .pd-tile-ch svg{width:15px;height:15px}
}

/* ---------- Marketplace v2 (psar concept) ---------- */
.mk2-wrap{max-width:1280px;margin:0 auto;padding:22px 16px 80px}
.mk2-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.mk2-top h1{font-size:26px;font-weight:900;flex:1;min-width:140px}
.mk2-top .market-search{flex:0 1 320px}
.mk2-top .btn svg{width:16px;height:16px;fill:currentColor}
.section{margin-bottom:30px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.section-title{font-size:18px;font-weight:900;color:var(--ink)}
.section-link{font-size:13.5px;color:var(--blue);font-weight:700}
.section-link:hover{filter:brightness(1.1)}
.cat-carousel{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.cat-carousel::-webkit-scrollbar{display:none}
.cat-card{flex:0 0 150px;border-radius:18px;overflow:hidden;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.18);cursor:pointer;user-select:none;text-align:center;transition:transform .15s,box-shadow .15s}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.cat-card.cat-active{outline:3px solid #fff;outline-offset:-3px}
.cat-top{padding:16px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:9px}
.cat-ic{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.cat-name{font-weight:800;font-size:12px;letter-spacing:.05em;line-height:1.3}
.cat-foot{background:rgba(0,0,0,.16);padding:7px 10px;font-size:11.5px;opacity:.92}
.listings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.listing-card-wrap{position:relative}
.listing-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.listing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(var(--gold-rgb),.5)}
.listing-card-image{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--surface-2);padding:8px}
.listing-card-image-placeholder{width:100%;aspect-ratio:4/3;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:42px}
.listing-card-badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:#fff8e1;color:#ef4444;border:1px solid rgba(239,68,68,.25);z-index:2}
.listing-card-body{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column}
.listing-card-price{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:3px}
.listing-card-title{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.listing-card-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-3)}
.listing-card-location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listing-card-watchlist{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:rgba(10,13,18,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;z-index:2;transition:transform .15s}
.listing-card-watchlist:hover{transform:scale(1.12)}
@media (max-width:560px){.listings-grid{grid-template-columns:repeat(2,1fr);gap:10px}.cat-card{flex-basis:130px}}

/* ---------- Listing detail (psar concept) ---------- */
.ld-wrap{max-width:1180px;margin:0 auto;padding:18px 16px 80px}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);margin-bottom:16px;flex-wrap:wrap}
.breadcrumb a{color:var(--blue);font-weight:600}
.breadcrumb .bc-sep{color:var(--ink-3);opacity:.6}
.breadcrumb .bc-cur{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.ld-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.ld-main{min-width:0}
.card-pad{padding:18px 20px}
.ld-img{display:flex;align-items:center;justify-content:center;background:var(--surface-2);padding:10px;margin-bottom:16px;min-height:280px;overflow:hidden}
.ld-img img{max-width:100%;max-height:440px;object-fit:contain;border-radius:8px}
.ld-img-ph{font-size:72px}
.ld-headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.ld-headrow .ld-head{flex:1;min-width:0;margin-bottom:0}
.ld-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px}
.ld-qr-box{width:168px;height:168px;background:#fff;border-radius:12px;padding:9px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.ld-qr-box img,.ld-qr-box canvas,.ld-qr-box table{width:100%!important;height:100%!important;border-radius:4px}
.ld-qr span{font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
@media (max-width:560px){.ld-headrow{gap:12px}.ld-headrow .ld-head h1{font-size:20px}.ld-qr-box{width:112px;height:112px;padding:6px}.ld-qr span{font-size:10px}}
.ld-head{margin-bottom:16px}
.ld-head h1{font-size:24px;font-weight:900;margin-bottom:10px;line-height:1.25}
.ld-price-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ld-price{font-size:24px;font-weight:900;color:var(--blue)}
.badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--line)}
.badge-gray{background:var(--surface-2);color:var(--ink-3)}
.badge-orange{background:#fff8e1;color:#ef4444;border-color:rgba(239,68,68,.25)}
.badge-verified{background:rgba(96,165,250,.14);color:#2f7fd6;border-color:rgba(96,165,250,.4)}
html[data-theme="dark"] .badge-verified{color:#7fb4ff}
html[data-theme="dark"] .badge-orange{background:rgba(239,68,68,.14)}
.ld-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.ld-desc{margin-bottom:16px}
.ld-desc h3,.ld-contact h3,.ld-cs-h{font-size:15px;font-weight:800;margin-bottom:8px}
.ld-desc p{font-size:14.5px;line-height:1.7;white-space:pre-wrap;color:var(--ink-2)}
.ld-contact{margin-bottom:16px}
.ld-contact h3{margin-bottom:0}
.ld-sep{height:1px;background:var(--line);margin:12px 0 14px}
.ld-contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ld-mini{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:12px}
.ld-mini img{width:52px;height:44px;object-fit:cover;border-radius:6px;flex-shrink:0}
.ld-mini b{font-size:13.5px;display:block;line-height:1.3}
.ld-mini-price{font-size:13px;color:var(--blue);font-weight:700}
.ld-contact-inner label{display:block;font-size:13px;font-weight:700;margin:0 0 4px}
.ld-contact-inner label i{color:var(--heart);font-style:normal}
.ld-input{width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;color:var(--ink);font-family:var(--font);font-size:14px;outline:none;margin-bottom:10px;transition:border-color .15s}
.ld-input:focus{border-color:var(--blue)}
.ld-input-err{border-color:#E0245E!important;background:rgba(224,36,94,.06)}
.ld-textarea{min-height:150px;resize:vertical;margin-bottom:0}
.ld-msg-col{display:flex;flex-direction:column;gap:10px}
.ld-full{width:100%}
.ld-hint{text-align:center;font-size:13px;color:var(--ink-3);margin-top:2px}
.ld-hint a{color:var(--blue);font-weight:700}
.ld-disclaimer{font-size:12px;color:var(--ink-3);line-height:1.55;margin-top:12px}
/* sidebar */
.ld-sidebar{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:14px}
.ld-buy{display:flex;flex-direction:column;gap:10px}
.ld-qty{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-size:13.5px}
.qty-step{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.qty-step button{width:34px;height:34px;font-size:18px;font-weight:700;color:var(--ink);background:var(--surface-2)}
.qty-step button:hover{background:var(--line)}
.qty-step input{width:44px;height:34px;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-family:var(--font)}
.ld-seller{overflow:hidden}
.ld-seller-cover{height:72px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));background-size:cover;background-position:center}
.ld-seller-body{padding:0 16px 16px;margin-top:-26px}
.ld-seller-av{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid var(--surface);background:var(--surface-2);display:block;margin-bottom:8px}
.ld-seller-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ld-seller-name a{font-weight:800;font-size:15px;color:var(--ink)}
.ld-seller-count{font-size:13px;margin-bottom:12px}
.ld-related{margin-top:30px}
@media (max-width:860px){.ld-grid{grid-template-columns:1fr}.ld-sidebar{position:static}}
@media (max-width:560px){.ld-contact-inner{grid-template-columns:1fr}}

/* ---------- Marketplace (legacy detail page) ---------- */
.market-wrap{max-width:1180px;margin:0 auto;padding:24px 16px 80px}
.market-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.market-head h1{font-size:26px;font-weight:900;flex:1}
.market-search{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:999px;padding:10px 16px;box-shadow:var(--shadow);min-width:240px}
.market-search svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-3)}
.market-search input{border:none;outline:none;background:none;flex:1;min-width:0;color:var(--ink)}
.market-cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none}
.market-cats::-webkit-scrollbar{display:none}
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:16px}
.mk-card{cursor:pointer;transition:transform .18s,box-shadow .18s}
.mk-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.mk-img{aspect-ratio:4/3;overflow:hidden;background:var(--blue-soft)}
.mk-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.mk-card:hover .mk-img img{transform:scale(1.05)}
.mk-body{padding:11px 13px 13px}
.mk-price{font-weight:900;font-size:17px}
.mk-title{font-size:14px;color:var(--ink-2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-loc{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.mk-detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:760px){.mk-detail{grid-template-columns:1fr}}
.mk-detail-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.mk-detail-info h2{font-size:24px;font-weight:900}
.mk-detail-info .price{font-size:28px;font-weight:900;color:var(--blue);margin:6px 0 14px}
.seller-row{display:flex;align-items:center;gap:10px;padding:12px;background:var(--canvas);border-radius:var(--r-sm);margin-top:16px}

/* ---------- Profile ---------- */
.profile-cover{height:280px;border-radius:0 0 var(--r) var(--r);overflow:hidden;background:linear-gradient(120deg,var(--blue-dark),var(--blue))}
.profile-cover img{width:100%;height:100%;object-fit:cover}
.profile-bar{max-width:1000px;margin:-48px auto 0;padding:0 24px;display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.profile-bar .pav{width:140px;height:140px;border-radius:50%;border:5px solid var(--surface);object-fit:cover;background:#fff;box-shadow:var(--shadow)}
.profile-bar .pinfo{flex:1;padding-bottom:14px;min-width:200px}
.profile-bar h1{font-size:28px;font-weight:900}
.profile-body{max-width:680px;margin:24px auto 0;padding:0 16px 80px}

/* ---------- Right rail ---------- */
.sug{display:flex;align-items:center;gap:10px;padding:9px 0}
.sug .si{flex:1;min-width:0}
.sug b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-card{padding:16px}
.side-card h4{font-size:16px;color:var(--ink-2);margin-bottom:6px}

/* ---------- Auth ---------- */
.auth-stage{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;position:relative;overflow:hidden;background:radial-gradient(125% 125% at 25% 12%,#4a38bd 0%,#3a2da3 36%,#2d2585 70%,#241f6e 100%)}
.auth-stage>.auth-hero,.auth-stage>.auth-panel{position:relative;z-index:3}
.auth-hero{display:flex;flex-direction:column;justify-content:center;padding:8vw;color:#fff}
.auth-hero .logo{font-size:54px;font-weight:900;letter-spacing:-2px}
.auth-hero .logo em{font-style:normal;color:#FF8FAB}
.auth-hero p{font-size:21px;max-width:420px;opacity:.92;margin-top:14px;font-weight:300}
.auth-hero .feat{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.feat-card{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);padding:12px 17px;border-radius:14px;font-size:14px;font-weight:800;color:#fff;transition:transform .12s,background .15s,border-color .15s}
.feat-card .feat-ic{font-size:18px;line-height:1}
.feat-card:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.feat-card:active{transform:scale(.97)}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);padding:34px;width:100%;max-width:410px}
.auth-card h2{font-size:24px;font-weight:900;margin-bottom:4px}
.auth-card .sub{color:var(--ink-3);margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;outline:none;background:var(--surface);transition:border .15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue)}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--ink-3);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-social{display:flex;flex-direction:column;align-items:center;gap:10px}
.auth-social #google-signin{min-height:40px;color-scheme:light}
.fb-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:300px;max-width:100%;padding:11px 16px;border-radius:999px;background:#1877F2;color:#fff;font-weight:700;font-size:14.5px;border:none;cursor:pointer;transition:filter .15s,transform .1s}
.fb-btn:hover{filter:brightness(1.06)}
.fb-btn:active{transform:scale(.98)}
.fb-btn svg{flex:0 0 18px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:300px;max-width:100%;padding:11px 16px;border-radius:999px;background:#fff;color:#3c4043;font-weight:700;font-size:14.5px;border:1px solid #dadce0;cursor:pointer;transition:filter .15s,transform .1s}
.gbtn:hover{background:#f7f8f9}
.gbtn:active{transform:scale(.98)}
.gbtn svg{flex:0 0 18px}
.apl-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:300px;max-width:100%;padding:11px 16px;border-radius:999px;background:#000;color:#fff;font-weight:600;font-size:14.5px;border:none;cursor:pointer;transition:filter .15s,transform .1s}
.apl-btn:hover{filter:brightness(1.25)}
.apl-btn:active{transform:scale(.98)}
.apl-btn svg{flex:0 0 17px;margin-top:-2px}
[data-theme="light"] .apl-btn{background:#000;color:#fff}
html[data-theme=dark] .gbtn{background:#1a73e8;color:#fff;border-color:transparent}
html[data-theme=dark] .gbtn:hover{filter:brightness(1.06)}
.auth-switch{text-align:center;margin-top:16px;color:var(--ink-3)}
.auth-switch button{color:var(--blue);font-weight:700}
.auth-forgot{text-align:right;margin:-6px 0 12px}
.auth-forgot button{color:var(--blue);font-weight:700;font-size:13px}
.demo-hint{margin-top:14px;text-align:center;font-size:13px;background:var(--blue-soft);color:var(--blue);padding:9px;border-radius:var(--r-sm);font-weight:700}
/* mobile auth: single column, compact hero (logo + feature cards), tagline hidden */
@media (max-width:860px){
  .auth-stage{grid-template-columns:1fr}
  .auth-hero{display:flex;flex-direction:column;justify-content:flex-start;padding:26px 18px 4px}
  .auth-hero .logo{font-size:36px;text-align:center}
  .auth-hero p{display:none}
  .auth-hero .feat{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .feat-card{justify-content:center;padding:16px 10px;font-size:14px}
  .auth-panel{padding:18px 18px 30px}
}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(11,27,51,.55);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;animation:rise .25s}
.modal-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}
.modal-head h3{flex:1;text-align:center;font-size:19px;font-weight:900}
.modal-body{padding:20px}
.upload-zone{border:2px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--ink-3);cursor:pointer;transition:.15s;margin-bottom:14px}
.upload-zone:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.upload-preview{max-height:300px;border-radius:var(--r);margin:0 auto 14px}

/* ---------- Toast & misc ---------- */
#toast-root{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--blue);color:var(--on-accent);padding:11px 22px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow-lg);animation:rise .25s}
.toast.err{background:var(--heart);color:#fff}
.spinner{width:34px;height:34px;border:3.5px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
.empty{text-align:center;padding:50px 20px;color:var(--ink-3)}
.empty .big{font-size:44px;margin-bottom:8px}

/* ---------- Mobile bottom nav ---------- */
.mob-nav{display:none;position:fixed;inset:auto 0 0 0;background:var(--surface);border-top:1px solid var(--line);z-index:100;padding-bottom:env(safe-area-inset-bottom)}
.mob-nav .row{display:flex}
.mob-nav a{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 0 6px;color:var(--ink-3);font-size:10.5px;font-weight:700;gap:2px}
.mob-nav a.active{color:var(--blue)}
.mob-nav svg{width:24px;height:24px}
@media (max-width:680px){
  .mob-nav{display:block}
  .nav-tabs,.nav-search{display:none}
  .shell{padding-bottom:120px}
  .nav{padding:calc(var(--safe-top) + 10px) 14px 0;gap:10px}
  .nav-logo{margin-right:auto}
  /* full-width feed cards (edge-to-edge media) */
  .shell{padding-left:0;padding-right:0}
  main>.card,#feed .card{border-radius:0;box-shadow:none}
  .post{margin-bottom:8px}
}
@media (max-width:430px){
  .nav-word{display:none}
  .nav-mark{width:38px;height:38px;font-size:23px;border-radius:12px}
}

/* ---------- Admin panel ---------- */
.admin-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;max-width:1280px;margin:0 auto;padding:22px 16px 90px;align-items:start}
.admin-side{position:sticky;top:calc(var(--nav-h) + 20px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:var(--shadow)}
.admin-side-title{display:flex;align-items:center;gap:9px;font-weight:900;font-size:15px;color:var(--blue);padding:6px 10px 12px}
.admin-side-title svg{width:20px;height:20px}
.admin-side nav{display:flex;flex-direction:column;gap:2px}
.admin-link2{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:700;transition:background .15s,color .15s}
.admin-link2 svg{width:20px;height:20px;flex-shrink:0}
.admin-link2:hover{background:var(--canvas)}
.admin-link2.active{background:var(--blue-soft);color:var(--blue)}
.admin-back{margin-top:8px;color:var(--ink-3)}
/* sidebar groups + Settings submenu */
.admin-grp{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:14px 12px 6px;border-top:1px solid var(--line);margin-top:8px}
.admin-grp:first-of-type{border-top:none;margin-top:0;padding-top:6px}
.admin-sub{border-radius:var(--r-sm)}
.admin-sub-sum{list-style:none;cursor:pointer}
.admin-sub-sum::-webkit-details-marker{display:none}
.admin-sub-arr{margin-left:auto;transition:transform .2s}
.admin-sub-arr svg{width:15px;height:15px}
.admin-sub[open] .admin-sub-arr{transform:rotate(90deg)}
.admin-sub-items{display:flex;flex-direction:column;gap:1px;padding:3px 0 3px 14px;margin-left:9px;border-left:1.5px solid var(--line)}
.admin-sublink{padding:7px 12px;border-radius:8px;color:var(--ink-3);font-size:13px;font-weight:600;transition:background .15s,color .15s}
.admin-sublink:hover{background:var(--canvas);color:var(--ink-2)}
.admin-sublink.active{background:var(--blue-soft);color:var(--blue);font-weight:700}
.admin-main{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
@media (max-width:980px){.admin-main{padding:16px}}
.admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.admin-head h1{font-size:26px;font-weight:900;display:flex;align-items:center;gap:10px}
.admin-head h1 svg{width:24px;height:24px}
/* settings page */
.set-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.set-tab{display:flex;align-items:center;gap:7px;padding:11px 16px;color:var(--ink-3);font-weight:700;font-size:14px;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.set-tab svg{width:16px;height:16px}
.set-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.set-toggle-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px dashed var(--line);margin-bottom:18px}
.set-toggle-ic{width:42px;height:42px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.set-toggle-ic svg{width:22px;height:22px}
.set-toggle-t{flex:1;min-width:0}
.set-sep{height:1px;background:var(--line);margin:6px 0 22px}
.set-toggle-row.set-sub{padding-left:56px;border-bottom:none;margin-bottom:10px}
.set-link{color:var(--blue);font-weight:600}
.grp-badge{display:inline-block;padding:3px 10px;border-radius:999px;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.02em;vertical-align:middle}
.inv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.inv-row code{font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--blue)}
.set-note-warn{background:rgba(224,161,0,.12);color:#B07d00}
.up-watermark-box{width:90px;height:90px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.up-watermark-box svg{width:26px;height:26px}
.set-cols{display:flex;gap:28px;margin-bottom:8px}
.set-cols-label{flex:0 0 150px;font-size:13.5px;color:var(--ink-2);padding-top:2px}
.set-cols .set-checks{flex:1}
@media(max-width:680px){.set-cols{flex-direction:column;gap:10px}.set-cols-label{flex:none}}
.set-group-head{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;margin:6px 0 14px}
.set-group-head svg{width:18px;height:18px}
.set-btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn-danger{background:#E0455A;color:#fff;display:inline-flex;align-items:center;gap:7px}
.btn-danger:hover{filter:brightness(.94)}
.btn-danger svg{width:17px;height:17px}
.btn-warning{background:#E0A100;color:#fff;display:inline-flex;align-items:center;gap:7px}
.btn-success{background:#22A565;color:#fff;display:inline-flex;align-items:center;gap:7px}
.btn-warning:hover,.btn-success:hover{filter:brightness(.94)}
.btn-warning svg,.btn-success svg{width:17px;height:17px}
.set-btn-row .grow{flex:1}
.set-cards{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.set-card{display:flex;flex-direction:column;align-items:center;gap:10px;width:130px;padding:20px 12px;border:2px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.set-card:hover{border-color:var(--ink-3)}
.set-card.selected{border-color:var(--blue);background:var(--blue-soft)}
.set-card-ic{width:54px;height:54px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--ink-2);text-transform:lowercase}
.set-card span{font-size:14px;font-weight:700;color:var(--ink-3)}
.set-card.selected span{color:var(--ink)}
.set-radios{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.set-radio{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);cursor:pointer}
.set-radio input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.set-checks{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.set-inline{display:flex;gap:10px;align-items:center}
.set-inline .set-input{flex:1}
.set-inline .set-inline-unit{flex:0 0 130px}
.set-note{display:flex;align-items:center;gap:10px;background:var(--blue-soft);color:var(--blue);border-radius:var(--r-sm);padding:13px 16px;font-size:13.5px;font-weight:600;margin-bottom:20px}
.set-note svg{width:20px;height:20px;flex-shrink:0}
.priv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.priv-item{display:flex;flex-direction:column;gap:8px;min-width:0}
.priv-item>label{font-size:13.5px;color:var(--ink-2)}
.priv-ic{width:38px;height:38px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.priv-ic svg{width:19px;height:19px}
@media (max-width:760px){.priv-grid{grid-template-columns:1fr}}
.set-toggle-t b{font-size:16px;font-weight:800}
.set-switch{position:relative;width:52px;height:30px;flex-shrink:0}
.set-switch input{position:absolute;opacity:0;width:0;height:0}
.set-switch span{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background .2s;cursor:pointer}
.set-switch span::before{content:'';position:absolute;width:24px;height:24px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.set-switch input:checked + span{background:var(--green)}
.set-switch input:checked + span::before{transform:translateX(22px)}
.set-field{display:flex;flex-direction:column;margin-bottom:20px;max-width:760px}
.set-field>label{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:8px}
.set-field .ad-dim{margin-top:6px;font-size:13px}
.set-input{width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;color:var(--ink);font-family:var(--font);font-size:14px;outline:none;resize:vertical;transition:border-color .15s}
.set-input:focus{border-color:var(--blue)}
select.set-input{background:var(--surface);cursor:pointer}
#set-panel .btn-primary{margin-top:6px}
.set-placeholder{padding:56px 24px;text-align:center;color:var(--ink-3)}
/* Profile editor (Edit Profile → #/settings) — Sngine-style section cards */
.eps{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:22px;padding:81px 0 40px}
.eps-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px}
.eps-title{font-size:26px;font-weight:900;letter-spacing:-.5px;margin:0 0 20px;color:var(--ink)}
.eps-warn{display:flex;align-items:center;gap:10px;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.3);color:#e0941a;border-radius:12px;padding:14px 16px;font-weight:700;font-size:14px;margin-bottom:22px}
.eps-warn svg{width:20px;height:20px;flex-shrink:0;fill:currentColor}
.eps-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.eps-grid-3{grid-template-columns:1fr 1fr 1fr;margin-top:16px}
.eps-f{display:flex;flex-direction:column;margin-bottom:16px;min-width:0}
.eps-grid .eps-f,.eps-grid-3 .eps-f{margin-bottom:0}
.eps-f>label{font-size:13px;color:var(--muted);margin:0 0 5px 2px;font-weight:600}
.eps-in{width:100%;background:var(--surface-2);border:none;border-bottom:1.5px solid var(--line);border-radius:8px 8px 0 0;padding:12px 14px;color:var(--ink);font-family:var(--font);font-size:15.5px;outline:none;resize:vertical;transition:border-color .15s}
.eps-in:focus{border-bottom-color:var(--blue)}
select.eps-in{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
textarea.eps-in{min-height:90px;border-radius:8px;border:1.5px solid var(--line)}
.eps-hint{font-size:12.5px;color:var(--muted);margin:6px 0 0 2px}
.eps-actions{display:flex;justify-content:center;margin-top:24px}
.eps-save{min-width:200px;border-radius:999px;font-weight:800;padding:13px 28px}
@media(max-width:680px){.eps-grid,.eps-grid-3{grid-template-columns:1fr}.eps-card{padding:20px 18px}.eps-title{font-size:22px}}
.set-ph-ic{width:64px;height:64px;margin:0 auto 16px;border-radius:18px;background:var(--canvas);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.set-ph-ic svg{width:32px;height:32px}
.set-placeholder h3{color:var(--ink);font-size:18px;margin-bottom:6px}

/* ---------- Maintenance mode ---------- */
.maint{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#081B4D 0%,var(--blue) 70%,#3E7BFA 100%)}
.maint-card{max-width:460px;width:100%;text-align:center;color:#fff;padding:20px}
.maint-mark{width:74px;height:74px;margin:0 auto 24px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:900;color:#fff;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.maint-mark em{font-style:normal;color:var(--heart)}
.maint-card h1{font-size:30px;font-weight:900;margin-bottom:12px}
.maint-card p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.85);margin-bottom:26px;white-space:pre-wrap}
.maint-staff{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.maint-staff:hover{background:rgba(255,255,255,.26)}
.maint-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:150;background:var(--gold);color:var(--on-accent);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.3);max-width:92vw}
.maint-banner a{color:var(--on-accent);text-decoration:underline;font-weight:800;margin-left:4px}

/* ---------- Photo cropper ---------- */
.crop-stage{display:flex;justify-content:center}
.crop-frame{position:relative;width:300px;height:300px;max-width:76vw;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surface-2);cursor:grab;touch-action:none;box-shadow:0 0 0 2px var(--blue) inset}
.crop-frame:active{cursor:grabbing}
.crop-frame img{position:absolute;max-width:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.crop-zoom{display:flex;align-items:center;gap:12px;margin-top:18px;color:var(--ink-3)}
.crop-zoom span{font-size:18px;font-weight:800;width:14px;text-align:center}
.crop-zoom input[type=range]{flex:1;accent-color:var(--blue);cursor:pointer}
.crop-hint{text-align:center;font-size:12.5px;color:var(--ink-3);margin-top:10px}
.crop-actions{display:flex;gap:10px;margin-top:16px}
.crop-actions .btn{flex:1}
.admin-head p{margin-top:2px;font-size:14px}
.admin-head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:9px 15px;color:var(--ink-3);min-width:230px;transition:border-color .15s}
.admin-search:focus-within{border-color:var(--blue)}
.admin-search svg{width:18px;height:18px;flex-shrink:0}
.admin-search input{flex:1;border:none;background:none;outline:none;min-width:0;color:var(--ink)}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px}
.stat-card{display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
a.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);color:var(--blue);margin-bottom:10px}
.stat-ic svg{width:22px;height:22px}
.stat-v{font-size:28px;font-weight:900;line-height:1}
.stat-l{font-size:13px;color:var(--ink-3);font-weight:700;margin-top:4px}
.admin-mini{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.mini-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 22px;box-shadow:var(--shadow)}
.mini-card b{font-size:22px;font-weight:900;display:block}
.mini-card span{font-size:12.5px;color:var(--ink-3);font-weight:700}
.mus-ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center}
.mus-ic svg{width:19px;height:19px}
.mus-play svg{fill:currentColor}
/* ---- AuroraUI admin dashboard ---- */
.aurora-dash{position:relative}
.aurora-dash::before{content:"";position:absolute;inset:-30px -16px;z-index:0;pointer-events:none;border-radius:28px;
  background:
    radial-gradient(42% 52% at 12% -5%, rgba(99,102,241,.20), transparent 70%),
    radial-gradient(46% 56% at 88% 8%, rgba(236,72,153,.16), transparent 70%),
    radial-gradient(50% 60% at 35% 105%, rgba(34,211,238,.15), transparent 72%),
    radial-gradient(44% 54% at 95% 95%, rgba(34,197,94,.13), transparent 72%);
  filter:blur(26px)}
.aurora-dash .admin-stats,.aurora-dash .admin-mini{position:relative;z-index:1}
:root{--aurora-glass:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.5));--aurora-bd:rgba(255,255,255,.7)}
html[data-theme="dark"]{--aurora-glass:linear-gradient(150deg,rgba(34,44,72,.62),rgba(16,22,38,.5));--aurora-bd:rgba(255,255,255,.10)}
.aurora-card{position:relative;overflow:hidden;background:var(--aurora-glass);border:1px solid var(--aurora-bd);box-shadow:0 8px 30px rgba(16,67,201,.10),inset 0 1px 0 rgba(255,255,255,.25);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .16s,box-shadow .16s,border-color .16s}
.stat-card.aurora-card:hover,.mini-card.aurora-card:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(16,67,201,.20),inset 0 1px 0 rgba(255,255,255,.3)}
.aurora-card>*{position:relative;z-index:1}
.aurora-glow{position:absolute;z-index:0;width:150px;height:150px;border-radius:50%;top:-52px;right:-44px;filter:blur(34px);opacity:.5;pointer-events:none;transition:opacity .2s}
.aurora-card:hover .aurora-glow{opacity:.8}
.stat-v{position:relative;z-index:1}
/* aurora hues — glow blob + icon tile tint */
.a-blue .aurora-glow{background:#3b82f6}.a-blue .stat-ic{background:rgba(59,130,246,.18);color:#3b82f6}
.a-violet .aurora-glow{background:#8b5cf6}.a-violet .stat-ic{background:rgba(139,92,246,.18);color:#8b5cf6}
.a-pink .aurora-glow{background:#ec4899}.a-pink .stat-ic{background:rgba(236,72,153,.18);color:#ec4899}
.a-green .aurora-glow{background:#22c55e}.a-green .stat-ic{background:rgba(34,197,94,.18);color:#16a34a}
.a-amber .aurora-glow{background:#f59e0b}.a-amber .stat-ic{background:rgba(245,158,11,.18);color:#E0820F}
.a-cyan .aurora-glow{background:#22d3ee}.a-cyan .stat-ic{background:rgba(34,211,238,.18);color:#0891b2}
.a-rose .aurora-glow{background:#f43f5e}.a-rose .stat-ic{background:rgba(244,63,94,.18);color:#f43f5e}
.a-indigo .aurora-glow{background:#6366f1}.a-indigo .stat-ic{background:rgba(99,102,241,.18);color:#6366f1}
html[data-theme="dark"] .a-green .stat-ic{color:#22c55e}
html[data-theme="dark"] .a-amber .stat-ic{color:#f59e0b}
html[data-theme="dark"] .a-cyan .stat-ic{color:#22d3ee}
/* ---- Dashboard stat cards (dark "styledark" look): label + icon-circle, big colored value, gradient accent line ---- */
.stat-card.sc{position:relative;overflow:hidden;display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 16px 15px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s,box-shadow .15s}
html[data-theme="dark"] .stat-card.sc{background:#0f1117;border-color:rgba(255,255,255,.07);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.stat-card.sc:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.sc-line{position:absolute;top:0;left:0;right:0;height:2px}
.sc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:14px}
.sc-label{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);line-height:1.35;max-width:74%}
.sc-ic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-3)}
html[data-theme="dark"] .sc-ic{background:rgba(255,255,255,.06)}
.sc-ic svg{width:16px;height:16px}
.sc-val{font-size:28px;font-weight:900;line-height:1;margin-bottom:6px}
.sc-sub{font-size:12px;font-weight:600;color:var(--ink-3)}
.mini-card.sc{position:relative;overflow:hidden}
.mini-card.sc b{font-size:24px}
/* per-card hue: value colour + top accent line + icon tint */
.sc-blue .sc-val{color:#5b8cff}.sc-blue .sc-line{background:linear-gradient(90deg,#5b8cff,transparent 80%)}.sc-blue .sc-ic{color:#5b8cff}
.sc-violet .sc-val{color:#a78bfa}.sc-violet .sc-line{background:linear-gradient(90deg,#a78bfa,transparent 80%)}.sc-violet .sc-ic{color:#a78bfa}
.sc-pink .sc-val{color:#f472b6}.sc-pink .sc-line{background:linear-gradient(90deg,#f472b6,transparent 80%)}.sc-pink .sc-ic{color:#f472b6}
.sc-green .sc-val{color:#34d399}.sc-green .sc-line{background:linear-gradient(90deg,#34d399,transparent 80%)}.sc-green .sc-ic{color:#34d399}
.sc-amber .sc-val{color:#fbbf24}.sc-amber .sc-line{background:linear-gradient(90deg,#fbbf24,transparent 80%)}.sc-amber .sc-ic{color:#fbbf24}
.sc-cyan .sc-val{color:#22d3ee}.sc-cyan .sc-line{background:linear-gradient(90deg,#22d3ee,transparent 80%)}.sc-cyan .sc-ic{color:#22d3ee}
.sc-rose .sc-val{color:#fb7185}.sc-rose .sc-line{background:linear-gradient(90deg,#fb7185,transparent 80%)}.sc-rose .sc-ic{color:#fb7185}
.sc-indigo .sc-val{color:#818cf8}.sc-indigo .sc-line{background:linear-gradient(90deg,#818cf8,transparent 80%)}.sc-indigo .sc-ic{color:#818cf8}
.admin-table-wrap{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;box-shadow:var(--shadow)}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th{text-align:left;padding:12px 14px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
.admin-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover{background:var(--surface)}
.ad-user{display:flex;align-items:center;gap:10px}
.ad-user img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--blue-soft);flex-shrink:0}
.ad-user b{display:block;font-weight:700;white-space:nowrap}
.ad-user span{font-size:12.5px;color:var(--ink-3)}
.ad-dim{color:var(--ink-3);white-space:nowrap}
.ad-text{max-width:300px;min-width:160px;white-space:normal}
.ad-thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;background:var(--canvas)}
.ad-thumb-vid,.ad-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.ad-thumb-vid{background:var(--ink);color:#fff}
.ad-thumb-vid svg,.ad-thumb-empty svg{width:20px;height:20px}
.ad-thumb-story{width:38px;height:60px;border-radius:7px}
.ad-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--canvas);color:var(--ink-2)}
.ad-badge-admin{background:var(--blue-soft);color:var(--blue)}
.ad-actions{display:flex;gap:5px;justify-content:flex-end}
.ad-ib{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--canvas);color:var(--ink-2);transition:background .15s,color .15s}
.ad-ib:hover{background:var(--line);color:var(--ink)}
.ad-ib svg{width:17px;height:17px}
.ad-ib.on{background:var(--blue-soft);color:var(--blue)}
.ad-ib.danger:hover{background:rgba(240,52,92,.16);color:var(--heart)}
.ad-empty{padding:34px;text-align:center;color:var(--ink-3);font-weight:700}
.admin-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;flex-wrap:wrap;gap:10px}
.admin-pager{display:flex;align-items:center;gap:12px}
.admin-pager .btn{padding:8px 16px}
.ad-confirm-msg{font-size:15px;line-height:1.5;margin-bottom:18px}
.ad-confirm-btns{display:flex;gap:10px;justify-content:flex-end}
.btn-danger{background:var(--heart);color:#fff}
.btn-danger:hover{filter:brightness(1.08)}
.ad-check{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink-2);cursor:pointer}
.ad-check input{width:18px;height:18px}
@media (max-width:760px){
  .admin-wrap{grid-template-columns:1fr;gap:16px}
  .admin-side{position:static}
  .admin-side nav{flex-direction:row;flex-wrap:wrap}
  .admin-link2{padding:8px 12px}
  .admin-link2.admin-back{width:100%}
}

/* ---------- Messenger ---------- */
.msg-link{position:relative}
.msg-link.active{background:var(--blue-soft);color:var(--blue)}
.msg-badge{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#FF3B5C;color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;border:2px solid var(--surface);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.msgr{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0;max-width:1180px;margin:0 auto;height:calc(100vh - var(--nav-h));margin-top:var(--nav-h);background:var(--surface);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.msgr-list{display:flex;flex-direction:column;border-right:1px solid var(--line);min-height:0}
.msgr-list-head{padding:16px 18px 10px}
.msgr-list-head h2{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:900;color:var(--ink)}
.msgr-list-head h2 svg{width:24px;height:24px;color:var(--blue)}
.msgr-search{display:flex;align-items:center;gap:8px;margin:0 14px 8px;padding:9px 14px;background:var(--canvas);border:1.5px solid transparent;border-radius:999px;color:var(--ink-3);transition:border-color .15s,background .15s}
.msgr-search:focus-within{background:var(--surface);border-color:var(--blue)}
.msgr-search svg{width:17px;height:17px;flex-shrink:0}
.msgr-search input{flex:1;border:none;background:none;outline:none;min-width:0;color:var(--ink);font-size:14px}
.msgr-convs{flex:1;overflow-y:auto;padding:4px 8px 16px}
.conv{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:12px;transition:background .12s}
.conv:hover{background:var(--canvas)}
.conv.active{background:var(--blue-soft)}
.conv-av{width:50px;height:50px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--blue-soft)}
.conv-main{flex:1;min-width:0}
.conv-top{display:flex;align-items:baseline;gap:8px}
.conv-top b{flex:1;font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-time{font-size:11.5px;color:var(--ink-3);flex-shrink:0}
.conv-prev{display:flex;align-items:center;gap:8px;margin-top:2px}
.conv-prev span{flex:1;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv.unread .conv-prev span{color:var(--ink-2);font-weight:600}
.conv.unread .conv-top b{font-weight:800}
.conv-dot{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:var(--on-accent);font-size:11px;font-weight:800;line-height:18px;text-align:center}
.msgr-noconv{padding:30px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.6}
.msgr-thread{display:flex;flex-direction:column;min-height:0;background:var(--canvas)}
.msgr-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink-3);padding:30px}
.msgr-empty-ic{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);margin-bottom:14px}
.msgr-empty-ic svg{width:36px;height:36px;color:var(--blue)}
.msgr-empty h3{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:5px}
.msgr-empty p{font-size:14px;max-width:300px}
.msgr-th-head{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);min-height:62px}
.msgr-back{display:none;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0}
.msgr-back:hover{background:var(--canvas)}
.msgr-back svg{width:22px;height:22px}
.msgr-th-user{display:flex;align-items:center;gap:11px;min-width:0}
.msgr-th-user img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--blue-soft)}
.msgr-th-user b{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:800;color:var(--ink)}
.msgr-th-user i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3)}
.msgr-verified{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--blue);color:var(--on-accent);font-size:10px;font-weight:900}
.msgr-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:18px 16px}
.msgr-th-empty{margin:auto;text-align:center;color:var(--ink-3);font-size:14px}
.bubble-row{display:flex;align-items:flex-end;gap:8px;max-width:76%}
.bubble-row.them{align-self:flex-start}
.bubble-row.me{align-self:flex-end;flex-direction:row-reverse}
.bubble-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--blue-soft)}
.bubble{position:relative;padding:9px 13px 7px;border-radius:16px;font-size:14.5px;line-height:1.4}
.bubble span{white-space:pre-wrap;word-break:break-word}
.bubble time{display:block;margin-top:2px;font-size:10.5px;opacity:.6;text-align:right}
.bubble-row.them .bubble{background:var(--surface);color:var(--ink);border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(11,27,51,.06)}
.bubble-row.me .bubble{background:var(--blue);color:var(--on-accent);border-bottom-right-radius:5px}
.bubble-stack{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
.bubble-row.me .bubble-stack{align-items:flex-end}
.bubble-row.them .bubble-stack{align-items:flex-start}
.bubble-meta-time{padding:2px 8px;background:none!important;box-shadow:none!important}
.bubble-meta-time time{opacity:.55;color:var(--ink-3)}
.mp-card{display:flex;gap:11px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;width:252px;max-width:100%;box-shadow:0 1px 3px rgba(11,27,51,.08);transition:border-color .15s}
.mp-card:hover{border-color:var(--blue)}
.mp-card img,.mp-card-ph{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--surface-2)}
.mp-card-ph{display:flex;align-items:center;justify-content:center;font-size:26px}
.mp-card-b{min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-card-b b{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:175px}
.mp-card-price{font-size:13.5px;font-weight:800;color:var(--blue)}
.mp-card-link{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:1px}
.mp-card-link svg{width:12px;height:12px}
.msgr-compose{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--surface);border-top:1px solid var(--line)}
.msgr-compose input{flex:1;border:1.5px solid var(--line);background:var(--canvas);border-radius:999px;padding:11px 17px;font-size:14.5px;color:var(--ink);outline:none;transition:border-color .15s}
.msgr-compose input[type="text"],.msgr-compose>input:not([type]){flex:1;border:1.5px solid var(--line);background:var(--canvas);border-radius:999px;padding:11px 17px;font-size:14.5px;color:var(--ink);outline:none;transition:border-color .15s}
.msgr-compose input:focus{border-color:var(--blue);background:var(--surface)}
.msgr-send{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--blue);color:var(--on-accent);display:flex;align-items:center;justify-content:center;transition:filter .15s}
.msgr-send:hover{filter:brightness(1.08)}
.msgr-send svg{width:21px;height:21px}
/* Chat attachment buttons */
.msgr-attach{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--canvas);color:var(--muted);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);transition:all .15s}
.msgr-attach:hover{color:var(--blue);border-color:var(--blue)}
.msgr-attach svg{width:20px;height:20px}
.msgr-mic.recording{background:#e53935;color:#fff;border-color:#e53935;animation:micpulse 1s ease-in-out infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,57,53,.5)}50%{box-shadow:0 0 0 7px rgba(229,57,53,0)}}
/* Chat attachment bubbles */
.msg-att{display:block;max-width:min(78vw,300px)}
.msg-att-img{border-radius:16px;overflow:hidden;line-height:0}
.msg-att-img img{width:100%;max-width:260px;max-height:340px;object-fit:cover;display:block;cursor:zoom-in}
.msg-att-voice{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px 12px}
.bubble-row.me .msg-att-voice{background:var(--blue);border-color:transparent}
.bubble-row.me .msg-att-voice .msg-att-vic svg,.bubble-row.me .msg-att-dur{color:var(--on-accent)}
.msg-att-voice audio{height:34px;max-width:200px}
.msg-att-vic svg{width:20px;height:20px;color:var(--blue)}
.msg-att-dur{font-size:12px;color:var(--muted);flex-shrink:0}
.msg-att-file{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 14px;text-decoration:none;min-width:180px}
.bubble-row.me .msg-att-file{background:var(--blue)}
.bubble-row.me .msg-att-file b,.bubble-row.me .msg-att-file i,.bubble-row.me .msg-att-fic svg{color:var(--on-accent)}
.msg-att-fic{width:38px;height:38px;border-radius:10px;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.msg-att-fic svg{width:20px;height:20px;color:var(--blue)}
.msg-att-fmeta{display:flex;flex-direction:column;min-width:0}
.msg-att-fmeta b{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.msg-att-fmeta i{font-size:11.5px;color:var(--muted);font-style:normal}
@media (max-width:760px){
  /* reserve the full bottom-nav footprint (56px + the iOS/Android home-indicator inset)
     so the message composer isn't hidden behind .mob-nav in the installed PWA */
  .msgr{grid-template-columns:1fr;height:calc(100dvh - var(--nav-h) - 56px - env(safe-area-inset-bottom));border:none}
  .msgr-list{border-right:none}
  .msgr .msgr-thread{display:none}
  .msgr.has-thread .msgr-list{display:none}
  .msgr.has-thread .msgr-thread{display:flex}
  .msgr-back{display:flex}
  .bubble-row{max-width:85%}
}

/* ---------- Cart · Checkout · Orders ---------- */
.shop-wrap{max-width:1080px;margin:0 auto;padding:22px 16px 90px}
.shop-h1{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:900;color:var(--ink);margin-bottom:18px}
.shop-h1 svg{width:26px;height:26px;color:var(--blue)}
.shop-count{font-size:14px;font-weight:600;color:var(--ink-3)}
.shop-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.shop-main{display:flex;flex-direction:column;gap:14px}
.shop-side{position:sticky;top:calc(var(--nav-h) + 20px)}
.sum-card h3,.co-card h3{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14px;color:var(--ink-2)}
.sum-row b{color:var(--ink);font-weight:700}
.sum-free{color:#22A565!important}
.sum-total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:17px}
.sum-total b{font-size:19px;font-weight:900;color:var(--blue)}
.shop-cta{width:100%;margin-top:12px;justify-content:center}
.sum-cod{margin-top:12px;text-align:center;font-size:12px;color:var(--ink-3)}
.shop-empty{text-align:center;padding:60px 20px;color:var(--ink-3)}
.shop-empty-ic{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);margin:0 auto 16px}
.shop-empty-ic svg{width:40px;height:40px;color:var(--blue)}
.shop-empty h2{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:6px}
.shop-empty p{margin-bottom:18px}
.shop-empty .btn{display:inline-flex;gap:7px}
/* cart item */
.ci{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.ci-img{width:84px;height:84px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--surface-2)}
.ci-img img{width:100%;height:100%;object-fit:cover}
.ci-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:30px}
.ci-body{flex:1;min-width:0}
.ci-title{display:block;font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-title:hover{color:var(--blue)}
.ci-seller{font-size:12.5px;color:var(--ink-3);margin:2px 0 6px}
.ci-price{font-size:14px;font-weight:700;color:var(--blue)}
.ci-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.ci-qty{display:flex}
.ci-remove{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);background:var(--canvas)}
.ci-remove:hover{background:#FFE3E9;color:#E0245E}
html[data-theme="dark"] .ci-remove:hover{background:rgba(224,36,94,.18)}
.ci-remove svg{width:17px;height:17px}
.ci-line{font-size:15px;font-weight:800;color:var(--ink)}
/* checkout */
.co-card{}
.co-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-field{display:flex;flex-direction:column;gap:5px}
.co-field.co-wide{grid-column:1/-1}
.co-field label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.co-field label i{color:#E0245E;font-style:normal}
.co-field input,.co-field textarea{border:1.5px solid var(--line);background:var(--canvas);border-radius:10px;padding:11px 13px;font-size:14px;color:var(--ink);outline:none;transition:border-color .15s,background .15s}
.co-field input:focus,.co-field textarea:focus{border-color:var(--blue);background:var(--surface)}
.co-field textarea{min-height:64px;resize:vertical}
.co-pay{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;margin-bottom:10px;transition:border-color .15s,background .15s}
.co-pay:last-child{margin-bottom:0}
.co-pay.selected{border-color:var(--blue);background:var(--blue-soft)}
.co-pay.disabled{opacity:.55;cursor:not-allowed}
.co-pay input{accent-color:var(--blue);width:18px;height:18px;flex-shrink:0}
.co-pay-ic{font-size:22px}
.co-pay div{flex:1}
.co-pay b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.co-pay i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.co-pay-check{width:22px;height:22px;border-radius:50%;background:var(--blue);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.co-items{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-height:240px;overflow-y:auto}
.co-li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.co-li-q{flex-shrink:0;color:var(--blue);font-weight:800}
.co-li-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.co-li b{color:var(--ink);font-weight:700}
/* order confirmation + history */
.ord-success{text-align:center;padding:24px 16px 30px}
.ord-check{width:64px;height:64px;border-radius:50%;background:#22A565;color:#fff;font-size:34px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 24px rgba(34,165,101,.35)}
.ord-success h1{font-size:26px;font-weight:900;color:var(--ink);margin-bottom:8px}
.ord-success p{color:var(--ink-2);max-width:460px;margin:0 auto;line-height:1.55}
.ord-meta{font-size:14px;color:var(--ink-2);line-height:1.6}
.ord-pay{margin-top:12px;display:flex;gap:8px}
.ords{display:flex;flex-direction:column;gap:12px}
.ord-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ord-row:hover{border-color:var(--blue)}
.ord-row-l{display:flex;flex-direction:column;gap:3px}
.ord-row-l b{font-size:15px;color:var(--ink)}
.ord-row-r{display:flex;align-items:center;gap:8px}
.ord-row-r b{font-size:16px;font-weight:800;color:var(--blue)}
@media (max-width:860px){
  .shop-grid{grid-template-columns:1fr}
  .shop-side{position:static;order:-1}
}
@media (max-width:560px){
  .co-form{grid-template-columns:1fr}
  .ci-img{width:68px;height:68px}
  .ord-row{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Profile avatars: rounded-square instead of circle (scales across sizes) */
.avatar,
.nav-avatar,
.story .s-av,
.reel-chip-user img,
.pyk-mavs img,
.reel-user a img,
.pd-avatar,
.ld-seller-av,
.profile-bar .pav,
.ad-user img,
.conv-av,
.msgr-th-user img,
.bubble-av{
  border-radius:25%;
}

/* ---------- Getting Started — 3-step onboarding wizard ---------- */
.gs-overlay{position:fixed;inset:0;z-index:4000;background:rgba(17,24,39,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
.gs-card{position:relative;background:linear-gradient(135deg,#0f2167 0%,#1043C9 48%,#6d28d9 100%);color:#fff;border-radius:20px;width:100%;max-width:560px;box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden;animation:gsPop .25s ease}
.gs-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.gs-card>.gs-head,.gs-card>.gs-steps,.gs-card>.gs-body{position:relative;z-index:1}
@keyframes gsPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.gs-head{padding:22px 24px 14px;text-align:center;border-bottom:1px solid rgba(255,255,255,.16)}
.gs-head h2{margin:0;font-size:21px;font-weight:900;color:#fff}
.gs-head p{margin:5px 0 0;color:rgba(255,255,255,.72);font-size:13.5px}
.gs-steps{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.16)}
.gs-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 6px;border:1.5px solid rgba(255,255,255,.28);border-radius:13px;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:rgba(255,255,255,.85);font-size:12px;font-weight:700;cursor:pointer;transition:.15s;text-align:center}
.gs-step:hover{border-color:#fff;background:rgba(255,255,255,.18)}
.gs-step.active{background:#fff;border-color:#fff;color:#1043C9}
.gs-step-ic{display:inline-flex}.gs-step-ic svg{width:20px;height:20px}
.gs-body{padding:24px;max-height:62vh;overflow-y:auto}
.gs-welcome{text-align:center;font-size:20px;font-weight:800;margin-bottom:2px;color:#fff}
.gs-welcome span{color:#9ec5ff}
.gs-sub{text-align:center;color:rgba(255,255,255,.72);font-size:13.5px;margin:2px 0 18px}
.gs-title{text-align:center;font-size:18px;font-weight:800;margin:0;color:#fff}
.gs-avatar-wrap{position:relative;width:140px;height:140px;margin:8px auto 8px}
.gs-avatar-wrap img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1)}
.gs-cam{position:absolute;right:4px;bottom:4px;width:42px;height:42px;border-radius:50%;border:3px solid #fff;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.gs-cam svg{width:20px;height:20px}
.gs-cam.busy{opacity:.6;pointer-events:none}
.gs-form{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.gs-sec-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.7);margin-top:6px}
.gs-input{width:100%}
.gs-card .set-input{background:rgba(255,255,255,.96);color:#11203a;border:1px solid rgba(255,255,255,.4)}
.gs-card .set-input::placeholder{color:#6b7280}
.gs-card .set-input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.gs-row{display:flex;gap:11px}
.gs-row .gs-half{flex:1;min-width:0}
.gs-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.gs-actions-split{justify-content:space-between}
.gs-actions .btn{min-width:120px;justify-content:center}
.gs-person{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.14)}
.gs-person:last-child{border-bottom:0}
.gs-person-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.gs-person-name b{font-size:14.5px;color:#fff}
.gs-person-name .muted{font-size:12.5px;color:rgba(255,255,255,.65)}
.gs-person .btn-soft{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
.gs-following{background:#fff!important;color:#1043C9!important;border-color:#fff!important}
@media(max-width:560px){.gs-step span:not(.gs-step-ic){display:none}.gs-row{flex-direction:column}.gs-actions-split{flex-direction:column-reverse}.gs-actions .btn{width:100%}}

/* Admin categories — two-column (Reels & Videos) */
.cat-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.cat-wrap{grid-template-columns:1fr}}
.cat-block h2{margin:0;font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px}
.cat-block h2 svg{width:20px;height:20px}
.cat-add{display:flex;gap:8px;margin-bottom:12px}
.cat-add .set-input{flex:1}
.cat-slug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:12px;color:var(--ink-3)}

/* ============================================================
   Animated cosmic background for auth (login) pages
   ============================================================ */
.auth-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.auth-bg>*{position:absolute}

/* ===== Radar-sweep auth background (from Uiverse.io by ommanav_2060) ===== */
.auth-stage .radar-pattern{
  inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background-color:#09090b;                                   /* deep zinc black */
  background-image:                                            /* base square grid */
    linear-gradient(rgba(139,92,246,.1) .1em,transparent .1em),
    linear-gradient(90deg,rgba(139,92,246,.1) .1em,transparent .1em);
  background-size:3em 3em;
}
.auth-stage .radar-pattern::before{                            /* concentric radar rings */
  content:"";position:absolute;top:50%;left:50%;width:150vw;height:150vh;
  transform:translate(-50%,-50%);
  background:repeating-radial-gradient(circle,transparent 0,transparent 2.9em,rgba(139,92,246,.2) 3em);
  z-index:1;
}
.auth-stage .radar-pattern::after{                             /* sweeping radar beam */
  content:"";position:absolute;top:50%;left:50%;width:40em;height:40em;margin:-20em 0 0 -20em;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 75%,rgba(139,92,246,.5) 100%);
  animation:radar-spin 4s linear infinite;z-index:2;
}
.auth-stage .radar-center{                                     /* glowing center dot */
  position:absolute;top:50%;left:50%;width:1em;height:1em;transform:translate(-50%,-50%);
  background-color:#a78bfa;border-radius:50%;z-index:3;
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes radar-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 .8em .2em rgba(139,92,246,.6)}
  50%{box-shadow:0 0 2em .5em rgba(139,92,246,1)}
}
@media (prefers-reduced-motion:reduce){
  .auth-stage .radar-pattern::after,.auth-stage .radar-center{animation:none}
}

/* flowing gradient ribbons */
.auth-bg .wave{border-radius:46% 54% 50% 50%/60% 50% 50% 40%;filter:blur(8px);opacity:.85;mix-blend-mode:screen}
.auth-bg .wave-tl{width:62vw;height:34vw;min-width:620px;min-height:320px;top:-16vw;left:-12vw;
  background:linear-gradient(118deg,#1d2a8e 0%,#2f6df6 44%,#27c6e6 66%,rgba(39,198,230,0) 74%);
  animation:auth-waveA 18s ease-in-out infinite}
.auth-bg .wave-br{width:74vw;height:40vw;min-width:760px;min-height:380px;right:-18vw;bottom:-18vw;
  background:linear-gradient(122deg,rgba(122,43,214,0) 26%,#7a2bd6 42%,#c23ad0 62%,#ff7ac0 82%);
  animation:auth-waveB 22s ease-in-out infinite}
@keyframes auth-waveA{0%,100%{transform:rotate(-8deg) translate(0,0)}50%{transform:rotate(-5deg) translate(2vw,1.4vw)}}
@keyframes auth-waveB{0%,100%{transform:rotate(-10deg) translate(0,0)}50%{transform:rotate(-13deg) translate(-2vw,-1.2vw)}}

/* glowing spheres with orbital rings */
.auth-bg .orb{border-radius:50%;animation:auth-float 9s ease-in-out infinite}
.auth-bg .orb::before,.auth-bg .orb::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(150,140,240,.28)}
.auth-bg .orb-orange{background:radial-gradient(circle at 36% 30%,#ffe0a0,#ff8a2a 46%,#f1551a 78%);box-shadow:0 0 42px 9px rgba(255,120,30,.5)}
.auth-bg .orb-blue{background:radial-gradient(circle at 36% 30%,#d4f1ff,#39a7ff 46%,#1d63ef 80%);box-shadow:0 0 40px 9px rgba(55,140,255,.5)}
.auth-bg .orb.o1{width:84px;height:84px;top:-26px;right:6vw;animation:auth-glow 5s ease-in-out infinite}
.auth-bg .orb.o1::before{width:168px;height:168px}.auth-bg .orb.o1::after{width:240px;height:240px;border-color:rgba(150,140,240,.16)}
.auth-bg .orb.o2{width:60px;height:60px;top:18%;left:-30px;animation:auth-glow 6.5s ease-in-out infinite}
.auth-bg .orb.o2::before{width:118px;height:118px}.auth-bg .orb.o2::after{width:172px;height:172px;border-color:rgba(150,140,240,.16)}
.auth-bg .orb.o3{width:70px;height:70px;bottom:-12px;left:31%;animation:auth-glow 5.6s ease-in-out infinite}
.auth-bg .orb.o3::before{width:140px;height:140px}.auth-bg .orb.o3::after{width:206px;height:206px;border-color:rgba(150,140,240,.16)}
.auth-bg .orb.b1{width:46px;height:46px;top:42%;left:17%;animation:auth-glow 7s ease-in-out infinite}
.auth-bg .orb.b1::before{width:96px;height:96px}.auth-bg .orb.b1::after{width:140px;height:140px;border-color:rgba(150,140,240,.16)}
.auth-bg .orb.b2{width:74px;height:74px;bottom:18%;right:11%;animation:auth-glow 5.2s ease-in-out infinite}
.auth-bg .orb.b2::before{width:150px;height:150px}.auth-bg .orb.b2::after{width:224px;height:224px;border-color:rgba(150,140,240,.16)}
@keyframes auth-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}
@keyframes auth-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* dot grids */
.auth-bg .agrid{width:90px;height:90px;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.7) 1.4px,transparent 1.6px);background-size:18px 18px;animation:auth-twinkle 4.5s ease-in-out infinite}
.auth-bg .agrid.g1{top:7%;left:50%}
.auth-bg .agrid.g2{top:40%;left:2%;background-image:radial-gradient(rgba(255,255,255,.7) 1.4px,transparent 1.6px),radial-gradient(rgba(255,180,70,.85) 1.4px,transparent 1.6px);background-position:0 0,18px 36px;animation-delay:1.2s}
.auth-bg .agrid.g3{bottom:5%;right:18%;animation-delay:2.1s}
@keyframes auth-twinkle{0%,100%{opacity:.25}50%{opacity:.6}}

/* small floating geometric shapes */
.auth-bg .sh{display:block;animation:auth-drift 8s ease-in-out infinite}
.auth-bg .sh.x{width:18px;height:18px}
.auth-bg .sh.x::before,.auth-bg .sh.x::after{content:'';position:absolute;left:50%;top:0;width:2px;height:100%;background:rgba(255,255,255,.6);transform:translateX(-50%) rotate(45deg)}
.auth-bg .sh.x::after{transform:translateX(-50%) rotate(-45deg)}
.auth-bg .sh.x.orange::before,.auth-bg .sh.x.orange::after{background:rgba(255,140,55,.85)}
.auth-bg .sh.x.sm{width:12px;height:12px;opacity:.7}
.auth-bg .sh.dia{width:20px;height:20px;border:2px solid rgba(255,255,255,.5);transform:rotate(45deg)}
.auth-bg .sh.dia.sm{width:13px;height:13px}
.auth-bg .sh.dia.fill{border:none;background:#ff9b2e;box-shadow:0 0 12px rgba(255,150,40,.6);transform:rotate(45deg)}
.auth-bg .sh.sq{width:12px;height:12px;background:rgba(255,255,255,.5)}
.auth-bg .sh.sq.orange{background:#ff9b2e;box-shadow:0 0 10px rgba(255,150,40,.5)}
.auth-bg .sh.dot{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85}
.auth-bg .sh.squiggle{width:64px;height:12px;opacity:.5;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12'%3E%3Cpath d='M0 7 Q8 1 16 7 T32 7 T48 7 T64 7' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E")}
.auth-bg .sh.squiggle.sm{width:44px}
@keyframes auth-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(8deg)}}
.auth-bg .sh.dia,.auth-bg .sh.dia.fill{animation:auth-drift-dia 8s ease-in-out infinite}
@keyframes auth-drift-dia{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-12px) rotate(57deg)}}

@media (max-width:860px){.auth-bg .wave-tl{opacity:.6}}
@media (prefers-reduced-motion:reduce){.auth-bg *{animation:none!important}}

/* Single post page (public / shareable #/post/:id) */
.sp-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.sp-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:18px;color:var(--ink)}
.sp-logo .nav-mark{width:32px;height:32px;font-size:18px}
.sp-actions{display:flex;gap:8px}
.sp-wrap{max-width:600px;margin:0 auto;padding:18px 14px 90px}
.sp-cta{text-align:center;padding:24px;margin-top:14px}
.sp-cta b{font-size:18px;display:block}
.sp-cta p{margin:4px 0 0}
.sp-cta .btn{margin-top:14px}

/* Guest (Newsfeed Public) — composer placeholder + nav sign-up */
.composer-guest{text-align:center;padding:22px}
.composer-guest b{font-size:17px;display:block}
.composer-guest p{margin:4px 0 14px}
.rl-prompt .modal{max-width:380px}

/* Post status flags (scheduled / pending approval — author only) */
.post-flag{margin:0 0 4px;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:700;display:inline-flex;gap:6px}
.post-flag.pending{background:rgba(245,158,11,.16);color:#b45309}
.post-flag.sched{background:var(--blue-soft);color:var(--blue)}
html[data-theme="dark"] .post-flag.pending{color:#fbbf24}

/* Fullscreen story viewer */
.story-viewer{position:fixed;inset:0;z-index:300;background:rgba(8,10,16,.96);display:flex;align-items:center;justify-content:center}
/* blurred backdrop fills the screen behind the media so portrait stories read as fullscreen (no dark bars) while the media itself stays uncropped (contain) and centered */
.story-viewer .sv-blur{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;filter:blur(26px) brightness(.55);transform:scale(1.12);pointer-events:none}
.story-viewer .sv-img,.story-viewer .sv-vid{max-width:min(440px,100%);max-height:100%;width:auto;object-fit:contain;border-radius:8px}
/* Mobile: story media goes truly fullscreen — absolutely positioned to fill the viewport so object-fit:contain
   centers it (a flex item with width/height:100% collapses to aspect-ratio via min-width:auto and drifts off-centre). */
@media (max-width:680px){
  .story-viewer .sv-img,.story-viewer .sv-vid{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:0}
  /* portrait/overflow videos crop to fill the mobile screen (cover) instead of letterboxing over the blur */
  .story-viewer .sv-vid.sv-fill{object-fit:cover}
}
.sv-bars{position:absolute;top:max(calc(env(safe-area-inset-top, 0px) + 16px), 58px);left:12px;right:12px;display:flex;gap:5px;z-index:3}
.sv-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.sv-bar i{display:block;height:100%;width:0;background:#fff}
.sv-head{position:absolute;top:max(calc(env(safe-area-inset-top, 0px) + 30px), 72px);left:14px;right:14px;display:flex;align-items:center;gap:9px;z-index:3;color:#fff}
.sv-head .sv-av{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5)}
.sv-head .sv-name{font-size:14px;font-weight:800}
.sv-head .sv-time{font-size:12px;opacity:.7}
.sv-head .sv-x{margin-left:auto;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.sv-nav{position:absolute;top:0;bottom:0;width:35%;background:none;border:none;cursor:pointer}
.sv-prev{left:0}.sv-next{right:0}
/* Animated viewers ticker: full names fade in above the seen-pill, rise ~100px, fade out; the list loops forever */
.sv-foot{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.sv-viewers{position:relative;width:100%;height:120px}
.sv-viewer-name{position:absolute;bottom:0;left:50%;color:#fff;font-weight:800;font-size:15px;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.75);opacity:0;will-change:transform,opacity;animation:svViewerRise 2.6s cubic-bezier(.25,.8,.35,1) forwards}
@keyframes svViewerRise{
  0%{opacity:0;transform:translate(-50%,10px) scale(.92)}
  18%{opacity:1;transform:translate(-50%,-8px) scale(1)}
  72%{opacity:1;transform:translate(-50%,-74px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-100px) scale(1)}
}
.sv-seen{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:13px;font-weight:700}
.sv-seen svg{width:16px;height:16px}
/* Story reaction bar — tap an emoji to react; EVERY tap increments the count under the icon + floats up */
.sv-react{position:relative;display:flex;align-items:flex-start;gap:2px;pointer-events:auto;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:6px 8px;max-width:94vw}
.sv-rx{display:inline-flex;flex-direction:column;align-items:center;gap:1px;background:none;border:none;line-height:1;cursor:pointer;padding:2px 3px;border-radius:12px;transition:transform .12s ease}
.sv-rx-emoji{font-size:23px;line-height:1;display:block;transition:transform .12s ease}
.sv-rx:hover .sv-rx-emoji{transform:scale(1.3) translateY(-2px)}
.sv-rx:active .sv-rx-emoji{transform:scale(1.1)}
.sv-rx-count{font-size:10px;font-weight:800;color:#fff;line-height:1;min-height:11px;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sv-rx.pop .sv-rx-emoji{animation:svRxPop .4s cubic-bezier(.2,2,.4,1)}
@keyframes svRxPop{0%{transform:scale(1)}40%{transform:scale(1.55) translateY(-4px)}100%{transform:scale(1)}}
.sv-rx-float{position:absolute;bottom:100%;font-size:30px;pointer-events:none;will-change:transform,opacity;animation:svRxFloat 1.5s cubic-bezier(.25,.8,.35,1) forwards}
@keyframes svRxFloat{
  0%{opacity:0;transform:translate(-50%,4px) scale(.5)}
  18%{opacity:1;transform:translate(-50%,-14px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-150px) scale(1.5) rotate(8deg)}
}

/* video-story play badge on the thumbnail */
.story .s-vbadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2}
.story .s-vbadge svg{width:16px;height:16px;fill:#fff;color:#fff;margin-left:2px}

/* Upload progress bar (every upload panel) */
.up-bar{display:flex;align-items:center;gap:10px;margin:10px 0 4px}
.up-track{flex:1;height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.up-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#3E7BFA);border-radius:6px;transition:width .2s ease}
.up-pct{font-size:12.5px;font-weight:800;color:var(--blue);min-width:42px;text-align:right;white-space:nowrap}
.up-bar.processing .up-track i{width:100%!important;background:linear-gradient(90deg,var(--blue),#9cc0ff,var(--blue));background-size:200% 100%;animation:up-ind 1.1s linear infinite}
.up-bar.processing .up-pct{color:var(--ink-3)}
@keyframes up-ind{0%{background-position:200% 0}100%{background-position:-200% 0}}
.rum .up-track,.rum-drop+.up-bar .up-track{background:rgba(255,255,255,.14)}

/* Drama episodes sheet — multi-season grouping */
.ep-scroll{flex:1;overflow-y:auto}
.ep-season{color:#f3efe6;font-weight:800;font-size:14px;padding:16px 20px 0;opacity:.85}
.ep-season + .ep-grid{padding-top:10px}

/* ============================================================
   Store Management — seller dashboard (PDF concept)
   ============================================================ */
.sm{max-width:560px;margin:0 auto;display:flex;flex-direction:column}
.sm-seg{display:flex;gap:4px;background:var(--surface-2);border-radius:14px;padding:5px;margin-bottom:18px}
.sm-seg-btn{flex:1;padding:11px 0;border:none;background:none;border-radius:10px;font-weight:800;font-size:14px;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.sm-seg-btn.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
/* revenue card */
.sm-rev{position:relative;overflow:hidden;background:#16181d;color:#fff;border-radius:18px;padding:22px;margin-bottom:24px}
.sm-rev-glow{position:absolute;top:-40px;right:-30px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.55),transparent 65%);pointer-events:none}
.sm-rev-label{font-size:12px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.55);position:relative}
.sm-rev-amt{font-size:46px;font-weight:900;letter-spacing:-1.5px;line-height:1.05;margin:6px 0 16px;position:relative}
.sm-rev-row{display:flex;align-items:center;gap:18px;position:relative}
.sm-rev-stat b{font-size:19px;font-weight:900;display:block}
.sm-rev-stat span{font-size:12.5px;color:rgba(255,255,255,.5)}
.sm-rev-sep{width:1px;align-self:stretch;background:rgba(255,255,255,.14)}
.sm-trend{margin-left:auto;font-weight:800;font-size:15px}
.sm-trend.up{color:#34d77b}.sm-trend.down{color:#ff6b6b}
/* section header */
.sm-h{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin:6px 2px 12px}
.sm-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:24px}
/* chart */
.sm-chart{display:flex;align-items:flex-end;gap:8px;height:150px;padding:18px 16px 12px}
.sm-barwrap{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.sm-bar{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end;margin:0 auto}
.sm-bar i{display:block;width:100%;border-radius:9px;background:#cfe9da}
.sm-bar i.hot{background:var(--positive,#16A34A)}
.sm-barwrap span{font-size:12px;color:var(--ink-3);font-weight:700;margin-top:8px}
/* action tiles + sources */
.sm-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.sm-act{display:flex;flex-direction:column;align-items:center;gap:7px;padding:18px 8px;margin:0;text-align:center}
.sm-act-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.sm-act-ic svg{width:21px;height:21px}
.sm-act-ic.orange{background:#fdecd2;color:#e0820f}.sm-act-ic.navy{background:#e3e7f0;color:#33415e}
.sm-act-ic.red{background:#fbe0e0;color:#dc2626}.sm-act-ic.blue{background:#dfeafe;color:#2563eb}
.sm-act-ic.green{background:#d8f3e3;color:#16a34a}.sm-act-ic.gray{background:#e9ebef;color:#6b7280}
.sm-act b{font-size:24px;font-weight:900}
.sm-act>span:last-child{font-size:13px;color:var(--ink-2);font-weight:700}
.c-orange{color:#e0820f}.c-navy{color:#33415e}.c-red{color:#dc2626}
/* best sellers */
.sm-list{padding:6px 0}
.sm-best{padding:12px 16px}
.sm-best-top{display:flex;align-items:center;gap:11px}
.sm-best-top img,.sm-best-ph{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:0 0 34px;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.sm-best-ph svg{width:18px;height:18px;color:var(--ink-3)}
.sm-best-top b{flex:1;font-size:15px;font-weight:800}
.sm-best-top em{font-style:normal;font-weight:900;font-size:16px}
.sm-best-bar{height:6px;border-radius:6px;background:var(--surface-2);margin:9px 0 2px;margin-left:45px;overflow:hidden}
.sm-best-bar i{display:block;height:100%;border-radius:6px}
/* payment */
.sm-pay{padding:4px 0}
.sm-pay-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:14px;color:var(--ink-2)}
.sm-pay-row+.sm-pay-row{border-top:1px solid var(--line)}
.sm-pay-row b{color:var(--ink)}
.sm-pill{font-weight:800;font-size:13px;padding:4px 11px;border-radius:999px}
.sm-pill.red{background:#fbe0e0;color:#dc2626}.sm-pill.orange{background:#fdecd2;color:#c9760b}.sm-pill.green{background:#d8f3e3;color:#15803d}
/* low stock */
.sm-low{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:14.5px}
.sm-low+.sm-low{border-top:1px solid var(--line)}
.sm-low b{font-weight:800}
/* top customers */
.sm-cust{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--ink)}
.sm-cust+.sm-cust{border-top:1px solid var(--line)}
.sm-cust-n{width:18px;color:var(--ink-3);font-weight:800;text-align:center}
.sm-cust-av{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--ink-2)}
.sm-cust b{flex:1;font-size:15px;font-weight:700}
.sm-cust em{font-style:normal;font-weight:900}
.sm-empty{padding:20px;text-align:center;color:var(--ink-3);font-size:14px}

/* Store Management — full page */
.sm-page{max-width:560px;margin:0 auto;padding:18px 14px 90px}
.sm-page-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sm-back{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--ink);flex:0 0 38px}
.sm-back svg{width:20px;height:20px}
.sm-page-head h1{font-size:24px;font-weight:900}
.sm-page .sm{max-width:none}
/* store-management tabs */
.sm-tabs{display:flex;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:5px;margin-bottom:18px}
.sm-tab{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 4px;border-radius:10px;font-weight:800;font-size:12.5px;color:var(--muted)}
.sm-tab span{overflow:hidden;text-overflow:ellipsis}
.sm-tab svg{width:17px;height:17px;flex:0 0 17px}
@media(max-width:380px){.sm-tab span{display:none}}
.sm-tab.active{background:var(--blue);color:#fff}
/* ---- POS ---- */
.pos{padding-bottom:84px}
.pos-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px;margin-bottom:14px}
.pos-search svg{width:18px;height:18px;color:var(--muted);flex:0 0 18px}
.pos-search input{flex:1;border:0;background:none;padding:12px 0;font-size:15px;color:var(--ink);outline:none}
/* product picker — list view */
.pos-grid{display:flex;flex-direction:column;gap:8px}
.pos-prod{display:flex;flex-direction:row;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px 8px 8px;overflow:hidden;transition:transform .08s,border-color .15s}
.pos-prod:active{transform:scale(.99)}
.pos-prod.in{border-color:#16a34a;box-shadow:0 0 0 1px #16a34a inset}
.pos-prod.oos{opacity:.5}
.pos-prod-img{position:relative;flex:0 0 54px;width:54px;height:54px;border-radius:10px;background:var(--canvas);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pos-prod-img img{width:100%;height:100%;object-fit:cover}
.pos-prod-ph{color:var(--muted)}.pos-prod-ph svg{width:24px;height:24px}
.pos-stock{position:absolute;left:3px;top:3px;font-size:9px;font-weight:800;background:rgba(0,0,0,.62);color:#fff;padding:1px 5px;border-radius:20px;line-height:1.5}
.pos-stock.low{background:#E0820F}.pos-stock.out{background:#DC2626}
.pos-prod-qty{position:absolute;right:3px;top:3px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:#16a34a;color:#fff;font-size:11px;font-weight:900;border-radius:50%;padding:0 5px}
.pos-prod-t{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.3;padding:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pos-prod-p{flex:0 0 auto;font-size:15px;font-weight:900;padding:0;color:var(--ink);white-space:nowrap}
/* cart drawer + bottom bar */
.pos-cart{position:fixed;left:50%;transform:translateX(-50%);bottom:70px;width:min(560px,calc(100% - 24px));max-height:50vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:8px;z-index:40}
.pos-citem{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line)}
.pos-ci-t{flex:1;font-size:13.5px;font-weight:700;color:var(--ink);display:flex;flex-direction:column}
.pos-ci-t em{font-style:normal;font-weight:600;font-size:11.5px;color:var(--muted)}
.pos-ci-p{font-size:13.5px;font-weight:900;color:var(--ink);min-width:62px;text-align:right}
.pos-qty{display:flex;align-items:center;gap:2px;background:var(--canvas);border:1px solid var(--line);border-radius:20px;padding:2px}
.pos-qty button{width:26px;height:26px;border-radius:50%;font-size:16px;font-weight:900;color:var(--ink);display:flex;align-items:center;justify-content:center}
.pos-qty b{min-width:22px;text-align:center;font-size:13px;font-weight:800}
.pos-clear{width:100%;padding:10px;margin-top:4px;font-weight:800;font-size:13px;color:#DC2626}
.pos-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(560px,100%);display:flex;gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);z-index:101}
/* on mobile, lift the checkout bar + cart drawer above the fixed bottom nav */
@media (max-width:680px){
  .pos-bar{bottom:calc(60px + env(safe-area-inset-bottom));padding-bottom:10px}
  .pos-cart{bottom:calc(130px + env(safe-area-inset-bottom))}
}
.pos-cartbtn{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-weight:900;font-size:16px;color:var(--ink)}
.pos-bag{position:relative;display:flex;align-items:center;color:var(--muted)}
.pos-bag svg{width:22px;height:22px}
.pos-bag i{position:absolute;right:-9px;top:-7px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;background:#16a34a;color:#fff;font-size:10px;font-weight:900;border-radius:50%;font-style:normal;padding:0 4px}
.pos-charge{flex:0 0 auto;padding:12px 26px;font-size:15px;border-radius:12px}
.pos-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.pos-empty-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.pos-empty-ic svg{width:30px;height:30px}
.pos-empty h3{font-size:18px;font-weight:900;color:var(--ink);margin-bottom:6px}
.pos-empty p{margin-bottom:16px}
/* charge modal */
.pos-sum{background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.pos-sum-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0;color:var(--muted)}
.pos-sum-row b{color:var(--ink);font-weight:800}
.pos-sum-tot{display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:900;color:var(--ink);border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.pos-pay{display:flex;gap:10px}
.pos-payopt{flex:1;cursor:pointer}
.pos-payopt input{position:absolute;opacity:0}
.pos-payopt span{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;font-weight:800;font-size:14px;color:var(--ink)}
.pos-payopt span i{font-style:normal;font-weight:600;font-size:11.5px;color:var(--muted)}
.pos-payopt input:checked+span{border-color:#16a34a;background:rgba(22,163,74,.08)}
/* stock field + owner listing actions */
.ms-opt{font-weight:400;color:var(--muted);font-size:12px}
.ld-owner-acts{display:flex;gap:10px;margin-top:10px}
.ld-owner-acts .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.ld-owner-acts .btn svg{width:16px;height:16px}
.ld-del{color:#DC2626}
.ld-soldout{text-align:center;font-weight:900;color:#DC2626;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.3);border-radius:10px;padding:12px}
.ld-instock{font-size:13px;font-weight:700;color:#16a34a;margin-bottom:8px}
/* ---- Seller Orders (list) ---- */
.so-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.so-head h2{font-size:22px;font-weight:900}
.so-add{width:40px;height:40px;border-radius:12px;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center}
.so-add svg{width:22px;height:22px;stroke:#fff;fill:none}
.so-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px;margin-bottom:12px}
.so-search svg{width:18px;height:18px;color:var(--muted);flex:0 0 18px}
.so-search input{flex:1;border:0;background:none;padding:12px 0;font-size:15px;color:var(--ink);outline:none}
.so-chips{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;-ms-overflow-style:none;scrollbar-width:none}
.so-chips::-webkit-scrollbar{display:none}
.so-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13.5px;color:var(--ink)}
.so-chip i{font-style:normal;color:var(--muted);font-weight:800}
.so-chip.active{background:var(--ink);color:var(--surface)}
.so-chip.active i{color:var(--surface);opacity:.7}
.so-list{display:flex;flex-direction:column;gap:10px}
.so-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.so-av{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--canvas);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.so-av svg{width:18px;height:18px}
.so-mid{flex:1;min-width:0}
.so-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.so-name b{font-size:15px;font-weight:800;color:var(--ink)}
.so-code{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px}
.so-badges{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.so-badge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px}
.so-badge.green{background:rgba(22,163,74,.13);color:#16a34a}
.so-badge.red{background:rgba(220,38,38,.12);color:#DC2626}
.so-badge.orange{background:rgba(224,130,15,.14);color:#E0820F}
.so-badge.navy{background:rgba(30,41,59,.12);color:#334155}
.so-badge.blue{background:rgba(37,99,235,.13);color:#2563EB}
.so-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.so-right b{font-size:17px;font-weight:900;color:var(--ink)}
.so-right svg{width:18px;height:18px;color:var(--muted)}
/* ---- Order detail ---- */
.od-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.od-head-t{flex:1;display:flex;flex-direction:column;line-height:1.2}
.od-head-t b{font-size:20px;font-weight:900}
.od-head-t span{font-size:13px;color:var(--muted)}
.od-src{font-size:12px;font-weight:800;color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:5px 11px;border-radius:20px}
.od-cust{display:flex;align-items:center;gap:12px;padding:14px}
.od-cust-av{width:46px;height:46px;border-radius:50%;background:var(--canvas);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--muted)}
.od-cust-i{display:flex;flex-direction:column;line-height:1.3}
.od-cust-i b{font-size:16px;font-weight:800}
.od-cust-i span{font-size:13px;color:var(--ink)}
.od-rel{display:flex;align-items:center;gap:8px;background:rgba(22,163,74,.07);border:1px solid rgba(22,163,74,.25);border-radius:12px;padding:11px 14px;margin:10px 0;font-size:13.5px;color:var(--ink)}
.od-rel svg{width:18px;height:18px;color:#16a34a;flex:0 0 18px}
.od-badges{display:flex;gap:8px;margin:6px 0 4px}
.od-sec{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--muted);margin:18px 0 8px}
.od-items{padding:6px 14px}
.od-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.od-q{flex:0 0 26px;width:26px;height:26px;border-radius:7px;background:var(--canvas);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.od-it-t{flex:1;font-size:14px;font-weight:600;color:var(--ink)}
.od-item b{font-size:14px;font-weight:800}
.od-total{display:flex;justify-content:space-between;align-items:center;padding:12px 0 6px;font-weight:900}
.od-total span{font-size:15px}.od-total b{font-size:20px}
.od-pay{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;font-weight:800}
.od-pay.ok{color:#16a34a}.od-pay.due{color:#E0820F}
.od-mini{padding:8px 16px;font-size:13px;border-radius:10px}
.od-deliver{display:flex;align-items:flex-start;gap:12px;padding:14px}
.od-deliver-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(22,163,74,.1);display:flex;align-items:center;justify-content:center}
.od-deliver-ic svg{width:20px;height:20px;color:#16a34a}
.od-deliver div{display:flex;flex-direction:column;gap:3px}
.od-deliver b{font-size:14px;font-weight:700}.od-deliver span{font-size:13px;color:var(--muted)}
.od-ship{display:flex;align-items:center;gap:12px;padding:14px;margin-top:10px}
.od-ship-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(16,67,201,.10);display:flex;align-items:center;justify-content:center;font-size:18px}
.od-ship-ic svg{width:20px;height:20px;color:var(--blue)}
.od-ship-fields{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.od-ship-sel,.od-ship-track{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:13px;font-weight:600}
.od-ship-sel:focus,.od-ship-track:focus{outline:none;border-color:var(--blue)}
.od-ship .od-mini{align-self:stretch;white-space:nowrap}
.od-fulfill{padding:18px 14px}
.od-flow{display:flex;align-items:flex-start;margin-bottom:16px}
.od-node{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:62px}
.od-dot{width:30px;height:30px;border-radius:50%;background:var(--canvas);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:900}
.od-node.done .od-dot{background:#16a34a;border-color:#16a34a}
.od-node.cur .od-dot{box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.od-node em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.od-node.done em{color:var(--ink)}
.od-line{flex:1;height:3px;border-radius:3px;background:var(--line);margin-top:14px}
.od-line.done{background:#16a34a}
.od-advance{width:100%}
.ord-flow-card{padding:10px 2px 0}
.ord-flow-card .od-flow{margin-bottom:0}
.od-complete{text-align:center;font-weight:900;color:#16a34a;padding:8px}
.od-actions{display:flex;gap:10px;margin-top:18px}
.od-actions .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px}
.od-actions .btn svg{width:17px;height:17px}
/* receipt */
.rcpt{border:1px dashed var(--line);border-radius:12px;padding:14px;margin-bottom:14px;font-size:13px}
.rcpt-h{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:8px}
.rcpt-h b{font-size:16px}.rcpt-h span{font-size:11px;color:var(--muted)}
.rcpt-cust{text-align:center;color:var(--muted);margin-bottom:10px}
.rcpt-row{display:flex;justify-content:space-between;padding:3px 0}
.rcpt-tot{display:flex;justify-content:space-between;border-top:1px dashed var(--line);margin-top:8px;padding-top:8px;font-weight:900;font-size:15px}
.rcpt-pay{text-align:center;font-weight:900;letter-spacing:2px;margin-top:10px;color:var(--ink)}
/* ---- Inbox ---- */
.ib-list{display:flex;flex-direction:column;gap:8px}
.ib-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.ib-row svg{width:18px;height:18px;color:var(--muted);flex:0 0 18px}
.ib-av{position:relative;flex:0 0 46px;width:46px;height:46px;border-radius:50%;overflow:visible;background:var(--canvas);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted)}
.ib-av img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.ib-unread{position:absolute;right:-3px;top:-3px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:#DC2626;color:#fff;font-size:10px;font-weight:900;border-radius:50%;font-style:normal;padding:0 5px;border:2px solid var(--surface)}
.ib-mid{flex:1;min-width:0}
.ib-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ib-top b{font-size:15px;font-weight:800;color:var(--ink)}
.ib-time{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.ib-msg{font-size:13.5px;color:var(--ink);margin:2px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-prod{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:4px 8px;width:fit-content;max-width:100%}
.ib-prod img{width:22px;height:22px;border-radius:5px;object-fit:cover}
.ib-prod-ph{display:flex}.ib-prod-ph svg{width:14px;height:14px}
.ib-prod span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-dark{background:#111;color:#fff}
.btn-dark svg{width:16px;height:16px;fill:none;stroke:#fff}
/* ---- Products list ---- */
.so-chip2{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13.5px;color:var(--ink)}
.so-chip2.active{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.pc-list{display:flex;flex-direction:column;gap:12px}
.pc-card{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}
.pc-img{flex:0 0 88px;width:88px;height:88px;border-radius:14px;overflow:hidden;background:var(--canvas);display:flex;align-items:center;justify-content:center;font-size:34px}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-info{flex:1;min-width:0}
.pc-name{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pc-name b{font-size:17px;font-weight:800;color:var(--ink)}
.pc-name svg{width:18px;height:18px;color:var(--muted);flex:0 0 18px}
.pc-meta{display:flex;align-items:center;gap:8px;margin:5px 0}
.pc-cat{font-size:12px;font-weight:800;color:#16a34a;background:rgba(22,163,74,.12);padding:3px 9px;border-radius:20px}
.pc-code{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px}
.pc-price{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.pc-price b{font-size:20px;font-weight:900;color:var(--ink)}
.pc-stock{font-size:13px;color:var(--muted)}
.pc-vchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pc-vchip{font-size:12px;font-weight:700;color:var(--ink);background:var(--canvas);border:1px solid var(--line);padding:4px 9px;border-radius:8px}
.pc-vchip.low{color:#E0820F}
.pc-vchip.out{color:#DC2626;background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.25)}
/* ---- Product detail ---- */
.pdv-edit{display:flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px}
.pdv-edit svg{width:16px;height:16px}
.pdv-main{position:relative;width:100%;aspect-ratio:1/.78;border-radius:16px;overflow:hidden;background:var(--canvas);display:flex;align-items:center;justify-content:center}
.pdv-main img{width:100%;height:100%;object-fit:cover}
.pdv-ph{font-size:60px}
.pdv-cat{position:absolute;left:12px;top:12px;font-size:12px;font-weight:800;color:#16a34a;background:rgba(255,255,255,.92);padding:5px 11px;border-radius:20px}
.pdv-count{position:absolute;right:12px;top:12px;font-size:12px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:20px}
.pdv-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.pdv-thumb{flex:0 0 60px;width:60px;height:60px;border-radius:12px;overflow:hidden;border:2px solid transparent}
.pdv-thumb img{width:100%;height:100%;object-fit:cover}
.pdv-thumb.active{border-color:#16a34a}
.pdv-code{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:3px 10px;border-radius:8px}
.pdv-title{font-size:28px;font-weight:900;margin:8px 0 4px}
.pdv-price{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.pdv-price b{font-size:26px;font-weight:900}
.pdv-price span{font-size:14px;color:var(--muted)}
.pdv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pdv-stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center}
.pdv-stat b{display:block;font-size:21px;font-weight:900;color:var(--ink)}
.pdv-stat span{font-size:12px;color:var(--muted)}
.pdv-desc{padding:14px;font-size:14px;color:var(--ink)}
.pdv-vtable{padding:4px 0;overflow:hidden}
.pdv-vrow{display:grid;grid-template-columns:1.5fr .9fr .6fr .6fr .6fr;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.pdv-vrow:last-child{border-bottom:0}
.pdv-vrow span:not(.pdv-vn){text-align:right;font-weight:700}
.pdv-vhead{background:var(--canvas)}
.pdv-vhead span{font-size:10.5px;font-weight:800;letter-spacing:.5px;color:var(--muted)}
.pdv-vn{font-weight:800;color:var(--ink)}
.pdv-held{color:var(--ink-3)}
.pdv-held.on{color:#E0820F}
.pdv-avail{color:#16a34a;font-weight:900!important}
.pdv-hint{font-size:12.5px;color:var(--muted);margin:8px 2px 0;line-height:1.4}
.pdv-share{padding:14px}
.pdv-cap{font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;border-left:3px solid var(--line);padding-left:12px;margin-bottom:12px}
.pdv-copy{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.pdv-addorder{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:#16a34a}
.pdv-addorder svg{width:18px;height:18px;stroke:#16a34a}
/* ---- Product editor ---- */
.pe-label{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink-2);margin:18px 2px 8px}
.pe-label span{font-size:12px;font-weight:600;color:var(--muted)}
.pe-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pe-photo{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.pe-photo img{width:100%;height:100%;object-fit:cover}
.pe-cover{position:absolute;left:6px;top:6px;font-size:10px;font-weight:800;color:#fff;background:#16a34a;padding:3px 8px;border-radius:20px}
.pe-mkcover{position:absolute;left:6px;top:6px;font-size:10px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:20px}
.pe-rm{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center}
.pe-addphoto{aspect-ratio:1;border:2px dashed var(--blue);border-radius:14px;background:var(--blue-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--blue);font-weight:800;font-size:13px}
.pe-addphoto svg{width:24px;height:24px;stroke:var(--blue);fill:none}
.pe-input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;color:var(--ink);outline:none}
.pe-input:focus{border-color:var(--blue)}
.pe-textarea{resize:vertical;min-height:80px;font-family:inherit}
.pe-cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.pe-cat{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:10px 16px;border-radius:22px;background:var(--surface);border:1px solid var(--line);font-weight:800;font-size:14px;color:var(--ink)}
.pe-cat.active{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pe-variants{display:flex;flex-direction:column;gap:12px}
.pe-var{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.pe-var-top{display:flex;gap:10px;margin-bottom:10px}
.pe-vdel{flex:0 0 46px;width:46px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#DC2626}
.pe-vdel svg{width:18px;height:18px}
.pe-var-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pe-fld label{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--muted);margin-bottom:5px}
.pe-money{position:relative}
.pe-money span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}
.pe-money .pe-input{padding-left:26px}
.pe-addvar{display:flex;align-items:center;justify-content:center;gap:6px;padding:13px;border:2px dashed var(--green);border-radius:14px;background:rgba(15,169,104,.07);color:var(--green);font-weight:800;font-size:14px}
.pe-addvar svg{width:18px;height:18px;stroke:var(--green);fill:none}
.pe-savebig{width:100%;margin-top:20px;padding:15px;font-size:16px}
/* ---- Order-status timeline card (messenger bubble) ---- */
.ostat{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;max-width:300px;color:var(--ink)}
.ostat-h{font-size:13.5px;font-weight:800;margin-bottom:12px}
.ostat-flow{display:flex;align-items:flex-start}
.ostat-node{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;width:52px}
.ostat-node span{width:24px;height:24px;border-radius:50%;background:var(--canvas);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:900}
.ostat-node.done span{background:#16a34a;border-color:#16a34a}
.ostat-node em{font-style:normal;font-size:10px;font-weight:700;color:var(--muted);text-align:center}
.ostat-node.done em{color:var(--ink)}
.ostat-line{flex:1;height:3px;border-radius:3px;background:var(--line);margin-top:11px}
.ostat-line.done{background:#16a34a}
.ostat-complete{text-align:center;font-weight:800;color:#16a34a;font-size:13px;margin-top:10px}
/* seller "process order" CTA under an order-alert message */
.msg-process{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:2px;background:var(--blue);color:#fff;font-weight:800;font-size:13.5px;padding:10px 16px;border-radius:13px;box-shadow:0 4px 14px rgba(16,67,201,.28);transition:transform .12s,filter .15s}
.msg-process svg{width:16px;height:16px;fill:none;stroke:#fff}
.msg-process:hover{filter:brightness(1.07)}
.msg-process:active{transform:scale(.97)}
/* ---- Notification center ---- */
.ntf-wrap{max-width:620px;margin:0 auto;padding:22px 16px 90px}
.ntf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.ntf-head h1{font-size:24px;font-weight:900;display:flex;align-items:center;gap:10px}
.ntf-head h1 svg{width:24px;height:24px;fill:none;stroke:currentColor}
.ntf-list{display:flex;flex-direction:column;gap:8px}
.ntf-row{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;transition:border-color .15s,transform .1s}
.ntf-row:hover{border-color:rgba(var(--gold-rgb),.4)}
.ntf-row:active{transform:scale(.99)}
.ntf-row.unread{background:linear-gradient(90deg,rgba(var(--gold-rgb),.07),var(--surface) 60%);border-color:rgba(var(--gold-rgb),.22)}
.ntf-av{position:relative;flex:0 0 46px;width:46px;height:46px;border-radius:50%;overflow:visible;background:var(--canvas);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted)}
.ntf-av img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.ntf-ic{position:absolute;right:-3px;bottom:-3px;width:21px;height:21px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-style:normal;border:2px solid var(--surface)}
.ntf-ic-like{background:#F0345C}.ntf-ic-comment{background:#2563EB}.ntf-ic-follow{background:#16a34a}.ntf-ic-video,.ntf-ic-reel{background:#7C3AED}.ntf-ic-mention{background:#E0820F}
.ntf-mid{flex:1;min-width:0}
.ntf-txt{font-size:14px;color:var(--ink);line-height:1.35}
.ntf-txt b{font-weight:800}
.ntf-txt i{font-style:normal;color:var(--ink-2)}
.ntf-time{font-size:12px;color:var(--ink-3)}
.ntf-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--blue)}
.ntf-empty{text-align:center;padding:54px 20px;color:var(--ink-3)}
.ntf-empty-ic{width:66px;height:66px;margin:0 auto 14px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.ntf-empty-ic svg{width:30px;height:30px;fill:none;stroke:var(--muted)}
.ntf-empty h3{font-size:18px;font-weight:900;color:var(--ink);margin-bottom:6px}
/* Header icons moved to the mobile footer nav (search, messages, profile) — hide on mobile, keep on desktop */
@media (max-width:680px){.hdr-mob-hide{display:none!important}}
/* Footer Messages item: overlay the unread badge on the icon (which sits centered at the top of the column) */
.mob-nav .mob-msg{position:relative}
.mob-nav .mob-msg>.msg-badge{top:3px;left:calc(50% + 5px);right:auto}
/* ---- Sidebar menu (from profile avatar / menu icon) — now on desktop too ---- */
.nav-menu-btn{display:flex}
@media (max-width:680px){
  .nav-hide-mobile{display:none!important}
}
.nm-back{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .25s}
.nm-back.show{opacity:1}
.nm-panel{position:absolute;top:0;right:0;height:100%;width:min(330px,88%);background:var(--surface);box-shadow:-12px 0 44px rgba(0,0,0,.32);padding:calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 22px);display:flex;flex-direction:column;gap:14px;overflow-y:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nm-back.show .nm-panel{transform:translateX(0)}
.nm-top{display:flex;align-items:center;justify-content:space-between}
.nm-top b{font-size:19px;font-weight:900;color:var(--ink)}
.nm-x{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px}
.nm-user{display:flex;align-items:center;gap:12px;padding:13px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px}
.nm-user img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px}
.nm-logo{width:48px;height:48px;flex:0 0 48px;border-radius:13px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px}
.nm-user b{font-size:15px;font-weight:800;color:var(--ink);display:block}
.nm-user span{font-size:12.5px;color:var(--ink-3)}
.srch-wrap{max-width:620px;margin:0 auto;padding:18px 16px 90px}
.srch-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 14px;margin-bottom:16px;position:sticky;top:8px;z-index:5}
.srch-bar svg{width:20px;height:20px;color:var(--muted);flex:0 0 20px}
.srch-bar input{flex:1;border:0;background:none;padding:14px 0;font-size:16px;color:var(--ink);outline:none}
.srch-clear{flex:0 0 auto;color:var(--muted);font-size:15px;padding:6px}
.srch-sec{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;margin:14px 2px 8px}
.srch-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;transition:background .12s}
.srch-row:hover{background:var(--surface-2)}
.srch-av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px}
.srch-pim{width:46px;height:46px;border-radius:11px;flex:0 0 46px;background:var(--canvas);display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.srch-pim img{width:100%;height:100%;object-fit:cover}
.srch-t{min-width:0}
.srch-t b{display:block;font-size:15px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-t span{font-size:13px;color:var(--ink-3)}
.srch-hint{text-align:center;color:var(--ink-3);padding:50px 20px}
.srch-hint svg{width:40px;height:40px;opacity:.5;margin-bottom:12px}
.srch-hint p{font-size:15px}
/* ---- PWA install banner ---- */
.pwa-banner{position:fixed;left:50%;transform:translate(-50%,160%);bottom:calc(14px + env(safe-area-inset-bottom));width:min(440px,calc(100% - 22px));display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.32);padding:12px 14px;z-index:300;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pwa-banner.show{transform:translate(-50%,0)}
@media (max-width:680px){.pwa-banner{bottom:calc(70px + env(safe-area-inset-bottom))}}
.pwa-ico{width:46px;height:46px;border-radius:12px;flex:0 0 46px}
.pwa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pwa-txt b{font-size:14.5px;font-weight:800;color:var(--ink)}
.pwa-txt span{font-size:12px;color:var(--ink-3);line-height:1.4}
.pwa-install{flex:0 0 auto;padding:9px 16px;font-size:13px;border-radius:11px}
.pwa-x{flex:0 0 auto;align-self:flex-start;color:var(--muted);font-size:14px;padding:2px 5px}

/* ---- Change Log ---- */
.cl-wrap{max-width:760px;margin:0 auto;padding:26px 16px 90px}
.cl-load{display:flex;justify-content:center;padding:60px 0}
.cl-empty{text-align:center;color:var(--ink-3);padding:60px 0}
.cl-hero{text-align:center;padding:18px 0 30px;border-bottom:1px solid var(--line);margin-bottom:30px}
.cl-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.cl-hero h1{font-size:34px;font-weight:900;margin:8px 0 6px;letter-spacing:-.5px}
.cl-hero p{color:var(--ink-3);font-size:15px;margin:0}
.cl-meta{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.cl-pill{font-size:12.5px;font-weight:800;padding:6px 14px;border-radius:999px;background:linear-gradient(135deg,var(--blue),#3E7BFA);color:#fff}
.cl-pill.ghost{background:var(--canvas);color:var(--ink-2);border:1px solid var(--line)}
.cl-timeline{position:relative;padding-left:0}
.cl-rel{display:grid;grid-template-columns:140px minmax(0,1fr);gap:22px;padding:0 0 26px;position:relative}
.cl-rel::before{content:'';position:absolute;left:139px;top:6px;bottom:-4px;width:2px;background:var(--line)}
.cl-rel:last-child::before{display:none}
.cl-rel-side{text-align:right;padding-top:2px;position:relative}
.cl-rel-side::after{content:'';position:absolute;right:-9px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--blue);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.cl-ver{display:block;font-size:13px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.cl-date{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.cl-rel-body{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.cl-rel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cl-rel-head h2{font-size:18px;font-weight:800;margin:0}
.cl-tag{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--canvas);color:var(--blue);border:1px solid var(--line)}
.cl-changes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cl-changes li{display:flex;gap:10px;align-items:flex-start}
.cl-badge{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:6px;margin-top:1px;min-width:64px;text-align:center}
.cl-feature .cl-badge{background:rgba(34,197,94,.14);color:#16a34a}
.cl-improvement .cl-badge{background:rgba(62,123,250,.14);color:var(--blue)}
.cl-fix .cl-badge{background:rgba(245,158,11,.16);color:#d97706}
.cl-text{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.cl-foot{text-align:center;color:var(--ink-3);font-size:13px;margin-top:24px}
.cl-foot a{color:var(--blue);font-weight:700}
html[data-theme=dark] .cl-feature .cl-badge{background:rgba(34,197,94,.2);color:#4ade80}
html[data-theme=dark] .cl-fix .cl-badge{background:rgba(245,158,11,.2);color:#fbbf24}
@media (max-width:600px){
  .cl-hero h1{font-size:27px}
  .cl-rel{grid-template-columns:1fr;gap:8px}
  .cl-rel::before{display:none}
  .cl-rel-side{text-align:left;display:flex;align-items:center;gap:8px}
  .cl-rel-side::after{display:none}
  .cl-date::before{content:'·';margin-right:6px}
  .cl-ver,.cl-date{display:inline}
}

/* ---------- Moderation: report modal, action sheet, block ---------- */
.rep-reasons{display:flex;flex-direction:column;gap:8px}
.rep-reason{display:block;width:100%;text-align:left;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--text);font-weight:600;cursor:pointer;transition:.12s}
.rep-reason:hover{border-color:var(--blue)}
.rep-reason.active{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.sheet-actions{display:flex;flex-direction:column;gap:8px}
.sheet-act{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font-weight:700;font-size:15px;cursor:pointer}
.sheet-act svg{width:20px;height:20px}
.sheet-act:hover{border-color:var(--blue)}
.sheet-act.danger{color:#e0444e}
.sheet-act.danger:hover{border-color:#e0444e;background:rgba(224,68,78,.08)}
.pd-act-more,.msgr-th-more{display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;padding:0;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:11px;cursor:pointer}
.pd-act-more svg,.msgr-th-more svg{width:20px;height:20px}
.msgr-th-more{margin-left:auto}
.pd-act-more:hover,.msgr-th-more:hover{border-color:var(--blue);color:var(--blue)}
.admin-table tr.ad-row-done{opacity:.55}

/* ---------- Admin: Edit User panel ---------- */
.eu-panel{width:min(1080px,96vw);max-width:min(1080px,96vw);max-height:92vh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.eu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.eu-head-l{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--muted)}
.eu-head-l b{color:var(--text);font-weight:800}
.eu-hic{display:inline-flex}.eu-hic svg{width:18px;height:18px}
.eu-head-r{display:flex;gap:10px}
.eu-mini{padding:9px 16px;font-size:13.5px;border-radius:10px;white-space:nowrap}
.eu-loginas{background:#f0b429;color:#3a2c00;font-weight:800}
.eu-loginas:hover{filter:brightness(1.05)}
.eu-top{display:flex;align-items:center;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.eu-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
.eu-statgrid{flex:1;min-width:280px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.eu-stat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--surface);font-size:13.5px}
.eu-stat span{color:var(--muted)}.eu-stat b{font-weight:800;color:var(--text);background:var(--surface-2);padding:2px 10px;border-radius:999px;font-size:12.5px}
/* Edit-user tab bar — segmented control on a recessed track */
.eu-tabs{flex:0 0 auto;display:flex;align-items:stretch;gap:4px;margin:14px 20px 2px;padding:5px;background:var(--canvas);border:1px solid var(--line);border-radius:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.eu-tabs::-webkit-scrollbar{display:none}
.eu-tab{flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border-radius:8px;background:transparent;border:none;color:var(--muted);font-weight:700;font-size:13.5px;line-height:1.3;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.eu-tab:hover{background:var(--surface-2);color:var(--text)}
.eu-tab.active{background:var(--blue);color:#fff;box-shadow:0 1px 5px rgba(16,67,201,.45)}
/* keep the modal's header / stats / footer from squishing too — only the body scrolls */
.eu-head,.eu-top,.eu-foot{flex-shrink:0}
.eu-body{padding:14px 20px;overflow-y:auto;flex:1}
.eu-row{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line)}
.eu-row:last-child{border-bottom:none}
.eu-row>label{font-weight:700;font-size:14px;color:var(--text);padding-top:8px}
.eu-ctl{min-width:0}
.eu-hint{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--muted)}
.eu-input{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:14px;font-weight:500}
.eu-input:focus{outline:none;border-color:var(--blue)}
textarea.eu-input{resize:vertical}
.eu-prefixed{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.eu-prefixed span{display:flex;align-items:center;padding:0 12px;background:var(--surface);color:var(--muted);font-size:13px;border-right:1px solid var(--line);white-space:nowrap}
.eu-prefixed .eu-input{border:none;border-radius:0;background:transparent}
.eu-tog{width:52px;height:30px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s;flex:0 0 auto}
.eu-tog span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.eu-tog.on{background:#22c55e;border-color:#22c55e}
.eu-tog.on span{transform:translateX(22px)}
.eu-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface)}
.eu-danger{background:#e0444e;color:#fff;font-weight:700}
.eu-danger:hover{filter:brightness(1.06)}
.eu-stub{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:48px 24px;color:var(--muted)}
.eu-stub svg{width:30px;height:30px;opacity:.5}
.eu-stub b{color:var(--text);font-size:16px}
.eu-stub span{max-width:380px;font-size:13.5px;line-height:1.5}
/* Privacy tab: 2-column grid of "who can see X" dropdowns */
.eu-privgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;padding-top:16px}
.eu-privf{min-width:0;display:flex;flex-direction:column;gap:6px}
.eu-privf>label{font-weight:600;font-size:13px;color:var(--muted)}
@media (max-width:620px){ .eu-row{grid-template-columns:1fr;gap:8px} .eu-row>label{padding-top:0} .eu-statgrid{grid-template-columns:1fr} .eu-privgrid{grid-template-columns:1fr} }

/* ---- Security tab: login-session DataTable ---- */
.eu-dt-loading{padding:40px 0;text-align:center;color:var(--muted)}
.eu-dt-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.eu-dt-show,.eu-dt-search{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.eu-dt-per{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:14px}
.eu-dt-q{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:14px;min-width:180px}
.eu-dt-q:focus,.eu-dt-per:focus{outline:none;border-color:var(--blue)}
.eu-dt-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.eu-dt-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.eu-dt-table th,.eu-dt-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.eu-dt-table thead th{font-weight:800;color:var(--text);background:var(--surface-2);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;position:relative;padding-right:26px}
.eu-dt-table thead th::after{content:"↕";position:absolute;right:10px;opacity:.35;font-size:12px}
.eu-dt-table thead th.sorted-asc::after{content:"▲";opacity:.9;font-size:10px}
.eu-dt-table thead th.sorted-desc::after{content:"▼";opacity:.9;font-size:10px}
.eu-dt-table thead th.eu-dt-actcol{cursor:default;padding-right:14px}
.eu-dt-table thead th.eu-dt-actcol::after{content:""}
.eu-dt-table tbody tr:last-child td{border-bottom:none}
.eu-dt-table tbody tr:hover{background:var(--surface-2)}
.eu-dt-table td{color:var(--text)}
td.eu-dt-actcol,th.eu-dt-actcol{text-align:center;width:80px}
.eu-dt-empty{text-align:center;color:var(--muted);padding:26px 0!important}
.eu-dt-del{width:34px;height:34px;border-radius:50%;background:#e0444e;color:#fff;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:filter .15s}
.eu-dt-del:hover{filter:brightness(1.08)}
.eu-dt-del svg{width:16px;height:16px}
.eu-dt-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.eu-dt-info{font-size:13.5px;color:var(--muted)}
.eu-dt-pager{display:flex;gap:4px;flex-wrap:wrap}
.eu-pg{padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--blue);font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s}
.eu-pg:hover:not(.disabled):not(.active){background:var(--surface-2)}
.eu-pg.active{background:var(--blue);border-color:var(--blue);color:#fff;cursor:default}
.eu-pg.disabled{color:var(--muted);opacity:.5;cursor:default}

/* ---- Membership tab ---- */
.eu-sec-h{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;padding:6px 0 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.eu-mval{font-size:15px;color:var(--text);font-weight:600;padding-top:6px}
.eu-mval.eu-dim{color:var(--muted);font-weight:500}
.eu-boost-n{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px}
.eu-boost-bar{height:12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.eu-boost-bar>span{display:block;height:100%;background:var(--blue);border-radius:999px}

/* ===== Admin → MODULES → CMS list (Pages/Groups/Events/Blogs/Offers) ===== */
.cms-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.cms-stat{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:22px 20px;overflow:hidden}
.cms-stat b{display:block;font-size:32px;font-weight:900;line-height:1.05}
.cms-stat span{color:var(--ink-3);font-weight:600}
.cms-stat-ic{position:absolute;right:-8px;top:50%;transform:translateY(-50%);opacity:.13;pointer-events:none}
.cms-stat-ic svg{width:92px;height:92px;color:var(--ink)}
.cms-search{display:flex;gap:10px;margin-bottom:6px}
.cms-search input{flex:1;max-width:440px}
.cms-search-hint{color:var(--ink-3);font-size:13px;margin-bottom:18px}
.cms-table td{vertical-align:middle}
.cms-table .ad-user img,.cms-ph{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.cms-ph{display:inline-flex;align-items:center;justify-content:center;background:rgba(127,127,127,.2);color:var(--ink-3)}
.cms-ph svg{width:17px;height:17px}
.cms-table .ad-user{display:flex;align-items:center;gap:10px}
a.cms-pagelink{color:var(--blue);font-weight:700;cursor:pointer}
a.cms-pagelink:hover{text-decoration:underline}
.cms-verif{display:inline-block;padding:4px 16px;border-radius:18px;font-weight:800;font-size:13px;color:#fff}
.cms-verif.yes{background:#1faa59}
.cms-verif.no{background:#e0455e}
.cms-act{display:inline-flex;gap:8px}
.cms-act button{width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:filter .15s}
.cms-act button:hover{filter:brightness(1.1)}
.cms-act .edit{background:var(--blue)}
.cms-act .del{background:#e0455e}
.cms-act button svg{width:15px;height:15px}
.cms-pg{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.cms-pg-info{color:var(--ink-3)}
.cms-pg-list{display:flex;gap:4px;flex-wrap:wrap}
.cms-pg-list a{padding:7px 13px;border-radius:8px;color:var(--blue);cursor:pointer;font-weight:700}
.cms-pg-list a.active{background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.cms-pg-list a:hover{background:var(--surface-2)}

/* ===== Admin → CMS item full-page editor ===== */
.aue-view{background:#3a9cb0;color:#fff}
.aue-view:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cms-avatar-ph{display:inline-flex;align-items:center;justify-content:center;background:#5b6b7a;color:#d6dee6}
.cms-avatar-ph svg{width:54px;height:54px}
.cms-owner{display:flex;align-items:center;gap:12px}
.cms-owner .ad-user{display:flex;align-items:center;gap:9px}
.cms-owner .ad-user img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.cms-own-edit{width:34px;height:34px;border-radius:50%;background:rgba(127,127,127,.22);border:0;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cms-own-edit:hover{background:rgba(127,127,127,.34)}
.cms-own-edit svg{width:15px;height:15px}

/* ===== Public Page profile ===== */
.pp-wrap{max-width:1000px;margin:0 auto;padding:0 12px 80px}
.pp-cover{height:300px;border-radius:0 0 16px 16px;overflow:hidden;background:linear-gradient(135deg,#2a2f45,#1a1d2e)}
.pp-cover img{width:100%;height:100%;object-fit:cover}
.pp-id{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 8px;margin-top:-46px;flex-wrap:wrap}
.pp-id-main{display:flex;align-items:flex-end;gap:16px;min-width:0}
.pp-avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:4px solid var(--surface);background:#5b6b7a;display:inline-flex;align-items:center;justify-content:center;color:#d6dee6}
.pp-avatar img{width:100%;height:100%;object-fit:cover}
.pp-avatar svg{width:46px;height:46px}
.pp-id-txt{padding-bottom:6px;min-width:0}
.pp-id-txt h1{font-size:26px;font-weight:900;display:flex;align-items:center;gap:8px;margin:0}
.pp-verif{display:inline-flex;color:#fff;background:var(--blue);border-radius:50%;width:22px;height:22px;align-items:center;justify-content:center}
.pp-verif svg{width:14px;height:14px}
.pp-handle{color:var(--ink-3)}
.pp-id-acts{padding-bottom:8px}
.pp-like svg{width:18px;height:18px;vertical-align:-3px}
.pp-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin:16px 0 18px;padding:0 4px}
.pp-tab{display:flex;align-items:center;gap:8px;padding:12px 16px;color:var(--ink-3);font-weight:700;white-space:nowrap;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer}
.pp-tab svg{width:18px;height:18px}
.pp-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.pp-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.pp-about h3{font-size:18px;font-weight:800;margin:0 0 10px}
.pp-about-txt{color:var(--ink-2);margin:0 0 12px;line-height:1.5}
.pp-about-row{display:flex;align-items:center;gap:9px;padding:7px 0;color:var(--ink-2);border-top:1px solid var(--line)}
.pp-about-row svg{width:18px;height:18px;color:var(--ink-3);flex:0 0 auto}
.pp-composer{padding:14px}
.pp-composer textarea{width:100%;border:0;background:transparent;resize:vertical;min-height:58px;color:var(--ink);font:inherit;outline:none}
.pp-c-actions{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
.pp-c-thumb{height:38px;border-radius:6px;vertical-align:middle}
.pp-chips{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px}
.pp-chip{padding:8px 16px;border-radius:20px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font-weight:700;cursor:pointer;white-space:nowrap}
.pp-chip.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pp-grid-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.pp-grid-item img{width:100%;height:100%;object-fit:cover}
.pp-grid-ph{color:var(--ink-3)}.pp-grid-ph svg{width:30px;height:30px}
.pp-grid-play{position:absolute;inset:0;margin:auto;width:40px;height:40px;background:rgba(0,0,0,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.pp-grid-play svg{width:20px;height:20px}
@media(max-width:820px){.pp-body{grid-template-columns:1fr}.pp-cover{height:200px}.pp-avatar{width:84px;height:84px}}

/* ===== Feed sidebars: Pages discover / promote ===== */
.pages-disc h4{margin:0 0 12px}
.disc-page{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.disc-page:first-child{border-top:0}
.disc-page-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.disc-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#5b6b7a;display:inline-flex;align-items:center;justify-content:center;color:#d6dee6}
.disc-av img{width:100%;height:100%;object-fit:cover}
.disc-av svg{width:20px;height:20px}
.disc-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.disc-txt b{display:flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-txt .muted{font-size:12.5px}
.disc-verif{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;background:var(--blue);color:#fff;border-radius:50%;flex:0 0 auto}
.disc-verif svg{width:10px;height:10px}
.disc-like{padding:6px 14px;font-size:13px;flex:0 0 auto}

/* ===== Public Page — beautiful redesign + owner photo controls ===== */
.pp-wrap{max-width:1040px;margin:0 auto;padding:18px 12px 90px}
.pp-head{padding:0;overflow:hidden;border-radius:18px}
.pp-cover{position:relative;height:300px;border-radius:0;overflow:hidden;background:linear-gradient(135deg,#3b2f6b,#1a1d2e 55%,#0e2a4a)}
.pp-cover-img{width:100%;height:100%;object-fit:cover;display:block}
.pp-cover-img[hidden]{display:none}
.pp-cover-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent 42%);pointer-events:none}
.pp-cover-edit{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:10px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);color:#fff;font-weight:700;cursor:pointer}
.pp-cover-edit:hover{background:rgba(0,0,0,.62)}
.pp-cover-edit svg{width:17px;height:17px}
.pp-id{display:flex;align-items:flex-end;gap:18px;padding:0 22px 16px;margin-top:-50px;position:relative;flex-wrap:wrap}
.pp-avatar-wrap{position:relative;flex:0 0 auto}
.pp-avatar{width:124px;height:124px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;border:4px solid var(--surface);background:#5b6b7a;color:#d6dee6;box-shadow:0 6px 22px rgba(0,0,0,.32)}
.pp-avatar img{width:100%;height:100%;object-fit:cover}
.pp-avatar svg{width:52px;height:52px}
.pp-avatar-cam{position:absolute;right:5px;bottom:5px;width:36px;height:36px;border-radius:50%;border:3px solid var(--surface);background:var(--blue);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pp-avatar-cam:hover{filter:brightness(1.12)}
.pp-avatar-cam svg{width:17px;height:17px}
.pp-id-info{flex:1;min-width:0;padding-bottom:6px}
.pp-id-info h1{font-size:27px;font-weight:900;display:flex;align-items:center;gap:8px;margin:0 0 3px;line-height:1.1}
.pp-id-acts{padding-bottom:8px;display:flex;gap:8px}
.pp-tabs{display:flex;gap:2px;overflow-x:auto;border-top:1px solid var(--line);border-bottom:0;padding:4px 12px 0;margin:0}
.pp-body{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start;margin-top:18px}
.pp-about{padding:18px}
.pp-about h3{margin:0 0 6px}
.pp-about-txt{margin:0 0 8px}
.pp-about-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.pp-ab-ic{width:34px;height:34px;border-radius:9px;background:rgba(127,127,127,.14);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);flex:0 0 auto}
.pp-ab-ic svg{width:17px;height:17px}
@media(max-width:820px){.pp-body{grid-template-columns:1fr}.pp-cover{height:200px}.pp-avatar{width:96px;height:96px}.pp-id{margin-top:-40px;padding:0 16px 14px}}

/* ===== Admin CMS list — professional header + stat cards ===== */
.cms-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.cms-head-t{display:flex;align-items:center;gap:13px}
.cms-head-ic{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#4f7cff,#7b5cff);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(79,124,255,.35);flex:0 0 auto}
.cms-head-ic svg{width:23px;height:23px}
.cms-head h1{font-size:24px;font-weight:900;margin:0}
.cms-new-btn{background:linear-gradient(135deg,#4f7cff,#7b5cff);color:#fff;font-weight:800;padding:11px 20px;border-radius:12px;box-shadow:0 8px 20px rgba(79,124,255,.32);border:0}
.cms-new-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cms-new-btn:active{transform:translateY(0)}
.cms-new-btn svg{width:18px;height:18px}
/* colorful stat cards (override earlier flat .cms-stat) */
.cms-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.cms-stat{display:flex;align-items:center;gap:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:20px;overflow:visible;transition:transform .16s ease,box-shadow .16s ease}
.cms-stat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.cms-stat-chip{width:56px;height:56px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff}
.cms-stat-chip svg{width:27px;height:27px}
.cms-stat-meta b{display:block;font-size:30px;font-weight:900;line-height:1;letter-spacing:-.5px}
.cms-stat-meta span{color:var(--ink-3);font-weight:600;font-size:14px}
.cms-stat--blue{border-color:rgba(79,124,255,.32)}
.cms-stat--blue .cms-stat-chip{background:linear-gradient(135deg,#4f7cff,#7b5cff);box-shadow:0 8px 18px rgba(79,124,255,.4)}
.cms-stat--green{border-color:rgba(34,192,127,.32)}
.cms-stat--green .cms-stat-chip{background:linear-gradient(135deg,#22c07f,#12a866);box-shadow:0 8px 18px rgba(34,192,127,.4)}
.cms-stat--pink{border-color:rgba(255,93,143,.32)}
.cms-stat--pink .cms-stat-chip{background:linear-gradient(135deg,#ff5d8f,#ff7a59);box-shadow:0 8px 18px rgba(255,93,143,.4)}
@media(max-width:760px){.cms-stats{grid-template-columns:1fr}}

/* ===== CMS group editor extras ===== */
.aue-sep{height:1px;background:var(--line);margin:18px 0}
.cms-priv{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;color:var(--ink-2);white-space:nowrap}
.cms-priv svg{width:17px;height:17px;color:var(--ink-3);flex:0 0 auto}
.cms-table-group .cms-act{flex-direction:column;gap:8px;align-items:flex-start}

/* ===== Floating "+" create menu ===== */
.cfab{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.cfab-btn{width:60px;height:60px;border-radius:18px;border:0;background:linear-gradient(135deg,#6d5ef0,#8e7bff);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(109,94,240,.45);transition:transform .2s,filter .2s;pointer-events:auto}
.cfab-btn:hover{filter:brightness(1.06)}
.cfab-plus{width:26px;height:26px;transition:transform .25s}
.cfab.open .cfab-plus{transform:rotate(135deg)}
.cfab-menu{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 16px 44px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px;min-width:224px;transform-origin:bottom right;opacity:0;transform:scale(.92) translateY(10px);pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.cfab.open .cfab-menu{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.cfab-item{display:flex;align-items:center;gap:14px;padding:11px 14px;border:0;background:none;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;border-radius:10px;width:100%;text-align:left}
.cfab-item:hover{background:var(--surface)}
.cfab-ic{width:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);flex:0 0 auto}
.cfab-ic svg{width:24px;height:24px}
/* Mobile: the create (+) lives in the footer nav center; hide the floating FAB button and center its menu above the footer */
.mob-create{flex:1;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.mob-create svg{width:44px;height:44px;padding:10px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#6d5ef0,#8e7bff);box-shadow:0 6px 16px rgba(109,94,240,.4)}
.mob-create:active svg{filter:brightness(.95)}
@media(max-width:680px){
  .cfab{left:0;right:0;bottom:calc(72px + env(safe-area-inset-bottom));align-items:center}
  .cfab-btn{display:none}
  .cfab-menu{transform-origin:bottom center;min-width:min(86vw,300px)}
}

/* ===== CMS category table — order pill ===== */
.cat-order{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 9px;border-radius:14px;background:#3a9cb0;color:#fff;font-weight:800;font-size:13px}

/* ===== Public Events discover ===== */
.ev-wrap{max-width:1240px;margin:0 auto;padding:0 14px 90px}
.ev-hero{position:relative;background:linear-gradient(120deg,#2a1d5e,#1a1d2e 70%);border-radius:0 0 20px 20px;padding:36px 28px 30px;overflow:hidden;margin-bottom:20px}
.ev-hero-in h1{font-size:40px;font-weight:900;margin:0}
.ev-hero-in p{color:var(--ink-2);font-size:17px;margin:4px 0 0}
.ev-hero-ic{position:absolute;right:24px;top:50%;transform:translateY(-50%);opacity:.18;color:#fff}
.ev-hero-ic svg{width:150px;height:150px}
.ev-filters{padding:16px}
.ev-filter-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ev-pill{flex:1;min-width:160px;border:1px solid var(--line);border-radius:24px;background:var(--surface-2);color:var(--ink);padding:11px 16px;font-weight:600}
.ev-search{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ev-search input{flex:1;border:0!important;border-radius:0!important;background:var(--surface-2)}
.ev-search .btn{border-radius:0;background:var(--surface-3,#3a3a3a);color:var(--ink)}
.ev-tabs{display:flex;gap:8px;overflow-x:auto;margin:18px 0}
.ev-tab{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;border:0;background:var(--surface-2);color:var(--ink-2);font-weight:700;cursor:pointer;white-space:nowrap}
.ev-tab svg{width:17px;height:17px}
.ev-tab.active{background:var(--blue-soft);color:var(--blue)}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.ev-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.ev-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.ev-card-cover{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#3b2f6b,#1a1d2e);display:flex;align-items:center;justify-content:center}
.ev-card-cover img{width:100%;height:100%;object-fit:cover}
.ev-card-ph{color:rgba(255,255,255,.4)}.ev-card-ph svg{width:42px;height:42px}
.ev-card-priv{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;padding:3px 10px;border-radius:14px;font-size:12px;font-weight:700;text-transform:capitalize}
.ev-card-body{padding:14px 16px}
.ev-card-date{color:var(--blue);font-weight:800;font-size:13px;margin-bottom:4px}
.ev-card-body h3{font-size:17px;font-weight:800;margin:0 0 6px;line-height:1.25}
.ev-card-loc{color:var(--ink-3);font-size:13.5px;display:flex;align-items:center;gap:5px;margin-bottom:6px}
.ev-card-loc svg{width:15px;height:15px;flex:0 0 auto}
.ev-card-meta{color:var(--ink-3);font-size:13px}
.ev-empty{text-align:center;padding:60px 16px;color:var(--ink-2)}
.ev-empty-ic{color:var(--ink-3);opacity:.5;margin-bottom:14px}.ev-empty-ic svg{width:60px;height:60px}
.ev-empty-t{font-weight:800;font-size:18px;margin-bottom:16px}
.ev-cp-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:6px 0}
.ev-cp-row b{font-size:16px;font-weight:800}
.ev-cp-row .ad-dim{margin:2px 0 0}

/* ===== Admin MONEY accordion — green icons ===== */
.admin-money .admin-link2 > svg{color:#22c55e}

/* ===== Admin → Money → Earnings → Payments ===== */
.pay-export{background:#3aa657;color:#fff;font-weight:800}
.pay-export:hover{filter:brightness(1.06)}
.pay-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.pay-chart{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px;min-height:320px;display:flex;flex-direction:column}
.pay-chart-h{position:relative;text-align:center;font-weight:800;font-size:18px}
.pay-chart-menu{position:absolute;right:0;top:-2px;width:36px;height:30px;border-radius:7px;background:#f4f4f4;color:#333;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pay-chart-menu svg{width:16px;height:16px}
.pay-chart-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-weight:600}
.pay-chart-credit{position:absolute;right:14px;bottom:10px;color:var(--ink-3);opacity:.45;font-size:12px}
.pay-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;margin-bottom:24px}
.pay-stat{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0}
.pay-stat b{display:block;font-size:34px;font-weight:900;line-height:1;letter-spacing:-.5px}
.pay-stat span{color:var(--ink-2);font-weight:600}
.pay-stat-ic{color:var(--ink-3);opacity:.35;flex:0 0 auto}
.pay-stat-ic svg{width:80px;height:80px}
@media(max-width:760px){.pay-charts,.pay-stats{grid-template-columns:1fr}}

/* ===== Money pages — polish (beautiful/professional) ===== */
.pay-charts.one{grid-template-columns:1fr}
.pay-charts.one .pay-chart{min-height:500px}
.pay-chart{border-radius:16px;transition:box-shadow .15s}
.pay-chart:hover{box-shadow:0 10px 26px rgba(0,0,0,.18)}
.pay-chart-empty{flex-direction:column;gap:8px}
.pay-chart-empty-ic{opacity:.2}.pay-chart-empty-ic svg{width:54px;height:54px}
.pay-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:transform .15s,box-shadow .15s}
.pay-stat:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.2)}
.pay-stat b{font-size:32px}
.pay-table thead th{background:var(--surface-2)}
.money-soon{text-align:center;padding:60px 20px;max-width:520px;margin:34px auto;background:var(--surface-2);border:1px solid var(--line);border-radius:18px}
.money-soon-ic{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center;background:rgba(34,197,94,.14);color:#22c55e;margin-bottom:14px}
.money-soon-ic svg{width:32px;height:32px}
.money-soon h2{font-size:22px;font-weight:900;margin:0 0 6px}
.money-soon p{color:var(--ink-3);margin:0 0 16px}
.money-soon-badge{display:inline-block;background:var(--blue-soft);color:var(--blue);font-weight:800;padding:5px 14px;border-radius:20px;font-size:13px}

/* ===== CSS grouped bar chart (Pro Packages) ===== */
.bar-wrap{display:flex;gap:10px;flex:1;min-height:300px;padding:10px 4px 0}
.bar-yaxis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:var(--ink-3);font-size:12px;padding-bottom:22px;min-width:18px}
.bar-plot{flex:1;display:flex;align-items:flex-end;gap:4px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 4px}
.bar-group{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.bar-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%;height:calc(100% - 22px)}
.bar{width:13px;max-width:40%;border-radius:3px 3px 0 0;transition:opacity .15s}
.bar:hover{opacity:.8}
.bar-x{font-size:11px;color:var(--ink-3);margin-top:6px}
.bar-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px;color:var(--ink-2);font-weight:600;font-size:13px}
.bar-legend span{display:inline-flex;align-items:center;gap:7px}
.bar-legend i{width:11px;height:11px;border-radius:50%}

/* ===== System Ads place cell ===== */
.sa-place{display:inline-flex;align-items:center;gap:7px}
.sa-place svg{width:17px;height:17px;color:var(--ink-3);flex:0 0 auto}

/* ===== Wallet settings (warning banner + payment checkboxes) ===== */
.money-warn{background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.4);color:#f0a93a;font-weight:700;padding:14px 18px;border-radius:12px;margin-bottom:20px}
.money-warn a{color:#f0a93a;opacity:.75;text-decoration:underline}
.money-warn a:hover{opacity:1}
.wal-pm{display:flex;flex-wrap:wrap;gap:18px 26px}
.wal-cb{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.wal-cb input{width:17px;height:17px;accent-color:var(--blue)}

/* ===== Money payment-request notice banners ===== */
.money-note{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;border-radius:12px;margin-bottom:16px;font-weight:600;line-height:1.45}
.money-note-ic{flex:0 0 auto}.money-note-ic svg{width:24px;height:24px;display:block}
.money-note.warn{background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.4);color:#f0a93a}
.money-note.info{background:rgba(58,134,216,.12);border:1px solid rgba(58,134,216,.4);color:#6db0ef}

/* ===== Pro packages list ===== */
.pkg-name{display:inline-flex;align-items:center;gap:9px;color:var(--blue);font-weight:700;cursor:pointer}
.pkg-name:hover{text-decoration:underline}
.pkg-ic{flex:0 0 auto;color:var(--blue)}.pkg-ic svg{width:20px;height:20px;display:block}
.pkg-perm{color:var(--blue);cursor:pointer}.pkg-perm:hover{text-decoration:underline}
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pk-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* ===== Package full-page editor (PDF) ===== */
.pkg-ic img{width:22px;height:22px;border-radius:5px;object-fit:cover;display:block}
.pk-row{display:flex;gap:10px}.pk-row .pk-unit{max-width:150px}
.pk-color{display:flex;gap:10px;align-items:center}
.pk-color #pk-color{width:60px;height:40px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.pk-icon-btn{width:96px;height:96px;border:1px dashed var(--line);border-radius:14px;background:var(--surface-2);color:var(--ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s}
.pk-icon-btn:hover{border-color:var(--blue)}
.pk-icon-btn svg{width:30px;height:30px}
.pk-icon-btn img{width:100%;height:100%;object-fit:cover;border-radius:13px}
.pk-tog{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.pk-tog-l b{display:block;font-weight:700}.pk-tog-l p{margin:3px 0 0}
.aue-sep.dot{border-top:1px dashed var(--line);background:none;height:0;margin:14px 0}
.spinner.sm{width:22px;height:22px;border-width:3px}

/* ===== Pro subscribers list ===== */
.sub-user{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-weight:700}
.sub-user:hover{text-decoration:underline}
.sub-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3)}
.sub-av img{width:100%;height:100%;object-fit:cover}
.sub-ini{font-weight:800;color:var(--ink-2);font-size:13px}
.sub-rem{color:var(--ink-3);font-weight:600}
.aue-dt-pg.active{background:var(--blue);border-color:var(--blue);color:#fff}

/* ===== Affiliates settings (levels + radios) ===== */
.aff-radios{display:flex;flex-wrap:wrap;gap:14px 24px}
.aff-radio{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.aff-radio input{width:16px;height:16px;accent-color:var(--blue)}
.aff-level{padding:4px 0}
.aff-level-h{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin:14px 0 10px}

/* ===== field sub-label (Points System) ===== */
.aue-sublabel{display:block;font-size:12px;color:var(--ink-3);font-weight:500;margin-top:2px}

/* ===== Paid Modules banner ===== */
.pm-banner{display:flex;gap:14px;align-items:flex-start;background:#6c5ce7;color:#fff;padding:16px 20px;border-radius:14px;margin-bottom:22px}
.pm-banner-ic{flex:0 0 auto}.pm-banner-ic svg{width:26px;height:26px}
.pm-banner b{font-weight:800}
.pm-banner p{margin:4px 0 0;line-height:1.5;opacity:.95}
.pm-banner a{color:#ffd27a;font-weight:800;text-decoration:underline}

/* ===== Marketplace admin (products/orders) ===== */
.mk-search{display:flex;gap:10px;margin-bottom:6px}
.mk-search .set-input{flex:1}
.mk-search .btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.mk-search-hint{color:var(--ink-3);font-size:13px;margin-bottom:16px}
.mk-table th{white-space:nowrap}
.mk-view{display:inline-flex;align-items:center;gap:6px;background:var(--surface-3);color:var(--ink-2);font-weight:600;padding:7px 14px}
.mk-view svg{width:15px;height:15px}
.mk-pg{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:14px;color:var(--ink-3)}
.mk-pg-list{display:flex;gap:6px;align-items:center}
.mk-pg-list a{padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--blue);font-weight:700}
.mk-pg-list a:hover{background:var(--surface-2)}
.mk-pg-list a.active{color:var(--ink-3);cursor:default;font-weight:600}

/* ===== Marketplace categories order badge ===== */
.mc-order{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:14px;background:#2aa9bf;color:#fff;font-weight:800;font-size:13px}

/* ===== Admin Customization group (orange icons, like reference) ===== */
.admin-custom .admin-link2 svg{color:#ef6c2e}

/* ===== Custom Fields list ===== */
.cf-yes{color:#16a34a;font-weight:700}

/* ===== Static Pages + Colored Posts ===== */
.yn{display:inline-block;padding:4px 12px;border-radius:14px;font-weight:800;font-size:12px;color:#fff}
.yn-y{background:#16a34a}.yn-n{background:#e23a3a}
.sp-addr{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.sp-addr .sp-prefix{padding:0 12px;color:var(--ink-3);background:var(--surface-3);align-self:stretch;display:flex;align-items:center;font-size:13px;white-space:nowrap}
.sp-addr .set-input{border:0;border-radius:0;background:transparent;flex:1}
.cp-preview{width:240px;height:135px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;text-align:center}
.cp-preview-lg{width:100%;max-width:560px;height:360px;font-size:34px}
.cp-color{display:flex;gap:10px;align-items:center}
.cp-color input[type=color]{width:120px;height:40px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.cp-color .set-input{flex:1}

/* ===== Reactions + Emojis ===== */
.rx-emoji{font-size:26px;line-height:1}
.em-img{width:30px;height:30px;object-fit:contain;display:block}
.em-native{font-size:26px;line-height:1}

/* ===== Stickers / Gifts asset preview + bigger upload tile ===== */
.asset-img{width:72px;height:72px;object-fit:contain;border-radius:8px;background:var(--surface-3);display:block}
.pk-icon-btn.ia-up{width:130px;height:130px}

/* ===== FB-style post reactions + comment replies ===== */
.post-stats{align-items:center}
.rx-summary{display:inline-flex;align-items:center;gap:7px;min-height:20px;cursor:pointer}
.rx-summary:hover [data-like-count]{text-decoration:underline}
.rx-stack{display:inline-flex}
.rx-chip{font-size:17px;line-height:1;margin-left:-4px}
/* "Who reacted" modal — reaction filter tabs, reactor list, See More */
.rxl{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:460px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;animation:rise .25s}
.rxl-head{display:flex;align-items:center;gap:6px;padding:10px 10px 9px;border-bottom:1px solid var(--line)}
.rxl-tabs{display:flex;align-items:center;gap:5px;overflow-x:auto;flex:1;scrollbar-width:none}
.rxl-tabs::-webkit-scrollbar{display:none}
.rxl-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:none;border:0;border-radius:999px;padding:7px 13px;color:var(--ink-2);font-weight:800;font-size:15px;cursor:pointer;line-height:1}
.rxl-tab i{font-style:normal;font-weight:700;color:var(--ink-3);font-size:13px}
.rxl-tab .rxl-tab-e{font-size:19px}
.rxl-tab.on{background:var(--surface-2);color:var(--ink)}
.rxl-tab.on i{color:var(--ink-2)}
.rxl-x{flex:0 0 auto;width:34px;height:34px;border:0;background:none;color:var(--ink-3);font-size:19px;cursor:pointer;border-radius:50%}
.rxl-x:hover{background:var(--surface-2)}
.rxl-list{flex:1;overflow-y:auto;padding:4px 2px}
.rxl-row{display:flex;align-items:center;gap:12px;padding:8px 14px}
.rxl-av{position:relative;flex:0 0 52px;width:52px;height:52px}
.rxl-av img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.rxl-emoji{position:absolute;right:-2px;bottom:-2px;font-size:18px;line-height:1;background:var(--surface);border-radius:50%;padding:0 1px}
.rxl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-decoration:none}
.rxl-name{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rxl-name .ver-tick{width:16px;height:16px;flex:0 0 auto}
.rxl-pro{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:800;color:#e2683a;border:1px solid #e2683a;border-radius:999px;padding:1px 7px;flex:0 0 auto}
.rxl-mutual{font-size:13px;color:var(--ink-3)}
.rxl-btn{flex:0 0 auto;font-size:14px;font-weight:800;padding:8px 18px;border-radius:999px;cursor:pointer;line-height:1;border:1.5px solid var(--green);color:var(--green);background:none}
.rxl-btn.is-add:hover{background:var(--green);color:#fff}
.rxl-btn.is-friend,.rxl-btn.is-following{cursor:default;opacity:.92}
.rxl-foot{padding:8px;border-top:1px solid var(--line)}
.rxl-more{width:100%;background:var(--surface-2);border:0;border-radius:10px;padding:13px;color:var(--blue);font-weight:800;font-size:16px;cursor:pointer}
.rxl-more:hover{background:var(--canvas)}
.rxl-empty{padding:30px;text-align:center;color:var(--ink-3)}
.rx-chip:first-child{margin-left:0}
.rx-meta{color:var(--ink-3);text-align:right}
.rx-react-wrap{position:relative;flex:1;display:flex}
.rx-react{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border-radius:var(--r-sm);font-weight:700;color:var(--ink-2);transition:background .12s}
.rx-react:hover{background:var(--canvas)}
.rx-react svg{width:19px;height:19px}
.rx-react.reacted{font-weight:800}
.rx-emoji{font-size:18px;line-height:1}
.rx-share{flex:0 0 auto!important;margin-left:auto}
.rx-picker{position:absolute;bottom:calc(100% + 8px);left:0;display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 9px;box-shadow:0 12px 32px rgba(0,0,0,.28);opacity:0;transform:translateY(8px) scale(.9);transform-origin:bottom left;pointer-events:none;transition:opacity .16s,transform .16s;z-index:40}
.rx-react-wrap.rx-open .rx-picker{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.rx-opt{font-size:30px;line-height:1;background:none;border:0;cursor:pointer;padding:2px 3px;transition:transform .12s}
.rx-opt:hover{transform:scale(1.35) translateY(-6px)}
/* comments: replies + reply form */
.comment-main{flex:1;min-width:0}
.comment-main .bubble b a{color:inherit}
.comment-foot{display:flex;align-items:center;gap:16px;padding:3px 0 0 13px;font-size:12px}
.c-reply{font-weight:700;color:var(--ink-3);cursor:pointer;background:none;border:0;padding:0}
.c-reply:hover{color:var(--blue);text-decoration:underline}
.comment-replies{margin-top:8px;padding-left:14px;border-left:2px solid var(--line)}
.comment-replies:empty{display:none}
.reply-form{margin-top:8px}

/* ===== Share modal + embedded shared post ===== */
.sh-url{display:flex;gap:8px;margin-bottom:16px}
.sh-url input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--ink);font-size:14px}
.sh-copy{flex:0 0 auto;width:46px;border:1px solid var(--line);border-radius:10px;background:var(--surface-3);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sh-copy:hover{background:var(--line)}.sh-copy svg{width:18px;height:18px}
.sh-social{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.sh-soc{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,filter .12s}
.sh-soc:hover{transform:translateY(-2px);filter:brightness(1.08)}.sh-soc svg{width:24px;height:24px}
.sh-div{height:1px;background:var(--line);margin:18px 0}
.sh-to{text-align:center;font-weight:800;font-size:18px;margin:0 0 16px}
.sh-targets{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sh-t{flex:1 1 130px;max-width:170px;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--surface-2);border:2px solid var(--line);border-radius:12px;color:var(--ink-2);font-weight:700;cursor:pointer;transition:.12s}
.sh-t:hover{border-color:var(--ink-3)}
.sh-t.active{border-color:var(--blue);color:var(--ink)}
.sh-t-ic{width:42px;height:42px;border-radius:50%;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.sh-t.active .sh-t-ic{background:var(--blue-soft);color:var(--blue)}
.sh-t-ic svg{width:22px;height:22px}
.sh-pick{margin-top:14px}
.sh-msg-f{margin-top:16px}
.sh-foot{display:flex;justify-content:flex-end;margin-top:16px}
/* embedded shared post (quote) */
.post-embed{display:block;margin:0 16px 4px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2)}
.post-embed:hover{background:var(--canvas)}
.post-embed-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.post-embed-head .who b{font-size:14px}.post-embed-head .who .muted{display:block;font-size:12px}
.post-embed-text{padding:0 12px 10px;font-size:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.post-embed-media img{width:100%;max-height:320px;object-fit:cover;display:block}

/* ===== Combined Create Post composer ===== */
.cmp-modal .modal-head{display:none}
.cmp-modal .modal-body{padding:0}
.cmp{display:flex;flex-direction:column}
.av-44{width:44px;height:44px}
.cmp-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cmp-who{flex:1;min-width:0;line-height:1.2}.cmp-who b{display:inline}
.cmp-feel-lbl{color:var(--ink-3);font-weight:600}
.cmp-postbtn{border-radius:999px;padding:9px 26px}
.cmp-text{width:100%;border:0;outline:0;background:none;color:var(--ink);font-size:19px;line-height:1.5;padding:18px;min-height:120px;resize:none;font-family:inherit}
.cmp-text.cmp-text-colored{min-height:200px;border-radius:0;text-align:center;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center}
.cmp-patterns{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px}
.cmp-pat{width:44px;height:44px;border-radius:10px;border:2px solid transparent;cursor:pointer}
.cmp-pat.sel{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.cmp-poll{padding:0 18px 12px;display:flex;flex-direction:column;gap:8px}
.cmp-poll-add{align-self:flex-start;color:var(--blue);font-weight:700;background:none;border:0;cursor:pointer;padding:4px 0}
.cp-prev-grid{padding:0 18px}
.cmp-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);position:relative}
.cmp-bar-g{display:flex;align-items:center;gap:4px}
.cmp-ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;background:none;border:0;font-size:20px;font-weight:800;transition:background .12s}
.cmp-ic:hover{background:var(--canvas)}
.cmp-ic svg{width:22px;height:22px}
.cmp-ic.cmp-expand svg{transition:transform .2s}
.cmp-ic.cmp-expand.open svg{transform:rotate(180deg)}
.cmp-emoji-pop{position:absolute;bottom:54px;right:48px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.3);padding:8px;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;z-index:20}
.cmp-emoji-pop button{font-size:22px;background:none;border:0;cursor:pointer;padding:3px;border-radius:8px}
.cmp-emoji-pop button:hover{background:var(--canvas)}
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 4px;padding:14px 12px;border-top:1px solid var(--line)}
.cmp-opt{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;background:none;border:0;cursor:pointer;color:var(--ink);font-weight:700;font-size:15px;text-align:left}
.cmp-opt:hover{background:var(--canvas)}
.cmp-opt-ic{width:30px;height:30px;flex:0 0 auto;color:var(--blue)}.cmp-opt-ic svg{width:26px;height:26px}
.cmp-sched{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-top:1px solid var(--line)}
.cmp-sched-l b{display:block;font-weight:800}.cmp-sched-l span{color:var(--ink-3);font-size:13.5px}
.cmp-feel-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cmp-feel-opt{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;font-weight:600;text-align:left}
.cmp-feel-opt:hover{background:var(--canvas)}.cmp-feel-opt span{font-size:20px}
@media(max-width:560px){.cmp-grid{grid-template-columns:1fr 1fr}}
/* colored post + feeling + poll in feed */
.post-colored{margin:0 0 4px;padding:36px 22px;min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:26px;line-height:1.35;white-space:pre-wrap;word-break:break-word}
.post-feeling{color:var(--ink-3);font-weight:500;margin-right:5px}
.post-poll{margin:2px 16px 10px;display:flex;flex-direction:column;gap:8px}
.poll-opt{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);cursor:pointer;font-weight:600;text-align:left}
.poll-opt:hover{border-color:var(--blue)}
.poll-opt.voted{border-color:var(--blue)}
.poll-fill{position:absolute;left:0;top:0;bottom:0;background:var(--blue-soft);width:0;transition:width .3s;z-index:0}
.poll-opt.voted .poll-fill{background:var(--blue-soft-2,rgba(79,123,255,.25))}
.poll-label,.poll-pct{position:relative;z-index:1}
.poll-pct{color:var(--ink-3);font-weight:800}
.poll-total{color:var(--ink-3);font-size:13px;padding-left:2px}

/* ===== Edit post modal (photo grid) ===== */
.ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ep-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-3)}
.ep-thumb img{width:100%;height:100%;object-fit:cover}
.ep-rm{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.ep-rm:hover{background:#e23a3a}

/* ===== Friend-requests dropdown ===== */
.fr-back{position:fixed;inset:0;z-index:129}
.fr-pop{position:fixed;z-index:130;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.32);overflow:hidden;max-height:80vh;display:flex;flex-direction:column;animation:pmIn .12s ease}
.fr-head{font-weight:800;font-size:16px;padding:14px 16px;border-bottom:1px solid var(--line)}
.fr-list{overflow-y:auto;padding:6px}
.fr-empty{padding:26px 16px;text-align:center}
.fr-item{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px}
.fr-item:hover{background:var(--canvas)}
.fr-av img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--surface-3)}
.fr-info{flex:1;min-width:0;line-height:1.25}
.fr-info b{font-size:14.5px}.fr-info .muted{display:block;font-size:12.5px;margin-bottom:8px}
.fr-acts{display:flex;gap:8px}
.fr-acts .btn{padding:7px 0;flex:1;font-size:13.5px}

/* ===== Mobile pull-to-refresh ===== */
html{overscroll-behavior-y:contain}   /* suppress the browser's own pull-to-refresh so ours is the only one */
.ptr-ind{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-64px);z-index:200;width:42px;height:42px;border-radius:50%;background:var(--surface);box-shadow:0 4px 18px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
.ptr-ind.on{opacity:1}
.ptr-spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%}
.ptr-ind.ready{box-shadow:0 4px 22px rgba(79,123,255,.5)}
.ptr-ind.ready .ptr-spin{border-color:var(--blue-soft);border-top-color:var(--blue)}
.ptr-ind.spinning{transition:transform .25s}
.ptr-ind.spinning .ptr-spin{animation:spin .7s linear infinite}

/* ===== Messenger thread — Telegram-style green/doodle theme ===== */
.msgr-thread{
  --tg-grad:linear-gradient(155deg,#a6ce80 0%,#c4dd95 48%,#e9ef9d 100%);
  --tg-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23315a1c' stroke-opacity='0.12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 30c-3-4-10-3-10 2 0 5 10 10 10 10s10-5 10-10c0-5-7-6-10-2z'/%3E%3Ccircle cx='92' cy='24' r='9'/%3E%3Cpath d='M88 24h8M92 20v8'/%3E%3Cpath d='M60 64l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Ccircle cx='30' cy='92' r='9'/%3E%3Cpath d='M26 94c2 2 6 2 8 0'/%3E%3Ccircle cx='27' cy='90' r='1'/%3E%3Ccircle cx='33' cy='90' r='1'/%3E%3Cpath d='M104 86c-3-4-10-3-10 2 0 5 10 9 10 9s10-4 10-9c0-5-7-6-10-2z'/%3E%3Cpath d='M104 36l4 4-4 4-4-4z'/%3E%3C/g%3E%3C/svg%3E");
  background:var(--tg-doodle) repeat, var(--tg-grad);
}
/* header → translucent bar with a name pill */
.msgr-thread .msgr-th-head{background:rgba(255,255,255,.32);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.35)}
.msgr-thread .msgr-back{background:rgba(255,255,255,.6);border-radius:50%;color:#2c4a1c}
.msgr-thread .msgr-th-user{background:rgba(255,255,255,.55);border-radius:999px;padding:6px 16px 6px 8px;box-shadow:0 2px 8px rgba(40,70,20,.12)}
.msgr-thread .msgr-th-user b{color:#1d3310}
.msgr-thread .msgr-th-user i{color:#3f8e3f;font-weight:700}
.msgr-thread .msgr-th-user img{box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.msgr-thread .msgr-th-more{background:rgba(255,255,255,.55);border-radius:50%;color:#2c4a1c}
/* bubbles on the green background */
.msgr-thread .msgr-msgs .bubble-row.them .bubble{background:rgba(255,255,255,.96);color:#1b2c12;box-shadow:0 1px 2px rgba(30,50,15,.12)}
.msgr-thread .msgr-msgs .bubble-row.me .bubble{background:rgba(72,118,64,.92);color:#fff;box-shadow:0 1px 2px rgba(30,50,15,.18)}
.msgr-thread .msgr-msgs .bubble time{opacity:.7}
.msgr-thread .msgr-th-empty,.msgr-thread .msgr-th-empty *{color:#2c4a1c}
.msgr-thread .msgr-th-empty{background:rgba(255,255,255,.45);border-radius:14px;padding:10px 16px;align-self:center;margin:auto;font-weight:600}
/* composer → soft translucent bar, rounded white input, circular buttons */
.msgr-thread .msgr-compose{background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.4);padding:10px 12px;gap:8px}
.msgr-thread .msgr-compose input,
.msgr-thread .msgr-compose input[type="text"],
.msgr-thread .msgr-compose>input:not([type]){background:#fff;border:0;border-radius:999px;box-shadow:0 1px 4px rgba(30,50,15,.12);color:#1b2c12}
.msgr-thread .msgr-compose input:focus{background:#fff;box-shadow:0 0 0 2px rgba(95,160,82,.5)}
.msgr-thread .msgr-compose input::placeholder{color:#6f8a5e}
.msgr-thread .msgr-attach{background:rgba(255,255,255,.85);border:0;color:#3f7a2f;box-shadow:0 1px 4px rgba(30,50,15,.14)}
.msgr-thread .msgr-attach:hover{color:#2c5a1c;background:#fff}
.msgr-thread .msgr-send{background:#5fa052;color:#fff}
.msgr-thread .msgr-send:hover{filter:brightness(1.06)}

/* ===== Combined profile menu — bottom sheet on mobile ===== */
.nm-handle{width:42px;height:4px;border-radius:2px;background:var(--ink-3);opacity:.4;margin:2px auto 16px;display:none}
.nm-back .nm-user{background:transparent;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:6px 4px 18px;margin-bottom:8px}
.nm-back .nm-user img{box-shadow:0 0 0 2px #e0a32e}
.nm-back .nm-user b{font-size:21px}
.nm-role{color:#e0a32e;font-weight:800;font-size:14px}
.nm-list{display:flex;flex-direction:column;gap:2px}
.nm-item{display:flex;align-items:center;gap:16px;padding:15px 8px;font-weight:800;font-size:17px;color:var(--ink);text-align:left;background:none;border:0;cursor:pointer;border-radius:12px;width:100%}
.nm-item:hover{background:var(--surface-2)}
.nm-item:active{background:var(--surface-2)}
.nm-i{width:30px;flex:0 0 30px;display:inline-flex;align-items:center;justify-content:center;color:var(--blue)}
.nm-i svg{width:26px;height:26px}
.nm-item.nm-danger{color:#e0533a}.nm-item.nm-danger .nm-i{color:#e0533a}
.nm-item.nm-primary{color:var(--blue)}
.nm-sep{height:1px;background:var(--line);margin:8px 4px}
/* footer "Me" → user avatar */
.mob-me-av{width:24px;height:24px;border-radius:50%;object-fit:cover}
.mob-nav .mob-me.active .mob-me-av{box-shadow:0 0 0 2px var(--blue)}
@media(max-width:680px){
  .nm-panel{top:auto;right:0;left:0;bottom:0;width:100%;height:auto;max-height:88vh;border-radius:24px 24px 0 0;transform:translateY(100%);box-shadow:0 -14px 48px rgba(0,0,0,.42);padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 24px)}
  .nm-back.show .nm-panel{transform:translateY(0)}
  .nm-handle{display:block}
}

/* ===== Round-square profile icons (header + footer) + 2-column pill menu (mobile) ===== */
.nav-avatar{border-radius:30%}
.mob-me-av{width:26px;height:26px;border-radius:30%;object-fit:cover;border:1.5px solid var(--surface);box-shadow:0 0 0 1.5px var(--ink-3)}
.mob-nav .mob-me.active .mob-me-av{box-shadow:0 0 0 2px var(--blue)}
@media(max-width:680px){
  .nm-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .nm-item{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:13px 16px;font-size:15px;gap:10px;font-weight:700}
  .nm-item:hover,.nm-item:active{background:var(--canvas);border-color:var(--blue)}
  .nm-i{flex:0 0 24px;width:24px}.nm-i svg{width:22px;height:22px}
  .nm-sep{grid-column:1 / -1;height:2px;background:transparent;margin:2px 0}
  .nm-item.nm-danger{grid-column:1 / -1;justify-content:center;background:rgba(224,83,58,.12);border-color:rgba(224,83,58,.35)}
}

/* ===== Verified blue tick (post header) ===== */
.ver-tick{display:inline-block;width:19px;height:19px;vertical-align:-4px;margin-left:4px;flex:0 0 auto;object-fit:contain}
.pd-name-row h1 .ver-tick{width:26px;height:26px;vertical-align:-5px;margin-left:7px}
.who a b{display:inline}

/* ===== Admin Users Stats ===== */
.ustat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.ustat{display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:18px 20px;transition:transform .15s,box-shadow .15s,border-color .15s}
.ustat[href]:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18);border-color:var(--blue)}
.ustat-ic{width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);color:var(--blue)}
.ustat-ic svg{width:24px;height:24px}
.ustat-m b{display:block;font-size:26px;font-weight:900;line-height:1.1}
.ustat-m span{color:var(--ink-3);font-size:13.5px}

/* ===== List Users (redesign) ===== */
.ul-stats{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.ul-stats{grid-template-columns:1fr 1fr}}
.ul-name{display:inline-flex;align-items:center;gap:9px;color:var(--blue);font-weight:700}
.ul-name img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.ul-name:hover{text-decoration:underline}
.ul-link{color:var(--blue)}.ul-link:hover{text-decoration:underline}
.ul-table .ver-tick{width:16px;height:16px;margin-left:4px}
.ul-table th,.ul-table td{white-space:nowrap}

/* ===== Users Stats (date-range table) ===== */
.cms-head-acts{display:flex;gap:10px;align-items:center}
.us-reset{background:#e2453f;color:#fff}.us-reset:hover{filter:brightness(1.06)}
.us-reset svg{width:16px;height:16px}
.us-filters{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.us-col{flex:1 1 320px;min-width:270px}
.us-row{display:flex;gap:8px;align-items:center}
.us-row .set-input{flex:1;min-width:0}
.us-row .btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.us-row input[type=date]{flex:1}

/* ===== Users Groups (System + Custom) ===== */
.ug-h{font-size:18px;font-weight:800;margin:6px 0 14px}
.ug-perm{color:var(--blue)}.ug-perm:hover{text-decoration:underline}
.ug-manage{display:inline-flex;width:38px;height:38px;border-radius:50%;background:#2aa9bf;color:#fff;align-items:center;justify-content:center}
.ug-manage:hover{filter:brightness(1.08)}
.ug-manage svg{width:20px;height:20px}

/* ===== Permissions Groups ===== */
.pg-type{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin:18px 0 8px}
.perm-ed{display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow:auto;padding-right:4px}
.perm-sec h4{font-size:13px;font-weight:800;margin:0 0 8px;color:var(--ink-2)}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.perm-row{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.perm-row input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--blue)}
@media(max-width:560px){.perm-grid{grid-template-columns:1fr}}

/* ===== Permissions Group form (Add New / Edit) ===== */
.pg-back{background:var(--surface-3,#3a3b3e);color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.pg-back:hover{filter:brightness(1.1)}
.pg-form{max-width:880px}
.perm-shead{font-size:12.5px;font-weight:800;letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase;margin:26px 0 6px;padding-top:18px;border-top:1px solid var(--line)}
.perm-shead:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.perm-field{display:grid;grid-template-columns:200px 1fr;gap:10px 18px;align-items:start;padding:12px 0}
.perm-field>label{font-weight:700;font-size:14.5px;padding-top:9px}
.perm-field-in{min-width:0}
.perm-field-in .set-input{width:100%}
.perm-hint{color:var(--ink-3);font-size:13px;margin-top:6px}
.perm-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line)}
.perm-toggle-l{display:flex;align-items:center;gap:16px;min-width:0}
.perm-toggle-ic{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;color:#6c63ff}
.perm-toggle-ic svg{width:30px;height:30px}
.perm-toggle-tx{min-width:0}
.perm-toggle-tx b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.perm-toggle-tx span{color:var(--ink-3);font-size:13.5px}
.perm-badge{display:inline-block;font-size:11px;font-weight:700;color:#7c83ff;background:rgba(108,99,255,.16);padding:1px 7px;border-radius:6px;vertical-align:middle;margin-left:4px}
/* iOS-style switch */
.perm-switch{flex:0 0 auto;cursor:pointer;display:inline-block}
.perm-switch input{position:absolute;opacity:0;width:0;height:0}
.perm-sw{display:block;width:48px;height:27px;border-radius:14px;background:#54565b;position:relative;transition:background .18s}
.perm-sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .18s}
.perm-switch input:checked + .perm-sw{background:#6c63ff}
.perm-switch input:checked + .perm-sw::after{transform:translateX(21px)}
.perm-switch input:focus-visible + .perm-sw{box-shadow:0 0 0 3px rgba(108,99,255,.4)}
.perm-sub{padding:6px 0 10px;border-bottom:1px solid var(--line)}
.perm-lvl{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;margin:16px 0 2px}
.pg-form-foot{padding:22px 0 6px}
.pg-form-foot .btn{min-width:150px}
@media(max-width:620px){.perm-field{grid-template-columns:1fr;gap:4px}.perm-field>label{padding-top:0}.perm-toggle-tx b{font-size:15px}}

/* ===== Profile menu — wallet + points balance pills ===== */
/* Wallet & Points cards — vivid gradient cards with white content: look sharp on both light and dark panels */
.nm-bal{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 18px 14px}
.nm-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:16px;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.22)}
.nm-card-wallet{background:linear-gradient(135deg,#16b981,#0e9f6e 52%,#0a7a55)}
.nm-card-points{background:linear-gradient(135deg,#fbb534,#f5860f 52%,#e15a0c)}
.nm-card::after{content:'';position:absolute;right:-22px;top:-26px;width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.nm-card::before{content:'';position:absolute;left:-16px;bottom:-30px;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.nm-card-ic{position:relative;z-index:1;width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.nm-card-ic svg{width:22px;height:22px}
.nm-card-tx{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;line-height:1.15}
.nm-card-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.82}
.nm-card-val{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ===== Share panel ("Share to" bottom sheet) ===== */
.shp-back{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.shp-back.show{opacity:1}
.shp{width:100%;max-width:600px;background:var(--surface,#1f2023);border-radius:20px 20px 0 0;padding:18px 0 calc(16px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(0,0,0,.45)}
.shp-back.show .shp{transform:translateY(0)}
@media(min-width:680px){.shp-back{align-items:center}.shp{border-radius:20px;transform:translateY(24px)}.shp-back.show .shp{transform:none}}
.shp-head{display:flex;align-items:center;justify-content:center;position:relative;padding:2px 18px 14px;min-height:30px}
.shp-title{font-size:19px;font-weight:800}
.shp-x,.shp-back-btn{position:absolute;top:-2px;background:none;border:0;color:var(--ink-2);cursor:pointer;padding:6px;display:flex}
.shp-x{right:14px}.shp-back-btn{left:14px}
.shp-x svg,.shp-back-btn svg{width:22px;height:22px}
.shp-row{display:flex;gap:4px;overflow-x:auto;padding:6px 14px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shp-row::-webkit-scrollbar{display:none}
.shp-item{flex:0 0 auto;width:80px;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 2px;color:var(--ink)}
.shp-ic{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .12s}
.shp-ic svg{width:30px;height:30px}
.shp-label{font-size:13px;text-align:center;line-height:1.2;color:var(--ink-2)}
.shp-item:active .shp-ic{transform:scale(.9)}
/* Send-to-friends sub-view */
.shp-search{padding:2px 18px 10px}
.shp-search input{width:100%;background:var(--surface-2,#2a2b2e);border:1px solid var(--line);border-radius:12px;padding:11px 14px;color:var(--ink);font-size:15px;outline:none}
.shp-search input:focus{border-color:var(--blue)}
.shp-people{max-height:46vh;overflow-y:auto;padding:0 10px 4px}
.shp-person{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:9px 10px;border-radius:12px;color:var(--ink);text-align:left}
.shp-person:hover{background:var(--surface-2,#2a2b2e)}
.shp-person img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.shp-person-n{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.shp-person-n b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shp-person-n i{font-style:normal;color:var(--ink-3);font-size:13px}
.shp-send-lbl{font-weight:800;color:var(--blue);font-size:14px;flex:0 0 auto}
.shp-person.done{opacity:.65}
.shp-person.done .shp-send-lbl{color:#22c55e}
.shp-empty{padding:24px;text-align:center}

/* ---------- Admin datatable (.aue-dt) — shared by Users/Permissions + Money/CMS admin tables (ported from beta) ---------- */
.aue-dt-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.aue-dt-show,.aue-dt-search{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:14px;font-weight:600}
.aue-dt-show select{width:auto;padding:9px 30px 9px 12px}
.aue-dt-search input{width:230px;max-width:48vw}
.aue-dt-wrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.aue-dt{width:100%;border-collapse:collapse;min-width:580px}
.aue-dt th,.aue-dt td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle}
.aue-dt tbody tr:last-child td{border-bottom:0}
.aue-dt th{background:var(--surface-2);font-weight:800;cursor:pointer;white-space:nowrap;user-select:none}
.aue-dt th:hover{color:var(--blue)}
.aue-dt-ar{font-size:11px;opacity:.8}
.aue-dt-ar.dim{opacity:.3}
.aue-dt tbody tr:hover{background:rgba(127,127,127,.06)}
.aue-dt-idc{text-align:center;font-weight:700;width:56px}
.aue-dt-actc{text-align:center;width:84px}
.aue-dt-del{width:34px;height:34px;border-radius:50%;background:#e0455e;color:#fff;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:filter .15s}
.aue-dt-del:hover{filter:brightness(1.08)}
.aue-dt-del svg{width:15px;height:15px}
.aue-dt-empty{padding:34px 16px;text-align:center;color:var(--ink-3)}
.aue-dt-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.aue-dt-info{color:var(--ink-3);font-size:14px}
.aue-dt-pages{display:flex;gap:6px;flex-wrap:wrap}
.aue-dt-pg{padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink-3);cursor:pointer;font-weight:700;font-size:14px}
.aue-dt-pg.num{color:var(--blue)}
.aue-dt-pg.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.aue-dt-pg.disabled{opacity:.5;cursor:not-allowed;color:var(--ink-3)}
@media(max-width:680px){.aue-dt-top,.aue-dt-foot{flex-direction:column;align-items:stretch}.aue-dt-search input{width:100%;max-width:none}}

/* ===== Group page (redesigned, two-column) ===== */
.gp-wrap{display:grid;grid-template-columns:360px 1fr;gap:18px;max-width:1200px;margin:0 auto;padding:18px;align-items:start}
@media(max-width:900px){.gp-wrap{grid-template-columns:1fr}}
.gp-side{display:flex;flex-direction:column;gap:16px}
.gp-side>.card,.gp-main>.card{background:var(--surface,#1b1c1f);border:1px solid var(--line);border-radius:16px}
.gp-card{overflow:hidden;padding-bottom:18px}
.gp-cover{position:relative;height:170px;background:var(--surface-2,#26282c)}
.gp-cover-img{width:100%;height:100%;object-fit:cover;display:block}
.gp-cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 45%)}
.gp-cover-ctrl{position:absolute;top:12px;right:12px;display:flex;gap:8px}
.gp-cc-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(20,20,22,.7);color:#fff;border:0;border-radius:9px;padding:7px 11px;font-size:13.5px;font-weight:600;cursor:pointer}
.gp-cc-btn:hover{background:rgba(20,20,22,.92)}
.gp-cc-btn svg{width:17px;height:17px}
.gp-cc-ico{padding:7px}
.gp-av-wrap{position:relative;width:120px;margin:-60px auto 0;z-index:2}
.gp-av{display:flex;width:120px;height:120px;border-radius:50%;background:var(--surface-2,#33363b);border:5px solid var(--surface,#1b1c1f);align-items:center;justify-content:center;overflow:hidden;color:var(--ink-3)}
.gp-av img{width:100%;height:100%;object-fit:cover}
.gp-av svg{width:46px;height:46px}
.gp-av-cam{position:absolute;right:4px;bottom:6px;width:34px;height:34px;border-radius:50%;background:#15171a;border:2px solid var(--surface,#1b1c1f);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.gp-av-cam svg{width:17px;height:17px}
.gp-name{text-align:center;font-size:26px;font-weight:800;margin:12px 0 6px;display:flex;align-items:center;justify-content:center;gap:5px}
.gp-meta{color:var(--ink-2);font-size:14.5px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:0 16px;line-height:1.6}
.gp-meta-i{display:inline-flex;align-items:center;gap:5px}
.gp-meta-i svg{width:15px;height:15px}
.gp-meta b{color:var(--ink)}
.gp-dot{color:var(--ink-3)}
.gp-reviews{text-align:center;color:var(--ink-2);font-size:14.5px;margin-top:5px}
.gp-acts{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:16px;padding:0 16px}
.gp-join{flex:1;max-width:170px;border:0;border-radius:11px;padding:12px 16px;font-size:15.5px;font-weight:700;cursor:pointer;background:var(--blue);color:#fff;transition:filter .12s}
.gp-join:hover{filter:brightness(1.05)}
.gp-join.joined{background:#27ae60;color:#fff}
.gp-boost{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:11px;padding:12px 18px;font-size:15.5px;font-weight:700;cursor:pointer;background:#f3b53c;color:#3a2c00}
.gp-boost:hover{filter:brightness(1.04)}
.gp-boost svg{width:18px;height:18px}
.gp-more{width:46px;height:46px;flex:0 0 46px;border:0;border-radius:50%;background:var(--surface-2,#2b2d31);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.gp-more svg{width:20px;height:20px}
.gp-search{display:flex;align-items:center;gap:10px;padding:12px}
.gp-search input{flex:1;background:var(--surface-2,#26282c);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink);font-size:15px;outline:none}
.gp-search input:focus{border-color:var(--blue)}
.gp-q-btn{width:48px;height:46px;flex:0 0 48px;border:0;border-radius:12px;background:var(--blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gp-q-btn svg{width:20px;height:20px}
.gp-invite{padding:16px}
.gp-invite h3{font-size:18px;font-weight:800;margin:0 0 12px}
.gp-inv{display:flex;align-items:center;gap:11px;padding:8px 0}
.gp-inv>a{flex:0 0 auto;display:block}
.gp-inv>a img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.gp-inv-n{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px;overflow:hidden}
.gp-inv-n a{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-inv-n .ver-tick{width:16px;height:16px}
.gp-pro{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:#ff5a3c;border:1px solid #ff5a3c;border-radius:9px;padding:1px 7px;flex:0 0 auto}
.gp-inv-btn{flex:0 0 auto;border:1.5px solid var(--blue);background:none;color:var(--blue);border-radius:18px;padding:6px 18px;font-weight:700;font-size:14px;cursor:pointer}
.gp-inv-btn:hover{background:var(--blue);color:#fff}
.gp-inv-btn.done{border-color:var(--ink-3);color:var(--ink-3);cursor:default}
.gp-inv-empty{padding:8px 0}
.gp-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.gp-tabs{display:flex;gap:6px;padding:10px;overflow-x:auto;scrollbar-width:none}
.gp-tabs::-webkit-scrollbar{display:none}
.gp-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-radius:12px;padding:11px 18px;color:var(--ink-2);font-size:15.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.gp-tab svg{width:20px;height:20px}
.gp-tab.active{background:var(--surface-2,#2b2d31);color:var(--ink)}
.gp-tab-ico{margin-left:auto;padding:11px}
.gp-composer{display:flex;align-items:center;gap:11px;padding:14px}
.gp-comp-av img{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block}
.gp-composer textarea{flex:1;background:var(--surface-2,#26282c);border:1px solid var(--line);border-radius:22px;padding:12px 16px;color:var(--ink);font-size:15px;resize:none;outline:none;font-family:inherit;height:46px}
.gp-composer textarea:focus{border-color:var(--blue)}
.gp-c-photo{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:50%;background:var(--surface-2,#2b2d31);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.gp-c-photo svg{width:20px;height:20px}
.gp-c-thumb{width:42px;height:42px;border-radius:8px;object-fit:cover}
.gp-filterbar{padding:10px}
.gp-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.gp-chips::-webkit-scrollbar{display:none}
.gp-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:var(--surface-2,#26282c);border:0;border-radius:10px;padding:9px 16px;color:var(--ink-2);font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.gp-chip.active{background:var(--blue);color:#fff}
.gp-country{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;font-size:15px;padding:0 4px}
.gp-country svg{width:18px;height:18px}
.gp-menu{position:absolute;z-index:9000;background:var(--surface,#1b1c1f);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.4);padding:6px;min-width:180px;display:flex;flex-direction:column}
.gp-menu button{text-align:left;background:none;border:0;color:var(--ink);padding:10px 14px;border-radius:8px;font-size:14.5px;cursor:pointer}
.gp-menu button:hover{background:var(--surface-2,#26282c)}
.gp-menu-danger{color:#e2453f!important}

/* ===== Cover drag-to-reposition ===== */
.cover-reposing{cursor:grab}
.cover-reposing img{cursor:grab;-webkit-user-drag:none;user-select:none}
.cover-grabbing,.cover-grabbing img{cursor:grabbing!important}
.cover-reposing .gp-cover-ctrl,.cover-reposing .pp-cover-ctrl{display:none}
.cover-repos-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:linear-gradient(transparent,rgba(0,0,0,.72));z-index:6}
.cover-repos-hint{color:#fff;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.cover-repos-hint svg{width:18px;height:18px}
.cover-repos-acts{display:flex;gap:8px;flex:0 0 auto}
.cover-repos-bar .btn{padding:8px 16px}
.cover-repos-bar .btn-ghost{background:rgba(255,255,255,.18);color:#fff}
.pp-cover-ctrl{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:3}
.pp-cover-ctrl .pp-cover-edit{position:static}
.pp-cover-move{padding:8px!important}
.pp-cover-move svg{width:18px;height:18px}

/* ===== Page view (redesigned, per PDF) ===== */
.pp2-wrap{max-width:1200px;margin:0 auto;padding:0 0 18px}
.pp2-head{border-radius:0 0 16px 16px;overflow:visible;margin-bottom:18px;background:var(--surface,#1b1c1f);padding:0}
.pp2-cover{border-radius:0}
.pp2-id{display:flex;align-items:center;gap:18px;padding:14px 24px 4px;flex-wrap:wrap}
.pp2-av-wrap{position:relative;flex:0 0 auto;margin-top:-66px}
.pp2-av{display:flex;width:120px;height:120px;border-radius:50%;background:var(--surface-2,#33363b);border:5px solid var(--surface,#1b1c1f);align-items:center;justify-content:center;overflow:hidden;color:var(--ink-3)}
.pp2-av img{width:100%;height:100%;object-fit:cover}
.pp2-av svg{width:46px;height:46px}
.pp2-av-cam{position:absolute;right:4px;bottom:8px;width:34px;height:34px;border-radius:50%;background:#15171a;border:2px solid var(--surface,#1b1c1f);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pp2-av-cam svg{width:17px;height:17px}
.pp2-id-info{flex:1;min-width:0}
.pp2-id-info h1{display:flex;align-items:center;gap:6px;font-size:30px;font-weight:800;margin:0}
.pp2-handle{color:var(--ink-3);font-size:15px}
.pp2-id-acts{display:flex;align-items:center;gap:10px}
.pp2-like{padding:11px 22px;font-size:15.5px;border-radius:11px;display:inline-flex;align-items:center;gap:7px}
.pp2-like svg{width:18px;height:18px}
.pp2-more{width:46px;height:46px;flex:0 0 46px;border:0;border-radius:50%;background:var(--surface-2,#2b2d31);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pp2-more svg{width:20px;height:20px}
.pp2-tabs{display:flex;gap:6px;padding:14px 16px 10px;overflow-x:auto;scrollbar-width:none;justify-content:center;flex-wrap:wrap}
.pp2-tabs::-webkit-scrollbar{display:none}
.pp2-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-radius:20px;padding:10px 18px;color:var(--ink-2);font-size:15.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.pp2-tab svg{width:20px;height:20px}
.pp2-tab.active{background:var(--surface-2,#2b2d31);color:var(--ink)}
.pp2-body{display:grid;grid-template-columns:340px 1fr;gap:18px;padding:0 18px;align-items:start}
@media(max-width:900px){.pp2-body{grid-template-columns:1fr}}
.pp2-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.pp2-side>.card{background:var(--surface,#1b1c1f);border:1px solid var(--line);border-radius:16px;padding:16px}
.pp2-side>.gp-search{padding:12px}
.pp2-about h3,.pp2-invite h3,.pp2-events h3,.pp2-photos h3,.pp2-invite-full h3{font-size:18px;font-weight:800;margin:0 0 12px}
.pp2-bio{color:var(--ink);margin:0 0 12px;font-size:15px}
.pp2-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pp2-card-head h3{margin:0}
.pp2-seeall{color:var(--blue);font-weight:700;font-size:14px;cursor:pointer}
.pp2-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.pp2-ev{display:flex;align-items:center;gap:11px;padding:7px 0}
.pp2-ev-av{width:42px;height:42px;flex:0 0 auto;border-radius:10px;overflow:hidden;background:var(--surface-2,#2b2d31);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.pp2-ev-av img{width:100%;height:100%;object-fit:cover}
.pp2-ev-av svg{width:20px;height:20px}
.pp2-ev-n{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pp2-ev-n b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp2-ev-n b a{color:var(--ink)}
.pp2-ev-n i{font-style:normal;color:var(--ink-3);font-size:13px}
.pp2-ev-btn{flex:0 0 auto;border:1.5px solid var(--blue);background:none;color:var(--blue);border-radius:18px;padding:6px 14px;font-weight:700;font-size:13.5px;cursor:pointer}
.pp2-ev-btn.on{background:var(--blue);color:#fff}
.pp2-ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pp2-ph{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-2,#2b2d31);display:block}
.pp2-ph img{width:100%;height:100%;object-fit:cover}

/* Telegram OTP sign-in button */
.tg-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:300px;max-width:100%;padding:11px 16px;border-radius:999px;background:#28a8e8;color:#fff;font-weight:700;font-size:14.5px;border:none;cursor:pointer;transition:filter .15s,transform .1s;margin-top:10px}
.tg-btn:hover{filter:brightness(1.06)}
.tg-btn:active{transform:scale(.98)}
.tg-btn svg{flex:0 0 18px}

/* Telegram phone geo badge */
.tg-geo{display:inline-block;margin-left:6px;font-size:13px;font-weight:700;color:var(--blue);vertical-align:middle}