/* ===================== EmblemHub — premium light theme ===================== */
:root{
  --bg:#f6f6fb;
  --surface:#ffffff;
  --surface-2:#fbfbfe;
  --text:#15121f;
  --muted:#6c6880;
  --faint:#9a96ad;
  --border:#ecebf3;
  --border-2:#e3e1ee;
  --purple:#7c5cff;
  --purple-600:#6b46ff;
  --pink:#ff7bd5;
  --grad:linear-gradient(135deg,#7b5cff 0%,#a368ff 55%,#c178ff 100%);
  --grad-soft:linear-gradient(135deg,#efeaff 0%,#f7edff 100%);
  --shadow-sm:0 1px 2px rgba(20,16,40,.05);
  --shadow:0 2px 4px rgba(20,16,40,.04),0 10px 28px rgba(20,16,40,.07);
  --shadow-lg:0 8px 24px rgba(98,70,255,.10),0 24px 60px rgba(20,16,40,.10);
  --r:18px;
  --r-sm:12px;
  --sidebar-w:248px;
  --right-w:312px;
  --topbar-h:64px;
  --c-games:#7c5cff; --c-ai:#5b8cff; --c-finance:#16b27e;
  --c-tools:#ff9f43; --c-creative:#ff6bb5; --c-governance:#9b6bff; --c-trading:#21c3d6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
html{zoom:0.93;overflow:hidden}   /* compact UI; clip root so zoom rounding can't add a phantom window scroll (only .main scrolls) */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;
  display:flex;flex-direction:column;overflow:hidden;   /* app-shell: only .main scrolls */
  scrollbar-width:thin;   /* match the slim webkit scrollbars in Firefox */
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}
::selection{background:rgba(124,92,255,.2)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#dedbec;border-radius:20px;border:3px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#cfcbe2}

/* ============================ TOP BAR ============================ */
.topbar{
  flex:0 0 var(--topbar-h);z-index:60;height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.icon-btn:hover{background:var(--bg)}
.topbar .menu-toggle{display:none;font-size:20px;color:var(--text)}
.topbar .brand--top{display:flex}
.search{
  grid-column:2;width:100%;position:relative;display:flex;align-items:center;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  padding:0 14px;height:42px;transition:.15s;
}
.search:focus-within{border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(124,92,255,.10)}
.search-ico{color:var(--faint);font-size:18px;margin-right:8px}
.search input{flex:1;border:none;background:none;outline:none;font-size:14px;color:var(--text)}
.search input::placeholder{color:var(--faint)}
.topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}

/* ============================ LAYOUT ============================ */
.layout{display:flex;align-items:stretch;flex:1 1 auto;min-height:0}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  padding:18px 14px;display:flex;flex-direction:column;
  border-right:1px solid var(--border);background:var(--surface);overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 14px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.sidebar .brand{display:none}            /* logo now lives in the header */
.topbar .brand--top{padding:0}
.brand-logo{width:30px;height:30px;object-fit:contain;display:block}
.brand-name b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;padding-top:4px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;
  color:var(--muted);font-weight:500;font-size:14px;transition:.13s;position:relative;
}
.nav a .ni{width:20px;text-align:center;font-size:16px;opacity:.9}
.nav a:hover{background:var(--bg);color:var(--text)}
.nav a.active{background:var(--grad-soft);color:var(--purple-600);font-weight:600;box-shadow:inset 0 0 0 1px rgba(124,92,255,.1)}
.nav a.active .ni{opacity:1}
.nav a.active::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:3px;background:var(--purple-600);box-shadow:0 0 8px rgba(124,92,255,.5)}
.nav-sep{height:1px;background:var(--border);margin:10px 8px}

.side-cta{
  position:relative;overflow:hidden;margin-top:14px;border-radius:16px;padding:18px;
  background:var(--grad);color:#fff;box-shadow:var(--shadow-lg)
}
.side-cta-glow{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.25);filter:blur(30px);top:-30px;right:-20px}
.side-cta h4{margin:0 0 6px;font-size:15px;font-weight:700}
.side-cta p{margin:0 0 14px;font-size:12.5px;opacity:.92;line-height:1.45}

.main{flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden}
.main-inner{padding:26px 30px 60px}

.scrim{display:none}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 18px;border-radius:11px;font-weight:600;font-size:14px;
  transition:.15s;white-space:nowrap;
}
.btn-block{width:100%}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(124,92,255,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(124,92,255,.45)}
.btn-light{background:#fff;color:var(--purple-600);font-weight:700}
.btn-light:hover{background:#f3f0ff}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-2)}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple-600)}
.btn-sm{height:34px;padding:0 14px;font-size:13px;border-radius:9px}
.btn[disabled]{opacity:.55;pointer-events:none}

.chip{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border-2);color:var(--muted);
  font-size:13px;font-weight:500;cursor:pointer;transition:.13s
}
.chip:hover{border-color:var(--purple);color:var(--text)}
.chip.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(124,92,255,.3)}

/* ============================ HEADINGS ============================ */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:34px 0 16px}
.section-head:first-child{margin-top:0}
.section-head h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:9px}
.section-head .see-all{font-size:13px;color:var(--purple-600);font-weight:600}
.section-head .see-all:hover{text-decoration:underline}
.page-title{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0 0 4px}
.page-sub{color:var(--muted);margin:0 0 22px;font-size:14.5px}

/* ============================ HERO ============================ */
.hero{
  position:relative;overflow:hidden;border-radius:24px;margin-bottom:8px;
  background:linear-gradient(135deg,#ffffff 0%,#faf7ff 60%,#f3ecff 100%);
  border:1px solid var(--border);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.05fr .95fr;gap:20px;padding:46px 44px;
}
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0}
.hero-blob.b1{width:280px;height:280px;background:#c9b4ff;top:-90px;right:120px}
.hero-blob.b2{width:220px;height:220px;background:#ffc7ec;bottom:-90px;right:-40px}
.hero-content{position:relative;z-index:2;align-self:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--purple-600);
  background:#fff;border:1px solid var(--border-2);padding:6px 12px;border-radius:20px;margin-bottom:18px;box-shadow:var(--shadow-sm)
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#16b27e;box-shadow:0 0 0 3px rgba(22,178,126,.18)}
.hero h1{font-size:46px;line-height:1.04;font-weight:800;letter-spacing:-.035em;margin:0 0 14px}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:16.5px;color:var(--muted);max-width:440px;margin:0 0 26px;line-height:1.55}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* hero visual */
.hero-visual{position:relative;z-index:2;min-height:280px;display:grid;place-items:center}
.emblem-core{
  width:170px;height:170px;border-radius:34px;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:74px;font-weight:800;
  box-shadow:0 30px 70px rgba(124,92,255,.45);animation:float 6s ease-in-out infinite;position:relative
}
.emblem-core::after{content:"";position:absolute;inset:0;border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 50%)}
.float-icon{
  position:absolute;width:54px;height:54px;border-radius:16px;background:#fff;
  display:grid;place-items:center;font-size:24px;box-shadow:var(--shadow-lg);
  animation:float 5s ease-in-out infinite
}
.float-icon span{position:relative;z-index:2}
.fi-1{top:6%;left:8%;animation-delay:.2s}
.fi-2{top:0%;right:14%;animation-delay:1.1s}
.fi-3{bottom:14%;left:0%;animation-delay:.6s}
.fi-4{bottom:4%;right:8%;animation-delay:1.6s}
.fi-5{top:46%;right:-2%;animation-delay:.9s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* hero banner image (rendered banner supplied by user) */
.hero-banner{position:relative;border-radius:24px;overflow:hidden;margin-bottom:8px;box-shadow:var(--shadow);border:1px solid var(--border);background:linear-gradient(135deg,#f1ecff,#fbf7ff)}
.hero-img{display:block;width:100%;height:auto}
.hero-cta{position:absolute;left:5.2%;bottom:29%;display:flex;gap:12px;z-index:2}
.btn-onbanner{background:#fff;border-color:transparent;box-shadow:var(--shadow)}
.btn-onbanner:hover{color:var(--purple-600);transform:translateY(-1px)}
@media(max-width:640px){
  /* on phones the buttons no longer overlap the banner — they sit side by side below it.
     drop the card bg/border so the area under the image isn't a "stretched banner". */
  .hero-banner{background:none;border:none;box-shadow:none;overflow:visible;border-radius:0;margin-bottom:0}
  .hero-img{border-radius:16px}
  .hero-cta{position:static;left:auto;bottom:auto;display:flex;gap:10px;justify-content:center;padding:14px 2px 4px}
  .hero-cta .btn{height:auto;padding:12px 14px;font-size:13.5px;flex:1 1 0;justify-content:center;max-width:210px}
}
@media(max-width:420px){
  .hero-cta{gap:8px;padding:12px 10px 2px}
  .hero-cta .btn{padding:11px 10px;font-size:12.5px}
}

/* ============================ STATS ============================ */
.stats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:22px 0 6px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 8px;box-shadow:var(--shadow)
}
.stat{text-align:center;padding:4px 6px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--border)}
.stat .sv{font-size:25px;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .sl{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500}

/* ============================ HOME GRID ============================ */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--right-w);gap:26px;margin-top:6px}
.home-main{min-width:0}

/* ============================ APP CARDS ============================ */
.cards-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.app-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.18s;cursor:pointer;display:flex;flex-direction:column
}
.app-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.app-banner{height:104px;position:relative;display:grid;place-items:center;overflow:hidden}
.app-banner .blogo{font-size:44px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));position:relative;z-index:2}
.app-banner .bsheen{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 55%)}
.new-badge{
  position:absolute;top:10px;left:10px;z-index:3;font-size:11px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.28);backdrop-filter:blur(4px);padding:4px 9px;border-radius:8px;letter-spacing:.02em
}
.status-badge{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.32);backdrop-filter:blur(4px);padding:4px 9px;border-radius:8px;letter-spacing:.02em}
.status-badge .sdot{width:6px;height:6px;border-radius:50%;background:#fff}
.status-badge.live .sdot{background:#3ee08f;box-shadow:0 0 0 3px rgba(62,224,143,.35)}
.status-badge.paused .sdot{background:#ffd36b}
.status-badge.down .sdot{background:#ff6a85}
.app-meta{font-size:12px;color:var(--faint);margin:0 0 13px;font-weight:500}
.detail-list{display:flex;flex-direction:column}
.detail-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.detail-row:last-child{border-bottom:none}
.detail-row .dk{color:var(--muted);font-weight:500}
.detail-row .dv{font-weight:700}
.app-body{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.app-cat{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.app-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 5px}
.app-desc{font-size:13px;color:var(--muted);line-height:1.45;margin:0 0 13px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.builder-mini{display:flex;align-items:center;gap:7px;min-width:0}
.avatar{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:0 0 auto;background:var(--grad)}
.avatar.sm{width:24px;height:24px;font-size:11px}
.avatar.md{width:40px;height:40px;font-size:15px}
.avatar.lg{width:84px;height:84px;font-size:30px;border:4px solid #fff;box-shadow:var(--shadow)}
.builder-mini .bn{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-stats{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.upvote{
  display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--muted);
  border:1px solid var(--border-2);border-radius:9px;padding:5px 9px;transition:.13s
}
.upvote:hover{border-color:var(--purple);color:var(--purple-600)}
.upvote.on{background:var(--grad-soft);color:var(--purple-600);border-color:transparent}
.upvote .car{font-size:11px}
.mini-stat{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--faint);font-weight:600}

/* horizontal scroller for trending */
.scroller{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.scroller .app-card{flex:0 0 300px;scroll-snap-align:start}

/* new this week — compact cards */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.mini-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;
  box-shadow:var(--shadow-sm);transition:.16s;cursor:pointer;display:flex;flex-direction:column;gap:10px
}
.mini-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.mini-top{display:flex;align-items:center;gap:10px}
.mini-logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:0 0 auto}
.mini-meta .mn{font-size:14px;font-weight:700;line-height:1.2}
.mini-meta .mc{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.mini-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:10px}

/* ============================ RIGHT SIDEBAR ============================ */
.rail{position:sticky;top:calc(var(--topbar-h) + 18px);display:flex;flex-direction:column;gap:18px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm)}
.panel h3{font-size:14.5px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;justify-content:space-between}
.panel h3 a{font-size:12px;color:var(--purple-600);font-weight:600}

.builder-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer}
.builder-row:last-child{border-bottom:none;padding-bottom:0}
.builder-row:first-child{padding-top:0}
.rank-badge{width:22px;flex:0 0 auto;text-align:center;font-weight:800;font-size:13px;color:var(--faint)}
.rank-badge.top{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.builder-row .info{flex:1;min-width:0}
.builder-row .info .name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-row .info .sub{font-size:11.5px;color:var(--faint);font-weight:500}

.launch-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer}
.launch-row:last-child{border-bottom:none;padding-bottom:0}
.launch-row:first-child{padding-top:0}
.launch-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex:0 0 auto}
.launch-row .info{flex:1;min-width:0}
.launch-row .info .name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.launch-row .info .sub{font-size:11.5px;color:var(--faint)}

.event-card{border-radius:14px;padding:16px;background:var(--grad-soft);border:1px solid #ece3ff;margin-bottom:12px}
.event-card:last-child{margin-bottom:0}
.event-date{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--purple-600);margin-bottom:7px}
.event-card .en{font-size:14px;font-weight:700;margin:0 0 5px}
.event-card .ed{font-size:12px;color:var(--muted);line-height:1.45;margin:0 0 12px}

/* ============================ CATEGORIES ============================ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.cat-card{
  border-radius:var(--r);padding:22px;color:#fff;position:relative;overflow:hidden;cursor:pointer;
  min-height:130px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--shadow);transition:.18s
}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cat-card .cico{font-size:34px}
.cat-card .cname{font-size:18px;font-weight:800;letter-spacing:-.02em}
.cat-card .ccount{font-size:13px;opacity:.9;font-weight:600}
.cat-card .csheen{position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.28),transparent 50%)}

/* ============================ PROFILE / PROJECT ============================ */
.profile-banner{height:180px;border-radius:var(--r);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.profile-banner .psheen{position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.25),transparent 55%)}
.profile-head{padding:0;position:relative;z-index:2}
.profile-head .avatar.lg{margin-top:-46px;display:grid;margin-left:4px}
.profile-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px}
.profile-head .meta{min-width:0}
.profile-head .pname{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-head .phandle{color:var(--muted);font-size:14px;margin-top:2px}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:560px){.profile-row{flex-direction:column;align-items:flex-start}}
.wallet-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-family:ui-monospace,monospace;background:var(--bg);border:1px solid var(--border-2);border-radius:8px;padding:4px 9px;color:var(--muted);margin-top:6px}
.profile-stats{display:flex;gap:26px;margin:18px 0 4px}
.pstat{text-align:left}
.pstat .v{font-size:20px;font-weight:800;letter-spacing:-.02em}
.pstat .l{font-size:12.5px;color:var(--muted)}
.bio{font-size:14.5px;color:var(--text);max-width:640px;line-height:1.55;margin:14px 0}
.socials{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.social-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--border-2);border-radius:20px;padding:7px 13px;background:var(--surface)}
.social-chip:hover{color:var(--purple-600);border-color:var(--purple)}
.social-chip img.soc-ico{width:18px;height:18px}
.social-chip .soc-emoji{font-size:15px}

