@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-700.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================
   CryptoSeenzey Social
   Frosted glass surfaces floating over an open sky.
   ============================================================ */
:root{
  /* The shifu mark lives here exactly once; every place that shows it
     points at this variable instead of carrying its own copy. */
  --logo:url("/assets/img/logo.webp");
  /* trimmed square crop, so the mark fills the browser tab instead of
     sitting as a thin sliver inside it */
  --favicon:url("/assets/img/favicon.webp");

  --deep:#0c2340;
  --deep-2:#31527a;
  --mut:#5f7c9c;
  --brand:#1f5fbf;
  --brand-2:#3d86ee;
  --brand-3:#0d3f8f;
  --gold:#e2a416;
  --gold-2:#fff4d6;
  --up:#0f9d58;
  --down:#e0342b;

  --g-fill:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.62));
  --g-fill-2:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.44));
  --g-edge:rgba(255,255,255,.75);
  --g-lift:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.30),
           0 10px 34px rgba(8,34,72,.16);
  --g-lift-hi:inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.35),
              0 18px 48px rgba(8,34,72,.24);
  --blur:blur(26px) saturate(180%);
  --hair:rgba(12,35,64,.10);

  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:11px; --r-pill:999px;
  --spring:cubic-bezier(.34,1.4,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);

  --ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,system-ui,"Helvetica Neue",Arial,sans-serif;
  --ui-size:14px;
  --ui-weight:400;
  --ui-style:normal;
  --ui-deco:none;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--ui-font);
  font-size:var(--ui-size);
  font-weight:var(--ui-weight);
  font-style:var(--ui-style);
  text-decoration:var(--ui-deco);
  line-height:1.5;
  color:var(--deep);
  background:#4a90db;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.011em;
  min-height:100vh;
  position:relative;
}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;color:inherit}
::selection{background:rgba(31,95,191,.22)}
:focus-visible{outline:2.5px solid rgba(255,255,255,.95);outline-offset:2px;
  box-shadow:0 0 0 5px rgba(31,95,191,.35)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   GLASS PRIMITIVES
   ============================================================ */
.card{
  background:var(--g-fill);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--g-edge);
  box-shadow:var(--g-lift);
  border-radius:var(--r-lg);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.modal,.menu,.msg-wrap,.sresults,.emo-pop{background:rgba(255,255,255,.95)}
}
.card-h{padding:13px 16px 11px;border-bottom:1px solid var(--hair);
  font-size:12.5px;font-weight:660;letter-spacing:.005em;color:var(--deep-2);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-b{padding:14px 16px}

/* Cursor-tracked specular highlight: the light bends toward the pointer,
   the way it does across a curved glass surface. */
.spec{position:relative;isolation:isolate}
.spec::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.62),rgba(255,255,255,.16) 44%,transparent 72%);
  opacity:0;transition:opacity .4s var(--ease)}
.spec:hover::after{opacity:1}
@media(hover:none){.spec::after{display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;line-height:1.4;white-space:nowrap;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:#fff;border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 6px 18px rgba(21,74,155,.34);
  transition:transform .28s var(--spring), box-shadow .28s var(--ease), filter .2s ease}
.btn:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 28px rgba(21,74,155,.42)}
.btn:active{transform:scale(.965);box-shadow:inset 0 2px 6px rgba(8,34,72,.30)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.55),transparent 70%);
  opacity:0;transition:opacity .35s var(--ease)}
.btn:hover::after{opacity:1}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;filter:saturate(.5)}
.btn[disabled]::after{display:none}

.btn-lite{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.68));
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  color:var(--brand-3);border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 5px 16px rgba(8,34,72,.14)}
.btn-lite:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 12px 26px rgba(8,34,72,.20)}
.btn-gold{background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.14));
  color:var(--deep);
  border-color:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), 0 6px 18px rgba(12,35,64,.16)}
.btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 28px rgba(190,140,20,.5)}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.44);
  box-shadow:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-ghost:hover{background:rgba(255,255,255,.28);box-shadow:0 8px 22px rgba(8,34,72,.22)}
.btn-lg{padding:12px 24px;font-size:15px}
.btn-sm{padding:5px 12px;font-size:12.5px}
.btn-block{width:100%}
.btn-google{background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
  color:var(--deep);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), 0 5px 16px rgba(8,34,72,.14)}
.btn-google:hover{box-shadow:inset 0 1px 0 #fff, 0 12px 26px rgba(8,34,72,.22)}
.gicon{width:17px;height:17px;flex:0 0 17px}
.btn.busy{pointer-events:none;opacity:.72}
.btn.busy .gicon{animation:gspin .9s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}

/* ---------- fields ---------- */
.fld{width:100%;padding:11px 14px;border-radius:var(--r-md);font-size:14px;
  background:rgba(255,255,255,.72);color:var(--deep);
  border:1px solid rgba(12,35,64,.12);
  box-shadow:inset 0 1px 2px rgba(8,34,72,.06);
  transition:border-color .2s,box-shadow .2s,background .2s}
.fld::placeholder{color:#93a8bf}
.fld:focus{outline:none;background:rgba(255,255,255,.96);border-color:var(--brand-2);
  box-shadow:0 0 0 4px rgba(61,134,238,.20)}
.lbl{display:block;font-size:12px;font-weight:640;color:var(--deep-2);margin:0 0 6px}

/* ============================================================
   SKY + COINS   (clouds removed)
   ============================================================ */
.sky{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:#4a90db}
.sky-day{position:absolute;inset:0;
  background:
    radial-gradient(62vw 62vh at 84% -8%, rgba(255,247,220,.62), rgba(255,247,220,0) 62%),
    linear-gradient(180deg,#a6dbfa 0%,#7cc4f3 15%,#5aa6e6 40%,#4a90db 64%,#3d7fcb 100%)}
.sky-sun{position:absolute;top:-15%;right:2%;width:clamp(300px,44vw,580px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,250,224,.78),rgba(255,247,214,0) 66%)}
.sky-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,26,54,.20), rgba(7,26,54,.06) 50%, rgba(7,26,54,0) 80%)}
body.no-sky .sky-day{background:linear-gradient(180deg,#eaf1f9,#dde8f4)}
body.no-sky .sky-sun,body.no-sky .coin-layer{display:none}

/* Pinned to the viewport like the sky. Anchoring to the document meant the
   same percentages became a tight cluster on the short sign-in page and a
   sparse dusting on a long feed; this keeps the spacing identical everywhere. */
.coin-layer{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.coin{position:absolute;width:min(var(--sz,120px),22vw);border:none;padding:0;background:none;
  animation:coinBob var(--dur,7s) ease-in-out infinite;will-change:transform;
  pointer-events:auto;cursor:pointer}
.coin > i{display:block;width:100%;aspect-ratio:var(--ar,1);
  background:var(--img) center/contain no-repeat;
  filter:drop-shadow(0 12px 22px rgba(20,70,130,.42));
  transition:transform .55s var(--spring), filter .45s var(--ease)}
.coin:hover > i{transform:scale(1.16) rotate(-6deg);
  filter:drop-shadow(0 18px 32px rgba(20,70,130,.55)) brightness(1.07)}
.coin.spin > i{animation:coinSpin .75s var(--ease)}
@keyframes coinBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}
@keyframes coinSpin{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.28)}100%{transform:rotateY(360deg) scale(1)}}
@media(prefers-reduced-motion:reduce){
  .coin{animation:none!important}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media(max-width:1100px){.coin-narrow{display:none}}
@media(max-width:860px){.coin{width:min(var(--sz,120px),17vw);opacity:.82}}

/* ============================================================
   ENTRY GATE
   ============================================================ */
#gate{min-height:100vh;display:flex;flex-direction:column}
/* the sign-in page carries its own crest in the hero, so there is no top bar
   to repeat it — the artwork behind it is the frame now */
.gate-body{flex:1;max-width:520px;width:100%;margin:0 auto;
  padding:calc(46px + env(safe-area-inset-top)) 20px 60px;
  display:block;text-align:center}
.gate-hero{margin-bottom:30px}

.gate-pitch h1{font-family:'Poppins',var(--ui-font);font-weight:700;
  font-size:clamp(27px,5.4vw,40px);line-height:1.1;color:#fff;
  /* the old 22px-blur halo pooled into a dark silhouette behind the whole
     heading — a 1px hairline keeps the text readable without the blob */
  letter-spacing:-.024em;text-shadow:0 1px 2px rgba(8,30,66,.25)}
.gate-pitch h1 em{font-style:normal;color:#ffd97a}
.gate-pitch h1.welcome{display:flex;flex-direction:column;align-items:center;gap:15px}
.gate-pitch h1.welcome .wmark{display:block;flex:0 0 auto;width:76px;height:103px;
  background:var(--logo) center/contain no-repeat}
.gate-pitch h1.welcome span{min-width:0}
@media(max-width:560px){
  .gate-pitch h1.welcome{gap:12px}
  .gate-pitch h1.welcome .wmark{width:60px;height:81px}
}
.gate-pitch p.sub{margin:15px auto 0;font-size:15.5px;line-height:1.6;
  color:rgba(255,255,255,.93);max-width:50ch;text-shadow:0 1px 2px rgba(8,30,66,.22)}
.gate-note{margin-top:22px;font-size:13px;color:rgba(255,255,255,.86);
  text-shadow:0 1px 2px rgba(8,30,66,.22)}

.gate-form{padding:22px 24px 26px;text-align:left}
.gate-seg{margin:0 0 20px}
.gate-logo{display:flex;justify-content:center;margin-bottom:12px}
.gate-logo i{display:block;width:56px;height:76px;
  background:var(--logo) center/contain no-repeat;
  filter:drop-shadow(0 4px 12px rgba(8,34,72,.22))}
.gate-form h2{font-size:20px;font-weight:680;letter-spacing:-.024em;margin-bottom:16px;
  text-align:center}
.frow{margin-bottom:13px}
.frow.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.role-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.role-pick.four{grid-template-columns:repeat(4,1fr)}
.role-pick label{display:block;cursor:pointer}
.role-pick input{position:absolute;opacity:0;pointer-events:none}
.role-pick span{display:block;text-align:center;padding:11px 4px;border-radius:var(--r-md);
  font-size:12px;font-weight:620;color:var(--deep-2);line-height:1.3;
  background:rgba(255,255,255,.62);border:1px solid rgba(12,35,64,.10);
  transition:all .34s var(--spring)}
.role-pick span i{display:block;font-style:normal;font-size:17px;margin-bottom:3px}
.role-pick label:hover span{background:rgba(255,255,255,.92);transform:translateY(-2px)}
.role-pick input:checked + span{background:linear-gradient(180deg,var(--brand-2),var(--brand));
  border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(21,74,155,.36)}
.gate-sep{display:flex;align-items:center;gap:11px;margin:17px 0;color:var(--mut);font-size:12px}
.gate-sep::before,.gate-sep::after{content:"";flex:1;height:1px;background:var(--hair)}
.gate-err{background:rgba(224,52,43,.10);border:1px solid rgba(224,52,43,.30);color:#a8231b;
  padding:10px 13px;border-radius:var(--r-md);font-size:13px;margin-bottom:13px}
.gate-info{background:rgba(31,95,191,.09);border:1px solid rgba(31,95,191,.24);color:#1a4d9e;
  padding:10px 13px;border-radius:var(--r-md);font-size:12.5px;margin-bottom:13px;line-height:1.5}
/* ---------- forgot password: four pages (account → code → password → done) ---------- */
.fp{position:relative}
.fp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 0 14px}
.fp-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  border-radius:50%;color:var(--brand-3);background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.75);cursor:pointer;transition:all .28s var(--spring)}
.fp-back:hover{background:rgba(255,255,255,.92);transform:translateX(-2px)}
.fp-back .fic{width:18px;height:18px;stroke-width:2.2}
.fp-pages{position:relative}
.fp-page{display:none}
.fp-page.on{display:block;animation:fpIn .46s var(--spring) both}
.fp-page.on.back{animation-name:fpInBack}
@keyframes fpIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes fpInBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.fp-lead{margin:-6px 0 16px;font-size:13.5px;line-height:1.55;color:var(--deep-2);text-align:center}
.fp-lead b{color:var(--deep);word-break:break-all}
.fp-msg{display:none;padding:10px 13px;border-radius:var(--r-md);font-size:12.5px;line-height:1.5;margin:0 0 13px}
.fp-msg.bad{background:rgba(224,52,43,.10);border:1px solid rgba(224,52,43,.30);color:#a8231b}
.fp-msg.ok{background:rgba(31,95,191,.09);border:1px solid rgba(31,95,191,.24);color:#1a4d9e}
.fp-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 14px}
.fp-otp .fp-digit{min-width:0;padding:0;height:54px;text-align:center;font-size:22px;font-weight:700;
  font-variant-numeric:tabular-nums;border-radius:var(--r-md);caret-color:var(--brand)}
.fp-otp .fp-digit.has{background:rgba(255,255,255,.96);border-color:rgba(61,134,238,.55)}
.fp-links{display:flex;justify-content:center;gap:6px 22px;margin-top:12px;flex-wrap:wrap}
.fp-link{background:none;border:0;padding:4px 2px;font-size:12.5px;font-weight:620;color:var(--brand-3);
  cursor:pointer;border-radius:6px;font-variant-numeric:tabular-nums}
.fp-link:hover{text-decoration:underline}
.fp-link[disabled]{color:var(--mut);cursor:default;text-decoration:none}
.fp-link:focus-visible,.fp-back:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fp .cf-box{margin:12px 0 0}
#cfForgot.fp-hide{display:none}
.fp-done{text-align:center;padding:6px 0 2px}
.fp-check{width:86px;height:86px;margin:2px auto 18px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.58));
  border:1px solid rgba(255,255,255,.92);box-shadow:var(--g-lift)}
.fp-check svg{width:48px;height:48px;fill:none;stroke:var(--up);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.fp-page.on .fp-check{animation:fpPop .6s var(--spring) both}
.fp-page.on .fp-check path{stroke-dasharray:48;stroke-dashoffset:48;animation:fpDraw .5s var(--ease) .28s forwards}
@keyframes fpPop{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes fpDraw{to{stroke-dashoffset:0}}
.fp-done h2{margin-bottom:8px}
.fp-done .fp-lead{margin:0 0 20px}
@media(max-width:360px){.fp-otp{gap:6px}.fp-otp .fp-digit{height:48px;font-size:19px}}
@media(prefers-reduced-motion:reduce){
  .fp-page.on,.fp-page.on .fp-check{animation:none}
  .fp-page.on .fp-check path{animation:none;stroke-dashoffset:0}
}
html[data-theme="night"] .fp-back{background:rgba(255,255,255,.08);border-color:rgba(160,202,250,.22)}
html[data-theme="night"] .fp-back:hover{background:rgba(255,255,255,.16)}
html[data-theme="night"] .fp-otp .fp-digit.has{background:rgba(255,255,255,.14);border-color:var(--brand-2)}
html[data-theme="night"] .fp-check{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border-color:rgba(160,202,250,.28)}
html[data-theme="night"] .fp-msg.bad{background:rgba(255,111,99,.14);border-color:rgba(255,111,99,.34);color:#ffb3ab}
html[data-theme="night"] .fp-msg.ok{background:rgba(111,169,248,.14);border-color:rgba(111,169,248,.32);color:var(--brand-3)}

.gate-foot{text-align:center;padding:0 20px 34px;font-size:12.5px;color:rgba(255,255,255,.82);
  text-shadow:0 1px 12px rgba(8,30,66,.42)}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:660;font-size:16.5px;
  letter-spacing:-.024em;flex:0 0 auto}
.brand .bmark{width:32px;height:32px;flex:0 0 32px;display:block;
  background:var(--logo) center/contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(8,30,66,.38))}
.brand .bfull{display:inline}

/* ============================================================
   TOP CHROME
   ============================================================ */
.chrome{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.38);
  box-shadow:0 4px 26px rgba(8,34,72,.13)}
.chrome-in{max-width:1180px;margin:0 auto;padding:0 14px;height:58px;
  display:flex;align-items:center;gap:12px}
.chrome .brand{text-shadow:0 1px 10px rgba(8,30,66,.36)}

.searchbox[hidden]{display:none!important}
.searchbox{position:relative;flex:0 1 270px}
.searchbox input{width:100%;padding:8px 13px 8px 33px;border-radius:var(--r-pill);font-size:13.5px;
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.66);color:var(--deep);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:all .25s var(--ease)}
.searchbox input::placeholder{color:#6d87a4}
.searchbox input:focus{outline:none;background:rgba(255,255,255,.96);
  box-shadow:0 0 0 4px rgba(255,255,255,.42), 0 8px 22px rgba(8,34,72,.18)}
.searchbox .mag{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:13px;pointer-events:none;opacity:.6}
.sresults{position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--g-fill);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--g-edge);border-radius:var(--r-lg);
  box-shadow:0 18px 48px rgba(8,34,72,.28);
  max-height:340px;overflow:auto;display:none;z-index:70;padding:6px}
.sresults.on{display:block;animation:pop .28s var(--spring)}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.sres{display:flex;align-items:center;gap:10px;padding:9px 11px;width:100%;text-align:left;
  border-radius:var(--r-md);transition:background .2s}
.sres:hover{background:rgba(31,95,191,.10)}
.sres b{font-size:13.5px;display:block;font-weight:620}
.sres span{font-size:12px;color:var(--mut)}
.sempty{padding:18px;text-align:center;color:var(--mut);font-size:13px}

.cnav{margin-left:auto;display:flex;align-items:center;gap:3px}
.cnav-b{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 13px;border-radius:var(--r-pill);color:#fff;
  font-size:13px;font-weight:600;text-shadow:0 1px 8px rgba(8,30,66,.36);
  transition:all .32s var(--spring)}
.cnav-b i{font-style:normal;font-size:15px;line-height:1}
.cnav-b:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.cnav-b.on{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.76));
  color:var(--brand-3);text-shadow:none;
  box-shadow:inset 0 1px 0 #fff, 0 5px 16px rgba(8,34,72,.20)}
.pip{position:absolute;top:1px;right:4px;min-width:17px;height:17px;padding:0 5px;
  border-radius:var(--r-pill);background:linear-gradient(180deg,#ff5b52,#dc2f26);color:#fff;
  font-size:10px;font-weight:700;display:grid;place-items:center;text-shadow:none;
  border:1.5px solid rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(180,30,25,.42)}
.pip[data-n="0"],.pip:empty{display:none}
.me-btn{display:flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;
  border-radius:var(--r-pill);color:#fff;font-size:13px;font-weight:600;
  text-shadow:0 1px 8px rgba(8,30,66,.36);transition:all .32s var(--spring)}
.me-btn:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}

/* ---------- avatars ---------- */
.av{border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;font-weight:640;letter-spacing:-.02em;background:var(--brand);
  background-size:cover;background-position:center;user-select:none;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.78), 0 3px 10px rgba(8,34,72,.24)}
.av.sq{border-radius:var(--r-md)}
.av-20{width:20px;height:20px;font-size:9px}
.av-28{width:30px;height:30px;font-size:12px}
.av-36{width:38px;height:38px;font-size:14px}
.av-44{width:44px;height:44px;font-size:16px}
.av-56{width:58px;height:58px;font-size:21px}
.av-92{width:104px;height:104px;font-size:38px;
  box-shadow:0 0 0 4px rgba(255,255,255,.92), 0 10px 30px rgba(8,34,72,.34)}

/* ---------- role badges ---------- */
.rb{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:11px;font-weight:640;vertical-align:middle;line-height:1.6;
  border:1px solid;white-space:nowrap}
