/* Nojavany Design System — from chatgpt demo */
@font-face{
  font-family:"IRANSansWeb";
  src:url("../fonts/IRANSansWeb.woff2") format("woff2"),
      url("../fonts/IRANSansWeb.woff") format("woff"),
      url("../fonts/IRANSansWeb.ttf") format("truetype"),
      url("../fonts/IRANSansWeb.eot") format("embedded-opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  --bg:#f7f7fb;--surface:#fff;--surface-2:#f1efff;--ink:#19172a;--muted:#737084;
  --primary:#6d4aff;--primary-2:#8a6cff;--violet:#eeeaff;--mint:#ddf7eb;--mint-ink:#167052;
  --peach:#fff0e5;--peach-ink:#a95c2a;--sky:#e8f3ff;--sky-ink:#356c9e;
  --yellow:#fff7d9;--yellow-ink:#84670a;--pink:#ffeaf2;--pink-ink:#a14167;
  --line:#eae8f0;--shadow:0 16px 50px rgba(49,35,94,.08);--shadow-sm:0 8px 24px rgba(49,35,94,.06);
  --radius-xl:28px;--radius-lg:22px;--radius-md:16px;--nav-h:76px;--safe:env(safe-area-inset-bottom,0px);
  --topbar-h:78px;--safe-top:env(safe-area-inset-top,0px);
  --danger:#c44536;--danger-bg:#fdeaea;
  --topbar-bg:rgba(250,249,253,.88);--nav-bg:rgba(255,255,255,.94);--card:#fff;--soft:#fbfbfd;
  --nj-grad-border:rgba(109,74,255,.18);
  --nj-grad-shadow:var(--shadow-sm);
  --nj-grad-bg:
    radial-gradient(circle at 100% 0%,rgba(109,74,255,.14),transparent 46%),
    radial-gradient(circle at 0% 100%,rgba(255,187,122,.12),transparent 48%),
    var(--surface);
  --nj-grad-bg-alt:
    radial-gradient(circle at 0% 0%,rgba(109,74,255,.12),transparent 48%),
    radial-gradient(circle at 100% 100%,rgba(168,214,255,.14),transparent 46%),
    var(--surface);
}
html.theme-dark{
  --bg:#12101c;--surface:#1c1828;--surface-2:#2a2438;--ink:#f2effa;--muted:#a39eb3;
  --primary:#9b86ff;--primary-2:#b5a4ff;--violet:#2a2340;--mint:#1a3329;--mint-ink:#7ddeb4;
  --peach:#3a2a22;--peach-ink:#ffc49a;--sky:#1c2c3d;--sky-ink:#9bc7ef;
  --yellow:#3a3420;--yellow-ink:#f0d878;--pink:#3a2230;--pink-ink:#f0a8c4;
  --line:#2f2a40;--shadow:0 16px 50px rgba(0,0,0,.35);--shadow-sm:0 8px 24px rgba(0,0,0,.28);
  --danger:#ff8a7a;--danger-bg:#3a1e22;
  --topbar-bg:rgba(18,16,28,.92);--nav-bg:rgba(28,24,40,.96);--card:#1c1828;--soft:#221e30;
  --nj-grad-border:rgba(155,134,255,.45);
  --nj-grad-shadow:0 12px 30px rgba(0,0,0,.38),0 0 0 1px rgba(155,134,255,.08),inset 0 1px 0 rgba(185,170,255,.14);
  --nj-grad-bg:
    radial-gradient(circle at 100% 0%,rgba(155,134,255,.42),transparent 52%),
    radial-gradient(circle at 0% 100%,rgba(255,187,122,.18),transparent 52%),
    linear-gradient(160deg,#32284a 0%,#241e36 42%,#1c1828 100%);
  --nj-grad-bg-alt:
    radial-gradient(circle at 0% 0%,rgba(155,134,255,.36),transparent 52%),
    radial-gradient(circle at 100% 100%,rgba(120,180,255,.22),transparent 50%),
    linear-gradient(160deg,#2c2642 0%,#221c34 45%,#1c1828 100%);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
  /* Match production (style.css): hide thick OS scrollbar; page still scrolls */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
body{
  font-synthesis:weight style;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IRANSansWeb",Tahoma,Arial,sans-serif;
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  max-width:100%;
  position:relative;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html,body,button,input,textarea,select{font-family:"IRANSansWeb",Tahoma,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{max-width:100%;height:auto}
.app{min-height:100dvh;max-width:100%;overflow-x:hidden;padding-top:calc(var(--topbar-h) + var(--safe-top))}
.shell{width:min(1180px,100%);max-width:100%;margin:auto;padding:0 20px 24px;overflow-x:hidden}

/* Header — fixed so it stays visible while scrolling */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding-top:var(--safe-top);
  background:var(--topbar-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);max-width:100%;overflow-x:hidden
}
.topbar-inner{width:min(1180px,100%);max-width:100%;margin:auto;min-height:var(--topbar-h);padding:12px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.brand > span{min-width:0;overflow:hidden}
.brand strong{display:block;font-size:20px;font-weight:900;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand > span > span{display:block;color:var(--muted);font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-mark{width:44px;height:44px;border-radius:15px;overflow:hidden;display:block;box-shadow:none;flex-shrink:0;background:transparent}
.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
.brand--section{gap:6px;max-width:min(52vw,280px)}
.brand--section .brand-section-text{min-width:0;overflow:hidden}
.brand--section .brand-section-text strong{font-size:17px}
.brand--section .brand-back{
  flex-shrink:0;width:36px;height:36px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow-sm)
}
.brand--section .brand-back svg{display:block}
.desktop-nav{display:none}
@media (min-width:1000px){
  .topbar-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:18px}
  .desktop-nav{display:flex;align-items:center;justify-content:center;gap:4px}
}
.desktop-nav a{padding:10px 12px;border-radius:12px;color:#5e5a6c;font-size:14px;font-weight:700}
.desktop-nav a:hover,.desktop-nav a.active{background:var(--surface-2);color:var(--primary)}
.top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow-sm);position:relative}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.theme-toggle .theme-icon{grid-area:1/1}
.theme-toggle .theme-icon-sun{display:none}
.theme-toggle .theme-icon-moon{display:block}
html.theme-dark .theme-toggle .theme-icon-moon{display:none}
html.theme-dark .theme-toggle .theme-icon-sun{display:block}

.profile-btn{width:42px;height:42px;border:0;border-radius:50%;background:linear-gradient(135deg,#e7ddff,#ffd9e8);color:#6243cf;font-weight:900;display:grid;place-items:center;overflow:hidden;padding:0;flex-shrink:0}
.profile-btn img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.profile-btn span{line-height:1}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:22px;align-items:stretch}
.hero-main{position:relative;overflow:hidden;border-radius:28px;padding:0;background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.30),transparent 28%),linear-gradient(135deg,#4f36d9 0%,#7654f3 55%,#9d7cff 100%);color:#fff;min-height:220px;height:100%;box-shadow:0 18px 48px rgba(82,57,208,.18)}
.hero-main:before,.hero-main:after{display:none}
.eyebrow{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.20);font-size:13px;font-weight:800;position:relative;z-index:1}
.hero h1{font-size:clamp(22px,3.2vw,32px);line-height:1.45;margin:0 0 8px;letter-spacing:-.04em;max-width:640px;position:relative;z-index:1}
.hero p{margin:0;color:rgba(255,255,255,.92);font-size:15px;line-height:1.8;max-width:560px;position:relative;z-index:1}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:21px;position:relative;z-index:1}
.hero-slider .hero-track{position:relative;z-index:1;min-height:220px;height:100%}
.hero-slide{
  position:absolute;
  inset:0;
  padding:26px 28px 34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:0;
  visibility:hidden;
  transform:translateX(14px);
  transition:opacity .55s ease,transform .55s ease,visibility .55s;
  z-index:1;
  cursor:pointer;
  color:inherit;
  text-decoration:none;
}
.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  z-index:2;
}
.hero-slide:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(30,18,70,.25) 0%,rgba(36,20,90,.55) 45%,rgba(28,14,70,.88) 100%),
    var(--hero-bg,linear-gradient(135deg,#4f36d9,#9d7cff)) center/cover no-repeat;
  z-index:0;
}
.hero-slide > *{position:relative;z-index:1}
.hero-dots{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:3;
}
.hero-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  border:0;
  padding:0;
  background:rgba(255,255,255,.38);
  cursor:pointer;
  transition:width .2s ease,background .2s ease;
}
.hero-dot.is-active{
  width:18px;
  background:#fff;
}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:14px;padding:11px 16px;font-weight:700;font-size:15px;line-height:1.5;cursor:pointer;text-decoration:none}
.btn-light{background:#fff;color:#5038d4}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-primary{background:var(--primary);color:#fff}
.btn-soft{background:var(--violet);color:var(--primary)}
.daily-card{border-radius:34px;background:var(--surface);border:1px solid var(--line);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;min-height:315px}
.daily-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.kicker{font-size:13px;font-weight:800;color:var(--primary)}
.daily-card h2{font-size:21px;margin:6px 0 6px;line-height:1.5}
.daily-card p{font-size:14px;color:var(--muted);line-height:1.8;margin:0}
.streak{min-width:58px;text-align:center;background:var(--yellow);color:var(--yellow-ink);border-radius:15px;padding:9px 7px}
.streak strong{display:block;font-size:18px}
.streak span{font-size:12px}
.moods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:16px}
.mood{border:1px solid var(--line);background:var(--soft);border-radius:15px;padding:9px 2px;text-align:center;min-width:0;cursor:pointer}
.mood.is-active{outline:2px solid var(--primary);background:var(--violet)}
.mood span{font-size:20px;display:block}
.mood small{font-size:11px;color:var(--muted)}
.mood-status{margin:8px 0 0;font-size:13px;color:var(--muted);font-weight:600;line-height:1.5}

.mood-panel[hidden]{display:none!important}
#moodShowcase{
  scroll-margin-top:calc(var(--topbar-h) + var(--safe-top) + 12px);
}
.mood-idle{padding:18px 8px;text-align:center}
.mood-idle strong{display:block;font-size:16px;font-weight:800;margin:0 0 8px}
.mood-idle p{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.mood-pick{
  display:flex;align-items:center;gap:12px;
  padding:12px 4px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line)
}
.mood-pick:last-child{border-bottom:0}
.mood-pick-ico{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;font-size:20px
}
.mood-pick-ico--illust{
  overflow:hidden;padding:0;background:transparent;box-shadow:var(--shadow-sm)
}
.mood-pick-ico--illust img{width:100%;height:100%;object-fit:cover;display:block}
.mood-pick-body{flex:1;min-width:0;text-align:start}
.mood-pick-body strong{display:block;font-size:15px;font-weight:800;line-height:1.35;margin:0 0 4px}
.mood-pick-body p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.mood-pick-go{flex-shrink:0;opacity:.45;font-size:16px}
.daily-card > .btn{width:100%;margin-top:15px;background:var(--ink);color:#fff}

/* Section */
.section{margin-top:30px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:0 0 13px;max-width:100%;min-width:0}
.section-head > div{min-width:0;flex:1}
.section-head h2{margin:0;font-size:21px;font-weight:900;letter-spacing:-.035em}
.section-head p{margin:5px 0 0;font-size:14px;color:var(--muted)}
.section-head a{font-size:14px;color:var(--primary);font-weight:800;white-space:nowrap}

/* Quick */
.quick-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.quick{background:var(--surface);border:1px solid var(--line);border-radius:20px;min-height:116px;padding:14px 10px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:var(--shadow-sm);transition:.2s transform,.2s box-shadow}
.quick:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.quick .qi{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:20px;margin-bottom:7px}
.quick strong{font-size:15px}
.quick small{font-size:13px;color:var(--muted);margin-top:3px}
.q1 .qi{background:var(--violet)}.q2 .qi{background:var(--mint)}.q3 .qi{background:var(--peach)}.q4 .qi{background:var(--sky)}.q5 .qi{background:var(--pink)}.q6 .qi{background:var(--yellow)}

/* Feed */
.content-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.feed-card,.side-card{
  background:var(--nj-grad-bg);border:1px solid var(--nj-grad-border);border-radius:24px;box-shadow:var(--nj-grad-shadow)
}
.feed-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px}
/* پیشنهادهای حال: همیشه زیر هم — در دسکتاپ ۲ستونه فضای خالی زیاد می‌گیرد */
.mood-panel.feed-list{grid-template-columns:1fr;gap:0;padding:6px 12px 10px}
.article-card{display:grid;grid-template-columns:92px 1fr;gap:11px;padding:8px;border-radius:18px}
.article-card:hover{background:var(--nj-grad-bg-alt)}
.thumb{width:92px;height:88px;border-radius:16px;background:linear-gradient(135deg,#6d4aff,#ab91ff);display:grid;place-items:center;color:#fff;font-size:28px;overflow:hidden;background-size:cover;background-position:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.is-fallback::before{content:"📖";font-size:28px}
.thumb.is-fallback img{display:none}
.article-card:nth-child(2) .thumb{background:linear-gradient(135deg,#ff8f68,#ffc17a)}
.article-card:nth-child(3) .thumb{background:linear-gradient(135deg,#49ae88,#9de0bf)}
.article-card:nth-child(4) .thumb{background:linear-gradient(135deg,#5d83b8,#a7c5eb)}
.article-card strong{display:block;font-size:15px;line-height:1.65}
.article-card p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.meta{display:flex;gap:9px;color:#9692a2;font-size:12px;margin-top:7px}
.feed-card > .section-label{padding:16px 16px 4px;font-size:15px;font-weight:900}
.side-stack{display:grid;gap:12px}
.side-card{padding:17px}
.side-card h3{font-size:17px;margin:0 0 7px}
.side-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.question{padding:11px 0;border-bottom:1px solid var(--line)}
.question:last-child{border-bottom:0;padding-bottom:0}
.question strong{font-size:15px;line-height:1.7;display:block}
.question span{font-size:13px;color:var(--muted)}
.tag{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--violet);color:#6346db;font-size:12px;font-weight:800;margin-bottom:10px}

/* Engage / categories / parents */
.engage{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.eng-card{border-radius:24px;padding:18px;min-height:165px;color:#fff;position:relative;overflow:hidden}
.eng-card:after{content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(255,255,255,.16);border-radius:50%;left:-40px;bottom:-90px}
.eng-card h3{margin:8px 0 5px;font-size:16px}
.eng-card p{margin:0;color:rgba(255,255,255,.83);font-size:14px;line-height:1.8}
.eng-card a{display:inline-flex;margin-top:14px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.14);font-size:13px;font-weight:800;position:relative;z-index:1}
.eng-a{background:linear-gradient(135deg,#167052,#45ac83)}
.eng-b{background:linear-gradient(135deg,#8c4c1f,#d4874c)}
.eng-c{background:linear-gradient(135deg,#405d8e,#729fd4)}
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.category{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  background:var(--nj-grad-bg);
  border:1px solid var(--nj-grad-border);
  border-radius:18px;
  box-shadow:var(--nj-grad-shadow);
  padding:12px 14px;
  min-height:56px;
  color:var(--ink);
}
.category .ci{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:18px;
  margin:0;
  flex-shrink:0;
  order:1;
}
.category.category--illust .ci{
  width:56px;
  height:56px;
  border-radius:16px;
  overflow:hidden;
  padding:0;
  background:transparent;
  box-shadow:var(--shadow-sm);
}
.category.category--illust .ci img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.category.category--illust{
  min-height:72px;
  padding:10px 12px;
  gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.category.category--illust:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.category .cat-text{
  flex:1;
  min-width:0;
  text-align:start;
  order:2;
}
.category strong{display:block;font-size:14px;font-weight:800;line-height:1.35}
.category p{font-size:12px;color:var(--muted);line-height:1.55;margin:4px 0 0}
.parent-box{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#221d37,#423469);border-radius:28px;padding:20px;color:#fff;box-shadow:0 18px 50px rgba(34,29,55,.18)}
.parent-box h2{font-size:19px;margin:0 0 5px}
.parent-box p{font-size:14px;color:rgba(255,255,255,.78);line-height:1.8;margin:0}
.parent-link{background:var(--surface);color:var(--ink);border-radius:14px;padding:11px 14px;font-weight:700;font-size:14px;white-space:nowrap;border:0;cursor:pointer;font-family:inherit}

.home-pay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.home-pay-grid{grid-template-columns:1fr}}
.home-pay-card{display:flex;flex-direction:column;gap:6px;border-radius:22px;padding:18px 16px;text-decoration:none;color:inherit;min-height:148px;box-shadow:0 14px 36px rgba(34,29,55,.1)}
.home-pay-card--shop{background:linear-gradient(145deg,#ff5c35,#ff8a4c);color:#fff}
.home-pay-card--vip{background:linear-gradient(145deg,#5b3fd6,#8b6cff);color:#fff}
.home-pay-card--book{background:linear-gradient(145deg,#0f766e,#14b8a6);color:#fff}
.hero-slide--shop .hero-slide-cta{
  display:inline-flex;align-items:center;margin-top:10px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#ff5c35;font-size:13px;font-weight:800
}
html.theme-dark .hero-slide--shop .hero-slide-cta{background:rgba(28,24,40,.92);color:#ff8a57}
.home-pay-kicker{font-size:12px;font-weight:700;opacity:.85}
.home-pay-card strong{font-size:18px;font-weight:800;line-height:1.35}
.home-pay-card p{margin:0;font-size:13px;line-height:1.7;opacity:.9;flex:1}
.home-pay-cta{display:inline-block;margin-top:4px;font-size:13px;font-weight:800;background:rgba(255,255,255,.18);border-radius:999px;padding:7px 12px;align-self:flex-start}
.nj-fcm-banner{position:fixed;left:0;right:0;bottom:72px;z-index:80;padding:0 12px 10px;pointer-events:none;max-width:560px;margin:0 auto}
.nj-fcm-banner-inner{pointer-events:auto;display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--surface,#fff);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:12px 14px;box-shadow:0 12px 32px rgba(15,23,42,.14)}
.nj-fcm-banner.is-denied .nj-fcm-banner-inner{border-color:rgba(217,119,6,.35);background:linear-gradient(145deg,#fff,#fff8ef)}
.nj-fcm-banner.is-need-token .nj-fcm-banner-inner{border-color:rgba(109,74,255,.35);background:linear-gradient(145deg,#fff,#f6f2ff)}
.nj-fcm-banner-copy{min-width:0}
.nj-fcm-banner-copy strong{display:block;font-size:14px;margin-bottom:2px}
.nj-fcm-banner-copy p{margin:0;font-size:12px;color:var(--muted,#667085);line-height:1.6}
.nj-fcm-banner-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.nj-fcm-banner-actions .btn{white-space:nowrap;font-size:12px;padding:8px 10px}
@media (max-width:720px){
  .home-pay-grid{grid-template-columns:1fr}
  .nj-fcm-banner-inner{flex-direction:column;align-items:stretch}
  .nj-fcm-banner-actions{flex-direction:row}
}
html.theme-dark .nj-fcm-banner-inner{background:var(--surface);border-color:rgba(255,255,255,.08)}
html.theme-dark .nj-fcm-banner.is-denied .nj-fcm-banner-inner{background:linear-gradient(145deg,var(--surface),rgba(217,119,6,.12));border-color:rgba(217,119,6,.4)}
html.theme-dark .nj-fcm-banner.is-need-token .nj-fcm-banner-inner{background:linear-gradient(145deg,var(--surface),rgba(109,74,255,.14));border-color:rgba(109,74,255,.4)}

/* App update / changelog modal */
.nj-update-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .22s ease}
.nj-update-modal.is-open{opacity:1;pointer-events:auto}
.nj-update-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.nj-update-modal__card{position:relative;width:min(420px,100%);background:var(--surface,#fff);color:var(--text,#1f1a33);border-radius:20px;padding:22px 20px 18px;box-shadow:0 24px 64px rgba(15,23,42,.28);text-align:right}
.nj-update-modal__kicker{margin:0 0 6px;font-size:12px;font-weight:800;color:#6d4aff}
.nj-update-modal__card h2{margin:0 0 12px;font-size:1.2rem;line-height:1.4}
.nj-update-modal__list{margin:0 0 16px;padding:0 18px 0 0;line-height:1.8;font-size:14px;color:var(--muted,#4b5563)}
.nj-update-modal__list li{margin-bottom:6px}
.nj-update-modal__btn{width:100%;justify-content:center}
html.theme-dark .nj-update-modal__card{background:var(--surface,#1a1625);border:1px solid rgba(255,255,255,.08)}

.site-footer{display:block;height:0;padding:8px 0 12px;margin:0;border:0;overflow:hidden}
.footer-links{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-bottom:8px}

/* Bottom nav / drawer */
.bottom-nav{display:none}
.mobile-menu{display:none}

/* Inner pages */
.page-wrap{margin-top:18px;padding-bottom:4px}
/* Feed hubs (questions/chat): drop white page-card so cards use full shell width */
body.nj-flush-page .page-wrap{margin-top:10px}
body.nj-flush-page .page-card{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
}
html.theme-dark body.nj-flush-page .page-card{
  background:transparent;
  border:0;
  box-shadow:none;
}
.page-heading{margin:0 0 14px;font-size:22px;font-weight:900;letter-spacing:-.03em}
.page-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow-sm)}
.page-card .card,.page-card .card-style{background:var(--soft);border:1px solid var(--line);border-radius:18px;margin-bottom:12px;padding:12px;box-shadow:none}
.page-card .page-title,.page-card .header-card,.page-card #footer-bar,.page-card .footer{display:none!important}
.list-link{
  display:block;padding:14px;border-radius:18px;margin-bottom:10px;
  border:1px solid var(--nj-grad-border);background:var(--nj-grad-bg);box-shadow:var(--nj-grad-shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.list-link:hover{
  background:var(--nj-grad-bg-alt);
  border-color:rgba(109,74,255,.28);
  transform:translateY(-1px);
}
html.theme-dark .list-link:hover{border-color:rgba(155,134,255,.55)}
.list-link strong{display:block;font-size:15px;margin-bottom:4px;text-align:start}
.list-link span{display:block;font-size:13px;color:var(--muted);text-align:justify;text-justify:inter-word}
.nj-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.nj-tabs a,.nj-tabs button{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;color:var(--muted)}
.nj-tabs a.active,.nj-tabs button.active,.nj-tabs [data-tab-active]{background:var(--violet);color:var(--primary);border-color:transparent}
.alert-nj{padding:12px 14px;border-radius:14px;background:var(--danger-bg);color:var(--danger);margin-bottom:14px;font-weight:700}
.alert-nj.ok{background:var(--mint);color:var(--mint-ink)}
.form-nj label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.form-nj input,.form-nj textarea,.form-nj select{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface);color:var(--ink);margin-bottom:12px}
.form-nj .btn{width:100%;margin-top:6px}
.captcha-row{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.module-grid{display:grid;gap:10px}
@media(min-width:700px){.module-grid{grid-template-columns:1fr 1fr}}

/* Pagination */
.nj-pagination{margin:14px 0 4px;overflow-x:visible}
.pagination{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  list-style:none;
  padding:0;
  margin:0 auto;
  justify-content:center;
  align-items:center;
}
.pagination li{flex:0 0 auto}
.pagination li a,
.pagination li span{
  display:inline-flex;
  min-width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface);
  text-decoration:none;
  white-space:nowrap;
  box-sizing:border-box;
}
.pagination li.page-nav a{
  font-size:22px;
  font-weight:800;
  line-height:1;
  color:var(--primary);
}
.pagination li.active span,
.pagination .active > *{
  background:var(--violet);
  color:var(--primary);
  border-color:transparent;
}
.pagination li.disabled span{opacity:.45;cursor:default}

/* Legacy cleanup inside page-card */
.legacy-content .header-card,
.legacy-content .page-title,
.legacy-content #footer-bar,
.legacy-content .footer[data-menu-load],
.legacy-content .tab-controls{display:none!important}
.legacy-content .card-style,
.legacy-content .card-style,
.legacy-content .card{background:var(--soft);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden}
.legacy-content .content{padding:12px}
.legacy-content .float-right{float:right}
.legacy-content .float-left{float:left}
.legacy-content .clearfix{clear:both}
.legacy-content img.post,.legacy-content .img-fluid{width:100%;border-radius:12px 12px 0 0;display:block}
.legacy-content input,.legacy-content select,.legacy-content textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0 12px;background:var(--surface);color:var(--ink)}
.legacy-content .btn,.legacy-content button[type=submit]{background:var(--primary);color:#fff;border:0;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}
.legacy-content .bg-gradient-pink2{background:linear-gradient(135deg,#6d4aff,#9d7cff)!important;color:#fff;border:0}
.legacy-content .color-white{color:#fff!important}
.legacy-content .toast{display:none}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(3,1fr)}
  .content-grid{grid-template-columns:1fr}
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .hero-main{min-height:200px}
  .hero-slider .hero-track{min-height:200px}
  .daily-card{min-height:auto}
  .engage{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--topbar-h:68px}
  .btn{min-height:46px}
  .bottom-nav a{min-height:48px}
  body{background:var(--bg)}
  /* فاصله لازم تا متن زیر منوی ثابت پایین نرود */
  .app{padding-bottom:calc(var(--nav-h) + var(--safe) + 10px);padding-top:calc(var(--topbar-h) + var(--safe-top))}
  .shell{padding:0 14px 16px}
  .site-footer{padding:8px 0 0}
  .topbar-inner{min-height:var(--topbar-h);padding:10px 14px;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .desktop-nav{display:none!important}
  .brand{justify-self:start;min-width:0}
  .brand > span > span{display:none}
  .brand-mark{width:40px;height:40px}
  .top-actions{gap:6px}
  .top-actions .search-btn{display:none}
  .icon-btn,.profile-btn{width:40px;height:40px}
  .hero{margin-top:14px;gap:12px;max-width:100%}
  .hero-main{padding:0;border-radius:22px;min-height:190px;max-width:100%}
  .hero-slider .hero-track{min-height:190px}
  .hero-slide{padding:18px 18px 30px}
  .hero h1{font-size:22px}
  .hero p{font-size:13px;line-height:1.7}
  .daily-card{border-radius:27px;padding:17px;max-width:100%}
  .daily-card h2{font-size:20px}
  .quick-grid{grid-template-columns:repeat(3,1fr);gap:8px;max-width:100%}
  .quick{min-height:105px;border-radius:17px;padding:10px 6px;min-width:0}
  .quick .qi{width:39px;height:39px;border-radius:13px;font-size:17px}
  .quick strong{font-size:14px}
  .quick small{display:block;font-size:12px}
  .feed-list{grid-template-columns:1fr}
  .feed-card,.side-card{border-radius:20px;max-width:100%}
  .category-grid{grid-template-columns:repeat(2,1fr);max-width:100%}
  .category{min-width:0}
  .hub-grid{max-width:100%}
  .hub-card{min-width:0}
  .content-grid{max-width:100%;gap:10px}
  .section{max-width:100%;margin-top:26px}
  .section-head h2{font-size:20px}
  .page-wrap,.page-card{max-width:100%}
  .nj-pagination{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nj-pagination::-webkit-scrollbar{display:none}
  .pagination li a,.pagination li span{min-width:32px;height:32px;padding:0 8px;font-size:13px}
  .parent-box{align-items:flex-start;flex-direction:column;border-radius:23px;max-width:100%}
  .article-card{grid-template-columns:82px minmax(0,1fr)}
  .thumb{width:82px;height:78px}
  .bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(6,1fr);left:0;right:0;bottom:0;height:calc(var(--nav-h) + var(--safe));padding:7px 2px var(--safe);background:var(--nav-bg);backdrop-filter:blur(18px);border-top:1px solid var(--line);z-index:70;max-width:100%}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;color:#817d8b;font-size:9.5px;font-weight:800;min-width:0;padding:2px 0}
  .bottom-nav a.active{background:var(--violet);color:var(--primary)}
  .bottom-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
  .mobile-menu{position:fixed;inset:0;background:rgba(16,12,27,.38);z-index:80;display:none}
  .mobile-menu.open{display:block}
  .mobile-drawer{position:absolute;right:0;top:0;bottom:0;width:min(88%,340px);background:var(--surface);color:var(--ink);padding:22px 18px;overflow:auto;box-shadow:-18px 0 50px rgba(0,0,0,.18)}
  .mobile-drawer h3{font-size:20px;margin:0 0 3px}
  .mobile-drawer p{font-size:14px;color:var(--muted);margin:0 0 18px}
  .mobile-drawer a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;font-size:14px;font-weight:700}
  .mobile-drawer a:hover{background:var(--violet)}
  .md-icon{width:34px;height:34px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center}
}

@media (min-width:721px){
  .site-footer{padding-bottom:12px}
}

/* Hub / category tiles (religious & nested lists) */
.hub-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media(min-width:560px){
  .hub-grid{grid-template-columns:1fr 1fr}
}
.hub-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  background:var(--nj-grad-bg);
  border:1px solid var(--nj-grad-border);
  border-radius:18px;
  box-shadow:var(--nj-grad-shadow);
  transition:.15s transform,.15s box-shadow, border-color .15s ease;
  min-height:72px;
  color:var(--ink);
}
.hub-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  background:var(--nj-grad-bg-alt);
  border-color:rgba(109,74,255,.28);
}
html.theme-dark .hub-card:hover{border-color:rgba(155,134,255,.55)}
.hub-ico{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;
  flex-shrink:0;
  line-height:1;
}
.hub-ico--illust{
  overflow:hidden;
  padding:0;
  background:transparent !important;
  box-shadow:var(--shadow-sm);
  width:56px;
  height:56px;
  border-radius:16px;
}
.hub-ico--illust img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hub-card strong{
  flex:1;
  font-size:15px;
  font-weight:800;
  line-height:1.55;
  min-width:0;
}
.hub-card .hub-chevron{
  color:#b0abc0;
  flex-shrink:0;
  display:grid;
  place-items:center;
}
.hub-card .hub-chevron svg{display:block}
.hub-card.has-thumb .hub-ico{
  overflow:hidden;
  padding:0;
  background:transparent !important;
}
.hub-card.has-thumb .hub-ico img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-tile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media(min-width:800px){
  .media-tile-grid{grid-template-columns:repeat(3,1fr)}
}
.media-tile{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--nj-grad-border);
  background:var(--nj-grad-bg);
  box-shadow:var(--nj-grad-shadow);
}
.media-tile img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
}
.media-tile span{
  display:block;
  padding:10px 11px;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
}
.text-block{
  background:var(--nj-grad-bg);
  border:1px solid var(--nj-grad-border);
  border-radius:20px;
  padding:16px;
  margin-bottom:12px;
  box-shadow:var(--nj-grad-shadow);
  line-height:1.85;
  font-size:16px;
  text-align:justify;
  text-justify:inter-word;
  color:var(--ink);
}
.text-block :is(h1,h2,h3,h4,h5,.who,.src),
.text-block > strong{
  text-align:start;
}
.text-block p,
.text-block li,
.text-block .supplication,
.supplication{
  text-align:justify;
  text-justify:inter-word;
  line-height:1.85;
}
.nj-body{
  margin:0;
  white-space:pre-wrap;
  text-align:justify;
  text-justify:inter-word;
  font-size:16px;
  line-height:1.85;
}
.nj-article{display:flex;flex-direction:column;gap:12px}
.nj-para{
  margin:0;
  text-align:justify;
  text-justify:inter-word;
  font-size:15.5px;
  line-height:1.9;
  color:var(--ink)
}
.nj-para--empty{color:var(--muted);text-align:center}
.nj-rich{font-size:16px;line-height:1.85;color:var(--ink)}
.nj-rich .hadith-intro{
  margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.7;text-align:start
}
.nj-rich .hadith-card{
  padding:14px 0;
  border-bottom:1px solid var(--line)
}
.nj-rich .hadith-card:last-child{border-bottom:0;padding-bottom:0}
.nj-rich .hadith-head{
  display:flex;align-items:baseline;gap:8px;margin:0 0 8px;text-align:start
}
.nj-rich .hadith-num{
  flex-shrink:0;font-weight:900;color:var(--primary,#6243cf);font-size:15px
}
.nj-rich .hadith-who{font-weight:800;font-size:15px;line-height:1.5}
.nj-rich .hadith-subtitle{
  margin:0 0 8px;font-size:14px;font-weight:700;color:var(--muted);text-align:start
}
.nj-rich .hadith-ar{
  margin:0 0 10px;padding:12px 14px;border-radius:14px;
  background:var(--soft,#f6f4fb);border:1px solid var(--line);
  font-size:17px;line-height:2;text-align:justify;font-family:Traditional Arabic,Scheherazade New,Amiri,serif
}
.nj-rich .hadith-fa{
  margin:0;text-align:justify;text-justify:inter-word;line-height:1.85;font-size:15px
}
.nj-rich .hadith-src{
  margin:8px 0 0;font-size:12px;color:var(--muted);font-weight:600;text-align:start
}
.text-block .who{font-weight:800;color:var(--primary);margin-bottom:6px}
.text-block .src{font-size:12px;color:var(--muted);margin-top:10px}
.back-row{margin-bottom:12px}
.back-row a{font-size:14px;font-weight:800;color:var(--primary)}
.alert-nj{padding:12px 14px;border-radius:14px;margin-bottom:12px;font-size:14px;font-weight:700}
.alert-nj-error{background:#ffe8e8;color:#b42318;border:1px solid #ffd0d0}
.alert-nj-ok{background:#e8f8ef;color:#067647;border:1px solid #b7ebc9}
.hub-card.plan-box.is-selected,
.hub-card.is-selected{
  outline:2px solid var(--primary);
  background:var(--violet);
  border-color:transparent;
}
.chat-thread{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.bubble{max-width:88%;padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.7;text-align:justify;text-justify:inter-word}
.bubble p,.bubble div{margin:0;text-align:justify;text-justify:inter-word}
.bubble span{display:block;margin-top:6px;font-size:11px;opacity:.65;text-align:start}
.bubble-me{align-self:flex-start;background:var(--violet);color:var(--ink)}
.bubble-them{align-self:flex-end;background:var(--primary);color:#fff}
.chat-compose{position:sticky;bottom:76px;background:var(--bg);padding-top:8px;z-index:2}

/* Dark theme surface overrides */
html.theme-dark .page-card,
html.theme-dark .daily-card,
html.theme-dark .quick{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}
html.theme-dark .hub-card,
html.theme-dark .text-block,
html.theme-dark .list-link,
html.theme-dark .feed-card,
html.theme-dark .side-card,
html.theme-dark .category,
html.theme-dark .media-tile,
html.theme-dark .article-card{
  color:var(--ink);
}
html.theme-dark .page-card .card,
html.theme-dark .page-card .card-style,
html.theme-dark .legacy-content .card-style,
html.theme-dark .legacy-content .card{
  background:var(--soft);
  border-color:var(--line);
}
html.theme-dark .desktop-nav a{color:var(--muted)}
html.theme-dark .desktop-nav a:hover,
html.theme-dark .desktop-nav a.active{background:var(--surface-2);color:var(--primary)}
html.theme-dark .form-nj input,
html.theme-dark .form-nj textarea,
html.theme-dark .form-nj select,
html.theme-dark .legacy-content input,
html.theme-dark .legacy-content select,
html.theme-dark .legacy-content textarea{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}
html.theme-dark .pagination li a,
html.theme-dark .pagination li span{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}
html.theme-dark .nj-tabs a,
html.theme-dark .nj-tabs button{
  background:var(--surface);
  border-color:var(--line);
  color:var(--muted);
}
html.theme-dark .mobile-drawer{background:var(--surface);color:var(--ink)}
html.theme-dark .mobile-drawer a:hover{background:var(--violet)}
html.theme-dark .md-icon{background:var(--surface-2)}
html.theme-dark .bottom-nav{background:var(--nav-bg);border-top-color:var(--line)}
html.theme-dark .bottom-nav a{color:var(--muted)}
html.theme-dark .bottom-nav a.active{background:var(--violet);color:var(--primary)}
html.theme-dark .bubble-me{background:var(--violet);color:var(--ink)}
html.theme-dark .alert-nj-error{background:var(--danger-bg);color:var(--danger);border-color:#5a3030}
html.theme-dark .alert-nj-ok{background:var(--mint);color:var(--mint-ink);border-color:#2a4a38}
html.theme-dark .profile-btn{background:linear-gradient(135deg,#3a2f5c,#5a3a4a);color:#d4c4ff}
html.theme-dark body{background:var(--bg)}

/* Discover grouped sections */
.discover-page{max-width:100%}
.discover-group{margin:0 0 22px}
.discover-group-title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:-.01em;
  text-align:start;
}

/* Blog / خواندنی feed */
.blog-feed-page{margin-top:4px}
.blog-search{margin:0 0 12px}
.blog-search-hint{
  margin:0 0 12px;font-size:13px;font-weight:700;color:var(--muted);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.blog-search-hint a{color:var(--primary);font-weight:850}
.blog-feed-list{display:flex;flex-direction:column;gap:10px}
.blog-feed-item{
  display:grid!important;grid-template-columns:96px 1fr;gap:12px;align-items:center;
  margin-bottom:0;
}
.blog-feed-thumb{
  width:96px;height:72px;border-radius:14px;background-size:cover;background-position:center;
}
.blog-feed-body{min-width:0}
.blog-feed-body strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:4px;line-height:1.55;
}

/* Courses feed */
.course-feed-page{margin-top:4px}
.course-feed-top{margin-bottom:14px}
.course-search{margin:0 0 12px}
.course-search input{
  width:100%;
  border:1px solid var(--nj-grad-border);
  background:var(--nj-grad-bg);
  color:var(--ink);
  border-radius:999px;
  padding:13px 16px;
  font-size:14px;font-weight:650;
  outline:none;
  box-shadow:var(--nj-grad-shadow);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.course-search input:focus{
  border-color:rgba(109,74,255,.4);
  box-shadow:0 0 0 3px rgba(109,74,255,.12),var(--nj-grad-shadow);
}
html.theme-dark .course-search input:focus{
  border-color:rgba(155,134,255,.55);
  box-shadow:0 0 0 3px rgba(155,134,255,.16),var(--nj-grad-shadow);
}
.course-filters{display:flex;gap:8px;flex-wrap:wrap}
.course-filters-scroll{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.course-filters-scroll::-webkit-scrollbar{display:none}
.course-filter{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;
  border:1px solid var(--nj-grad-border);background:var(--nj-grad-bg);color:var(--ink);
  font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap;flex-shrink:0;
  box-shadow:var(--nj-grad-shadow);
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.course-filter:hover{background:var(--nj-grad-bg-alt)}
.course-filter.is-active{
  background:var(--primary);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(109,74,255,.28);
}
html.theme-dark .course-filter.is-active{
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.course-feed-list{display:flex;flex-direction:column;gap:10px}
.course-feed-item{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  padding:12px;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--nj-grad-border);
  border-radius:18px;
  background:var(--nj-grad-bg);
  box-shadow:var(--nj-grad-shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.course-feed-item:hover{
  background:var(--nj-grad-bg-alt);
  border-color:rgba(109,74,255,.28);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
html.theme-dark .course-feed-item:hover{border-color:rgba(155,134,255,.55)}
.cfi-thumb{
  position:relative;
  width:118px;
  aspect-ratio:16 / 9;
  height:auto;
  border-radius:14px;
  overflow:hidden;
  flex-shrink:0;
  background:linear-gradient(145deg,#2a2540,#4a3f6b);
  box-shadow:0 4px 14px rgba(40,30,70,.12);
  order:1;
}
.cfi-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cfi-thumb-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:22px;color:#fff}
.cfi-crown{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(4px);
  display:grid;
  place-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  padding:4px;
}
html.theme-dark .cfi-crown{background:rgba(28,24,40,.88)}
.cfi-crown img{width:100%;height:100%;display:block;object-fit:contain}
.cfi-body{flex:1;min-width:0;order:2;text-align:start}
.cfi-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:15px;
  font-weight:850;
  line-height:1.5;
  margin:0 0 8px;
}
.cfi-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  font-weight:650;
}
.cfi-play{
  width:18px;
  height:18px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:8px;
  display:inline-grid;
  place-items:center;
  line-height:1;
  padding-inline-start:1px;
  box-shadow:0 4px 10px rgba(109,74,255,.28);
}
@media(min-width:700px){
  .cfi-thumb{width:148px;border-radius:14px}
}
.course-feed-empty{color:var(--muted);padding:24px 8px;text-align:center;font-weight:650}
html.theme-dark .course-search input{background:var(--nj-grad-bg)}

.course-session-list{display:flex;flex-direction:column;gap:8px}
.course-session-item{
  display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;
  border:1px solid var(--nj-grad-border);background:var(--nj-grad-bg);color:var(--ink);text-decoration:none;
  box-shadow:var(--nj-grad-shadow);
}
.course-session-item.is-active{outline:2px solid var(--primary);background:var(--nj-grad-bg-alt);border-color:transparent}
.course-session-item.is-locked{opacity:.75}
.course-session-item .cs-num{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface);font-size:12px;font-weight:800;flex-shrink:0
}
.course-session-item .cs-body{flex:1;min-width:0}
.course-session-item .cs-body strong{display:block;font-size:14px;line-height:1.4}
.course-session-item .cs-body small{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.course-session-item .cs-ico{flex-shrink:0;opacity:.7;display:grid;place-items:center}
.course-session-item .cs-ico svg{display:block;color:#b0abc0}
.course-session-item.is-active .cs-ico svg{color:var(--primary);opacity:1}
.course-player{padding:0;overflow:hidden;margin-bottom:14px}
.course-player video{width:100%;display:block;max-height:420px;background:#000;border-radius:18px 18px 0 0}
.course-player--hero{margin-bottom:12px}
.course-player--hero video{border-radius:18px;max-height:min(56vh,520px)}
.course-player-cap{padding:12px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.course-player-cap strong{font-size:14px}

/* تک‌قسمتی / سری — ریسپانسیو داخل page-card */
.course-detail-vip{margin-bottom:14px;background:var(--violet)}
.course-detail-vip p{margin:0 0 10px;font-weight:800}

.nj-player{
  position:relative;background:#000;overflow:hidden;
  aspect-ratio:16/10;max-height:min(56vh,480px)
}
.nj-player--contained{margin:0;border-radius:0}
.nj-player video{
  width:100%;height:100%;display:block;object-fit:contain;background:#000
}
.nj-player.is-playing{aspect-ratio:auto;max-height:min(56vh,520px)}
.nj-player.is-playing video{max-height:min(56vh,520px);height:auto;width:100%}
.nj-player-hit{
  position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:transparent;
  display:block;width:100%;height:100%
}
.nj-player-poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-color:#1a1a1a
}
.nj-player-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.4))
}
.nj-player-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#111;
  display:grid;place-items:center;font-size:22px;padding-inline-start:3px;
  box-shadow:0 8px 28px rgba(0,0,0,.35)
}
.nj-player-crown{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:999px;
  background:rgba(255,255,255,.75);
  display:grid;place-items:center;padding:5px;z-index:2;
  box-shadow:0 1px 4px rgba(0,0,0,.12)
}
.nj-player-crown img{width:100%;height:auto;display:block}
.nj-player.is-playing .nj-player-hit{display:none}

.course-player video{border-radius:18px 18px 0 0}

/* پاپ‌آپ اشتراک */
.nj-sheet[hidden]{display:none!important}
.nj-sheet{position:fixed;inset:0;z-index:200}
.nj-sheet-backdrop{position:absolute;inset:0;background:rgba(20,16,30,.55)}
.nj-sheet-panel{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:min(560px,100%);
  background:var(--surface);color:var(--ink);
  border-radius:22px 22px 0 0;padding:12px 20px calc(20px + var(--safe,0px));
  text-align:center;box-shadow:0 -12px 40px rgba(0,0,0,.18);
  animation:njSheetUp .28s ease
}
@keyframes njSheetUp{from{transform:translate(-50%,24px);opacity:.6}to{transform:translateX(-50%);opacity:1}}
.nj-sheet-handle{
  width:42px;height:4px;border-radius:99px;background:var(--line);margin:4px auto 14px
}
.nj-sheet-crown{width:52px;height:52px;margin:0 auto 10px;display:block}
.nj-sheet-panel h2{font-size:18px;margin:0 0 8px;font-weight:800}
.nj-sheet-panel p{margin:0 0 16px;font-size:14px;line-height:1.7;color:var(--muted)}
.nj-sheet-cta{display:block;width:100%;margin:0 0 8px;text-align:center}
.nj-sheet-dismiss{
  border:0;background:transparent;color:var(--muted);font-weight:700;font-size:14px;
  padding:10px;cursor:pointer;width:100%
}
.nj-confirm-actions{
  display:flex;gap:8px;margin-top:4px;
}
.nj-confirm-actions .btn{flex:1;text-align:center}
.btn.btn-danger,.btn-danger{
  background:var(--danger);color:#fff;border:0;border-radius:14px;
  padding:12px 16px;font:inherit;font-weight:800;cursor:pointer;
}
.btn.btn-danger:hover,.btn-danger:hover{filter:brightness(.97)}
body.nj-sheet-open{overflow:hidden}
.chat-guard-ico{
  width:52px;height:52px;margin:0 auto 10px;border-radius:16px;
  display:grid;place-items:center;
  background:var(--peach);color:var(--peach-ink);
}

.discover-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.home-start-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* مسیر یادگیری — ریل افقی با کاور مستطیل (۱۶:۹) */
.home-learn-rail{
  display:flex;
  gap:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 2px 10px;
  scroll-snap-type:x mandatory;
}
.home-learn-rail::-webkit-scrollbar{display:none}
.home-learn-card{
  flex:0 0 min(72%,220px);
  max-width:260px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--ink);
  text-decoration:none;
  scroll-snap-align:start;
}
.hlc-media{
  position:relative;
  display:block;
  aspect-ratio:16 / 9;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(145deg,#2a2540,#4a3f6b);
  box-shadow:0 8px 22px rgba(40,30,70,.12);
}
.hlc-media:after{
  content:"";
  position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(to top,rgba(20,16,30,.45),transparent);
  pointer-events:none;z-index:1
}
.hlc-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.home-learn-card:hover .hlc-media img{transform:scale(1.05)}
.home-learn-card:hover .hlc-media{box-shadow:0 12px 28px rgba(40,30,70,.18)}
.hlc-fallback{
  display:grid;place-items:center;width:100%;height:100%;
  background:linear-gradient(145deg,#2a2540,#4a3f6b);color:#fff;font-size:28px
}
.hlc-crown{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(6px);padding:5px;z-index:2;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.14)
}
.hlc-crown img{width:100%;height:auto;display:block;object-fit:contain}
.hlc-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:999px;z-index:2;
  background:rgba(255,255,255,.92);color:#e91e8c;font-size:14px;
  display:inline-grid;place-items:center;padding-inline-start:2px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .2s ease, background .2s ease
}
.home-learn-card:hover .hlc-play{
  transform:translate(-50%,-50%) scale(1.06);
  background:#fff
}
.hlc-body{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0 2px}
.hlc-title{
  font-size:14px;font-weight:800;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.hlc-meta{font-size:12px;color:var(--muted);font-weight:600}
@media(min-width:700px){
  .home-learn-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none;gap:16px}
  .home-learn-card{flex:none;max-width:none;gap:10px}
  .hlc-media{border-radius:18px}
}
@media(min-width:1000px){
  .home-learn-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .home-learn-card{max-width:none}
}
@media(min-width:700px){
  .discover-grid,
  .home-start-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1000px){
  .discover-grid,
  .home-start-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Profile edit — default avatar picker */
.av-edit-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.av-edit-preview{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:var(--soft);flex-shrink:0}
.av-edit-hint{margin:-2px 0 10px;font-size:13px;color:var(--muted);line-height:1.5}
.av-pick{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,64px));gap:10px;justify-content:start;
  margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--soft)
}
.av-pick-opt{position:relative;margin:0;cursor:pointer;display:block;width:56px;max-width:64px}
.av-pick-opt[hidden]{display:none!important}
.av-pick-opt input{position:absolute;opacity:0;pointer-events:none}
.av-pick-opt img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid transparent;background:var(--surface);box-shadow:var(--shadow-sm)
}
.av-pick-opt--auto{display:flex;align-items:center;justify-content:center}
.av-pick-auto{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  border:2px dashed var(--line);background:var(--surface);font-size:11px;font-weight:800;color:var(--muted);text-align:center;padding:4px;line-height:1.2
}
.av-pick-opt input:checked + img,
.av-pick-opt input:checked + .av-pick-auto{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(109,74,255,.18)
}
.av-upload-label{margin-top:4px}
.av-clear-label{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:600;font-size:13px}
.av-clear-label input{width:auto;margin:0}
@media (max-width:420px){
  .av-pick{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;padding:10px;justify-content:stretch}
  .av-pick-opt{width:100%;max-width:none}
  .av-pick-opt img,.av-pick-auto{width:100%;height:auto;aspect-ratio:1;max-width:64px;margin-inline:auto}
}

/* Profile edit page */
.pe-page{display:flex;flex-direction:column;gap:16px}
.pe-hero{
  position:relative;overflow:visible;z-index:5;
  border-radius:26px;padding:20px 18px 16px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--violet) 70%,var(--surface)) 0%,var(--surface) 58%),
    var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  animation:peIn .45s ease both;
}
.pe-more{position:absolute;top:12px;inset-inline-end:12px;z-index:20}
.pe-more-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);cursor:pointer;
}
.pe-more-btn:hover{background:var(--surface)}
.pe-more-menu[hidden]{display:none!important}
.pe-more-menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:30;min-width:176px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:6px;display:flex;flex-direction:column;gap:2px;
}
.pe-more-menu a{
  display:block;width:100%;text-align:right;padding:11px 12px;border-radius:10px;
  color:var(--ink);font-weight:750;font-size:13.5px;text-decoration:none;
  background:transparent;border:0;
}
.pe-more-menu a:hover{background:var(--violet)}
.pe-more-menu a.is-vip{color:var(--primary);font-weight:850}
.pe-more-logout{margin:4px 0 0;padding:4px 0 0;border-top:1px solid var(--line)}
.pe-more-logout button,
.legacy-content .pe-more-logout button[type=submit]{
  display:block;width:100%;text-align:right;padding:10px 12px;border-radius:10px;
  border:0;background:transparent;cursor:pointer;font:inherit;
  color:var(--muted);font-weight:600;font-size:12.5px;opacity:.78;
  box-shadow:none;
}
.pe-more-logout button:hover,
.pe-more-logout button:focus-visible,
.legacy-content .pe-more-logout button[type=submit]:hover,
.legacy-content .pe-more-logout button[type=submit]:focus-visible{
  background:transparent;color:var(--muted);opacity:1;outline:none;box-shadow:none;
}
.pe-hero-glow{
  position:absolute;inset:auto -20% -40% auto;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(109,74,255,.22),transparent 68%);
  pointer-events:none;
}
.pe-hero-main{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:16px;z-index:1}
.pe-avatar-btn{
  position:relative;flex-shrink:0;width:108px;height:108px;padding:0;margin:0;
  border:0;background:transparent;cursor:pointer;border-radius:50%;
}
.pe-avatar-btn:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.pe-avatar-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,#f58529,#dd2a7b,#8134af,#515bd4,#f58529);
  box-shadow:0 10px 28px rgba(221,42,123,.18);
}
.pe-avatar-inner{
  position:absolute;inset:4px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;overflow:hidden;
}
.pe-avatar{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  background:var(--soft);transition:transform .25s ease;
}
.pe-avatar-btn:hover .pe-avatar{transform:scale(1.03)}
.pe-avatar-cam{
  position:absolute;inset-inline-end:2px;bottom:2px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#6d4aff,#8a6cff);
  border:2.5px solid var(--surface);
  box-shadow:0 6px 16px rgba(109,74,255,.35);
}
.pe-vip-badge{
  position:absolute;inset-inline-start:2px;top:2px;z-index:2;
  min-width:34px;height:22px;padding:0 7px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,#6d4aff,#8a6cff);
  border:2px solid var(--surface);box-shadow:0 6px 14px rgba(109,74,255,.35);
}
.pe-hero-text{position:relative;min-width:0;flex:1;z-index:1}
.pe-edit-photo{
  margin:8px 0 0;padding:0;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:850;color:var(--primary);
}
.pe-edit-photo:hover{text-decoration:underline}
.pe-kicker{
  margin:0 0 4px;font-size:11.5px;font-weight:850;letter-spacing:.04em;
  color:var(--primary);text-transform:none;
}
.pe-title{margin:0 0 6px;font-size:1.35rem;font-weight:900;line-height:1.25;letter-spacing:-.01em}
.pe-sub{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
.pe-hero-actions{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;padding-bottom:2px;
}
.pe-chip{
  display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-height:36px;padding:7px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--line);
  font-size:12px;font-weight:800;color:var(--ink);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.pe-chip:hover{background:var(--surface);border-color:rgba(109,74,255,.28);transform:translateY(-1px)}
.pe-chip svg{flex-shrink:0;opacity:.85}
html.theme-dark .pe-chip{background:rgba(255,255,255,.06)}
.pe-form{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.pe-force-banner{margin-bottom:12px;line-height:1.7}
.pe-wizard-steps{display:flex;gap:8px;margin-bottom:4px}
.pe-wiz-step{
  flex:1;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:12px;padding:10px 8px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.pe-wiz-step.is-on{border-color:rgba(109,74,255,.35);color:var(--primary);background:rgba(109,74,255,.08)}
.pe-wiz-nav{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pe-wiz-nav .btn{min-height:42px;padding:0 14px;border-radius:12px;font-weight:700}
.pe-wiz-nav .btn.primary{background:var(--primary);color:#fff;border:0}
.pe-wiz-nav .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
select.pe-input{appearance:auto;-webkit-appearance:menulist}
.pe-card{
  position:relative;z-index:1;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:18px 16px;box-shadow:var(--shadow-sm);
  animation:peIn .5s ease both;
}
.pe-card:nth-of-type(1){animation-delay:.05s}
.pe-card:nth-of-type(2){animation-delay:.1s}
.pe-card:nth-of-type(3){animation-delay:.15s}
.pe-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.pe-card-ico{
  width:40px;height:40px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:var(--violet);color:var(--primary);
}
.pe-card-title{margin:0 0 4px;font-size:15.5px;font-weight:900}
.pe-card-desc{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
.pe-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.pe-field:last-child{margin-bottom:0}
.pe-label{font-size:13.5px;font-weight:800;color:var(--ink)}
.pe-hint{font-size:12px;font-weight:600;color:var(--muted)}
.pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pe-input{
  width:100%;border:1px solid var(--line);border-radius:16px;padding:13px 15px;
  background:var(--soft);color:var(--ink);font:inherit;margin:0;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pe-input:focus{
  outline:none;border-color:rgba(109,74,255,.45);background:var(--surface);
  box-shadow:0 0 0 4px rgba(109,74,255,.12);
}
.pe-input--locked{opacity:.72;cursor:not-allowed}
.pe-textarea{min-height:100px;resize:vertical;line-height:1.75}
.pe-date-wrap{position:relative}
/* فیلد تاریخ LTR است؛ آیکن باید سمت راست فیزیکی باشد تا روی متن نیفتد */
.pe-input--date{
  padding:13px 48px 13px 15px;cursor:pointer;text-align:left;direction:ltr;
}
.pe-date-ico{
  position:absolute;right:12px;left:auto;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:10px;pointer-events:none;
  display:grid;place-items:center;color:var(--primary);background:rgba(109,74,255,.1);
}
.pe-sex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pe-sex-opt{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:46px;border-radius:16px;border:1px solid var(--line);
  background:var(--soft);cursor:pointer;font-weight:800;font-size:13.5px;color:var(--muted);
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pe-sex-opt:active{transform:scale(.97)}
.pe-sex-opt input{position:absolute;opacity:0;pointer-events:none}
.pe-sex-opt.is-on,.pe-sex-opt:has(input:checked){
  background:var(--violet);color:var(--primary);border-color:transparent;
  box-shadow:0 8px 18px rgba(109,74,255,.14);
}
.pe-upload{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;
  border:1px dashed rgba(109,74,255,.35);background:var(--violet);cursor:pointer;margin-bottom:10px;
  transition:border-color .15s ease, transform .15s ease;
}
.pe-upload:hover{border-color:rgba(109,74,255,.55);transform:translateY(-1px)}
.pe-upload-ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface);color:var(--primary);flex-shrink:0;
}
.pe-upload strong{display:block;font-size:13.5px;font-weight:850;color:var(--ink)}
.pe-upload small{display:block;margin-top:2px;font-size:12px;color:var(--muted);font-weight:600}
.pe-clear{
  display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;
}
.pe-clear input{width:auto;margin:3px 0 0}
.pe-submit-bar{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:5;padding-top:2px}
.pe-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;
  border:0;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font-size:15px;font-weight:850;
  box-shadow:0 14px 30px rgba(109,74,255,.3);cursor:pointer;
  transition:filter .15s ease, transform .15s ease;
}
.pe-submit:hover{filter:brightness(1.05)}
.pe-submit:active{transform:scale(.985)}
.pe-links{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:2px 0 10px;
}
.pe-links a{
  font-size:13px;font-weight:800;color:var(--primary);padding:8px 12px;border-radius:12px;
  transition:background .15s ease;
}
.pe-links a:hover{background:var(--violet)}
.pe-quick{
  display:flex;flex-direction:column;gap:12px;
  width:100%;max-width:100%;min-width:0;
  padding:2px 0 12px;animation:peIn .5s ease both;animation-delay:.18s;
}
.pe-quick-head{padding:0 2px}
.pe-quick-title{margin:0 0 4px;font-size:15.5px;font-weight:900;color:var(--ink)}
.pe-quick-desc{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.pe-quick-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
  width:100%;min-width:0;
}
.pe-quick-item{
  display:flex;align-items:center;gap:10px;
  min-width:0;max-width:100%;min-height:56px;padding:10px 12px;
  border-radius:18px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-sm);
  color:inherit;text-decoration:none;overflow:hidden;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.pe-quick-item:hover{
  transform:translateY(-1px);box-shadow:var(--shadow);
  border-color:rgba(109,74,255,.22);
}
.pe-quick-item:active{transform:scale(.985)}
.pe-quick-item.is-vip{
  background:
    linear-gradient(135deg,rgba(109,74,255,.08),transparent 55%),
    var(--surface);
  border-color:rgba(109,74,255,.22);
}
.pe-quick-ico{
  width:36px;height:36px;border-radius:12px;flex:0 0 36px;
  display:grid;place-items:center;color:#fff;overflow:hidden;
}
.pe-quick-ico svg{display:block;width:18px;height:18px}
.pe-quick-ico--notif{background:linear-gradient(135deg,#6d4aff,#8a6cff)}
.pe-quick-ico--booking{background:linear-gradient(135deg,#3498db,#2980b9)}
.pe-quick-ico--vip{background:linear-gradient(135deg,#f59e0b,#d97706)}
.pe-quick-ico--shop{background:linear-gradient(135deg,#10b981,#059669)}
.pe-quick-ico--orders{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.pe-quick-ico--star{background:linear-gradient(135deg,#e91e8c,#c2185b)}
.pe-quick-copy{flex:1 1 auto;min-width:0;text-align:start;overflow:hidden}
.pe-quick-copy strong{
  display:block;font-size:13px;font-weight:850;color:var(--ink);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html.theme-dark .pe-quick-item{background:var(--surface)}
html.theme-dark .pe-quick-item.is-vip{
  background:linear-gradient(135deg,rgba(109,74,255,.14),transparent 55%),var(--surface);
}
@keyframes peIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.pe-av-menu{text-align:center}
.pe-av-actions{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.pe-av-action{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 14px;
  border:1px solid var(--line);border-radius:16px;background:var(--soft);
  color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer;text-align:start;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.pe-av-action:hover{background:var(--surface);border-color:rgba(109,74,255,.28)}
.pe-av-action:active{transform:scale(.985)}
.pe-av-action-ico{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:var(--violet);color:var(--primary);
}
.pe-av-action--danger{color:#c0265a}
.pe-av-action--danger .pe-av-action-ico{background:#ffe4e6;color:#be123c}
.pe-av-defaults{text-align:center}
.pe-av-defaults .av-pick{margin-top:4px;max-height:48vh;overflow:auto}
@media(max-width:420px){
  .pe-grid{grid-template-columns:1fr}
  .pe-hero-main{flex-direction:column;align-items:center;text-align:center}
  .pe-hero-text{width:100%}
  .pe-avatar-btn{width:100px;height:100px}
  .pe-title{font-size:1.2rem}
  .pe-chip{min-height:34px;padding:6px 10px;font-size:11.5px}
  .pe-chip svg{width:13px;height:13px}
  .pe-input--date{padding-right:50px}
  .pe-hero-actions{justify-content:center}
  .pe-quick-copy strong{font-size:12.5px}
  .pe-quick-item{min-height:52px;padding:10px;gap:8px}
  .pe-quick-ico{width:34px;height:34px;flex-basis:34px;border-radius:11px}
  .pe-quick-ico svg{width:16px;height:16px}
}
html.theme-dark .pe-avatar-inner{background:var(--surface)}
html.theme-dark .pe-avatar-cam{border-color:var(--surface)}
html.theme-dark .pe-upload{background:var(--violet);border-color:rgba(155,134,255,.28)}
html.theme-dark .pe-hero-glow{background:radial-gradient(circle,rgba(155,134,255,.2),transparent 68%)}
html.theme-dark .pe-date-ico{background:rgba(155,134,255,.16)}
html.theme-dark .pe-av-action--danger .pe-av-action-ico{background:rgba(225,29,72,.22);color:#fecdd3}
body.nj-hide-nav .pe-submit-bar{bottom:calc(12px + env(safe-area-inset-bottom,0px))}

/* Public user profile */
.up-card{
  position:relative;overflow:visible;border-radius:22px;padding:14px 14px 16px;margin-bottom:14px;
  background:
    radial-gradient(circle at 100% 0%,rgba(109,74,255,.14),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(233,126,180,.10),transparent 40%),
    var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm)
}
.up-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;
  position:relative;z-index:25;
}
.up-bar-side{display:flex;align-items:center;gap:8px}
.up-follow-btn{min-height:40px;padding:0 16px;font-size:13px;border-radius:12px}
.up-more{position:relative}
.up-more-btn{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-sm)
}
.up-more-menu[hidden]{display:none!important}
.up-more-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:120;min-width:168px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:6px;display:flex;flex-direction:column;gap:2px
}
.up-more-menu:not([hidden]){position:fixed}
.up-more-menu button,.up-more-menu a{
  display:block;width:100%;text-align:right;padding:11px 12px;border:0;border-radius:10px;
  background:transparent;color:var(--ink);font-weight:700;font-size:14px
}
.up-more-menu button:hover,.up-more-menu a:hover{background:var(--violet)}
.up-hero{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.up-avatar-btn{
  display:block;padding:0;margin:0;border:0;background:transparent;cursor:pointer;
  border-radius:50%;flex-shrink:0;line-height:0;position:relative;z-index:1
}
.up-avatar-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.up-avatar{
  width:92px;height:92px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:3px solid rgba(255,255,255,.85);box-shadow:0 10px 28px rgba(49,35,94,.14);background:var(--soft);
  position:relative;z-index:1;display:block;pointer-events:none
}
.up-avatar-lb{
  position:fixed;inset:0;z-index:240;display:grid;place-items:center;
  padding:24px 16px;box-sizing:border-box
}
.up-avatar-lb[hidden]{display:none!important}
.up-avatar-lb-backdrop{
  position:absolute;inset:0;background:rgba(12,10,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
.up-avatar-lb-panel{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:min(86vw,360px);width:100%;animation:upAvatarIn .22s ease both
}
.up-avatar-lb-close{
  position:absolute;top:-8px;inset-inline-end:-4px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.up-avatar-lb-close:hover{background:rgba(255,255,255,.24)}
.up-avatar-lb-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.up-avatar-lb-img{
  width:min(72vw,280px);height:min(72vw,280px);border-radius:50%;object-fit:cover;
  background:var(--soft);border:4px solid rgba(255,255,255,.9);
  box-shadow:0 18px 48px rgba(0,0,0,.35)
}
.up-avatar-lb-name{
  margin:0;max-width:100%;padding:0 8px;text-align:center;
  font-size:16px;font-weight:900;color:#fff;line-height:1.4;
  text-shadow:0 2px 12px rgba(0,0,0,.35)
}
@keyframes upAvatarIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.up-avatar-lb-panel{animation:none}}
.up-hero-text{flex:1;min-width:0;text-align:start}
.up-name{margin:0 0 6px;font-size:1.35rem;font-weight:900;line-height:1.3}
.up-bio{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.up-bio--empty{opacity:.75}
.up-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)
}
.up-stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--ink);
  padding:8px 4px;border-radius:12px
}
.up-stat:hover{background:var(--violet)}
.up-stat strong{font-size:16px;font-weight:900}
.up-stat span{font-size:11px;color:var(--muted);font-weight:700}
.up-hint{font-size:12px;color:var(--muted);margin:0 0 12px;text-align:center;line-height:1.5}
.up-tabs{margin-bottom:12px}
.up-empty{
  text-align:center;padding:28px 18px;border-radius:20px;
  border:1px dashed var(--line);background:var(--soft);
}
.up-empty-ico{
  width:56px;height:56px;margin:0 auto 12px;border-radius:18px;
  display:grid;place-items:center;background:var(--violet);color:var(--primary);
}
.up-empty-title{display:block;font-size:15px;font-weight:900;color:var(--ink);margin:0 0 6px}
.up-empty-text{margin:0 auto;max-width:28ch;font-size:13px;line-height:1.7;color:var(--muted);font-weight:600}
.up-privacy{
  text-align:center;padding:28px 18px;border-radius:20px;
  border:1px solid rgba(109,74,255,.12);
  background:
    radial-gradient(circle at 100% 0%,rgba(109,74,255,.07),transparent 45%),
    var(--soft);
}
.up-privacy-ico{
  width:56px;height:56px;margin:0 auto 12px;border-radius:18px;
  display:grid;place-items:center;background:var(--violet);color:var(--primary);
}
.up-privacy-title{display:block;font-size:15px;font-weight:900;color:var(--ink);margin:0 0 8px}
.up-privacy-text{
  margin:0 auto;max-width:34ch;font-size:13.5px;line-height:1.8;
  color:var(--muted);font-weight:650;
}
.up-privacy-text em{
  font-style:normal;font-weight:900;color:var(--primary);
}
html.theme-dark .up-privacy{
  background:
    radial-gradient(circle at 100% 0%,rgba(155,134,255,.1),transparent 45%),
    var(--surface);
  border-color:rgba(155,134,255,.16);
}
.up-comment-wrap{display:flex;flex-direction:column;gap:8px}
.up-comment-parent{
  display:block;font-size:12px;font-weight:700;color:var(--muted);
  padding:0 4px;text-decoration:none;line-height:1.5;
}
a.up-comment-parent:hover{color:var(--primary)}
html.theme-dark .up-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(155,134,255,.16),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(240,168,196,.08),transparent 40%),
    var(--surface)
}
html.theme-dark .up-avatar{border-color:rgba(255,255,255,.12)}
html.theme-dark .up-avatar-lb-img{border-color:rgba(255,255,255,.2)}

/* —— Dialog / chat post cards —— */
.dlg-feed{display:flex;flex-direction:column;gap:12px}
.dlg-feed[hidden]{display:none!important}
.dlg-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 16px 12px;
  box-shadow:var(--shadow-sm);
}
.dlg-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.dlg-avatar{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:50%;
  overflow:hidden;
  background:var(--soft);
  display:block;
}
.dlg-avatar img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.dlg-meta{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.dlg-meta--stack{
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  flex:1;
}
.dlg-meta--stack .dlg-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.45;
}
.dlg-name{
  font-weight:800;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  line-height:1.3;
}
.dlg-name:hover{color:var(--primary)}
.dlg-time{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  line-height:1.3;
}
.dlg-body{
  display:block;
  margin:0 0 14px;
  color:var(--ink);
  font-size:15px;
  line-height:1.85;
  text-align:justify;
  text-justify:inter-word;
  text-decoration:none;
  white-space:pre-wrap;
  word-break:break-word;
}
.dlg-body--justify{
  text-align:justify;
  text-justify:inter-word;
}
a.dlg-body:hover{opacity:.88}
.dlg-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:2px;
}
.dlg-foot--hits{
  justify-content:flex-end;
}
.dlg-act--hits{
  flex-direction:row;
  direction:ltr;
}
.dlg-actions{
  display:flex;
  align-items:center;
  gap:0;
}
.dlg-act,.dlg-report{
  display:inline-flex;
  align-items:center;
  gap:3px;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:2px 3px;
  margin:0;
  cursor:pointer;
  text-decoration:none;
  font:inherit;
  line-height:1;
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.dlg-actions .dlg-act{margin:0;min-width:0}
.dlg-act:hover,.dlg-report:hover{color:var(--ink);background:var(--soft)}
.dlg-time-user{
  color:inherit;text-decoration:none;font-weight:750;
}
.dlg-time-user:hover{color:var(--primary)}
.dlg-owner-form{display:inline;margin:0;padding:0}
.dlg-act--icon{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  color:var(--muted);
  padding:2px 3px;
  width:auto;height:auto;
  min-width:0;min-height:0;
  box-shadow:none;
}
.dlg-act--icon .dlg-ico{display:block}
.dlg-act--owner,
.dlg-act--danger{
  font:inherit;
  font-weight:inherit;
  color:var(--muted);
  padding:2px 3px;
  background:transparent;
  box-shadow:none;
}
.dlg-act--owner:hover,
.dlg-act--danger:hover{filter:none}
/* Override .legacy-content button[type=submit] primary purple fill */
.legacy-content button.dlg-act[type=submit],
.legacy-content button.dlg-act.dlg-act--icon,
.legacy-content a.dlg-act.dlg-act--icon,
.legacy-content .dlg-act--owner,
.legacy-content .dlg-act--danger{
  background:transparent !important;
  color:var(--muted) !important;
  border:0 !important;
  border-radius:8px;
  padding:2px 3px !important;
  font-weight:inherit !important;
  box-shadow:none !important;
  width:auto !important;
  height:auto !important;
}
.legacy-content button.dlg-act[type=submit]:hover,
.legacy-content button.dlg-act[type=submit]:focus,
.legacy-content button.dlg-act[type=submit]:focus-visible,
.legacy-content button.dlg-act.dlg-act--icon:hover,
.legacy-content a.dlg-act.dlg-act--icon:hover,
.legacy-content .dlg-act--owner:hover,
.legacy-content .dlg-act--danger:hover{
  color:var(--ink) !important;
  background:var(--soft) !important;
}
.dlg-count{
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  min-width:0.75em;
}
.dlg-like.is-on{color:#e11d48}
.dlg-like.is-on .dlg-ico{fill:currentColor;stroke:currentColor}
.dlg-save.is-on{color:var(--primary)}
.dlg-save.is-on .dlg-ico{fill:currentColor;stroke:currentColor}
.dlg-ico{display:block;flex-shrink:0}
.dlg-section-title{
  font-weight:800;
  margin:18px 0 12px;
  font-size:15px;
}
.dlg-compose{margin-top:8px}

/* Sticky bottom dock (compose / ask CTA) above bottom nav */
.nj-dock{
  position:fixed;left:0;right:0;z-index:60;
  bottom:0;
  margin:0;
  padding:10px max(14px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-right, 0px));
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.96) 40%);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(109,74,255,.08);
  box-shadow:0 -8px 28px rgba(49,35,94,.05);
}
@media (max-width:1000px){
  .nj-dock{bottom:calc(var(--nav-h) + var(--safe))}
  /* Compose / detail pages: hide mobile tab bar so dock sits on the edge */
  body.nj-hide-nav .bottom-nav{display:none!important}
  body.nj-hide-nav .nj-dock{bottom:0}
  body.nj-hide-nav .app{padding-bottom:calc(var(--safe) + 12px)}
}
.nj-dock-spacer{height:132px}
.nj-dock-spacer--cta{height:118px}
.nj-dock-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;
  width:min(100%,720px);margin:0 auto;
}
.nj-dock .nj-dock-row textarea,
.dlg-compose.nj-dock textarea{
  margin:0;min-height:48px;max-height:120px;resize:vertical;
  border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.5;
}
.nj-dock-send{
  min-width:84px;min-height:48px;border-radius:16px;padding:0 16px;font-weight:850
}
.dlg-compose.nj-dock{
  display:grid;
  grid-template-columns:minmax(0,720px);
  justify-content:center;
  gap:0;
}
.dlg-compose-shell{
  display:flex;align-items:flex-end;gap:10px;
  padding:8px 8px 8px 12px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(109,74,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 24px rgba(109,74,255,.08);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.dlg-compose-shell:focus-within{
  border-color:rgba(109,74,255,.38);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 3px rgba(109,74,255,.12),
    0 10px 28px rgba(109,74,255,.12);
}
.dlg-compose-field{flex:1;min-width:0}
.dlg-compose.nj-dock .dlg-compose-shell textarea{
  display:block;width:100%;min-height:44px;max-height:120px;resize:none;
  margin:0;border:0;outline:none;background:transparent;
  border-radius:0;padding:11px 6px;
  font:inherit;font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.55;
  box-shadow:none;
}
.dlg-compose.nj-dock .dlg-compose-shell textarea::placeholder{color:var(--muted);opacity:.75}
.dlg-send{
  width:46px;height:46px;flex-shrink:0;padding:0;border:0;border-radius:16px;
  background:linear-gradient(145deg,#6d4aff 0%,#8a6cff 100%);
  color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 20px rgba(109,74,255,.35);
  transition:transform .14s ease, filter .15s ease, box-shadow .15s ease;
}
.dlg-send:hover{
  filter:brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 10px 24px rgba(109,74,255,.42);
}
.dlg-send:active{transform:scale(.94)}
.dlg-send:disabled,.dlg-send[aria-busy="true"]{
  opacity:.65;cursor:wait;pointer-events:none;filter:none;
}
.q-ask-cta.nj-dock{
  border-radius:0;border-left:0;border-right:0;border-bottom:0;
  box-shadow:0 -10px 28px rgba(49,35,94,.1);
}
.q-ask-cta-compact{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  width:min(100%,720px);margin:0 auto;
}
.q-ask-cta.nj-dock .q-ask-cta-title{font-size:14px;margin:0 0 2px}
.q-ask-cta.nj-dock .q-ask-cta-text{font-size:12.5px;line-height:1.55}
.q-ask-cta.nj-dock .q-ask-cta-btn{
  min-height:44px;padding:8px 14px;white-space:nowrap;font-size:13.5px
}
@media (max-width:520px){
  .q-ask-cta-compact{grid-template-columns:1fr}
  .q-ask-cta.nj-dock .q-ask-cta-btn{width:100%}
}
html.theme-dark .nj-dock{
  background:linear-gradient(180deg,rgba(28,24,40,.75) 0%,rgba(28,24,40,.96) 40%);
  border-top-color:rgba(155,134,255,.1);
  box-shadow:0 -8px 28px rgba(0,0,0,.25);
}
html.theme-dark .dlg-compose-shell{
  background:var(--surface);
  border-color:rgba(155,134,255,.2);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
html.theme-dark .dlg-compose-shell:focus-within{
  border-color:rgba(155,134,255,.45);
  box-shadow:
    0 0 0 3px rgba(155,134,255,.14),
    0 10px 28px rgba(0,0,0,.3);
}
.dlg-chat-actions{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;
}
.dlg-chat-actions .btn{flex:1;min-width:140px;text-align:center}
.dlg-saved-hint{
  margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.6;
}

/* Fixed compose FAB — bottom-left above bottom nav */
.compose-fab{
  position:fixed;z-index:65;
  left:max(16px, env(safe-area-inset-left, 0px));
  bottom:calc(var(--nav-h) + var(--safe) + 14px);
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--primary-2),var(--primary));
  color:#fff;text-decoration:none;
  box-shadow:0 12px 28px rgba(109,74,255,.38),0 2px 0 rgba(255,255,255,.18) inset;
  transition:transform .18s ease, box-shadow .18s ease, filter .15s ease;
}
.compose-fab-glow{
  position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(109,74,255,.35),transparent 68%);
  animation:compose-fab-pulse 2.4s ease-in-out infinite;
}
.compose-fab-ico{position:relative;z-index:1;display:grid;place-items:center}
.compose-fab-ico svg{display:block}
.compose-fab-tip{
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  white-space:nowrap;padding:7px 11px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:800;
  opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.compose-fab:hover,.compose-fab:focus-visible{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.05);
  box-shadow:0 16px 34px rgba(109,74,255,.45),0 2px 0 rgba(255,255,255,.2) inset;
}
.compose-fab:hover .compose-fab-tip,
.compose-fab:focus-visible .compose-fab-tip{
  opacity:1;transform:translateY(-50%) translateX(2px);
}
.compose-fab:active{transform:scale(.96)}
@keyframes compose-fab-pulse{
  0%,100%{opacity:.55;transform:scale(.92)}
  50%{opacity:1;transform:scale(1.08)}
}
html.theme-dark .compose-fab{
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(155,134,255,.25),0 2px 0 rgba(255,255,255,.08) inset;
}
@media (min-width:1000px){
  .compose-fab{bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .compose-fab-glow{animation:none}
}

/* Shared purple highlight cards (Q&A / chat / content) */
.qa-detail{display:flex;flex-direction:column}
.dlg-card--feed,
.dlg-card--qa,
.dlg-card--qa-answer{
  border-radius:20px;
  border:1px solid var(--nj-grad-border);
  background:var(--nj-grad-bg);
  box-shadow:var(--nj-grad-shadow);
}
.dlg-card--qa-answer{
  background:var(--nj-grad-bg-alt);
}
.dlg-card--unanswered{
  border-color:rgba(232,140,60,.42);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,186,120,.28),transparent 46%),
    radial-gradient(circle at 0% 100%,rgba(255,214,160,.16),transparent 50%),
    var(--surface);
  box-shadow:0 10px 28px rgba(232,140,60,.12);
}
html.theme-dark .dlg-card--unanswered{
  border-color:rgba(255,186,120,.32);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,170,90,.18),transparent 46%),
    radial-gradient(circle at 0% 100%,rgba(109,74,255,.08),transparent 50%),
    var(--surface);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.q-unanswered-badge{
  display:inline-flex;align-items:center;
  margin-inline-start:6px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:800;line-height:1.4;
  color:#9a4d00;background:rgba(255,186,120,.45);
  vertical-align:middle;
}
html.theme-dark .q-unanswered-badge{
  color:#ffd7a8;background:rgba(255,170,90,.22);
}

/* Ask-question CTA under Q&A */
.q-ask-cta{
  display:flex;flex-direction:column;gap:12px;align-items:stretch;
  margin:18px 0 4px;padding:16px;
  border-radius:20px;border:1px solid var(--nj-grad-border);
  background:var(--nj-grad-bg);
  box-shadow:var(--nj-grad-shadow);
}
.q-ask-cta--private{
  border-color:rgba(255,187,122,.35);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,187,122,.18),transparent 48%),
    radial-gradient(circle at 0% 100%,rgba(109,74,255,.1),transparent 46%),
    var(--surface);
}
.q-ask-cta-ico{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--violet);color:var(--primary);
}
.q-ask-cta--private .q-ask-cta-ico{background:var(--peach);color:var(--peach-ink)}
.q-ask-cta-title{
  display:block;margin:0 0 4px;font-size:15px;font-weight:900;color:var(--ink);
}
.q-ask-cta-text{
  margin:0;font-size:13.5px;line-height:1.7;font-weight:650;color:var(--muted);
}
.q-ask-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;padding:10px 16px;border-radius:16px;
  background:var(--primary);color:#fff;font-size:14.5px;font-weight:850;
  box-shadow:0 10px 22px rgba(109,74,255,.26);
  transition:transform .12s ease, filter .15s ease;
}
.q-ask-cta-btn:hover{filter:brightness(1.05);color:#fff}
.q-ask-cta-btn:active{transform:scale(.985)}
.q-ask-cta-btn svg{transform:scaleX(-1)}
html.theme-dark .q-ask-cta--private{
  border-color:rgba(255,196,154,.36);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,187,122,.28),transparent 52%),
    radial-gradient(circle at 0% 100%,rgba(155,134,255,.26),transparent 50%),
    linear-gradient(160deg,#3a2e40 0%,#2a2234 45%,#1c1828 100%);
}

/* Chat hub header */
.chat-hub{margin:0 0 16px}
.chat-hub-hero{
  position:relative;overflow:hidden;
  border-radius:22px;padding:18px 16px 16px;
  background:
    radial-gradient(circle at 100% 0%,rgba(109,74,255,.18),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(255,187,122,.16),transparent 46%),
    linear-gradient(160deg,var(--surface) 0%,var(--violet) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.chat-hub-hero::after{
  content:"";position:absolute;inset:auto -20% -40% auto;width:160px;height:160px;
  border-radius:50%;background:rgba(109,74,255,.08);pointer-events:none;
}
.chat-hub-copy{position:relative;z-index:1;margin-bottom:14px}
.chat-hub-kicker{
  margin:0 0 6px;font-size:12px;font-weight:800;color:var(--primary);
  letter-spacing:.02em;
}
.chat-hub-title{
  margin:0 0 6px;font-size:1.25rem;font-weight:900;line-height:1.35;color:var(--ink);
}
.chat-hub-sub{
  margin:0;font-size:13px;line-height:1.7;color:var(--muted);max-width:36ch;
}
.chat-hub-highlight{
  margin:10px 0 0;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;font-size:11.5px;font-weight:750;
  color:var(--primary);background:rgba(109,74,255,.1);border:1px solid rgba(109,74,255,.16);
  max-width:100%;line-height:1.4;
}
.chat-hub-cta{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.35fr 1fr;gap:8px;
}
.chat-hub-cta--single{grid-template-columns:1fr}
.chat-hub-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;padding:10px 12px;border-radius:14px;
  font-size:13.5px;font-weight:800;text-align:center;line-height:1.3;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.chat-hub-btn:active{transform:scale(.98)}
.chat-hub-btn-ico{display:grid;place-items:center;flex-shrink:0}
.chat-hub-btn--primary{
  background:var(--primary);color:#fff;
  box-shadow:0 10px 22px rgba(109,74,255,.28);
}
.chat-hub-btn--primary:hover{filter:brightness(1.05)}
.chat-hub-btn--ghost{
  background:rgba(255,255,255,.72);color:var(--ink);
  border:1px solid var(--line);backdrop-filter:blur(8px);
}
html.theme-dark .chat-hub-btn--ghost{background:rgba(255,255,255,.06)}
.chat-hub-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  margin-top:0;padding:4px;border-radius:16px;
  background:var(--soft);border:1px solid var(--line);
  flex:1;min-width:0;
}
.chat-hub-seg:has([data-show="tab-cats"]){
  grid-template-columns:1fr 1.15fr 1fr;
}
.chat-hub-seg:has([data-show="tab-cats"]) .chat-hub-seg-btn{
  font-size:12.5px;padding:8px 6px;gap:5px;
}
.chat-hub-seg--chat,
.chat-hub-seg:has([data-show="tab-hot"]){
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.chat-hub-seg--chat .chat-hub-seg-btn,
.chat-hub-seg:has([data-show="tab-hot"]) .chat-hub-seg-btn{
  font-size:11.5px;padding:8px 4px;gap:4px;
}
@media (max-width:420px){
  .chat-hub-seg:has([data-show="tab-cats"]) .chat-hub-seg-btn .chat-hub-seg-ico,
  .chat-hub-seg--chat .chat-hub-seg-btn .chat-hub-seg-ico,
  .chat-hub-seg:has([data-show="tab-hot"]) .chat-hub-seg-btn .chat-hub-seg-ico{display:none}
}
.chat-hub-tools{
  display:flex;align-items:center;gap:8px;margin-top:0;
}
.chat-hub-seg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;padding:8px 10px;border:0;border-radius:12px;
  background:transparent;color:var(--muted);
  font-size:13.5px;font-weight:800;cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.chat-hub-seg-btn.active{
  background:var(--surface);color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.chat-hub-seg-ico{display:grid;place-items:center;opacity:.85}
.chat-hub-seg-btn.active .chat-hub-seg-ico{opacity:1}
@media (max-width:380px){
  .chat-hub-cta{grid-template-columns:1fr}
  .chat-hub-title{font-size:1.15rem}
}
html.theme-dark .chat-hub-hero{
  background:
    radial-gradient(circle at 100% 0%,rgba(155,134,255,.2),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(240,168,196,.1),transparent 46%),
    linear-gradient(160deg,var(--surface) 0%,var(--violet) 100%);
}

/* Compose / add-chat */
.compose-page{display:flex;flex-direction:column;gap:14px}
.compose-hero{
  position:relative;overflow:hidden;
  border-radius:22px;padding:18px 16px;
  background:
    radial-gradient(circle at 0% 0%,rgba(109,74,255,.16),transparent 45%),
    radial-gradient(circle at 100% 100%,rgba(255,187,122,.14),transparent 48%),
    var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.compose-kicker{margin:0 0 6px;font-size:12px;font-weight:800;color:var(--primary)}
.compose-title{margin:0 0 6px;font-size:1.28rem;font-weight:900;line-height:1.35;color:var(--ink)}
.compose-sub{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:38ch}
.compose-rules{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:16px;
  background:var(--peach);border:1px solid rgba(169,92,42,.12);
  color:var(--peach-ink);
}
.compose-rules-ico{flex-shrink:0;margin-top:2px;opacity:.9}
.compose-rules p{margin:0;font-size:13px;line-height:1.75;font-weight:600}
.compose-form{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:16px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:18px;
}
.compose-field{display:flex;flex-direction:column;gap:10px}
.compose-field-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.compose-label{margin:0;font-size:14px;font-weight:800;color:var(--ink)}
.compose-hint,.compose-count{font-size:12px;font-weight:700;color:var(--muted)}
.compose-select-wrap{position:relative}
.compose-select{
  appearance:none;-webkit-appearance:none;width:100%;
  min-height:52px;padding:14px 44px 14px 16px;
  border:1px solid var(--line);border-radius:16px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--violet) 55%,var(--soft)) 0%,var(--soft) 100%);
  color:var(--ink);font:inherit;font-size:14.5px;font-weight:750;
  cursor:pointer;margin:0;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.compose-select:focus{
  outline:none;border-color:rgba(109,74,255,.45);background:var(--surface);
  box-shadow:0 0 0 4px rgba(109,74,255,.12);
}
.compose-select.is-filled{font-weight:850;color:var(--ink)}
.compose-select option{font-weight:650;color:var(--ink);background:var(--surface)}
.compose-select-ico{
  position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:10px;pointer-events:none;
  display:grid;place-items:center;color:var(--primary);
  background:rgba(109,74,255,.1);
}
html.theme-dark .compose-select{
  background:linear-gradient(180deg,rgba(155,134,255,.12) 0%,var(--soft) 100%);
}
html.theme-dark .compose-select:focus{background:var(--surface)}
.compose-cats{
  display:flex;flex-wrap:wrap;gap:8px;
}
.compose-cat{
  border:1px solid var(--line);background:var(--soft);color:var(--ink);
  border-radius:999px;padding:9px 13px;font-size:13px;font-weight:750;
  line-height:1.3;cursor:pointer;
  transition:transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.compose-cat:active{transform:scale(.97)}
.compose-cat.tone-violet{background:var(--violet);border-color:transparent;color:#5a3fd4}
.compose-cat.tone-mint{background:var(--mint);border-color:transparent;color:var(--mint-ink)}
.compose-cat.tone-peach{background:var(--peach);border-color:transparent;color:var(--peach-ink)}
.compose-cat.tone-sky{background:var(--sky);border-color:transparent;color:var(--sky-ink)}
.compose-cat.tone-pink{background:var(--pink);border-color:transparent;color:var(--pink-ink)}
.compose-cat.tone-yellow{background:var(--yellow);border-color:transparent;color:var(--yellow-ink)}
.compose-cat.tone-soft{background:var(--soft);color:var(--muted)}
.compose-cat.is-on{
  outline:2px solid var(--primary);outline-offset:1px;
  box-shadow:0 8px 18px rgba(109,74,255,.18);
  font-weight:850;
}
.compose-form textarea{
  width:100%;min-height:160px;resize:vertical;
  border:1px solid var(--line);border-radius:16px;
  padding:14px 15px;background:var(--soft);color:var(--ink);
  font:inherit;line-height:1.8;margin:0;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.compose-form textarea:focus{
  outline:none;border-color:rgba(109,74,255,.45);
  background:var(--surface);
  box-shadow:0 0 0 4px rgba(109,74,255,.12);
}
.compose-form textarea::placeholder{color:var(--muted);opacity:.85}
.compose-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:50px;border:0;border-radius:16px;
  background:var(--primary);color:#fff;font-size:15px;font-weight:850;
  box-shadow:0 12px 26px rgba(109,74,255,.28);cursor:pointer;
  transition:transform .12s ease, filter .15s ease;
}
.compose-submit:hover{filter:brightness(1.05)}
.compose-submit:active{transform:scale(.985)}
html.theme-dark .compose-rules{background:var(--peach);border-color:rgba(255,196,154,.15)}
html.theme-dark .compose-cat.tone-violet{color:var(--primary-2)}
html.theme-dark .compose-form textarea{background:var(--soft)}
html.theme-dark .compose-cat.is-on{box-shadow:0 8px 18px rgba(0,0,0,.25)}

.compose-input{
  width:100%;border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;font:inherit;font-size:14.5px;font-weight:650;
  background:var(--soft);color:var(--ink);
}
.compose-input:focus{
  outline:none;border-color:rgba(109,74,255,.45);background:var(--surface);
  box-shadow:0 0 0 4px rgba(109,74,255,.12);
}
.compose-check{
  display:flex;align-items:center;gap:10px;
  margin:2px 0 4px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;
}
.compose-check input{width:18px;height:18px;margin:0;accent-color:var(--primary)}

/* Invitation / stars */
.star-panel{margin:16px 0;padding:16px;border-radius:20px;background:var(--surface,#fff);border:1px solid rgba(0,0,0,.06)}
.invite-page .star-panel{
  background:
    radial-gradient(circle at 12% 0%,rgba(109,74,255,.14),transparent 42%),
    radial-gradient(circle at 100% 100%,rgba(167,139,250,.12),transparent 46%),
    linear-gradient(165deg,#fff 0%,#f7f4ff 100%);
  border:1px solid rgba(109,74,255,.12);
  box-shadow:0 10px 28px rgba(109,74,255,.08);
}
.invite-page .star-panel-title{
  background:linear-gradient(120deg,#6d4aff,#9b6cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.star-panel-title{margin:0 0 6px;font-size:16px;font-weight:900}
.star-panel-lead{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--muted)}
.star-invite-copy{margin:0 0 12px;font-size:13px;line-height:1.85;font-weight:650;color:var(--muted,#5b5670)}
.star-invite-copy p{margin:0 0 4px}
.star-invite-copy p:last-child{margin-bottom:0;font-weight:800;color:var(--text,#1f1635)}
.star-ledger-panel{padding:0;overflow:hidden}
.star-ledger-summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  list-style:none;cursor:pointer;padding:12px 14px;user-select:none;
}
.star-ledger-summary::-webkit-details-marker{display:none}
.star-ledger-summary .star-panel-title{margin:0;font-size:15px}
.star-ledger-chevron{
  width:0;height:0;flex-shrink:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid #8b7bb8;
  transition:transform .2s ease;
}
.star-ledger-panel[open] .star-ledger-chevron{transform:rotate(180deg)}
.star-ledger-panel .star-ledger-list{padding:0 12px 12px}
.invite-ref-hero{
  margin:0;padding:10px 12px;border-radius:16px;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.2),transparent 42%),
    linear-gradient(135deg,#7c5cff 0%,#6d4aff 55%,#5b3fd4 100%);
  color:#fff;box-shadow:0 8px 20px rgba(109,74,255,.22);
  display:flex;flex-direction:column;gap:8px;
}
.invite-ref-hero__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.invite-ref-hero__kicker{
  display:inline-block;margin:0;padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:800;background:rgba(255,255,255,.18);opacity:1;
}
.invite-ref-hero__title{margin:0;font-size:13px;font-weight:900;color:#fff}
.invite-ref-hero__lead{margin:0;flex:1 1 100%;font-size:11px;line-height:1.5;font-weight:650;opacity:.9}
.invite-ref-hero__row{display:flex;align-items:stretch;gap:6px}
.invite-ref-hero__phone{
  flex:1;min-width:0;margin:0!important;height:40px;
  background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.28)!important;
  border-radius:11px!important;overflow:hidden;box-shadow:none!important;
}
.invite-ref-hero__phone .login-phone-code{
  background:rgba(255,255,255,.12)!important;color:#fff!important;border:0!important;
  font-size:11px!important;padding:0 8px!important;
}
.invite-ref-hero__phone input{
  background:transparent!important;color:#fff!important;border:0!important;
  font-size:13px!important;font-weight:800;padding:0 10px!important;min-height:0!important;height:100%;
}
.invite-ref-hero__phone input::placeholder{color:rgba(255,255,255,.55)}
.invite-ref-hero__btn{
  flex:0 0 auto;border:0;border-radius:11px;padding:0 14px;cursor:pointer;height:40px;
  background:#fff!important;color:#6d4aff!important;font-size:12px;font-weight:900;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.invite-done-card{
  display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg,rgba(109,74,255,.12),rgba(167,139,250,.1));
  border:1px solid rgba(109,74,255,.18);font-size:12.5px;font-weight:700;color:#3f3470;
}
.invite-done-card__ico{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:#6d4aff;color:#fff;font-weight:900;font-size:12px;
}
.invite-done-card p{margin:0}
.invite-done-card strong{font-weight:900;unicode-bidi:plaintext}
html.theme-dark .invite-page .star-panel{
  background:
    radial-gradient(circle at 12% 0%,rgba(109,74,255,.22),transparent 42%),
    radial-gradient(circle at 100% 100%,rgba(167,139,250,.12),transparent 46%),
    linear-gradient(165deg,#221f35 0%,#1a1730 100%);
  border-color:rgba(255,255,255,.08);
}
html.theme-dark .star-invite-copy p:last-child{color:#e8e2ff}
html.theme-dark .invite-done-card{color:#e8e2ff;border-color:rgba(255,255,255,.1)}
.star-mission-list{display:flex;flex-direction:column;gap:10px}
.star-mission{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:16px;background:rgba(109,74,255,.06)}
.star-mission.is-claimed{opacity:.72}
.star-mission-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.star-mission-body strong{font-size:14px}
.star-mission-body small{font-size:12px;color:var(--muted);font-weight:700}
.star-mission-hint{font-size:12px;color:var(--muted)}
.star-mission-badge{font-size:12px;font-weight:800;white-space:nowrap;color:var(--mint-ink,#067647)}
.star-mission-badge--wait{color:var(--muted)}
.star-wheel-panel{
  position:relative;overflow:hidden;
  padding:22px 16px 24px;border:0;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,196,77,.34),transparent 38%),
    radial-gradient(circle at 88% 100%,rgba(109,74,255,.2),transparent 42%),
    radial-gradient(circle at 50% 55%,rgba(255,255,255,.55),transparent 55%),
    linear-gradient(165deg,#fff9ef 0%,#f4f0ff 48%,#eef7ff 100%);
  box-shadow:0 14px 36px rgba(74,52,140,.1);
}
.star-wheel-panel:before{
  content:"";position:absolute;inset:-20% -10% auto;height:55%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.7),transparent 70%);
}
.star-wheel-head{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px;
}
.star-wheel-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 12px;border-radius:999px;font-size:11px;font-weight:800;
  color:#7c3aed;background:rgba(124,58,237,.1);letter-spacing:.02em;
}
.star-wheel-title{
  margin:0!important;font-size:22px;font-weight:900;letter-spacing:-.01em;
  background:linear-gradient(120deg,#5b21b6,#c2410c 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.star-wheel-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.star-wheel-stage{
  position:relative;width:min(320px,88vw);aspect-ratio:1;
  display:grid;place-items:center;
}
.star-wheel-glow{
  position:absolute;inset:-12%;border-radius:50%;pointer-events:none;z-index:0;
  background:
    conic-gradient(from 20deg,rgba(255,196,77,.25),rgba(109,74,255,.18),rgba(20,184,166,.16),rgba(255,196,77,.25));
  filter:blur(18px);opacity:.9;
  animation:starWheelGlow 8s ease-in-out infinite alternate;
}
@keyframes starWheelGlow{
  from{transform:scale(.96);opacity:.7}
  to{transform:scale(1.04);opacity:1}
}
.star-wheel-pointer{
  position:absolute;top:-2px;left:50%;z-index:5;
  width:28px;height:34px;transform:translateX(-50%);
  filter:drop-shadow(0 4px 6px rgba(190,24,93,.35));
}
.star-wheel-pointer i{
  display:block;width:100%;height:100%;
  background:linear-gradient(180deg,#fb7185,#e11d48 55%,#9f1239);
  clip-path:polygon(50% 100%,0 0,100% 0);
  border-radius:4px 4px 2px 2px;
}
.star-wheel-pointer:after{
  content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px rgba(225,29,72,.55);
}
.star-wheel-ring{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.55),
    inset 0 0 0 11px rgba(255,255,255,.22),
    inset 0 0 0 13px rgba(0,0,0,.06),
    0 0 0 6px rgba(255,255,255,.65),
    0 18px 40px rgba(61,40,120,.18);
}
.star-wheel{
  --n:10;width:100%;height:100%;border-radius:50%;position:relative;z-index:1;
  transition:transform 4.6s cubic-bezier(.12,.75,.18,1);
  will-change:transform;
  box-shadow:inset 0 0 28px rgba(0,0,0,.08);
}
.star-wheel.is-spinning{pointer-events:none}
.star-wheel-label{
  --mid:calc((var(--i) + .5) * 360deg / var(--n));
  --r:min(86px,25.5vw);
  position:absolute;left:50%;top:50%;
  width:0;height:0;
  transform:rotate(var(--mid));
  transform-origin:center center;
  pointer-events:none;
}
.star-wheel-label-text{
  position:absolute;left:0;top:0;
  display:block;
  width:max-content;max-width:8.8em;
  white-space:normal;
  font-size:clamp(11px,3.2vw,13px);font-weight:900;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  letter-spacing:.01em;line-height:1.2;text-align:center;
  transform:translate(-50%, -50%) translateY(calc(-1 * var(--r))) rotate(-90deg);
  transform-origin:center center;
}
.star-wheel-hub{
  position:absolute;inset:40%;border-radius:50%;z-index:3;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 32% 28%,#fff7d6,transparent 42%),
    linear-gradient(150deg,#ffe08a,#f0b429 52%,#d97706);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.62),
    0 6px 16px rgba(180,83,9,.35),
    inset 0 -6px 12px rgba(146,64,14,.25);
}
.star-wheel-hub span{
  width:28%;height:28%;border-radius:50%;
  background:rgba(255,255,255,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.star-wheel-btn{
  appearance:none;border:0;cursor:pointer;
  min-width:200px;padding:14px 28px;border-radius:999px;
  font-size:16px;font-weight:900;color:#fff;letter-spacing:.03em;
  background:linear-gradient(135deg,#8b5cf6 0%,#6d4aff 45%,#db2777 120%);
  box-shadow:
    0 10px 24px rgba(109,74,255,.35),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.star-wheel-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.star-wheel-btn:active{transform:translateY(1px)}
.star-wheel-btn[disabled]{opacity:.75;cursor:wait;transform:none;filter:none}
.star-wheel-done{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:min(260px,90%);padding:14px 18px;border-radius:18px;text-align:center;
  background:rgba(255,255,255,.72);border:1px solid rgba(109,74,255,.12);
  backdrop-filter:blur(6px);
}
.star-wheel-done-kicker{
  font-size:11px;font-weight:800;color:#7c3aed;letter-spacing:.04em;
}
.star-wheel-done strong{
  font-size:18px;font-weight:900;color:#1f1635;
}
.star-wheel-done-sub{font-size:12px;font-weight:700;color:var(--muted,#6b647c)}
.star-wheel-modal{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;
}
.star-wheel-modal[hidden]{display:none!important}
.star-wheel-modal-backdrop{
  position:absolute;inset:0;background:rgba(15,18,28,.55);backdrop-filter:blur(4px);
}
.star-wheel-modal-card{
  position:relative;z-index:1;width:min(340px,100%);
  padding:28px 22px 22px;border-radius:24px;text-align:center;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,196,77,.28),transparent 42%),
    radial-gradient(circle at 90% 100%,rgba(109,74,255,.16),transparent 48%),
    var(--surface,#fff);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  animation:starWheelPop .38s cubic-bezier(.2,1.2,.3,1);
}
@keyframes starWheelPop{
  from{opacity:0;transform:scale(.86) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.star-wheel-modal-ico{
  width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff;
  background:linear-gradient(145deg,#f0b429,#d97706);
  box-shadow:0 8px 20px rgba(240,180,41,.35);
}
.star-wheel-modal-ico.is-empty{background:linear-gradient(145deg,#94a3b8,#64748b);box-shadow:0 8px 20px rgba(100,116,139,.3)}
.star-wheel-modal-ico.is-coupon{background:linear-gradient(145deg,#a78bfa,#7c3aed);box-shadow:0 8px 20px rgba(124,58,237,.3)}
.star-wheel-modal-ico.is-retry{background:linear-gradient(145deg,#60a5fa,#2563eb);box-shadow:0 8px 20px rgba(37,99,235,.3)}
.star-wheel-modal-ico.is-win{background:linear-gradient(145deg,#fbbf24,#f59e0b)}
.star-wheel-modal-title{margin:0 0 8px;font-size:20px;font-weight:900}
.star-wheel-modal-msg{margin:0 0 10px;font-size:14px;line-height:1.7;color:var(--muted,#5b5670)}
.star-wheel-modal-code{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 14px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg,rgba(109,74,255,.1),rgba(255,196,77,.12));
  border:1px solid rgba(109,74,255,.16);
}
.star-wheel-modal-code[hidden]{display:none!important}
.star-wheel-modal-code-label{
  flex:0 0 auto;font-size:13px;font-weight:900;color:#3f3470;white-space:nowrap;
}
.star-wheel-modal-code-val{
  flex:1 1 auto;min-width:0;margin:0;padding:8px 12px;border-radius:12px;
  background:#fff;border:1px dashed rgba(109,74,255,.35);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;font-weight:900;letter-spacing:.04em;color:#1f1635;
  text-align:center;direction:ltr;user-select:all;
}
html.theme-dark .star-wheel-modal-code{
  background:linear-gradient(135deg,rgba(155,134,255,.16),rgba(255,196,77,.1));
  border-color:rgba(255,255,255,.08);
}
html.theme-dark .star-wheel-modal-code-label{color:#e8e2ff}
html.theme-dark .star-wheel-modal-code-val{
  background:rgba(255,255,255,.06);border-color:rgba(196,181,253,.35);color:#f5f2ff;
}
.star-wheel-modal-btn{min-width:140px}
body.star-wheel-modal-open{overflow:hidden}
html.theme-dark .star-wheel-panel{
  background:
    radial-gradient(circle at 12% 0%,rgba(255,196,77,.16),transparent 38%),
    radial-gradient(circle at 88% 100%,rgba(109,74,255,.22),transparent 42%),
    linear-gradient(165deg,#221f35 0%,#1a1730 55%,#151a28 100%);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
html.theme-dark .star-wheel-title{
  background:linear-gradient(120deg,#ddd6fe,#fdba74 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html.theme-dark .star-wheel-done{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);
}
html.theme-dark .star-wheel-done strong{color:#f5f2ff}
html.theme-dark .star-wheel-modal-card{box-shadow:0 24px 60px rgba(0,0,0,.55)}
html.theme-dark .star-wheel-label-text{text-shadow:0 1px 3px rgba(0,0,0,.65)}
.star-coupon-list,.star-ledger-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.star-coupon-list li,.star-ledger-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.03);font-size:13px}
.star-coupon-item{flex-direction:column;align-items:stretch!important;gap:10px!important}
.star-coupon-main{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.star-coupon-go{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:12px;font-size:12px;font-weight:800;text-decoration:none;
  color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d4aff);
}
.star-wheel-modal-link{display:inline-flex;margin:0 0 10px;min-width:160px;justify-content:center;text-decoration:none}
.star-wheel-modal-link[hidden]{display:none!important}
.up-achieve{
  margin:14px 0 18px;padding:18px 14px 16px;border-radius:22px;
  background:var(--surface,#fff);border:1px solid rgba(0,0,0,.06);
}
.up-achieve-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.up-achieve-title{margin:0;font-size:18px;font-weight:900}
.up-achieve-count{font-size:12px;font-weight:800;color:var(--muted)}
.up-achieve-sub{margin:0 0 12px;font-size:14px;font-weight:900;color:#2a2438}
.up-medal-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;
}
.up-medal-grid--row{grid-template-columns:repeat(3,minmax(0,1fr));}
.up-medal-more{
  display:block;margin:14px auto 0;text-align:center;font-size:13px;font-weight:800;
  color:#6d4aff;text-decoration:none;padding:10px 12px;border-radius:12px;
  background:rgba(109,74,255,.08);
}
.up-medal-more:hover{background:rgba(109,74,255,.14)}
.up-achieve-page{margin-top:8px}
.up-achieve-lead{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--muted,#6b647c)}
.nj-medal-toast{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(12px);
  z-index:140;background:#1f1635;color:#fff;padding:10px 16px;border-radius:999px;
  font-size:13px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 10px 28px rgba(15,23,42,.28);max-width:min(90vw,320px);text-align:center;
}
.nj-medal-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
html.theme-dark .up-medal-more{background:rgba(155,134,255,.14);color:#cbbdff}
.up-medal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:100%;padding:0;border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.up-medal:focus-visible{outline:2px solid #6d4aff;outline-offset:3px;border-radius:14px}
.up-medal-ico{
  width:88px;height:88px;border-radius:50%;overflow:hidden;
  background:#f3f4f6;box-shadow:0 6px 16px rgba(34,29,55,.08);
  display:grid;place-items:center;
}
.up-medal-ico img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.up-medal.is-off .up-medal-ico img{filter:grayscale(1) contrast(1.05) brightness(1.02);opacity:.85}
.up-medal.is-on .up-medal-ico{box-shadow:0 8px 18px rgba(240,180,41,.28);background:radial-gradient(circle at 50% 40%,rgba(255,214,120,.35),transparent 70%)}
.up-medal-name{font-size:12px;font-weight:900;line-height:1.35;color:#1f1635}
.up-medal-status{font-size:11px;font-weight:700;color:var(--muted,#6b647c)}
.up-medal.is-on .up-medal-status{color:#067647}

/* Medal detail / celebration modal (Yekzan-like) */
.nj-medal-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .22s ease}
.nj-medal-modal.is-open{opacity:1;pointer-events:auto}
.nj-medal-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.nj-medal-modal__card{
  position:relative;width:min(360px,100%);background:var(--surface,#fff);color:var(--text,#1f1a33);
  border-radius:16px;padding:18px 16px 14px;box-shadow:0 24px 64px rgba(15,23,42,.28);
  text-align:center;overflow:hidden;transform:translateY(12px) scale(.96);transition:transform .24s ease;
}
.nj-medal-modal.is-open .nj-medal-modal__card{transform:none}
.nj-medal-modal__x{
  position:absolute;top:8px;left:8px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;
  background:transparent;color:#8b8499;font-size:22px;line-height:1;cursor:pointer;
}
.nj-medal-modal__ribbon{
  position:absolute;top:18px;right:-34px;z-index:2;width:140px;transform:rotate(38deg);
  background:linear-gradient(90deg,#ff4d8d,#ff8a5c);color:#fff;font-size:12px;font-weight:900;
  padding:6px 0;box-shadow:0 6px 14px rgba(255,77,141,.35);pointer-events:none;
}
.nj-medal-modal__ribbon span{display:block}
.nj-medal-modal__stage{position:relative;display:grid;place-items:center;min-height:220px;margin:4px 0 2px}
.nj-medal-modal__confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.nj-medal-modal__img{width:220px;height:220px;object-fit:contain;position:relative;z-index:0;margin:8px 0}
.nj-medal-modal__img.is-off{filter:grayscale(1) contrast(.95);opacity:.88}
.nj-medal-modal.is-earned .nj-medal-modal__img{filter:none;opacity:1;animation:njMedalPop .55s cubic-bezier(.2,1.2,.3,1)}
@keyframes njMedalPop{0%{transform:scale(.72);opacity:.2}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.nj-medal-modal__title{margin:6px 16px 0;font-size:15px;font-weight:900}
.nj-medal-modal__date{
  display:inline-block;margin:10px auto 0;padding:4px 12px;border-radius:999px;
  background:#e5f8fa;color:#00becc;font-size:12px;font-weight:700;
}
.nj-medal-modal__desc{margin:10px 16px 0;font-size:13px;line-height:1.75;color:var(--muted,#6c6c6c)}
.nj-medal-modal__actions{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 8px 6px;flex-wrap:wrap}
.nj-medal-modal__close{min-width:120px;justify-content:center}
.nj-medal-modal__share{min-width:120px;justify-content:center;color:#6d4aff;font-weight:800}
.nj-medal-modal__share[hidden],
.nj-medal-modal__date[hidden],
.nj-medal-modal__ribbon[hidden],
.nj-medal-modal__confetti[hidden]{display:none!important}
.nj-medal-modal.is-surprise .nj-medal-modal__card{
  box-shadow:0 28px 70px rgba(109,74,255,.28),0 0 0 1px rgba(255,214,120,.35);
}
html.theme-dark .nj-medal-modal__card{background:var(--surface,#1a1625);border:1px solid rgba(255,255,255,.08)}
html.theme-dark .nj-medal-modal__date{background:rgba(0,190,204,.16);color:#5eead4}
html.theme-dark .nj-medal-modal__desc{color:#b7b0c8}
.star-medal-grid{margin-top:12px}
.star-medal-grid .up-medal-ico{width:72px;height:72px}
html.theme-dark .up-achieve{border-color:rgba(255,255,255,.08)}
html.theme-dark .up-achieve-sub,
html.theme-dark .up-medal-name{color:#f5f2ff}
html.theme-dark .up-medal-ico{background:rgba(255,255,255,.06)}
.star-ledger-list .is-plus{color:#067647;font-weight:900}
.star-ledger-list .is-minus{color:#b42318;font-weight:900}
html.theme-dark .star-panel{border-color:rgba(255,255,255,.08)}
html.theme-dark .star-mission{background:rgba(155,134,255,.12)}
.invite-page{max-width:520px;margin:0 auto}
.invite-hero{
  background:
    radial-gradient(circle at 8% 20%,rgba(255,196,77,.28),transparent 42%),
    radial-gradient(circle at 92% 80%,rgba(109,74,255,.22),transparent 48%),
    linear-gradient(160deg,#fff 0%,#f3efff 100%);
  border-color:rgba(109,74,255,.14);
}
.invite-page .invite-code{
  background:linear-gradient(135deg,rgba(109,74,255,.1),rgba(167,139,250,.08));
  border:1px solid rgba(109,74,255,.28);
  font-size:14px;padding:10px 12px;border-radius:14px;
}
.invite-page .invite-copy{border-radius:14px;padding:0 12px;font-size:12px}
.invite-page .invite-code-row{margin-top:2px;min-height:42px}
.invite-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.invite-stat{
  display:flex;align-items:center;gap:10px;
  padding:12px 12px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.invite-stat--star{border-color:rgba(255,196,77,.35);background:linear-gradient(145deg,var(--surface),var(--yellow))}
.invite-stat--refs{border-color:rgba(109,74,255,.18);background:linear-gradient(145deg,var(--surface),var(--violet))}
.invite-stat-ico{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;background:var(--soft);
}
.invite-stat-ico img{display:block;width:36px;height:36px;object-fit:contain}
.invite-stat-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.invite-stat-val{font-size:1.35rem;font-weight:900;line-height:1.1;color:var(--ink)}
.invite-stat-label{font-size:12px;font-weight:800;color:var(--muted)}
.invite-share-head{margin-bottom:12px}
.invite-share-title{margin:0 0 6px;font-size:15px;font-weight:900;color:var(--ink)}
.invite-share-lead{margin:0;font-size:13px;line-height:1.65;font-weight:650;color:var(--muted)}
.invite-code-row{
  display:flex;align-items:stretch;gap:8px;direction:ltr;
}
.invite-code{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:14px 12px;border-radius:16px;
  font-size:17px;font-weight:900;letter-spacing:.04em;
  background:var(--soft);border:1px dashed rgba(109,74,255,.35);
  color:var(--primary);font-family:inherit;
}
.invite-copy{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 14px;border:0;border-radius:16px;cursor:pointer;
  background:var(--primary);color:#fff;font-size:13px;font-weight:850;
  box-shadow:0 8px 20px rgba(109,74,255,.22);
  transition:transform .12s ease, filter .15s ease;
}
.invite-copy:active{transform:scale(.97)}
.invite-copy svg{flex-shrink:0}
.invite-form .invite-phone{margin-bottom:0}
.invite-done strong{font-weight:900;unicode-bidi:plaintext}
.invite-tips{
  padding:16px;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.invite-tips-title{
  margin:0 0 12px;font-size:15px;font-weight:900;color:var(--ink);
}
.invite-tip{
  border:1px solid var(--line);border-radius:16px;
  background:var(--soft);overflow:hidden;
}
.invite-tip + .invite-tip{margin-top:8px}
.invite-tip[open]{background:var(--surface);border-color:rgba(109,74,255,.2)}
.invite-tip-sum{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;font-size:14px;font-weight:850;color:var(--ink);
  cursor:pointer;list-style:none;
}
.invite-tip-sum::-webkit-details-marker{display:none}
.invite-tip-sum::after{
  content:'';margin-inline-start:auto;width:8px;height:8px;
  border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease;
  flex-shrink:0;
}
.invite-tip[open] .invite-tip-sum::after{transform:rotate(-135deg);margin-top:4px}
.invite-tip-badge{
  flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--yellow);color:var(--yellow-ink, #8a6a00);
  font-size:14px;font-weight:900;
}
.invite-tip-badge--mint{background:var(--mint);color:var(--mint-ink)}
.invite-tip-badge--sky{background:var(--sky);color:var(--sky-ink)}
.invite-tip-body{
  margin:0;padding:0 14px 14px 52px;
  font-size:13.5px;line-height:1.75;font-weight:650;color:var(--muted);
}
html.theme-dark .invite-hero{
  background:
    radial-gradient(circle at 8% 20%,rgba(255,196,77,.16),transparent 42%),
    radial-gradient(circle at 92% 80%,rgba(109,74,255,.2),transparent 48%),
    linear-gradient(160deg,#221f35 0%,#1a1730 100%);
}
html.theme-dark .invite-stat--star{background:linear-gradient(145deg,var(--surface),rgba(255,196,77,.12))}
html.theme-dark .invite-stat--refs{background:linear-gradient(145deg,var(--surface),rgba(109,74,255,.12))}
html.theme-dark .invite-code{background:rgba(109,74,255,.14)}
html.theme-dark .invite-page .invite-code{background:rgba(109,74,255,.16)}

.q-search-toggle{
  width:46px;height:46px;flex-shrink:0;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--muted);display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--shadow-sm);
  transition:color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
}
.q-search-toggle:hover{color:var(--primary);border-color:rgba(109,74,255,.28)}
.q-search-toggle.is-on{
  color:#fff;background:var(--primary);border-color:transparent;
  box-shadow:0 8px 18px rgba(109,74,255,.28);
}
.q-search-toggle:active{transform:scale(.96)}
.q-search-toggle[hidden]{display:none!important}

.q-search-panel{
  margin:0 0 8px;
  overflow:visible;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  animation:qSearchIn .18s ease;
}
.q-search-panel[hidden]{display:none!important}
@keyframes qSearchIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.q-search{
  display:block;
  margin:0;padding:0;
  background:transparent;border:0;border-radius:0;box-shadow:none;
}
.q-search-field{
  display:flex;align-items:center;gap:6px;
  padding:0;min-height:0;
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--line);
  transition:border-color .15s ease;
}
html.theme-dark .q-search-field{background:transparent}
.q-search-field:focus-within{
  border-bottom-color:rgba(109,74,255,.55);
  box-shadow:none;
}
.q-search-input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:14px;font-weight:650;color:var(--ink);padding:8px 0;
}
.q-search-input::placeholder{color:var(--muted);opacity:.9}
.q-search-clear{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--muted);text-decoration:none;flex-shrink:0;
}
.q-search-clear:hover{background:var(--soft);color:var(--ink)}
.q-search-submit{
  width:36px;height:36px;flex-shrink:0;margin:0;padding:0;border:0;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--primary);
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.q-search-submit:hover{background:rgba(109,74,255,.1)}
.q-search-submit:active{transform:scale(.96)}
.q-search-btn{display:none!important}
.q-search-hint{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted)}
/* Dream interpretation — night-sky polish */
.dream-page{margin:0 0 8px}
.dream-hero{
  --dream-glow: color-mix(in srgb, var(--primary) 18%, transparent);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:18px;
  margin:0 0 24px;padding:22px 18px 18px;
  border-radius:28px;
  border:1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  background:
    radial-gradient(ellipse 90% 70% at 92% 8%, var(--dream-glow), transparent 55%),
    radial-gradient(ellipse 60% 50% at 8% 90%, color-mix(in srgb, #7eb8ff 10%, transparent), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--surface-2) 55%, var(--surface)), var(--surface));
  box-shadow:var(--shadow-sm);
  animation:dream-hero-in .55s cubic-bezier(.2,.8,.2,1) both;
}
html.theme-dark .dream-hero{
  --dream-glow: rgba(155,134,255,.2);
  background:
    radial-gradient(ellipse 90% 70% at 92% 8%, var(--dream-glow), transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 85%, rgba(90,140,220,.12), transparent 50%),
    linear-gradient(165deg, #221c34, var(--surface));
}
.dream-hero-stars{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, color-mix(in srgb, var(--ink) 28%, transparent), transparent),
    radial-gradient(1px 1px at 28% 48%, color-mix(in srgb, var(--primary) 45%, transparent), transparent),
    radial-gradient(1.4px 1.4px at 48% 16%, color-mix(in srgb, var(--ink) 22%, transparent), transparent),
    radial-gradient(1px 1px at 68% 38%, color-mix(in srgb, var(--primary) 40%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 82% 58%, color-mix(in srgb, var(--ink) 18%, transparent), transparent),
    radial-gradient(1px 1px at 18% 72%, color-mix(in srgb, var(--primary) 30%, transparent), transparent);
}
html.theme-dark .dream-hero-stars{opacity:.75}
.dream-hero-top{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.dream-hero-copy{min-width:0}
.dream-kicker{
  margin:0 0 8px;font-size:11px;font-weight:750;color:var(--primary);
  letter-spacing:.06em;
}
.dream-title{
  margin:0 0 6px;font-size:clamp(1.4rem,4.5vw,1.65rem);font-weight:900;
  letter-spacing:-.03em;line-height:1.2;color:var(--ink);
}
.dream-sub{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted);font-weight:550;max-width:28ch}
.dream-hero-moon{
  position:relative;z-index:1;
  flex-shrink:0;width:56px;height:56px;display:grid;place-items:center;
  border-radius:50%;
  color:var(--primary);
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 55%, transparent), transparent 45%),
    color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), 0 8px 24px color-mix(in srgb, var(--primary) 16%, transparent);
  animation:dream-moon-float 5.5s ease-in-out infinite;
}
.dream-search{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:4px;
  margin:0;padding:5px 5px 5px 14px;
  min-height:52px;border-radius:999px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 85%, var(--primary));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
html.theme-dark .dream-search{
  background:rgba(255,255,255,.05);
  box-shadow:none;
}
.dream-search:focus-within{
  border-color:color-mix(in srgb, var(--primary) 50%, var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
  background:var(--surface);
}
.dream-search-ico{
  display:grid;place-items:center;color:var(--muted);flex-shrink:0;
  transition:color .15s ease;
}
.dream-search:focus-within .dream-search-ico{color:var(--primary)}
.dream-search-input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:14.5px;font-weight:550;color:var(--ink);padding:10px 6px;
}
.dream-search-input::placeholder{color:var(--muted);opacity:.72;font-weight:500}
.dream-search-input::-webkit-search-cancel-button{display:none}
.dream-search-clear{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);text-decoration:none;flex-shrink:0;
  transition:background .15s ease, color .15s ease;
}
.dream-search-clear:hover{background:var(--violet);color:var(--ink)}
.dream-search-btn{
  width:42px;height:42px;border:0;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--ink);color:#fff;
  box-shadow:0 6px 16px rgba(25,23,42,.18);
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.dream-search-btn:hover{opacity:.92;box-shadow:0 8px 20px rgba(25,23,42,.22)}
.dream-search-btn:active{transform:scale(.96)}
html.theme-dark .dream-search-btn{
  background:var(--primary);color:#120f1c;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.dream-search-hint{
  margin:0 0 14px;padding:10px 14px;border-radius:14px;
  font-size:13px;font-weight:650;color:var(--muted);line-height:1.5;
  background:color-mix(in srgb, var(--violet) 55%, var(--soft));
  border:1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
}
.dream-search-hint--soft{color:var(--ink);font-weight:700}

.dream-alpha-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 14px;
}
.dream-alpha-title{
  margin:0;font-size:13px;font-weight:800;color:var(--ink);
  letter-spacing:.01em;
}
.dream-alpha-meta{
  margin:0;font-size:12px;font-weight:600;color:var(--muted);
}

.dream-alpha-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
@media(min-width:420px){
  .dream-alpha-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
}
@media(min-width:560px){
  .dream-alpha-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
}
.dream-letter{
  aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background:
    radial-gradient(130% 100% at 50% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%),
    var(--surface);
  color:var(--ink);text-decoration:none;
  box-shadow:0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, var(--shadow-sm);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  animation:dream-tile-in .45s cubic-bezier(.2,.8,.2,1) both;
}
.dream-letter:nth-child(1){animation-delay:.02s}.dream-letter:nth-child(2){animation-delay:.04s}
.dream-letter:nth-child(3){animation-delay:.06s}.dream-letter:nth-child(4){animation-delay:.08s}
.dream-letter:nth-child(5){animation-delay:.1s}.dream-letter:nth-child(6){animation-delay:.12s}
.dream-letter:nth-child(7){animation-delay:.14s}.dream-letter:nth-child(8){animation-delay:.16s}
.dream-letter:nth-child(n+9){animation-delay:.18s}
html.theme-dark .dream-letter{
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(155,134,255,.12), transparent 60%),
    var(--surface);
  box-shadow:none;
}
.dream-letter:hover{
  transform:translateY(-3px) scale(1.02);
  background:linear-gradient(160deg, var(--ink), color-mix(in srgb, var(--ink) 82%, var(--primary)));
  border-color:transparent;
  color:#fff;
  box-shadow:0 12px 28px rgba(25,23,42,.16);
}
html.theme-dark .dream-letter:hover{
  background:linear-gradient(160deg, var(--primary), var(--primary-2));
  color:#120f1c;
  box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.dream-letter:active{transform:scale(.96)}
.dream-letter-glyph{
  font-size:clamp(1.4rem,4.5vw,1.8rem);
  font-weight:800;line-height:1;
  font-family:"IRANSansWeb",Tahoma,Arial,sans-serif;
  letter-spacing:-.02em;
}

.dream-results{display:flex;flex-direction:column;gap:9px}
.dream-result-card{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;min-height:60px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);text-decoration:none;
  box-shadow:0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
html.theme-dark .dream-result-card{box-shadow:none}
.dream-result-card:hover{
  transform:translateX(-2px);
  background:color-mix(in srgb, var(--violet) 40%, var(--surface));
  border-color:color-mix(in srgb, var(--primary) 28%, var(--line));
  box-shadow:var(--shadow-sm);
}
.dream-result-card:hover .dream-result-chevron{opacity:1;color:var(--primary);transform:translateX(-2px)}
.dream-result-card:hover .dream-result-mark{
  background:var(--primary);color:#fff;
}
html.theme-dark .dream-result-card:hover .dream-result-mark{color:#120f1c}
.dream-result-mark{
  width:38px;height:38px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--violet);color:var(--primary);
  font-size:15px;line-height:1;
  transition:background .16s ease, color .16s ease;
}
.dream-result-card strong{
  flex:1;min-width:0;font-size:14.5px;font-weight:750;line-height:1.45;
}
.dream-result-chevron{
  color:var(--muted);flex-shrink:0;opacity:.45;
  transition:opacity .16s ease, color .16s ease, transform .16s ease;
}

.dream-detail{
  margin:0;padding:22px 18px 20px;border-radius:24px;
  border:1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  background:
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 55%),
    var(--surface);
  box-shadow:var(--shadow-sm);
  animation:dream-hero-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.dream-detail-kicker{
  margin:0 0 8px;font-size:11px;font-weight:750;color:var(--primary);letter-spacing:.05em;
}
.dream-detail-title{
  margin:0 0 14px;font-size:clamp(1.25rem,4vw,1.5rem);font-weight:900;
  letter-spacing:-.02em;line-height:1.3;color:var(--ink);
}
.dream-detail-body{
  margin:0;font-size:15px;line-height:2;color:var(--ink);font-weight:500;
  text-align:justify;
}
.dream-list-head{margin:0 0 14px}
.dream-list-title{margin:0;font-size:13px;font-weight:750;color:var(--muted)}

@keyframes dream-hero-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes dream-tile-in{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:none}
}
@keyframes dream-moon-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@media (prefers-reduced-motion:reduce){
  .dream-hero,.dream-letter,.dream-detail{animation:none}
  .dream-hero-moon{animation:none}
}

/* Online games hub — arcade lobby */
.games-page{margin:0 0 10px}
.games-hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:16px;
  margin:0 0 18px;padding:22px 18px 16px;
  border-radius:30px;
  border:1px solid color-mix(in srgb, var(--mint-ink) 14%, var(--line));
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--mint) 55%, var(--surface)) 0%,
      var(--surface) 42%,
      color-mix(in srgb, var(--peach) 40%, var(--surface)) 100%);
  box-shadow:var(--shadow);
  animation:games-in .55s cubic-bezier(.2,.85,.2,1) both;
}
html.theme-dark .games-hero{
  background:
    linear-gradient(155deg, rgba(26,51,41,.9) 0%, var(--surface) 45%, rgba(58,42,34,.75) 100%);
}
.games-hero-orb{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px);
}
.games-hero-orb--a{
  width:140px;height:140px;top:-48px;left:-36px;
  background:radial-gradient(circle, color-mix(in srgb, var(--mint-ink) 28%, transparent), transparent 70%);
  animation:games-orb 7s ease-in-out infinite;
}
.games-hero-orb--b{
  width:110px;height:110px;bottom:-40px;right:-20px;
  background:radial-gradient(circle, color-mix(in srgb, var(--peach-ink) 22%, transparent), transparent 70%);
  animation:games-orb 8.5s ease-in-out infinite reverse;
}
.games-hero-dots{
  position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%, color-mix(in srgb, var(--ink) 25%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 72% 22%, color-mix(in srgb, var(--mint-ink) 40%, transparent), transparent),
    radial-gradient(1.4px 1.4px at 58% 68%, color-mix(in srgb, var(--peach-ink) 35%, transparent), transparent),
    radial-gradient(1px 1px at 30% 78%, color-mix(in srgb, var(--ink) 18%, transparent), transparent);
}
.games-hero-top{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.games-hero-copy{min-width:0;flex:1}
.games-kicker{
  margin:0 0 8px;font-size:11px;font-weight:800;color:var(--mint-ink);
  letter-spacing:.07em;text-transform:none;
}
.games-title{
  margin:0 0 8px;font-size:clamp(1.55rem,5vw,1.85rem);font-weight:900;
  letter-spacing:-.04em;line-height:1.15;color:var(--ink);
}
.games-sub{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--muted);font-weight:600;max-width:28ch}
.games-hero-stats{display:flex;flex-wrap:wrap;gap:8px}
.games-stat{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:12px;font-weight:750;
}
.games-stat strong{font-weight:900}
.games-stat--soft{
  background:color-mix(in srgb, var(--surface) 75%, transparent);
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
html.theme-dark .games-stat--soft{background:rgba(255,255,255,.06)}
.games-hero-stage{
  position:relative;flex-shrink:0;width:78px;height:78px;
}
.games-pad{
  position:absolute;inset:8px;display:grid;place-items:center;
  border-radius:22px;color:var(--mint-ink);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--mint) 90%, #fff), var(--mint));
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--mint-ink) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--mint-ink) 12%, transparent);
  animation:games-bob 4s ease-in-out infinite;
}
html.theme-dark .games-pad{
  background:linear-gradient(145deg, color-mix(in srgb, var(--mint) 50%, var(--surface)), var(--mint));
}
.games-chip{
  position:absolute;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#fff;
  box-shadow:0 6px 14px rgba(25,23,42,.18);
}
.games-chip--1{
  top:0;right:0;background:var(--peach-ink);
  animation:games-chip 3.2s ease-in-out infinite;
}
.games-chip--2{
  bottom:2px;left:0;background:var(--sky-ink);
  animation:games-chip 3.8s ease-in-out infinite .4s;
}
.games-tip{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin:0;padding:8px 12px 8px 8px;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--muted);line-height:1.4;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.games-tip-ico{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;color:var(--peach-ink);background:var(--peach);
}

.games-featured{
  position:relative;display:block;margin:0 0 20px;
  border-radius:26px;overflow:hidden;text-decoration:none;color:#fff;
  box-shadow:0 16px 40px rgba(25,23,42,.14);
  animation:games-in .5s cubic-bezier(.2,.85,.2,1) .05s both;
  transition:transform .2s ease, box-shadow .2s ease;
}
.games-featured:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(25,23,42,.2)}
.games-featured-media{
  position:relative;display:block;aspect-ratio:16/10;
  background:linear-gradient(135deg,#1a3329,#3a2a22);
}
.games-featured-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .35s ease;
}
.games-featured:hover .games-featured-media img{transform:scale(1.07)}
.games-featured-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(25,23,42,.05) 20%, rgba(25,23,42,.72) 100%),
    linear-gradient(90deg, rgba(22,112,82,.25), transparent 55%);
}
.games-featured-badge{
  position:absolute;top:12px;right:12px;
  padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:800;color:var(--ink);
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.games-featured-play{
  position:absolute;left:50%;top:46%;
  width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--ink);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  transition:transform .2s ease, background .2s ease;
}
.games-featured:hover .games-featured-play{transform:scale(1.08);background:#fff}
.games-featured-meta{
  position:absolute;right:0;left:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:16px 16px 14px;
}
.games-featured-meta strong{
  font-size:1.1rem;font-weight:900;line-height:1.3;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.games-featured-meta > span{
  flex-shrink:0;padding:7px 12px;border-radius:999px;
  font-size:12px;font-weight:800;color:var(--ink);
  background:var(--mint);
}

.games-head{margin:0 0 12px}
.games-head-title{margin:0;font-size:13px;font-weight:800;color:var(--muted)}

.games-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
.games-tile{
  --tile-accent:var(--mint);
  --tile-ink:var(--mint-ink);
  --delay:0ms;
  display:flex;flex-direction:column;gap:8px;
  text-decoration:none;color:var(--ink);
  animation:games-in .45s cubic-bezier(.2,.85,.2,1) both;
  animation-delay:var(--delay);
}
.games-tone-mint{--tile-accent:var(--mint);--tile-ink:var(--mint-ink)}
.games-tone-peach{--tile-accent:var(--peach);--tile-ink:var(--peach-ink)}
.games-tone-sky{--tile-accent:var(--sky);--tile-ink:var(--sky-ink)}
.games-tone-pink{--tile-accent:var(--pink);--tile-ink:var(--pink-ink)}
.games-tone-yellow{--tile-accent:var(--yellow);--tile-ink:var(--yellow-ink)}
.games-tile-media{
  position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;
  background:var(--tile-accent);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.games-tile:hover .games-tile-media{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 14px 30px rgba(49,35,94,.14);
}
.games-tile-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease;
}
.games-tile:hover .games-tile-media img{transform:scale(1.06)}
.games-tile-play{
  position:absolute;bottom:10px;left:10px;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  opacity:.92;transition:transform .18s ease, opacity .18s ease;
}
.games-tile:hover .games-tile-play{transform:scale(1.08);opacity:1}
.games-tile-title{
  margin:0 2px;font-size:13px;font-weight:800;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.games-pager{margin-top:18px}

@keyframes games-in{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes games-bob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-6px) rotate(2deg)}
}
@keyframes games-orb{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(10px,-8px)}
}
@keyframes games-chip{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){
  .games-hero,.games-featured,.games-tile{animation:none}
  .games-pad,.games-chip,.games-hero-orb{animation:none}
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.dlg-card--answer .dlg-foot{justify-content:flex-end}
.dlg-card--answer .dlg-actions:empty{display:none}
html.theme-dark .dlg-card:not(.dlg-card--feed):not(.dlg-card--qa):not(.dlg-card--qa-answer){
  background:var(--surface);
}

button.dlg-report{
  display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;
  color:var(--muted);padding:4px;margin:0;cursor:pointer;font:inherit;line-height:1;
  border-radius:10px;
}
button.dlg-report:hover{color:var(--ink);background:var(--soft)}

/* legacy profile classes kept for blocked page */
.user-profile-head{text-align:center;padding:8px 0 18px}
.user-profile-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--line);background:var(--soft)}
img[src*="/avatars/defaults/"]{background:var(--soft)}
.user-profile-name{font-size:1.35rem;margin:12px 0 6px;font-weight:900}
.user-profile-bio{margin:0 auto 12px;max-width:36ch;color:var(--muted);font-size:14px;line-height:1.6}
.user-profile-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.user-profile-stats{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:12px;font-size:13px}
.user-profile-stats a,.user-profile-stats span{color:var(--text);text-decoration:none}
.user-profile-stats strong{display:block;font-size:16px;font-weight:900;text-align:center}
.user-profile-hint{font-size:12px;color:var(--muted);margin:0 0 14px;text-align:center;line-height:1.5}
.top-actions .notif-btn{position:relative}
.top-actions .notif-dot{position:absolute;top:6px;left:6px;width:8px;height:8px;border-radius:50%;background:#e91e8c}

/* Notification prefs (profile/notifications) */
.npf-page{display:flex;flex-direction:column;gap:14px}
.npf-list{display:flex;flex-direction:column;gap:8px}
.npf-row{
  display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:16px;
  background:var(--soft);border:1px solid transparent;
  cursor:pointer;transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.npf-row:hover{border-color:rgba(109,74,255,.18);background:var(--surface)}
.npf-row:active{transform:scale(.992)}
.npf-ico{
  width:40px;height:40px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;
}
.npf-ico--follow{background:linear-gradient(135deg,#e91e8c,#c2185b)}
.npf-ico--like{background:linear-gradient(135deg,#e74c3c,#c0392b)}
.npf-ico--reply{background:linear-gradient(135deg,#3498db,#2980b9)}
.npf-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:start}
.npf-copy strong{font-size:14px;font-weight:850;color:var(--ink);line-height:1.35}
.npf-copy small{font-size:12px;font-weight:600;color:var(--muted);line-height:1.5}
.npf-switch{position:relative;flex-shrink:0;width:48px;height:28px}
.npf-switch input{
  position:absolute;inset:0;z-index:2;margin:0;opacity:0;cursor:pointer;
  width:100%;height:100%;
}
.npf-switch-ui{
  position:absolute;inset:0;border-radius:999px;
  background:#c9c4d6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
  transition:background .18s ease;
}
.npf-switch-ui::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(40,30,80,.22);
  transition:inset-inline-start .18s ease;
}
.npf-switch input:checked + .npf-switch-ui{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.npf-switch input:checked + .npf-switch-ui::after{
  inset-inline-start:calc(100% - 25px);
}
.npf-switch input:focus-visible + .npf-switch-ui{
  outline:2px solid var(--primary);outline-offset:3px;
}
html.theme-dark .npf-row{background:rgba(255,255,255,.04)}
html.theme-dark .npf-row:hover{background:rgba(255,255,255,.07)}
html.theme-dark .npf-switch-ui{background:#4a4558}

/* Notifications page */
.ntf-page{display:flex;flex-direction:column;gap:14px}
.ntf-hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-radius:22px;padding:18px 16px;
  background:
    radial-gradient(circle at 100% 0%,rgba(233,30,140,.14),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(109,74,255,.12),transparent 46%),
    linear-gradient(160deg,var(--surface) 0%,var(--violet) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.ntf-hero-copy{position:relative;z-index:1;min-width:0}
.ntf-kicker{margin:0 0 6px;font-size:12px;font-weight:800;color:var(--primary)}
.ntf-title{margin:0 0 6px;font-size:1.25rem;font-weight:900;line-height:1.35;color:var(--ink)}
.ntf-sub{margin:0;font-size:13px;line-height:1.7;color:var(--muted);max-width:34ch}
.ntf-hero-side{flex-shrink:0}
.ntf-hero-bell{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  background:rgba(255,255,255,.7);color:var(--primary);
  border:1px solid rgba(109,74,255,.12);box-shadow:var(--shadow-sm);
}
html.theme-dark .ntf-hero-bell{background:rgba(255,255,255,.06)}
.ntf-feed{display:flex;flex-direction:column;gap:10px}
.ntf-card{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
a.ntf-card:hover{
  transform:translateY(-1px);box-shadow:var(--shadow);
  border-color:rgba(109,74,255,.22);
}
.ntf-card.is-unread{
  background:
    linear-gradient(135deg,rgba(109,74,255,.06),transparent 55%),
    var(--surface);
  border-color:rgba(109,74,255,.2);
}
.ntf-avatar{
  position:relative;flex-shrink:0;
  width:48px;height:48px;border-radius:50%;overflow:visible;
}
.ntf-avatar img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;
  background:var(--soft);border:2px solid var(--surface);
}
.ntf-type{
  position:absolute;inset-inline-start:-2px;bottom:-2px;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--primary);color:#fff;border:2px solid var(--surface);
}
.ntf-type--follow{background:#e91e8c}
.ntf-type--like{background:#e74c3c}
.ntf-type--reply,
.ntf-type--advisor_reply{background:#3498db}
.ntf-type--admin_warning{background:#d97706;color:#fff}
.ntf-type--referral{background:#6d4aff}
.ntf-card--warning{
  align-items:flex-start;
  background:
    linear-gradient(135deg,rgba(245,158,11,.22),rgba(251,191,36,.1) 48%,transparent 72%),
    linear-gradient(180deg,#fff8eb 0%,#fff3d6 100%);
  border-color:rgba(217,119,6,.45);
  box-shadow:0 8px 22px rgba(217,119,6,.12);
}
.ntf-card--warning.is-unread{
  background:
    linear-gradient(135deg,rgba(245,158,11,.28),rgba(251,191,36,.14) 50%,transparent 75%),
    linear-gradient(180deg,#fff4dc 0%,#ffefc8 100%);
  border-color:rgba(180,83,9,.55);
}
.ntf-card--warning .ntf-text{
  display:block;
  -webkit-line-clamp:unset;
  overflow:visible;
  white-space:pre-wrap;
  word-break:break-word;
  color:#7c2d12;
}
.ntf-card--warning .ntf-meta{color:#92400e}
.ntf-card--warning .ntf-actor{color:#b45309}
.ntf-card--warning .ntf-unread{
  background:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.18);margin-top:6px;
}
html.theme-dark .ntf-card--warning{
  background:
    linear-gradient(135deg,rgba(245,158,11,.22),rgba(180,83,9,.12) 50%,transparent 75%),
    linear-gradient(180deg,#3a2a14 0%,#2d2112 100%);
  border-color:rgba(251,191,36,.35);
}
html.theme-dark .ntf-card--warning .ntf-text{color:#fde68a}
html.theme-dark .ntf-card--warning .ntf-meta{color:#fbbf24}
html.theme-dark .ntf-card--warning .ntf-actor{color:#fcd34d}
.up-bio-cta{
  display:inline-flex;margin-top:8px;font-size:12.5px;font-weight:800;
  color:var(--primary);text-decoration:none;
}
.up-bio-cta:hover{text-decoration:underline}
.up-hero{
  position:relative;
}
.up-card{
  position:relative;overflow:visible;
}
.up-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:88px;
  background:
    radial-gradient(circle at 90% 0%,rgba(109,74,255,.16),transparent 45%),
    linear-gradient(180deg,var(--violet),transparent);
  pointer-events:none;z-index:0;border-radius:22px 22px 0 0;
}
.up-card > *{position:relative;z-index:1}
.up-card > .up-bar{z-index:25}
.up-card > .up-hero{z-index:1}
.up-card > .up-stats{z-index:1}
.ntf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ntf-text{
  font-size:13px;font-weight:400;line-height:1.7;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ntf-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  font-size:12px;font-weight:650;color:var(--muted);
}
.ntf-actor{color:var(--primary);font-weight:750}
.ntf-dot{opacity:.6}
.ntf-unread{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:#e91e8c;box-shadow:0 0 0 4px rgba(233,30,140,.12);
}
.ntf-chevron{color:#b0abc0;flex-shrink:0;display:grid;place-items:center}
.ntf-pager{margin-top:4px}
html.theme-dark .ntf-card{background:var(--surface)}
html.theme-dark .ntf-hero{
  background:
    radial-gradient(circle at 100% 0%,rgba(233,30,140,.16),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(155,134,255,.14),transparent 46%),
    linear-gradient(160deg,var(--surface) 0%,#2a2438 100%);
}

/* About page */
.about-page{display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto}
.about-hero{
  position:relative;overflow:hidden;border-radius:24px;padding:28px 20px 24px;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.35),transparent 36%),
    linear-gradient(145deg,#4f36d9 0%,#7654f3 52%,#9d7cff 100%);
  color:#fff;box-shadow:0 18px 48px rgba(82,57,208,.2);
  text-align:start;
}
.about-hero-glow{
  position:absolute;inset:auto -18% -45% auto;width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.14);pointer-events:none;
}
.about-brand{
  position:relative;z-index:1;margin:0 0 10px;
  font-size:clamp(1.8rem,6vw,2.4rem);font-weight:900;letter-spacing:-.03em;line-height:1.15;
}
.about-hero-title{
  position:relative;z-index:1;margin:0 0 10px;
  font-size:1.05rem;font-weight:800;line-height:1.55;opacity:.96;max-width:28ch;
}
.about-hero-lead{
  position:relative;z-index:1;margin:0;font-size:13.5px;line-height:1.8;
  color:rgba(255,255,255,.88);max-width:40ch;
}
.about-intro{
  margin:0;padding:4px 2px;font-size:14.5px;line-height:1.9;font-weight:600;
  color:var(--ink);text-align:justify;text-justify:inter-word;
}
.about-timeline{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.about-step{
  display:grid;grid-template-columns:72px 1fr;gap:0;
  border-bottom:1px solid var(--line);
}
.about-step:last-child{border-bottom:0}
.about-step-year{
  display:flex;align-items:flex-start;justify-content:center;
  padding:18px 8px;font-size:13px;font-weight:900;color:var(--primary);
  background:var(--violet);border-inline-end:1px solid var(--line);
}
.about-step-body{padding:16px 14px 18px}
.about-step-body h2{
  margin:0 0 8px;font-size:15px;font-weight:900;color:var(--ink);
}
.about-step-body p{
  margin:0;font-size:13.5px;line-height:1.85;font-weight:600;color:var(--muted);
  text-align:justify;text-justify:inter-word;
}
.about-step-body a{color:var(--primary);font-weight:750;text-decoration:none}
.about-step-body a:hover{text-decoration:underline}
.about-panel{
  border-radius:18px;padding:16px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.about-panel h2{margin:0 0 8px;font-size:15px;font-weight:900;color:var(--ink)}
.about-panel p{
  margin:0;font-size:13.5px;line-height:1.85;font-weight:600;color:var(--muted);
  text-align:justify;text-justify:inter-word;
}
.about-panel a{color:var(--primary);font-weight:750;text-decoration:none}
.about-panel a:hover{text-decoration:underline}
.about-panel--mint{background:var(--mint);border-color:transparent}
.about-panel--mint h2,.about-panel--mint p{color:var(--mint-ink)}
.about-panel--mint a{color:var(--mint-ink);text-decoration:underline}
.about-panel--soft{background:var(--soft)}
.about-link{
  display:inline-flex;margin-top:12px;font-size:13.5px;font-weight:850;color:var(--mint-ink);
}
.about-vision{
  text-align:center;border-radius:22px;padding:22px 16px;
  background:
    radial-gradient(circle at 50% 0%,rgba(109,74,255,.14),transparent 55%),
    var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.about-vision-kicker{margin:0 0 6px;font-size:12px;font-weight:800;color:var(--primary)}
.about-vision-num{
  margin:0 0 8px;font-size:clamp(2rem,8vw,2.6rem);font-weight:900;
  letter-spacing:-.04em;color:var(--ink);line-height:1;
}
.about-vision-text{
  margin:0 auto;max-width:36ch;font-size:13.5px;line-height:1.8;font-weight:650;color:var(--muted);
}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.about-tile{
  display:flex;flex-direction:column;gap:6px;padding:14px;
  border-radius:18px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:transform .12s ease, box-shadow .15s ease;
}
.about-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.about-tile-ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--violet);color:var(--primary);margin-bottom:2px;
}
.about-tile strong{font-size:14px;font-weight:900;color:var(--ink)}
.about-tile span{font-size:12.5px;line-height:1.6;font-weight:650;color:var(--muted)}
.about-stores h2{margin:0 0 10px;font-size:15px;font-weight:900;color:var(--ink)}
.about-store-row{display:flex;flex-wrap:wrap;gap:8px}
.about-store-row a{
  display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;
  border-radius:999px;background:var(--soft);border:1px solid var(--line);
  font-size:13px;font-weight:800;color:var(--ink);text-decoration:none;
}
.about-store-row a:hover{background:var(--violet);color:var(--primary);border-color:transparent}
.about-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.about-cta .btn{width:100%;text-align:center}
@media (max-width:420px){
  .about-grid{grid-template-columns:1fr}
  .about-step{grid-template-columns:64px 1fr}
  .about-cta{grid-template-columns:1fr}
}
html.theme-dark .about-hero{
  background:linear-gradient(145deg,#3a2f6e 0%,#5a48a8 55%,#7a62c8 100%);
}
html.theme-dark .about-panel--mint{background:var(--mint);border-color:rgba(125,222,180,.12)}
html.theme-dark .about-step-year{background:var(--violet)}

/* Advisers page */
.adv-page{display:flex;flex-direction:column;gap:14px;max-width:720px;margin:0 auto}
.adv-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:22px 18px 20px;border-radius:24px;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.45),transparent 55%),
    linear-gradient(145deg,var(--surface) 20%,var(--violet) 100%);
  border:1px solid rgba(109,74,255,.14);
  box-shadow:0 12px 32px rgba(49,35,94,.08);
  animation:toolIn .4s cubic-bezier(.22,1,.36,1) both;
}
.adv-hero-glow{
  position:absolute;inset:-40% -20% auto auto;width:220px;height:220px;
  background:radial-gradient(circle,rgba(109,74,255,.22),transparent 70%);
  pointer-events:none;
}
.adv-kicker{
  position:relative;margin:0 0 6px;font-size:12px;font-weight:800;color:var(--primary);
}
.adv-title{
  position:relative;margin:0 0 8px;font-size:24px;font-weight:900;color:var(--ink);
  letter-spacing:-.02em;line-height:1.25;
}
.adv-lead{
  position:relative;margin:0 auto 14px;max-width:34ch;
  font-size:13.5px;line-height:1.75;font-weight:650;color:var(--muted);
}
.adv-stats{
  position:relative;display:inline-flex;gap:10px;justify-content:center;
}
.adv-stat{
  min-width:88px;padding:10px 14px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.65);border:1px solid rgba(109,74,255,.1);
}
.adv-stat strong{display:block;font-size:20px;font-weight:900;color:var(--ink);line-height:1.1}
.adv-stat span{display:block;margin-top:4px;font-size:11px;font-weight:750;color:var(--muted)}
.adv-filters{
  display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 4px;
}
.adv-filters::-webkit-scrollbar{display:none}
.adv-filter{
  appearance:none;flex-shrink:0;min-height:36px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:12.5px;font-weight:800;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.adv-filter:active{transform:scale(.97)}
.adv-filter.is-active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.adv-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.adv-card{
  --adv-a:var(--violet);
  --adv-b:var(--primary);
  --adv-ink:var(--primary);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:24px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(49,35,94,.07);
  animation:toolIn .35s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--delay,0ms);
  transition:transform .2s ease, box-shadow .2s ease;
}
.adv-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(49,35,94,.14);
}
.adv-card:hover .adv-portrait-frame img{transform:scale(1.06)}
.adv-card:hover .adv-portrait-ring{transform:rotate(28deg)}
.adv-card[hidden]{display:none!important}
.adv-tone-peach{--adv-a:#ffe0c8;--adv-b:#e8a05a;--adv-ink:var(--peach-ink)}
.adv-tone-mint{--adv-a:#c8f0dc;--adv-b:#5dcc9a;--adv-ink:var(--mint-ink)}
.adv-tone-sky{--adv-a:#cfe6ff;--adv-b:#7eb6e8;--adv-ink:var(--sky-ink)}
.adv-tone-yellow{--adv-a:#ffe9a8;--adv-b:#e8c85a;--adv-ink:var(--yellow-ink)}
.adv-tone-violet{--adv-a:#ddd4ff;--adv-b:#8a6cff;--adv-ink:var(--primary)}
.adv-tone-pink{--adv-a:#ffd6e6;--adv-b:#e889a8;--adv-ink:var(--pink-ink)}
.adv-media{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  min-height:148px;padding:18px 12px 0;overflow:visible;
}
.adv-media-bg{
  position:absolute;inset:0;border-radius:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(90% 120% at 15% 0%,rgba(255,255,255,.55),transparent 50%),
    linear-gradient(160deg,var(--adv-a) 0%,color-mix(in srgb,var(--adv-b) 35%,var(--surface)) 100%);
}
.adv-media-orb{
  position:absolute;width:140px;height:140px;border-radius:50%;
  right:-28px;top:-48px;overflow:hidden;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.55),transparent 65%);
  opacity:.85;pointer-events:none;z-index:0;
}
.adv-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;
  font-size:11px;font-weight:800;white-space:nowrap;
  background:rgba(255,255,255,.82);color:var(--adv-ink);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 4px 12px rgba(49,35,94,.08);
}
.adv-portrait{
  position:relative;z-index:1;width:108px;height:108px;
  margin-bottom:-36px;
  display:grid;place-items:center;
}
.adv-portrait-ring{
  position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--adv-b),#fff 35%,var(--adv-a) 55%,var(--adv-b));
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.adv-portrait-frame{
  position:relative;z-index:1;width:100px;height:100px;border-radius:50%;
  overflow:hidden;
  border:3px solid #fff;
  background:var(--soft);
  box-shadow:
    0 10px 24px rgba(49,35,94,.18),
    0 0 0 1px rgba(49,35,94,.04);
}
.adv-portrait-frame img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  filter:saturate(1.05) contrast(1.02);
}
.adv-body{
  display:flex;flex-direction:column;gap:5px;
  padding:44px 14px 16px;text-align:center;
  background:var(--surface);
  position:relative;z-index:0;
}
.adv-name{
  margin:0;font-size:14.5px;font-weight:900;color:var(--ink);line-height:1.4;
}
.adv-role{
  margin:0;font-size:11.5px;font-weight:800;color:var(--adv-ink);line-height:1.55;
}
.adv-bio{
  margin:2px 0 0;font-size:12px;line-height:1.7;font-weight:650;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
a.adv-card{color:inherit;text-decoration:none;cursor:pointer}
.adv-more{
  margin-top:6px;font-size:11.5px;font-weight:800;color:var(--adv-ink);opacity:.85;
}
.adv-profile{display:flex;flex-direction:column;gap:14px;max-width:720px;margin:0 auto}
.advp-hero{
  position:relative;overflow:hidden;text-align:center;padding:22px 18px 18px;border-radius:24px;
  background:
    radial-gradient(90% 120% at 15% 0%,rgba(255,255,255,.55),transparent 50%),
    linear-gradient(160deg,var(--adv-a,var(--violet)) 0%,color-mix(in srgb,var(--adv-b,var(--primary)) 35%,var(--surface)) 100%);
  border:1px solid var(--line);box-shadow:0 12px 32px rgba(49,35,94,.08);
}
.advp-glow{position:absolute;inset:-30% -10% auto auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%);pointer-events:none}
.advp-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.adv-tag-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;position:relative;z-index:2}
.adv-profile .adv-tag-row .adv-tag{position:static}
.adv-profile .adv-portrait,
.advp-portrait{width:120px;height:120px;margin:0 0 8px;margin-bottom:8px}
.advp-portrait .adv-portrait-frame{width:112px;height:112px}
.advp-name{position:relative;margin:8px 0 4px;font-size:22px;font-weight:900;color:var(--ink)}
.advp-role{position:relative;margin:0;font-size:13.5px;font-weight:800;color:var(--adv-ink,var(--primary))}
.advp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.advp-stat{
  text-align:center;padding:12px 8px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.advp-stat strong{display:block;font-size:1.25rem;font-weight:900;color:var(--ink);line-height:1.1}
.advp-stat span{display:block;margin-top:4px;font-size:11px;font-weight:750;color:var(--muted)}
.advp-card{
  padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.advp-card-title{margin:0 0 10px;font-size:14px;font-weight:900;color:var(--ink)}
.advp-bio{margin:0;font-size:13.5px;line-height:1.85;font-weight:650;color:var(--muted);white-space:pre-wrap}
.advp-muted{margin:0;font-size:13px;line-height:1.7;color:var(--muted);font-weight:650}
.advp-channels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.advp-channel{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--soft);
  color:inherit;text-decoration:none;font-weight:750;
}
.advp-channel:hover{border-color:rgba(109,74,255,.28);background:rgba(109,74,255,.06)}
.advp-channel-label{font-size:13px;font-weight:800;color:var(--ink)}
.advp-channel-value{font-size:12.5px;color:var(--muted)}
.advp-cta{display:grid;gap:8px;margin-top:2px}
.advp-cta .btn{width:100%;text-align:center}
html.theme-dark .advp-hero{border-color:rgba(155,134,255,.16)}
html.theme-dark .advp-stat,html.theme-dark .advp-card{background:var(--surface);border-color:rgba(155,134,255,.12)}
html.theme-dark .advp-channel{background:rgba(255,255,255,.04)}
.adv-empty{
  margin:8px 0;text-align:center;font-size:13.5px;font-weight:700;color:var(--muted);
}
.adv-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.adv-cta .btn{width:100%;text-align:center}
.adv-cta--stack{grid-template-columns:1fr;gap:10px;margin-top:16px}
.adv-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.adv-cta-row .btn{width:100%;text-align:center}
@media (max-width:420px){
  .adv-grid{grid-template-columns:1fr}
  .adv-cta{grid-template-columns:1fr}
  .adv-cta-row{grid-template-columns:1fr}
  .adv-title{font-size:22px}
  .adv-media{min-height:160px}
  .adv-card .adv-portrait{width:120px;height:120px;margin-bottom:-40px}
  .adv-card .adv-portrait-frame{width:112px;height:112px}
  .adv-body{padding-top:48px;text-align:center}
  .adv-body .adv-name,.adv-body .adv-role,.adv-body .adv-bio,.adv-body .adv-more{text-align:center}
  .adv-profile .adv-portrait,
  .advp-portrait{margin-bottom:8px}
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .adv-media-bg{background:linear-gradient(160deg,var(--adv-a),var(--surface))}
}
html.theme-dark .adv-hero{
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(155,134,255,.18),transparent 55%),
    linear-gradient(145deg,var(--surface) 20%,var(--surface-2) 100%);
}
html.theme-dark .adv-stat{background:rgba(255,255,255,.06);border-color:rgba(155,134,255,.12)}
html.theme-dark .adv-card{background:var(--surface);border-color:rgba(155,134,255,.12)}
html.theme-dark .adv-body{background:var(--surface)}
html.theme-dark .adv-portrait-frame{border-color:var(--surface-2)}
html.theme-dark .adv-tag{
  background:rgba(20,18,30,.72);color:#fff;border-color:rgba(255,255,255,.08);
}
html.theme-dark .adv-filter.is-active{background:var(--primary);border-color:var(--primary);color:#fff}

/* Support chat — fixed compose, scrollable thread */
html.sp-mode,body.sp-mode{overflow:hidden;height:100%;overscroll-behavior:none}
body.sp-mode .app{
  padding-bottom:0!important;
  min-height:100dvh;
}
body.sp-mode .shell{padding:0!important;max-width:none}
body.sp-mode .site-footer{display:none}

.sp-page{
  position:fixed;
  top:calc(var(--topbar-h) + var(--safe-top));
  left:0;right:0;bottom:0;
  z-index:40;
  display:flex;flex-direction:column;
  width:min(720px,100%);
  margin:0 auto;
  background:var(--bg);
}
@media (max-width:720px){
  .sp-page{bottom:calc(var(--nav-h) + var(--safe))}
  body.nj-hide-nav .sp-page{bottom:0}
}
.sp-top{
  flex-shrink:0;
  padding:12px 16px 10px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.sp-top-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-top-text strong{font-size:15px;font-weight:900;color:var(--ink)}
.sp-top-text span{font-size:12.5px;font-weight:650;color:var(--muted);line-height:1.5}
.sp-thread{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;flex-direction:column;gap:14px;
  padding:18px 14px 22px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 100% -10%,rgba(109,74,255,.07),transparent 55%),
    radial-gradient(ellipse 70% 45% at -5% 110%,rgba(125,222,180,.18),transparent 50%),
    radial-gradient(rgba(109,74,255,.045) 1.1px,transparent 1.1px);
  background-size:auto,auto,18px 18px;
}
.sp-row{
  display:flex;align-items:flex-end;gap:8px;width:100%;
  animation:spIn .28s cubic-bezier(.22,1,.36,1) both;
}
.sp-row--me{justify-content:flex-start}
.sp-row--them{justify-content:flex-end}
.sp-row:nth-child(2){animation-delay:.04s}
.sp-row:nth-child(3){animation-delay:.08s}
.sp-row:nth-child(4){animation-delay:.12s}
.sp-row:nth-child(5){animation-delay:.16s}
@keyframes spIn{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}
.sp-face{
  width:32px;height:32px;border-radius:11px;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#6d4aff 0%,#9b86ff 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(109,74,255,.28);
  border:2px solid rgba(255,255,255,.35);
}
.sp-empty{
  margin:auto;text-align:center;padding:28px 16px;color:var(--muted);
}
.sp-empty-ico{
  width:56px;height:56px;margin:0 auto 12px;border-radius:18px;
  display:grid;place-items:center;background:var(--violet);color:var(--primary);
}
.sp-empty strong{display:block;font-size:15px;font-weight:900;color:var(--ink);margin:0 0 6px}
.sp-empty p{margin:0 auto;max-width:28ch;font-size:13px;line-height:1.7;font-weight:600}
.sp-bubble{
  max-width:min(82%,360px);padding:11px 13px 8px;
  font-size:14px;line-height:1.75;position:relative;
}
.sp-bubble--me{
  background:linear-gradient(180deg,#ffffff 0%,#f7f5ff 100%);
  color:var(--ink);
  border:1px solid rgba(109,74,255,.12);
  border-radius:4px 18px 18px 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 6px 18px rgba(49,35,94,.07);
}
.sp-bubble--them{
  background:linear-gradient(155deg,#6340ef 0%,#7a5cff 48%,#9178ff 100%);
  color:#fff;
  border-radius:18px 4px 18px 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 10px 22px rgba(109,74,255,.3);
  border:0;
}
.sp-bubble-label{
  display:inline-flex;align-items:center;
  margin:0 0 7px;padding:3px 9px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.02em;
  background:rgba(255,255,255,.2);color:#fff;
  backdrop-filter:blur(4px);
}
.sp-bubble-text{
  margin:0;text-align:justify;text-justify:inter-word;
  white-space:pre-wrap;word-break:break-word;font-weight:650;
}
.sp-bubble-text a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sp-bubble-text p,.sp-bubble-text div{margin:0}
.sp-bubble-meta{
  display:flex;align-items:center;justify-content:flex-start;gap:5px;
  margin-top:7px;
}
.sp-bubble-time{
  font-size:10.5px;font-weight:700;letter-spacing:.01em;
  opacity:.55;
}
.sp-bubble-tick{opacity:.45;flex-shrink:0}
.sp-bubble--them .sp-bubble-time{opacity:.8;color:rgba(255,255,255,.95)}
.sp-bubble--me .sp-bubble-time{color:var(--muted);opacity:.85}
.sp-bubble--me .sp-bubble-tick{color:var(--primary);opacity:.7}
.sp-dock{
  flex-shrink:0;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.96) 40%);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(109,74,255,.08);
  box-shadow:0 -8px 28px rgba(49,35,94,.05);
}
html.theme-dark .sp-dock{
  background:linear-gradient(180deg,rgba(28,24,40,.75) 0%,rgba(28,24,40,.96) 40%);
  border-top-color:rgba(155,134,255,.1);
  box-shadow:0 -8px 28px rgba(0,0,0,.25);
}
.sp-compose{
  display:flex;align-items:flex-end;gap:10px;
  padding:8px 8px 8px 12px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(109,74,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 24px rgba(109,74,255,.08);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.sp-compose:focus-within{
  border-color:rgba(109,74,255,.38);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 3px rgba(109,74,255,.12),
    0 10px 28px rgba(109,74,255,.12);
}
.sp-compose-field{flex:1;min-width:0}
.sp-compose textarea{
  display:block;width:100%;min-height:44px;max-height:120px;resize:none;
  border:0;outline:none;background:transparent;padding:11px 6px;
  font:inherit;font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.55;
}
.sp-compose textarea::placeholder{color:var(--muted);opacity:.75}
.sp-send{
  width:46px;height:46px;flex-shrink:0;border:0;border-radius:16px;
  background:linear-gradient(145deg,#6d4aff 0%,#8a6cff 100%);
  color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 20px rgba(109,74,255,.35);
  transition:transform .14s ease, filter .15s ease, box-shadow .15s ease;
}
.sp-send:hover{
  filter:brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 10px 24px rgba(109,74,255,.42);
}
.sp-send:active{transform:scale(.94)}
.sp-send:disabled,.sp-send[aria-busy="true"]{
  opacity:.65;cursor:wait;pointer-events:none;filter:none;
}
html.theme-dark .sp-top{background:var(--surface)}
html.theme-dark .sp-compose{
  background:var(--surface);
  border-color:rgba(155,134,255,.2);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
html.theme-dark .sp-compose:focus-within{
  border-color:rgba(155,134,255,.45);
  box-shadow:
    0 0 0 3px rgba(155,134,255,.14),
    0 10px 28px rgba(0,0,0,.3);
}
html.theme-dark .sp-thread{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 100% -10%,rgba(155,134,255,.1),transparent 55%),
    radial-gradient(ellipse 70% 45% at -5% 110%,rgba(125,222,180,.06),transparent 50%),
    radial-gradient(rgba(155,134,255,.06) 1.1px,transparent 1.1px);
  background-size:auto,auto,18px 18px;
}
html.theme-dark .sp-bubble--me{
  background:linear-gradient(180deg,#241f36 0%,#1c1828 100%);
  border-color:rgba(155,134,255,.18);
  color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
html.theme-dark .sp-bubble--them{
  background:linear-gradient(155deg,#6f58e0 0%,#8a74f0 48%,#a494ff 100%);
}
html.theme-dark .sp-face{
  border-color:rgba(255,255,255,.12);
}

/* Contact — پیشنهاد و انتقاد */
.ct-page{display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto}
.ct-hero{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:18px 16px 16px;border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(109,74,255,.18),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(255,187,122,.16),transparent 46%),
    linear-gradient(160deg,var(--surface) 0%,var(--violet) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  color:var(--ink);
}
.ct-hero-glow{
  position:absolute;inset:auto -20% -40% auto;width:160px;height:160px;
  border-radius:50%;background:rgba(109,74,255,.08);pointer-events:none;
}
.ct-hero-copy{position:relative;z-index:1;min-width:0}
.ct-kicker{
  margin:0 0 6px;font-size:12px;font-weight:800;color:var(--primary);
  letter-spacing:.02em;opacity:1;
}
.ct-title{
  margin:0 0 6px;font-size:1.25rem;font-weight:900;letter-spacing:-.01em;
  line-height:1.35;color:var(--ink);
}
.ct-sub{
  margin:0;font-size:13px;line-height:1.7;font-weight:600;
  color:var(--muted);max-width:36ch;opacity:1;
}
.ct-hero-ico{
  position:relative;z-index:1;flex-shrink:0;
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(109,74,255,.1);color:var(--primary);
  border:1px solid rgba(109,74,255,.12);
}
.ct-compose{
  display:flex;flex-direction:column;gap:10px;
  padding:14px 16px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.ct-compose.nj-dock{
  display:grid;
  grid-template-columns:minmax(0,720px);
  justify-content:center;
  gap:0;
  border:0;
  border-radius:0;
  padding:10px max(14px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-right, 0px));
  box-shadow:0 -10px 28px rgba(49,35,94,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.96) 40%);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.ct-compose.nj-dock:focus-within{
  border-color:transparent;
  box-shadow:0 -10px 28px rgba(49,35,94,.08);
}
.ct-compose-shell{
  display:flex;align-items:flex-end;gap:10px;
  padding:8px 8px 8px 12px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(109,74,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 24px rgba(109,74,255,.08);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.ct-compose-shell:focus-within{
  border-color:rgba(109,74,255,.38);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 3px rgba(109,74,255,.12),
    0 10px 28px rgba(109,74,255,.12);
}
.ct-compose-field{flex:1;min-width:0}
.ct-compose textarea{
  display:block;width:100%;min-height:44px;max-height:120px;resize:none;
  border:0;outline:none;background:transparent;padding:11px 6px;
  font:inherit;font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.55;
}
.ct-compose textarea::placeholder{color:var(--muted);opacity:.75}
.ct-compose-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:8px;border-top:1px solid var(--line);
}
.ct-hint{font-size:12px;font-weight:600;color:var(--muted)}
.ct-send{
  width:46px;height:46px;flex-shrink:0;padding:0;border:0;border-radius:16px;
  background:linear-gradient(145deg,#6d4aff 0%,#8a6cff 100%);
  color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 20px rgba(109,74,255,.35);
  transition:transform .14s ease, filter .15s ease, box-shadow .15s ease;
}
.ct-send:hover{
  filter:brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 10px 24px rgba(109,74,255,.42);
}
.ct-send:active{transform:scale(.94)}
.ct-send:disabled,.ct-send[aria-busy="true"]{
  opacity:.65;cursor:wait;pointer-events:none;filter:none;
}
.ct-feed{display:flex;flex-direction:column;gap:12px}
.ct-card .dlg-body{margin:0}
.ct-feed-head{
  display:flex;flex-direction:column;gap:2px;padding:0 2px;
}
.ct-feed-head strong{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:-.01em}
.ct-feed-head span{font-size:12px;font-weight:600;color:var(--muted);opacity:.85}
.ct-card{
  padding:16px 16px 14px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  animation:ctIn .28s cubic-bezier(.22,1,.36,1) both;
}
.ct-card:nth-child(2){animation-delay:.04s}
.ct-card:nth-child(3){animation-delay:.08s}
.ct-card:nth-child(4){animation-delay:.12s}
@keyframes ctIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.ct-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ct-avatar-link{
  flex-shrink:0;border-radius:50%;line-height:0;
  transition:transform .12s ease, box-shadow .15s ease;
}
.ct-avatar-link:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(109,74,255,.18);
}
.ct-avatar{
  width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  display:block;background:var(--soft);border:0;
}
.ct-card-who{min-width:0;display:flex;flex-direction:column;gap:2px}
.ct-card-who strong,.ct-name{
  font-size:15px;font-weight:800;color:var(--ink);text-decoration:none;line-height:1.3;
}
.ct-name:hover{color:var(--primary)}
.ct-card-who time{font-size:12px;font-weight:600;color:var(--muted);line-height:1.3}
.ct-card-text{
  margin:0;
  font-size:15px;
  line-height:1.85;
  font-weight:400;
  color:var(--ink);
  text-align:justify;
  text-justify:inter-word;
  white-space:pre-wrap;
  word-break:break-word;
}
.ct-empty{
  text-align:center;padding:28px 16px;border-radius:18px;
  background:var(--soft);border:1px dashed var(--line);color:var(--muted);
}
.ct-empty-ico{
  width:56px;height:56px;margin:0 auto 12px;border-radius:18px;
  display:grid;place-items:center;background:var(--violet);color:var(--primary);
}
.ct-empty strong{display:block;font-size:15px;font-weight:800;color:var(--ink);margin:0 0 6px}
.ct-empty p{margin:0 auto;max-width:28ch;font-size:13px;line-height:1.7;font-weight:600;color:var(--muted)}
.ct-pager{margin-top:4px}
html.theme-dark .ct-hero{
  background:
    radial-gradient(circle at 100% 0%,rgba(155,134,255,.2),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(255,187,122,.1),transparent 46%),
    linear-gradient(160deg,var(--surface) 0%,var(--surface-2) 100%);
  box-shadow:none;
}
html.theme-dark .ct-hero-ico{
  background:rgba(155,134,255,.14);color:var(--primary-2);border-color:rgba(155,134,255,.16);
}
html.theme-dark .ct-compose{
  background:var(--surface);border-color:rgba(155,134,255,.18);
}
html.theme-dark .ct-compose.nj-dock{
  background:linear-gradient(180deg,rgba(28,24,40,.75) 0%,rgba(28,24,40,.96) 40%);
  box-shadow:0 -8px 28px rgba(0,0,0,.25);
}
html.theme-dark .ct-compose-shell{
  background:var(--surface);
  border-color:rgba(155,134,255,.2);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
html.theme-dark .ct-compose-shell:focus-within{
  border-color:rgba(155,134,255,.45);
  box-shadow:
    0 0 0 3px rgba(155,134,255,.14),
    0 10px 28px rgba(0,0,0,.3);
}
html.theme-dark .ct-card{background:var(--surface)}
html.theme-dark .ct-empty{background:var(--surface-2)}

/* 404 — teen friendly */
.nj404-body{
  margin:0;min-height:100dvh;
  display:grid;place-items:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(109,74,255,.12),transparent 55%),
    radial-gradient(ellipse 60% 45% at 100% 100%,rgba(125,222,180,.16),transparent 50%),
    var(--bg);
}
.nj404{
  width:min(440px,100%);
  text-align:center;
  animation:nj404In .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes nj404In{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}
}
.nj404-stage{
  position:relative;
  height:190px;margin:0 auto 18px;
  display:grid;place-items:center;
}
.nj404-orb{
  position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;
  animation:nj404Float 5s ease-in-out infinite;
}
.nj404-orb--a{
  width:140px;height:140px;inset:20px auto auto 50%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 30% 30%,#9b86ff,#6d4aff 60%,transparent 70%);
}
.nj404-orb--b{
  width:70px;height:70px;right:12%;top:24px;
  background:radial-gradient(circle,#7ddeb4,#ddf7eb);
  animation-delay:-1.2s;
}
.nj404-orb--c{
  width:48px;height:48px;left:14%;bottom:28px;
  background:radial-gradient(circle,#ffc49a,#fff0e5);
  animation-delay:-2.4s;
}
.nj404-badge{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:128px;height:128px;border-radius:36px;
  background:linear-gradient(145deg,#6d4aff 0%,#8a6cff 100%);
  color:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 18px 40px rgba(109,74,255,.35);
  animation:nj404Bob 3.2s ease-in-out infinite;
}
.nj404-badge strong{
  font-size:42px;font-weight:900;letter-spacing:-.03em;line-height:1;
}
.nj404-badge span{
  margin-top:4px;font-size:13px;font-weight:800;opacity:.92;
}
.nj404-float{
  position:absolute;z-index:3;
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--surface);color:var(--primary);
  font-size:16px;font-weight:900;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  animation:nj404Float 4s ease-in-out infinite;
}
.nj404-float--1{top:18px;right:18%;animation-delay:-.6s}
.nj404-float--2{bottom:22px;left:16%;animation-delay:-1.8s}
.nj404-float--3{top:42px;left:12%;font-size:18px;animation-delay:-2.8s}
@keyframes nj404Float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes nj404Bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.nj404-brand{
  margin:0 0 6px;font-size:13px;font-weight:800;color:var(--primary);
}
.nj404-title{
  margin:0 0 10px;font-size:clamp(1.35rem,4.5vw,1.7rem);
  font-weight:900;color:var(--ink);line-height:1.35;letter-spacing:-.02em;
}
.nj404-lead{
  margin:0 auto 22px;max-width:34ch;
  font-size:14.5px;line-height:1.8;font-weight:650;color:var(--muted);
}
.nj404-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.nj404-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border-radius:14px;
  font-size:14.5px;font-weight:800;text-decoration:none;
  transition:transform .12s ease, filter .15s ease;
}
.nj404-btn:active{transform:scale(.97)}
.nj404-btn--primary{
  background:linear-gradient(145deg,#6d4aff,#8a6cff);color:#fff;
  box-shadow:0 10px 22px rgba(109,74,255,.3);
}
.nj404-btn--primary:hover{filter:brightness(1.05)}
.nj404-btn--soft{
  background:var(--violet);color:var(--primary);
  border:1px solid transparent;
}
.nj404-btn--soft:hover{border-color:rgba(109,74,255,.2)}
.nj404-help{
  display:inline-block;margin-top:18px;
  font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;
}
.nj404-help:hover{color:var(--primary);text-decoration:underline}
html.theme-dark .nj404-badge{
  background:linear-gradient(145deg,#5a48a8,#9b86ff);
}
html.theme-dark .nj404-float{background:var(--surface-2)}

/* Tools hub + BMI */
.tool-hub{display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto}
.tool-hub-intro{padding:4px 2px 0}
.tool-hub-kicker{margin:0 0 4px;font-size:12px;font-weight:800;color:var(--primary)}
.tool-hub-title{margin:0 0 6px;font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.tool-hub-lead{margin:0;font-size:13.5px;line-height:1.7;font-weight:650;color:var(--muted);max-width:36ch}
.tool-hub-sub{
  display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--muted);
}
.hub-card .tool-hub-sub{grid-column:1/-1}
.tool-page{display:flex;flex-direction:column;gap:14px;max-width:520px;margin:0 auto}
.tool-hero{padding:2px 2px 0}
.tool-kicker{margin:0 0 4px;font-size:12px;font-weight:800;color:var(--primary)}
.tool-title{margin:0 0 6px;font-size:20px;font-weight:900;color:var(--ink)}
.tool-lead{margin:0;font-size:13.5px;line-height:1.7;font-weight:650;color:var(--muted)}
.tool-form{
  padding:16px;border-radius:20px;
  background:var(--surface);border:1px solid rgba(109,74,255,.12);
  box-shadow:0 8px 24px rgba(49,35,94,.06);
}
.tool-form:focus-within{
  border-color:rgba(109,74,255,.32);
  box-shadow:0 0 0 3px rgba(109,74,255,.1),0 10px 28px rgba(109,74,255,.08);
}
.tool-sex{margin-bottom:14px}
.tool-sex-label{
  display:block;font-size:14px;font-weight:700;margin-bottom:8px;color:var(--ink);
}
.tool-sex-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool-sex-opt{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:var(--soft);overflow:hidden;
  font-size:14px;font-weight:800;color:var(--ink);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.tool-sex-opt input{
  position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2;
}
.tool-sex-opt span{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  pointer-events:none;
}
.tool-sex-opt input:checked + span,
.tool-sex-opt input:focus-visible + span{
  background:var(--tool-accent,var(--violet));color:var(--tool-accent-ink,var(--primary));
}
.tool-sex-opt:has(input:checked){
  border-color:transparent;
  box-shadow:0 6px 16px color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 22%,transparent);
}
.tool-result-meta{
  margin:0 0 12px;font-size:13px;font-weight:750;color:var(--primary);
}
.tool-bmi-legend{
  display:grid;grid-template-columns:22% 28% 25% 1fr;gap:0;
  margin:-6px 4px 12px;font-size:10px;font-weight:700;color:var(--muted);text-align:center;
}
.tool-result{
  padding:18px 16px;border-radius:20px;text-align:center;
  background:var(--soft);border:1px solid var(--line);
  animation:toolIn .28s cubic-bezier(.22,1,.36,1) both;
}
.tool-result[hidden]{display:none!important}
@keyframes toolIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.tool-result-label{margin:0 0 4px;font-size:12.5px;font-weight:700;color:var(--muted)}
.tool-result-value{
  margin:0 0 8px;font-size:42px;font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1;
}
.tool-result-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:0 12px;margin:0 0 14px;border-radius:999px;
  font-size:13px;font-weight:800;
  background:var(--violet);color:var(--primary);
}
.tool-result-badge--u{background:var(--sky);color:var(--sky-ink)}
.tool-result-badge--n{background:var(--mint);color:var(--mint-ink)}
.tool-result-badge--o{background:var(--yellow);color:var(--yellow-ink)}
.tool-result-badge--ob{background:var(--pink);color:var(--pink-ink)}
.tool-bmi-bar{
  position:relative;display:flex;height:10px;border-radius:999px;overflow:hidden;
  margin:0 4px 14px;background:var(--line);
}
.tool-bmi-seg{flex:1}
.tool-bmi-seg--u{background:#7eb6e8;flex:0 0 22%}
.tool-bmi-seg--n{background:#5dcc9a;flex:0 0 28%}
.tool-bmi-seg--o{background:#e8c85a;flex:0 0 25%}
.tool-bmi-seg--ob{background:#e889a8;flex:1}
.tool-bmi-marker{
  position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;
  border-radius:50%;background:#fff;border:2px solid var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transform:translateX(50%);
  transition:inset-inline-start .25s ease;
}
[dir="rtl"] .tool-bmi-marker{transform:translateX(-50%)}
.tool-result-hint{
  margin:0 auto;max-width:34ch;font-size:13px;line-height:1.75;font-weight:650;color:var(--muted);
}
.tool-note{
  padding:14px;border-radius:16px;
  background:var(--violet);border:1px solid transparent;
}
.tool-note strong{display:block;margin:0 0 4px;font-size:13px;font-weight:900;color:var(--primary)}
.tool-note p{margin:0;font-size:12.5px;line-height:1.75;font-weight:650;color:var(--ink)}
html.theme-dark .tool-form{background:var(--surface);border-color:rgba(155,134,255,.18)}
html.theme-dark .tool-result{background:var(--surface)}
html.theme-dark .tool-note{background:var(--surface-2)}

/* Tools hub groups + phase-1 tools */
.tool-hub-group{display:flex;flex-direction:column;gap:10px}
.tool-hub-group-title{
  margin:8px 2px 0;font-size:13px;font-weight:900;color:var(--ink);letter-spacing:-.01em;
}
.tool-hub-group-head{margin:4px 2px 8px}
.tool-hub-group-hint{
  margin:2px 0 0;font-size:12px;font-weight:650;color:var(--muted);line-height:1.5;
}
.tool-chip{
  appearance:none;border:1px solid var(--line);background:var(--soft);color:var(--ink);
  border-radius:12px;min-height:40px;padding:0 12px;font-size:13px;font-weight:800;cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.tool-chip.is-active{
  border-color:transparent;background:var(--violet);color:var(--primary);
}
.tool-focus-panel{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.tool-focus-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tool-focus-ring{
  position:relative;width:180px;height:180px;margin:6px auto 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.tool-focus-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tool-focus-track{fill:none;stroke:var(--line);stroke-width:8}
.tool-focus-prog{
  fill:none;stroke:var(--primary);stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset .35s linear;
}
.tool-focus-time{
  margin:0;position:relative;z-index:1;font-size:36px;font-weight:900;color:var(--ink);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.tool-focus-label{margin:4px 0 0;position:relative;z-index:1;font-size:12.5px;font-weight:700;color:var(--muted)}
.tool-focus-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.tool-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.tool-stat{
  text-align:center;padding:10px 6px;border-radius:14px;background:var(--soft);border:1px solid var(--line);
}
.tool-stat-val{display:block;font-size:20px;font-weight:900;color:var(--ink);line-height:1.1}
.tool-stat-lbl{display:block;margin-top:4px;font-size:11px;font-weight:700;color:var(--muted)}
.tool-btn-ghost{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);
  border-radius:14px;min-height:46px;padding:0 14px;font-size:14px;font-weight:800;cursor:pointer;
}
.tool-mood-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tool-mood-opt{
  appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:64px;padding:8px 4px;border-radius:14px;border:1px solid var(--line);background:var(--soft);
  font-size:11.5px;font-weight:800;color:var(--ink);cursor:pointer;
}
.tool-mood-opt.is-active{border-color:transparent;background:var(--violet);color:var(--primary)}
.tool-mood-dot{width:12px;height:12px;border-radius:50%}
.tool-mood-dot--great{background:#5dcc9a}
.tool-mood-dot--good{background:#7eb6e8}
.tool-mood-dot--ok{background:#e8c85a}
.tool-mood-dot--low{background:#e8a05a}
.tool-mood-dot--bad{background:#e889a8}
.tool-energy{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.tool-energy:has([data-screen]){grid-template-columns:repeat(4,1fr)}
.tool-mood-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0 12px}
.tool-mood-day{display:flex;flex-direction:column;align-items:center;gap:6px}
.tool-mood-day-dot{
  width:28px;height:28px;border-radius:10px;background:var(--line);
}
.tool-mood-day.is-great .tool-mood-day-dot{background:#5dcc9a}
.tool-mood-day.is-good .tool-mood-day-dot{background:#7eb6e8}
.tool-mood-day.is-ok .tool-mood-day-dot{background:#e8c85a}
.tool-mood-day.is-low .tool-mood-day-dot{background:#e8a05a}
.tool-mood-day.is-bad .tool-mood-day-dot{background:#e889a8}
.tool-mood-day-lbl{font-size:11px;font-weight:700;color:var(--muted)}
.tool-gpa-head,.tool-gpa-row{
  display:grid;grid-template-columns:1.4fr .8fr .7fr 36px;gap:6px;align-items:center;
}
.tool-gpa-head{
  margin-bottom:6px;font-size:11px;font-weight:800;color:var(--muted);padding:0 2px;
}
.tool-gpa-row{margin-bottom:6px}
.tool-gpa-row input{
  width:100%;min-height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--soft);padding:0 10px;font-size:13.5px;font-weight:700;color:var(--ink);
}
.tool-gpa-del{
  appearance:none;width:36px;height:42px;border:0;border-radius:12px;background:var(--soft);
  color:var(--muted);font-size:20px;font-weight:700;cursor:pointer;line-height:1;
}
.tool-empty{margin:8px 2px;font-size:13.5px;font-weight:700;color:var(--muted);text-align:center}
.tool-cd-list{display:flex;flex-direction:column;gap:8px}
.tool-cd-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
}
.tool-cd-card.is-soon{border-color:rgba(232,200,90,.55)}
.tool-cd-card.is-today{border-color:rgba(109,74,255,.45);background:var(--violet)}
.tool-cd-card.is-past{opacity:.72}
.tool-cd-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.tool-cd-main strong{font-size:14.5px;font-weight:900;color:var(--ink)}
.tool-cd-meta{font-size:12px;font-weight:700;color:var(--muted)}
.tool-cd-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.tool-cd-days{font-size:13px;font-weight:900;color:var(--primary);white-space:nowrap}
.tool-cd-del{
  appearance:none;border:0;background:transparent;color:var(--muted);
  font-size:11.5px;font-weight:800;cursor:pointer;padding:0;
}
.tool-quiz-progress{margin:0 0 8px;font-size:12.5px;font-weight:800;color:var(--muted)}
.tool-quiz-bar{
  height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:14px;
}
.tool-quiz-bar span{display:block;height:100%;width:0;background:var(--primary);border-radius:inherit;transition:width .2s ease}
.tool-quiz-q{margin:0 0 12px;font-size:16px;font-weight:900;color:var(--ink);line-height:1.6}
.tool-quiz-opts{display:flex;flex-direction:column;gap:8px}
.tool-quiz-opt{
  appearance:none;width:100%;text-align:right;min-height:48px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--soft);color:var(--ink);
  font-size:13.5px;font-weight:750;line-height:1.55;cursor:pointer;
}
.tool-quiz-opt:active,.tool-quiz-opt:focus-visible{border-color:transparent;background:var(--violet);color:var(--primary)}
.tool-quiz-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.tool-quiz-score{
  padding:10px 6px;border-radius:14px;background:var(--soft);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;align-items:center;
}
.tool-quiz-score span{font-size:11px;font-weight:700;color:var(--muted)}
.tool-quiz-score b{font-size:16px;font-weight:900;color:var(--ink)}
.tool-check-list{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.tool-check-list--chips{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.tool-check{
  position:relative;display:flex;align-items:stretch;margin:0;padding:0;
  border-radius:14px;cursor:pointer;overflow:hidden;
  border:1px solid var(--line);background:var(--soft);
  font-size:13.5px;font-weight:800;color:var(--ink);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
  min-height:46px;
}
.tool-check input{
  position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2;
}
.tool-check-ui{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  pointer-events:none;transition:background .15s ease, color .15s ease;
}
.tool-check-mark{
  flex-shrink:0;width:20px;height:20px;border-radius:7px;
  border:1.5px solid color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 35%,var(--line));
  background:rgba(255,255,255,.55);
  position:relative;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.tool-check-mark::after{
  content:"";position:absolute;inset:3px 3px 4px 5px;
  border:2px solid transparent;border-top:0;border-left:0;
  transform:rotate(40deg) scale(0);transform-origin:center;
  transition:transform .15s ease, border-color .15s ease;
}
.tool-check-text{line-height:1.35;text-align:right}
.tool-check input:checked + .tool-check-ui{
  background:var(--tool-accent,var(--violet));color:var(--tool-accent-ink,var(--primary));
}
.tool-check input:checked + .tool-check-ui .tool-check-mark{
  background:var(--tool-accent-ink,var(--primary));
  border-color:transparent;
  transform:scale(1.05);
}
.tool-check input:checked + .tool-check-ui .tool-check-mark::after{
  border-color:#fff;transform:rotate(40deg) scale(1);
}
.tool-check:has(input:checked){
  border-color:transparent;
  box-shadow:0 6px 16px color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 22%,transparent);
}
.tool-check input:focus-visible + .tool-check-ui{
  outline:2px solid var(--tool-accent-strong,var(--primary));outline-offset:2px;
}
.tool-check:active{transform:scale(.98)}
.tool-chip-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 14px;
}
.tool-chip-row .tool-chip{min-height:42px;padding:0 6px;font-size:12.5px}
.tool-family-card{text-align:right;margin-top:4px}
.tool-family-lead{margin:0 0 10px;font-size:13.5px;font-weight:750;color:var(--muted)}
.tool-family-rules{
  margin:0 0 12px;padding:0 18px 0 0;text-align:right;
}
.tool-family-rules li{margin:0 0 8px;font-size:14px;font-weight:750;color:var(--ink);line-height:1.65}
.tool-family-foot{margin:0;font-size:12.5px;font-weight:700;color:var(--muted)}
html.theme-dark .tool-cd-card{background:var(--surface)}
html.theme-dark .tool-mood-opt,
html.theme-dark .tool-quiz-opt,
html.theme-dark .tool-check,
html.theme-dark .tool-stat{background:var(--surface-2)}
html.theme-dark .tool-check-mark{background:rgba(255,255,255,.06)}
html.theme-dark .tool-period-ring-center{
  background:radial-gradient(circle at 50% 40%,rgba(58,34,48,.92),rgba(58,34,48,.55) 70%,transparent 100%);
}
html.theme-dark .tool-period-pcard{background:var(--surface-2)}
html.theme-dark .tool-period-pcard--period{
  background:linear-gradient(165deg,var(--surface),#3a2230);
}
html.theme-dark .tool-period-pcard--ovu{
  background:linear-gradient(165deg,var(--surface),#1e3328);
}
html.theme-dark .tool-period-pcard--pms{
  background:linear-gradient(165deg,var(--surface),#1e2a38);
}
html.theme-dark .tool-page--period .tool-form{
  background:var(--surface);
}
html.theme-dark .tool-period-current{
  background:linear-gradient(135deg,#3a2230,var(--surface-2));
  border-color:rgba(232,137,168,.25);
}
html.theme-dark .tool-period-log-card{
  background:var(--surface-2)!important;
}

/* Priority B tools */
.tool-growth-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:center}
.tool-growth-card{
  padding:12px 10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
}
.tool-growth-val{font-size:32px!important;margin-bottom:6px!important}
.tool-growth-card .tool-result-hint{max-width:none;font-size:12px}
.tool-growth-card .tool-result-badge{margin-bottom:8px}
.tool-period-symptoms{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool-period-dash{
  display:flex;flex-direction:column;gap:12px;margin-bottom:4px;
  animation:toolIn .32s cubic-bezier(.22,1,.36,1) both;
}
.tool-period-dash[hidden]{display:none!important}
.tool-period-ringwrap{
  position:relative;width:min(100%,300px);margin:4px auto 0;
  aspect-ratio:1;display:grid;place-items:center;
}
.tool-period-ring-canvas{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 12px 28px rgba(180,80,120,.12));
}
.tool-period-ring-center{
  position:absolute;inset:22%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;z-index:2;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,255,255,.88),rgba(255,234,242,.55) 70%,transparent 100%);
}
.tool-period-phase-kicker{
  margin:0 0 2px;font-size:11px;font-weight:800;color:var(--pink-ink);opacity:.8;
  letter-spacing:.02em;
}
.tool-period-phase-name{
  margin:0;font-size:17px;font-weight:900;color:var(--ink);line-height:1.35;
}
.tool-period-phase-day{
  margin:4px 0 0;font-size:12px;font-weight:750;color:var(--muted);
}
.tool-period-dash[data-phase="period"] .tool-period-phase-name{color:#c23d5c}
.tool-period-dash[data-phase="ovulation"] .tool-period-phase-name,
.tool-period-dash[data-phase="fertile"] .tool-period-phase-name{color:#2e9a68}
.tool-period-dash[data-phase="pms"] .tool-period-phase-name{color:#3d7eb8}
.tool-period-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;
  margin:0;font-size:11.5px;font-weight:750;color:var(--muted);
}
.tool-period-legend i{
  display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:6px;
  vertical-align:middle;
}
.tool-period-legend i.is-period{background:#e85a7a}
.tool-period-legend i.is-follicular{background:#f3c4d4}
.tool-period-legend i.is-ovulation{background:#3dba82}
.tool-period-legend i.is-pms{background:#6aa8e0}
.tool-period-legend i.is-predict{background:#f0c4d4;box-shadow:inset 0 0 0 1.5px #e889a8}
.tool-period-legend i.is-today{background:var(--primary);box-shadow:0 0 0 3px rgba(109,74,255,.2)}
.tool-period-phase-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.tool-period-pcard{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 8px;border-radius:16px;text-align:center;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(49,35,94,.05);
}
.tool-period-pcard-lbl{
  font-size:11px;font-weight:800;color:var(--muted);
}
.tool-period-pcard-val{
  font-size:13px;font-weight:900;color:var(--ink);line-height:1.35;
  letter-spacing:-.01em;
}
.tool-period-pcard-meta{
  font-size:11px;font-weight:750;color:var(--muted);
}
.tool-period-pcard--period{
  background:linear-gradient(165deg,#fff,#ffe4ec);
  border-color:rgba(232,90,122,.22);
}
.tool-period-pcard--period .tool-period-pcard-meta{color:#c23d5c}
.tool-period-pcard--ovu{
  background:linear-gradient(165deg,#fff,#e4f7ee);
  border-color:rgba(61,186,130,.22);
}
.tool-period-pcard--ovu .tool-period-pcard-meta{color:#2e9a68}
.tool-period-pcard--pms{
  background:linear-gradient(165deg,#fff,#e6f1fb);
  border-color:rgba(106,168,224,.25);
}
.tool-period-pcard--pms .tool-period-pcard-meta{color:#3d7eb8}
.tool-period-hint{
  margin:0 auto;text-align:center;max-width:40ch;
}
.tool-period-daystrip{
  display:flex;flex-wrap:nowrap;justify-content:center;gap:3px;
  padding:8px 4px;overflow:hidden;
}
.tool-period-ddot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:#f3c4d4;
}
.tool-period-ddot.is-period{background:#e85a7a}
.tool-period-ddot.is-follicular{background:#f3c4d4}
.tool-period-ddot.is-fertile{background:#7ad4a8}
.tool-period-ddot.is-ovulation{background:#3dba82;width:9px;height:9px}
.tool-period-ddot.is-pms{background:#6aa8e0}
.tool-period-ddot.is-today{
  outline:2px solid #fff;
  box-shadow:0 0 0 2px #e85a7a;
  transform:scale(1.25);
}
.tool-page--period .tool-form{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--pink) 55%,var(--surface)),var(--surface));
}
.tool-page--period .tool-cd-card{
  background:linear-gradient(120deg,var(--surface),color-mix(in srgb,var(--pink) 50%,var(--surface)));
}
.tool-page--period .tool-chip.is-active{
  background:var(--pink);color:var(--pink-ink);
  box-shadow:0 6px 16px rgba(232,137,168,.28);
}
.tool-page--period .btn-primary{
  background:linear-gradient(135deg,#e889a8,#d46a90);
  box-shadow:0 10px 24px rgba(212,106,144,.35);
}
.tool-period-current{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin:0 0 14px;padding:12px 14px;border-radius:16px;
  background:linear-gradient(135deg,#ffeaf2,rgba(255,255,255,.6));
  border:1px solid rgba(232,90,122,.2);
}
.tool-period-current-lbl{
  margin:0;font-size:11.5px;font-weight:800;color:var(--pink-ink);opacity:.85;
}
.tool-period-current-date{
  margin:0;font-size:16px;font-weight:900;color:var(--ink);
}
.tool-period-newbtn{
  width:auto;min-height:36px;padding:0 12px;font-size:12.5px;margin-top:4px;
}
.tool-period-today-lbl{
  font-weight:700;color:var(--muted);font-size:12px;
}
.tool-period-start-actions{
  display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px;
}
.tool-period-start-actions:has(#periodStartCancel:not([hidden])){
  grid-template-columns:1.4fr 1fr;
}
.tool-period-log-card{
  margin-inline-start:12px;
  background:linear-gradient(120deg,var(--surface),#fff8fb)!important;
  border-style:dashed;
}
.tool-remind-card{
  margin-top:4px;
}
.tool-remind-toggle{
  margin-bottom:8px;
}
.tool-remind-status{
  margin:0;font-size:12.5px;line-height:1.7;font-weight:650;color:var(--muted);
}
.tool-fam-add{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:4px 0 8px;
}
.tool-fam-add input{
  width:100%;min-height:46px;border-radius:14px;border:1px solid var(--line);
  background:var(--soft);padding:0 12px;font-size:13.5px;font-weight:700;color:var(--ink);
}
.tool-fam-add .tool-btn-ghost{
  min-height:46px;padding:0 14px;white-space:nowrap;
}
.tool-fam-custom-item{
  position:relative;
}
.tool-fam-custom-del{
  position:absolute;top:8px;left:8px;z-index:3;
  appearance:none;border:0;background:transparent;color:var(--muted);
  width:28px;height:28px;border-radius:8px;font-size:18px;font-weight:700;cursor:pointer;line-height:1;
}
.tool-fam-custom-del:hover{color:var(--ink);background:rgba(0,0,0,.05)}
@media (max-width:420px){
  .tool-fam-add{grid-template-columns:1fr}
}
.tool-breathe-panel{display:flex;flex-direction:column;align-items:center;gap:14px}
.tool-breathe-ring{
  position:relative;width:200px;height:200px;margin:8px auto 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.tool-breathe-circle{
  position:absolute;inset:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(109,74,255,.28),rgba(109,74,255,.1) 55%,transparent 70%),
    var(--violet);
  border:2px solid rgba(109,74,255,.25);
  transform:scale(1);transition:transform 1s ease;
}
.tool-breathe-ring.is-in .tool-breathe-circle{background:radial-gradient(circle at 35% 30%,rgba(93,204,154,.35),rgba(93,204,154,.12) 55%,transparent 70%),var(--mint)}
.tool-breathe-ring.is-out .tool-breathe-circle{background:radial-gradient(circle at 35% 30%,rgba(126,182,232,.35),rgba(126,182,232,.12) 55%,transparent 70%),var(--sky)}
.tool-breathe-phase{
  position:relative;z-index:1;margin:0;font-size:18px;font-weight:900;color:var(--ink);
}
.tool-breathe-count{
  position:relative;z-index:1;margin:4px 0 0;font-size:36px;font-weight:900;color:var(--primary);
  font-variant-numeric:tabular-nums;line-height:1;
}
.tool-breathe-remain{margin:0;font-size:14px;font-weight:800;color:var(--muted)}
.tool-breathe-steps{
  width:100%;margin:0;padding:0 18px 0 0;text-align:right;
  font-size:13px;font-weight:700;color:var(--muted);line-height:1.8;
}
.tool-breathe-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tool-breathe-links .btn,
.tool-breathe-links .tool-btn-ghost{display:flex;align-items:center;justify-content:center;text-decoration:none}
.tool-journal-card{
  padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  text-align:right;
}
.tool-journal-day{font-size:12.5px;font-weight:800;color:var(--primary);margin-bottom:8px}
.tool-journal-lines{margin:0 0 8px;padding:0 16px 0 0;font-size:13.5px;font-weight:750;color:var(--ink);line-height:1.7}
.tool-journal-lines li{margin-bottom:4px}
.tool-note a{color:var(--primary);font-weight:800;text-decoration:none}
html.theme-dark .tool-growth-card,
html.theme-dark .tool-journal-card{background:var(--surface)}
html.theme-dark .tool-breathe-circle{border-color:rgba(155,134,255,.28)}

/* Priority C tools */
.tool-habit-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line);
}
.tool-habit-row:last-child{border-bottom:0}
.tool-habit-check{
  appearance:none;width:40px;height:40px;border-radius:12px;flex-shrink:0;
  border:1.5px solid var(--line);background:var(--soft);color:var(--primary);
  font-size:18px;font-weight:900;cursor:pointer;line-height:1;
}
.tool-habit-row.is-done .tool-habit-check{
  border-color:transparent;background:var(--mint);color:var(--mint-ink);
}
.tool-habit-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:right}
.tool-habit-main strong{font-size:14.5px;font-weight:900;color:var(--ink)}
.tool-habit-main span{font-size:12px;font-weight:700;color:var(--muted)}
.tool-habit-row.is-off{opacity:.55}
.tool-sleep-opts{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.tool-sleep-card{
  appearance:none;width:100%;text-align:right;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);cursor:default;
  display:flex;flex-direction:column;gap:2px;
}
.tool-sleep-card strong{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.tool-sleep-card span{font-size:12.5px;font-weight:700;color:var(--muted)}
.tool-sleep-card.is-best{border-color:transparent;background:var(--violet)}
.tool-sleep-card.is-best strong{color:var(--primary)}
.tool-screen-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool-screen-week{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  align-items:end;min-height:100px;margin:10px 0 12px;
}
.tool-screen-day{display:flex;flex-direction:column;align-items:center;gap:6px}
.tool-screen-bar-wrap{
  width:100%;height:72px;display:flex;align-items:flex-end;justify-content:center;
}
.tool-screen-bar{
  width:70%;min-height:4px;border-radius:8px 8px 4px 4px;
  background:var(--primary);opacity:.85;
}
.tool-screen-day-lbl{font-size:11px;font-weight:700;color:var(--muted)}
.tool-goal-title{margin:0 0 6px;font-size:16px;font-weight:900;color:var(--ink)}
.tool-goal-bar{
  height:10px;border-radius:999px;background:var(--line);overflow:hidden;margin:8px 0 14px;
}
.tool-goal-fill{
  display:block;height:100%;width:0;border-radius:inherit;background:var(--primary);
  transition:width .25s ease;
}
.tool-goal-actions{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}
.tool-goal-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.tool-goal-item{
  padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:right;
}
.tool-goal-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.tool-goal-item-head strong{font-size:15px;font-weight:900;color:var(--ink)}
.tool-goal-pct{font-size:15px;font-weight:900;color:var(--primary)}
.tool-goal-why{margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.tool-suggest-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tool-suggest-card{
  display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;text-decoration:none;
  border:1px solid var(--line);background:var(--surface);text-align:right;
}
.tool-suggest-card strong{font-size:14px;font-weight:900;color:var(--ink)}
.tool-suggest-card span{font-size:12.5px;font-weight:700;color:var(--muted)}
.tool-chart{display:flex;flex-direction:column;gap:6px;margin:10px 0 8px;text-align:right}
.tool-chart-row{
  display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:750;color:var(--ink);
  padding:8px 10px;border-radius:12px;background:var(--soft);
}
.tool-chart-row b{color:var(--primary);font-weight:900}
.tool-chart-canvas{
  display:block;width:100%;max-width:320px;height:auto;margin:8px auto 0;
}
html.theme-dark .tool-goal-item,
html.theme-dark .tool-suggest-card{background:var(--surface)}
html.theme-dark .tool-sleep-card{background:var(--surface)}
html.theme-dark .tool-habit-check{background:var(--surface-2)}

@media (max-width:420px){
  .tool-mood-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .tool-mood-opt{min-height:58px;font-size:10.5px;padding:6px 2px}
  .tool-focus-modes{grid-template-columns:1fr;gap:6px}
  .tool-energy:has([data-screen]){grid-template-columns:1fr 1fr}
  .tool-growth-pair{grid-template-columns:1fr}
  .tool-period-symptoms{grid-template-columns:1fr 1fr}
  .tool-check-list--chips{grid-template-columns:1fr 1fr}
  .tool-period-phase-cards{grid-template-columns:1fr;gap:6px}
  .tool-period-pcard{flex-direction:row;justify-content:space-between;align-items:center;padding:10px 14px;text-align:right}
  .tool-period-pcard-val{font-size:14px}
  .tool-period-ringwrap{width:min(100%,280px)}
  .tool-chip-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .tool-chip-row .tool-chip{font-size:11.5px;min-height:40px}
  .tool-breathe-links{grid-template-columns:1fr}
  .tool-screen-cats{grid-template-columns:1fr 1fr}
  .tool-goal-actions{grid-template-columns:1fr}
  .tool-hub-banner{flex-direction:column;align-items:stretch}
  .tool-featured-grid{grid-template-columns:1fr 1fr}
  .tool-hero--visual{flex-direction:column-reverse;align-items:stretch;text-align:right}
  .tool-hero-art{align-self:center}
}

/* ===== Tools visual refresh (teen appeal) ===== */
.tool-accent-mint{--tool-accent:var(--mint);--tool-accent-ink:var(--mint-ink);--tool-accent-strong:#5dcc9a}
.tool-accent-sky{--tool-accent:var(--sky);--tool-accent-ink:var(--sky-ink);--tool-accent-strong:#7eb6e8}
.tool-accent-peach{--tool-accent:var(--peach);--tool-accent-ink:var(--peach-ink);--tool-accent-strong:#e8a05a}
.tool-accent-pink{--tool-accent:var(--pink);--tool-accent-ink:var(--pink-ink);--tool-accent-strong:#e889a8}
.tool-accent-yellow{--tool-accent:var(--yellow);--tool-accent-ink:var(--yellow-ink);--tool-accent-strong:#e8c85a}
.tool-accent-violet,.tool-accent-primary{--tool-accent:var(--violet);--tool-accent-ink:var(--primary);--tool-accent-strong:var(--primary)}

.tool-hub{gap:20px}
.tool-hub-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 16px;border-radius:24px;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(109,74,255,.18),transparent 55%),
    linear-gradient(135deg,var(--surface) 0%,var(--violet) 100%);
  border:1px solid rgba(109,74,255,.14);
  box-shadow:0 12px 32px rgba(49,35,94,.08);
  overflow:hidden;position:relative;
  animation:toolIn .4s cubic-bezier(.22,1,.36,1) both;
}
.tool-hub-banner-copy{position:relative;z-index:1;flex:1;min-width:0}
.tool-hub-banner .tool-hub-title{font-size:22px}
.tool-hub-banner-art{
  position:relative;z-index:1;display:flex;align-items:flex-end;gap:6px;flex-shrink:0;
}
.tool-hub-banner-art img{
  display:block;border-radius:18px;background:rgba(255,255,255,.55);
  box-shadow:0 8px 20px rgba(49,35,94,.12);
  animation:toolFloat 3.6s ease-in-out infinite;
}
.tool-hub-banner-art img:nth-child(2){animation-delay:.4s;margin-bottom:10px}
.tool-hub-banner-art img:nth-child(3){animation-delay:.8s;margin-bottom:18px}
@keyframes toolFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.tool-featured-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.tool-featured-card{
  position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding:14px 12px 16px;border-radius:20px;text-decoration:none;overflow:hidden;
  background:var(--tool-accent,var(--violet));
  border:1px solid transparent;
  box-shadow:0 8px 22px rgba(49,35,94,.07);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:toolIn .35s cubic-bezier(.22,1,.36,1) both;
}
.tool-featured-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(49,35,94,.12)}
.tool-featured-card strong{font-size:14px;font-weight:900;color:var(--ink);line-height:1.35}
.tool-featured-card > span{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.5}
.tool-featured-ico{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.55);margin-bottom:4px;
}
.tool-featured-ico img{width:44px;height:44px;object-fit:contain}
.tool-pill{
  display:inline-flex;align-items:center;margin-top:6px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:800;font-style:normal;
  background:rgba(255,255,255,.7);color:var(--tool-accent-ink,var(--primary));
}
.tool-pill--card{position:absolute;top:10px;left:10px;margin:0}

.tool-hub-card{
  position:relative;overflow:hidden;
  animation:toolIn .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--delay,0ms);
}
.tool-hub-card::before{
  content:"";position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;
  background:var(--tool-accent-strong,var(--primary));opacity:.85;
}
.tool-hub-card:hover{transform:translateY(-2px)}
.tool-hub-ico{
  background:var(--tool-accent,var(--violet))!important;
}

.tool-hero--visual{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 14px 16px;border-radius:22px;margin-bottom:2px;
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(255,255,255,.35),transparent 50%),
    linear-gradient(145deg,var(--surface) 30%,var(--tool-accent,var(--violet)) 100%);
  border:1px solid rgba(109,74,255,.1);
  box-shadow:0 10px 28px rgba(49,35,94,.07);
  animation:toolIn .35s cubic-bezier(.22,1,.36,1) both;
}
.tool-hero--visual .tool-hero-copy{flex:1;min-width:0}
.tool-hero--visual .tool-kicker{color:var(--tool-accent-ink,var(--primary))}
.tool-hero--visual .tool-title{font-size:21px;letter-spacing:-.02em}
.tool-hero-art{
  position:relative;width:96px;height:96px;flex-shrink:0;
  display:grid;place-items:center;
}
.tool-hero-art img{
  position:relative;z-index:2;width:72px;height:72px;object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(49,35,94,.15));
  animation:toolFloat 4s ease-in-out infinite;
}
.tool-hero-blob{
  position:absolute;inset:8px;border-radius:28px;z-index:0;
  background:var(--tool-accent-strong,var(--primary));opacity:.18;
  transform:rotate(8deg);
}
.tool-hero-ring{
  position:absolute;inset:0;border-radius:50%;z-index:1;
  border:2px dashed color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 45%,transparent);
  animation:toolSpin 18s linear infinite;
}
@keyframes toolSpin{to{transform:rotate(360deg)}}

.tool-page.tool-accent-mint .tool-form,
.tool-page.tool-accent-sky .tool-form,
.tool-page.tool-accent-peach .tool-form,
.tool-page.tool-accent-pink .tool-form,
.tool-page.tool-accent-yellow .tool-form,
.tool-page.tool-accent-violet .tool-form,
.tool-page.tool-accent-primary .tool-form{
  border-color:color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 22%,transparent);
}
.tool-page .btn-primary{
  box-shadow:0 8px 20px color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 35%,transparent);
}
.tool-page .tool-result{
  background:
    radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--tool-accent,var(--violet)) 80%,transparent),transparent 60%),
    var(--soft);
  border-color:color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 18%,transparent);
}
.tool-viz-card{
  padding:14px 14px 10px;border-radius:18px;margin-bottom:4px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(49,35,94,.05);
}
.tool-chart-canvas{
  display:block;width:100%;max-width:100%;height:auto;margin:6px auto 4px;
  border-radius:12px;
}
.tool-chart-canvas--week{max-height:72px}
.tool-chart-canvas--donut{max-width:200px;margin-inline:auto}

.tool-mood-opt,.tool-chip,.tool-quiz-opt,.tool-habit-check{
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tool-mood-opt:active,.tool-chip:active,.tool-quiz-opt:active{transform:scale(.97)}
.tool-mood-opt.is-active,.tool-chip.is-active{
  box-shadow:0 6px 16px color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 25%,transparent);
}
.tool-suggest-card{
  background:
    linear-gradient(120deg,var(--surface),color-mix(in srgb,var(--tool-accent,var(--violet)) 55%,var(--surface)));
  transition:transform .15s ease, box-shadow .15s ease;
}
.tool-suggest-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(49,35,94,.1)}

.tool-focus-prog{stroke:var(--tool-accent-strong,var(--primary))}
.tool-stat{
  background:linear-gradient(180deg,var(--soft),var(--tool-accent,transparent));
  border-color:color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 15%,var(--line));
}
.tool-cd-card.is-today,.tool-cd-card.is-soon{
  background:linear-gradient(120deg,var(--surface),var(--tool-accent,var(--violet)));
}
.tool-goal-fill{background:linear-gradient(90deg,var(--tool-accent-strong,var(--primary)),var(--primary-2))}
.tool-habit-row.is-done{
  background:color-mix(in srgb,var(--mint) 55%,transparent);
  border-radius:14px;padding-inline:8px;margin-inline:-8px;
}
.tool-note{
  background:linear-gradient(135deg,var(--tool-accent,var(--violet)),var(--violet));
}

html.theme-dark .tool-hub-banner{
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(155,134,255,.2),transparent 55%),
    linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);
}
html.theme-dark .tool-hub-banner-art img,
html.theme-dark .tool-featured-ico{background:rgba(255,255,255,.08)}
html.theme-dark .tool-hero--visual{
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(255,255,255,.04),transparent 50%),
    linear-gradient(145deg,var(--surface) 30%,var(--surface-2) 100%);
}
html.theme-dark .tool-viz-card{background:var(--surface)}
html.theme-dark .tool-pill{background:rgba(255,255,255,.1)}

@supports not (background: color-mix(in srgb, red 50%, blue)){
  .tool-hub-card::before{opacity:.9}
  .tool-page .tool-result{background:var(--soft)}
  .tool-hero-ring{border-color:rgba(109,74,255,.35)}
  .tool-check-mark{border-color:var(--line)}
  .tool-check:has(input:checked){box-shadow:0 6px 16px rgba(232,137,168,.2)}
  .tool-sex-opt:has(input:checked){box-shadow:0 6px 16px rgba(109,74,255,.18)}
  .tool-page--period .tool-form{background:var(--surface)}
  .tool-period-pcard--period{border-color:rgba(232,90,122,.35)}
  .tool-period-ring-center{background:rgba(255,234,242,.7)}
}

/* Cleaner hub + interpret blocks */
.tool-hub-banner--clean{padding:16px}
.tool-hub-banner--clean .tool-hub-lead{display:none}
.tool-hub-card--clean{
  align-items:center;
  min-height:88px;
  padding:14px 12px;
  border-radius:20px;
  background:
    linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--tool-accent,var(--violet)) 40%,var(--surface)));
  box-shadow:0 10px 26px rgba(49,35,94,.07);
}
.tool-hub-card--clean strong{
  font-size:14.5px;line-height:1.35;padding-left:8px;
}
.tool-hub-card--clean .hub-chevron{opacity:.45}
.tool-hub-card--clean:hover .hub-chevron{opacity:1;color:var(--tool-accent-ink,var(--primary))}
.tool-featured-card strong{margin-top:2px}
.tool-featured-card > span{display:none}
.tool-hero--compact{padding:12px 14px;min-height:88px}
.tool-hero--compact .tool-title{margin:0;font-size:20px}
.tool-hero--compact .tool-lead{display:none}
.tool-interpret{
  margin:12px 0 4px;padding:14px;border-radius:16px;text-align:right;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--tool-accent-strong,var(--primary)) 20%,var(--line));
  box-shadow:0 8px 20px rgba(49,35,94,.05);
}
.tool-interpret[hidden]{display:none!important}
.tool-interpret-title{
  margin:0 0 10px;font-size:15px;font-weight:900;color:var(--tool-accent-ink,var(--primary));
}
.tool-interpret-sub{
  margin:14px 0 8px;font-size:13.5px;font-weight:900;color:var(--ink);
}
.tool-interpret p{
  margin:0 0 10px;font-size:13.5px;line-height:1.85;font-weight:650;color:var(--ink);
}
.tool-interpret p:last-child{margin-bottom:0}
.tool-interpret-list{
  margin:0;padding:0 16px 0 0;text-align:right;
}
.tool-interpret-list li{
  margin:0 0 8px;font-size:13px;line-height:1.7;font-weight:650;color:var(--ink);
}
.tool-interpret-note{
  margin-top:8px!important;font-size:12px!important;color:var(--muted)!important;font-weight:700!important;
}
.tool-result-hint{max-width:40ch}
html.theme-dark .tool-interpret{background:var(--surface-2)}
html.theme-dark .tool-hub-card--clean{
  background:linear-gradient(145deg,var(--surface),var(--surface-2));
}

/* Dedicated login / OTP screen */
.app.app--auth{
  min-height:100dvh;padding-top:0;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0px);
  position:relative;
  background:
    radial-gradient(ellipse 80% 50% at 100% -10%,rgba(109,74,255,.18),transparent 55%),
    radial-gradient(ellipse 70% 45% at 0% 110%,rgba(255,187,122,.14),transparent 50%),
    var(--bg);
}
.login-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 20px 0;
  position:relative;z-index:2;
}
.login-top-link{
  font-size:13px;font-weight:800;color:var(--muted);
}
.login-top-link:hover{color:var(--primary)}
.login-theme-toggle{width:40px;height:40px;border-radius:12px}
.login-screen{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:16px 16px 28px;
  position:relative;z-index:1;
}
.login-screen-inner{width:min(420px,100%)}
.login-card{
  position:relative;overflow:hidden;
  padding:28px 22px 22px;
  border-radius:24px;
  border:1px solid var(--nj-grad-border);
  background:var(--nj-grad-bg);
  box-shadow:var(--nj-grad-shadow);
  text-align:center;
  animation:loginCardIn .45s cubic-bezier(.22,1,.36,1) both;
}
.login-card-glow{
  position:absolute;inset:auto -30% -45% auto;width:200px;height:200px;border-radius:50%;
  background:rgba(109,74,255,.1);pointer-events:none;
}
@keyframes loginCardIn{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}
}
.login-hero{position:relative;z-index:1;margin:0 auto 22px}
.login-hero-mark{
  display:block;width:72px;height:72px;margin:0 auto 14px;
  border-radius:22px;overflow:hidden;
  box-shadow:0 12px 28px rgba(109,74,255,.22);
  animation:loginMarkIn .55s .08s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loginMarkIn{
  from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:none}
}
.login-hero-mark img{display:block;width:100%;height:100%;object-fit:cover}
.login-brand{
  margin:0 0 4px;font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--ink);
}
.login-title{
  margin:0 0 8px;font-size:15px;font-weight:800;line-height:1.45;color:var(--primary);
}
.login-lead{
  margin:0 auto;max-width:28ch;font-size:13px;font-weight:650;color:var(--muted);line-height:1.7;
}
.login-alert{text-align:right;margin-bottom:16px}
.login-form{position:relative;z-index:1;text-align:right}
.login-label{
  display:block;margin:0 0 8px;font-size:13px;font-weight:800;color:var(--ink);
}
.login-phone{
  display:flex;align-items:stretch;direction:ltr;
  margin-bottom:16px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);overflow:hidden;
  box-shadow:0 2px 8px rgba(49,35,94,.04);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.login-phone:focus-within{
  border-color:rgba(109,74,255,.45);
  box-shadow:0 0 0 3px rgba(109,74,255,.12);
}
.login-phone-code{
  flex-shrink:0;display:flex;align-items:center;padding:0 14px;
  font-size:14px;font-weight:800;color:var(--muted);
  border-inline-end:1px solid var(--line);background:var(--soft);
}
.login-phone input{
  flex:1;min-width:0;border:0;background:transparent;
  padding:14px 16px;font-size:16px;font-weight:700;color:var(--ink);
  margin:0;outline:none;
}
.login-captcha-row{
  display:flex;flex-direction:column;align-items:stretch;
  gap:10px;margin-bottom:18px;
}
.login-captcha-media{
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.login-captcha-img{
  display:flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:14px;
  border:1px solid var(--line);background:var(--soft);line-height:0;
}
.login-captcha-img img{
  display:block;width:auto;height:40px;max-width:min(140px,100%);
  object-fit:contain;object-position:center;border-radius:4px;
}
.login-captcha-refresh{
  flex-shrink:0;width:44px;height:44px;padding:0;border:0;border-radius:14px;
  background:var(--violet);color:var(--primary);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .12s ease, filter .15s ease;
}
.login-captcha-refresh:hover{filter:brightness(1.05)}
.login-captcha-refresh:active{transform:rotate(-40deg)}
.login-input{
  width:100%;border:1px solid var(--line);border-radius:16px;
  padding:14px 16px;margin:0 0 18px;background:var(--surface);color:var(--ink);
  font-size:15px;font-weight:700;
  box-shadow:0 2px 8px rgba(49,35,94,.04);
}
.login-input--captcha{
  width:100%;margin:0;border-radius:14px;
  padding:12px 14px;font-size:14px;
}
@media (min-width:521px){
  .login-captcha-row{
    flex-direction:row;align-items:center;
  }
  .login-captcha-media{flex:0 0 auto}
  .login-input--captcha{flex:1;min-width:0;width:auto;padding:10px 14px}
}
.login-input:focus,
.login-input--captcha:focus{
  outline:none;border-color:rgba(109,74,255,.45);
  box-shadow:0 0 0 3px rgba(109,74,255,.12);
}
.login-otp-input{
  text-align:center;letter-spacing:.35em;font-size:22px;font-weight:900;
  margin-bottom:20px;
}
.login-submit{
  width:100%;min-height:52px;border-radius:18px;
  font-size:16px;font-weight:900;margin-top:4px;
  box-shadow:0 12px 28px rgba(109,74,255,.28);
  transition:transform .12s ease, filter .15s ease;
}
.login-submit:hover{filter:brightness(1.04)}
.login-submit:active{transform:scale(.98)}
.login-submit:disabled{
  opacity:.45;cursor:not-allowed;
  background:var(--line)!important;color:var(--muted)!important;
  box-shadow:none!important;filter:none!important;
}
.login-foot{
  position:relative;z-index:1;
  margin:18px 0 0;font-size:12.5px;font-weight:650;color:var(--muted);line-height:1.7;
}
.login-foot a{color:var(--primary);font-weight:800}
.login-resend{margin:16px 0 0;text-align:center}
.login-resend a{color:var(--primary);font-weight:800;font-size:14px}
html.theme-dark .app.app--auth{
  background:
    radial-gradient(ellipse 80% 50% at 100% -10%,rgba(155,134,255,.22),transparent 55%),
    radial-gradient(ellipse 70% 45% at 0% 110%,rgba(255,187,122,.1),transparent 50%),
    var(--bg);
}
html.theme-dark .login-phone,
html.theme-dark .login-input{background:var(--surface)}
html.theme-dark .login-phone-code{background:var(--surface-2)}
html.theme-dark .login-captcha-img{background:var(--surface-2)}
html.theme-dark .login-card-glow{background:rgba(155,134,255,.12)}
@media (prefers-reduced-motion:reduce){
  .login-card,.login-hero-mark{animation:none}
}

/* Privacy / terms page */
.pr-page{display:flex;flex-direction:column;gap:14px;max-width:720px;margin:0 auto}
.pr-hero{
  position:relative;overflow:hidden;
  padding:22px 18px 18px;border-radius:24px;
  border:1px solid var(--nj-grad-border);
  background:var(--nj-grad-bg);
  box-shadow:var(--nj-grad-shadow);
}
.pr-hero-glow{
  position:absolute;inset:auto -20% -40% auto;width:180px;height:180px;border-radius:50%;
  background:rgba(109,74,255,.1);pointer-events:none;
}
.pr-kicker{
  position:relative;z-index:1;margin:0 0 6px;
  font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.02em;
}
.pr-title{
  position:relative;z-index:1;margin:0 0 8px;
  font-size:1.15rem;font-weight:850;color:var(--primary);line-height:1.4;
}
.pr-lead{
  position:relative;z-index:1;margin:0;max-width:none;
  font-size:13.5px;font-weight:650;color:var(--muted);line-height:1.75;
  text-align:justify;text-justify:inter-word;
}
.pr-card{
  padding:16px 16px 14px;border-radius:18px;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.pr-card h2{
  margin:0 0 8px;font-size:14.5px;font-weight:850;color:var(--ink);
}
.pr-card p{
  margin:0;font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.85;
  text-align:justify;text-justify:inter-word;
}
.pr-contact{
  padding:18px 16px;border-radius:20px;text-align:center;
  border:1px solid var(--nj-grad-border);
  background:var(--nj-grad-bg-alt);
  box-shadow:var(--nj-grad-shadow);
}
.pr-contact strong{display:block;font-size:15px;font-weight:850;color:var(--ink);margin:0 0 6px}
.pr-contact p{margin:0 0 14px;font-size:13px;font-weight:650;color:var(--muted)}
.pr-contact-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:14px;
  background:var(--primary);color:#fff;font-weight:800;font-size:13.5px;text-decoration:none;
  box-shadow:0 10px 22px rgba(109,74,255,.24);
}
.pr-contact-btn:hover{filter:brightness(1.05)}
html.theme-dark .pr-card{background:var(--surface)}

/* OTP verify — yekzan-like */
.verify-screen{text-align:center}
.verify-title{
  margin:0 0 20px;font-size:20px;font-weight:900;line-height:1.55;
  letter-spacing:-.02em;color:var(--ink);max-width:22ch;margin-inline:auto;
}
.verify-art{
  margin:0 auto 18px;
  width:min(140px,42vw);height:min(140px,42vw);
  border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  border:3px solid rgba(109,74,255,.22);
  box-shadow:0 10px 28px rgba(109,74,255,.12);
  background:var(--soft);
}
.verify-art img{
  width:118%;height:118%;max-width:none;object-fit:cover;
  filter:none;
}
html.theme-dark .verify-art{border-color:rgba(155,134,255,.35)}
.verify-phone-line{
  margin:0 0 22px;font-size:14px;font-weight:700;line-height:1.7;color:var(--muted);
}
.verify-phone-line strong{color:var(--ink);font-weight:900;letter-spacing:.02em}
.verify-change{
  display:inline-block;margin-inline-start:6px;color:var(--primary);
  font-weight:900;font-size:13.5px;
}
.verify-form{text-align:center}
.verify-otp-row{
  display:flex;justify-content:center;gap:10px;direction:ltr;
  margin:0 0 22px;
}
.verify-otp-cell{
  width:46px;height:46px;padding:0;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);
  text-align:center;font-size:20px;font-weight:900;color:var(--ink);
  box-shadow:0 2px 8px rgba(49,35,94,.05);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.verify-otp-cell:focus{
  outline:none;border-color:rgba(109,74,255,.5);
  box-shadow:0 0 0 3px rgba(109,74,255,.14);
}
.verify-submit{margin-top:4px}
.verify-resend-wrap{
  margin:18px 0 0;font-size:13px;font-weight:650;color:var(--muted);line-height:1.6;
}
.verify-resend-btn{
  display:inline-block;margin-inline-start:4px;color:var(--muted);
  font-weight:800;pointer-events:none;opacity:.55;
}
.verify-resend-btn.is-ready{
  color:var(--primary);pointer-events:auto;opacity:1;
}
@media(max-width:380px){
  .verify-otp-row{gap:7px}
  .verify-otp-cell{width:42px;height:42px;font-size:18px}
}
html.theme-dark .verify-otp-cell{background:var(--surface)}

/* —— Subscription purchase —— */
.sub-page{max-width:560px;margin:0 auto;padding:8px 0 28px}
.sub-success{
  text-align:center;padding:22px 18px;margin-bottom:16px;border-radius:22px;
  background:var(--nj-grad-bg);border:1px solid var(--nj-grad-border);box-shadow:var(--nj-grad-shadow)
}
.sub-success p{margin:0 0 14px;font-weight:800;line-height:1.7}
.sub-hero{
  position:relative;overflow:hidden;border-radius:20px;padding:14px 14px;
  background:
    radial-gradient(circle at 88% 0%,rgba(255,187,122,.22),transparent 42%),
    radial-gradient(circle at 8% 100%,rgba(109,74,255,.16),transparent 48%),
    linear-gradient(165deg,#2a2144 0%,#4a35a8 48%,#6d4aff 100%);
  color:#fff;box-shadow:0 12px 28px rgba(74,53,168,.24);
  animation:subHeroIn .45s ease both
}
.sub-hero-glow{
  position:absolute;inset:-50% -25% auto auto;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%);
  pointer-events:none;animation:subGlow 4.5s ease-in-out infinite
}
.sub-hero-row{position:relative;display:flex;align-items:center;gap:12px}
.sub-hero-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)
}
.sub-hero-mark img{display:block;filter:brightness(0) invert(1)}
.sub-hero-copy{min-width:0}
.sub-hero-title{
  margin:0;font-size:18px;font-weight:900;letter-spacing:-.03em;line-height:1.3
}
.sub-hero-text{margin:3px 0 0;font-size:13px;line-height:1.5;opacity:.9}
.sub-status{
  margin:12px 0 0;padding:12px 14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)
}
.sub-status--active{
  background:
    radial-gradient(circle at 100% 0%,rgba(109,74,255,.16),transparent 50%),
    var(--violet);
  border-color:rgba(109,74,255,.28)
}
.sub-status-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.sub-status-top strong{font-size:14px;font-weight:900}
.sub-status p{margin:0;font-size:13px;font-weight:650;color:var(--muted);line-height:1.55}
.sub-status--active p{color:var(--ink)}
.sub-status-remain{margin:0;font-size:14px;font-weight:800;color:var(--ink);line-height:1.6;text-align:center}
.sub-status-pill{
  flex-shrink:0;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:900;
  color:#fff;background:linear-gradient(135deg,#6d4aff,#8a6cff)
}
.sub-plans{display:grid;gap:10px;margin:14px 0 12px}
.sub-history{margin-top:16px}
.sub-history-title{margin:0 0 10px;font-size:15px;font-weight:900}
.sub-history-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sub-history-item{
  padding:12px 13px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm)
}
.sub-history-main,.sub-history-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.sub-history-main strong{font-size:13px;font-weight:800}
.sub-history-main span,.sub-history-meta span{font-size:12px;font-weight:650;color:var(--muted)}
.sub-history-meta{margin-top:6px}
.sub-history-end{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--muted)}
.sub-history-st{padding:2px 8px;border-radius:999px;font-weight:800!important}
.sub-history-st--ok{color:var(--mint-ink)!important;background:var(--mint)}
.sub-history-st--pending{color:var(--peach-ink)!important;background:var(--peach)}
.sub-history-st--fail{color:#9f1239!important;background:#ffe4e6}
.sub-history-empty{
  margin:0;padding:14px;border-radius:16px;text-align:center;
  font-size:13px;font-weight:700;color:var(--muted);
  background:var(--soft);border:1px dashed var(--line)
}
.pe-sub--vip{color:var(--primary)!important;font-weight:800}
.pe-chip--vip{
  background:linear-gradient(135deg,#6d4aff,#8a6cff)!important;color:#fff!important;border-color:transparent!important
}
.pe-chip--vip svg{opacity:1}
html.theme-dark .sub-history-st--fail{color:#fecdd3!important;background:rgba(225,29,72,.22)}
.sub-plan{
  position:relative;display:grid;gap:4px;width:100%;text-align:start;cursor:pointer;
  padding:14px 14px 12px;border-radius:18px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
  animation:subPlanIn .45s ease both
}
.sub-plan:nth-child(1){animation-delay:.04s}
.sub-plan:nth-child(2){animation-delay:.1s}
.sub-plan:nth-child(3){animation-delay:.16s}
.sub-plan:hover{transform:translateY(-1px)}
.sub-plan:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.sub-plan-badge{
  position:absolute;top:-9px;inset-inline-end:12px;z-index:1;
  padding:4px 9px;border-radius:999px;font-size:11px;font-weight:900;
  background:var(--surface-2);color:var(--primary);border:1px solid var(--nj-grad-border);
  box-shadow:0 6px 14px rgba(49,35,94,.08)
}
.sub-plan--start .sub-plan-badge{color:var(--muted);background:var(--soft)}
.sub-plan--value .sub-plan-badge{color:var(--mint-ink);background:var(--mint);border-color:transparent}
.sub-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sub-plan-name{font-size:14px;font-weight:800}
.sub-plan-check{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  border:1.5px solid var(--line);color:transparent;background:transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease
}
.sub-plan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sub-plan-price strong{font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.sub-plan-price span{font-size:12px;font-weight:700;color:var(--muted)}
.sub-plan-old{font-size:13px;font-weight:700;color:var(--muted,#8b8499);text-decoration:line-through;margin-left:2px}
.sub-plan.has-coupon .sub-plan-price strong{color:#067647}
.shop-coupon-box{margin:0 0 14px}
.sub-plan-hint{font-size:12px;font-weight:650;color:var(--muted);line-height:1.45}
.sub-plan-discount{
  display:inline-flex;justify-self:start;align-self:start;
  width:max-content;max-width:100%;
  margin-top:2px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:900;line-height:1.35;white-space:nowrap;
  color:#fff;background:#e11d48;border:1px solid #be123c;
  box-shadow:0 4px 10px rgba(225,29,72,.22)
}
/* فقط پلن انتخاب‌شده هایلایت بنفش دارد؛ is-featured فقط بج «پیشنهاد ویژه» را نگه می‌دارد */
.sub-plan.is-selected{
  padding:16px 15px 13px;border-width:2px;border-color:rgba(109,74,255,.55);
  background:
    radial-gradient(circle at 100% 0%,rgba(109,74,255,.18),transparent 46%),
    radial-gradient(circle at 0% 100%,rgba(255,187,122,.14),transparent 48%),
    var(--nj-grad-bg);
  box-shadow:0 12px 28px rgba(109,74,255,.16)
}
.sub-plan.is-selected .sub-plan-check{
  background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.05)
}
.sub-plan.is-selected .sub-plan-name{font-size:15px}
.sub-plan.is-selected .sub-plan-price strong{font-size:26px;color:var(--primary)}
.sub-plan.is-featured .sub-plan-badge{
  background:linear-gradient(135deg,#6d4aff,#8a6cff);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(109,74,255,.28);animation:subBadgePulse 2.4s ease-in-out infinite
}
.sub-cta{margin:0 0 14px}
.sub-cta-btn{
  width:100%;min-height:50px;font-size:15px;font-weight:900;border-radius:16px;
  box-shadow:0 12px 26px rgba(109,74,255,.26);
  transition:transform .18s ease,box-shadow .18s ease
}
.sub-cta-btn:active{transform:scale(.985)}
.sub-cta-note{margin:8px 0 0;text-align:center;font-size:12px;font-weight:650;color:var(--muted)}
.sub-benefits{
  border-radius:18px;padding:14px 14px 12px;
  background:var(--nj-grad-bg);border:1px solid var(--nj-grad-border);box-shadow:var(--nj-grad-shadow)
}
.sub-benefits-title{
  margin:0 0 10px;font-size:14px;font-weight:900;color:var(--ink);line-height:1.45
}
.sub-benefits-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sub-benefits-list li{
  position:relative;padding:8px 10px;padding-inline-start:34px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  font-size:13px;font-weight:700;line-height:1.5;color:var(--ink)
}
.sub-benefits-list li::before{
  content:"";position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d4aff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/11px no-repeat,
    var(--violet)
}
@keyframes subHeroIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes subPlanIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes subGlow{0%,100%{opacity:.7;transform:translate(0,0)}50%{opacity:1;transform:translate(-10px,6px)}}
@keyframes subBadgePulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
html.theme-dark .sub-hero{
  background:
    radial-gradient(circle at 88% 0%,rgba(255,187,122,.16),transparent 42%),
    radial-gradient(circle at 8% 100%,rgba(155,134,255,.28),transparent 48%),
    linear-gradient(165deg,#1a1528 0%,#2f2550 48%,#4a3790 100%);
  box-shadow:0 12px 28px rgba(0,0,0,.4)
}
html.theme-dark .sub-plan.is-selected .sub-plan-price strong{color:var(--primary-2)}
html.theme-dark .sub-plan-badge{box-shadow:none}
html.theme-dark .sub-plan-discount{
  color:#fff;background:#f43f5e;border-color:#e11d48;
  box-shadow:0 4px 12px rgba(244,63,94,.28)
}
html.theme-dark .sub-benefits-list li::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5a4ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/11px no-repeat,
    var(--violet)
}
@media (prefers-reduced-motion:reduce){
  .sub-hero,.sub-plan,.sub-hero-glow,.sub-plan.is-featured .sub-plan-badge{animation:none}
  .sub-plan,.sub-plan.is-selected{transform:none}
}

/* Booking — aligned with subscription look */
.bk-page{max-width:560px;margin:0 auto;padding:8px 0 28px}
.bk-success{
  margin:0 0 14px;padding:16px;border-radius:18px;text-align:center;
  background:var(--mint);border:1px solid color-mix(in srgb,var(--mint-ink) 18%,transparent);
}
.bk-success-title{margin:0 0 6px;font-size:17px;font-weight:900;color:var(--mint-ink)}
.bk-success-text{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.bk-hero{
  position:relative;overflow:hidden;border-radius:22px;padding:18px 16px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 0%,rgba(255,187,122,.35),transparent 42%),
    radial-gradient(circle at 8% 100%,rgba(109,74,255,.35),transparent 48%),
    linear-gradient(165deg,#5b3fd4 0%,#6d4aff 48%,#8a6cff 100%);
  box-shadow:0 12px 28px rgba(109,74,255,.28);
  animation:bkIn .45s ease both;
}
.bk-hero-glow{
  position:absolute;width:160px;height:160px;border-radius:50%;pointer-events:none;
  right:-30px;top:-40px;background:rgba(255,255,255,.12);
  animation:bkGlow 6s ease-in-out infinite;
}
.bk-hero-row{position:relative;display:flex;align-items:center;gap:12px}
.bk-hero-mark{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.18);color:#fff;
}
.bk-hero-copy{min-width:0}
.bk-hero-title{margin:0;font-size:1.35rem;font-weight:900;line-height:1.25;letter-spacing:-.02em}
.bk-hero-text{margin:3px 0 0;font-size:13px;line-height:1.5;opacity:.9}
.bk-form{margin:0}
.bk-plans{display:grid;gap:10px;margin:14px 0 14px}
.bk-plan{
  position:relative;display:grid;gap:4px;width:100%;text-align:start;cursor:pointer;
  padding:14px 14px 12px;border-radius:18px;border:1px solid rgba(109,74,255,.18);
  background:
    linear-gradient(145deg,rgba(109,74,255,.14) 0%,rgba(138,108,255,.08) 42%,var(--surface) 100%);
  color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
  animation:bkPlanIn .45s ease both;
}
.bk-plan:nth-child(1){animation-delay:.04s}
.bk-plan:nth-child(2){animation-delay:.1s}
.bk-plan:nth-child(3){animation-delay:.16s}
.bk-plan:hover{transform:translateY(-1px)}
.bk-plan:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.bk-plan-badge{
  position:absolute;top:-9px;inset-inline-end:12px;z-index:1;
  padding:4px 9px;border-radius:999px;font-size:11px;font-weight:900;
  background:var(--surface-2);color:var(--primary);border:1px solid var(--nj-grad-border,var(--line));
  box-shadow:0 6px 14px rgba(49,35,94,.08);
}
.bk-plan--start .bk-plan-badge{color:var(--muted);background:var(--soft)}
.bk-plan--value .bk-plan-badge{color:var(--mint-ink);background:var(--mint);border-color:transparent}
.bk-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bk-plan-name{font-size:14px;font-weight:800}
.bk-plan-check{
  width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(109,74,255,.28);
  display:grid;place-items:center;color:transparent;background:rgba(255,255,255,.65);flex-shrink:0;
}
.bk-plan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.bk-plan-price strong{font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.bk-plan-price span{font-size:12px;font-weight:700;color:var(--muted)}
.bk-plan-hint{font-size:12px;font-weight:650;color:var(--muted);line-height:1.45}
.bk-plan-discount{
  display:inline-flex;width:fit-content;max-width:max-content;justify-self:start;align-self:start;
  margin-top:2px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:850;line-height:1.2;white-space:nowrap;
  color:#fff;background:#f43f5e;border:1px solid #e11d48;
}
.bk-plan.is-selected{
  border-color:rgba(109,74,255,.55);
  background:
    linear-gradient(145deg,rgba(109,74,255,.24) 0%,rgba(138,108,255,.14) 46%,var(--surface) 100%);
  box-shadow:0 0 0 4px rgba(109,74,255,.14),0 12px 26px rgba(109,74,255,.16);
  transform:translateY(-2px);
}
.bk-plan.is-selected .bk-plan-check{background:var(--primary);border-color:var(--primary);color:#fff}
.bk-plan.is-selected .bk-plan-name{font-size:15px}
.bk-plan.is-selected .bk-plan-price strong{font-size:26px;color:var(--primary)}
.bk-plan.is-featured .bk-plan-badge{
  background:linear-gradient(135deg,#6d4aff,#8a6cff);color:#fff;border-color:transparent;
  animation:bkBadgePulse 2.4s ease-in-out infinite;
}
.bk-fields{
  display:grid;gap:14px;margin:0 0 14px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);
}
.bk-field{display:flex;flex-direction:column;gap:7px;position:relative;z-index:1}
.bk-label{font-size:13.5px;font-weight:800;color:var(--ink)}
.bk-field-note{margin:0;font-size:12px;font-weight:650;color:var(--muted)}
.bk-input{
  width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  background:var(--soft);color:var(--ink);font:inherit;margin:0;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.bk-input:focus{
  outline:none;border-color:rgba(109,74,255,.45);background:var(--surface);
  box-shadow:0 0 0 4px rgba(109,74,255,.12);
}
.bk-textarea{
  min-height:110px;resize:vertical;line-height:1.75;
  position:relative;z-index:2;pointer-events:auto;-webkit-user-select:text;user-select:text;
}
.bk-date-wrap{position:relative}
.bk-input--date{padding:12px 46px 12px 14px;cursor:pointer;text-align:left;direction:ltr}
.bk-date-ico{
  position:absolute;right:12px;left:auto;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:10px;pointer-events:none;
  display:grid;place-items:center;color:var(--primary);background:rgba(109,74,255,.1);
}
.bk-time{
  padding:10px;border-radius:16px;border:1px solid rgba(109,74,255,.14);
  background:linear-gradient(180deg,rgba(109,74,255,.08) 0%,var(--soft) 100%);
}
.bk-time-slots{
  display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-start;direction:ltr;
}
.bk-time-slot{
  min-width:54px;min-height:34px;padding:0 6px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.bk-time-slot:hover{border-color:rgba(109,74,255,.35);transform:translateY(-1px)}
.bk-time-slot:active{transform:scale(.97)}
.bk-time-slot.is-on{
  background:linear-gradient(135deg,#6d4aff,#8a6cff);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(109,74,255,.28);
}
.bk-cta{margin:0 0 14px}
.bk-cta-btn{
  width:100%;min-height:50px;border-radius:16px;font-size:15px;font-weight:850;
  box-shadow:0 12px 26px rgba(109,74,255,.28);transition:transform .15s ease,filter .15s ease;
}
.bk-cta-btn:active{transform:scale(.985)}
.bk-cta-note{margin:8px 0 0;text-align:center;font-size:12px;font-weight:650;color:var(--muted)}
.bk-cta-note strong{color:var(--primary);font-weight:850}
.bk-benefits{
  padding:16px;border-radius:18px;background:var(--soft);border:1px solid var(--line);
}
.bk-benefits-title{margin:0 0 10px;font-size:14.5px;font-weight:900}
.bk-benefits-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bk-benefits-list li{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:12px;
  background:var(--surface);font-size:13px;font-weight:700;line-height:1.55;color:var(--ink);
}
.bk-benefits-list li::before{
  content:"";flex:0 0 18px;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d4aff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/11px no-repeat,
    var(--violet);
}
@keyframes bkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bkPlanIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bkGlow{0%,100%{opacity:.7;transform:translate(0,0)}50%{opacity:1;transform:translate(-10px,6px)}}
@keyframes bkBadgePulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
html.theme-dark .bk-hero{
  background:
    radial-gradient(circle at 88% 0%,rgba(255,187,122,.16),transparent 42%),
    radial-gradient(circle at 8% 100%,rgba(155,134,255,.28),transparent 48%),
    linear-gradient(165deg,#1a1528 0%,#2f2550 48%,#4a3790 100%);
  box-shadow:0 12px 28px rgba(0,0,0,.4);
}
html.theme-dark .bk-plan{
  background:linear-gradient(145deg,rgba(155,134,255,.18) 0%,rgba(155,134,255,.08) 42%,var(--surface) 100%);
  border-color:rgba(155,134,255,.22);
}
html.theme-dark .bk-plan.is-selected{
  background:linear-gradient(145deg,rgba(155,134,255,.28) 0%,rgba(155,134,255,.12) 46%,var(--surface) 100%);
}
html.theme-dark .bk-plan.is-selected .bk-plan-price strong,
html.theme-dark .bk-cta-note strong{color:var(--primary-2)}
html.theme-dark .bk-plan-badge{box-shadow:none}
html.theme-dark .bk-plan-discount{
  color:#fff;background:#f43f5e;border-color:#e11d48;box-shadow:0 4px 12px rgba(244,63,94,.28);
}
html.theme-dark .bk-time{
  background:linear-gradient(180deg,rgba(155,134,255,.12) 0%,var(--soft) 100%);
  border-color:rgba(155,134,255,.2);
}
html.theme-dark .bk-benefits-list li::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5a4ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/11px no-repeat,
    var(--violet);
}
html.theme-dark .bk-date-ico{background:rgba(155,134,255,.16)}
@media (prefers-reduced-motion:reduce){
  .bk-hero,.bk-plan,.bk-hero-glow,.bk-plan.is-featured .bk-plan-badge{animation:none}
  .bk-plan,.bk-plan.is-selected{transform:none}
}

/* Star club phase 3 */
.star-level-panel .star-level-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.star-level-earned{font-size:12px;font-weight:800;color:var(--muted)}
.star-level-bar{height:10px;border-radius:999px;background:rgba(0,0,0,.06);overflow:hidden}
.star-level-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffc44d,#6d4aff)}
.star-badge-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.star-badge-list li{font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.08)}
.star-badge-list li.is-on{background:rgba(34,197,94,.12);color:#067647;border-color:rgba(34,197,94,.28)}
.star-badge-list li.is-off{opacity:.45;background:rgba(0,0,0,.03)}
.star-race-me{margin:0 0 10px;font-size:13px;font-weight:700}
.star-race-copy{margin:0 0 12px;font-size:13px;line-height:1.85;font-weight:650;color:var(--muted,#5b5670)}
.star-race-copy p{margin:0 0 4px}
.star-race-prizes{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-direction:column;gap:2px}
.star-race-prizes li{font-weight:800;color:var(--text,#1f1635)}
.star-race-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.star-race-list li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.03);font-size:13px;font-weight:700}
.star-race-list li.is-me{background:rgba(109,74,255,.1);outline:1px solid rgba(109,74,255,.25)}
.star-race-rank{font-weight:900;color:var(--primary,#6d4aff)}
.star-race-user{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:inherit}
.star-race-user:hover .star-race-name{color:var(--primary,#6d4aff)}
.star-race-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#ece8f8;flex:0 0 auto}
.star-race-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star-race-score{font-weight:900}
html.theme-dark .star-race-prizes li{color:#f5f2ff}
html.theme-dark .star-race-avatar{background:rgba(255,255,255,.08)}
html.theme-dark .star-level-bar{background:rgba(255,255,255,.08)}
html.theme-dark .star-race-list li{background:rgba(255,255,255,.04)}

/* Physical shop — Basalam-inspired (jetshop-like) */
body.shop-flush .page-wrap{max-width:100%;padding-left:10px;padding-right:10px}
body.shop-flush .page-card{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;border-radius:0!important
}
body.shop-basalam{
  --bs-bg:#f3f3f4;
  --bs-surface:#fff;
  --bs-ink:#0d0c22;
  --bs-muted:#3d3d4e;
  --bs-soft:#f3f3f4;
  --bs-line:#e6e6ea;
  --bs-accent:#ff5c35;
  --bs-accent-soft:rgba(255,92,53,.1);
  --bs-radius:16px;
  --bs-shadow:0 1px 2px rgba(13,12,34,.04),0 8px 24px rgba(13,12,34,.06);
  background:var(--bs-bg)!important
}
html.theme-dark body.shop-basalam{
  --bs-bg:#14131a;
  --bs-surface:#1c1b24;
  --bs-ink:#f4f2ff;
  --bs-muted:#b7b4c7;
  --bs-soft:#262433;
  --bs-line:rgba(255,255,255,.1);
  --bs-accent:#ff7a57;
  --bs-accent-soft:rgba(255,122,87,.14);
  --bs-shadow:0 8px 24px rgba(0,0,0,.28)
}
body.shop-basalam .page-shell,
body.shop-basalam .page-wrap{background:transparent}
.shop-page{max-width:960px;margin:0 auto;padding:8px 0 36px;color:var(--bs-ink,#0d0c22)}
.shop-page-title{margin:4px 0 16px;font-size:1.25rem;font-weight:800;color:var(--bs-ink,#0d0c22)}
.shop-page--catalog{padding-top:4px}

/* Booth header — rich purple gradient hero */
.shop-booth{
  position:relative;overflow:hidden;
  margin:0 0 16px;padding:20px 16px 16px;border-radius:24px;
  border:1px solid rgba(109,74,255,.28);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.42),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(255,187,122,.22),transparent 46%),
    linear-gradient(145deg,#7c5cff 0%,#6d4aff 42%,#5b3de6 100%);
  box-shadow:0 16px 40px rgba(109,74,255,.28),inset 0 1px 0 rgba(255,255,255,.28);
  color:#fff
}
.shop-booth::before{
  content:"";position:absolute;inset:-35% -12% auto auto;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
  pointer-events:none
}
.shop-booth::after{
  content:"";position:absolute;inset:auto auto -45% -18%;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,214,255,.28),transparent 70%);
  pointer-events:none
}
.shop-booth__main{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.shop-booth__logo{
  width:70px;height:70px;border-radius:20px;overflow:hidden;flex-shrink:0;
  background:rgba(255,255,255,.95);border:2px solid rgba(255,255,255,.55);
  box-shadow:0 12px 28px rgba(34,20,90,.28);
  display:flex;align-items:center;justify-content:center
}
.shop-booth__logo img{width:100%;height:100%;object-fit:cover;display:block}
.shop-booth__fallback{font-weight:900;color:#6d4aff;font-size:18px}
.shop-booth__title{margin:0;font-size:1.28rem;font-weight:900;line-height:1.35;color:#fff;text-shadow:0 1px 12px rgba(34,20,90,.22)}
.shop-booth__place{
  margin:8px 0 0;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px)
}
.shop-booth__stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;
  padding:12px 8px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px)
}
.shop-booth__stats > div + div{border-inline-start:1px solid rgba(255,255,255,.22)}
.shop-booth__stats span{display:block;font-size:15px;font-weight:900;color:#fff}
.shop-booth__stats em{display:block;margin-top:3px;font-style:normal;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82)}
html.theme-dark .shop-booth{
  border-color:rgba(155,134,255,.4);
  background:
    radial-gradient(circle at 100% 0%,rgba(185,170,255,.28),transparent 44%),
    radial-gradient(circle at 0% 100%,rgba(255,187,122,.14),transparent 48%),
    linear-gradient(145deg,#5a48b8 0%,#46368f 45%,#2f2658 100%);
  box-shadow:0 16px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(185,170,255,.18)
}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.shop-toolbar__count{margin:0;font-size:13px;font-weight:700;color:var(--bs-muted,#3d3d4e)}

/* Product grid / cards */
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:720px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.shop-card{
  display:flex;flex-direction:column;border-radius:var(--bs-radius,16px);overflow:hidden;
  background:var(--bs-surface,#fff);border:1px solid var(--bs-line,#e6e6ea);
  box-shadow:var(--bs-shadow);color:inherit;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease
}
.shop-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(13,12,34,.1)}
.shop-card-media{
  display:block;aspect-ratio:1;overflow:hidden;background:var(--bs-soft,#f3f3f4)
}
.shop-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:8px 8px 0 0
}
.shop-card-body{display:flex;flex-direction:column;gap:8px;padding:12px 12px 14px;flex:1}
.shop-card-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--bs-ink,#0d0c22);text-decoration:none;font-size:13.5px;font-weight:500;line-height:1.55;min-height:2.9em
}
.shop-card-price{display:flex;align-items:baseline;gap:4px;color:var(--bs-ink,#0d0c22)}
.shop-card-price strong{font-size:16px;font-weight:800;letter-spacing:-.01em}
.shop-card-price span{font-size:12px;font-weight:600;color:var(--bs-muted,#3d3d4e)}
.shop-card-tags{display:flex;flex-wrap:wrap;gap:4px}
.shop-card-tags span,
.shop-chip{
  display:inline-flex;align-items:center;padding:2px 6px;border-radius:4px;
  background:var(--bs-soft,#f3f3f4);color:var(--bs-muted,#3d3d4e);
  font-size:11.5px;font-weight:600
}
.shop-chip--danger{background:rgba(180,35,24,.1);color:#b42318}
.shop-card-add{margin-top:auto}
/* Beat .legacy-content button[type=submit] purple fill */
body.shop-basalam .legacy-content button.shop-add-link[type=submit],
body.shop-basalam .legacy-content a.shop-add-link,
body.shop-basalam button.shop-add-link[type=submit],
body.shop-basalam a.shop-add-link,
body.shop-basalam .shop-add-link{
  display:inline-flex!important;align-items:center;gap:4px;
  width:auto!important;min-height:0!important;padding:0!important;margin:0;
  border:0!important;border-radius:0!important;
  background:transparent!important;background-image:none!important;
  box-shadow:none!important;
  color:var(--bs-accent,#ff5c35)!important;
  font:inherit;font-size:12.5px!important;font-weight:800!important;
  cursor:pointer;text-decoration:none!important;line-height:1.4
}
body.shop-basalam .legacy-content button.shop-add-link[type=submit]:hover,
body.shop-basalam .shop-add-link:hover{
  filter:brightness(.95);background:transparent!important;color:var(--bs-accent,#ff5c35)!important
}
body.shop-basalam .shop-add-link--disabled,
body.shop-basalam span.shop-add-link--disabled{
  color:var(--bs-muted,#3d3d4e)!important;cursor:default;opacity:.7;background:transparent!important
}
.shop-add-pill{display:none} /* legacy */

.shop-ship-note{
  display:inline-flex;align-items:center;gap:4px;margin:2px 0 0;
  font-size:11.5px;font-weight:600;color:var(--bs-muted,#3d3d4e);
  background:var(--bs-soft,#f3f3f4);border-radius:4px;padding:3px 8px;width:fit-content
}
.shop-stock-note{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:600;color:var(--bs-muted,#3d3d4e);
  background:var(--bs-soft,#f3f3f4);border-radius:4px;padding:3px 8px;width:fit-content
}
.shop-stock-note--out{color:#b42318;background:rgba(180,35,24,.1)}

/* Product detail */
.shop-detail{display:block;padding-top:2px}
.shop-detail-panel{
  display:grid;gap:0;overflow:hidden;border-radius:var(--bs-radius,16px);
  background:var(--bs-surface,#fff);border:1px solid var(--bs-line,#e6e6ea);
  box-shadow:var(--bs-shadow)
}
@media (min-width:720px){
  .shop-detail-panel{grid-template-columns:1.05fr .95fr;align-items:stretch}
}
.shop-detail-media{
  position:relative;overflow:hidden;aspect-ratio:1;background:var(--bs-soft,#f3f3f4)
}
@media (min-width:720px){.shop-detail-media{aspect-ratio:auto;min-height:100%}}
.shop-detail-media img{width:100%;height:100%;object-fit:cover;display:block}
.shop-detail-body{padding:18px 16px 20px;display:flex;flex-direction:column;gap:10px}
.shop-detail-vendor{
  margin:0;width:fit-content;font-size:13px;font-weight:700;
  color:var(--bs-accent,#ff5c35);text-decoration:none
}
.shop-detail-body h1{margin:0;font-size:1.2rem;font-weight:800;line-height:1.45;color:var(--bs-ink,#0d0c22)}
.shop-price{margin:0;display:flex;align-items:baseline;gap:6px;color:var(--bs-ink,#0d0c22)}
.shop-price strong{font-size:1.45rem;font-weight:900}
.shop-price span{font-size:13px;font-weight:600;color:var(--bs-muted,#3d3d4e)}
.shop-detail-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.shop-ship{display:none!important}
.shop-desc{
  margin:4px 0 0;padding:0;border:0;background:transparent
}
.shop-desc h2{margin:0 0 8px;font-size:14px;font-weight:800;color:var(--bs-ink,#0d0c22)}
.shop-desc__text{
  margin:0;padding:12px 14px;border-radius:12px;
  font-size:13.5px;line-height:2;white-space:pre-line;color:var(--bs-ink,#0d0c22);
  background:var(--bs-soft,#f3f3f4);border:1px solid var(--bs-line,#e6e6ea)
}
.shop-detail-actions{margin-top:6px;display:flex;flex-direction:column;gap:8px}
.shop-add-form{display:flex;flex-direction:column;gap:10px}
.shop-add-form label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:700}
.shop-add-form input[type=number]{width:96px}
body.shop-basalam .legacy-content button.shop-btn-primary[type=submit],
body.shop-basalam .legacy-content a.shop-btn-primary,
body.shop-basalam button.shop-btn-primary,
body.shop-basalam a.shop-btn-primary,
body.shop-basalam .shop-btn-primary,
body.shop-basalam .shop-detail-cta{
  display:inline-flex!important;align-items:center;justify-content:center;width:100%!important;min-height:46px;
  border:0!important;border-radius:12px!important;padding:10px 14px!important;cursor:pointer;text-decoration:none;text-align:center;
  font:inherit;font-size:15px!important;font-weight:800!important;color:#fff!important;
  background:var(--bs-accent,#ff5c35)!important;background-image:none!important;
  box-shadow:0 8px 18px rgba(255,92,53,.28)!important
}
body.shop-basalam .shop-btn-primary:hover,
body.shop-basalam .legacy-content button.shop-btn-primary[type=submit]:hover{filter:brightness(1.03);background:var(--bs-accent,#ff5c35)!important;color:#fff!important}
body.shop-basalam .shop-btn-primary:disabled{opacity:.5;cursor:default;box-shadow:none!important}
body.shop-basalam .legacy-content a.shop-btn-ghost,
body.shop-basalam .shop-btn-ghost,
body.shop-basalam .shop-detail-secondary{
  display:inline-flex!important;align-items:center;justify-content:center;width:100%!important;min-height:42px;
  border:1px solid var(--bs-line,#e6e6ea)!important;border-radius:12px!important;padding:9px 14px!important;
  background:var(--bs-surface,#fff)!important;color:var(--bs-ink,#0d0c22)!important;
  font:inherit;font-size:14px!important;font-weight:700!important;text-decoration:none!important;text-align:center;
  box-shadow:none!important
}
body.shop-basalam .legacy-content .btn.btn-primary,
body.shop-basalam .legacy-content button.btn.btn-primary[type=submit],
body.shop-basalam .btn.btn-primary{
  background:var(--bs-accent,#ff5c35)!important;border-color:var(--bs-accent,#ff5c35)!important;
  color:#fff!important;box-shadow:0 8px 18px rgba(255,92,53,.28)!important
}

/* Cart */
.shop-cart-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.shop-cart-row{
  display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--bs-radius,16px);
  background:var(--bs-surface,#fff);border:1px solid var(--bs-line,#e6e6ea);box-shadow:var(--bs-shadow)
}
.shop-cart-row img{width:72px;height:72px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--bs-soft)}
.shop-cart-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.shop-cart-meta strong{font-size:14px;font-weight:700;color:var(--bs-ink,#0d0c22)}
.shop-qty-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-top:4px}
.shop-cart-meta input[type=number]{width:72px}
.shop-cart-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:13px;font-weight:800;white-space:nowrap;color:var(--bs-ink)}
.shop-trash-btn{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;color:#b42318;background:rgba(180,35,24,.08);text-decoration:none
}
.shop-trash-btn:hover{background:rgba(180,35,24,.14)}
.shop-summary{
  padding:14px 16px;border-radius:var(--bs-radius,16px);font-size:14px;line-height:1.8;margin-bottom:14px;
  background:var(--bs-surface,#fff);border:1px solid var(--bs-line,#e6e6ea);box-shadow:var(--bs-shadow);
  color:var(--bs-ink,#0d0c22)
}
.shop-min-order-msg{margin:8px 0 0;color:#b42318;font-weight:800;font-size:13px}
body.shop-basalam .btn.btn-primary{
  background:var(--bs-accent,#ff5c35)!important;border-color:var(--bs-accent,#ff5c35)!important;
  box-shadow:0 8px 18px rgba(255,92,53,.28)
}

/* Checkout */
.shop-checkout-subtitle{margin:0 0 12px;font-size:1.05rem;font-weight:800;color:var(--bs-ink)}
.shop-invoice{
  margin:0 0 18px;border-radius:var(--bs-radius,16px);overflow:hidden;
  background:var(--bs-surface,#fff);border:1px solid var(--bs-line,#e6e6ea);box-shadow:var(--bs-shadow)
}
.shop-invoice__head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 16px;background:var(--bs-soft,#f3f3f4);font-weight:800;color:var(--bs-ink)
}
.shop-invoice__block{padding:14px 16px;border-top:1px solid var(--bs-line,#e6e6ea)}
.shop-invoice__block h2{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--bs-muted,#3d3d4e)}
.shop-invoice__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.shop-invoice__items li{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 10px}
.shop-invoice__item-title{font-weight:700;font-size:14px;line-height:1.45;color:var(--bs-ink)}
.shop-invoice__item-meta{grid-column:1;font-size:12px;color:var(--bs-muted)}
.shop-invoice__item-price{grid-row:1 / span 2;align-self:center;font-weight:800;font-size:13px;color:var(--bs-ink);white-space:nowrap}
.shop-invoice__totals{margin:0;display:flex;flex-direction:column;gap:8px}
.shop-invoice__totals > div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.shop-invoice__totals dt{margin:0;color:var(--bs-muted)}
.shop-invoice__totals dd{margin:0;font-weight:700;color:var(--bs-ink)}
.shop-invoice__totals .is-total{margin-top:4px;padding-top:10px;border-top:1px dashed var(--bs-line,#e6e6ea);font-size:15px}
.shop-invoice__totals .is-total dd{color:var(--bs-accent,#ff5c35);font-weight:900}
.shop-invoice__note{margin:0 16px 14px}
.shop-coupon-box{
  margin:0 0 14px;padding:0;overflow:hidden;border-radius:var(--bs-radius,16px);
  background:var(--bs-surface,#fff);border:1px solid var(--bs-line,#e6e6ea);box-shadow:var(--bs-shadow)
}
.shop-coupon-box__head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:0 12px 0 14px;background:var(--bs-soft,#f3f3f4);min-height:46px
}
.shop-coupon-box__toggle{
  flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 0;border:0;background:transparent;cursor:pointer;
  font:inherit;font-weight:800;color:var(--bs-ink,#0d0c22);text-align:right
}
.shop-coupon-box__toggle strong{font-weight:800}
.shop-coupon-box__head-meta{
  font-size:12px;font-weight:700;color:var(--bs-muted,#3d3d4e);white-space:nowrap
}
.shop-coupon-box__wheel-link{
  font-size:12px;font-weight:800;color:var(--primary,#6d4aff);
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap
}
.shop-coupon-box__wheel-link:hover{opacity:.85}
.shop-coupon-box__chevron{
  display:inline-block;width:9px;height:9px;margin-left:4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .18s ease;margin-top:-3px
}
.shop-coupon-box.is-open .shop-coupon-box__chevron{transform:rotate(-135deg);margin-top:3px}
.shop-coupon-box__panel[hidden]{display:none!important}
.shop-coupon-box__row{display:flex;gap:8px;padding:0 14px 14px}
.shop-coupon-box__row--solo{padding-top:12px}
.sub-page .shop-coupon-box,
.bk-page .shop-coupon-box{margin-top:4px}
.shop-coupon-input{
  flex:1;letter-spacing:.06em;font-weight:800;text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
body.shop-basalam .legacy-content button.shop-coupon-apply[type=submit],
body.shop-basalam button.shop-coupon-apply,
.shop-coupon-apply{
  display:inline-flex!important;align-items:center;justify-content:center;
  white-space:nowrap!important;
  width:auto!important;min-width:0!important;min-height:34px!important;
  height:34px!important;padding:0 12px!important;margin:0!important;
  border:0!important;border-radius:10px!important;
  font:inherit;font-size:12.5px!important;font-weight:800!important;
  line-height:1!important;align-self:center;flex:0 0 auto;cursor:pointer;
  color:#fff!important;background:var(--bs-accent,#ff5c35)!important;
  background-image:none!important;box-shadow:0 4px 10px rgba(255,92,53,.22)!important
}
.shop-coupon-box__row{align-items:center}
.shop-coupon-input{min-height:34px!important;height:34px!important;padding-top:0!important;padding-bottom:0!important}
.shop-coupon-box__codes{
  margin:0;padding:0 14px 14px;font-size:12.5px;line-height:1.8;color:var(--bs-muted,#3d3d4e)
}
.shop-coupon-chip{
  display:inline-flex;align-items:center;margin:0 2px;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(255,92,53,.25);background:var(--bs-accent-soft);
  color:var(--bs-accent,#ff5c35);font:inherit;font-size:12px;font-weight:800;cursor:pointer
}
.shop-coupon-chip:hover{filter:brightness(.98)}
.shop-coupon-chip-meta{margin-inline-end:6px}
.shop-field-hint{margin:6px 0 0;font-size:12.5px;font-weight:700}
.shop-field-hint.is-error{color:#b42318}
.shop-field-hint.is-ok{color:#0f766e}
.shop-order-list{display:flex;flex-direction:column;gap:12px}
.shop-order-list article{
  padding:14px 16px;border-radius:var(--bs-radius,16px);
  background:var(--bs-surface,#fff);border:1px solid var(--bs-line,#e6e6ea);box-shadow:var(--bs-shadow)
}
.shop-order-list header{display:flex;justify-content:space-between;gap:10px;font-weight:800;margin-bottom:8px;color:var(--bs-ink)}
.shop-order-list ul{margin:0;padding:0 16px 0 0;font-size:13px;line-height:1.7;color:var(--bs-muted)}