/* ===================== MODERATION ===================== */
/* header "Admin Mode Active" badge — small, subtle */
.admin-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#b1471f;background:#fff4ee;border:1px solid #ffd9c7;border-radius:20px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:.13s}
.admin-badge:hover{border-color:#ff8a52;color:#9a3a16}
/* Admin Mode toggle pill in the profile menu */
.pm-admintoggle{justify-content:space-between}
.pm-toggle{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--faint);background:var(--bg);border:1px solid var(--border-2);border-radius:20px;padding:2px 9px}
.pm-toggle.on{color:#fff;background:#1aa564;border-color:transparent}
/* admin menu summary (reuses .ap-menu) — tinted to stand apart from owner menu */
.ap-menu.ap-admin-menu summary{width:auto;height:42px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;line-height:1;border-radius:12px;color:#b1471f;background:#fff4ee;border:1px solid #ffd9c7;white-space:nowrap}
.ap-menu.ap-admin-menu summary::-webkit-details-marker{display:none}
.ap-menu.ap-admin-menu[open] summary,.ap-menu.ap-admin-menu summary:hover{border-color:#ff8a52;color:#9a3a16;background:#ffe9df}
.ap-menu-pop button.danger{color:#e0506b}
.ap-menu-pop button.danger:hover{background:#fff5f7}
/* moderation banner on app page */
.mod-banner{display:flex;flex-direction:column;gap:3px;background:#fff4ee;border:1px solid #ffd9c7;color:#9a3a16;border-radius:14px;padding:14px 18px;margin-bottom:18px;font-weight:700;font-size:14.5px}
.mod-banner.deleted{background:#fff5f7;border-color:#ffd0db;color:#b32846}
.mod-banner-sub{font-weight:500;font-size:13px;opacity:.85}
/* reason picker */
.reason-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.reason-opt{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--border);border-radius:11px;cursor:pointer;font-size:14px;font-weight:600;transition:.12s}
.reason-opt:hover{border-color:var(--purple);background:var(--surface-2)}
.reason-opt:has(input:checked){border-color:var(--purple);background:var(--grad-soft);color:var(--purple-600)}
/* comment tools */
.c-tools{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.c-tool{border:0;background:none;cursor:pointer;font-size:12px;opacity:.45;padding:2px;border-radius:6px;transition:.12s}
.c-tool:hover{opacity:1;background:var(--surface-2)}
.c-tool.c-del:hover{background:#fff5f7}
/* admin reports page */
.rep-list{display:flex;flex-direction:column;gap:12px}
.rep-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-wrap:wrap}
.rep-row.open{border-color:#ffd9c7;background:#fffaf7}
.rep-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rep-reason{font-size:14px;font-weight:800;color:#b1471f}
.rep-type{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);background:var(--surface-2);border:1px solid var(--border);padding:2px 8px;border-radius:20px}
.rep-gone{font-size:11px;font-weight:700;color:var(--faint)}
.rep-item{font-size:14.5px;font-weight:600;margin-top:6px}
.rep-meta{font-size:12.5px;color:var(--faint);margin-top:4px}
.rep-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rep-status{font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;text-transform:capitalize}
.rep-status.dismissed{color:var(--faint);background:var(--surface-2)}
.rep-status.actioned{color:#0ca678;background:#e7f9f2}
/* about-page moderation note */
.mod-note{display:flex;gap:14px;align-items:flex-start;max-width:820px;margin:40px auto 0;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-radius:18px}
.mod-note-ico{font-size:22px;flex:0 0 auto}
.mod-note p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
/* My Apps "Hidden by Admin" status chip */
.asc-status.hidden,.appStatus.hidden{background:#fff4ee;color:#b1471f;border:1px solid #ffd9c7}

/* ===================== CONNECTED WALLETS ===================== */
.wal-ico{width:22px;height:22px;border-radius:6px;object-fit:cover;flex:0 0 auto;vertical-align:middle}
.wal-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;background:var(--surface)}
.wal-meta{flex:1;min-width:0}
.wal-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wal-addr{font-size:12.5px;color:var(--faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px}
.wal-primary{font-size:11px;font-weight:700;color:var(--purple-600);background:var(--grad-soft);border:1px solid #e6dbff;padding:2px 8px;border-radius:20px}
.wal-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.wal-tag{font-size:12px;font-weight:600;color:#0ca678;background:#e7f9f2;border:1px solid #b9ecd9;padding:5px 11px;border-radius:20px}
.wal-rm:hover{color:#e0506b;border-color:#ffd0db}
.wal-add{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.wal-add-label{font-size:13px;font-weight:700;color:var(--muted)}
.wal-add .btn{display:inline-flex;align-items:center;gap:7px}
/* profile connected-wallets row */
.profile-wallets{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.pw-label{font-size:12.5px;color:var(--faint);font-weight:600}
.pw-multi{color:var(--purple-600);font-weight:700}
.pw-chips{display:flex;gap:8px;flex-wrap:wrap}
.pw-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text);border:1px solid var(--border-2);background:var(--surface);padding:5px 11px;border-radius:20px}
.pw-chip .wal-ico{width:16px;height:16px}
.pw-primary{font-size:10.5px;font-weight:700;color:var(--purple-600)}

/* project page */
.project-hero{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.project-banner{height:240px;border-radius:var(--r);position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:var(--shadow)}
.project-banner .blogo{font-size:96px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.22))}
.proj-logo{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font-size:32px;box-shadow:var(--shadow);flex:0 0 auto}
.feature-list{display:flex;flex-direction:column;gap:10px}
.feature-item{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600}
.feature-item .fck{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.feature-item.on .fck{background:var(--grad);color:#fff}
.feature-item.off{color:var(--faint);font-weight:500}
.feature-item.off .fck{background:var(--bg);color:var(--faint);border:1px solid var(--border-2)}
.shots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.shot{height:140px;border-radius:14px;display:grid;place-items:center;font-size:40px;box-shadow:var(--shadow-sm)}

/* ============================ MODAL ============================ */
.modal-root{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-root.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(20,16,40,.45);backdrop-filter:blur(4px);animation:fade .2s}
.modal{position:relative;background:var(--surface);border-radius:22px;width:100%;max-width:440px;padding:28px;box-shadow:var(--shadow-lg);animation:pop .22s ease}
.modal.wide{max-width:560px}
.modal h3{margin:0 0 6px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.modal .sub{color:var(--muted);font-size:14px;margin:0 0 22px}
.modal .close{position:absolute;top:16px;right:16px;font-size:18px;color:var(--faint);width:32px;height:32px;border-radius:8px}
/* ---- share modal ---- */
.share-modal{max-width:420px}
.modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:9px;font-size:15px;color:var(--faint);background:var(--bg);display:flex;align-items:center;justify-content:center}
.modal-x:hover{color:var(--text);background:#ececf4}
.share-h{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.share-link{display:flex;gap:8px;margin-bottom:16px}
.share-link input{flex:1;min-width:0;border:1px solid #e8e8ee;background:#f7f6fb;border-radius:11px;padding:11px 13px;font-size:13px;color:#444;outline:none}
.share-link .btn{flex:0 0 auto}
.share-opts{display:flex;flex-direction:column;gap:9px}
.share-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid #e8e8ee;border-radius:13px;padding:12px 14px;font-size:14px;font-weight:600;color:#222;background:#fff;transition:.14s}
.share-opt:hover{border-color:#cdbcff;background:#f6f3ff;color:#5B35D5;transform:translateY(-1px)}
.so-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex:0 0 auto}
.so-x{background:#000}.so-tg{background:#2aabee}.so-dc{background:#5865F2}
.share-qr{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.share-qr img{border:1px solid #eceaf5;border-radius:14px;background:#fff;padding:6px}
.share-qr span{font-size:12px;color:var(--faint);font-weight:600}
/* ---- share buttons (small, circular, hover purple glow) ---- */
.share-btn,.gh-share,.tt-share,.pb-share{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#999;background:#fff;border:1px solid #e8e8ee;cursor:pointer;transition:.14s}
.share-btn:hover,.gh-share:hover,.tt-share:hover,.pb-share:hover{color:#5B35D5;border-color:#cdbcff;background:#f3eeff;box-shadow:0 0 0 4px rgba(124,92,255,.14)}
.gh-share{position:absolute;top:0;right:40px;width:32px;height:32px;border-radius:9px;font-size:14px;opacity:0;transition:.14s}
.gh-card:hover .gh-share{opacity:1}
.gh-share:hover{opacity:1}
.tt-share{position:absolute;top:14px;right:14px;width:30px;height:30px;font-size:13px;opacity:0;z-index:2}
.tt-card:hover .tt-share{opacity:1}
.pb-share{width:34px;height:34px;font-size:14px;flex:0 0 auto}
.ap-mini .ti{font-size:15px}
.modal .close:hover{background:var(--bg);color:var(--text)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--border-2);border-radius:11px;padding:11px 13px;font-size:14px;
  font-family:inherit;outline:none;transition:.13s;background:var(--surface-2);color:var(--text)
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(124,92,255,.1)}
.field textarea{resize:vertical;min-height:80px}
.field .hint{font-size:12px;color:var(--faint);margin-top:5px}
.feature-toggles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ftoggle{display:flex;align-items:center;gap:9px;border:1px solid var(--border-2);border-radius:11px;padding:10px 12px;cursor:pointer;font-size:13.5px;font-weight:600;transition:.13s}
.ftoggle:hover{border-color:var(--purple)}
.ftoggle.on{background:var(--grad-soft);border-color:transparent;color:var(--purple-600)}
.ftoggle .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--border-2);display:grid;place-items:center;font-size:11px;color:transparent}
.ftoggle.on .box{background:var(--grad);border-color:transparent;color:#fff}

.emoji-pick{display:flex;flex-wrap:wrap;gap:8px}
.emoji-pick button{width:42px;height:42px;border-radius:11px;font-size:22px;border:1px solid var(--border-2);background:var(--surface-2)}
.emoji-pick button.on{border-color:var(--purple);background:var(--grad-soft)}

.wallet-connect-art{height:96px;border-radius:16px;background:var(--grad);display:grid;place-items:center;font-size:46px;color:#fff;margin-bottom:20px;box-shadow:var(--shadow-lg)}

/* ============================ TOAST ============================ */
.toast-root{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{background:#1c1830;color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);animation:toastin .25s ease;display:flex;align-items:center;gap:9px}
.toast.ok{background:linear-gradient(135deg,#16b27e,#13c98a)}
.toast.err{background:linear-gradient(135deg,#e0506b,#ff6a85)}
@keyframes toastin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================ MISC ============================ */
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty .eico{font-size:46px;margin-bottom:14px;opacity:.6}
.empty h3{font-size:18px;color:var(--text);margin:0 0 6px}
.skeleton{background:linear-gradient(90deg,#f0eff6 25%,#f7f6fc 50%,#f0eff6 75%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:12px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:8px;background:var(--grad-soft);color:var(--purple-600);font-size:12.5px;font-weight:700}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;font-weight:600;margin-bottom:18px}
.back-link:hover{color:var(--purple-600)}
.coming-soon{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--purple-600);background:var(--grad-soft);padding:4px 9px;border-radius:7px;text-transform:uppercase;letter-spacing:.03em}

/* ============================ SHOWCASE COMPONENTS ============================ */
.vtick{color:#3a74e0;font-weight:800}
.vtick.big{font-size:18px}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:8px;border:1px solid transparent;white-space:nowrap}
.b-emblem{color:#12a574;background:#e7f8f1;border-color:#bfeedd}
.b-verified{color:#3a74e0;background:#e9f0ff;border-color:#cfdfff}
.b-artifact{color:#7c5cff;background:var(--grad-soft);border-color:#e2d8ff}
.b-top{color:#d98b00;background:#fff5e1;border-color:#ffe2ad}
.b-early{color:#7c5cff;background:var(--grad-soft);border-color:#e2d8ff}
.b-early-user{color:#1FA971;background:#e9f7f1;border-color:#c5ecdb}
.b-builder{color:#5B5FC7;background:#eef0fb;border-color:#d8ddf5}
.b-trend{color:#e0506b;background:#ffe9ee;border-color:#ffd0db}
.b-pending{color:#a07a00;background:#fff8e6;border-color:#ffe8b0}

.verify-pill{position:absolute;top:10px;right:10px;z-index:3;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:8px;backdrop-filter:blur(4px)}
.verify-pill.ok{background:rgba(18,165,116,.92);color:#fff}
.verify-pill.pending{background:rgba(255,255,255,.92);color:#a07a00;box-shadow:var(--shadow-sm)}

/* launch leaderboard */
.launch-board{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.launch-rank{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:13px 18px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.16s}
.launch-rank:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-2)}
.lr-rank{font-size:22px;font-weight:800;color:var(--faint);width:42px;text-align:center;flex:0 0 auto}
.lr-rank.top{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lr-logo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;flex:0 0 auto;color:#fff}
.lr-info{flex:1;min-width:0}
.lr-name{font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upvote.big{flex-direction:column;height:auto;padding:8px 13px;border-radius:12px;font-size:15px;gap:1px;flex:0 0 auto}
.upvote.big .car{font-size:11px}

/* activity feed */
.feed-list{display:flex;flex-direction:column;gap:2px}
.feed-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.feed-item:last-child{border-bottom:none}
.feed-ico{font-size:16px;flex:0 0 auto;margin-top:1px}
.feed-txt{font-size:13px;color:var(--muted);line-height:1.45}
.feed-txt b{color:var(--text);font-weight:700}
.feed-link{color:var(--purple-600);font-weight:600}
.feed-link:hover{text-decoration:underline}
.feed-ago{font-size:11px;color:var(--faint);margin-top:2px}
.feed-list.big .feed-item{padding:13px 0}
.muted-sm{font-size:13px;color:var(--faint);margin:0}

/* comments */
.comment-box{display:flex;gap:10px;margin-bottom:18px}
.comment-box input{flex:1;border:1px solid var(--border-2);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:14px;outline:none;background:var(--surface-2)}
.comment-box input:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(124,92,255,.1)}
.comment-list{display:flex;flex-direction:column;gap:15px}
.comment{display:flex;gap:11px}
.c-body{flex:1}
.c-head b{font-weight:700;font-size:13.5px}
.c-ago{color:var(--faint);font-size:11.5px;margin-left:6px}
.c-text{font-size:13.5px;color:var(--text);margin-top:2px;line-height:1.45}

/* upload UI */
.upload-row{display:flex;align-items:center;gap:14px}
.upload-prev{width:130px;height:68px;border-radius:10px;border:1px dashed var(--border-2);background-size:cover;background-position:center;display:grid;place-items:center;font-size:11px;color:var(--faint);flex:0 0 auto}
.upload-btn{cursor:pointer}
.shots-prev{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.shot-thumb{width:90px;height:60px;border-radius:9px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#111018;position:relative;border:1px solid var(--border)}
.shot-thumb button{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:#1c1830;color:#fff;font-size:11px;display:grid;place-items:center;cursor:pointer}

.btn-launch{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(124,92,255,.35);font-weight:700}
.btn-launch:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(124,92,255,.45)}
.launched-note{text-align:center;font-weight:700;color:var(--purple-600);background:var(--grad-soft);padding:10px;border-radius:11px;font-size:13.5px}

/* ===================== HOMEPAGE ATMOSPHERE ===================== */
/* richer app cards */
.app-card.pro:hover{box-shadow:0 16px 38px rgba(124,92,255,.20),0 8px 20px rgba(20,16,40,.08);border-color:#ddd2ff;transform:translateY(-4px)}
.card-badges{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cbadge{font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:7px;color:#fff;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.bb-feat{background:linear-gradient(135deg,#ffb020,#ff8a3d)}
.bb-trend{background:rgba(224,80,107,.94)}
.bb-new{background:rgba(124,92,255,.94)}
.bb-emblem{background:rgba(18,165,116,.94)}
.card-stats{display:flex;gap:14px;font-size:12px;color:var(--faint);font-weight:600;margin:0 0 12px;flex-wrap:wrap}
.card-stats span{display:inline-flex;align-items:center;gap:4px}

/* trending today — alive */
.launch-rank:hover{box-shadow:0 18px 40px rgba(124,92,255,.22),0 8px 18px rgba(20,16,40,.08);border-color:#ddd2ff;transform:translateY(-3px)}
.launch-rank .lr-name{white-space:normal;overflow:visible;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.lr-em{font-size:10.5px;font-weight:700;color:#12a574;background:#e7f8f1;border:1px solid #bfeedd;padding:2px 7px;border-radius:6px}
.lr-meta{font-size:12.5px;color:var(--muted);margin:4px 0}
.lr-tags{display:flex;gap:8px;flex-wrap:wrap;margin:7px 0 5px}
.lr-tag{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:7px}
.lr-tag.up{color:var(--purple-600);background:var(--grad-soft)}
.lr-tag.fol{color:#12a574;background:#e7f8f1}
.lr-tag.fire{color:#e0506b;background:#ffe9ee}
.lr-by{font-size:12px;color:var(--faint)}
.lr-by b{color:var(--muted)}

/* featured build of the week */
.featured-card{display:grid;grid-template-columns:320px 1fr;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.18s}
.featured-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.featured-banner{position:relative;min-height:248px;display:grid;place-items:center;color:#fff}
.featured-tag{position:absolute;top:14px;left:14px;z-index:2;font-size:11.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.32);backdrop-filter:blur(4px);padding:6px 11px;border-radius:8px}
.featured-body{padding:24px 26px;display:flex;flex-direction:column}
.featured-name{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:4px 0 8px}
.featured-builder{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:12px}
.featured-story{font-size:14.5px;color:var(--text);line-height:1.55;margin:0 0 18px}
.featured-stats{display:flex;gap:32px;margin-bottom:20px}
.featured-stats .fv{font-size:21px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.featured-stats .fl{font-size:12px;color:var(--muted)}
.featured-body .btn{align-self:flex-start}

/* fastest growing builders */
.momentum-list{display:flex;flex-direction:column;gap:2px}
.momentum-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.momentum-row:last-child{border-bottom:none}
.momentum-row .lr-rank{font-size:15px;width:30px}
.momentum-row .info{flex:1;min-width:0}
.momentum-row .info .name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.momentum-row .info .sub{font-size:11.5px;color:var(--faint)}
.growth{text-align:right;font-weight:800;font-size:14px;color:#12a574;line-height:1.15;flex:0 0 auto}
.growth span{display:block;font-size:9.5px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.02em}

/* live feed */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16b27e;margin-right:7px;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,178,126,.5)}70%{box-shadow:0 0 0 7px rgba(22,178,126,0)}100%{box-shadow:0 0 0 0 rgba(22,178,126,0)}}
.feed-panel h3{display:flex;align-items:center}
.feed-enter{animation:feedIn .55s ease}
@keyframes feedIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .featured-card{grid-template-columns:1fr}
  .featured-banner{min-height:170px}
}

/* ===================== IDENTITY: WHY / CTA / SHOWCASE ===================== */
.why{margin-top:28px}
.why-head{text-align:center;margin-bottom:22px}
.why-head h2{font-size:25px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.why-head p{color:var(--muted);font-size:15px;margin:0}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px 22px;box-shadow:var(--shadow-sm);transition:.18s}
.why-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:.85}
.wc-1::before{background:linear-gradient(135deg,#12a574,#34d39e)}
.wc-2::before{background:linear-gradient(135deg,#ff9f43,#ffbe76)}
.wc-3::before{background:linear-gradient(135deg,#5b8cff,#7fb0ff)}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#e0d7ff}
.why-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:#efeaff;margin-bottom:15px}
.wc-1 .why-ico{background:#e7f8f1}.wc-2 .why-ico{background:#fff1e3}.wc-3 .why-ico{background:#e9f0ff}
.why-card h3{font-size:16px;font-weight:700;margin:0 0 9px;letter-spacing:-.01em}
.why-card p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 5px}

.cta-band{position:relative;overflow:hidden;margin-top:24px;border-radius:24px;background:var(--grad);color:#fff;padding:50px 40px;text-align:center;box-shadow:var(--shadow-lg)}
.cta-glow{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5}
.cta-glow.g1{width:300px;height:300px;background:#cbb6ff;top:-130px;left:8%}
.cta-glow.g2{width:240px;height:240px;background:#ff9ad0;bottom:-130px;right:6%}
.cta-inner{position:relative;z-index:2}
.cta-band h2{font-size:31px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px}
.cta-band p{font-size:16px;opacity:.93;margin:0 auto 24px;max-width:540px;line-height:1.5}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-lg{height:50px;padding:0 26px;font-size:15px;border-radius:13px}
.btn-glass{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}

.showcase{margin-top:36px}
.showcase-sub{color:var(--muted);font-size:14.5px;margin:-8px 0 16px}
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:178px;gap:16px}
.show-tile{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;color:#fff;box-shadow:var(--shadow);transition:.2s;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.show-tile.big{grid-column:span 2;grid-row:span 2}
.show-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.show-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,14,36,.85) 0%,rgba(18,14,36,.28) 48%,rgba(18,14,36,.04) 100%);transition:.2s}
.show-tile:hover .show-overlay{background:linear-gradient(to top,rgba(18,14,36,.9) 0%,rgba(18,14,36,.4) 55%,rgba(18,14,36,.1) 100%)}
.show-top{position:absolute;top:12px;left:12px;z-index:3;display:flex;gap:6px;flex-wrap:wrap}
.show-logo{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);font-size:48px;z-index:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.32))}
.show-tile.big .show-logo{font-size:86px}
.show-info{position:relative;z-index:2;padding:16px 18px;width:100%}
.show-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.92}
.show-name{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:3px 0 4px}
.show-tile.big .show-name{font-size:25px}
.show-by{font-size:12.5px;opacity:.92;font-weight:600}

@media(max-width:980px){.why-grid{grid-template-columns:repeat(2,1fr)}.showcase-grid{grid-template-columns:repeat(2,1fr)}.show-tile.big{grid-column:span 2;grid-row:span 1}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr}.showcase-grid{grid-template-columns:1fr;grid-auto-rows:158px}.show-tile.big{grid-column:span 1}.cta-band{padding:38px 22px}.cta-band h2{font-size:25px}}

/* ===================== REPUTATION: XP / LEVELS / HOF / JOURNEY ===================== */
.lvl-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--grad);padding:2px 9px;border-radius:20px;vertical-align:middle;letter-spacing:.02em;box-shadow:0 2px 6px rgba(124,92,255,.3)}
.badge-mini{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:6px;font-size:10px;vertical-align:middle;border:1px solid transparent}
.b-hof{color:#9a6b00;background:linear-gradient(135deg,#fff1c9,#ffe49a);border-color:#ffd87a}
.b-elite{color:#7c5cff;background:#efe9ff;border-color:#ddd0ff}
.b-featured{color:#d98b00;background:#fff5e1;border-color:#ffe2ad}

.xp-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm);margin:16px 0}
.xp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.xp-level{font-weight:800;font-size:16px;letter-spacing:-.01em}
.xp-amount{font-weight:700;color:var(--purple-600);font-size:14px}
.xp-bar{height:10px;border-radius:20px;background:var(--bg);overflow:hidden}
.xp-fill{height:100%;border-radius:20px;background:var(--grad);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.xp-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px;font-weight:600}

.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;margin-top:26px;align-items:start}
.profile-main{min-width:0}
.profile-side{position:sticky;top:0;align-self:start}
.cards-row.two{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.profile-main .section-head{margin-top:30px}
.profile-main .section-head h2{font-size:18px}
/* builder profile — Builder Journey panel: compact, soft */
.journey-panel{box-shadow:0 1px 3px rgba(20,16,40,.05);border-radius:18px}
.journey-panel h3{font-size:14px}
/* builder profile — published projects: App-Store-style row cards, full-width stacked */
.profile-builds{display:flex;flex-direction:column;gap:16px}
.pb-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 1px 3px rgba(20,16,40,.05);transition:.18s;cursor:pointer}
.pb-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,92,255,.14),0 6px 16px rgba(20,16,40,.07);border-color:#ddd2ff}
.pb-banner{position:relative;height:132px;overflow:hidden;background:linear-gradient(180deg,#111018,#171425)}
.pb-body{display:flex;align-items:center;gap:16px;padding:16px 18px}
.pb-logo{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font-size:26px;color:#fff;flex:0 0 auto;background-size:cover;background-position:center}
.pb-logo .logo-img{width:100%;height:100%;border-radius:11px;object-fit:cover}
.pb-info{flex:1;min-width:0}
.pb-name{font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-tag{font-size:13.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-meta{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.pb-by{font-size:12.5px;color:var(--faint);font-weight:600}
.pb-actions{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;align-self:center}
.pb-actions .btn{min-width:122px;justify-content:center;text-align:center}
@media(max-width:560px){.pb-body{flex-wrap:wrap}.pb-actions{flex-direction:row;width:100%}.pb-actions .btn{flex:1}}

/* prestige timeline — vertical, soft purple connector, achievement accents */
.jtl{display:flex;flex-direction:column}
.jtl-year{font-size:12px;font-weight:800;color:var(--purple-600);letter-spacing:.05em;margin:16px 0 12px}
.jtl-year:first-child{margin-top:0}
.jtl-item{position:relative;display:flex;gap:13px;padding-bottom:16px}
.jtl-item::before{content:"";position:absolute;left:17px;top:38px;bottom:-4px;width:2px;background:linear-gradient(#e3d8ff,#f1ecfb);border-radius:2px}
.jtl-item:last-child::before{display:none}
.jtl-ic{position:relative;z-index:1;flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:#f4f0ff;border:1px solid #e7deff}
.jtl-body{padding-top:5px;min-width:0}
.jtl-label{font-size:13.5px;font-weight:600;color:#1d1a2e;line-height:1.35}
.jtl-date{font-size:11.5px;color:var(--faint);margin-top:3px}
/* publish / update / join accents */
.jtl-publish .jtl-ic{background:#ede8ff;border-color:#d6c9ff}
.jtl-update .jtl-ic{background:#eef3ff;border-color:#d3e0ff}
.jtl-join .jtl-ic{background:#e9f7ee;border-color:#c7ebd2}
/* achievements — gold prestige accent */
.jtl-achievement .jtl-ic{background:linear-gradient(135deg,#fff3d0,#ffe6a6);border-color:#ffd886;box-shadow:0 3px 12px rgba(235,170,30,.28)}
.jtl-achievement .jtl-label{color:#5B35D5;font-weight:700}
.jtl-milestone .jtl-ic{background:linear-gradient(135deg,#f3ecff,#ece2ff);border-color:#dccbff}
.jtl-milestone .jtl-label{font-weight:700}

/* ===================== SETTINGS — Builder Control Center ===================== */
.set-page{max-width:1100px;margin:0 auto}
.set-head{margin-bottom:24px}
.set-title{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.set-sub{color:var(--muted);font-size:15px;margin:0}
.set-grid{display:grid;grid-template-columns:224px 1fr;gap:28px;align-items:start}
.set-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:8px}
.set-navi{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;font-size:14px;font-weight:600;color:var(--muted);text-align:left;transition:.13s;white-space:nowrap}
.set-navi:hover{background:#f4f0ff;color:var(--text)}
.set-navi.active{background:var(--grad-soft);color:var(--purple-600)}
.set-navi-ic{font-size:16px}
.set-content{min-width:0}
.set-section{display:none}
.set-section.active{display:block;animation:fade .2s}
.set-h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 18px}
.set-card{background:#fff;border:1px solid #ECEAF5;border-radius:20px;padding:22px;margin-bottom:16px;box-shadow:0 1px 3px rgba(20,16,40,.04)}
.set-label{font-size:13px;font-weight:700;color:#555;margin-bottom:14px}
.set-avrow{display:flex;gap:20px;align-items:center}
.set-avprev{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:1px solid #eceaf5;display:block}
.set-avprev img{width:100%;height:100%;object-fit:cover}
.set-avside{display:flex;flex-direction:column;gap:8px;min-width:0}
.set-radio{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.set-avbtns{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.set-preview{font-size:12.5px;color:var(--faint);margin-top:8px;font-weight:600;word-break:break-all}
.set-counter{text-align:right;font-size:11.5px;color:var(--faint);margin-top:5px}
.set-banner-prev{width:100%;aspect-ratio:1200/300;border-radius:16px;background:linear-gradient(135deg,#f1ecff,#fbf7ff);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--faint);font-size:13px;border:1px solid #eceaf5;margin-bottom:14px;padding:20px}
.set-banner-btns{display:flex;gap:8px;flex-wrap:wrap}
.set-save{margin-top:2px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:1px solid #f3f1f8}
.set-row:last-child{border-bottom:none}
.set-row-label{font-size:14px;font-weight:600}
.set-toggle{width:44px;height:26px;border-radius:20px;background:#e2dfec;position:relative;transition:.16s;flex:0 0 auto;border:none;cursor:pointer}
.set-toggle.on{background:var(--purple-600)}
.set-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:.16s}
.set-toggle.on .set-knob{left:21px}
.set-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.set-badge{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1px solid #eceaf5;background:#fff}
.set-badge.earned{background:linear-gradient(135deg,#fff7e3,#f6f0ff);border-color:#ffe2a6;box-shadow:0 3px 12px rgba(235,170,30,.12)}
.set-badge.locked{opacity:.5;filter:grayscale(.55)}
.set-badge-ic{font-size:25px;flex:0 0 auto}
.set-badge-tx{flex:1;min-width:0}
.set-badge-name{font-size:13.5px;font-weight:700}
.set-badge-sub{font-size:11.5px;color:var(--muted);line-height:1.35}
.set-badge-check{color:#16a34a;font-weight:800;flex:0 0 auto}
.set-badge-lock{font-size:13px;opacity:.6;flex:0 0 auto}
@media(max-width:760px){
  .set-grid{grid-template-columns:1fr;gap:16px}
  .set-nav{flex-direction:row;overflow-x:auto;position:static;gap:6px;scrollbar-width:none}
  .set-nav::-webkit-scrollbar{display:none}
  .set-navi{flex:0 0 auto}
  .set-badges{grid-template-columns:1fr}
}

/* ===================== APP UPDATES / CHANGELOG ===================== */
/* tabs */
.ap-tabs{display:flex;gap:4px;border-bottom:1px solid #ECEAF5;margin-top:34px;overflow-x:auto;scrollbar-width:none}
.ap-tabs::-webkit-scrollbar{display:none}
.ap-tab{padding:12px 16px;font-size:14.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.13s;background:none}
.ap-tab:hover{color:var(--text)}
.ap-tab.active{color:var(--purple-600);border-bottom-color:var(--purple-600)}
.ap-tab-n{font-size:11px;color:var(--faint);font-weight:700;margin-left:2px}
.ap-panel{display:none}
.ap-panel.active{display:block;animation:fade .2s}
.ap-panel .ap-section{margin-top:30px}
.ap-up-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.ap-up-head .ap-h2{margin:0}
.ap-up-empty{text-align:center;padding:50px 20px;color:var(--muted)}
.ap-up-empty .te-emoji{font-size:38px;margin-bottom:8px}
/* changelog card */
.upc{background:#fff;border:1px solid #ECEAF5;border-radius:18px;padding:22px;margin-bottom:16px;box-shadow:0 1px 3px rgba(20,16,40,.04)}
.upc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.upc-ver{font-size:14px;font-weight:800;color:#3a2b6b;background:#f1ecff;border:1px solid #e0d6ff;padding:3px 10px;border-radius:8px;letter-spacing:-.01em}
.upc-type{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px}
.upc-date{margin-left:auto;font-size:12px;color:var(--faint)}
.upc-title{font-size:17px;font-weight:700;margin:13px 0 0;letter-spacing:-.01em}
.upc-summary{font-size:13.5px;color:#555;line-height:1.5;margin:6px 0 0}
.upc-sec{margin-top:15px}
.upc-sec-h{font-size:12px;font-weight:800;letter-spacing:.05em;color:#777;margin-bottom:6px}
.upc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.upc-list li{position:relative;padding-left:18px;font-size:13.5px;color:#333;line-height:1.45}
.upc-list li::before{content:"+";position:absolute;left:2px;font-weight:800}
.upc-new .upc-list li::before{color:#16a34a}
.upc-improved .upc-list li::before{color:#5b35d5}
.upc-fixed .upc-list li::before{color:#e0457f}
.upc-shots{display:flex;gap:10px;overflow-x:auto;margin-top:16px;padding-bottom:4px}
.upc-shots img{height:160px;width:auto;max-width:360px;object-fit:contain;object-position:center;background:#111018;border-radius:12px;border:1px solid #eceaf5;flex:0 0 auto;cursor:zoom-in;transition:.14s}
.upc-shots img:hover{border-color:#c9b8ff;box-shadow:0 6px 18px rgba(124,92,255,.16)}
/* ---- notifications ---- */
.avatar-btn{position:relative}
.notif-dot{position:absolute;top:-3px;left:20px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 100%);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;border:2px solid #fff;box-sizing:content-box;box-shadow:0 2px 6px rgba(124,92,255,.5),0 0 0 1px rgba(124,92,255,.25)}
.pm-badge{margin-left:auto;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 100%);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 2px 6px rgba(124,92,255,.4)}
.pm-item{display:flex;align-items:center;gap:10px}
.notif-list{display:flex;flex-direction:column;gap:10px;max-width:760px}
.notif-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-left:3px solid #ece6ff;border-radius:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.notif-row:hover{border-color:#ddd0ff;box-shadow:0 12px 28px rgba(124,92,255,.16);transform:translateY(-2px)}
.notif-row.unread{background:#f7f4ff;border-left-color:var(--purple)}
.notif-ic{font-size:22px;flex:0 0 auto}
.notif-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-title{font-size:14.5px;color:var(--text)}
.notif-sub{font-size:12.5px;color:var(--faint)}
.notif-go{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--purple-600);transition:color .18s ease,transform .18s ease}
.notif-row:hover .notif-go{color:#5a36e0;transform:translateX(2px)}
@media(max-width:600px){.notif-go{display:none}}
/* badge pop (one-shot) + avatar glow on new notification */
.notif-dot.pop{animation:notifPop .42s cubic-bezier(.18,.9,.32,1.4)}
@keyframes notifPop{0%{transform:scale(0)}55%{transform:scale(1.25)}100%{transform:scale(1)}}
.avatar-btn.notif-glow{animation:notifGlow 2s ease-out}
@keyframes notifGlow{0%{box-shadow:0 0 0 0 rgba(124,92,255,0);transform:scale(1)}18%{box-shadow:0 0 0 5px rgba(124,92,255,.28);transform:scale(1.08)}45%{transform:scale(1)}100%{box-shadow:0 0 0 0 rgba(124,92,255,0)}}
/* unread highlight on the notifications page (fades) */
.notif-row.just{background:#efe8ff;border-color:#cdb8ff;box-shadow:0 0 0 3px rgba(124,92,255,.12);transition:background .6s ease,border-color .6s ease,box-shadow .6s ease}
/* empty state */
.notif-empty{text-align:center;padding:64px 20px;color:var(--muted)}
.notif-empty-ic{font-size:44px;margin-bottom:12px}
.notif-empty h3{font-size:20px;margin:0 0 8px;color:var(--text)}
.notif-empty p{font-size:14.5px;max-width:420px;margin:0 auto;line-height:1.55}
/* real-time toast stack (top-right) */
.ntoast-root{position:fixed;top:74px;right:18px;z-index:4000;display:flex;flex-direction:column;gap:10px;width:340px;max-width:calc(100vw - 36px);pointer-events:none}
.ntoast{pointer-events:auto;background:#fff;border:1px solid #ECEAF5;border-left:3px solid var(--purple);border-radius:14px;box-shadow:0 16px 40px rgba(20,16,40,.18);padding:14px 16px;position:relative;cursor:pointer;opacity:0;transform:translateX(24px);transition:opacity .3s ease,transform .3s cubic-bezier(.18,.9,.32,1.1),box-shadow .18s ease,border-color .18s ease}
.ntoast.in{opacity:1;transform:translateX(0)}
.ntoast.in:hover{border-color:#ddd0ff;box-shadow:0 20px 48px rgba(124,92,255,.22);transform:translateY(-2px)}
.ntoast-x{position:absolute;top:8px;right:9px;width:20px;height:20px;border:none;background:none;color:var(--faint);font-size:13px;cursor:pointer;border-radius:6px;line-height:1}
.ntoast-x:hover{background:#f3f0ff;color:var(--text)}
.ntoast-row{display:flex;gap:12px;align-items:flex-start}
.ntoast-ic{font-size:22px;flex:0 0 auto;line-height:1.2}
.ntoast-bd{min-width:0;padding-right:14px}
.ntoast-t{font-size:14px;color:var(--text);line-height:1.4}
.ntoast-sub{font-size:12px;color:var(--faint);margin-top:1px}
.ntoast-cta{display:inline-block;margin-top:7px;font-size:12.5px;font-weight:700;color:var(--purple-600);transition:color .18s ease,transform .18s ease}
.ntoast.in:hover .ntoast-cta{color:#5a36e0;transform:translateX(2px)}
.set-row-sub{display:block;font-size:12px;color:var(--faint);font-weight:400;margin-top:2px}
@media(max-width:600px){.ntoast-root{left:12px;right:12px;width:auto}}
.upc-foot{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid #f2f0f8}
.upc-like{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#888;border:1px solid #eceaf5;border-radius:20px;padding:6px 13px;background:#fff;cursor:pointer;transition:.13s}
.upc-like:hover{border-color:#ffc2d4}
.upc-like.on{color:#e0457f;border-color:#ffc2d4;background:#fff0f4}
.upc-likers{font-size:12px;color:var(--faint)}
.upc-tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.upc-tool{font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid #eceaf5;border-radius:9px;padding:6px 11px;background:#fff;cursor:pointer;transition:.13s;text-decoration:none}
.upc-tool:hover{border-color:#cdbcff;color:#5B35D5}
.upc-tool.danger:hover{border-color:#ffc2c2;color:#cc3838}
/* update-type accent colors */
.ut-major{background:#efe7ff;color:#6b3fd6}
.ut-feature{background:#e7efff;color:#2f6bd6}
.ut-fix{background:#fff1e0;color:#b5641a}
.ut-ui{background:#ffe9f4;color:#c43d8a}
.ut-perf{background:#e2f7f0;color:#0f9b78}
.ut-security{background:#ffe6e6;color:#cc3838}
.ut-beta{background:#e3f6fb;color:#1597a8}
.ut-docs{background:#eef0f4;color:#5b6172}
/* update form screenshots */
.upd-shots{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.upd-shot{position:relative;width:124px;height:80px;border-radius:10px;overflow:hidden;border:1px solid #eceaf5;background:#111018}
.upd-shot img{width:100%;height:100%;object-fit:contain}
.upd-shot-rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(20,16,40,.6);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer}
/* global updates feed */
.upd-feed{display:flex;flex-direction:column;gap:12px;max-width:760px}
.ufr{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid #ECEAF5;border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px rgba(20,16,40,.04);transition:.16s}
.ufr:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,92,255,.12);border-color:#ddd0ff}
.ufr-logo{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:21px;color:#fff;flex:0 0 auto;overflow:hidden;background-size:cover;background-position:center}
.ufr-logo.has-img{background:none!important}
.ufr-logo .logo-img{width:100%;height:100%;border-radius:11px;object-fit:cover}
.ufr-body{flex:1;min-width:0}
.ufr-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ufr-name{font-size:15px;font-weight:700}
.ufr-title{font-size:13.5px;font-weight:600;margin-top:4px}
.ufr-sum{font-size:13px;color:#666;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ufr-meta{font-size:11.5px;color:var(--faint);margin-top:4px}
.ufr-go{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--purple-600);white-space:nowrap}
@media(max-width:600px){.ufr-go{display:none}}
/* journey changelog link */
.jtl-ver{font-size:11px;font-weight:800;color:#6b3fd6;background:#f1ecff;border-radius:6px;padding:1px 6px;margin-left:4px}
.jtl-link{display:inline-block;font-size:12px;font-weight:600;color:var(--purple-600);margin-top:3px}

/* ===================== APP MANAGEMENT (two-tab segmented control) ===================== */
.bf-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #ECEAF5;border-radius:16px;height:48px;padding:5px;margin:10px 0 24px;max-width:420px;box-shadow:0 1px 3px rgba(20,16,40,.04)}
.bf-seg-slider{position:absolute;top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);border-radius:12px;background:var(--grad);box-shadow:0 6px 16px rgba(124,92,255,.4);transition:transform .24s cubic-bezier(.4,0,.2,1)}
.bf-seg[data-active="updates"] .bf-seg-slider{transform:translateX(100%)}
.bf-seg-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:600;color:#444;background:none;cursor:pointer;border-radius:12px;transition:color .2s}
.bf-seg-btn.active{color:#fff;font-weight:700}
.bf-seg-btn:not(.active):hover{color:#5B35D5}
.bf-tabbed .bf-panel{display:none}
.bf-tabbed .bf-panel.active{display:block;animation:fade .2s}
.bf-banner-prev{aspect-ratio:1200/360;border-radius:14px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;border:1px dashed #d8d4e8;margin-bottom:10px;text-align:center;padding:16px}
.bf-banner-btns{display:flex;gap:8px;flex-wrap:wrap}
.bf-bmode{margin-top:16px}
.bf-bmode-label{font-size:13px;font-weight:700;color:#555;margin-bottom:8px}
.bf-bmode-opt{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid #e8e8ee;border-radius:12px;margin-bottom:8px;cursor:pointer;transition:.13s}
.bf-bmode-opt:hover{border-color:#cdbcff}
.bf-bmode-opt:has(input:checked){border-color:#5B35D5;background:#f6f3ff}
.bf-bmode-opt input{margin-top:3px;flex:0 0 auto}
.bf-bmode-opt span{display:flex;flex-direction:column;gap:2px}
.bf-bmode-opt b{font-size:13.5px;font-weight:700}
.bf-bmode-opt small{font-size:12px;color:var(--muted)}
/* banner editor: live preview (same aspect ratio as the app page) + fill controls */
.bnp{position:relative;width:100%;aspect-ratio:1100/320;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#111018,#171425);box-shadow:inset 0 0 40px rgba(0,0,0,.3);margin-bottom:10px}
.bf-fill-ctrls{margin-top:14px;padding:14px;border:1px solid #ECEAF5;border-radius:12px;background:#faf9fe}
.bf-ctrl{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.bf-ctrl label{font-size:12.5px;font-weight:600;color:#555}
.bf-ctrl input[type=range]{width:100%;accent-color:#5B35D5}

/* ===================== DOCUMENTATION — premium docs experience ===================== */
.docs{max-width:1180px;margin:0 auto}
/* --- HOME / landing --- */
.docs-hero{text-align:center;padding:34px 0 30px;border-bottom:1px solid #f0eef7;margin-bottom:36px}
.docs-hero-h1{font-size:42px;font-weight:800;letter-spacing:-.04em;margin:0 0 10px}
.docs-hero-sub{font-size:17px;color:var(--muted);margin:0 auto 24px;max-width:560px;line-height:1.5}
.docs-hero-search{position:relative;max-width:560px;margin:0 auto}
.docs-hero-search i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:19px}
.docs-hero-search input{width:100%;border:1px solid #e8e8ee;background:#fff;border-radius:15px;padding:15px 18px 15px 48px;font-size:15.5px;outline:none;transition:.16s;box-shadow:0 2px 10px rgba(20,16,40,.05)}
.docs-hero-search input:focus{border-color:#c9b8ff;box-shadow:0 0 0 4px rgba(124,92,255,.14)}
.docs-sec{margin-bottom:38px}
.docs-h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.doc-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* topic / article cards (popular, related, results) */
.doc-card-link{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #ECEAF5;border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px rgba(20,16,40,.04);transition:.16s;min-width:0;overflow:hidden}
.doc-card-link:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(124,92,255,.13);border-color:#ddd0ff}
.dcl-ic{font-size:24px;flex:0 0 auto;line-height:1}
.dcl-tx{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.dcl-title{font-size:14.5px;font-weight:700;color:#111;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dcl-sub{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcl-arrow{flex:0 0 auto;color:var(--purple-600);font-weight:700;opacity:.5;transition:.16s}
.doc-card-link:hover .dcl-arrow{opacity:1;transform:translateX(2px)}
.doc-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.doc-home-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #ECEAF5;border-radius:16px;padding:18px;box-shadow:0 1px 3px rgba(20,16,40,.04);transition:.16s}
.doc-home-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,92,255,.13);border-color:#ddd0ff}
.dhc-ic{font-size:26px;flex:0 0 auto}
.dhc-title{font-size:15px;font-weight:700}
.dhc-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
/* --- ARTICLE 3-column explorer --- */
.docs-menu-toggle{display:none;border:1px solid #e8e8ee;background:#fff;border-radius:11px;padding:10px 14px;font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:14px}
.docs-grid3{display:grid;grid-template-columns:236px minmax(0,1fr) 196px;gap:36px;align-items:start}
.docs-nav{position:sticky;top:8px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 20px)}
.docs-back{font-size:13px;font-weight:600;color:var(--muted)}
.docs-back:hover{color:var(--purple-600)}
.docs-search{position:relative}
.docs-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:16px}
.docs-search input{width:100%;border:1px solid #e8e8ee;background:#fff;border-radius:11px;padding:9px 12px 9px 36px;font-size:13.5px;outline:none;transition:.14s}
.docs-search input:focus{border-color:#c9b8ff;box-shadow:0 0 0 3px rgba(124,92,255,.12)}
.docs-tree{display:flex;flex-direction:column;gap:4px;overflow-y:auto;scrollbar-width:thin;padding-right:4px}
.docs-group{border:none}
.docs-group-h{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:12.5px;font-weight:700;color:#555;padding:8px 8px;border-radius:9px;transition:.12s}
.docs-group-h::-webkit-details-marker{display:none}
.docs-group-h:hover{background:#f6f3ff}
.docs-chev{font-size:11px;color:var(--faint);transition:transform .2s}
.docs-group[open] .docs-chev{transform:rotate(180deg)}
.docs-group-pages{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px 6px;overflow:hidden}
.docs-group[open] .docs-group-pages{animation:docsExpand .2s ease}
@keyframes docsExpand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.docs-link{display:block;padding:7px 12px;border-radius:20px;font-size:13px;font-weight:500;color:var(--muted);transition:.12s}
.docs-link:hover{background:#f4f0ff;color:var(--text)}
.docs-link.active{background:var(--grad-soft);color:var(--purple-600);font-weight:700}
.docs-content{min-width:0}
.docs-toc{position:sticky;top:8px;align-self:start}
.docs-toc-h{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#999;text-transform:uppercase;margin-bottom:12px}
.docs-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;border-left:2px solid #f0eef7;padding-left:14px}
.docs-toc-list li{font-size:13px;color:var(--faint);font-weight:500}
/* --- article body --- */
.doc-page{max-width:720px}
.doc-bc{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:12px}
.doc-bc a{color:var(--purple-600)}
.doc-bc-sep{color:var(--faint)}
.doc-h1{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px;line-height:1.1}
.doc-sub{font-size:17px;color:var(--muted);line-height:1.55;margin:0 0 16px}
.doc-meta{display:flex;align-items:center;gap:8px;margin-bottom:30px;flex-wrap:wrap}
.doc-chip{font-size:12px;font-weight:600;color:#666;background:#f4f3f8;border:1px solid #ececf4;padding:5px 11px;border-radius:20px}
.doc-lvl-beginner{background:#e9f7ee;color:#16a34a;border-color:#c7ebd2}
.doc-lvl-intermediate{background:#fff3d6;color:#b5781a;border-color:#ffe2a6}
.doc-lvl-advanced{background:#ffe6e6;color:#cc3838;border-color:#ffc7c7}
.doc-card{background:#fff;border:1px solid #ECEAF5;border-radius:20px;box-shadow:0 1px 3px rgba(20,16,40,.04)}
.doc-soon{text-align:center;padding:50px 30px}
.doc-soon-ic{font-size:42px;margin-bottom:12px}
.doc-soon h3{font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
.doc-soon p{color:var(--muted);font-size:14.5px;max-width:440px;margin:0 auto 20px;line-height:1.55}
.doc-soon-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.doc-rel{margin-top:38px}
.doc-rel-h{font-size:13px;font-weight:800;color:#777;letter-spacing:.03em;text-transform:uppercase;margin:0 0 14px}
.doc-pn{display:flex;justify-content:space-between;gap:14px;margin-top:38px;padding-top:24px;border-top:1px solid #f0eef7}
.doc-pn-btn{display:flex;flex-direction:column;gap:3px;flex:1;max-width:48%;border:1px solid #ECEAF5;border-radius:14px;padding:14px 16px;transition:.16s;background:#fff}
.doc-pn-btn.next{text-align:right;align-items:flex-end}
.doc-pn-btn:hover{border-color:#ddd0ff;box-shadow:0 8px 20px rgba(124,92,255,.1);transform:translateY(-1px)}
.doc-pn-dir{font-size:11.5px;font-weight:600;color:var(--purple-600)}
.doc-pn-title{font-size:14px;font-weight:700;color:#111}
/* --- search results --- */
.docs-res-count{font-size:13px;color:var(--faint);font-weight:600;margin-bottom:16px}
.docs-res-group{margin-bottom:22px}
.docs-res-h{font-size:12px;font-weight:800;letter-spacing:.03em;color:#777;text-transform:uppercase;margin-bottom:10px}
.docs-res-group .doc-card-link{margin-bottom:8px}
.docs-noresults{text-align:center;padding:60px 20px;color:var(--muted)}
.docs-noresults .te-emoji{font-size:40px;margin-bottom:10px}
.docs-noresults h3{font-size:19px;margin:0 0 6px}
.docs-nr-actions{display:flex;gap:10px;justify-content:center;margin-top:16px}
@media(max-width:980px){
  .docs-grid3{grid-template-columns:236px minmax(0,1fr)}
  .docs-toc{display:none}
}
@media(max-width:760px){
  .docs-grid3{grid-template-columns:1fr;gap:0}
  .docs-menu-toggle{display:block;width:100%;text-align:left}
  .docs-nav{display:none;position:static;max-height:none;padding:14px;border:1px solid #ECEAF5;border-radius:14px;background:#fff;margin-bottom:18px}
  .docs-nav.open{display:flex}
  .doc-card-grid,.doc-home-grid{grid-template-columns:1fr}
  .docs-hero{padding:24px 0 22px;margin-bottom:26px}
  .docs-hero-h1{font-size:30px}
  .docs-hero-sub{font-size:15px}
  .doc-h1{font-size:25px}
  .doc-sub{font-size:15.5px}
  /* prev/next stack vertically on phone */
  .doc-pn{flex-direction:column;gap:10px}
  .doc-pn-btn{max-width:none}
  .doc-pn-btn.next{text-align:left;align-items:flex-start}
  .doc-pn-empty{display:none}
  /* keep wide content from overflowing */
  .doc-code-body{font-size:12.5px}
  .doc-feedback{padding:16px 16px}
}
@media(max-width:480px){
  .docs-hero-h1{font-size:26px}
  .doc-h1{font-size:22px}
  .doc-body{font-size:14.5px}
  .doc-body>p:first-child{font-size:15px}
  .doc-hd[id]{font-size:19px}
  .doc-callout{flex-direction:column;gap:8px;padding:14px}
  .doc-soon{padding:34px 18px}
  .doc-soon-btns{flex-direction:column}
  .doc-soon-btns .btn{width:100%}
}
/* ---- doc badges (NEW / UPDATED / POPULAR) ---- */
.doc-badge{display:inline-block;vertical-align:middle;font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:20px;margin-left:8px;line-height:1.5;text-transform:uppercase}
.doc-badge-new{background:#e9f7ee;color:#16a34a}
.doc-badge-updated{background:#eef2ff;color:#5b5bd6}
.doc-badge-popular{background:#fff3d6;color:#b5781a}
.doc-h1 .doc-badge{font-size:11px;margin-left:12px;transform:translateY(-4px)}
.docs-link{display:flex!important;align-items:center;justify-content:space-between;gap:8px}
.docs-link .doc-badge{margin-left:0}
/* ---- reading progress ---- */
.doc-progress{position:sticky;top:0;z-index:30;height:3px;background:transparent;margin:-2px 0 10px}
.doc-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#7c5cff,#a06bff);border-radius:0 3px 3px 0;transition:width .08s linear}
/* ---- prev / next cards ---- */
.doc-pn-btn{justify-content:center}
.doc-pn-sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-pn-empty{flex:1;max-width:48%}
/* ---- feedback ---- */
.doc-feedback{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px;padding:20px 22px;background:#faf9fe;border:1px solid #ECEAF5;border-radius:16px}
.doc-fb-q{font-size:14.5px;font-weight:700}
.doc-fb-btns{display:flex;gap:10px}
.doc-fb-btn{border:1px solid #e3e0ee;background:#fff;border-radius:10px;padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.14s}
.doc-fb-btn:hover{border-color:#c9b8ff;background:#f6f3ff}
.doc-fb-btn.active{border-color:var(--purple-600);background:var(--grad-soft);color:var(--purple-600)}
.doc-feedback.voted .doc-fb-btn:not(.active){opacity:.5}
.doc-fb-msg{font-size:13px;color:var(--purple-600);font-weight:600;margin-left:auto}
/* ---- quick actions ---- */
.doc-quick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--faint)}
.doc-quick-q{font-weight:600}
.doc-quick-link{background:none;border:none;color:var(--purple-600);font-size:13px;font-weight:600;cursor:pointer;padding:0}
.doc-quick-link:hover{text-decoration:underline}
.doc-quick-dot{color:#d6d2e2}
/* ---- copyable headings ---- */
.doc-hd{display:flex;align-items:center;gap:8px;scroll-margin-top:80px;font-weight:800;letter-spacing:-.02em}
.doc-hd[id]{font-size:22px;margin:34px 0 12px}
h3.doc-hd[id]{font-size:17px;margin:26px 0 10px}
.doc-hd-link{opacity:0;border:none;background:none;color:var(--faint);cursor:pointer;font-size:16px;transition:.12s;line-height:1;padding:2px}
.doc-hd:hover .doc-hd-link{opacity:1}
.doc-hd-link:hover{color:var(--purple-600)}
/* ---- code blocks ---- */
.doc-code{margin:18px 0;border:1px solid #25223a;border-radius:14px;overflow:hidden;background:#1a1830;box-shadow:0 6px 18px rgba(20,16,40,.12)}
.doc-code-top{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#14122a;border-bottom:1px solid #29263f}
.doc-code-lang{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#9b94c4;text-transform:uppercase}
.doc-code-copy{display:flex;align-items:center;gap:5px;border:1px solid #34304e;background:#221f3a;color:#cfcae8;border-radius:8px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:.14s}
.doc-code-copy:hover{background:#2c2848;border-color:#4a4470}
.doc-code-body{display:flex;overflow-x:auto;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:13px;line-height:1.65}
.doc-code-ln{margin:0;padding:16px 12px 16px 16px;color:#534f73;text-align:right;user-select:none;border-right:1px solid #29263f;background:#161430}
.doc-code-pre{margin:0;padding:16px 18px;color:#e6e3f5;white-space:pre;flex:1}
.tok-c{color:#6f6a92;font-style:italic}
.tok-s{color:#8ee6a8}
.tok-k{color:#b89bff;font-weight:600}
/* ---- callouts / info boxes ---- */
.doc-callout{display:flex;gap:14px;margin:18px 0;padding:16px 18px;border-radius:14px;border:1px solid;background:#faf9fe}
.dc-ic{font-size:20px;flex:0 0 auto;line-height:1.3}
.dc-h{font-size:13px;font-weight:800;letter-spacing:.01em;margin-bottom:3px}
.dc-tx{font-size:14px;color:var(--text);line-height:1.55}
.dc-tx p:first-child{margin-top:0}.dc-tx p:last-child{margin-bottom:0}
.doc-callout-tip{background:#f3f0ff;border-color:#e0d7ff}.doc-callout-tip .dc-h{color:#6d4bd6}
.doc-callout-warning{background:#fff7ec;border-color:#ffe2b8}.doc-callout-warning .dc-h{color:#b5781a}
.doc-callout-best{background:#edfaf1;border-color:#c7ebd2}.doc-callout-best .dc-h{color:#16a34a}
.doc-callout-info{background:#eef4ff;border-color:#cfe0ff}.doc-callout-info .dc-h{color:#2d6cdf}
/* ---- documentation image ---- */
.doc-fig{margin:20px 0}
.doc-fig-img{width:100%;border-radius:14px;border:1px solid #e6e3f0;box-shadow:0 4px 14px rgba(20,16,40,.07);cursor:zoom-in;display:block;transition:.16s}
.doc-fig-img:hover{box-shadow:0 10px 26px rgba(124,92,255,.14)}
.doc-fig-cap{text-align:center;font-size:12.5px;color:var(--faint);margin-top:9px}
.doc-lightbox{max-width:92vw;max-height:90vh;background:transparent;box-shadow:none;padding:0;cursor:zoom-out;display:flex;flex-direction:column;align-items:center;gap:12px}
.doc-lightbox img{max-width:92vw;max-height:80vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.doc-lb-cap{color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.5)}
/* ---- article body typography ---- */
.doc-body{font-size:15px;line-height:1.72;color:#33303f}
.doc-body>p:first-child{font-size:16.5px;color:#4a4660;line-height:1.6}
.doc-body p{margin:0 0 14px}
.doc-body ul,.doc-body ol{margin:0 0 16px;padding-left:22px}
.doc-body li{margin:7px 0}
.doc-body strong{color:#1a1530;font-weight:700}
.doc-body em{color:#5a5570;font-style:normal;font-weight:600}
.doc-body a{color:var(--purple-600);font-weight:600}
/* check / cross lists */
.doc-body ul.doc-check,.doc-body ul.doc-cross{list-style:none;padding-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.doc-body ul.doc-check li,.doc-body ul.doc-cross li{margin:3px 0;font-weight:600;color:#2c2838}
/* comparison table */
.doc-table-wrap{overflow-x:auto;margin:18px 0}
.doc-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;border:1px solid #ECEAF5;border-radius:14px;overflow:hidden}
.doc-table th{background:#faf9fe;text-align:left;font-weight:800;padding:12px 16px;font-size:13px;color:#1a1530;border-bottom:1px solid #ECEAF5}
.doc-table td{padding:11px 16px;border-bottom:1px solid #f3f1f9;color:#33303f}
.doc-table tbody tr:last-child td{border-bottom:none}
.doc-table td+td,.doc-table th+th{border-left:1px solid #f3f1f9}
.doc-table th:last-child{color:var(--purple-600)}
/* numbered steps */
.doc-steps{list-style:none;counter-reset:step;padding:0;margin:18px 0}
.doc-steps>li{position:relative;counter-increment:step;padding:0 0 22px 48px;margin:0}
.doc-steps>li::before{content:counter(step);position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:50%;background:var(--grad-soft);color:var(--purple-600);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.doc-steps>li:not(:last-child)::after{content:'';position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:#eee9f7}
.doc-steps>li>strong{display:block;margin-bottom:4px;font-size:15.5px;color:#1a1530}
.doc-steps ul{margin:9px 0 0}
/* tagline band */
.doc-tagline{margin:24px 0 4px;padding:24px 26px;border-radius:18px;background:linear-gradient(135deg,#5B35D5,#7c5cff,#a06bff);color:#fff;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.4;text-align:center;box-shadow:0 12px 30px rgba(124,92,255,.22)}
.doc-tagline span{display:block}
/* TOC links + scroll-spy */
.docs-toc-list button.toc-link{background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--faint);font-weight:500;cursor:pointer;text-align:left;transition:.12s;line-height:1.35}
.docs-toc-list button.toc-link:hover{color:var(--text)}
.docs-toc-list button.toc-link.active{color:var(--purple-600);font-weight:700}
.docs-toc-list li{position:relative}
.docs-toc-list li:has(.toc-link.active)::before{content:'';position:absolute;left:-15px;top:1px;bottom:1px;width:2px;background:var(--purple-600);border-radius:2px}
@media(max-width:760px){.doc-body ul.doc-check,.doc-body ul.doc-cross{grid-template-columns:1fr}}
.doc-faq{display:flex;flex-direction:column;gap:12px;margin:16px 0 6px}
.doc-faq .faq-item summary{font-size:15px;padding:16px 0}
.doc-faq .faq-item p{margin:0 0 16px}
.danger-card{border-color:#f5d6d6!important}
.danger-card h3{color:#cc3838}
.danger-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #f3eaea}
.danger-row:last-child{border-bottom:none}

.hof-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end;margin-bottom:8px}
.hof-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px 20px 22px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:.18s}
.hof-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.hof-card.r1{order:2;padding-top:34px;border-color:#ffd87a;box-shadow:0 14px 44px rgba(255,180,30,.24)}
.hof-card.r2{order:1;margin-top:22px}
.hof-card.r3{order:3;margin-top:22px}
.hof-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--border-2)}
.hof-card.r1::before{background:linear-gradient(135deg,#ffd36b,#ff9f43)}
.hof-medal{font-size:32px;margin-bottom:4px}
.hof-av{margin:0 auto 12px}
.hof-card.r1 .hof-av{width:98px;height:98px;font-size:36px}
.hof-name{font-size:18px;font-weight:800;letter-spacing:-.01em}
.hof-level{font-size:13px;color:var(--muted);margin-top:3px}
.hof-stats{display:flex;justify-content:center;gap:16px;border-top:1px solid var(--border);padding-top:14px;margin-top:2px}
.hof-stats b{display:block;font-size:17px;font-weight:800}
.hof-stats span{font-size:11px;color:var(--faint)}

.btn-clone{background:var(--surface);color:var(--text);border:1px dashed var(--border-2)}
.btn-clone:hover{border-color:var(--purple);color:var(--purple-600)}
.btn-clone .soon{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--purple);padding:2px 6px;border-radius:6px;margin-left:7px}
.orig-credit{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.orig-credit a{color:var(--purple-600);font-weight:600}
.clone-list{display:flex;flex-direction:column;gap:9px;margin:8px 0}
.clone-item{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600}
.ci-ck{width:22px;height:22px;border-radius:6px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:12px;flex:0 0 auto}

@media(max-width:1100px){.profile-grid{grid-template-columns:1fr}}
@media(max-width:760px){.hof-podium{grid-template-columns:1fr}.hof-card.r1,.hof-card.r2,.hof-card.r3{order:0;margin-top:0;padding-top:26px}}

/* ===================== AUTH: CONNECT OPTIONS + PROFILE MENU ===================== */
.connect-opts{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.connect-btn{display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface);text-align:left;transition:.15s}
.connect-btn:hover{border-color:var(--purple);transform:translateY(-1px);box-shadow:var(--shadow)}
.connect-btn span:nth-child(2){flex:1;min-width:0}
.connect-btn b{display:block;font-size:14.5px;font-weight:700}
.connect-btn small{color:var(--muted);font-size:12px}
.cw-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:0 0 auto;color:#fff}
.connect-btn.phantom .cw-ico{background:linear-gradient(135deg,#ab9ff2,#7c5cff)}
.cw-ico.cw-img{background:none;padding:0;overflow:hidden}
.cw-ico.cw-img img{width:100%;height:100%;object-fit:cover;display:block}
.connect-btn.emblem .cw-ico{background:var(--grad)}
.cw-ico.cw-emblemico{background:var(--grad-soft);padding:7px;overflow:hidden}
.cw-ico.cw-emblemico img{width:100%;height:100%;object-fit:contain;display:block}
.cw-arrow{color:var(--faint);font-size:18px;font-weight:700}
.connect-btn:hover .cw-arrow{color:var(--purple-600)}
.connect-btn[disabled]{opacity:.6;pointer-events:none}

.profile-menu-wrap{position:relative}
.avatar-btn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:24px;border:1px solid var(--border);background:var(--surface);transition:.13s}
.avatar-btn:hover{border-color:var(--border-2);box-shadow:var(--shadow-sm)}
.pm-name{font-size:13px;font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-caret{font-size:10px;color:var(--faint)}
.profile-menu{position:absolute;right:0;top:calc(100% + 8px);width:232px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:90;animation:pop .16s ease}
.profile-menu[hidden]{display:none}
.pm-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.pm-h-name{font-size:13.5px;font-weight:700}
.pm-h-sub{font-size:11.5px;color:var(--faint)}
.pm-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer}
.pm-item:hover{background:var(--bg)}
.pm-item.danger{color:#e0506b}
.pm-item.danger:hover{background:#ffe9ee}
.pm-sep{height:1px;background:var(--border);margin:6px 4px}
@media(max-width:560px){.pm-name{display:none}}

/* ===================== VERIFICATION VISUAL EFFECTS ===================== */
/* verified tick: purple, soft glow, animated pop-in */
.vtick{display:inline-flex;align-items:center;justify-content:center;color:#3a74e0;font-weight:900;cursor:help;animation:tickPop .4s cubic-bezier(.2,1.3,.4,1)}
.vtick.big{font-size:18px}
@keyframes tickPop{0%{transform:scale(0) rotate(-25deg);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}

/* verified-class badges get a glow + purple outline + gentle pulse */
.badge.b-verified, .badge.b-artifact, .badge.b-emblem, .badge.b-hof{position:relative;cursor:help}
.badge.b-verified{box-shadow:0 0 0 1px rgba(58,116,224,.35), 0 0 14px rgba(58,116,224,.28);animation:vpulse 2.8s ease-in-out infinite}
.badge.b-artifact{box-shadow:0 0 0 1px rgba(124,92,255,.4), 0 0 16px rgba(124,92,255,.3);animation:vpulse 2.8s ease-in-out infinite}
.badge.b-emblem{box-shadow:0 0 0 1px rgba(18,165,116,.32), 0 0 12px rgba(18,165,116,.22)}
@keyframes vpulse{0%,100%{box-shadow:0 0 0 1px rgba(124,92,255,.3), 0 0 8px rgba(124,92,255,.18)}50%{box-shadow:0 0 0 1px rgba(124,92,255,.5), 0 0 18px rgba(124,92,255,.4)}}

/* verify CTA button */
.btn-verify{background:linear-gradient(135deg,#3a74e0,#5b8cff);color:#fff;box-shadow:0 6px 18px rgba(58,116,224,.35);font-weight:700}
.btn-verify:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(58,116,224,.45)}
.pm-item.verify{color:#3a74e0;font-weight:700}
.pm-item.verify:hover{background:#e9f0ff}

/* native-tooltip hint cursor on any element with a title in badge rows */
.badge[title],.vtick[title]{cursor:help}

/* ===================== CALM / PREMIUM REDESIGN ===================== */
.main-inner{max-width:1560px;margin:0 auto;padding:28px 44px 64px}
.fade-up{animation:fadeUp .6s ease both;animation-delay:var(--d,0s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.block{margin-top:76px}
.block-head{text-align:center;max-width:680px;margin:0 auto 34px}
.block-head h2{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
.block-head p{color:var(--muted);font-size:16px;margin:0;line-height:1.5}

/* Featured Builds — big, spacious cards */
.featured-builds{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fb-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.22s;display:flex;flex-direction:column}
.fb-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.fb-banner{position:relative;height:196px;display:grid;place-items:center;background-size:cover;background-position:center}
.fb-logo{font-size:66px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.22));position:relative;z-index:2}
.fb-badge{position:absolute;left:14px;bottom:14px;z-index:3;font-size:11px;font-weight:700;color:#fff;background:rgba(18,165,116,.94);padding:5px 11px;border-radius:8px;backdrop-filter:blur(4px)}
.fb-body{padding:22px;display:flex;flex-direction:column;flex:1}
.fb-cat{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.fb-name{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 9px}
.fb-desc{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 20px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.fb-view{font-size:13px;font-weight:700;color:var(--purple-600)}

/* Builder Spotlight — one elegant card */
.spotlight{display:grid;grid-template-columns:300px 1fr;background:var(--surface);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.2s;max-width:920px;margin:0 auto}
.spotlight:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.sp-art{position:relative;display:grid;place-items:center;min-height:250px}
.avatar.xl{width:124px;height:124px;font-size:46px;border:5px solid rgba(255,255,255,.55);box-shadow:var(--shadow-lg);position:relative;z-index:2}
.sp-body{padding:36px 40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.sp-tag{font-size:12px;font-weight:700;color:var(--purple-600);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.sp-name{font-size:29px;font-weight:800;letter-spacing:-.03em;margin:0 0 5px}
.sp-role{font-size:14px;color:var(--muted);margin-bottom:16px}
.sp-story{font-size:18px;line-height:1.5;color:var(--text);margin:0 0 24px;font-weight:500}

/* Recently Published — minimal */
.recent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:920px;margin:0 auto}
.recent-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:15px 18px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.16s}
.recent-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-2)}
.recent-logo{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:24px;flex:0 0 auto;color:#fff}
.rc-name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.rc-by{font-size:12.5px;color:var(--muted)}

/* Explore Categories — calm 5-up */
.cat-grid.calm{grid-template-columns:repeat(5,1fr);max-width:1040px;margin:0 auto;gap:16px}
.cat-grid.calm .cat-card{min-height:152px}

.calm-empty{text-align:center;padding:64px 24px;border:1px dashed var(--border-2);border-radius:22px;background:var(--surface-2)}
.calm-empty h3{font-size:20px;font-weight:700;margin:0 0 6px}
.calm-empty p{color:var(--muted);margin:0 0 20px}
.calm-empty .btn{margin:0 auto}

@media(max-width:980px){.featured-builds,.recent-grid{grid-template-columns:repeat(2,1fr)}.spotlight{grid-template-columns:1fr}.sp-art{min-height:190px}.cat-grid.calm{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.featured-builds,.recent-grid{grid-template-columns:1fr}.cat-grid.calm{grid-template-columns:repeat(2,1fr)}.block{margin-top:56px}.block-head h2{font-size:25px}.main-inner{padding:20px 18px 70px}}

.my-builds{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.mb-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:8px}
.mb-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}

/* ===================== ACCOUNT AREA / LISTING FORM ===================== */
.acct-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.mybuilds-list{display:flex;flex-direction:column;gap:12px;max-width:860px}
.mybuild-row{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-sm);transition:.15s}
.mybuild-row:hover{box-shadow:var(--shadow);border-color:var(--border-2)}
.mb-logo{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:24px;color:#fff;flex:0 0 auto}
.mb-info{flex:1;min-width:0}
.mb-name{font-size:16px;font-weight:700;letter-spacing:-.01em}
.mb-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:3px}
.mb-status{font-weight:700}
.mb-status.published{color:#16b27e}
.mb-status.draft{color:var(--faint)}
.mb-dot{color:var(--border-2)}
.mb-actions{display:flex;gap:8px;flex:0 0 auto}

.form-page{max-width:760px;margin:0 auto}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px 26px;box-shadow:var(--shadow-sm);margin-bottom:18px}
.form-card h3{font-size:15px;font-weight:700;margin:0 0 18px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.vis-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vis-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--border-2);border-radius:12px;padding:13px 15px;cursor:pointer;font-size:13.5px;transition:.13s}
.vis-opt:has(input:checked){border-color:var(--purple);background:var(--grad-soft)}
.vis-opt b{display:block;font-weight:700}
.vis-opt small{color:var(--muted);font-size:12px}
.form-actions{display:flex;align-items:center;gap:10px;margin-top:8px;position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 65%,transparent);padding:16px 0 8px}
.feat-list{display:flex;flex-direction:column;gap:8px}
.feat-item{font-size:13.5px;font-weight:600;color:var(--text)}

.built-with .bw-row{display:flex;align-items:center;gap:12px}
.bw-logo{width:40px;height:40px;border-radius:11px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:18px;flex:0 0 auto}
.bw-name{font-size:14px;font-weight:700}
.bw-sub{font-size:12px;color:var(--muted)}

.pm-label{font-size:10.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;padding:8px 11px 4px}

@media(max-width:620px){.grid2,.grid3,.vis-opts{grid-template-columns:1fr}.acct-head{align-items:flex-start}}

/* ===================== APP STORE CARDS (My Apps) ===================== */
.app-store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.asc{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column}
.asc:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.asc-banner{position:relative;height:152px;display:grid;place-items:center;background-size:cover;background-position:center}
.asc-status{position:absolute;top:12px;right:12px;z-index:3;font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.asc-status.draft{background:rgba(255,255,255,.92);color:var(--muted)}
.asc-status.pending{background:rgba(255,248,230,.96);color:#a07a00}
.asc-status.verified{background:rgba(18,165,116,.95);color:#fff}
.asc-body{padding:18px;display:flex;flex-direction:column;gap:16px}
.asc-top{display:flex;align-items:center;gap:12px}
.asc-logo{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;color:#fff;flex:0 0 auto}
.asc-meta{min-width:0}
.asc-name{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asc-cat{font-size:12.5px;color:var(--muted)}
.asc-actions{display:flex;gap:8px}
.asc-actions .btn{flex:1}
@media(max-width:980px){.app-store-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.app-store-grid{grid-template-columns:1fr}}

/* ===================== UNIFIED APP STORE CARD (everywhere) ===================== */
.mcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 1px 3px rgba(20,16,40,.05);transition:.2s;display:flex;flex-direction:column;height:100%}
/* bannerless tiles (homepage + trending): icon sits at the top, no overlap */
.mcard.nobanner .mcard-body{padding-top:18px}
.mcard.nobanner .mcard-logo{margin-top:0;border:0;box-shadow:0 4px 12px rgba(20,16,40,.1)}
.mcard.clickable{cursor:pointer}
.mcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(124,92,255,.16),0 6px 16px rgba(20,16,40,.07);border-color:#e2d8ff}
.mcard-banner{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;overflow:hidden}
.mcard-built{position:absolute;left:12px;bottom:12px;z-index:3;font-size:11px;font-weight:700;color:#fff;background:rgba(18,165,116,.94);padding:5px 10px;border-radius:8px;backdrop-filter:blur(4px)}
.mcard-body{padding:0 18px 18px;display:flex;flex-direction:column;flex:1}
.mcard-logo{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:24px;color:#fff;flex:0 0 auto;margin-top:-28px;border:4px solid var(--surface);box-shadow:0 6px 16px rgba(20,16,40,.14);position:relative;z-index:2;background-size:cover;background-position:center}
.mcard-logo .logo-img{width:100%;height:100%;border-radius:11px;object-fit:cover}
.mcard-name{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-top:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard-tag{font-size:13px;color:var(--muted);line-height:1.5;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.mcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}
.cat-chip{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);background:var(--grad-soft);padding:5px 10px;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.mcard-btns{display:flex;gap:8px;align-items:center;flex:0 0 auto}
/* manage cards (My Apps): chip on top, full-width button row below — no overflow */
.mcard.manage .mcard-foot{flex-direction:column;align-items:stretch;gap:12px}
.mcard.manage .mcard-btns{width:100%}
.mcard.manage .mcard-btns .btn{flex:1;padding-left:0;padding-right:0;text-align:center}
.mcard.manage .cat-chip{align-self:flex-start}

/* ===================== GH-CARD (user spec, compact — 4 per row) ===================== */
/* same premium layout, scaled DOWN so 4 fit per row */
.gh-card{position:relative;background:#fff;border-radius:16px;border:1px solid #e8e8ee;padding:16px;display:flex;flex-direction:column;height:100%;width:100%;transition:.18s;cursor:pointer;container-type:inline-size;container-name:ghcard}
.gh-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(91,53,213,.14);border-color:#ddd4ff}
.gh-top{display:flex;gap:13px;align-items:flex-start;position:relative}
.gh-logo{width:58px;height:58px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:26px;color:#fff;background-size:cover;background-position:center;border:1px solid rgba(0,0,0,.06)}
.gh-logo .logo-img{width:100%;height:100%;border-radius:15px;object-fit:cover}
.gh-info{flex:1;min-width:0;padding-top:1px;padding-right:40px}
.gh-trending{display:inline-flex;align-items:center;gap:4px;background:#FDECEA;color:#C0392B;font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;margin-bottom:7px}
.gh-title-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;min-width:0}
.gh-title{font-size:16px;font-weight:700;color:#111;letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh-badge{color:#6B3FA0;font-size:15px;flex:0 0 auto}
.gh-desc{font-size:12.5px;color:#666;line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px}
.gh-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gh-tag{background:#FDE8F5;color:#A0317A;font-size:11px;font-weight:500;padding:3px 11px;border-radius:20px;white-space:nowrap}
.gh-author{font-size:12px;color:#888;display:flex;align-items:center;gap:4px;min-width:0}
.gh-author strong{color:#111;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh-author-check{color:#4A9ED6;font-size:13px;flex:0 0 auto}
.gh-bookmark{position:absolute;top:0;right:0;width:33px;height:33px;border:1px solid #e8e8ee;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#aaa;font-size:15px;background:#fff;transition:.13s}
.gh-bookmark:hover{color:#5B35D5;border-color:#cdbcff}
.gh-bookmark.on{color:#5B35D5;border-color:#cdbcff;background:#f3eeff}
.gh-divider{border:none;border-top:1px solid #f0f0f4;margin:14px 0}
.gh-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:9px 10px}
.gh-stats{display:flex;flex:1 1 auto;min-width:0}
.gh-stat{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 0;border-right:1px solid #f0f0f4}
.gh-stat:last-of-type{border-right:none;margin-right:10px}
.gh-stat-icon{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.gh-stat-icon i,.gh-stat i{font-size:15px}
.gh-stat-icon.eye{background:#eef0fb;color:#6B6BDE}
.gh-stat-icon.heart{background:#FFF0F3;color:#E84080}
.gh-stat-icon.rocket{background:#e9f7f1;color:#5DCAA5}
.gh-stat-num{font-size:14px;font-weight:700;color:#111}
.gh-stat-label{display:none}
.gh-launch{background:var(--grad);color:#fff;border:none;border-radius:12px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;flex:0 0 auto;margin-left:auto;text-decoration:none;transition:.16s;box-shadow:0 6px 18px rgba(124,92,255,.35)}
.gh-launch:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(124,92,255,.45)}
/* CONTAINER QUERY — when the CARD itself is too narrow for stats + button on one row,
   switch to the spacious stacked layout (stats row, then full-width Launch below). Width-based, not viewport-based. */
@container ghcard (max-width:279px){
  .gh-bottom{flex-direction:column;align-items:stretch;gap:13px}
  .gh-stats{flex:none;justify-content:space-between;gap:6px}
  .gh-stat{flex:1;justify-content:center}
  .gh-launch{width:100%;margin-left:0;flex:none}
}

/* premium app card — 4-up desktop, scaling down to 1-up */
.cards-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-row.two{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1280px){.cards-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.cards-row,.cards-row.two,.featured-builds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  /* phone: 2 app tiles per row — compact vertical card (logo on top, stacked stats + full-width CTA) */
  .cards-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cards-row.two,.featured-builds{grid-template-columns:1fr}
  .gh-card{padding:13px;border-radius:14px}
  .gh-top{flex-direction:column;gap:10px}
  .gh-logo{width:48px;height:48px;border-radius:12px;font-size:22px}
  .gh-info{padding-right:0}
  .gh-title{font-size:14px}
  .gh-desc{font-size:11.5px;line-height:1.4;margin-bottom:8px;min-height:0;-webkit-line-clamp:2}
  .gh-trending{font-size:10px;padding:2px 8px;margin-bottom:6px}
  .gh-tag{font-size:10px;padding:3px 9px}
  .gh-author{font-size:11px}
  .gh-divider{margin:11px 0}
  .gh-bottom{flex-direction:column;align-items:stretch;gap:9px}
  .gh-stats{flex:none;gap:6px;justify-content:space-between}
  .gh-stat{flex:1;gap:5px;padding:0;border-right:none;margin-right:0!important;justify-content:flex-start}
  .gh-stat-icon{width:24px;height:24px;border-radius:7px}
  .gh-stat-icon i,.gh-stat i{font-size:13px}
  .gh-stat-num{font-size:12.5px}
  .gh-launch{width:100%;padding:10px 0;justify-content:center;border-radius:11px;font-size:12.5px}
  .gh-bookmark{width:30px;height:30px;font-size:14px}
}
/* responsive safety: every grid/flex card may shrink instead of forcing the page wider.
   min-width:0 collapses the grid track's auto minimum (= minmax(0,1fr)) so cards never overflow. */
.cards-row>*,.cards-row.two>*,.featured-builds>*,.recent-grid>*,.fx-grid>*,.tt-row>*,.rk-grid>*,
.bld-list>*,.app-store-grid>*,.cat-grid>*,.why-grid>*,.showcase-grid>*,.hof-podium>*,.tb-row>*,
.ap-feats>*,.mini-grid>*,.shots-grid>*{min-width:0;max-width:100%}

/* ===================== VISUAL APP PAGE (premium product page) ===================== */
.app-page{max-width:1100px;margin:0 auto}
.app-page .back-link{display:inline-block;margin-bottom:22px}

/* 1 · Banner — width is sacred: the hero takes the image's own aspect ratio (set on load),
   so the full width always shows (no side crop, no bars). Builders zoom/reposition to frame. */
.ap-banner{position:relative;width:100%;aspect-ratio:1100/320;max-height:760px;border-radius:26px;overflow:hidden;background:#0f0e16;box-shadow:var(--shadow)}
.ban-img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.ap-ph-cat{position:absolute;top:18px;left:18px;z-index:3;font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);padding:7px 13px;border-radius:11px}

/* 2 · App information */
.ap-head{margin:-54px 6px 0;position:relative;z-index:3}
.ap-logo{width:116px;height:116px;border-radius:28px;display:grid;place-items:center;font-size:54px;color:#fff;border:5px solid var(--surface);box-shadow:var(--shadow-lg);background-size:cover;background-position:center}
.ap-logo .logo-img{width:100%;height:100%;border-radius:23px;object-fit:cover}
.ap-name{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:22px 0 0}
.ap-tag{font-size:18px;color:var(--muted);font-weight:500;line-height:1.5;margin:11px 0 0;max-width:760px}
.ap-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:14px}
.ap-by{color:var(--text);font-weight:500}
.ap-by b{font-weight:700}
.ap-dot{color:var(--faint)}
.ap-cat{font-weight:700}
.ap-built{font-weight:700;color:var(--purple-600)}
.ap-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.ap-actions-end{display:flex;align-items:center;gap:8px;margin-left:auto}
.ap-mini{height:42px;padding:0 15px;border:1px solid var(--border-2);background:var(--surface);border-radius:12px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.13s}
.ap-mini:hover{border-color:var(--purple);color:var(--purple-600)}
.ap-mini .car{font-size:11px}
.ap-mini.upvote.on{background:var(--grad-soft);border-color:var(--purple);color:var(--purple-600)}
.ap-mini .uc{font-variant-numeric:tabular-nums}

/* owner three-dot menu */
.ap-menu{position:relative}
.ap-menu summary{list-style:none;width:42px;height:42px;border:1px solid var(--border-2);background:var(--surface);border-radius:12px;display:grid;place-items:center;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);font-weight:700}
.ap-menu summary::-webkit-details-marker{display:none}
.ap-menu summary:hover,.ap-menu[open] summary{border-color:var(--purple);color:var(--purple-600)}
.ap-menu-pop{position:absolute;right:0;top:48px;z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;min-width:216px;display:flex;flex-direction:column;gap:2px}
.ap-menu-pop a,.ap-menu-pop button{text-align:left;background:none;border:0;font:inherit;font-size:14px;font-weight:500;color:var(--text);padding:10px 12px;border-radius:9px;cursor:pointer;width:100%}
.ap-menu-pop a:hover,.ap-menu-pop button:hover{background:var(--surface-2);color:var(--purple-600)}

/* small secondary social links */
.ap-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ap-soc{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--border);background:var(--surface);padding:7px 13px;border-radius:20px;transition:.13s}
.ap-soc:hover{border-color:var(--purple);color:var(--purple-600)}

.ap-stats{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;padding:14px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px}
.aps-stat{font-size:13.5px;color:var(--muted);font-weight:500}
.aps-stat b{color:var(--text);font-weight:800}
.th-metrics .tm-view{color:#0ca678}
.th-metrics .tm-launch{color:var(--purple-600)}
.ap-about{font-size:16px;line-height:1.7;color:var(--text);margin:28px 0 0;max-width:760px;white-space:pre-line}
.ap-head .tag-row{margin-top:20px}

/* uniform section rhythm — same left/right edge everywhere */
.ap-section{margin-top:58px;padding:0 6px}
.ap-h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 22px}

/* 3 · Screenshots */
.ap-shots{display:flex;gap:18px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;scrollbar-width:thin}
/* full screenshots: uniform height, scaled proportionally, never cropped */
.ap-shot{flex:0 0 auto;height:440px;width:auto;max-width:none;border-radius:18px;object-fit:contain;box-shadow:var(--shadow);scroll-snap-align:start;border:1px solid var(--border);background:#111018;cursor:zoom-in}

/* 4 · Features */
.ap-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ap-feat-card{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;transition:.14s}
.ap-feat-card:hover{border-color:var(--border-2);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.apf-ic{flex:0 0 44px;height:44px;display:grid;place-items:center;font-size:20px;background:var(--grad-soft);border-radius:13px}
.apf-tx{font-size:15px;font-weight:600;color:var(--text);line-height:1.4}

/* 5 · Verification */
.ap-verify{display:flex;align-items:center;gap:16px;padding:22px 24px;background:var(--surface);border:1px solid var(--border);border-radius:18px}
.ap-verify.ok{background:var(--grad-soft);border-color:#e6dbff}
.apv-ic{flex:0 0 46px;height:46px;display:grid;place-items:center;font-size:20px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.ap-verify.ok .apv-ic{color:var(--purple-600);font-weight:800}
.apv-t{font-size:16px;font-weight:700;color:var(--text)}
.apv-d{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.5;max-width:620px}

/* 6 · Built by */
.ap-builder{display:flex;align-items:center;gap:18px;padding:22px 24px;background:var(--surface);border:1px solid var(--border);border-radius:18px}
.ap-builder .avatar{width:60px;height:60px;font-size:22px;flex:0 0 auto;margin-top:0}
.apb-av{flex:0 0 auto;display:block}
.apb-info{flex:1;min-width:0}
.apb-name{font-size:17px;font-weight:700}
.apb-bio{font-size:14px;color:var(--muted);margin:5px 0 9px;line-height:1.5;max-width:580px}
.apb-link{font-size:14px;font-weight:600;color:var(--purple-600)}
.apb-follow{flex:0 0 auto}

/* 7 · Comments */
.ap-comments .ap-count{font-size:14px;color:var(--faint);font-weight:600;margin-left:4px}

@media(max-width:760px){
  .ap-head{margin:-42px 2px 0}
  .ap-logo{width:94px;height:94px;border-radius:23px;font-size:44px}
  .ap-name{font-size:28px}
  .ap-tag{font-size:16px}
  .ap-actions{gap:10px}
  .ap-actions .btn-lg{flex:1 1 auto}
  .ap-actions-end{margin-left:0;width:100%}
  .ap-feats{grid-template-columns:1fr}
  .ap-shot{height:300px;width:auto}
  .ap-section{margin-top:44px}
}

/* ===================== AVATARS (image) + ONBOARDING ===================== */
.avatar.img{background:none;padding:0;overflow:hidden}
.avatar.img img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sm.hdr-av{width:32px;height:32px}

.ob-modal{max-width:460px;text-align:center}
.ob-steps{display:flex;justify-content:center;gap:8px;margin-bottom:22px}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--border-2);transition:.25s}
.ob-dot.on{background:var(--grad);width:24px;border-radius:6px}
.ob-dot.done{background:var(--purple)}
.ob-art{width:74px;height:74px;border-radius:20px;background:var(--grad);display:grid;place-items:center;font-size:36px;margin:0 auto 16px;box-shadow:var(--shadow-lg)}
.ob-modal h3{font-size:23px;margin:0 0 6px}
.ob-note{font-size:13px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:4px 0 20px;line-height:1.5}
.ob-modal .field{text-align:left}
.ob-avail{font-size:12.5px;font-weight:600;margin-top:7px;min-height:16px}
.ob-avail.ok{color:#12a574}.ob-avail.bad{color:#e0506b}
.ob-url{font-size:13px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;text-align:left}
.ob-url b{color:var(--purple-600)}
.ob-actions{display:flex;gap:10px;margin-top:22px}
.ob-actions .btn{flex:1}
.ob-avatar-wrap{display:flex;justify-content:center;margin:6px 0 18px}
.ob-avatar-wrap .avatar.xl{width:118px;height:118px}
.ob-avatar-actions{display:flex;gap:10px;justify-content:center}
.ob-review{display:flex;align-items:center;gap:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:18px;text-align:left}
.ob-rev-name{font-size:18px;font-weight:800;letter-spacing:-.01em}
.ob-rev-handle{font-size:13px;color:var(--muted);margin-bottom:7px}
.set-avatar{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.set-avatar .avatar.lg{width:72px;height:72px}
.set-avatar-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.set-rad{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.set-av-btns{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}

/* ===================== CARD "by builder" + COMPACT TOP BUILDERS ===================== */
.mcard-by{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:9px}
.mcard-by:hover{color:var(--purple-600)}
.tb-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tb-card{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-sm);transition:.15s;min-width:0}
.tb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-2)}
.tb-meta{min-width:0}
.tb-name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sub{font-size:11.5px;color:var(--muted)}
@media(max-width:1000px){.tb-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tb-row{grid-template-columns:repeat(2,1fr)}}

/* ===================== BUILDERS GRID CARD ===================== */
.builder-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:.18s;text-align:center}
.builder-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#e0d7ff}
.bc-banner{height:66px;background:linear-gradient(135deg,#eef0ff 0%,#f4ecff 55%,#fdeffb 100%)}
.bc-body{padding:0 18px 20px;margin-top:-34px}
.bc-avatar{display:flex;justify-content:center;margin-bottom:10px}
.bc-avatar .avatar.lg{width:72px;height:72px;border:4px solid #fff;box-shadow:0 6px 18px rgba(20,16,40,.12)}
.bc-name{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin:0;display:flex;align-items:center;justify-content:center;gap:6px}
.bc-handle{font-size:12.5px;color:var(--muted);margin-top:2px}
.bc-stats{display:flex;justify-content:center;gap:18px;font-size:13px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.bc-stats b{color:var(--text);font-weight:800}

/* ===================== EXPLORE: sticky category bar ===================== */
.cat-bar{position:sticky;top:0;z-index:30;display:flex;gap:10px;overflow-x:auto;padding:14px 0 16px;margin-bottom:6px;background:var(--bg);border-bottom:1px solid var(--border);scrollbar-width:none}
.cat-bar::-webkit-scrollbar{display:none}
.cat-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:20px;background:var(--surface);border:1px solid var(--border-2);color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap;transition:.14s}
.cat-pill:hover{border-color:var(--purple);color:var(--text)}
.cat-pill.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(124,92,255,.3)}
.cards-row#exploreGrid{margin-top:20px}
.cat-hero{display:flex;align-items:center;gap:24px;border-radius:22px;padding:30px 34px;color:#fff;margin:8px 0 14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.cat-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.22),transparent 55%)}
.ch-icon{font-size:58px;flex:0 0 auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));position:relative;z-index:2}
.ch-text{position:relative;z-index:2}
.ch-sub{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;opacity:.92}
.ch-name{font-size:29px;font-weight:800;letter-spacing:-.02em;margin:5px 0 7px}
.ch-desc{font-size:15px;opacity:.96;max-width:640px;line-height:1.5;margin:0}
@media(max-width:560px){.cat-hero{flex-direction:column;text-align:center;padding:26px 20px}.ch-name{font-size:23px}}

/* ===================== APP MARKETPLACE (/apps default landing) ===================== */
.apps-search{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border-2);border-radius:16px;padding:0 20px;height:64px;box-shadow:var(--shadow-sm);margin:4px 0 4px;transition:.14s}
.apps-search:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px var(--grad-soft)}
.apps-search .as-ico{font-size:24px;color:var(--faint)}
.apps-search input{flex:1;border:0;background:none;font:inherit;font-size:17px;color:var(--text);outline:none;height:100%}
.apps-search input::placeholder{color:var(--faint)}
.apps-block{margin-top:42px}
.apps-block:first-child{margin-top:30px}
.apps-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:20px}
.apps-h h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
.apps-h-sub{font-size:13.5px;color:var(--faint);font-weight:500}
.apps-empty{text-align:center;padding:70px 24px;background:var(--surface);border:1px solid var(--border);border-radius:24px;margin-top:30px}
.apps-empty .ae-ico{font-size:48px;margin-bottom:14px}
.apps-empty h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.apps-empty p{font-size:15px;color:var(--muted);margin:0 auto 22px;max-width:420px}
/* left nav: Publish action item matches link styling */
.nav a.nav-action{cursor:pointer}
/* large premium featured cards — max 3, big banner, big icon, big title */
.fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:4px}
.fx-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);transition:.2s;cursor:pointer;display:flex;flex-direction:column}
.fx-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(124,92,255,.22),0 10px 26px rgba(20,16,40,.10);border-color:#ddd2ff}
.fx-banner{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center}
.fx-body{padding:0 24px 28px;display:flex;flex-direction:column}
.fx-logo{width:80px;height:80px;border-radius:21px;display:grid;place-items:center;font-size:40px;color:#fff;border:5px solid var(--surface);box-shadow:var(--shadow-lg);margin-top:-46px;position:relative;z-index:2;background-size:cover;background-position:center}
.fx-card.nobanner .fx-body{padding-top:26px}
.fx-card.nobanner .fx-logo{margin-top:0;border:0;box-shadow:0 6px 18px rgba(20,16,40,.12)}
.fx-logo .logo-img{width:100%;height:100%;border-radius:16px;object-fit:cover}
.fx-id{margin-top:18px}
.fx-name{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.15}
.fx-tag{font-size:15px;color:var(--muted);margin:10px 0 0;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.fx-by{font-size:13px;color:var(--muted);font-weight:600}
.fx-by:hover{color:var(--purple-600)}
@media(max-width:1000px){.fx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.fx-grid{grid-template-columns:1fr}}

/* ===================== TRENDING — discovery sections ===================== */
.trend-section{margin-top:40px}
.trend-section:first-child{margin-top:8px}
.tl-empty{padding:22px 8px;font-size:14px;color:var(--faint)}
/* badges */
.t-badge{position:absolute;top:12px;left:12px;z-index:3;font-size:11.5px;font-weight:800;color:#fff;padding:5px 11px;border-radius:20px;backdrop-filter:blur(4px);letter-spacing:.01em}
.t-badge.b-fire{background:linear-gradient(135deg,#ff6a3d,#ff2e7e)}
.t-badge.b-rise{background:rgba(20,16,40,.55)}
.card-badge{position:absolute;top:11px;right:11px;z-index:3;font-size:11px;font-weight:800;color:#fff;background:rgba(20,16,40,.62);padding:4px 10px;border-radius:20px;backdrop-filter:blur(4px)}
/* ===================== TRENDING — premium discovery ===================== */
.trend-hd{margin-bottom:30px}
.trend-h1{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.trend-sub{color:var(--muted);font-size:15px;margin:0}
.trend-sec{margin-top:46px}
.trend-sec:first-child{margin-top:0}
.trend-sec-hd{margin-bottom:20px}
.trend-sec-hd h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 3px}
.trend-sec-hd span{font-size:13.5px;color:var(--faint);font-weight:500}
.trend-empty{text-align:center;padding:80px 20px;color:var(--muted)}
.trend-empty .te-emoji{font-size:44px;margin-bottom:10px}
.trend-empty h3{font-size:20px;margin:0 0 6px}
/* 1 — Trending Now compact tiles (5-up) */
.tt-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tt-card{background:#fff;border:1px solid #e8e8ee;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;box-shadow:0 1px 3px rgba(20,16,40,.04);transition:.18s}
.tt-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(124,92,255,.16);border-color:#ddd0ff}
.tt-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;width:fit-content;background:#EEF0FF;color:#4040C0}
.tt-badge i{font-size:11px}
.tt-badge.fire{background:linear-gradient(135deg,#ff6a3d,#ff2e7e);color:#fff}
.tt-badge.gem{background:#E3F6F9;color:#1597a8}
.tt-logo{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:24px;color:#fff;overflow:hidden;background-size:cover;background-position:center}
.tt-logo.has-img{background:none!important}
.tt-logo .logo-img{width:100%;height:100%;border-radius:10px;object-fit:cover}
.tt-head{min-width:0}
.tt-name{font-size:15px;font-weight:700;color:#111;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-vtick{color:#4A9ED6;font-size:13px;flex:0 0 auto}
.tt-by{font-size:12px;color:#888;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#888;flex-wrap:wrap}
.tt-cat{background:#f4f0ff;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.tt-views{display:inline-flex;align-items:center;gap:3px}
.tt-btn{background:#5B35D5;color:#fff;border:none;border-radius:10px;padding:9px 0;width:100%;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;text-decoration:none;margin-top:auto;transition:.16s}
.tt-btn:hover{background:#4a28b8}
/* 2 — Community Charts (5-col ranking) */
.rk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rk-col{background:#fff;border:1px solid #ECEAF5;border-radius:22px;padding:18px 16px;box-shadow:0 1px 3px rgba(20,16,40,.04)}
.rk-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:13px;border-bottom:1px solid #f2f0f8}
.rk-ic{font-size:16px}
.rk-title{font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.rk-list{display:flex;flex-direction:column;gap:3px}
.rk-row{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:12px;text-decoration:none;color:inherit;transition:.12s}
.rk-row:hover{background:#f6f3ff}
.rk-num{flex:0 0 auto;width:20px;text-align:center;font-size:13px;font-weight:800;color:var(--faint)}
.rk-row:first-child .rk-num{color:#7c5cff}
.rk-logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;color:#fff;flex:0 0 auto;background-size:cover;background-position:center;overflow:hidden}
.rk-logo.has-img{background:none!important}
.rk-logo .logo-img{width:100%;height:100%;border-radius:8px;object-fit:cover}
.rk-info{flex:1;min-width:0;display:flex;flex-direction:column}
.rk-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-by{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-metric{flex:0 0 auto;font-size:12.5px;font-weight:800;color:#5B35D5}
.rk-empty{padding:18px 4px;font-size:12.5px;color:var(--faint);text-align:center}
/* 3 — More Trending (horizontal scroll) */
.t3-scroll{display:flex;gap:18px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.t3-scroll::-webkit-scrollbar{height:8px}
.t3-scroll::-webkit-scrollbar-thumb{background:#e0dcec;border-radius:8px}
.t3-card{flex:0 0 300px;scroll-snap-align:start;position:relative;background:#fff;border:1px solid #ECEAF5;border-radius:22px;overflow:hidden;cursor:pointer;box-shadow:0 1px 3px rgba(20,16,40,.04);transition:.2s;display:flex;flex-direction:column}
.t3-card:hover{transform:scale(1.02);box-shadow:0 20px 44px rgba(124,92,255,.18);border-color:#ddd0ff}
.t3-banner{height:120px;position:relative;background-size:cover;background-position:center}
.t3-views{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#fff;background:rgba(20,16,40,.6);padding:4px 10px;border-radius:20px;backdrop-filter:blur(5px)}
.t3-body{display:flex;align-items:center;gap:12px;padding:14px 16px 6px}
.t3-logo{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:21px;color:#fff;flex:0 0 auto;background-size:cover;background-position:center;overflow:hidden;margin-top:-34px;border:3px solid #fff;box-shadow:0 5px 13px rgba(20,16,40,.13)}
.t3-logo.has-img{background:none!important}
.t3-logo .logo-img{width:100%;height:100%;border-radius:10px;object-fit:cover}
.t3-info{flex:1;min-width:0}
.t3-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.t3-vtick{color:#4A9ED6;font-size:13px;flex:0 0 auto}
.t3-by{font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t3-launch{margin:10px 16px 16px;background:#5B35D5;color:#fff;border-radius:12px;padding:10px;text-align:center;font-size:13.5px;font-weight:600;text-decoration:none;transition:.16s}
.t3-launch:hover{background:#4a28b8}
.tt-hint{display:none;font-size:12.5px;font-weight:600;color:var(--purple-600);margin-top:10px;padding-left:2px}
@media(max-width:1280px){.tt-row{grid-template-columns:repeat(4,1fr)}}
/* tablet/mobile — Trending Now becomes a swipe carousel (never stacks) */
@media(max-width:1000px){
  .tt-row{display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 14px;scrollbar-width:none}
  .tt-row::-webkit-scrollbar{display:none}
  .tt-card{flex:0 0 232px;scroll-snap-align:start;min-height:292px}
  .tt-hint{display:block}
  .rk-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){.rk-grid{grid-template-columns:1fr}.t3-card{flex-basis:82%}}

/* ===================== BUILDERS — premium social directory ===================== */
.bld-hd{margin-bottom:22px}
.bld-h1{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.bld-sub{color:var(--muted);font-size:15px;margin:0}
.bld-search{position:relative;margin-bottom:18px}
.bld-search i{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:19px;color:var(--faint)}
.bld-search input{width:100%;border:1px solid #e8e8ee;background:#fff;border-radius:15px;padding:15px 18px 15px 48px;font-size:15px;font-weight:500;color:#111;outline:none;transition:.16s;box-shadow:0 1px 3px rgba(20,16,40,.04)}
.bld-search input:focus{border-color:#c9b8ff;box-shadow:0 0 0 4px rgba(124,92,255,.12)}
.bld-search input::placeholder{color:#9a96a8}
.bld-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.bld-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e8e8ee;color:#444;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:30px;cursor:pointer;transition:.14s}
.bld-pill:hover{border-color:#c9b8ff;color:#5B35D5}
.bld-pill.active{background:#5B35D5;border-color:#5B35D5;color:#fff}
.bld-pill i{font-size:14px}
.bld-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pc{display:flex;flex-direction:column;background:#fff;border:1px solid #ECEAF5;border-radius:18px;padding:20px;cursor:pointer;box-shadow:0 1px 3px rgba(20,16,40,.04);transition:.18s;container-type:inline-size;container-name:pccard}
.pc:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(124,92,255,.15),0 8px 18px rgba(20,16,40,.06);border-color:#ddd0ff}
.pc-top{display:flex;align-items:center;gap:15px;margin-bottom:18px;position:relative;padding-right:20px}
.pc-avatar{width:64px;height:64px;border-radius:50%;flex-shrink:0;position:relative}
.pc-avatar .avatar{width:100%;height:100%;border-radius:50%;font-size:25px}
.pc-avatar .avatar img{border-radius:50%}
.pc-avatar-badge{position:absolute;bottom:-1px;right:-1px;width:21px;height:21px;border-radius:50%;background:#4A9ED6;display:flex;align-items:center;justify-content:center;border:2px solid #fff;color:#fff;font-size:11px}
.pc-info{flex:1;min-width:0}
.pc-name{font-size:16px;font-weight:700;color:#111;display:flex;align-items:center;gap:5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-vtick{color:#4A9ED6;font-size:15px;flex:0 0 auto}
.pc-handle{font-size:12.5px;color:#888;margin-bottom:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-badges{display:flex;gap:6px;flex-wrap:wrap}
.pc-badges .badge{font-size:11px;padding:3px 9px}
.pc-chevron{position:absolute;right:0;top:50%;transform:translateY(-50%);color:#bbb;font-size:18px}
.pc-divider{border:none;border-top:1px solid #f0f0f4;margin:0 0 16px}
.pc-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto}
.pc-stats{display:flex;flex:1;gap:20px;min-width:0}
.pc-stat{display:flex;align-items:center;gap:7px;min-width:0}
.pc-stat-icon{width:30px;height:30px;border-radius:9px;background:#f0f1f8;display:flex;align-items:center;justify-content:center;color:#5B5FC7;font-size:15px;flex:0 0 auto}
.pc-stat-icon.heart{background:#FFF0F3;color:#E84080}
.pc-stat-icon.apps{background:#e9f7f1;color:#1FA971}
.pc-stat-num{font-size:15px;font-weight:700;color:#111;line-height:1.2}
.pc-stat-label{display:none}
.pc-follow{flex-shrink:0;border-radius:12px;padding:9px 15px;white-space:nowrap}
/* CONTAINER QUERY — narrow Builder card (e.g. 3-up medium desktop / tablet) → stack:
   stats on their own row, full-width action button below. Same behavior as App Cards. */
@container pccard (max-width:300px){
  .pc-bottom{flex-direction:column;align-items:stretch;gap:13px}
  .pc-stats{flex:none;justify-content:space-between;gap:8px}
  .pc-follow{width:100%;flex:none;text-align:center}
}
.bld-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)}
.bld-empty .te-emoji{font-size:38px;margin-bottom:8px}
@media(max-width:1080px){.bld-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bld-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}}
@media(max-width:380px){.bld-list{grid-template-columns:1fr!important}}
/* compact builder card on very narrow (2-up phone) — container-query driven */
@container pccard (max-width:230px){
  .pc{padding:14px}
  .pc-top{gap:11px;margin-bottom:14px;padding-right:0}
  .pc-chevron{display:none}
  .pc-avatar{width:46px;height:46px}
  .pc-avatar .avatar{font-size:18px}
  .pc-name{font-size:14px}
  .pc-handle{font-size:11.5px;margin-bottom:6px}
  .pc-badges .badge{font-size:10px;padding:2px 7px}
  .pc-divider{margin:0 0 12px}
  .pc-stats{gap:6px}
  .pc-stat-icon{width:26px;height:26px}
  .pc-stat-num{font-size:13px}
}

/* ===================== ABOUT PAGE — How it works + FAQ ===================== */
.how{margin-top:54px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 24px 24px;transition:.14s}
.how-card:hover{border-color:var(--border-2);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.how-n{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;font-size:17px;box-shadow:0 4px 12px rgba(124,92,255,.3);margin-bottom:16px}
.how-card h3{font-size:17px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
.how-card p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0}
.faq{margin-top:54px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:0 22px;transition:.14s}
.faq-item[open]{border-color:var(--border-2);box-shadow:var(--shadow-sm)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;padding:20px 0;font-size:16px;font-weight:600;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chev{font-size:18px;color:var(--faint);transition:transform .18s;flex:0 0 auto}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0 0 20px;max-width:720px}
@media(max-width:760px){.how-grid{grid-template-columns:1fr}.apps-search{height:56px}.apps-search input{font-size:16px}}

/* ===================== EDIT MEDIA (crop editor) ===================== */
.media-overlay{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;padding:20px}
.modal.media-editor{max-width:440px;padding:18px}
.me-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.me-head b{font-size:17px;font-weight:800}
.me-stage{position:relative;border-radius:14px;overflow:hidden;background:#0b0a12;display:flex;justify-content:center}
.me-stage canvas{display:block;max-width:100%;height:auto;cursor:grab;touch-action:none}
.me-stage canvas:active{cursor:grabbing}
.me-mask{position:absolute;inset:0;pointer-events:none;border-radius:14px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.me-stage.circle .me-mask{box-shadow:none}
.me-stage.circle .me-mask.circle::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 9999px rgba(11,10,18,.55),inset 0 0 0 2px rgba(255,255,255,.7)}
.me-zoom{display:flex;align-items:center;gap:12px;margin:16px 2px 14px;color:var(--faint);font-size:18px;font-weight:700}
.me-zoom input{flex:1;accent-color:var(--purple);height:4px}

/* image logos (emoji OR uploaded) */
.logo-img{width:100%;height:100%;object-fit:cover;display:block}
.mcard-logo,.recent-logo,.ap-logo,.proj-logo,.logo-prev{overflow:hidden}
.mcard-logo.has-img,.recent-logo.has-img,.ap-logo.has-img,.logo-prev.has-img{background:none!important}
.mcard-blogo.bimg{width:66px;height:66px;border-radius:18px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.ap-banner-logo.bimg{width:120px;height:120px;border-radius:28px;object-fit:cover;box-shadow:0 12px 30px rgba(0,0,0,.3)}

/* build-form logo picker */
.logo-pick-row{display:flex;align-items:center;gap:14px}
.logo-prev{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;font-size:26px;color:#fff;flex:0 0 auto;border:1px dashed var(--border-2)}
.logo-prev.has-img{border-style:solid;border-color:transparent}
.logo-upload-cta{display:flex;flex-direction:column;gap:6px}

/* ===================== PREMIUM PLACEHOLDER (no banner) ===================== */
.mcard-banner.placeholder::before,.ap-banner.placeholder::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.5px);background-size:18px 18px;opacity:.5;z-index:1}
.ph-label{position:absolute;left:12px;bottom:12px;z-index:3;font-size:10.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);padding:4px 9px;border-radius:8px;letter-spacing:.02em}
.ap-banner.placeholder{position:relative}
.ap-ph-cat{position:absolute;top:16px;left:16px;z-index:3;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);padding:6px 12px;border-radius:10px}
/* generated procedural banner (no custom upload): premium abstract art at 280px.
   The SVG carries its own gradient + dot grid + motif, so the CSS dot overlay is dropped.
   Icon stays the hero (96px, overlapping the lower band). */
.ap-banner.placeholder{height:280px}
.ap-banner.placeholder::before{display:none}
.ap-banner.placeholder + .ap-head{margin-top:-58px}
.ap-banner.placeholder + .ap-head .ap-logo{width:96px;height:96px;border-radius:22px;font-size:42px;border-width:4px}
.ap-banner.placeholder + .ap-head .ap-logo .logo-img{border-radius:18px}
.ap-ph-label{position:absolute;bottom:16px;right:16px;z-index:3;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);padding:6px 12px;border-radius:10px}

/* build-form empty icon state */
.logo-prev .logo-empty{font-size:26px;font-weight:300;color:var(--faint)}
.field .hint.err{color:#e0506b}
.field .opt{color:var(--faint);font-weight:400;font-size:12px}
h3 .opt{color:var(--faint);font-weight:400;font-size:13px}

/* ===================== LINK PICKER ===================== */
.form-hint{font-size:13px;color:var(--faint);margin:0 0 14px}
.link-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.link-ico{flex:0 0 38px;height:38px;display:grid;place-items:center;font-size:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.link-input{flex:1;min-width:0;height:42px;padding:0 14px;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:14px;background:#fff;color:#15121f}
.link-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--grad-soft)}
.link-rm{flex:0 0 38px;height:38px;border:1px solid var(--border);background:#fff;border-radius:10px;color:var(--faint);cursor:pointer;font-size:13px;transition:.13s}
.link-rm:hover{background:#fff5f7;color:#e0506b;border-color:#ffd0db}
.link-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.link-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--purple-600);background:var(--grad-soft);border:1px solid #ece3ff;padding:7px 13px;border-radius:20px;cursor:pointer;transition:.13s}
.link-chip:hover{background:var(--purple);color:#fff;border-color:transparent}
.link-chip .lc-plus{font-size:14px;opacity:.7}
/* brand icon images (X/Discord/Telegram/TikTok/Instagram) */
img.soc-ico{object-fit:cover;border-radius:5px;vertical-align:middle;display:inline-block}
.soc-emoji{vertical-align:middle}
.link-ico img.soc-ico{width:24px;height:24px;border-radius:6px}
.link-ico .soc-emoji{font-size:16px}
.link-chip img.soc-ico{width:17px;height:17px}
.link-chip:hover img.soc-ico{filter:none}
.ap-soc img.soc-ico{width:17px;height:17px}

/* ===================== TAGS ===================== */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag-chip{font-size:12.5px;font-weight:600;color:var(--purple-600);background:var(--grad-soft);border:1px solid #ece3ff;padding:5px 11px;border-radius:20px;cursor:pointer;transition:.13s}
.tag-chip:hover{background:var(--purple);color:#fff;border-color:transparent}

/* ===================== DANGER ZONE / DELETE ===================== */
.btn-danger{background:#fff;color:#e0506b;border:1px solid #ffd0db;font-weight:700}
.btn-danger:hover{background:#e0506b;color:#fff;border-color:transparent}
.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:18px 20px;border:1px solid #ffd0db;background:#fff5f7;border-radius:16px;flex-wrap:wrap}
.danger-zone b{font-size:14.5px;color:#15121f}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1180px){
  .home-grid{grid-template-columns:1fr}
  .rail{position:static;flex-direction:row;flex-wrap:wrap}
  .rail .panel{flex:1;min-width:280px}
  :root{--right-w:0px}
}
@media(max-width:1080px){
  .stats{grid-template-columns:repeat(3,1fr);gap:20px 10px}
  .stat:nth-child(n+4){padding-top:14px}
}
/* ---- Mobile / tablet: sidebar becomes an overlay, hamburger + topbar brand appear ---- */
@media(max-width:900px){
  /* mobile: bottom nav is the primary nav — no hamburger, no sidebar drawer */
  .topbar .menu-toggle{display:none}
  .topbar .brand--top{display:flex;font-size:17px}
  .sidebar,.scrim{display:none}
  .topbar-right .btn[data-action="submit"]{display:none}  /* Publish lives in the bottom nav */
  /* no top padding (sticky cat-bar), room at the bottom for the fixed nav.
     horizontal gutter comes ONLY from .main-inner (avoids double-padding that pushed content too far in) */
  .main{padding:0 0 96px}
}
/* ===================== MOBILE BOTTOM NAV ===================== */
.bottom-nav{display:none}
@media(max-width:900px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;height:72px;padding:12px 8px;
    background:#fff;border-top:1px solid #ECEAF5;border-radius:24px 24px 0 0;box-shadow:0 -6px 24px rgba(20,16,40,.08);
    align-items:center;justify-content:space-around;
    transition:transform .22s ease,opacity .22s ease}
}
/* auto-hide on scroll-down (native app feel) */
.bottom-nav.bn-hidden{transform:translateY(120%);opacity:0;pointer-events:none}
/* flat bar — 5 equal items, active in purple */
.bn-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;color:#9a96a8;font-size:10.5px;font-weight:600;transition:.16s}
.bn-item i{font-size:23px;line-height:1}
.bn-item.active{color:#5B35D5}
.bn-item.active i{transform:scale(1.06)}
/* profile-menu icons */
.pm-item i{font-size:16px;width:18px;text-align:center;color:var(--muted);flex:0 0 auto}
.pm-item.danger i{color:inherit}
@media(max-width:640px){
  .topbar{padding:0 14px;gap:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .profile-stats{gap:18px}
  .brand--top .brand-name{display:none}
}