.rb-investor{background:rgba(15,157,88,.12);border-color:rgba(15,157,88,.28);color:#0b6b3d}
.rb-trader{background:rgba(31,95,191,.12);border-color:rgba(31,95,191,.28);color:#1a4d9e}
.rb-creator{background:rgba(226,164,22,.18);border-color:rgba(226,164,22,.36);color:#8a5c04}

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{max-width:1180px;margin:0 auto;padding:20px 14px 96px;
  display:grid;grid-template-columns:228px minmax(0,1fr) 268px;gap:18px;align-items:start}
/* Sticky, but NOT a scroll container: any overflow other than visible clips
   the cards' soft shadows into hard-edged smudges (the artefact under
   "Tickers in play" / "Who May Encourage You!"). The sidebars are short, so
   they simply stay put and let their shadows breathe. */
.col-l,.col-r{display:grid;gap:14px;position:sticky;top:78px;align-self:start}
/* Grid items default to min-width:auto — a floor equal to their content's
   natural width. One long @handle in the suggestions was enough to push the
   whole card 56px past its 340px column and off the screen. Zeroing the
   floor at every level lets the text ellipsise instead. */
.col-l > *,.col-r > *{min-width:0}
.ulist > .urow{min-width:0}
.view{display:none}
.view.on{display:block;animation:viewIn .4s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.mecard{overflow:hidden}
.mecard-top{padding:16px;display:flex;gap:12px;align-items:center;color:inherit;
  transition:background .25s}
.mecard-top:hover{background:rgba(255,255,255,.36)}
.mecard-top b{display:block;font-size:15px;font-weight:650;letter-spacing:-.016em;line-height:1.25}
.mecard-top span{display:block;font-size:12.5px;color:var(--mut)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;
  border-top:1px solid var(--hair)}
.stat{padding:11px 3px;border-right:1px solid var(--hair);color:inherit;
  transition:background .22s}
.stat:last-child{border-right:none}
.stat:hover{background:rgba(255,255,255,.44)}
.stat b{display:block;font-size:17px;font-weight:660;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{display:block;font-size:11px;color:var(--mut);font-weight:500;margin-top:1px}

.snav{padding:7px}
.snav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);
  font-size:14px;font-weight:560;color:var(--deep);transition:all .32s var(--spring)}
.snav a:hover{background:rgba(255,255,255,.58);transform:translateX(2px)}
.snav a.on{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(21,74,155,.32)}
.snav a i{font-style:normal;font-size:16px;width:19px;text-align:center}
.snav a .pipn{margin-left:auto;background:linear-gradient(180deg,#ff5b52,#dc2f26);color:#fff;
  font-size:10.5px;font-weight:700;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--r-pill);display:grid;place-items:center}
.snav a .pipn[data-n="0"]{display:none}

.ulist{display:grid;padding:6px}
.urow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);
  transition:background .22s}
.urow:hover{background:rgba(255,255,255,.48)}
.urow .un{min-width:0;flex:1}
.urow .un b{display:block;font-size:13.5px;font-weight:620;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow .un span{display:block;font-size:12px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tags{display:flex;flex-wrap:wrap;gap:7px;padding:14px}
.tag{padding:5px 12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:620;
  color:var(--brand-3);background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:all .34s var(--spring)}
.tag:hover{transform:translateY(-2px) scale(1.03);
  background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(21,74,155,.34)}
.tag small{opacity:.62;font-weight:500;margin-left:4px}

/* ============================================================
   COMPOSER
   ============================================================ */
.composer{margin-bottom:12px;overflow:hidden}
.comp-top{display:flex;gap:13px;padding:16px 16px 10px}
.rt{flex:1;min-height:56px;max-height:300px;overflow:auto;padding:10px 14px;
  border-radius:var(--r-md);font-size:15px;line-height:1.55;word-break:break-word;
  background:rgba(255,255,255,.58);border:1px solid rgba(12,35,64,.10);
  transition:all .25s var(--ease)}
.rt:focus{outline:none;background:rgba(255,255,255,.95);border-color:var(--brand-2);
  box-shadow:0 0 0 4px rgba(61,134,238,.18)}
.rt:empty::before{content:attr(data-ph);color:#93a8bf}
.rt u{text-decoration:underline}
.rt b,.rt strong{font-weight:700}
.comp-bar{display:flex;align-items:center;gap:7px;padding:10px 16px 14px;flex-wrap:wrap}
.fbtn{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:13.5px;color:var(--deep-2);line-height:1;
  background:rgba(255,255,255,.62);border:1px solid rgba(12,35,64,.09);
  transition:all .3s var(--spring)}
.fbtn:hover{background:rgba(255,255,255,.96);transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(8,34,72,.16)}
.fbtn:active{transform:scale(.92)}
.fbtn.on{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;
  border-color:transparent;box-shadow:0 5px 14px rgba(21,74,155,.34)}
.fbtn.b{font-weight:800}
.fbtn.i{font-style:italic;font-family:Georgia,"Times New Roman",serif}
.fbtn.u{text-decoration:underline}
.fsep{width:1px;height:20px;background:var(--hair);margin:0 3px}
.counter{margin-left:auto;display:flex;align-items:center;gap:10px}
/* the running character count was visual noise — it only shows up now when
   the person is about to run past the limit, which is the one moment it helps */
.cnum{display:none;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;
  min-width:30px;text-align:right;transition:color .2s}
.cnum.warn,.cnum.over{display:inline-block}
.cnum.warn{color:#c07a06;font-weight:650}
.cnum.over{color:var(--down);font-weight:700}
.ring{width:22px;height:22px;flex:0 0 22px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2.8}
.ring .bg{stroke:rgba(12,35,64,.14)}
.ring .fg{stroke:var(--brand-2);stroke-linecap:round;
  transition:stroke-dashoffset .3s var(--ease),stroke .25s}
.ring.warn .fg{stroke:var(--gold)}
.ring.over .fg{stroke:var(--down)}

.emo-pop{position:absolute;z-index:1700;padding:8px;display:none;
  grid-template-columns:repeat(8,1fr);gap:3px;max-width:308px;
  background:var(--g-fill);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--g-edge);border-radius:var(--r-lg);
  box-shadow:0 20px 50px rgba(8,34,72,.32)}
.emo-pop.on{display:grid;animation:pop .3s var(--spring)}
.emo-pop button{width:34px;height:34px;border-radius:var(--r-sm);font-size:19px;line-height:1;
  transition:all .22s var(--spring)}
.emo-pop button:hover{background:rgba(31,95,191,.14);transform:scale(1.22)}
.emo-pop button:active{transform:scale(.9)}

/* ============================================================
   POSTS
   ============================================================ */
.post{position:relative;margin-bottom:12px;overflow:hidden;
  transition:transform .42s var(--spring), box-shadow .42s var(--ease)}
.post:hover{transform:translateY(-2px);box-shadow:var(--g-lift-hi)}
.post-h{display:flex;gap:11px;padding:12px 14px 0;align-items:center}
.post-h .av-44{width:38px;height:38px;flex:0 0 38px;font-size:15px}
.post-id{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.post-id .tm{margin:0}
.post-id .nm{display:inline-flex}
.act.liked{color:#e0245e;--heart-fill:#e0245e}
.act.liked .fic{stroke:#e0245e}
.act.pop .fic{animation:heartPop .5s cubic-bezier(.32,1.6,.32,1)}
@keyframes heartPop{0%{transform:scale(.6)}45%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.act.pop .fic{animation:none}}
.pip-2,.pipn-2{left:auto;right:-4px;top:-3px;background:var(--gold)}
/* the floating Post button (X.com style) */
/* ---------- blurred edges behind media that does not fill the frame ---------- */
.cslide,.media.n1 > figure,.post-body>.media.n1 > figure,.media > figure{position:relative;overflow:hidden!important}
.media.n1,.post-body>.media.n1{overflow:hidden}
.mbg{position:absolute;inset:-12%;background:center/cover no-repeat;filter:blur(26px) saturate(1.25);opacity:.85;pointer-events:none}
.mbg.mbg-ready{filter:none;inset:0;opacity:.9;image-rendering:auto}   /* the tiny copy is blurry by itself */
html,body{touch-action:manipulation}   /* no double-tap zoom on posts; pinch still works */
.cslide img,.cslide video,.media.n1 img,.media.n1 video{position:relative}
@media(pointer:coarse),(max-width:820px){.mbg{filter:blur(8px) saturate(1.1);inset:-6%;opacity:.7}}
/* ---------- crop & fit ---------- */
.crop-ov{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;background:rgba(6,20,44,.62);padding:16px}
.crop-in{background:#fff;border-radius:18px;padding:14px;box-shadow:0 24px 60px rgba(6,20,44,.4);max-width:calc(100vw - 32px)}
.crop-top{display:flex;flex-direction:column;gap:2px;margin:2px 4px 10px;color:var(--deep)}
.crop-top span{font-size:12.5px;color:var(--mut)}
.crop-in{overflow:hidden}
.crop-frame{position:relative;border-radius:12px;overflow:hidden;background:#0c2340;margin:0 auto;touch-action:none;max-width:100%;cursor:grab}
.crop-frame:active{cursor:grabbing}
.crop-cv{display:block;width:100%;height:100%}
.crop-mask{position:absolute;inset:0;pointer-events:none}
.crop-frame.round .crop-mask{border-radius:50%;box-shadow:0 0 0 999px rgba(6,20,44,.55)}
.crop-frame.round{border-radius:12px}
.crop-btns{margin-top:12px}
.crop-btns{display:flex;justify-content:flex-end;gap:8px}
html[data-theme="night"] .crop-in{background:#12203a}
/* ---------- in-app browser notice ---------- */
.inapp-note{font-size:13px;line-height:1.45;padding:10px 12px;border-radius:12px;margin-bottom:10px;
  background:rgba(255,190,70,.16);border:1px solid rgba(255,170,40,.45);color:var(--deep)}
.inapp-note .btn{display:block;margin-top:8px}
/* ---------- confirm-password hint ---------- */
.pw-hint{display:block;font-size:12px;margin:-4px 0 6px;font-weight:600}
.pw-hint.ok{color:#0f9d58}.pw-hint.bad{color:#d63f5c}
.fld.bad{border-color:rgba(214,63,92,.6)!important}
.fld.good{border-color:rgba(15,157,88,.55)!important}
/* ---------- @mention list ---------- */
.mention-pop{position:fixed;z-index:1700;display:none;padding:6px;border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
  border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(6,20,44,.28);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-height:260px;overflow:auto}
.mention-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer}
.mention-row:hover{background:rgba(31,95,191,.10)}
.mention-t{min-width:0}
.mention-t b{display:block;font-size:14px;font-weight:650;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-t span{display:block;font-size:12px;color:var(--mut)}
html[data-theme="night"] .mention-pop{background:linear-gradient(160deg,rgba(18,32,54,.97),rgba(18,32,54,.9));border-color:rgba(160,202,250,.25)}
html[data-theme="night"] .mention-t b{color:#eaf3ff}
/* ---------- guest mode + intro ---------- */
body.guest .col-r{display:none!important}
.nm-anon{font-size:15px;font-weight:650;color:var(--deep);letter-spacing:.04em}
body.guest .post-menu{display:none}
.gate-err.info{background:rgba(31,95,191,.10);border-color:rgba(31,95,191,.28);color:#1a4d9e}
html[data-theme="night"] .gate-err.info{background:rgba(111,169,248,.14);border-color:rgba(111,169,248,.32);color:#cfe3ff}
body.guest .me-btn #meNameTop{opacity:.7}
body.guest .fab{display:grid}   /* the (+) stays; tapping it opens the gate */
#introScreen{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:#ffffff;
  color:var(--deep);animation:introIn .35s var(--ease) both;transition:opacity .4s var(--ease)}
#introScreen.bye{opacity:0;pointer-events:none}
.intro-in{text-align:center;padding:24px}
.intro-mark{width:118px;height:160px;margin:0 auto 14px;background:var(--logo) center/contain no-repeat;
  animation:introMark .7s var(--spring) both}
.intro-word{font-family:'Poppins',var(--font),sans-serif;font-weight:800;font-size:34px;letter-spacing:-.02em;
  animation:introWord .5s var(--ease) .25s both}
.intro-sub{margin-top:8px;font-size:15px;color:var(--mut);animation:introWord .5s var(--ease) .45s both}
.intro-bar{width:220px;height:4px;border-radius:99px;background:rgba(12,35,64,.10);margin:24px auto 0;overflow:hidden}
.intro-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-2),var(--brand));border-radius:99px;animation:introBar 1.5s var(--ease) .15s forwards}
html[data-theme="night"] #introScreen{background:#ffffff;color:#0c2340}
@keyframes introIn{from{opacity:0}to{opacity:1}}
@keyframes introMark{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes introWord{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes introBar{to{width:100%}}
@media(prefers-reduced-motion:reduce){#introScreen,.intro-mark,.intro-word,.intro-sub{animation:none}.intro-bar i{animation-duration:.1s}}
.fab{position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:85;display:none;
  width:58px;height:58px;border-radius:50%;cursor:pointer;color:var(--brand-3);
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.30) 55%,rgba(255,255,255,.58));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 30px rgba(12,35,64,.22), inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 1px rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  place-items:center;transition:transform .28s var(--spring)}
.fab .fic{width:26px;height:26px;stroke-width:2.6}
.fab:active{transform:scale(.94)}
@media(min-width:821px){.fab{width:72px;height:72px;right:32px;bottom:32px}.fab .fic{width:32px;height:32px}.fab:hover{transform:none}}
html[data-theme="night"] .fab{color:#eaf3ff;background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.08));border-color:rgba(255,255,255,.3)}
/* the floating composer */
.csheet{position:fixed;inset:0;z-index:1300;display:none;background:rgba(6,20,44,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:flex-start;justify-content:center;
  padding:calc(70px + env(safe-area-inset-top)) 12px 12px;overflow:auto}
.csheet.on{display:flex}
.csheet-in{width:min(640px,100%);border-radius:var(--r-lg);overflow:visible;
  background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 60px rgba(6,20,44,.35), inset 0 1px 1px rgba(255,255,255,1);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
.csheet-in .composer{margin:0;background:transparent;box-shadow:none;border:0;border-radius:0}
.csheet-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 4px;font-size:15px;color:var(--deep)}
.csheet-x{width:34px;height:34px;color:var(--deep);background:rgba(12,35,64,.08);border-color:transparent}
body.csheet-open{overflow:hidden}
html[data-theme="night"] .csheet-in{background:linear-gradient(160deg,rgba(18,32,54,.92),rgba(18,32,54,.8));border-color:rgba(160,202,250,.25)}
@media(pointer:coarse),(max-width:820px){.csheet{padding-top:calc(12px + env(safe-area-inset-top))}}
body.app-on .fab{display:grid}
body.pv-open .fab,body.app-open .fab,body.csheet-open .fab,body:not(.fab-ok) .fab{display:none}
.snav-post{margin-top:8px;justify-content:center;background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff!important;border-radius:var(--r-pill)}
.snav-post i{color:#fff}
.snav-post.on{background:linear-gradient(180deg,var(--brand-2),var(--brand))}
/* settings page */
.set-list{padding:4px 8px 12px}
/* ---------- Others (Instagram-style settings) ---------- */
.oth-search{position:relative;margin:6px 14px 4px}
.oth-search>.fic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mut)}
.oth-search .fld{padding-left:36px}
.oth-h{font-size:12.5px;font-weight:700;color:var(--mut);letter-spacing:.02em;padding:16px 12px 6px}
.oth .set-row span small{display:block;font-weight:500;font-size:12.5px;color:var(--mut);margin-top:1px}
.oth .set-row{padding:11px 12px}
.oth-state{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--brand-3);padding:3px 9px;border-radius:99px;background:rgba(31,95,191,.10)}
.oth .set-row.hide,.oth .oth-h.hide{display:none}
.me-others .fic{width:22px;height:22px}
.me-others .me-wrap,.me-others #meNameTop{display:none!important}
.me-others{gap:6px}
/* ---------- reply quote with a picture ---------- */
.bub-quote img{display:block;width:100%;max-width:220px;max-height:140px;object-fit:cover;border-radius:8px;margin-top:4px}
.set-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;color:var(--deep);text-decoration:none;font-weight:600;font-size:15px}
.set-row:hover{background:rgba(255,255,255,.5)}
.set-row i{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;color:var(--brand-3);font-style:normal}
.set-row i .fic{width:20px;height:20px}
.set-row .ico-shifu{width:22px;height:22px}
.set-sep{height:1px;background:var(--hair);margin:6px 12px}
.set-out{color:#c0392b}.set-out i{color:#c0392b}
html[data-theme="night"] .set-row:hover{background:rgba(255,255,255,.08)}
.post-id{min-width:0;flex:1}
.post-id .nm{display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.3}
.post-id .nm a{font-size:15px;font-weight:650;color:var(--deep);letter-spacing:-.016em}
.post-id .nm .hd{font-size:13px;color:var(--mut);font-weight:400}
.post-id .tm{font-size:12.5px;color:var(--mut);margin-top:1px}
.post-menu{margin-left:auto;color:var(--mut);font-size:17px;width:28px;height:28px;
  border-radius:50%;line-height:1;transition:all .26s var(--spring)}
.post-menu:hover{background:rgba(224,52,43,.12);color:var(--down);transform:scale(1.12)}
.post-body{padding:6px 14px 8px 14px;font-size:15px;line-height:1.55;word-break:break-word}
.post-body u{text-decoration:underline}
.post-body b,.post-body strong{font-weight:700}
.post-body .cash{font-weight:640;color:#8a5c04;background:rgba(226,164,22,.18);
  padding:1px 7px;border-radius:var(--r-pill);display:inline-block;
  transition:all .26s var(--spring)}
.post-body .cash:hover{background:rgba(226,164,22,.36);transform:translateY(-1px)}
.post-body .htag,.post-body .ment{font-weight:600;color:var(--brand)}

.rx-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px 73px}
.rx{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:var(--r-pill);
  font-size:13.5px;line-height:1.6;
  background:rgba(255,255,255,.68);border:1px solid rgba(12,35,64,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  transition:all .32s var(--spring)}
.rx b{font-size:11.5px;font-weight:650;color:var(--deep-2);font-variant-numeric:tabular-nums}
.rx:hover{background:rgba(255,255,255,.96);transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 16px rgba(8,34,72,.16)}
.rx:active{transform:scale(.94)}
.rx.mine{background:linear-gradient(180deg,rgba(61,134,238,.20),rgba(31,95,191,.14));
  border-color:rgba(31,95,191,.34)}
.rx.mine b{color:var(--brand-3)}

.post-acts{display:flex;align-items:center;gap:6px;padding:4px 8px 8px;
  border-top:1px solid var(--hair)}
.act{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:560;color:var(--deep-2);line-height:1.4;
  transition:all .32s var(--spring)}
.act:hover{background:rgba(255,255,255,.7);color:var(--brand-3);transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(8,34,72,.14)}
.act:active{transform:scale(.95)}
.act i{font-style:normal;font-size:14px}
.act.dm{margin-left:auto}

.replies{border-top:1px solid var(--hair);background:rgba(255,255,255,.26);display:none}
.replies.on{display:block}
/* the slide-in plays when the person opens the thread, not on every repaint —
   that replay was the flicker people saw while replying */
.replies.on.rep-anim{animation:viewIn .34s var(--ease)}
.rep{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--hair)}
.rep:last-of-type{border-bottom:none}
.rep-b{min-width:0;flex:1}
.rep-b .nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.3}
.rep-b .nm a{font-size:13.5px;font-weight:640;color:var(--deep)}
.rep-b .nm span{font-size:12px;color:var(--mut)}
.rep-b .tx{font-size:14.5px;line-height:1.55;margin-top:2px;word-break:break-word}
.rep-b .tx u{text-decoration:underline}
.rep-mini{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap;align-items:center}
.qk{padding:3px 8px;border-radius:var(--r-pill);font-size:14px;line-height:1.5;
  transition:all .26s var(--spring)}
.qk:hover{background:rgba(255,255,255,.88);transform:translateY(-2px) scale(1.14);
  box-shadow:0 5px 12px rgba(8,34,72,.14)}
.rep-form{padding:14px 16px;border-top:1px solid var(--hair)}
.rep-form .rt{min-height:40px;font-size:14px}

.empty{padding:38px 22px;text-align:center;color:var(--mut);font-size:14px;line-height:1.6}
.empty b{display:block;font-size:16px;font-weight:640;color:var(--deep);margin-bottom:5px;
  letter-spacing:-.018em}
.loadmore{width:100%;padding:13px;font-size:13.5px;font-weight:620;color:var(--brand-3);
  border-radius:var(--r-lg);margin-bottom:18px;
  background:var(--g-fill-2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.68);transition:all .34s var(--spring)}
.loadmore:hover{background:var(--g-fill);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(8,34,72,.2)}

/* ============================================================
   PROFILE
   ============================================================ */
.pro-head{overflow:hidden;margin-bottom:18px}
.pro-cover{height:250px;position:relative;
  background:linear-gradient(118deg,#1f5fbf,#3d86ee 46%,#7cc4f3)}
.pro-cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(88% 130% at 80% -22%,rgba(255,246,208,.58),transparent 62%)}
.pro-main{padding:0 20px 14px;display:flex;gap:18px;align-items:flex-end;margin-top:-52px;
  position:relative;flex-wrap:wrap}
.pro-idb{flex:1;min-width:200px;padding-bottom:4px;padding-top:58px}   /* clears the cover; the avatar overlaps it, the name does not */
.pro-main{padding-left:26px!important}
@media(max-width:640px){.pro-main{padding-left:20px!important}}
.pro-idb h2{font-size:24px;font-weight:680;letter-spacing:-.028em;line-height:1.2;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pro-idb h2 .rb{font-size:13px;line-height:1.2;padding:4px 10px;position:relative;top:1px}
.pro-idb .hd{font-size:14px;color:var(--mut);margin-top:3px}
@media(max-width:640px){.pro-idb{padding-top:52px}}
.pro-acts{display:flex;gap:8px;padding-bottom:4px;flex-wrap:wrap}
.pro-bio{padding:0 20px 14px;font-size:15px;line-height:1.6;max-width:62ch}
.pro-meta{padding:0 20px 16px;display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.pro-stats{border-top:1px solid var(--hair)}
.pro-stats .stat{padding:14px 5px}
.pro-stats .stat b{font-size:21px}

/* iOS-style segmented control with a gliding glass pill */
.tabs{position:relative;display:flex;gap:2px;justify-content:flex-start;
  margin:0 14px 14px;padding:4px;overflow-x:auto;scrollbar-width:none;
  border-radius:var(--r-pill);background:rgba(12,35,64,.07);
  border:1px solid rgba(255,255,255,.5)}
.tabs::-webkit-scrollbar{display:none}
/* two auto-margin spacers centre the group when it fits and collapse to
   nothing when it overflows, so phones can still scroll to every tab — and
   unlike :first-child tricks they don't care that the sliding pill (a span)
   is the row's real first child */
.tabs::before,.tabs::after{content:"";margin:auto}
.tab-pill{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.86));
  box-shadow:inset 0 1px 0 #fff, 0 3px 10px rgba(8,34,72,.20);
  transition:transform .5s var(--spring), width .5s var(--spring);
  pointer-events:none;z-index:0}
.tab{position:relative;z-index:1;flex:0 0 auto;padding:9px 20px;font-size:13px;font-weight:600;
  color:var(--mut);border-radius:var(--r-pill);letter-spacing:-.01em;
  transition:color .3s var(--ease)}
.tab:hover{color:var(--deep-2)}
.tab.on{color:var(--brand-3)}

/* ============================================================
   MESSAGES
   ============================================================ */
.msg-wrap{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:520px;overflow:hidden;
  background:var(--g-fill);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--g-edge);border-radius:var(--r-xl);box-shadow:var(--g-lift)}
.msg-side{border-right:1px solid var(--hair);display:flex;flex-direction:column;
  background:rgba(255,255,255,.20)}
.msg-side-h{padding:13px 14px;border-bottom:1px solid var(--hair);display:flex;
  align-items:center;justify-content:space-between;gap:8px}
.msg-side-h b{font-size:13px;font-weight:660;color:var(--deep-2)}
.msg-list{overflow:auto;flex:1;max-height:470px;padding:6px}
.mrow{display:flex;gap:11px;padding:10px 11px;width:100%;text-align:left;position:relative;
  border-radius:13px;transition:all .28s var(--ease)}
.mrow:hover{background:rgba(255,255,255,.64)}
.mrow.on{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.8));
  box-shadow:inset 0 1px 0 #fff, 0 4px 14px rgba(8,34,72,.14)}
.mrow .mm{min-width:0;flex:1}
.mrow .mm b{display:block;font-size:13.5px;font-weight:620;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .mm span{display:block;font-size:12px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .mt{font-size:11px;color:var(--mut);flex:0 0 auto}
.mrow .unread{position:absolute;right:10px;bottom:10px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:linear-gradient(180deg,#ff5b52,#dc2f26);color:#fff;
  font-size:10px;font-weight:700;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(180,30,25,.42)}
.msg-main{display:flex;flex-direction:column;min-width:0}
.msg-head{padding:11px 16px;border-bottom:1px solid var(--hair);display:flex;
  align-items:center;gap:11px}
.msg-head b{font-size:14.5px;font-weight:650;display:block;line-height:1.25}
.msg-head span{font-size:12px;color:var(--mut)}
.msg-body{flex:1;overflow:auto;padding:18px 18px 8px;max-height:390px;min-height:270px}
.bub-row{display:flex;margin-bottom:9px;gap:9px;align-items:flex-end}
.bub-row.me{flex-direction:row-reverse}
.bub{max-width:74%;padding:9px 15px;border-radius:21px;font-size:14.5px;line-height:1.5;
  word-break:break-word;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 #fff, 0 4px 14px rgba(8,34,72,.14)}
/* only a freshly sent/received bubble animates in; repaints stay still,
   otherwise the 10s poll made every bubble blink */
.bub.bub-new{animation:bubIn .4s var(--spring)}
@keyframes bubIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.bub u{text-decoration:underline}
.bub-row.me .bub{background:linear-gradient(180deg,#4b93f0,#1f5fbf);color:#fff;
  border-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 6px 18px rgba(21,74,155,.34)}
.bub-row.me .bub a{color:#ffe6a8}
.bub .bt{display:block;font-size:10px;opacity:.6;margin-top:3px;text-align:right}
.daysep{text-align:center;font-size:11px;color:var(--deep-2);margin:14px 0}
.daysep span{background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.82);
  padding:3px 13px;border-radius:var(--r-pill);font-weight:560;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.msg-form{border-top:1px solid var(--hair);padding:12px 14px}
.msg-form .rt{min-height:40px;max-height:130px;font-size:14.5px}
.msg-empty{flex:1;display:grid;place-items:center;padding:42px;text-align:center;color:var(--mut)}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
#notifList{padding:7px}
.nrow{display:flex;gap:13px;padding:13px 14px;width:100%;text-align:left;
  border-radius:var(--r-md);transition:background .24s}
.nrow.new{background:rgba(61,134,238,.12)}
.nrow:hover{background:rgba(255,255,255,.64)}
.nrow .nb{flex:1;min-width:0;font-size:13.5px;line-height:1.5}
.nrow .nb b{font-weight:650}
.nrow .nt{font-size:11.5px;color:var(--mut);margin-top:2px;display:block}
.nrow .nic{font-size:16px;flex:0 0 auto;align-self:center}
/* a follow request is answered in place, so it carries buttons */
.nrow.nreq{align-items:center;cursor:default}
.nrow.nreq:hover{background:rgba(61,134,238,.12)}
.nrow .nacts{display:flex;gap:6px;flex:0 0 auto;align-self:center;flex-wrap:wrap}

/* ============================================================
   EXPLORE
   ============================================================ */
.filters{display:flex;gap:7px;padding:14px;flex-wrap:wrap;align-items:center}
.chip{padding:7px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  color:var(--deep-2);background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:all .34s var(--spring)}
.chip:hover{background:rgba(255,255,255,.96);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(8,34,72,.16)}
.chip:active{transform:scale(.95)}
.chip.on{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;
  border-color:transparent;box-shadow:0 6px 18px rgba(21,74,155,.34)}
.grid-u{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:14px;
  padding:0 14px 16px}
.ucard{position:relative;border-radius:var(--r-lg);padding:18px 14px;text-align:center;
  overflow:hidden;
  background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:all .42s var(--spring)}
.ucard:hover{background:rgba(255,255,255,.88);transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(8,34,72,.22)}
.ucard .av{margin:0 auto 10px}
.ucard b{display:block;font-size:14.5px;font-weight:650;line-height:1.3;letter-spacing:-.016em}
.ucard .hd{display:block;font-size:12.5px;color:var(--mut);margin-bottom:8px}
.ucard .bio{font-size:12.5px;color:var(--deep-2);height:36px;overflow:hidden;
  margin:9px 0 6px;line-height:1.42}
.ucard .uacts{display:flex;gap:6px;justify-content:center;margin-top:10px}

/* ============================================================
   MODALS / MENUS / TOASTS
   ============================================================ */
.ovl{position:fixed;inset:0;z-index:1600;display:none;align-items:flex-start;
  justify-content:center;padding:48px 16px;overflow:auto;
  background:rgba(6,22,48,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ovl.on{display:flex;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:452px;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.87));
  -webkit-backdrop-filter:blur(34px) saturate(180%);backdrop-filter:blur(34px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 #fff, 0 32px 80px rgba(6,22,48,.44);
  animation:mrise .44s var(--spring)}
@keyframes mrise{from{transform:translateY(-16px) scale(.95);opacity:0}to{transform:none;opacity:1}}
.modal-h{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--hair)}
.modal-h b{font-size:17px;font-weight:680;letter-spacing:-.022em}
.modal-h button{color:var(--mut);font-size:17px;line-height:1;width:32px;height:32px;
  border-radius:50%;transition:all .28s var(--spring)}
.modal-h button:hover{background:rgba(12,35,64,.09);color:var(--deep);transform:rotate(90deg)}
.modal-b{padding:20px;max-height:64vh;overflow:auto}
.modal-f{padding:14px 20px;border-top:1px solid var(--hair);display:flex;gap:9px;
  justify-content:flex-end;flex-wrap:wrap}

.menu{position:absolute;z-index:120;display:none;min-width:222px;padding:7px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.85));
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg);
  box-shadow:0 22px 56px rgba(6,22,48,.34)}
.menu.on{display:block;animation:pop .3s var(--spring)}
.snav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:560;color:var(--deep);transition:all .28s var(--spring)}
.snav-item:hover{background:rgba(31,95,191,.11);transform:translateX(2px)}
.menu-sep{height:1px;background:var(--hair);margin:6px 4px}

.toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:300;
  display:grid;gap:9px;pointer-events:none;width:max-content;max-width:92vw}
.toast{padding:11px 20px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  color:#fff;background:rgba(10,28,56,.84);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 38px rgba(6,22,48,.44)}   /* no drop-in animation: quieter */
@keyframes tin{from{transform:translateY(14px) scale(.9);opacity:0}to{transform:none;opacity:1}}

/* appearance modal */
.font-opts{display:grid;gap:8px}
.font-opts label{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;
  border-radius:var(--r-md);background:rgba(255,255,255,.52);
  border:1px solid rgba(12,35,64,.09);transition:all .32s var(--spring)}
.font-opts label:hover{background:rgba(255,255,255,.92);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(8,34,72,.14)}
.font-opts input{margin:0;accent-color:var(--brand)}
.fo-t{flex:1;min-width:0}
.fo-t b{display:block;font-size:14.5px;font-weight:620;line-height:1.3}
.fo-t span{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.style-row{display:flex;gap:8px;margin-top:7px}
.style-row .fbtn{width:auto;padding:0 18px;height:38px;font-size:14px}
.size-row{display:flex;align-items:center;gap:12px;margin-top:7px}
.size-row input[type=range]{flex:1;accent-color:var(--brand)}
.prev{margin-top:15px;padding:15px;border-radius:var(--r-md);font-size:14px;line-height:1.6;
  background:rgba(255,255,255,.58);border:1px dashed rgba(12,35,64,.18)}

/* mobile tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;transition:transform .3s cubic-bezier(.32,1,.32,1),opacity .3s ease;
  background:linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,255,255,.84));
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:0 -6px 26px rgba(8,34,72,.16);padding-bottom:env(safe-area-inset-bottom)}
.tabbar-in{display:grid;grid-template-columns:repeat(5,1fr);padding:5px 6px;justify-items:center}
.chrome-in .cnav-b[data-go="apps"] i{font-size:14px}
.tb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;
  color:var(--mut);font-size:10.5px;font-weight:600;position:relative;
  border-radius:var(--r-md);transition:all .32s var(--spring)}
.tb i{font-style:normal;font-size:18px;line-height:1;flex:0 0 22px;
  display:flex;align-items:center;justify-content:center;width:22px;height:22px}
.tb i .fic{width:20px;height:20px;display:block}
.tb .ico-shifu{width:22px;height:22px;flex:0 0 22px;vertical-align:0;margin:0;background-size:contain}
.tb{min-height:52px;justify-content:flex-end;line-height:1.1}
/* the (+) is a small square of frosted glass, iOS-style, same height as its neighbours' icon boxes */
.tb-plus i{width:34px;height:34px;flex-basis:34px;border-radius:10px;color:var(--brand-3);margin-top:-6px;
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.28) 55%,rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 16px rgba(12,35,64,.16), inset 0 1px 1px rgba(255,255,255,1);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.tb-plus i .fic{width:18px;height:18px;stroke-width:2.6}
.tb-plus.on i{background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.55));color:var(--brand)}
html[data-theme="night"] .tb-plus i{color:#eaf3ff;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border-color:rgba(255,255,255,.28)}
/* the five tabs sit as one centred group, on a phone as well as an iPad */
.tabbar-in{max-width:520px;margin:0 auto}
.snav .nav-plus i{color:var(--brand)}
.snav a i{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:0 0 20px}
.tb.on{color:var(--brand);background:rgba(31,95,191,.10)}
.tb .pip{top:3px;right:calc(50% - 19px)}


/* ============================================================
   MOBILE FIXES
   ============================================================ */
/* Nothing may push the page sideways. NOTE: plain overflow-x:hidden here
   silently kills position:sticky on every descendant, which is what stopped
   the sidebars from staying put. overflow-x:clip contains the same sideways
   drift WITHOUT creating a scroll container, so sticky keeps working. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%;overscroll-behavior-x:none}
.shell,.card,.post,.bub,.msg-wrap,.pro-head{max-width:100%}
.post-body,.rep-b .tx,.bub,.linkcard,.gate-body{overflow-wrap:anywhere}

@media(max-width:900px){
  /* iOS zooms in on any field smaller than 16px and never zooms back out.
     16px everywhere on phones keeps the page still while typing. */
  .fld,.rt,.msg-form .rt,.rep-form .rt,.fp-digit,.srch-box .fld,input,textarea,select,[contenteditable="true"]{
    font-size:16px!important}
  /* the bottom bar sits on the safe area, and every icon gets the same box
     so the five items line up on their centres */
  .tabbar-in{padding:5px 4px;align-items:center}
  .tb{padding:7px 0}
  .tb i{width:22px;height:22px}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .shell{grid-template-columns:212px minmax(0,1fr)}
  .col-r{display:none}
}
@media(max-width:860px){
  .gate-body{padding-top:calc(30px + env(safe-area-inset-top))}
  .shell{grid-template-columns:minmax(0,1fr);padding:14px 12px 90px}
  .col-l{display:none}
  .tabbar{display:block}
  .brand .bfull{display:none}
  .searchbox{flex:1 1 auto}
  .cnav-b span{display:none}
  .cnav-b{padding:0 11px}
  .msg-wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .msg-side{border-right:none;border-bottom:1px solid var(--hair)}
  .msg-list{max-height:210px}
  body.thread-open .msg-side{display:none}
  /* leaving a chat on a phone must actually close the room — no stale
     inline display may keep it stacked under the list */
  body:not(.thread-open) #msgThread{display:none!important}
  body:not(.thread-open) #msgEmpty{display:none!important}
  .post-body,.rx-row{padding-left:16px}
  .pro-main{margin-top:-42px}
  .chrome-in{height:54px}
}
@media(max-width:430px){
  .frow.two{grid-template-columns:1fr}
  .role-pick{grid-template-columns:1fr}
  .role-pick.four{grid-template-columns:repeat(2,1fr)}
  .role-pick span i{display:inline;margin:0 6px 0 0}
  .av-92{width:88px;height:88px;font-size:32px}
  .pro-idb h2{font-size:20px}
}

/* ============================================================
   ATTACHED MEDIA — images and clips inside posts and messages
   ============================================================ */
.att-strip{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 10px 73px}
.att-chip{position:relative;width:82px;height:82px;border-radius:var(--r-md);overflow:hidden;
  background:rgba(12,35,64,.10);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 3px 12px rgba(8,34,72,.16)}
.att-chip img,.att-chip video{width:100%;height:100%;object-fit:cover;display:block}
.att-chip .x{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  background:rgba(10,28,56,.78);color:#fff;font-size:13px;line-height:1;display:grid;
  place-items:center;transition:all .24s var(--spring)}
.att-chip .x:hover{background:var(--down);transform:scale(1.12)}
.att-chip .vtag{position:absolute;left:4px;bottom:4px;background:rgba(10,28,56,.78);color:#fff;
  font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:var(--r-pill)}
.att-bar{display:flex;align-items:center;gap:8px;padding:0 16px 10px 73px;font-size:12px;color:var(--mut)}
.att-progress{flex:1;height:4px;border-radius:var(--r-pill);background:rgba(12,35,64,.12);overflow:hidden}
.att-progress i{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width .3s var(--ease)}

.media{display:grid;gap:5px;margin:4px 0 2px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid rgba(255,255,255,.62);box-shadow:0 4px 16px rgba(8,34,72,.14)}
.media.n1{grid-template-columns:1fr;border:none;box-shadow:none;overflow:visible;
  border-radius:0;background:none}
.media.n2{grid-template-columns:1fr 1fr}
.media.n3{grid-template-columns:1fr 1fr}
.media.n3 > *:first-child{grid-row:span 2}
.media.n4{grid-template-columns:1fr 1fr}
.media > figure{margin:0;position:relative;background:rgba(12,35,64,.10);overflow:hidden;
  aspect-ratio:16/10;cursor:zoom-in}
/* One picture is shown at its own size instead of being letterboxed inside a
   full-width frame — no more empty panels either side of a portrait shot. */
.media.n1 > figure{aspect-ratio:auto;max-height:none;background:none;overflow:visible;
  display:flex;justify-content:center;cursor:zoom-in}
/* a top-level post's single picture runs edge to edge like LinkedIn; portrait
   shots sit centred on a soft panel instead of leaving the right side empty */
.post-body>.media.n1{margin:2px -14px 8px;border-radius:0;background:linear-gradient(180deg,#eef3fa,#e2eaf4)}
.post-body>.media.n1:first-child{margin-top:-6px}
.post-body>.media.n1 > figure{justify-content:center}
.post-body>.media.n1 img,.post-body>.media.n1 video{width:auto;max-width:100%;max-height:min(70vh,640px);
  border-radius:0;border:0;box-shadow:none;background:none}
.post-body>.media.n1 img[data-wide],.post-body>.media.n1 video{width:100%}
html[data-theme="night"] .post-body>.media.n1{background:linear-gradient(180deg,#0f1c33,#122341)}
@media(max-width:640px){.post-body>.media.n1 img,.post-body>.media.n1 video{max-height:min(62vh,520px)}}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media.n1 img,.media.n1 video{width:auto;max-width:100%;height:auto;max-height:460px;
  object-fit:contain;border-radius:var(--r-md);background:rgba(12,35,64,.06);
  border:1px solid rgba(255,255,255,.62);box-shadow:0 4px 16px rgba(8,34,72,.14)}
.media video{cursor:default}
.media > figure:hover img{transform:scale(1.02)}
.media img{transition:transform .5s var(--ease)}
.bub .media{margin-top:5px;border-color:rgba(255,255,255,.4)}

/* --- Instagram-style carousel for posts with several photos --- */
/* pictures and video fill the card from edge to edge, the caption sits under them */
.carousel{position:relative;margin:2px -14px 8px;border-radius:0;background:linear-gradient(180deg,#eef3fa,#e2eaf4)}
html[data-theme="night"] .carousel{background:linear-gradient(180deg,#0f1c33,#122341)}
.post-body>.carousel:first-child{margin-top:-6px}
.rep .carousel{margin:4px 0 6px;border-radius:var(--r-md)}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:0;
  border-radius:var(--r-md);scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel .cslide{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;
  display:flex;justify-content:center;align-items:center;
  background:rgba(12,35,64,.06);cursor:zoom-in;overflow:hidden}
.carousel .cslide img,.carousel .cslide video{width:100%;height:auto;max-height:min(70vh,640px);
  object-fit:contain;display:block}
.carousel .cslide{background:transparent}
@media(max-width:640px){.carousel .cslide img,.carousel .cslide video{max-height:min(62vh,520px)}}
.carousel .cslide video{cursor:default}
.carousel .cnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border:none;border-radius:50%;
  background:rgba(12,20,38,.55);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .25s var(--ease),background .2s var(--ease)}
.carousel .cnav:hover{background:rgba(12,20,38,.78)}
.carousel .cnav .fic{width:17px;height:17px;stroke-width:2.4}
.carousel .cprev{left:8px}
.carousel .cnext{right:8px}
.carousel .cnext .fic{transform:scaleX(-1)}
.carousel .cnav.off{opacity:0;pointer-events:none}
.carousel .ccount{position:absolute;top:9px;right:9px;z-index:2;
  padding:2px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:650;color:#fff;
  background:rgba(12,20,38,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.carousel .cdots{position:absolute;left:0;right:0;bottom:9px;z-index:2;
  display:flex;justify-content:center;gap:6px;pointer-events:none}
.carousel .cdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.4);transition:all .25s var(--ease)}
.carousel .cdots i.on{background:#fff;width:7px;height:7px}
@media(max-width:640px){ .carousel .cnav{display:none} }

/* media buttons grey out once the post is at its 7-attachment ceiling */
.fbtn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.att-full{font-size:12px;color:var(--mut);padding:6px 2px 2px}
.bub .media.n1 img,.bub .media.n1 video{max-height:250px}
.bub-row.me .media.n1 > figure{justify-content:flex-end}

.lightbox{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:rgba(4,14,32,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:28px}
.lightbox.on{display:flex;animation:fade .28s var(--ease)}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;border-radius:var(--r-lg);
  box-shadow:0 30px 90px rgba(2,10,26,.6)}
.lightbox .lx{position:absolute;top:20px;right:22px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;font-size:19px;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.34);transition:all .3s var(--spring)}
.lightbox .lx:hover{background:rgba(255,255,255,.32);transform:rotate(90deg)}

/* ============================================================
   CHAT MESSAGE ACTIONS — WhatsApp-style menu.
   Desktop: left-click a bubble. Touch: press & hold (~1s).
   ============================================================ */
.bub{position:relative;cursor:pointer}
.msg-menu{position:fixed;z-index:260;display:none;min-width:184px;padding:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.88));
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg);
  box-shadow:0 22px 56px rgba(6,22,48,.34)}
.msg-menu.on{display:block;animation:pop .3s var(--spring)}
.msg-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;text-align:left;
  border-radius:var(--r-md);font-size:13.5px;font-weight:560;color:var(--deep);
  transition:all .22s var(--ease)}
.msg-menu button:hover{background:rgba(31,95,191,.11)}
.msg-menu button.mdel{color:var(--down)}
.msg-menu button.mdel:hover{background:rgba(220,47,38,.12)}
html[data-theme="night"] .msg-menu{
  background:linear-gradient(180deg,rgba(27,46,80,.96),rgba(16,29,54,.92));
  border-color:rgba(160,202,250,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 32px 80px rgba(0,4,16,.62)}
html[data-theme="night"] .msg-menu button{color:#dce9ff}
html[data-theme="night"] .msg-menu button:hover{background:rgba(255,255,255,.10)}
.bub.mm-on{outline:2px solid rgba(61,134,238,.55);outline-offset:2px}
.bub.flash{animation:bubFlash 1.3s var(--ease)}
@keyframes bubFlash{0%,45%{box-shadow:0 0 0 3px rgba(61,134,238,.65)}100%{box-shadow:0 0 0 3px rgba(61,134,238,0)}}
/* on touch screens the hold gesture owns the bubble — no native text
   selection / callout fighting it (Copy lives in the menu instead) */
@media(hover:none){
  #msgBody .bub, #msgBody .bub *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  #msgBody .bub .bub-edit, #msgBody .bub .bub-edit *{-webkit-user-select:text;user-select:text}
}
/* quoted message inside a bubble (reply) + forwarded label */
.bub-quote{display:block;margin:0 0 7px;padding:7px 10px;border-left:3px solid var(--brand-2);
  border-radius:10px;background:rgba(31,95,191,.10);color:inherit;cursor:pointer}
.bub-quote b{display:block;font-size:11.5px;color:var(--brand-3);margin-bottom:1px}
.bub-quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:12.5px;color:var(--mut)}
html[data-theme="night"] .bub-quote{background:rgba(0,0,0,.24)}
html[data-theme="night"] .bub-quote span{color:rgba(233,241,252,.78)}
/* inside MY blue bubble the old brand-blue/grey text vanished — go white */
.bub-row.me .bub-quote{background:rgba(255,255,255,.18);border-left-color:rgba(255,255,255,.8)}
.bub-row.me .bub-quote b{color:#fff}
.bub-row.me .bub-quote span{color:rgba(255,255,255,.88)}
.bub-fwd{display:block;font-size:11px;color:var(--mut);font-style:italic;margin-bottom:3px}
/* reply preview above the composer */
.msg-reply-bar{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:8px 10px;
  border-left:3px solid var(--brand-2);border-radius:10px;background:rgba(31,95,191,.10)}
.msg-reply-bar .mm{min-width:0;flex:1}
.msg-reply-bar .mm b{display:block;font-size:12px;color:var(--brand-3)}
.msg-reply-bar .mm span{display:block;font-size:12.5px;color:var(--mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-reply-bar button{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.msg-reply-bar button:hover{background:rgba(31,95,191,.14)}
html[data-theme="night"] .msg-reply-bar{background:rgba(0,0,0,.24)}
/* Older Safari (macOS Catalina and earlier) has no aspect-ratio. Without a
   fallback the coin art collapsed and the page looked broken/blank. */
@supports not (aspect-ratio: 1 / 1){
  .coin > i{height:100%}
  .sky-sun{height:clamp(300px,44vw,580px)}
}

/* --- line icons: satu bahasa visual, tanpa emoji di antarmuka --- */
.fic{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.snav a .fic,.tabbar .tb .fic{width:17px;height:17px}
.act .fic,.fbtn .fic{width:15px;height:15px}
.msg-menu .fic{width:15px;height:15px;margin-right:2px}
.pr-ic .fic{width:16px;height:16px}
.pl-ic .fic{width:34px;height:34px;stroke-width:1.6}
.mag .fic{width:15px;height:15px}
.fic.pl{width:34px;height:34px;stroke-width:1.6;color:var(--brand-3)}




/* chat ⋮ dropdown sits under the header, aligned right */
.msg-head{position:relative}
#thMenu{top:calc(100% + 4px);right:10px;left:auto}
.menu button{display:block;width:100%;text-align:left;padding:9px 12px;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:560;color:var(--deep)}
.menu button:hover{background:rgba(12,35,64,.08)}
.menu button.danger{color:#c62f28}
.menu button.danger:hover{background:rgba(224,52,43,.10)}
html[data-theme="night"] .menu button{color:var(--txt)}
html[data-theme="night"] .menu button:hover{background:rgba(255,255,255,.10)}
/* post ⋮ trigger: neutral hover (it is a menu now, not a delete button) */
.post-menu:hover{background:rgba(12,35,64,.10);color:var(--deep);transform:scale(1.08)}




/* --- opening splash: white, mark first, wordmark rises beneath it --- */
#splash{position:fixed;inset:0;z-index:500;background:#fff;
  display:grid;place-items:center;
  transition:opacity .12s var(--ease), visibility .12s}
#splash.bye{opacity:0;visibility:hidden;pointer-events:none}
.splash-in{display:flex;flex-direction:column;align-items:center;gap:16px}
.splash-mark{width:92px;height:125px;background:var(--logo) center/contain no-repeat;
  animation:splashMark .32s var(--ease) both}
.splash-word{font-family:'Poppins',var(--ui-font);font-weight:700;font-size:27px;
  /* fixed navy: on phones in night theme var(--deep) turns pale grey */
  letter-spacing:-.02em;color:#0c2340;
  animation:splashWord .28s var(--ease) .12s both}
@keyframes splashMark{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes splashWord{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .splash-mark,.splash-word{animation:none}
  #splash{transition:opacity .12s}
}


/* --- tag people on a photo (Instagram-style) --- */
.media{position:relative}
.ptag-ico{position:absolute;left:9px;bottom:9px;z-index:2;width:28px;height:28px;
  display:grid;place-items:center;border:none;border-radius:50%;cursor:pointer;
  background:rgba(12,20,38,.62);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s var(--ease), transform .2s var(--ease)}
.ptag-ico:hover{background:rgba(12,20,38,.82);transform:scale(1.06)}
.ptag-ico .fic{width:14px;height:14px;stroke-width:2.2}
.ptag-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 2px 0}
.ptag-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:var(--r-pill);background:rgba(31,95,191,.12);font-size:12px;font-weight:620;
  color:var(--brand-3)}
.ptag-chip button{color:inherit;font-size:13px;line-height:1;padding:0 1px;cursor:pointer}
.ptag-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 9px;border-radius:var(--r-md);cursor:pointer}
.ptag-row:hover{background:rgba(12,35,64,.07)}
.ptag-row b{flex:1;min-width:0;font-size:13.5px;font-weight:620;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptag-row .tick{width:20px;height:20px;border-radius:50%;border:2px solid rgba(12,35,64,.25);
  display:grid;place-items:center;color:#fff;flex:0 0 20px}
.ptag-row.on .tick{background:var(--brand-2);border-color:var(--brand-2)}
.ptag-row.on .tick::after{content:"✓";font-size:11px;font-weight:800}
#ptagPop{min-width:200px}
#ptagPop .ptag-row{padding:7px 9px}
html[data-theme="night"] .ptag-row:hover{background:rgba(255,255,255,.08)}



/* On phones a swipe must register anywhere on the screen, even below a short
   view (an empty Messages list is only ~230px tall). Giving the active view a
   floor of the viewport height means the empty space beneath it still belongs
   to the view and still catches the gesture. */
@media(max-width:900px){
  .view.on{min-height:calc(100vh - 132px)}
}

/* swipe transitions between views / profile tabs (touch navigation) */
@keyframes swInL{from{opacity:.4;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes swInR{from{opacity:.4;transform:translateX(-26px)}to{opacity:1;transform:none}}
.sw-l{animation:swInL .22s var(--ease) both}
.sw-r{animation:swInR .22s var(--ease) both}
@media(prefers-reduced-motion:reduce){ .sw-l,.sw-r{animation:none} }


/* --- Explore: Instagram-style post grid --- */
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 14px 16px}
.ex-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.6);color:#fff;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.ex-play .fic{width:18px;height:18px}
/* ---------- smart cashtags: $BTC → live card from CoinGecko ---------- */
.ctag{display:flex;align-items:center;gap:12px;margin:10px 0 4px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.30) 55%,rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 16px rgba(12,35,64,.10), inset 0 1px 1px rgba(255,255,255,1);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  color:var(--deep);text-decoration:none;min-height:56px}
.ctag img{width:34px;height:34px;border-radius:50%;flex:0 0 34px}
.ctag-ic{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:grid;place-items:center;background:rgba(12,35,64,.08);font-weight:700}
.ctag-t{flex:1;min-width:0}
.ctag-t b{display:block;font-size:14px;font-weight:650}
.ctag-t span{font-size:13px;color:var(--mut)}
.ctag-t .ch{font-weight:650;margin-left:6px}
.ctag-t .up{color:#0f9d58}.ctag-t .dn{color:#d63f5c}
.ctag svg.spark{width:110px;height:36px;flex:0 0 110px}
.ctag.load{opacity:.7}.ctag.load .ctag-t span{color:var(--mut)}
html[data-theme="night"] .ctag{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border-color:rgba(160,202,250,.25);color:#eaf3ff}
html[data-theme="night"] .ctag-ic{background:rgba(255,255,255,.12)}
/* ---------- search page ---------- */
.srch-top{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.srch-back{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:0;background:transparent;cursor:pointer;
  color:var(--deep);display:grid;place-items:center}
.srch-back .fic{width:20px;height:20px}
.srch-box{position:relative;flex:1}
.srch-box>.fic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mut)}
.srch-box .fld{padding-left:36px;padding-right:36px}
.srch-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  border:0;background:rgba(12,35,64,.10);color:var(--deep-2);display:grid;place-items:center;cursor:pointer}
.srch-x .fic{width:12px;height:12px}
.srch-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;font-weight:700;color:var(--deep)}
.srch-h button{background:none;border:0;color:var(--brand);font-weight:600;cursor:pointer;font-size:13.5px}
.srch-row{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;color:var(--deep);text-decoration:none}
.srch-row:hover{background:rgba(255,255,255,.45)}
.srch-row .av{flex:0 0 auto}
.srch-ic{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,35,64,.08);color:var(--deep-2);font-weight:700;font-size:18px}
.srch-ic .fic{width:18px;height:18px}
.srch-txt{flex:1;min-width:0}
.srch-txt b{display:block;font-weight:650;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-txt span{display:block;font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-del{width:34px;height:34px;flex:0 0 34px;border:0;background:none;color:var(--mut);cursor:pointer;display:grid;place-items:center}
.srch-del .fic{width:16px;height:16px}
.srch-empty{padding:26px 16px;color:var(--mut);text-align:center;font-size:13.5px}
html[data-theme="night"] .srch-row:hover{background:rgba(255,255,255,.08)}
html[data-theme="night"] .srch-ic{background:rgba(255,255,255,.12);color:#cfe3ff}
.ex-card{min-height:calc(100vh - 82px);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
@media(min-width:821px){.shell{padding-bottom:0}}
/* Inbox and the profile page reach the bottom too */
.msg-wrap{min-height:calc(100vh - 120px)}
@media(max-width:820px){.ex-card{min-height:calc(100vh - 60px);margin-bottom:-24px}}
.card.ex-card{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
/* ---------- post viewer: Explore pages through one post at a time ---------- */
.pv{position:fixed;inset:0;z-index:1400;display:none;background:rgba(6,20,44,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.pv-open{overflow:hidden}
.pv-bar{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;display:flex;
  align-items:center;justify-content:space-between;z-index:2}
.pv-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.55);cursor:pointer;
  background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center}
.pv-btn .fic{width:18px;height:18px}
.pv-count{color:#fff;font-size:13px;font-weight:600;opacity:.9;padding:6px 12px;border-radius:99px;
  background:rgba(255,255,255,.16)}
.pv-body{position:absolute;top:calc(60px + env(safe-area-inset-top));bottom:calc(16px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 24px));overflow:auto;
  -webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
.pv-body .post{margin:0}
.pv-body.slide-l{animation:pvL .32s var(--spring)}
.pv-body.slide-r{animation:pvR .32s var(--spring)}
@keyframes pvL{from{opacity:0;transform:translateX(calc(-50% + 40px))}to{opacity:1;transform:translateX(-50%)}}
@keyframes pvR{from{opacity:0;transform:translateX(calc(-50% - 40px))}to{opacity:1;transform:translateX(-50%)}}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.22);color:#fff;cursor:pointer;
  display:grid;place-items:center;z-index:2}
.pv-nav .fic{width:20px;height:20px}
.pv-prev{left:10px}.pv-next{right:10px}
.pv.at-start .pv-prev,.pv.at-end .pv-next{opacity:.25;pointer-events:none}
@media(max-width:700px){.pv-nav{display:none}}   /* swipe instead */
@media(min-width:1100px){ .ex-grid{grid-template-columns:repeat(4,1fr);gap:6px} }
.ex-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:12px;background:rgba(12,35,64,.06);cursor:pointer;
  box-shadow:var(--g-lift);transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.ex-tile:hover{transform:translateY(-2px);box-shadow:var(--g-lift-hi)}
.ex-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ex-tile.ex-text{display:grid;place-items:center;padding:14px;
  background:linear-gradient(150deg,rgba(31,95,191,.14),rgba(31,95,191,.05))}
.ex-tile .ex-quote{font-size:13px;line-height:1.45;font-weight:560;color:var(--deep);
  text-align:center;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* author strip revealed on hover */
.ex-ov{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;
  padding:8px 9px;font-size:11.5px;font-weight:620;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(6,18,40,.72));
  opacity:0;transform:translateY(4px);transition:opacity .18s var(--ease),transform .18s var(--ease);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-tile:hover .ex-ov{opacity:1;transform:none}
.ex-tile.ex-text .ex-ov{color:var(--deep);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.85))}
.ex-ov .ex-av{flex:0 0 auto;display:inline-flex}
.ex-ov .ex-av .av{box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
/* engagement badge, top-right */
.ex-badge{position:absolute;top:7px;right:7px;display:flex;gap:8px;
  font-size:11px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}
.ex-badge:empty{display:none}
.ex-badge i{display:inline-flex;align-items:center;gap:3px;font-style:normal}
.ex-badge .fic{width:13px;height:13px;stroke-width:2.4}
.ex-tile.ex-text .ex-badge{color:var(--brand-3);text-shadow:none}
/* multi-photo corner mark */
.ex-multi{position:absolute;top:7px;left:7px;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));pointer-events:none}
.ex-multi .fic{width:15px;height:15px}


/* ============================================================
   Clear-glass effect (frosted body + bright top edge + faint
   rainbow rim). No animation — light and static. Reusable via
   .glassy, and applied to the post/chat controls below.
   ============================================================ */
.glassy, .btn, .post-acts .act, .comp-bar .fbtn, .bea .fbtn{
  position:relative;isolation:isolate;
  -webkit-backdrop-filter:blur(12px) saturate(175%);
  backdrop-filter:blur(12px) saturate(175%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18) 46%, rgba(255,255,255,.28));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -8px 14px rgba(255,255,255,.28),
    inset 0 10px 18px rgba(180,205,255,.22),
    0 6px 18px rgba(12,35,64,.16);
}
/* glossy top-half sheen — the signature Y2K/glass highlight */
.glassy::before, .btn::before, .post-acts .act::before,
.comp-bar .fbtn::before, .bea .fbtn::before{
  content:"";position:absolute;left:6%;right:6%;top:5%;height:42%;
  border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.04));
  opacity:.8;
}
/* faint rainbow rim, like light refracting through glass */
.glassy::after, .btn::after, .post-acts .act::after,
.comp-bar .fbtn::after, .bea .fbtn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  padding:1px;
  background:linear-gradient(120deg,
    rgba(255,120,160,.35), rgba(120,180,255,.0) 30%,
    rgba(120,255,220,.0) 62%, rgba(180,140,255,.38));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.7;
}
.glassy:hover, .btn:hover, .post-acts .act:hover,
.comp-bar .fbtn:hover, .bea .fbtn:hover{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -8px 14px rgba(255,255,255,.34),
    inset 0 10px 20px rgba(180,205,255,.3),
    0 10px 26px rgba(12,35,64,.22);
}
/* ALL primary buttons are CLEAR GLASS now — no brand tint anywhere.
   (Post, Send, Sign in, Create account, Continue with Google, etc.) */
.btn:not(.btn-lite):not(.btn-lite2){
  color:var(--deep);
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12) 48%, rgba(255,255,255,.24));
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.btn:not(.btn-lite):not(.btn-lite2) .fic{color:var(--deep)}
html[data-theme="night"] .btn:not(.btn-lite):not(.btn-lite2){
  color:var(--txt);
  background:linear-gradient(180deg, rgba(120,150,210,.2), rgba(70,95,150,.12));
  text-shadow:none;
}
html[data-theme="night"] .btn:not(.btn-lite):not(.btn-lite2) .fic{color:var(--txt)}
/* disabled Send stays glassy but muted */
.btn:disabled{opacity:.55;filter:saturate(.6)}

/* Reply / React glass pills */
.post-acts .act{background-clip:padding-box}
.post-acts .act .fic, .post-acts .act i{position:relative;z-index:1}

/* format B/I/U — frosted glass squares */
.comp-bar .fbtn, .bea .fbtn{color:var(--deep-2)}

/* message bubbles as clear glass */
.bub{
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.28));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 10px 18px rgba(180,205,255,.18),
    0 6px 18px rgba(12,35,64,.14);
}
/* MY bubble: brand-tinted glass */
.bub-row.me .bub{
  color:#0b2c62;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 50%, rgba(255,255,255,.2)),
    linear-gradient(180deg, var(--brand), var(--brand-2));
  border-color:rgba(255,255,255,.7);
}
.bub-row.me .bub a{color:#083; }
html[data-theme="night"] .bub{
  background:linear-gradient(180deg, rgba(60,80,120,.34), rgba(40,56,90,.24));
  border-color:rgba(180,205,255,.22);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.34);
}


/* ============================================================
   Gate buttons (Continue with Google / Create account / Sign in):
   fully transparent CLEAR GLASS — no brand tint — with a shimmer
   sweep animation.
   ============================================================ */
.btn.gate-glass{
  color:var(--deep) !important;
  /* wipe any brand-tint gradient; keep only frosted transparency */
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10) 48%, rgba(255,255,255,.20)) !important;
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -8px 16px rgba(255,255,255,.28),
    inset 0 10px 20px rgba(180,205,255,.20),
    0 8px 22px rgba(12,35,64,.16) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  overflow:hidden;
}
.btn.gate-glass .fic, .btn.gate-glass .gicon{position:relative;z-index:2}
.btn.gate-glass > span, .btn.gate-glass{ }
/* the moving shimmer highlight */
.btn.gate-glass::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;
  pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,
    transparent 0%, rgba(255,255,255,.0) 30%,
    rgba(255,255,255,.75) 50%, rgba(255,255,255,.0) 70%, transparent 100%);
  transform:skewX(-18deg);
  animation:gateShimmer 3.4s var(--ease) infinite;
}
@keyframes gateShimmer{
  0%   { left:-60%; }
  55%  { left:120%; }
  100% { left:120%; }   /* pause before repeating */
}
/* keep the glossy top sheen from .btn::before, but ensure text sits above shimmer */
.btn.gate-glass{ isolation:isolate; }
.btn.gate-glass:hover{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -8px 16px rgba(255,255,255,.34),
    inset 0 10px 22px rgba(180,205,255,.28),
    0 12px 30px rgba(12,35,64,.22) !important;
}
@media(prefers-reduced-motion:reduce){
  .btn.gate-glass::after{animation:none;display:none}
}
html[data-theme="night"] .btn.gate-glass{
  color:var(--txt) !important;
  background:linear-gradient(180deg, rgba(120,150,210,.20), rgba(70,95,150,.12)) !important;
  border-color:rgba(180,205,255,.28) !important;
  text-shadow:none;
}

/* --- password strength meter --- */
.pwmeter{display:flex;align-items:center;gap:9px;margin-top:7px}
.pwbar{flex:1;height:5px;border-radius:99px;background:rgba(12,35,64,.12);overflow:hidden}
.pwbar i{display:block;height:100%;width:0;border-radius:99px;transition:width .3s var(--ease), background .3s var(--ease)}
.pwmeter span{font-size:11.5px;font-weight:650;min-width:52px;text-align:right;transition:color .3s}
.pw-weak i{background:#e5484d}.pw-weak span{color:#e5484d}
.pw-fair i{background:#f5a524}.pw-fair span{color:#c47f0a}
.pw-good i{background:#8bc34a}.pw-good span{color:#5d8f27}
.pw-strong i{background:#22a06b}.pw-strong span{color:#1a7d52}
html[data-theme="night"] .pwbar{background:rgba(255,255,255,.14)}

/* --- show/hide password --- */
.pwrap{position:relative;display:block}
.pwrap .fld{padding-right:44px}
.peye{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;padding:0;border:none;
  border-radius:50%;background:none;color:var(--mut);cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease)}
.peye:hover{color:var(--deep);background:rgba(12,35,64,.07)}
.peye:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.peye .fic{width:18px;height:18px;stroke-width:1.8}
html[data-theme="night"] .peye:hover{background:rgba(255,255,255,.10)}

/* forward picker */
.fwd-list{display:grid;gap:4px;max-height:340px;overflow:auto}
/* private account (Instagram-style) */
.priv-row{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border:1px solid var(--hair);border-radius:14px;background:rgba(255,255,255,.55)}
html[data-theme="night"] .priv-row{background:rgba(0,0,0,.22)}
.priv-row .pr-ic{font-size:16px}
.priv-row .mm{flex:1;min-width:0}
.priv-row .mm b{display:block;font-size:13px}
.priv-row .mm span{display:block;font-size:11.5px;color:var(--mut)}
.sw{position:relative;width:46px;height:26px;flex:0 0 46px;border-radius:999px;cursor:pointer;padding:0;
  background:rgba(120,140,170,.45);border:1px solid rgba(255,255,255,.5);transition:background .22s var(--ease)}
.sw i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(8,34,72,.35);transition:left .22s var(--spring)}
.sw.on{background:linear-gradient(135deg,var(--brand-2),var(--brand))}
.sw.on i{left:22px}
.priv-lock{display:grid;justify-items:center;gap:6px;padding:34px 18px;text-align:center}
.priv-lock .pl-ic{font-size:34px}
.priv-lock b{font-size:15px}
.priv-lock span{font-size:12.5px;color:var(--mut)}
.edl{font-style:normal;opacity:.65;font-size:10px;margin-right:5px}
.bub-edit{min-height:34px;background:rgba(255,255,255,.94);color:#12253f;border-radius:12px;
  padding:7px 10px;font-size:14px;outline:none;min-width:180px}
html[data-theme="night"] .bub-edit{background:rgba(10,24,48,.92);color:#dce9ff}
.bea{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
.bea .btn-lite2{font-size:11.5px;padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.3);color:inherit}
.bub-row.me .bea .btn-lite2{color:#eaf3ff}

/* ============================================================
   DOCUMENT ATTACHMENTS — file cards in chat
   ============================================================ */
.filecard{display:flex;align-items:center;gap:10px;margin-top:6px;padding:9px 12px;border-radius:14px;
  background:rgba(255,255,255,.74);border:1px solid rgba(12,35,64,.12);max-width:290px;
  box-shadow:0 3px 12px rgba(8,34,72,.12);transition:all .26s var(--spring);
  color:var(--deep);text-decoration:none}
.filecard:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(8,34,72,.2)}
.filecard .fic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  flex:0 0 auto;background:linear-gradient(180deg,#4b93f0,#1f5fbf);color:#fff}
.filecard .fnm{min-width:0}
.filecard .fnm b{display:block;font-size:12.5px;font-weight:640;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:190px}
.filecard .fnm span{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.bub-row.me .filecard{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff}
.bub-row.me .filecard .fnm span{color:rgba(255,255,255,.75)}
html[data-theme="night"] .filecard{background:rgba(16,34,64,.74);border-color:rgba(150,190,255,.22);color:#dce9ff}
.att-chip.file{width:auto;min-width:120px;max-width:190px;height:auto;padding:8px 28px 8px 10px;
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.86)}
.att-chip.file i{font-style:normal;font-size:17px}
.att-chip.file b{font-size:11px;font-weight:620;color:var(--deep);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
html[data-theme="night"] .att-chip.file{background:rgba(16,34,64,.86)}
html[data-theme="night"] .att-chip.file b{color:#dce9ff}

/* ============================================================
   GROUP ROLES — captain / co-captain badges + member management
   ============================================================ */
.rolebadge{font-size:9.5px;font-weight:750;padding:2px 7px;border-radius:var(--r-pill);
  letter-spacing:.03em;background:linear-gradient(180deg,#ffd76a,#e2a416);color:#5b3b00;
  margin-left:6px;vertical-align:1px;display:inline-block}
.rolebadge.co{background:linear-gradient(180deg,#9cc4ff,#3d86ee);color:#0b2c62}
.rolebadge.senior{background:linear-gradient(180deg,#8fe6c6,#22b07f);color:#04351f}
.mgm-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--hair)}
.mgm-row:last-child{border-bottom:none}
.mgm-row .un{min-width:0;flex:1}
.mgm-row .un b{display:block;font-size:13.5px;font-weight:640;color:var(--deep);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mgm-row .un span{font-size:11.5px;color:var(--mut)}
.mgm-row .btn-sm{font-size:11px;padding:5px 9px}
.inv-box{display:flex;gap:8px;align-items:center;margin-top:4px}
.inv-box input{flex:1}

/* ============================================================
   AVATAR SHIELD — protected profile-photo viewer
   ============================================================ */
[data-avz]{cursor:zoom-in}
#ovlShield{z-index:450}
.av-shield-b{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(88vw,460px)}
.av-shield-b .frame{position:relative;border-radius:26px;overflow:hidden;background:#0b1830;
  box-shadow:0 24px 70px rgba(2,10,26,.6);user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none}
.av-shield-b canvas,.av-shield-b .fallback{display:block;width:min(74vw,380px);height:min(74vw,380px);
  object-fit:cover;pointer-events:none}
.av-shield-b div.fallback{display:grid;place-items:center;font-size:110px;color:#fff;font-weight:700}
.av-shield-b .wm{position:absolute;inset:0;width:100%!important;height:100%!important}
.av-shield-b .cap{color:#eaf3ff;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.av-shield-b .cap b{display:block;font-size:17px}
.av-shield-b .cap span{font-size:12.5px;opacity:.8}
/* ============================================================
   LINK PREVIEW CARDS — X.com "Article" style
   ============================================================ */
.lpcard{display:block;margin-top:8px;border-radius:16px;overflow:hidden;text-decoration:none;
  border:1px solid rgba(12,35,64,.14);background:rgba(255,255,255,.7);max-width:480px;
  box-shadow:0 4px 16px rgba(8,34,72,.12);transition:all .28s var(--spring);color:var(--deep)}
.lpcard:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(8,34,72,.2)}
.lpcard .lp-img{display:none;position:relative;aspect-ratio:1.91/1;background:rgba(12,35,64,.12) center/cover no-repeat}
.lpcard.has-img .lp-img{display:block}
.lpcard .lp-logo{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.94);display:grid;place-items:center;overflow:hidden;
  box-shadow:0 3px 10px rgba(4,16,38,.35);border:1px solid rgba(255,255,255,.8)}
.lpcard .lp-logo img{width:22px;height:22px;object-fit:contain;display:block}
.lpcard .lp-meta{display:block;padding:9px 12px 10px}
.lpcard .lp-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13.5px;font-weight:650;line-height:1.35;color:var(--deep)}
.lpcard .lp-dom{display:block;font-size:11px;color:var(--mut);margin-top:2px;text-transform:lowercase}
.lpcard.noimg{display:flex;align-items:center;gap:10px;padding:9px 12px}
.lpcard.noimg .lp-img{display:grid;place-items:center;position:static;aspect-ratio:auto;
  width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:rgba(12,35,64,.10)}
.lpcard.noimg .lp-logo{position:static;box-shadow:none;border:none;background:transparent;width:auto;height:auto}
.lpcard.noimg .lp-meta{padding:0;min-width:0}
.bub .lpcard{max-width:280px;margin-top:6px;background:rgba(255,255,255,.85)}
.bub-row.me .lpcard{background:rgba(255,255,255,.92)}
html[data-theme="night"] .lpcard{background:rgba(16,34,64,.78);border-color:rgba(150,190,255,.2);color:#dce9ff}
html[data-theme="night"] .lpcard .lp-title{color:#dce9ff}
html[data-theme="night"] .bub .lpcard{background:rgba(12,26,50,.9)}

/* ============================================================
   GROUP INVITATIONS
   ============================================================ */
.inv-card{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:10px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(61,134,238,.16),rgba(31,95,191,.10));
  border:1px solid rgba(61,134,238,.35);box-shadow:0 4px 14px rgba(8,34,72,.14)}
.inv-card .mm{min-width:0;flex:1;display:flex;flex-direction:column}
.inv-card .mm b{font-size:13.5px;font-weight:650;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-card .mm span{font-size:11.5px;color:var(--mut)}
.inv-card .inv-btns{display:flex;gap:6px;flex:0 0 auto}
html[data-theme="night"] .inv-card{background:linear-gradient(180deg,rgba(61,134,238,.22),rgba(20,50,100,.3))}
html[data-theme="night"] .inv-card .mm b{color:#dce9ff}
.rolebadge.inv{background:linear-gradient(180deg,#c9f0d8,#4fbf7f);color:#0d4526}

/* ============================================================
   CAPTCHA
   ============================================================ */
.cf-box{margin:0 0 13px;display:none;min-height:68px}
.cf-box.on{display:block}
.cf-note{font-size:11.5px;color:var(--mut);margin-top:5px;text-align:center}

/* ============================================================
   APPS / PRICING
   ============================================================ */
.apps-head{text-align:center;padding:30px 20px 6px}
.apps-head h2{font-size:clamp(26px,4vw,38px);font-weight:700;letter-spacing:-.032em;line-height:1.1;
  color:#fff;text-shadow:0 2px 20px rgba(8,30,66,.45)}
.apps-head p{margin-top:9px;font-size:15px;color:rgba(255,255,255,.9);
  text-shadow:0 1px 12px rgba(8,30,66,.42)}
.owned-note{max-width:520px;margin:16px auto 0;padding:11px 16px;border-radius:var(--r-lg);
  font-size:13px;text-align:center;
  background:var(--g-fill-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.owned-note b{font-weight:660}

.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch;
  padding:26px 4px 12px;max-width:720px;margin:0 auto}
.plan{position:relative;display:flex;flex-direction:column;padding:26px 20px;overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--g-fill);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-lift);
  opacity:0;transform:translateY(22px) scale(.97);
  transition:transform .5s var(--spring), box-shadow .5s var(--ease), border-color .4s}
.plan.in{opacity:1;transform:none;
  transition:opacity .62s var(--ease) var(--d,0s), transform .62s var(--spring) var(--d,0s),
             box-shadow .5s var(--ease), border-color .4s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--g-lift-hi)}
.plan[data-plan="basic"]{border-color:rgba(15,157,88,.34)}
.plan.popular{border-color:rgba(226,164,22,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 3px rgba(226,164,22,.20),
             0 18px 46px rgba(8,34,72,.22)}
.plan-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#f7c94e,#dd9d12);color:#3a2703;
  font-size:11px;font-weight:750;padding:4px 15px;border-radius:0 0 12px 12px;
  box-shadow:0 4px 12px rgba(190,140,20,.42)}
.plan-name{font-size:20px;font-weight:680;letter-spacing:-.024em;margin-top:6px}
.plan-price{display:flex;align-items:baseline;gap:8px;margin:9px 0 3px;flex-wrap:wrap}
.plan-price .n{font-size:32px;font-weight:720;letter-spacing:-.034em;line-height:1;
  color:var(--deep);font-variant-numeric:tabular-nums}
.plan.popular .plan-price .n{color:var(--brand)}
.plan[data-plan="basic"] .plan-price .n{color:var(--up)}
.plan-old{font-size:15px;color:var(--mut);text-decoration:line-through;font-weight:560}
.plan-tag{font-size:13px;color:var(--deep-2);min-height:36px;margin-bottom:12px;line-height:1.45}
.plan-feat{list-style:none;margin:0 0 18px;flex:1;display:flex;flex-direction:column;gap:10px}
.plan-feat li{position:relative;padding-left:25px;font-size:13px;line-height:1.42}
.plan-feat li.on::before{content:"✓";position:absolute;left:0;top:0;color:var(--up);font-weight:750}
.plan-feat li.off{color:var(--mut);opacity:.72}
.plan-feat li.off::before{content:"✕";position:absolute;left:0;top:0;color:var(--mut);font-weight:700}
.plan-feat b{font-weight:680}
.plan-btn{width:100%;justify-content:center;margin-top:auto}
.plan.owned::after{content:"OWNED";position:absolute;top:14px;right:-30px;transform:rotate(38deg);
  background:linear-gradient(180deg,#22c169,#0f9d58);color:#fff;font-size:10px;font-weight:750;
  letter-spacing:.08em;padding:4px 34px;box-shadow:0 4px 12px rgba(10,110,60,.4)}
@keyframes planFlash{0%,100%{box-shadow:var(--g-lift)}
  35%{box-shadow:0 0 0 4px rgba(61,134,238,.5), 0 22px 54px rgba(21,74,155,.34)}}
.plan.flash{animation:planFlash 1.5s var(--ease)}
@media(max-width:1080px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan-lead{font-family:'Poppins',var(--font),sans-serif;font-size:19px;line-height:1.35;font-weight:700;color:var(--brand-3);margin:2px 0 12px;padding-right:56px;text-decoration:none}
.plan-name{font-size:24px}.plan-price .n{font-size:38px}.plan-tag{font-size:15px}.plan-feat li{font-size:15.5px;line-height:1.5;margin-bottom:4px}
@media(min-width:1000px){
  .plans{max-width:none!important;gap:28px;padding:32px 8px 24px}
  .plan{padding:36px 36px 32px;min-height:560px}
  .plan-lead{font-size:24px;line-height:1.3;padding-right:90px}
  .plan-name{font-size:34px}
  .plan-price .n{font-size:54px}
  .plan-tag{font-size:18px;margin-bottom:20px}
  .plan-feat li{font-size:19px;line-height:1.55;padding-left:32px;margin:0 0 8px}
  .plan-feat li::before{transform:scale(1.35);transform-origin:left center}
  .plan-btn{font-size:18px;padding:16px 20px}
}
/* Warrior wears the green diamond weave; the text stays dark on it */
.plan[data-plan="warrior"]{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.50)),url("/assets/img/plan-warrior.webp") center/cover no-repeat;color:#0c2340}
.plan[data-plan="warrior"].soon{opacity:1}
.plan[data-plan="warrior"].soon .plan-price .n{color:#0c2340;opacity:.85}
.plan[data-plan="warrior"] .plan-soon-badge{background:rgba(255,255,255,.7);color:#26402c;border-color:rgba(255,255,255,.8)}
.plan[data-plan="warrior"] .plan-name,.plan[data-plan="warrior"] .plan-price .n,.plan[data-plan="warrior"] .plan-tag,
.plan[data-plan="warrior"] .plan-feat li,.plan[data-plan="warrior"] .plan-lead{color:#0c2340}
.plan[data-plan="warrior"] .plan-feat li.no{color:#26402c}
.plan[data-plan="warrior"].soon .plan-feat li{opacity:1}
.plan[data-plan="warrior"] .plan-btn{background:rgba(255,255,255,.82);color:#0c2340;border-color:rgba(255,255,255,.9)}
html[data-theme="night"] .plan[data-plan="warrior"]{color:#0c2340}
/* a plan that is announced but not sellable yet */
.plan.soon{opacity:.92}
.plan.soon .plan-price .n{color:var(--mut);font-size:26px;letter-spacing:.2px}
.plan.soon .plan-feat li{opacity:.72}
.plan-soon-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  padding:5px 14px;border-radius:0 0 12px 12px;font-size:11px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:#5b6b82;
  background:rgba(12,35,64,.09);border:1px solid rgba(12,35,64,.10);border-top:0}
.plan[data-plan="warrior"].soon{border-color:rgba(12,35,64,.14)}
.plan.soon:hover{transform:none;box-shadow:var(--g-lift)}
.plan-btn[disabled]{opacity:.55;cursor:default;box-shadow:none}
.plan-btn[disabled]:hover{transform:none}
html[data-theme="night"] .plan-soon-badge{color:#a9bad2;background:rgba(255,255,255,.10);border-color:rgba(160,202,250,.20)}
@media(max-width:560px){.plans{grid-template-columns:1fr}}

.pp-box{min-height:120px;display:grid;place-items:center}
.pp-wait{font-size:13px;color:var(--mut);text-align:center;padding:22px}
.pp-sum{display:flex;align-items:center;gap:13px;padding:13px 15px;margin-bottom:15px;
  border-radius:var(--r-lg);background:rgba(255,255,255,.56);
  border:1px solid rgba(12,35,64,.09)}
.pp-sum .pn{flex:1;min-width:0}
.pp-sum .pn b{display:block;font-size:15.5px;font-weight:660}
.pp-sum .pn span{display:block;font-size:12.5px;color:var(--mut)}
.pp-sum .amt{font-size:22px;font-weight:700;letter-spacing:-.028em;font-variant-numeric:tabular-nums}

/* ============================================================
   EMBEDDED APP + FLOATING GLASS BACK BUTTON
   ============================================================ */
#appFrame{position:fixed;inset:0;width:100%;height:100dvh;border:0;margin:0;
  background:#0a0e17;z-index:9000;overscroll-behavior:contain;touch-action:manipulation}
html.app-open,body.app-open{overflow:hidden!important;overscroll-behavior:none!important;height:100%!important}
body.app-open{position:fixed!important;left:0;right:0;width:100%}
.pro-stats{grid-template-columns:repeat(6,1fr)}
.pro-stats .stat.arena b{color:var(--acc,#2b7fff)}
@media (max-width:640px){.pro-stats{grid-template-columns:repeat(3,1fr)}.pro-stats .stat:nth-child(-n+3){border-bottom:1px solid var(--hair)}}
#appLoad{position:fixed;inset:0;z-index:9001;display:grid;place-items:center;
  background:linear-gradient(180deg,#0d1830,#0a0e17);color:#e7ecf3;text-align:center;padding:30px}
#appLoad .spin{width:38px;height:38px;margin:0 auto 14px;border-radius:50%;
  border:3px solid rgba(255,255,255,.18);border-top-color:#7cc4f3;animation:gspin .8s linear infinite}
/* Circular Y2K "bezel bubble" back button — glassy, glossy, always on top.
   z-index sits ABOVE the app iframe (9000) with a wide margin, and the button
   is promoted to its own layer so a heavy iframe (TradingView) repainting can
   never composite over it and make it vanish. */
.app-back{position:fixed;top:calc(74px + env(safe-area-inset-top));left:12px;
  z-index:2147483000;               /* effectively always on top */
  width:44px;height:44px;padding:0;border-radius:50%;touch-action:manipulation;
  display:grid;place-items:center;cursor:pointer;color:#eaf3ff;
  overflow:visible;isolation:isolate;
  -webkit-transform:translateZ(0);transform:translateZ(0);   /* own layer */
  will-change:transform;
  background:
    radial-gradient(120% 120% at 32% 22%, rgba(255,255,255,.16), rgba(255,255,255,.04) 42%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(150,190,255,.08), rgba(70,120,210,.05));
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.28);
  opacity:.55;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.6),
    0 4px 12px rgba(2,12,30,.25);
  transition:transform .3s var(--spring), box-shadow .3s var(--ease),
             background .3s var(--ease);}
/* glossy top-half highlight — the classic Y2K "bubble" sheen */
.app-back::before{content:"";position:absolute;left:8%;right:8%;top:6%;height:44%;
  border-radius:50% 50% 46% 46%/60% 60% 40% 40%;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.02));
  opacity:.6;filter:blur(.3px)}
/* cursor-tracking specular glow */
.app-back::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  background:radial-gradient(60px circle at var(--mx,50%) var(--my,40%),
    rgba(255,255,255,.6),transparent 68%);opacity:0;transition:opacity .3s var(--ease)}
.app-back:hover{opacity:1;transform:translateY(3px) scale(1.06);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 -6px 10px rgba(40,80,160,.4),
    inset 0 8px 16px rgba(255,255,255,.32),
    0 12px 30px rgba(2,12,30,.6),
    0 3px 8px rgba(2,12,30,.45)}
.app-back:hover::after{opacity:1}
.app-back:active{transform:scale(.93)}
.app-back .ar{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(10,30,70,.5));
  transition:transform .3s var(--spring)}
.app-back:hover .ar{transform:translateX(-2px)}
@media(max-width:560px){.app-back{width:48px;height:48px;left:12px;
  top:calc(12px + env(safe-area-inset-top))}.app-back .ar{width:20px;height:20px}}
body.app-open{overflow:hidden}
.stars,.stars-b{position:absolute;inset:0;pointer-events:none;opacity:0;
  background-repeat:no-repeat;
  transition:opacity 1.1s var(--ease) .15s}
.stars{background-image:
    radial-gradient(1.01px 1.01px at 9.17% 64.78%, rgba(255,255,255,0.5), rgba(255,255,255,0)),
    radial-gradient(1.14px 1.14px at 88.82% 42.0%, rgba(255,255,255,0.57), rgba(255,255,255,0)),
    radial-gradient(1.27px 1.27px at 55.01% 73.79%, rgba(255,255,255,0.58), rgba(255,255,255,0)),
    radial-gradient(0.73px 0.73px at 96.72% 73.2%, rgba(255,255,255,0.53), rgba(255,255,255,0)),
    radial-gradient(1.17px 1.17px at 10.62% 79.77%, rgba(255,255,255,0.4), rgba(255,255,255,0)),
    radial-gradient(1.02px 1.02px at 3.05% 29.41%, rgba(255,255,255,0.54), rgba(255,255,255,0)),
    radial-gradient(1.26px 1.26px at 26.98% 51.74%, rgba(255,255,255,0.46), rgba(255,255,255,0)),
    radial-gradient(1.12px 1.12px at 38.38% 68.44%, rgba(255,255,255,0.58), rgba(255,255,255,0)),
    radial-gradient(1.26px 1.26px at 56.33% 38.99%, rgba(255,255,255,0.53), rgba(255,255,255,0)),
    radial-gradient(1.13px 1.13px at 58.53% 38.22%, rgba(255,255,255,0.37), rgba(255,255,255,0)),
    radial-gradient(1.2px 1.2px at 48.07% 53.22%, rgba(255,255,255,0.44), rgba(255,255,255,0)),
    radial-gradient(0.96px 0.96px at 20.09% 41.84%, rgba(255,255,255,0.5), rgba(255,255,255,0)),
    radial-gradient(1.28px 1.28px at 59.37% 79.67%, rgba(255,255,255,0.54), rgba(255,255,255,0)),
    radial-gradient(0.71px 0.71px at 98.26% 33.99%, rgba(255,255,255,0.47), rgba(255,255,255,0)),
    radial-gradient(1.05px 1.05px at 14.57% 4.03%, rgba(255,255,255,0.58), rgba(255,255,255,0)),
    radial-gradient(1.22px 1.22px at 92.84% 50.31%, rgba(255,255,255,0.62), rgba(255,255,255,0)),
    radial-gradient(0.96px 0.96px at 50.09% 75.45%, rgba(255,255,255,0.4), rgba(255,255,255,0)),
    radial-gradient(1.28px 1.28px at 44.35% 20.21%, rgba(255,255,255,0.54), rgba(255,255,255,0)),
    radial-gradient(1.3px 1.3px at 29.08% 24.64%, rgba(255,255,255,0.49), rgba(255,255,255,0)),
    radial-gradient(0.87px 0.87px at 89.41% 58.41%, rgba(255,255,255,0.56), rgba(255,255,255,0)),
    radial-gradient(0.89px 0.89px at 79.34% 8.57%, rgba(255,255,255,0.48), rgba(255,255,255,0)),
    radial-gradient(1.17px 1.17px at 44.51% 10.06%, rgba(255,255,255,0.63), rgba(255,255,255,0)),
    radial-gradient(0.9px 0.9px at 46.59% 43.1%, rgba(255,255,255,0.6), rgba(255,255,255,0)),
    radial-gradient(0.73px 0.73px at 16.7% 73.03%, rgba(255,255,255,0.66), rgba(255,255,255,0)),
    radial-gradient(0.88px 0.88px at 70.35% 83.92%, rgba(255,255,255,0.47), rgba(255,255,255,0)),
    radial-gradient(1.07px 1.07px at 26.49% 29.81%, rgba(255,255,255,0.57), rgba(255,255,255,0)),
    radial-gradient(0.85px 0.85px at 77.64% 10.98%, rgba(255,255,255,0.5), rgba(255,255,255,0)),
    radial-gradient(1.06px 1.06px at 15.21% 20.02%, rgba(255,255,255,0.67), rgba(255,255,255,0)),
    radial-gradient(0.77px 0.77px at 29.11% 72.46%, rgba(255,255,255,0.68), rgba(255,255,255,0)),
    radial-gradient(0.72px 0.72px at 29.73% 70.44%, rgba(255,255,255,0.66), rgba(255,255,255,0)),
    radial-gradient(1.12px 1.12px at 86.68% 30.54%, rgba(255,255,255,0.53), rgba(255,255,255,0)),
    radial-gradient(0.78px 0.78px at 49.63% 63.56%, rgba(255,255,255,0.67), rgba(255,255,255,0)),
    radial-gradient(1.23px 1.23px at 61.73% 60.19%, rgba(255,255,255,0.63), rgba(255,255,255,0)),
    radial-gradient(1.17px 1.17px at 81.42% 2.55%, rgba(255,255,255,0.58), rgba(255,255,255,0)),
    radial-gradient(0.7px 0.7px at 71.54% 10.3%, rgba(255,255,255,0.37), rgba(255,255,255,0)),
    radial-gradient(1.08px 1.08px at 75.82% 16.94%, rgba(255,255,255,0.69), rgba(255,255,255,0)),
    radial-gradient(1.08px 1.08px at 31.1% 20.42%, rgba(255,255,255,0.57), rgba(255,255,255,0)),
    radial-gradient(0.99px 0.99px at 94.58% 62.24%, rgba(255,255,255,0.65), rgba(255,255,255,0)),
    radial-gradient(0.76px 0.76px at 54.99% 62.3%, rgba(255,255,255,0.6), rgba(255,255,255,0)),
    radial-gradient(0.96px 0.96px at 11.88% 77.86%, rgba(255,255,255,0.45), rgba(255,255,255,0)),
    radial-gradient(0.74px 0.74px at 91.29% 79.91%, rgba(255,255,255,0.47), rgba(255,255,255,0)),
    radial-gradient(0.97px 0.97px at 85.38% 20.36%, rgba(255,255,255,0.55), rgba(255,255,255,0)),
    radial-gradient(1.18px 1.18px at 26.95% 70.38%, rgba(255,255,255,0.37), rgba(255,255,255,0)),
    radial-gradient(1.27px 1.27px at 40.95% 14.45%, rgba(255,255,255,0.67), rgba(255,255,255,0)),
    radial-gradient(1.22px 1.22px at 86.59% 38.12%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
    radial-gradient(1.16px 1.16px at 28.56% 6.13%, rgba(255,255,255,0.44), rgba(255,255,255,0)),
    radial-gradient(1.3px 1.3px at 55.8% 1.06%, rgba(255,255,255,0.45), rgba(255,255,255,0)),
    radial-gradient(1.0px 1.0px at 1.94% 56.66%, rgba(255,255,255,0.36), rgba(255,255,255,0)),
    radial-gradient(0.91px 0.91px at 59.38% 14.06%, rgba(255,255,255,0.53), rgba(255,255,255,0)),
    radial-gradient(1.25px 1.25px at 52.76% 34.74%, rgba(255,255,255,0.43), rgba(255,255,255,0)),
    radial-gradient(1.29px 1.29px at 79.29% 32.63%, rgba(255,255,255,0.53), rgba(255,255,255,0)),
    radial-gradient(0.77px 0.77px at 32.31% 74.56%, rgba(255,255,255,0.66), rgba(255,255,255,0)),
    radial-gradient(1.19px 1.19px at 67.28% 71.36%, rgba(255,255,255,0.42), rgba(255,255,255,0)),
    radial-gradient(0.91px 0.91px at 46.91% 78.98%, rgba(255,255,255,0.38), rgba(255,255,255,0)),
    radial-gradient(0.89px 0.89px at 57.74% 21.48%, rgba(255,255,255,0.6), rgba(255,255,255,0)),
    radial-gradient(1.0px 1.0px at 52.09% 59.3%, rgba(255,255,255,0.36), rgba(255,255,255,0)),
    radial-gradient(0.77px 0.77px at 35.25% 75.67%, rgba(255,255,255,0.55), rgba(255,255,255,0)),
    radial-gradient(1.09px 1.09px at 50.69% 7.88%, rgba(255,255,255,0.64), rgba(255,255,255,0)),
    radial-gradient(1.17px 1.17px at 66.13% 2.26%, rgba(255,255,255,0.64), rgba(255,255,255,0)),
    radial-gradient(1.17px 1.17px at 4.21% 44.86%, rgba(255,255,255,0.55), rgba(255,255,255,0)),
    radial-gradient(0.74px 0.74px at 4.49% 7.67%, rgba(255,255,255,0.5), rgba(255,255,255,0)),
    radial-gradient(0.95px 0.95px at 19.72% 13.64%, rgba(255,255,255,0.64), rgba(255,255,255,0)),
    radial-gradient(1.14px 1.14px at 85.12% 11.59%, rgba(255,255,255,0.36), rgba(255,255,255,0)),
    radial-gradient(1.18px 1.18px at 51.43% 28.21%, rgba(255,255,255,0.44), rgba(255,255,255,0)),
    radial-gradient(1.17px 1.17px at 65.36% 40.0%, rgba(255,255,255,0.63), rgba(255,255,255,0)),
    radial-gradient(1.06px 1.06px at 2.13% 74.72%, rgba(255,255,255,0.58), rgba(255,255,255,0)),
    radial-gradient(0.79px 0.79px at 29.31% 51.56%, rgba(255,255,255,0.69), rgba(255,255,255,0)),
    radial-gradient(1.17px 1.17px at 99.24% 27.54%, rgba(255,255,255,0.56), rgba(255,255,255,0)),
    radial-gradient(1.14px 1.14px at 6.88% 14.35%, rgba(255,255,255,0.42), rgba(255,255,255,0)),
    radial-gradient(1.27px 1.27px at 32.51% 58.82%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
    radial-gradient(1.1px 1.1px at 28.07% 48.37%, rgba(255,255,255,0.62), rgba(255,255,255,0)),
    radial-gradient(0.72px 0.72px at 16.56% 64.86%, rgba(255,255,255,0.65), rgba(255,255,255,0));}
.stars-b{background-image:
    radial-gradient(2.01px 2.01px at 65.77% 29.63%, rgba(255,255,255,0.69), rgba(255,255,255,0)),
    radial-gradient(1.59px 1.59px at 69.15% 29.11%, rgba(255,255,255,0.67), rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 78.4% 3.7%, rgba(255,255,255,0.61), rgba(255,255,255,0)),
    radial-gradient(1.61px 1.61px at 29.58% 47.21%, rgba(255,255,255,0.65), rgba(255,255,255,0)),
    radial-gradient(1.89px 1.89px at 14.63% 70.69%, rgba(255,255,255,0.87), rgba(255,255,255,0)),
    radial-gradient(1.98px 1.98px at 93.85% 0.51%, rgba(255,255,255,0.86), rgba(255,255,255,0)),
    radial-gradient(2.09px 2.09px at 45.64% 15.25%, rgba(255,255,255,0.73), rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 88.76% 7.31%, rgba(255,255,255,0.67), rgba(255,255,255,0)),
    radial-gradient(1.32px 1.32px at 24.39% 67.92%, rgba(255,255,255,0.77), rgba(255,255,255,0)),
    radial-gradient(1.47px 1.47px at 54.33% 43.3%, rgba(255,255,255,0.81), rgba(255,255,255,0)),
    radial-gradient(1.66px 1.66px at 51.34% 53.07%, rgba(255,255,255,0.88), rgba(255,255,255,0)),
    radial-gradient(2.08px 2.08px at 91.1% 46.69%, rgba(255,255,255,0.95), rgba(255,255,255,0)),
    radial-gradient(1.91px 1.91px at 95.9% 16.34%, rgba(255,255,255,0.87), rgba(255,255,255,0)),
    radial-gradient(1.69px 1.69px at 25.68% 0.66%, rgba(255,255,255,0.68), rgba(255,255,255,0)),
    radial-gradient(1.63px 1.63px at 36.95% 34.5%, rgba(255,255,255,0.8), rgba(255,255,255,0)),
    radial-gradient(1.67px 1.67px at 42.16% 64.73%, rgba(255,255,255,0.92), rgba(255,255,255,0)),
    radial-gradient(1.44px 1.44px at 42.77% 21.48%, rgba(255,255,255,0.95), rgba(255,255,255,0)),
    radial-gradient(1.32px 1.32px at 97.27% 83.94%, rgba(255,255,255,0.78), rgba(255,255,255,0)),
    radial-gradient(1.96px 1.96px at 66.22% 78.23%, rgba(255,255,255,0.75), rgba(255,255,255,0)),
    radial-gradient(1.79px 1.79px at 63.57% 23.48%, rgba(255,255,255,0.84), rgba(255,255,255,0)),
    radial-gradient(1.96px 1.96px at 14.94% 56.04%, rgba(255,255,255,0.66), rgba(255,255,255,0)),
    radial-gradient(1.68px 1.68px at 50.69% 80.58%, rgba(255,255,255,0.76), rgba(255,255,255,0)),
    radial-gradient(2.17px 2.17px at 32.49% 46.42%, rgba(255,255,255,0.84), rgba(255,255,255,0)),
    radial-gradient(2.02px 2.02px at 24.27% 21.7%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
    radial-gradient(1.78px 1.78px at 60.07% 18.23%, rgba(255,255,255,0.85), rgba(255,255,255,0)),
    radial-gradient(1.89px 1.89px at 19.03% 66.07%, rgba(255,255,255,0.76), rgba(255,255,255,0));
  animation:twinkle 4.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.42}}

/* ============================================================
   NIGHT SKY
   The day sky never leaves; a night layer, a moon, and a starfield
   simply cross-fade over it, so switching reads as dusk falling
   rather than a page reload.
   ============================================================ */
.sky-night{position:absolute;inset:0;opacity:0;
  transition:opacity .75s var(--ease);
  background:
    radial-gradient(74vw 58vh at 10% 112%, rgba(46,92,158,.38), rgba(46,92,158,0) 62%),
    radial-gradient(50vw 44vh at 88% 4%, rgba(96,128,200,.22), rgba(96,128,200,0) 60%),
    linear-gradient(180deg,#040a1a 0%,#08122a 16%,#0e1c3d 40%,#13254b 66%,#182e57 100%)}
.sky-sun{transition:opacity .7s var(--ease)}

html[data-theme="night"] .sky-night,
html[data-theme="night"] .stars,
html[data-theme="night"] .stars-b{opacity:1}
html[data-theme="night"] .sky-sun{opacity:0}
html[data-theme="night"] .sky-scrim{
  background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.06) 55%,rgba(0,0,0,0) 82%)}
html[data-theme="night"] .coin > i{
  filter:drop-shadow(0 12px 26px rgba(0,8,24,.62))
         drop-shadow(0 0 20px rgba(140,190,255,.20)) brightness(.93)}
html[data-theme="night"] .coin:hover > i{
  filter:drop-shadow(0 18px 34px rgba(0,8,24,.7))
         drop-shadow(0 0 26px rgba(150,200,255,.34)) brightness(1.02)}
html[data-theme="night"] body.no-sky .sky-day{background:linear-gradient(180deg,#0a1425,#0d1a30)}
@media(prefers-reduced-motion:reduce){.stars-b{animation:none}}

/* ============================================================
   NIGHT PALETTE
   ============================================================ */
html[data-theme="night"]{
  --deep:#e9f1fc;
  --deep-2:#aac4e2;
  --mut:#7e97b6;
  --brand:#4a8cf0;
  --brand-2:#6fa9f8;
  --brand-3:#a9cdff;
  --gold:#f3bf42;
  --gold-2:rgba(226,164,22,.20);
  --up:#3ddc84;
  --down:#ff6f63;

  --g-fill:linear-gradient(180deg,rgba(26,44,77,.78),rgba(14,26,50,.68));
  --g-fill-2:linear-gradient(180deg,rgba(26,44,77,.58),rgba(14,26,50,.46));
  --g-edge:rgba(150,192,248,.22);
  --g-lift:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.04),
           0 12px 38px rgba(0,6,20,.52);
  --g-lift-hi:inset 0 1px 0 rgba(255,255,255,.17), inset 0 -1px 0 rgba(255,255,255,.06),
              0 22px 56px rgba(0,6,20,.64);
  --hair:rgba(160,202,250,.15);
  color-scheme:dark;
}
html[data-theme="night"] body{background:#0a1327}
html[data-theme="night"] ::selection{background:rgba(111,169,248,.34)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme="night"] .card,
  html[data-theme="night"] .modal,
  html[data-theme="night"] .menu,
  html[data-theme="night"] .msg-wrap,
  html[data-theme="night"] .sresults,
  html[data-theme="night"] .emo-pop{background:#16294a}
}

/* --- bars --- */
html[data-theme="night"] .chrome{
  background:linear-gradient(180deg,rgba(18,33,60,.72),rgba(11,21,42,.58));
  border-bottom-color:rgba(150,192,248,.18)}
html[data-theme="night"] .tabbar{
  background:linear-gradient(180deg,rgba(14,26,50,.80),rgba(9,18,36,.92));
  border-top-color:rgba(150,192,248,.18)}
html[data-theme="night"] .cnav-b.on{
  background:linear-gradient(180deg,rgba(90,148,235,.42),rgba(52,102,182,.34));
  color:#eaf3ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 5px 16px rgba(0,8,24,.44)}
html[data-theme="night"] .tb.on{color:var(--brand-3);background:rgba(111,169,248,.16)}

/* --- controls --- */
html[data-theme="night"] .fld,
html[data-theme="night"] .rt,
html[data-theme="night"] .searchbox input{
  background:rgba(255,255,255,.07);border-color:rgba(160,202,250,.20);
  box-shadow:inset 0 1px 2px rgba(0,6,20,.30)}
html[data-theme="night"] .fld::placeholder,
html[data-theme="night"] .rt:empty::before,
html[data-theme="night"] .searchbox input::placeholder{color:#6f88a8}
html[data-theme="night"] .fld:focus,
html[data-theme="night"] .rt:focus,
html[data-theme="night"] .searchbox input:focus{
  background:rgba(255,255,255,.12);border-color:var(--brand-2)}
html[data-theme="night"] .btn-lite{
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.07));
  color:var(--brand-3);border-color:rgba(160,202,250,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 5px 16px rgba(0,6,20,.34)}
html[data-theme="night"] .fbtn,
html[data-theme="night"] .chip,
html[data-theme="night"] .tag,
html[data-theme="night"] .rx,
html[data-theme="night"] .role-pick span,
html[data-theme="night"] .font-opts label,
html[data-theme="night"] .prev,
html[data-theme="night"] .pp-sum,
html[data-theme="night"] .ucard{
  background:rgba(255,255,255,.075);border-color:rgba(160,202,250,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
html[data-theme="night"] .fbtn:hover,
html[data-theme="night"] .chip:hover,
html[data-theme="night"] .rx:hover,
html[data-theme="night"] .role-pick label:hover span,
html[data-theme="night"] .font-opts label:hover,
html[data-theme="night"] .ucard:hover{background:rgba(255,255,255,.16)}
html[data-theme="night"] .tag:hover,
html[data-theme="night"] .chip.on,
html[data-theme="night"] .fbtn.on,
html[data-theme="night"] .role-pick input:checked + span{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#08172e}
html[data-theme="night"] .rx.mine{
  background:linear-gradient(180deg,rgba(111,169,248,.30),rgba(74,140,240,.20));
  border-color:rgba(111,169,248,.44)}
html[data-theme="night"] .gr-ic{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(120,165,230,.12));
  border-color:rgba(160,202,250,.24)}

/* --- rows and washes --- */
html[data-theme="night"] .urow:hover,
html[data-theme="night"] .snav a:hover,
html[data-theme="night"] .mecard-top:hover,
html[data-theme="night"] .stat:hover,
html[data-theme="night"] .mrow:hover,
html[data-theme="night"] .nrow:hover,
html[data-theme="night"] .sres:hover,
html[data-theme="night"] .act:hover,
html[data-theme="night"] .qk:hover,
html[data-theme="night"] .snav-item:hover{background:rgba(255,255,255,.09)}
html[data-theme="night"] .replies{background:rgba(0,0,0,.20)}
html[data-theme="night"] .msg-side{background:rgba(0,0,0,.16)}
html[data-theme="night"] .mrow.on{
  background:linear-gradient(180deg,rgba(111,169,248,.24),rgba(74,140,240,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 14px rgba(0,6,20,.38)}
html[data-theme="night"] .nrow.new{background:rgba(111,169,248,.16)}
html[data-theme="night"] .loadmore:hover{background:rgba(255,255,255,.12)}

/* --- floating surfaces --- */
html[data-theme="night"] .modal,
html[data-theme="night"] .menu{
  background:linear-gradient(180deg,rgba(27,46,80,.94),rgba(16,29,54,.90));
  border-color:rgba(160,202,250,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 32px 80px rgba(0,4,16,.62)}
html[data-theme="night"] .modal-h button:hover{background:rgba(255,255,255,.12)}
html[data-theme="night"] .ovl{background:rgba(2,8,20,.62)}
html[data-theme="night"] .tabs{background:rgba(0,0,0,.30);border-color:rgba(160,202,250,.16)}
html[data-theme="night"] .tab-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.11));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 3px 10px rgba(0,6,20,.44)}
html[data-theme="night"] .tab.on{color:#eaf3ff}
html[data-theme="night"] .bub{
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.07));
  border-color:rgba(160,202,250,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 4px 14px rgba(0,6,20,.36)}
html[data-theme="night"] .daysep span{
  background:rgba(255,255,255,.09);border-color:rgba(160,202,250,.20)}
html[data-theme="night"] .att-chip,
html[data-theme="night"] .media > figure,
html[data-theme="night"] .att-progress{background:rgba(255,255,255,.08)}
html[data-theme="night"] .media,
html[data-theme="night"] .att-chip{border-color:rgba(160,202,250,.20)}
html[data-theme="night"] .media.n1 img{background:rgba(255,255,255,.05)}

/* --- badges, tickers, plans --- */
html[data-theme="night"] .rb-investor{background:rgba(61,220,132,.16);
  border-color:rgba(61,220,132,.34);color:#7ff0b4}
html[data-theme="night"] .rb-trader{background:rgba(111,169,248,.18);
  border-color:rgba(111,169,248,.36);color:#a9cdff}
html[data-theme="night"] .rb-creator{background:rgba(243,191,66,.18);
  border-color:rgba(243,191,66,.36);color:#ffd97a}
html[data-theme="night"] .post-body .cash{background:rgba(243,191,66,.20);color:#ffd97a}
html[data-theme="night"] .post-body .cash:hover{background:rgba(243,191,66,.34)}
html[data-theme="night"] .plan[data-plan="basic"]{border-color:rgba(61,220,132,.34)}
html[data-theme="night"] .plan.popular{border-color:rgba(243,191,66,.44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 3px rgba(243,191,66,.18),
             0 20px 50px rgba(0,6,20,.54)}
html[data-theme="night"] .gate-err{background:rgba(255,111,99,.14);
  border-color:rgba(255,111,99,.34);color:#ffb3ab}
html[data-theme="night"] .gate-info{background:rgba(111,169,248,.14);
  border-color:rgba(111,169,248,.32);color:var(--brand-3)}

/* --- the specular highlight has to darken too, or it flares white --- */
html[data-theme="night"] .spec::after{
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),
             rgba(180,215,255,.22),rgba(180,215,255,.06) 44%,transparent 72%)}
html[data-theme="night"] .btn-lite::after,
html[data-theme="night"] .app-back::after{
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),
             rgba(180,215,255,.30),transparent 70%)}

/* ============================================================
   THEME SWITCH
   ============================================================ */
.theme-btn{position:relative;width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:16px;line-height:1;color:#fff;
  text-shadow:0 1px 8px rgba(8,30,66,.36);
  transition:all .34s var(--spring)}
.theme-btn:hover{background:rgba(255,255,255,.26);transform:translateY(-1px) rotate(-12deg)}
.theme-btn:active{transform:scale(.9)}
.theme-btn .ic{display:block;transition:transform .5s var(--spring), opacity .3s var(--ease)}

.seg{position:relative;display:flex;padding:4px;border-radius:var(--r-pill);
  background:rgba(12,35,64,.07);border:1px solid rgba(255,255,255,.5);margin-top:7px}
html[data-theme="night"] .seg{background:rgba(0,0,0,.30);border-color:rgba(160,202,250,.16)}
.seg-pill{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.86));
  box-shadow:inset 0 1px 0 #fff, 0 3px 10px rgba(8,34,72,.20);
  transition:transform .48s var(--spring), width .48s var(--spring);pointer-events:none;z-index:0}
html[data-theme="night"] .seg-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.11));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 3px 10px rgba(0,6,20,.44)}
.seg button{position:relative;z-index:1;flex:1;padding:9px 4px;font-size:13px;font-weight:600;
  color:var(--mut);border-radius:var(--r-pill);transition:color .3s var(--ease);
  display:flex;align-items:center;justify-content:center;gap:6px}
.seg button:hover{color:var(--deep-2)}
.seg button.on{color:var(--brand-3)}
html[data-theme="night"] .seg button.on{color:#eaf3ff}

/* ============================================================
   COINS — now scattered, so each one is centred on its own point
   ============================================================ */
.coin{--w:min(var(--sz,120px),22vw);width:var(--w);margin-left:calc(var(--w) / -2)}
@media(max-width:860px){.coin{--w:min(var(--sz,120px),17vw)}}

/* A soft pool of shade behind the welcome text, so a coin drifting
   past can never wash out the headline. */
.gate-hero{position:relative}
.gate-hero::before{content:"";position:absolute;left:50%;top:-14%;transform:translateX(-50%);
  width:132%;height:150%;pointer-events:none;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(6,24,54,.34), rgba(6,24,54,.14) 58%, transparent 78%)}

/* ============================================================
   NAVIGATION — pushed out to the edges of the window
   ============================================================ */
.chrome-in{max-width:none;padding:0 26px}
.shell{max-width:none;padding-left:26px;padding-right:26px;
  grid-template-columns:232px minmax(0,1fr) 316px;gap:22px}
@media(max-width:1400px){.shell{grid-template-columns:222px minmax(0,1fr) 292px}}
@media(max-width:1080px){
  .chrome-in{padding:0 16px}
  .shell{padding-left:16px;padding-right:16px}
}
@media(max-width:860px){
  .chrome-in{padding:0 12px}
  .shell{padding-left:12px;padding-right:12px}
}

/* unread count riding on the avatar, now that alerts live in the profile */
.me-btn{position:relative}
.me-wrap{position:relative;display:block;flex:0 0 auto}
.me-dot{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--r-pill);background:linear-gradient(180deg,#ff5b52,#dc2f26);color:#fff;
  font-size:10.5px;font-weight:750;display:grid;place-items:center;text-shadow:none;
  border:2px solid rgba(255,255,255,.92);box-shadow:0 2px 7px rgba(180,30,25,.5);
  animation:dotPop .42s var(--spring)}
html[data-theme="night"] .me-dot{border-color:rgba(20,36,64,.9)}
.me-dot[data-n="0"],.me-dot:empty{display:none}
@keyframes dotPop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.tab .tdot{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:6px;border-radius:var(--r-pill);font-size:10px;font-weight:750;color:#fff;
  background:linear-gradient(180deg,#ff5b52,#dc2f26);vertical-align:middle}
.tab .tdot[data-n="0"]{display:none}

/* ============================================================
   PROFILE COVER — LinkedIn-style, swappable
   ============================================================ */
.pro-cover{height:250px;position:relative;overflow:hidden;
  background:linear-gradient(118deg,#1f5fbf,#3d86ee 46%,#7cc4f3)}
.pro-cover.has-img{background:var(--cv) center/cover no-repeat}
.pro-cover.has-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,44,.06),rgba(6,20,44,.28))}
.cover-edit{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;font-size:16px;color:#fff;
  background:rgba(10,26,54,.42);border:1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 6px 20px rgba(4,16,38,.36);
  transition:all .34s var(--spring)}
.cover-edit:hover{background:rgba(10,26,54,.62);transform:translateY(-2px) scale(1.06)}
.cover-edit:active{transform:scale(.92)}
@media(max-width:560px){.pro-cover{height:250px}}

.cover-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cover-opt{position:relative;height:74px;border-radius:var(--r-md);overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:var(--cv) center/cover no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px rgba(8,34,72,.16);
  transition:all .34s var(--spring)}
.cover-opt.grad{background:linear-gradient(118deg,#1f5fbf,#3d86ee 46%,#7cc4f3)}
.cover-opt:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,34,72,.24)}
.cover-opt.on{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(61,134,238,.34)}
.cover-opt span{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;font-size:11px;
  font-weight:620;color:#fff;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(4,16,38,.72))}
.cover-opt.on::after{content:"✓";position:absolute;top:6px;right:8px;width:20px;height:20px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(8,34,72,.34)}

/* ============================================================
   GROUPS
   ============================================================ */
.grp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:16px;
  padding:0 16px 18px}
.grp-card{position:relative;border-radius:var(--r-lg);overflow:hidden;text-align:left;
  background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:all .42s var(--spring)}
html[data-theme="night"] .grp-card{background:rgba(255,255,255,.075);
  border-color:rgba(160,202,250,.18)}
.grp-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(8,34,72,.22)}
html[data-theme="night"] .grp-card:hover{background:rgba(255,255,255,.14)}
.grp-cap{height:88px;background:linear-gradient(118deg,#1f5fbf,#3d86ee 46%,#7cc4f3);
  position:relative}
.grp-cap.has-img{background:var(--cv) center/cover no-repeat}
.grp-lock{position:absolute;top:9px;right:9px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:680;color:#fff;background:rgba(10,26,54,.56);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.grp-body{padding:13px 15px 15px}
.grp-body b{display:block;font-size:15.5px;font-weight:660;letter-spacing:-.018em;line-height:1.3}
.grp-body .gmeta{display:block;font-size:12px;color:var(--mut);margin-top:3px}
.grp-body .gdesc{font-size:12.5px;color:var(--deep-2);line-height:1.45;margin-top:8px;
  height:36px;overflow:hidden}
.grp-body .gacts{display:flex;gap:7px;margin-top:12px}

.grp-head{overflow:hidden;margin-bottom:18px}
.grp-banner{height:172px;position:relative;
  background:linear-gradient(118deg,#1f5fbf,#3d86ee 46%,#7cc4f3)}
.grp-banner.has-img{background:var(--cv) center/cover no-repeat}
.grp-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,44,.05),rgba(6,20,44,.34))}
.grp-title{position:absolute;left:20px;right:20px;bottom:14px;z-index:1;
  display:flex;align-items:flex-end;gap:13px}
.grp-title .grp-title-t{min-width:0}
.grp-title #grpAv{flex:0 0 56px}
.grp-title h2{font-size:25px;font-weight:690;letter-spacing:-.028em;color:#fff;line-height:1.15;
  text-shadow:0 2px 16px rgba(4,16,38,.6)}
.grp-title span{display:block;font-size:13px;color:rgba(255,255,255,.9);margin-top:3px;
  text-shadow:0 1px 12px rgba(4,16,38,.6)}
.grp-bar{display:flex;align-items:center;gap:9px;padding:14px 20px;flex-wrap:wrap}
.grp-about{padding:0 20px 16px;font-size:14px;line-height:1.6;color:var(--deep-2);max-width:66ch}
.grp-faces{display:flex;align-items:center;margin-right:4px}
.grp-faces .av{margin-left:-9px;box-shadow:0 0 0 2.5px rgba(255,255,255,.85)}
html[data-theme="night"] .grp-faces .av{box-shadow:0 0 0 2.5px rgba(22,40,72,.9)}
.grp-faces .av:first-child{margin-left:0}
.grp-faces .grp-more{margin-left:-9px;min-width:28px;height:28px;padding:0 7px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:var(--deep-2);background:rgba(12,35,64,.10);border-radius:var(--r-pill);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.85)}
html[data-theme="night"] .grp-faces .grp-more{color:var(--txt);background:rgba(255,255,255,.14);
  box-shadow:0 0 0 2.5px rgba(22,40,72,.9)}
@media(max-width:560px){
  .grp-banner{height:132px}
  .grp-title h2{font-size:20px}
}

/* profile & group cover art */
.cv-alps{--cv:url("/assets/img/cover-alps.webp")}
.cv-gold{--cv:url("/assets/img/cover-gold.webp")}
.cv-shifu{--cv:url("/assets/img/cover-shifu.webp")}
.cv-knight{--cv:url("/assets/img/cover-knight.webp")}
.cv-coins{--cv:url("/assets/img/cover-coins.webp")}

/* ============================================================
   THREAD SPINE — x.com style.
   One 2px rail sits exactly under the centre of the author's avatar
   (16px pad + 44px avatar → centre x = 38). It starts just below the
   avatar, runs down through the card, and passes through the centre of
   every reply avatar, stopping at the last one — the same geometry a
   conversation has on x.com.
   ============================================================ */
.post{--spine:rgba(12,35,64,.25)}
html[data-theme="night"] .post{--spine:rgba(190,220,255,.25)}
.replies{position:relative}
.post:has(.replies.on) .post-h,
.post:has(.replies.on) .post-body,
.post:has(.replies.on) .rx-row,
.post:has(.replies.on) .post-acts{position:relative}
.post:has(.replies.on .rep) .post-h::after{content:"";position:absolute;left:37px;top:62px;bottom:0;
  width:2px;border-radius:2px;background:var(--spine);pointer-events:none}
.post:has(.replies.on .rep) .post-body::before,
.post:has(.replies.on .rep) .rx-row::before,
.post:has(.replies.on .rep) .post-acts::before{content:"";position:absolute;left:37px;top:0;bottom:-1px;
  width:2px;border-radius:2px;background:var(--spine);pointer-events:none}
.rep{position:relative;padding-left:23px}
.rep::before{content:"";position:absolute;left:37px;top:0;bottom:0;
  width:2px;border-radius:2px;background:var(--spine);pointer-events:none}
/* the rail is scenery: avatars, icons and text always sit on top of it */
.post-h > a,.post-h .post-id,.post-body,.rx-row .rx,.post-acts .act,
.rep > a,.rep .rep-b,.rep .post-menu{position:relative;z-index:1}
.post:has(.replies.on .rep) .post-h::after,
.post:has(.replies.on .rep) .post-body::before,
.post:has(.replies.on .rep) .rx-row::before,
.post:has(.replies.on .rep) .post-acts::before,
.rep::before{z-index:0}
.rep:last-of-type::before{bottom:auto;height:27px}
/* The rail must stop at the last replier's avatar. `:last-of-type` alone
   never matched, because the composer (.rep-form) is a div as well — so the
   final reply is tagged explicitly. */
.rep.rep-last::before{bottom:auto;height:27px}
.rep-form{padding-left:23px}
@media(max-width:860px){
  /* the post body is not indented on phones, so the rail would cross the
     text — start it at the actions row instead, still on the avatar line */
  .post:has(.replies.on .rep) .post-h::after,
  .post:has(.replies.on .rep) .post-body::before,
  .post:has(.replies.on .rep) .rx-row::before{display:none}
  .rep,.rep-form{padding-left:23px}
}

/* ============================================================
   RESPONSIVE — deliberately the last block in the sheet.

   These rules used to sit above the full-width overrides, which meant a
   phone kept the three-column desktop grid and the middle column
   collapsed to nothing. Everything size-related now lives here.
   ============================================================ */

/* --- large desktop / MacBook --- */
@media(min-width:1601px){
  .shell{grid-template-columns:248px minmax(0,1fr) 340px;gap:24px;
    padding-left:34px;padding-right:34px}
  .chrome-in{padding:0 34px}
}
@media(max-width:1600px){
  .shell{grid-template-columns:236px minmax(0,1fr) 320px;gap:22px}
}
@media(max-width:1400px){
  .shell{grid-template-columns:224px minmax(0,1fr) 296px;gap:20px}
}
@media(max-width:1240px){
  .shell{grid-template-columns:212px minmax(0,1fr) 268px;gap:18px;
    padding-left:20px;padding-right:20px}
  .chrome-in{padding:0 20px}
}

/* --- iPad landscape and small laptops: drop the right rail --- */
@media(max-width:1080px){
  .shell{grid-template-columns:206px minmax(0,1fr);gap:18px;
    padding-left:18px;padding-right:18px}
  .col-r{display:none}
  .chrome-in{padding:0 18px}
  .plans{grid-template-columns:repeat(2,1fr)}
  .grid-u{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
}

/* --- the two side panels belong to Home ---
   Everywhere else they are hidden and the centre column takes the room back,
   so Explore, Messages, Groups and profiles get the full width. */
body:not(.view-home) .col-r{display:none}
body:not(.view-home) #tickersCard{display:none}
@media(min-width:1601px){ body:not(.view-home) .shell{grid-template-columns:248px minmax(0,1fr)} }
@media(max-width:1600px){ body:not(.view-home) .shell{grid-template-columns:236px minmax(0,1fr)} }
@media(max-width:1400px){ body:not(.view-home) .shell{grid-template-columns:224px minmax(0,1fr)} }
@media(max-width:1240px){ body:not(.view-home) .shell{grid-template-columns:212px minmax(0,1fr)} }
@media(max-width:1080px){ body:not(.view-home) .shell{grid-template-columns:206px minmax(0,1fr)} }
@media(max-width:900px){ body:not(.view-home) .shell{grid-template-columns:minmax(0,1fr)} }

/* --- iPad portrait, Android tablets, large phones --- */
@media(max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);gap:16px;
    padding:16px 16px calc(96px + env(safe-area-inset-bottom))}
  .col-l{display:none}
  .tabbar{display:block}
  .chrome{padding-top:env(safe-area-inset-top)}
  .chrome-in{height:56px;padding:0 16px}
  .searchbox{flex:1 1 auto;max-width:none}
  .msg-wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .msg-side{border-right:none;border-bottom:1px solid var(--hair)}
  .msg-list{max-height:210px}
  body.thread-open .msg-side{display:none}
  body:not(.thread-open) #msgThread{display:none!important}
  body:not(.thread-open) #msgEmpty{display:none!important}
  .pro-main{margin-top:-42px}
  .coin{--w:min(var(--sz,120px),17vw);opacity:.8}
}

/* --- phones --- */
@media(max-width:640px){
  .shell{padding:12px 12px calc(92px + env(safe-area-inset-bottom));gap:14px}
  .chrome-in{height:54px;padding:0 12px;gap:9px}
  .brand .bfull{display:none}
  .brand .bmark{width:30px;height:30px;flex:0 0 30px}
  .me-btn #meNameTop{display:none}
  .card,.post,.composer,.pro-head,.grp-head{border-radius:16px}
  .msg-wrap{border-radius:18px}
  .post-h{padding:13px 13px 0}
  .post-body,.rx-row{padding-left:13px;padding-right:13px}
  .comp-top{padding:13px 13px 8px}
  .comp-bar{padding:8px 13px 12px;gap:6px}
  .fbtn{width:34px;height:34px}
  .act{padding:8px 11px}
  .pro-cover{height:250px}
  .pro-main{margin-top:-38px;padding:0 14px 12px;gap:12px}
  .pro-bio,.pro-meta{padding-left:14px;padding-right:14px}
  .pro-stats .stat b{font-size:18px}
  .tabs{margin:0 10px 12px}
  .tab{padding:9px 15px}
  .tab{font-size:12px;padding:8px 2px}
  .plans{grid-template-columns:1fr;padding:18px 2px 10px}
  .grid-u{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:0 12px 14px}
  .grp-grid{grid-template-columns:1fr;padding:0 12px 14px}
  .grp-banner{height:124px}
  .grp-title h2{font-size:19px}
  .modal{border-radius:20px}
  .modal-b{padding:16px}
  .ovl{padding:20px 12px}
  .msg-body{max-height:none;min-height:200px;padding:14px 12px 6px}
  .bub{max-width:82%}
  .toast-wrap{bottom:calc(78px + env(safe-area-inset-bottom))}
  .app-back{top:calc(10px + env(safe-area-inset-top));left:10px;height:40px}
}

/* --- narrow phones --- */
@media(max-width:400px){
  .searchbox input{font-size:12.5px;padding-left:30px}
  .frow.two{grid-template-columns:1fr}
  .role-pick{grid-template-columns:1fr}
  .role-pick.four{grid-template-columns:repeat(2,1fr)}
  .cover-grid{grid-template-columns:1fr}
  .av-92{width:82px;height:82px;font-size:30px}
  .pro-idb h2{font-size:19px}
  .tb{font-size:9.5px}
  .tb i{font-size:17px}
}

/* --- short landscape phones: let the page breathe --- */
@media(max-height:520px) and (orientation:landscape){
  .msg-body{max-height:180px;min-height:120px}
  .msg-list{max-height:150px}
  .gate-body{padding-top:calc(18px + env(safe-area-inset-top))}
}

/* --- pointer-coarse devices get bigger targets --- */
@media(pointer:coarse){
  .act,.chip,.tag,.rx{min-height:36px}
  .fbtn{min-width:36px;min-height:36px}
  .snav a{padding:11px 12px}
  .cover-edit{width:44px;height:44px}
}

/* ============================================================
   CLOUD STATUS — only shows when something needs saying
   ============================================================ */
.cloud-pill{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:290;
  display:none;padding:9px 18px;border-radius:var(--r-pill);font-size:12.5px;font-weight:620;
  color:#fff;background:rgba(10,28,56,.86);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 12px 32px rgba(6,22,48,.44);pointer-events:none}
.cloud-pill.on{display:block;animation:tin .4s var(--spring)}
.cloud-pill.bad{background:rgba(140,26,20,.92);border-color:rgba(255,160,150,.3)}
@media(max-width:640px){.cloud-pill{bottom:calc(80px + env(safe-area-inset-bottom))}}

/* ---------- connection check ---------- */
.diag-row{display:flex;align-items:flex-start;gap:11px;padding:10px 2px;
  border-bottom:1px solid var(--hair);font-size:13px;line-height:1.45}
.diag-row:last-child{border-bottom:none}
.diag-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;margin-top:6px}
.diag-good .diag-dot{background:var(--up)}
.diag-warn .diag-dot{background:var(--gold)}
.diag-bad  .diag-dot{background:var(--down)}
.diag-name{font-weight:640;flex:0 0 168px}
.diag-detail{color:var(--mut);word-break:break-word;flex:1;min-width:0;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px}
.diag-bad .diag-detail{color:var(--down)}
@media(max-width:560px){
  .diag-row{flex-wrap:wrap}
  .diag-name{flex:1 1 100%}
  .diag-detail{padding-left:20px}
}

/* five tabs, centred as one group */
.tabbar-in{grid-template-columns:repeat(5,1fr)}
.tb{padding:7px 1px;font-size:10px;gap:1px}
.tb i{font-size:17px}
.tb .pip{right:calc(50% - 17px);min-width:15px;height:15px;font-size:9px}
@media(max-width:400px){
  .tb{font-size:8.5px;letter-spacing:-.02em}
  .tb i{font-size:16px}
}
@media(max-width:340px){
  .tb span,.tb{font-size:8px}
}

/* shifu mark used as a menu icon */
.ico-shifu{display:inline-block;width:19px;height:19px;flex:0 0 19px;vertical-align:-4px;
  background:var(--logo) center/contain no-repeat;font-style:normal}
.tb .ico-shifu{width:18px;height:18px;vertical-align:0}
.snav-item .ico-shifu{margin-right:1px}

/* direct / groups switch above the conversation list */
.msg-modes{padding:10px 10px 0}
.msg-mode{margin:0}
.msg-mode button{padding:7px 4px;font-size:12.5px;gap:5px}
.grp-row .gav,.inv-card .gav{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;
  overflow:hidden;background-size:cover;background-position:center;
  /* the ring hugs the icon exactly and is painted OUTSIDE it — it can
     never cover the picture, matching the .av avatar ring */
  box-shadow:0 0 0 1.5px rgba(255,255,255,.78), 0 2px 8px rgba(8,34,72,.22)}
.bub-row .who{display:block;font-size:11px;font-weight:650;color:var(--brand-3);margin-bottom:2px}
html[data-theme="night"] .bub-row .who{color:var(--brand-3)}
.msg-head .gav{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand-2),var(--brand));display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:14px;overflow:hidden;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.78), 0 2px 8px rgba(8,34,72,.22)}
/* built-in covers only carry the image in --cv; without this rule the
   avatar stayed on the blue gradient even after a cover was chosen */
.gav.has-img{background-image:var(--cv);color:transparent}
.gav-lg{width:56px;height:56px;flex:0 0 56px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:19px;
  overflow:hidden;background-size:cover;background-position:center;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.78), 0 2px 8px rgba(8,34,72,.22)}

/* coin art (XRP dropped) */
.coin > i.c-zec{--img:url("/assets/img/coin-zec.webp");--ar:1.0}
.coin > i.c-btc{--img:url("/assets/img/coin-btc.webp");--ar:0.94}
.coin > i.c-eth{--img:url("/assets/img/coin-eth.webp");--ar:0.99}
.coin > i.c-sol{--img:url("/assets/img/coin-sol.webp");--ar:0.96}
.coin > i.c-bnb{--img:url("/assets/img/coin-bnb.webp");--ar:1.026}
.coin > i.c-doge{--img:url("/assets/img/coin-doge.webp");--ar:0.975}
.coin > i.c-hype{--img:url("/assets/img/coin-hype.webp");--ar:0.855}


/* ---------- phones: smooth scrolling over pretty blur ----------
   Every frosted panel is a live blur of what is behind it; on a mid-range
   Android that costs more than the whole rest of the page. Coarse pointers
   (touch) and narrow screens get flat, slightly translucent panels instead,
   the bobbing coins stop animating, and cards outside the viewport are not
   painted at all. The look stays; the jank goes. */
@media (pointer:coarse), (max-width:820px){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .card,.post,.gate-form,.topbar,.snav,.cnav,.modal,.sheet,.panel,.btn{box-shadow:0 2px 10px rgba(12,35,64,.10)!important}
  .card,.post{background:rgba(255,255,255,.90)}
  html[data-theme="night"] .card,html[data-theme="night"] .post{background:rgba(18,32,54,.92)}
  .coin{animation:none!important;will-change:auto!important}
  .coin > i{transition:none!important}
  .sky-sun{display:none}
  /* content-visibility made cards pop in and out while scrolling (the "blinking");
     plain painting is steadier on phones */
  .post{content-visibility:visible;contain:none}
  .sky{will-change:transform;transform:translateZ(0)}
  .coin-layer{transform:none}
  .coin{filter:none!important;box-shadow:none!important}
  .coin img{filter:none!important}
  .media.n1,.carousel{min-height:120px}
  .post:hover{transform:none;box-shadow:none}
  .post,.act,.plan{transition:none!important}
  .view{animation:none!important}
}

/* ---------- Others: option rows, sheet, lock screen ---------- */
.opt-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 12px;border:0;border-radius:12px;background:none;cursor:pointer;color:var(--deep)}
.opt-row:hover{background:rgba(31,95,191,.08)}
.opt-t b{display:block;font-size:14.5px;font-weight:650}
.opt-t small{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.opt-check{margin-left:auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--brand);opacity:0}
.opt-check .fic{width:14px;height:14px}
.opt-row.on .opt-check{opacity:1}
.rep-locked{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;color:var(--mut)}
.rep-locked .fic{width:15px;height:15px}
.urow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px}
.urow-l{display:flex;align-items:center;gap:10px;min-width:0}
.urow-t b{display:block;font-size:14px;font-weight:650;color:var(--deep)}
.urow-t span{display:block;font-size:12.5px;color:var(--mut)}
.modal.sheet{max-width:420px}
.sheet-who{display:flex;align-items:center;gap:10px}
.sheet-who b{display:block;font-size:14.5px;font-weight:650;color:var(--deep)}
.sheet-who span span{display:block;font-size:12.5px;color:var(--mut)}
.sheet-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:0;border-radius:12px;background:none;cursor:pointer;color:var(--deep);font-size:14.5px;font-weight:600}
.sheet-row .fic{width:20px;height:20px;flex:0 0 20px;color:var(--brand-3)}
.sheet-row small{display:block;font-weight:500;font-size:12.5px;color:var(--mut)}
.sheet-row:hover{background:rgba(31,95,191,.08)}
.sheet-row.danger,.sheet-row.danger .fic{color:#c0392b}
.oth-p{font-size:13.5px;line-height:1.5;color:var(--deep-2);margin:0 0 10px}
.tf-qr{width:200px;height:200px;margin:6px auto 10px;border-radius:12px;overflow:hidden;background:#fff}
.tf-qr svg{width:100%;height:100%}
#lockScreen{position:fixed;inset:0;z-index:2500;display:none;place-items:center;background:#fff;color:var(--deep)}
.lock-in{width:min(340px,90vw);text-align:center}
.lock-pin{margin-top:16px;text-align:center;font-size:20px;letter-spacing:.3em}
.lock-msg{min-height:20px;font-size:13px;color:#d63f5c;margin:6px 0 4px}
html[data-theme="night"] #lockScreen{background:#0a1327;color:#eaf3ff}
html[data-theme="night"] .opt-row:hover,html[data-theme="night"] .sheet-row:hover{background:rgba(255,255,255,.08)}
html[data-theme="night"] .sheet-row,html[data-theme="night"] .opt-row,html[data-theme="night"] .urow-t b,html[data-theme="night"] .sheet-who b{color:#eaf3ff}

/* ---------- hero ---------- */
.welcome span{display:block}
.gate-hero .welcome{font-size:clamp(26px,5.2vw,40px);line-height:1.12;letter-spacing:-.03em}
.sub b{color:#fff;font-weight:700}
.hero-cta{margin-top:12px}
.hero-cta .btn{font-size:15px}
/* ---------- documents ---------- */
.doc-in{max-width:680px}
.doc-body{padding:4px 18px 22px;font-size:14.5px;line-height:1.6;max-height:70vh;overflow:auto}
.doc-body h3{font-size:15.5px;margin:16px 0 6px;color:var(--deep)}
.doc-body p{margin:0 0 10px}
.doc-body ul{margin:0 0 10px 18px;padding:0}
.doc-body li{margin:3px 0}
.doc-body .callout{padding:10px 12px;border-radius:12px;background:rgba(255,190,70,.16);border:1px solid rgba(255,170,40,.45);margin:10px 0}
html[data-theme="night"] .doc-body h3{color:#eaf3ff}
/* ---------- simulator record on posts ---------- */
.rec{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px;padding:7px 10px;border-radius:12px;
  background:linear-gradient(135deg,rgba(15,157,88,.12),rgba(31,95,191,.10));border:1px solid rgba(15,157,88,.30);font-size:12.5px}
.rec b{font-weight:700;color:var(--deep)}
.rec i{font-style:normal;color:var(--mut)}
.rec .rec-badge{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.02em;color:#0f9d58;padding:2px 8px;border-radius:99px;background:rgba(15,157,88,.14)}
.rec .rec-up{color:#0f9d58;font-weight:700}.rec .rec-down{color:#d63f5c;font-weight:700}
html[data-theme="night"] .rec b{color:#eaf3ff}
/* ---------- trust level on profiles ---------- */
.trust-pill{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:rgba(31,95,191,.12);color:var(--brand-3);vertical-align:middle}
.trust-pill.t2{background:rgba(15,157,88,.14);color:#0f9d58}
/* ---------- challenge banner ---------- */
.chal{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin:0 0 12px;
  background:linear-gradient(135deg,rgba(255,190,70,.22),rgba(31,95,191,.14));border:1px solid rgba(255,170,40,.45)}
.chal b{display:block}.chal small{display:block;color:var(--mut)}
.chal .btn{margin-left:auto;white-space:nowrap}
.mut{color:var(--mut)}
.doc-in{background:#fff}
html[data-theme="night"] .doc-in{background:#12203a;color:#dbe7fa}
.doc-in .ovl-h{padding:14px 18px 8px}

.simprof{margin-bottom:14px}
.simgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 14px 4px}
.simgrid div{text-align:center;padding:8px 4px;border-radius:12px;background:rgba(31,95,191,.07)}
.simgrid b{display:block;font-size:17px;font-weight:700;color:var(--deep)}
.simgrid i{font-style:normal;font-size:11.5px;color:var(--mut)}
.simnote{font-size:12px;padding:6px 14px 12px;margin:0}
html[data-theme="night"] .simgrid b{color:#eaf3ff}

.pred{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 2px;padding:8px 12px;border-radius:12px;border:1px solid rgba(31,95,191,.25);background:rgba(31,95,191,.07);font-size:13px}
.pred-coin{font-weight:800;color:var(--deep)}.pred-by{color:var(--mut)}.pred-st{margin-left:auto;font-weight:700;padding:2px 9px;border-radius:99px;background:rgba(31,95,191,.12);color:var(--brand-3)}
.pred-hit .pred-st{background:rgba(15,157,88,.16);color:#0f9d58}.pred-miss .pred-st{background:rgba(214,63,92,.14);color:#d63f5c}
.pred-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;padding:8px 10px;border-radius:12px;background:rgba(31,95,191,.06)}
.pred-form b{font-size:13px}
.promo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;padding:7px 10px;border-radius:10px;background:rgba(255,190,70,.16);border:1px solid rgba(255,170,40,.45);font-size:12.5px}
.promo b{color:#8a5a00}.promo span{color:var(--mut)}.promo a{margin-left:auto;font-weight:700;color:#d63f5c}
.promo-ack{display:block;font-size:13px;margin:8px 0;padding:8px 10px;border-radius:10px;background:rgba(255,190,70,.14)}
.feed-mode{display:flex;gap:6px;margin:0 0 10px}
.feed-mode button{flex:1;padding:8px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.35);font-weight:700;font-size:13px;color:var(--deep);cursor:pointer}
.feed-mode button.on{background:#fff;color:var(--brand)}
html[data-theme="night"] .feed-mode button{background:rgba(255,255,255,.08);color:#dbe7fa;border-color:rgba(255,255,255,.14)}
html[data-theme="night"] .feed-mode button.on{background:rgba(31,95,191,.35);color:#fff}
html[data-theme="night"] .pred-coin{color:#eaf3ff}

/* long-press: no text selection or iOS callout on cards */
@media(pointer:coarse){.post,.post *{-webkit-touch-callout:none}.post{-webkit-user-select:none;user-select:none}.post .rt,.post [contenteditable]{-webkit-user-select:text;user-select:text}}
/* challenge banner on the landing page */
.gate-chal{margin:12px auto 0;max-width:420px;text-align:left}
.gate-chal .chal{background:rgba(255,255,255,.92);border-color:rgba(255,170,40,.6)}
.gate-chal .chal b,.gate-chal .chal small{color:#0c2340}
.gate-chal .chal small{color:#4b5f7a}
.feed-mode{display:none!important}

.tabbar.hide{transform:translateY(120%);opacity:0;pointer-events:none}
.set-row .sw{margin-left:auto;flex:0 0 46px}
.set-row .sw i{transition:left .25s cubic-bezier(.32,1,.32,1)}

/* ===== STABILITAS LAYOUT (anti lompat): posting 1 gambar punya kotak berukuran
   tetap SEBELUM gambarnya termuat, sehingga kartu tidak membesar mendadak
   dan halaman tidak bergeser sendiri. Potret tampil di atas latar blur (.mbg). */
.post-body>.media.n1 > figure,.media.n1 > figure{aspect-ratio:16/10!important;max-height:min(70vh,640px);
  overflow:hidden!important;display:flex;align-items:center;justify-content:center;background:rgba(12,35,64,.08)}
.post-body>.media.n1 img,.post-body>.media.n1 video,.media.n1 img,.media.n1 video{width:100%!important;height:100%!important;
  max-height:none!important;object-fit:contain!important;position:relative;z-index:1}
.media .mbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(22px) saturate(1.2);transform:scale(1.15);opacity:.55;z-index:0}
.media > figure:hover img{transform:none}
.media img{transition:opacity .25s ease}
@media(max-width:640px){.post-body>.media.n1 > figure,.media.n1 > figure{aspect-ratio:4/3!important;max-height:min(62vh,520px)}}
/* gambar profil/cover & kartu embed juga dipesan ruangnya */
.feed .card img[loading="lazy"]:not([src]){min-height:120px}
/* jangkar scroll: browser tidak menggeser posisi saat konten di atas berubah */
.feed,.timeline,main{overflow-anchor:auto}
/* saklar Settings: rata kanan penuh */
.set-row{display:flex;align-items:center}
.set-row .sw{margin-left:auto;margin-right:2px;flex:0 0 46px}

/* ===== Tab Statistic (gaya Mobile Legends) ===== */
.mlstats{padding:16px 16px 14px}
.ml-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.ml-head b{font-size:15px;letter-spacing:.06em}.ml-head small{color:var(--mut)}
.ml-circles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.mlc{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:4px solid;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(8,34,72,.16);max-width:150px;margin:0 auto;width:100%}
.mlc b{font-size:clamp(20px,5vw,30px);line-height:1;font-weight:800}.mlc span{font-size:12px;color:var(--mut);margin-top:4px}
.mlc.pink{border-color:#ff5aa5;color:#ff5aa5}.mlc.gold{border-color:#ffb020;color:#ffb020}.mlc.green{border-color:#2ecc71;color:#2ecc71}
.ml-body{display:grid;grid-template-columns:1fr 1.15fr;gap:12px;align-items:center}
.ml-legend{display:grid;gap:6px}.ml-leg{display:flex;justify-content:space-between;padding:8px 12px;border-radius:12px;background:rgba(43,127,255,.08);font-size:13px}
.ml-leg b{font-variant-numeric:tabular-nums}
.ml-radar{color:var(--ink,#123)}.radar{width:100%;height:auto;max-width:320px;margin:0 auto;display:block}
@media(max-width:640px){.ml-body{grid-template-columns:1fr}.ml-radar{order:-1}}
/* composer: bentuk pojok bawah mengikuti lapisan di belakangnya */
.composer{border-radius:var(--r-lg,18px)}
.composer .att-full{border-radius:0 0 var(--r-lg,18px) var(--r-lg,18px);padding:8px 12px 10px}

/* ===== Statistic v2: Poppins, lingkaran rapat, legenda polos, night putih ===== */
.pro-stats{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.pro-stats{grid-template-columns:repeat(3,1fr)}.pro-stats .stat:nth-child(-n+3){border-bottom:0}}
.mlstats,.mlstats *{font-family:'Poppins',sans-serif!important}
.ml-circles{display:flex!important;justify-content:center;align-items:center;gap:16px;margin-bottom:14px}
.mlc{width:clamp(96px,22vw,136px);height:auto;aspect-ratio:1;margin:0}
.ml-leg{background:transparent!important;padding:5px 0!important;border-radius:0;border-bottom:1px solid rgba(120,150,200,.22)}
.ml-leg:last-child{border-bottom:0}
html[data-theme="night"] .mlstats,html[data-theme="night"] .ml-radar,html[data-theme="night"] .ml-leg span,html[data-theme="night"] .ml-leg b,html[data-theme="night"] .ml-head b{color:#fff}
/* ===== Media posting 1080 x 1080 (persegi, maks 1080px) ===== */
.post-body>.media.n1 > figure,.media.n1 > figure{aspect-ratio:1/1!important;max-height:none!important;max-width:1080px;margin-left:auto;margin-right:auto}
.post-body>.media.n1 img,.media.n1 img{object-fit:cover!important}
.post-body>.media.n1 video,.media.n1 video{object-fit:contain!important}
@media(max-width:640px){.post-body>.media.n1 > figure,.media.n1 > figure{aspect-ratio:1/1!important;max-height:none!important}}

/* signup pendek: email + sandi saja */
#formSignup .frow.two:has(#suName),#formSignup .frow:has(#suBio),#formSignup .pwrap:has(#suPass2),#formSignup label[for="suPass2"]{display:none!important}
/* Statistic lebih rapat */
.mlstats{padding:12px 14px 10px}.ml-head{margin-bottom:8px;gap:8px}.ml-head b{font-size:15px;letter-spacing:0;font-weight:700;text-transform:none}
.ml-circles{gap:10px;margin-bottom:8px}.mlc{width:clamp(88px,20vw,120px);border-width:3px}.mlc b{font-size:clamp(18px,4.5vw,26px)}.mlc span{font-size:11px;margin-top:2px}
.ml-body{gap:8px}.ml-leg{padding:3px 0!important;font-size:12.5px}.radar{max-width:280px}

/* ===== Signup: baris sandi satu kolom (kolom konfirmasi disembunyikan) ===== */
#formSignup .frow.two:has(#suPass){grid-template-columns:1fr!important}
#formSignup .frow.two:has(#suPass) > div:has(#suPass2){display:none!important}
#formSignup .frow.two:has(#suPass) .pwrap{width:100%}
/* ===== Tombol "Try With No Account Now!" — logo terbang (port dari komponen React) ===== */
.fly-btn{display:inline-flex;align-items:center;gap:.45em;overflow:hidden;padding-left:.9em;transition:transform .2s ease}
.fly-btn:active{transform:scale(.95)}
.fly-wrap{display:flex;align-items:center}
.fly-ico{display:flex;align-items:center;transition:transform .3s ease;transform-origin:center}
.fly-ico img{width:28px;height:28px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(8,34,72,.25))}
.fly-txt{transition:transform .3s ease;white-space:nowrap}
.fly-btn:hover .fly-wrap{animation:fly-1 .6s ease-in-out infinite alternate}
.fly-btn:hover .fly-ico{transform:translateX(1.2em) rotate(12deg) scale(1.12)}
.fly-btn:hover .fly-txt{transform:translateX(5em)}
@keyframes fly-1{from{transform:translateY(.1em)}to{transform:translateY(-.1em)}}
@media (hover:none){.fly-btn .fly-wrap{animation:fly-1 .8s ease-in-out infinite alternate}}
@media (prefers-reduced-motion:reduce){.fly-btn .fly-wrap,.fly-btn:hover .fly-wrap{animation:none}.fly-btn:hover .fly-ico,.fly-btn:hover .fly-txt{transform:none}}
/* ===== Onboarding overlay (kaca, di atas segalanya) ===== */
.onb-ovl{position:fixed;inset:0;z-index:9700;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(10,22,44,.45);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.onb-card{width:min(440px,100%);padding:26px 22px 22px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.80));border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 60px rgba(8,34,72,.35);color:var(--deep,#0f2a4a)}
html[data-theme="night"] .onb-card{background:linear-gradient(180deg,rgba(20,32,56,.92),rgba(14,24,44,.86));border-color:rgba(255,255,255,.14);color:#e7ecf3}
.onb-logo{width:64px;height:auto;margin:0 auto 8px;display:block}
.onb-card h2{margin:4px 0 6px;font-size:22px;font-weight:800}
.onb-sub{margin:0 0 16px;font-size:13.5px;opacity:.8}
.onb-card .frow{text-align:left;margin-bottom:12px}
.onb-at{display:flex;align-items:center;gap:6px}.onb-at>span{font-weight:700;opacity:.7}.onb-at .fld{flex:1}
.onb-hint{display:block;font-size:11.5px;opacity:.65;margin-top:4px}
#onbGo{margin-top:6px}
body.onb-open{overflow:hidden}

/* ===== fly-btn v2: teks hilang total, tinggal logo (hover / setelah ketuk) ===== */
.fly-txt{display:inline-block;max-width:20em;overflow:hidden;transition:transform .3s ease,opacity .25s ease,max-width .35s ease,margin .3s ease}
.fly-btn:hover .fly-txt,.fly-btn.fly-on .fly-txt{transform:translateX(4em);opacity:0;max-width:0;margin-left:0}
.fly-btn:hover,.fly-btn.fly-on{gap:0;padding-right:.9em}
.fly-btn.fly-on .fly-wrap{animation:fly-1 .6s ease-in-out infinite alternate}
.fly-btn.fly-on .fly-ico,.fly-btn:hover .fly-ico{transform:translateX(.2em) rotate(12deg) scale(1.15)}
/* ===== Onboarding sebagai HALAMAN gate ===== */
body.onboarding #gate .gate-hero,body.onboarding #gate .gate-form:not(.gate-onboard){display:none!important}
.gate-onboard{text-align:center}
.gate-onboard .onb-logo{width:64px;height:auto;margin:6px auto 8px;display:block}
.gate-onboard h2{margin:4px 0 6px;font-size:22px;font-weight:800}
.gate-onboard .onb-sub{margin:0 0 16px;font-size:13.5px;opacity:.8}
.gate-onboard .frow{text-align:left;margin-bottom:12px}
.onb-at{position:relative}
.onb-at>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;opacity:.65;pointer-events:none}
.onb-at .fld{width:100%;padding-left:32px}
#onbGo{margin-top:6px}
/* ===== Identitas latihan di Statistic ===== */
.ml-id{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 12px}
.ml-id>div{background:rgba(43,127,255,.07);border-radius:12px;padding:8px 6px;text-align:center}
.ml-id i{display:block;font-style:normal;font-size:10.5px;opacity:.7;margin-bottom:2px}
.ml-id b{font-size:15px;font-variant-numeric:tabular-nums}
@media(max-width:640px){.ml-id{grid-template-columns:repeat(2,1fr)}}
html[data-theme="night"] .ml-id{color:#fff}
.rec.rec-v{flex-wrap:wrap}
/* ===== Kartu Battle result (objek native feed) ===== */
.bcard{margin:8px 0 6px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(43,127,255,.12),rgba(139,92,246,.10));border:1px solid rgba(43,127,255,.25)}
.bcard-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;font-size:13px}
.bcard-h span{opacity:.7;font-size:12px}
.bcard-g{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.bcard-g>div{text-align:center;background:rgba(255,255,255,.35);border-radius:10px;padding:6px 4px}
html[data-theme="night"] .bcard-g>div{background:rgba(255,255,255,.07)}
.bcard-g i{display:block;font-style:normal;font-size:10.5px;opacity:.7}
.bcard-g b{font-size:15px;font-variant-numeric:tabular-nums}
.bcard-f{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bcard-btn{background:linear-gradient(135deg,#2b7fff,#8b5cf6)!important;color:#fff!important;border:0!important;font-weight:800}
@media(max-width:480px){.bcard-g{grid-template-columns:repeat(2,1fr)}}

/* ===== Statistic: 4 lingkaran (Matches / Win Rate / Wins / Losses), rating per koin, catatan rumus ===== */
.mlc.red{border-color:#ef4444;color:#ef4444}
.ml-circles.four{gap:10px}.ml-circles.four .mlc{width:clamp(70px,19vw,118px);border-width:3px}.ml-circles.four .mlc b{font-size:clamp(16px,4.2vw,24px)}.ml-circles.four .mlc span{font-size:10.5px}
.ml-coins{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ml-coins span{display:inline-flex;flex-direction:column;align-items:flex-start;padding:6px 10px;border-radius:10px;background:rgba(43,127,255,.09);border:1px solid rgba(43,127,255,.18);font-size:12px;line-height:1.25}
.ml-coins span b{font-weight:800}.ml-coins span i{font-style:normal;font-size:10.5px;opacity:.65}
.ml-note{font-size:11.5px;line-height:1.5;color:var(--mut);background:rgba(255,255,255,.04);border:1px dashed rgba(120,150,200,.35);border-radius:10px;padding:8px 10px;margin-bottom:10px}
.ml-note b{color:var(--txt)}
.ml-id>div[title]{cursor:help}
/* two-step: trusted device checkbox */
.ml-trust{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut);margin:8px 0 2px}
.ml-trust input{width:16px;height:16px;accent-color:#2b7fff}

/* Statistic grid: sub-label per metrik */
.ml-id small{display:block;font-size:9.5px;line-height:1.2;opacity:.6;margin-top:2px}
@media (max-width:480px){.ml-id{grid-template-columns:repeat(2,1fr)}}
.ml-circles.four .mlc b{font-size:clamp(13px,3.4vw,22px);letter-spacing:-.02em}

/* ===== Media posting: bingkai 1080 x 1080, foto lama dimuat UTUH (contain) di atas latar blur ===== */
.post-body>.media.n1 img,.media.n1 img{object-fit:contain!important}
.carousel .cslide{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.carousel .cslide img{width:100%;height:100%;max-height:none;object-fit:contain;position:relative;z-index:1}
.carousel .cslide .mbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(22px) saturate(1.2);transform:scale(1.15);opacity:.55;z-index:0}
/* penampil (klik gambar): gambar utuh, pas layar, tidak dipotong */
.pv-body .post-body>.media.n1 > figure,.pv-body .media.n1 > figure,.pv-body .carousel .cslide{aspect-ratio:auto!important;height:auto;max-height:min(80vh,960px)!important;background:transparent}
.pv-body .post-body>.media.n1 img,.pv-body .media.n1 img,.pv-body .carousel .cslide img{width:auto!important;height:auto!important;max-width:100%;max-height:min(80vh,960px)!important;object-fit:contain!important;margin:0 auto}
.pv-body .media .mbg{display:none}
/* langkah Adjust (crop) ala Instagram */
.crop-fit{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.55);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:3}
.crop-fit.on{background:#fff;color:#0c2340}
.crop-zoom{display:flex;align-items:center;gap:10px;margin:12px 6px 0;color:var(--mut);font-weight:700}
.crop-range{flex:1;accent-color:#2b7fff}
.crop-idx{font-style:normal;font-weight:600;color:var(--mut);font-size:12px;margin-left:6px}
/* ===== React (LinkedIn style): satu tombol, enam simbol, ringkasan simbol terbanyak ===== */
.rxsum{display:inline-flex;align-items:center;gap:2px;margin:2px 16px 4px 73px;padding:3px 10px 3px 6px;border-radius:999px;border:1px solid rgba(43,127,255,.18);background:rgba(43,127,255,.07);font-size:13px;line-height:1;cursor:pointer}
.rxsum i{font-style:normal;font-size:15px;margin-right:-3px}
.rxsum b{margin-left:8px;font-size:12px;color:var(--deep-2);font-variant-numeric:tabular-nums}
@media(max-width:640px){.rxsum{margin-left:16px}}
.rxbtn .rxe{font-style:normal;font-size:16px;line-height:1}
.rxbtn.liked{color:#2b7fff}
.rxpop{position:absolute;z-index:1750;display:none;gap:2px;padding:6px;border-radius:999px;background:rgba(255,255,255,.96);border:1px solid rgba(43,127,255,.18);box-shadow:0 14px 40px rgba(8,34,72,.22)}
.rxpop.on{display:flex;animation:pop .28s var(--spring)}
.rxpop button{display:flex;flex-direction:column;align-items:center;gap:1px;width:46px;padding:4px 2px;border:0;border-radius:14px;background:transparent;cursor:pointer;color:var(--mut)}
.rxpop button i{font-style:normal;font-size:24px;line-height:1;transition:transform .18s var(--spring)}
.rxpop button span{font-size:9px;font-weight:700}
.rxpop button:hover i,.rxpop button:focus i{transform:scale(1.35) translateY(-3px)}
.rxpop button.on{background:rgba(43,127,255,.14);color:var(--brand-3)}
html[data-theme="night"] .rxpop{background:rgba(18,32,58,.97)}
.qk.rxone{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--mut);padding:3px 10px}
.qk.rxone .fic{width:15px;height:15px}
.qk.rxone.mine{color:var(--brand-3);background:rgba(43,127,255,.12)}
/* ===== ukuran avatar yang dipakai tapi belum didefinisikan (menu post 40px, tab 24px) ===== */
.av-24{width:24px;height:24px;font-size:10px}
.av-32{width:32px;height:32px;font-size:13px}
.av-40{width:40px;height:40px;font-size:15px}
.av-48{width:48px;height:48px;font-size:18px}
.av-64{width:64px;height:64px;font-size:24px}
.sheet-who .av{flex:0 0 40px}
/* tab Profile = foto sendiri */
.tb .av.tbav,.snav .av.tbav{width:22px;height:22px;font-size:9px;border:1.5px solid currentColor;box-sizing:border-box}
.tb i:has(.tbav),.snav a i:has(.tbav){display:grid;place-items:center}
/* ===== kartu prediksi: grafik 7 hari + panah ===== */
.pred-chart{display:flex;align-items:center;gap:12px;margin:6px 0 8px;padding:10px 12px;border-radius:14px;background:rgba(43,127,255,.06);border:1px solid rgba(43,127,255,.14)}
.pred-chart .pc-spark{flex:1;min-width:0;display:block}
.pred-chart .pc-spark .spark{width:100%;height:56px;display:block}
.pred-chart .pc-now{display:flex;flex-direction:column;gap:2px;min-width:110px}
.pred-chart .pc-now b{font-size:15px}.pred-chart .pc-now i{font-style:normal;font-size:11.5px;font-weight:700}.pred-chart .pc-now i.up{color:#0f9d58}.pred-chart .pc-now i.dn{color:#d63f5c}
.pred-chart .pc-now small{font-size:10.5px;color:var(--mut)}
.pred-chart .pc-arrow{font-size:34px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.pred-chart .pc-arrow.up{color:#0f9d58}.pred-chart .pc-arrow.down{color:#d63f5c}
.pred-chart .pc-load{font-size:12px;color:var(--mut)}
.ctag.retry .ctag-t span{color:#b45309}