/* Self-hosted fonts (OFL): Manrope (headings/UI) with Inter fallback. Latin subset, variable weight. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
:root{
  --bg:#0C0A06; --bg2:#1A140C; --surface:#1A140C; --surface2:#221A10; --surface3:#2A2014;
  --popover:#1A140C; --field:#1A140C;
  --border:#24304c; --border-soft:rgba(224,154,58,.16);
  --text:#F8F0DC; --muted:#98a1b3; --dim:#7b879d;
  --accent:#E09A3A; --accent2:#C47A20; --gold:#E09A3A;
  --green:#3ddc84; --red:#ef4343; --blue:#4da3ff; --tg:#2aabee;
  --on-gold:#0C0A06;
  --radius:.75rem; --radius-lg:1rem; --radius-modal:1.25rem; --radius-sm:.625rem;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --grad:linear-gradient(135deg,#E8B04A,#C47A20);
  --grad-hover:linear-gradient(135deg,#F0C060,#D08A2A);
  --gold-grad:var(--grad);
  --gold-glow:0 0 18px rgba(224,154,58,.45);
  --image-fade:linear-gradient(to top, rgba(12,10,6,.95), rgba(12,10,6,.3), transparent);
  --font:"Manrope","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:var(--text);background:var(--field);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:13px} .xs{font-size:11.5px}
.row{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.grow{flex:1;min-width:0}
.hide{display:none!important}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(32px,5vw,58px);font-weight:800}
h2{font-size:clamp(24px,3vw,34px);font-weight:750}
h3{font-size:19px;font-weight:700}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* test-mode strip */
.proto-strip{background:repeating-linear-gradient(45deg,#2a1b00,#2a1b00 12px,#332200 12px,#332200 24px);color:#ffcf6b;text-align:center;font-size:12px;font-weight:600;padding:5px 10px;letter-spacing:.03em}

/* header */
.header{position:sticky;top:0;z-index:50;background:#1A140Ccc;backdrop-filter:blur(14px);border-bottom:1px solid rgba(224,154,58,.22)}
.header .container{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:19px;letter-spacing:0;font-family:var(--font)}
.logo-mark{width:28px;height:28px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:var(--gold-glow);flex:none}
.logo-mark svg{width:14px;height:14px;color:var(--on-gold)}
.logo .dotcom{font-weight:400}
.nav{display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:10px;color:var(--muted);font-weight:550;font-size:14.5px}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a.active{color:var(--text);background:var(--surface2)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.credit-pill{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);font-weight:700;font-size:14px}
.credit-pill .coin{width:18px;height:18px;border-radius:50%;background:var(--gold-grad);display:grid;place-items:center;font-size:11px;color:var(--on-gold);font-weight:900}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;font-weight:600;font-size:.875rem;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--grad);color:var(--on-gold);box-shadow:0 8px 30px rgba(224,154,58,.35)}
.btn-primary:hover{background:var(--grad-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--border-soft);color:var(--text)}
.btn-ghost:hover{border-color:rgba(224,154,58,.5);background:rgba(224,154,58,.1)}
.btn-gold{background:var(--grad);color:var(--on-gold)}
.btn-outline{border:1px solid rgba(224,154,58,.5);color:var(--text);background:transparent}
.btn-outline:hover{background:rgba(224,154,58,.1)}
.btn-danger{background:rgba(239,67,67,.14);color:var(--red);border:1px solid rgba(239,67,67,.35)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-lg{padding:.75rem 1.5rem;font-size:.95rem}
.btn-login{border:1px solid rgba(224,154,58,.5);color:var(--text);background:transparent;border-radius:999px;padding:7px 16px;font-weight:600;font-size:.875rem}
.btn-login:hover{background:rgba(224,154,58,.1)}
@keyframes pulseGlow{0%,100%{box-shadow:0 8px 18px rgba(224,154,58,.25)}50%{box-shadow:0 8px 30px rgba(224,154,58,.55)}}
.btn-pulse{animation:pulseGlow 2.5s ease-in-out infinite}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.icon{width:18px;height:18px;flex:none}
.icon-sm{width:14px;height:14px}

/* cards */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:22px}
.card.glass{background:#1A140Cb3;backdrop-filter:blur(24px);border-color:rgba(224,154,58,.22);border-radius:var(--radius-lg)}
.card-tight{padding:16px}
.section{padding:64px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}
.eyebrow{color:var(--gold);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:650;background:var(--surface3);color:var(--muted)}
.tag-accent{background:rgba(224,154,58,.15);color:var(--gold)}
.tag-gold{background:rgba(224,154,58,.15);color:var(--gold)}
.tag-green{background:rgba(61,220,132,.13);color:var(--green)}
.tag-red{background:rgba(239,67,67,.14);color:var(--red)}
.tag-blue{background:rgba(77,163,255,.14);color:var(--blue)}
.tag-tg{background:rgba(42,171,238,.15);color:var(--tg)}

/* badges */
.vip-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:6px;background:var(--gold-grad);color:var(--on-gold);font-size:10.5px;font-weight:850;letter-spacing:.04em;vertical-align:middle}
.member-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:6px;background:rgba(224,154,58,.18);color:var(--gold);font-size:10.5px;font-weight:750;vertical-align:middle}
.gold-name{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:750}

/* avatar */
.avatar{position:relative;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:-.02em;
  background:radial-gradient(circle at 30% 25%,hsl(var(--h1) 90% 70%),transparent 55%),linear-gradient(135deg,hsl(var(--h1) 75% 50%),hsl(var(--h2) 70% 35%));text-shadow:0 1px 6px rgba(0,0,0,.35)}
.avatar .dot{position:absolute;right:2%;bottom:2%;width:26%;height:26%;min-width:10px;min-height:10px;border-radius:50%;background:var(--green);border:2.5px solid var(--surface)}
.avatar.ring::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(#F0C060,#C47A20,#F0C060);z-index:-1;animation:spin 3s linear infinite}
.avatar.ring{z-index:0;isolation:isolate}
.avatar.ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;z-index:-1;background:var(--bg)}
.avatar.ring{background-clip:padding-box}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar-wrap{position:relative;display:inline-block}

/* art tiles */
.art{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:4/5;
  background:radial-gradient(circle at 25% 20%,hsl(var(--h1) 85% 65% / .9),transparent 45%),radial-gradient(circle at 80% 75%,hsl(var(--h2) 80% 55% / .85),transparent 50%),linear-gradient(160deg,hsl(var(--h1) 50% 18%),hsl(var(--h2) 55% 10%))}
.art::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.65),transparent 60%)}
.art .shape{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;background:hsl(var(--h2) 90% 70%)}
.art.locked .blurwrap{position:absolute;inset:-20px;filter:blur(18px) saturate(1.3)}
.lock-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(8,8,12,.35);text-align:center;padding:12px}
.lock-circle{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;backdrop-filter:blur(6px)}
.price-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);font-weight:750;font-size:13px}
.tile-meta{position:absolute;left:12px;right:12px;bottom:10px;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:8px;font-size:13px;font-weight:600}
.play-btn{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:3;border:1px solid rgba(255,255,255,.3)}

/* hero */
.hero{position:relative;overflow:hidden;padding:80px 0 70px}
.hero::before{content:"";position:absolute;width:900px;height:900px;right:-300px;top:-400px;background:radial-gradient(circle,rgba(224,154,58,.18),transparent 60%)}
.hero::after{content:"";position:absolute;width:700px;height:700px;left:-300px;bottom:-400px;background:radial-gradient(circle,rgba(224,154,58,.12),transparent 60%)}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero p.lead{font-size:18px;color:var(--muted);margin:18px 0 28px;max-width:520px}
.hero-collage{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-4deg)}
.hero-collage .art:nth-child(3n+2){transform:translateY(30px)}
.trust{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap}
.trust div{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px}

/* steps */
.step{position:relative}
.step-num{width:38px;height:38px;border-radius:12px;background:var(--surface3);display:grid;place-items:center;font-weight:800;color:var(--accent2);margin-bottom:14px}

/* creator card */
.ccard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.2s;display:block}
.ccard:hover{transform:translateY(-3px);border-color:#3a3a4c;box-shadow:var(--shadow)}
.ccard .cover{height:110px;position:relative;background:radial-gradient(circle at 20% 30%,hsl(var(--h1) 85% 60% / .9),transparent 50%),radial-gradient(circle at 85% 70%,hsl(var(--h2) 80% 50% / .8),transparent 55%),linear-gradient(135deg,hsl(var(--h1) 50% 20%),hsl(var(--h2) 50% 12%))}
.ccard .body{padding:0 16px 16px;margin-top:-34px;position:relative}
.ccard .avatar{border:3px solid var(--surface)}
.live-pill{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;backdrop-filter:blur(6px)}
.live-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

/* pricing */
.plan{position:relative;display:flex;flex-direction:column;gap:16px}
.plan.popular{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 20px 60px rgba(224,154,58,.18)}
.plan .price{font-size:40px;font-weight:800;letter-spacing:-.03em}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.plan li{display:flex;gap:9px;align-items:flex-start;color:#d6d3de;font-size:14.5px}
.plan li svg{color:var(--gold);margin-top:2px}
.ribbon{position:absolute;top:-12px;right:20px;background:var(--grad);color:var(--on-gold);padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:750}

/* explore */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.chip{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:13.5px;font-weight:600;color:var(--muted)}
.chip.on{background:var(--grad);color:var(--on-gold);border-color:transparent}
.search{position:relative;flex:1;min-width:220px;max-width:380px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim)}
.search input{padding-left:38px;border-radius:999px}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.toggle .sw{width:36px;height:20px;border-radius:999px;background:var(--surface3);position:relative;transition:.2s}
.toggle .sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}
.toggle.on .sw{background:var(--gold)} .toggle.on .sw::after{left:19px}

/* profile */
.pcover{height:240px;border-radius:0 0 24px 24px;position:relative;background:radial-gradient(circle at 15% 30%,hsl(var(--h1) 85% 60% / .9),transparent 45%),radial-gradient(circle at 80% 60%,hsl(var(--h2) 80% 50% / .85),transparent 50%),linear-gradient(135deg,hsl(var(--h1) 45% 18%),hsl(var(--h2) 45% 10%))}
.phead{display:flex;gap:22px;align-items:flex-end;margin-top:-60px;position:relative;padding:0 8px}
.phead .avatar{border:5px solid var(--bg)}
.pstats{display:flex;gap:28px;margin:18px 0}
.pstats b{display:block;font-size:20px}
.pstats span{font-size:12.5px;color:var(--muted)}
.paction{display:flex;gap:10px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:26px 0 20px}
.tabs button{padding:12px 16px;font-weight:650;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-color:var(--gold)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.verified{color:var(--gold)}
.live-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(61,220,132,.08);border:1px solid rgba(61,220,132,.3);color:var(--green);font-weight:600;font-size:14px}

/* modal */
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;animation:fade .15s}
.modal{width:100%;max-width:440px;background:var(--popover);border:1px solid var(--border-soft);border-radius:var(--radius-modal);box-shadow:var(--shadow);overflow:hidden;animation:pop .18s;max-height:92vh;overflow-y:auto}
.modal-body{padding:24px}
.modal h3{margin-bottom:6px}
.modal .x{position:absolute;right:14px;top:14px;color:var(--muted)}
.modal-actions{display:flex;gap:10px;margin-top:20px}
.modal-actions .btn{flex:1}
.summary{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-top:16px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.summary .row{justify-content:space-between}
.summary .total{border-top:1px dashed var(--border);padding-top:8px;font-weight:750}
.test-banner{background:repeating-linear-gradient(45deg,#3a2700,#3a2700 10px,#4a3200 10px,#4a3200 20px);color:#ffd27a;font-weight:800;font-size:12.5px;letter-spacing:.08em;text-align:center;padding:8px}
@keyframes fade{from{opacity:0}} @keyframes pop{from{transform:scale(.96);opacity:0}}
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.amounts button{padding:10px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);font-weight:700}
.amounts button.on{border-color:var(--gold);background:rgba(224,154,58,.12)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.field label{font-size:12.5px;color:var(--muted);font-weight:600}

/* toast */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--surface3);border:1px solid var(--border);padding:10px 16px;border-radius:12px;box-shadow:var(--shadow);font-weight:600;font-size:14px;animation:pop .2s}

/* wallet */
.balance-card{background:radial-gradient(circle at 90% 0%,rgba(224,154,58,.25),transparent 50%),var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:28px}
.balance-card .big{font-size:48px;font-weight:850;letter-spacing:-.03em}
.pack{text-align:center;position:relative;display:flex;flex-direction:column;gap:10px;align-items:center}
.pack .amt{font-size:34px;font-weight:850;letter-spacing:-.03em}
.pack.popular{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.coin-lg{width:52px;height:52px;border-radius:50%;background:var(--gold-grad);display:grid;place-items:center;color:var(--on-gold);font-weight:900;font-size:20px;box-shadow:var(--gold-glow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:12.5px;padding:10px 12px;border-bottom:1px solid var(--border)}
td{padding:12px;border-bottom:1px solid var(--border)}
.pos{color:var(--green);font-weight:700} .neg{color:var(--red);font-weight:700}

/* chat (Chatwoot-style panel) */
.chat-shell{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 64px - 26px - 40px);min-height:520px;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface);margin:20px 0}
.inbox{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.inbox-head{padding:16px;border-bottom:1px solid var(--border)}
.inbox-list{overflow-y:auto;flex:1}
.inbox-item{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(42,42,56,.6);cursor:pointer;align-items:center}
.inbox-item:hover{background:var(--surface2)}
.inbox-item.on{background:var(--surface2);box-shadow:inset 3px 0 0 var(--gold)}
.inbox-item .preview{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread-dot{min-width:20px;height:20px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 6px}
.convo{display:flex;flex-direction:column;min-height:0;background:radial-gradient(circle at 100% 0%,rgba(224,154,58,.05),transparent 40%),var(--bg2)}
.convo-head{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:var(--surface)}
.msgs{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:72%;display:flex;flex-direction:column;gap:3px}
.msg .bubble{padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;word-wrap:break-word}
.msg.them{align-self:flex-start}
.msg.them .bubble{background:var(--surface2);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.me .bubble{background:var(--grad);color:var(--on-gold);border-bottom-right-radius:5px}
.msg.mod .bubble{background:rgba(77,163,255,.1);border:1px solid rgba(77,163,255,.35)}
.msg.team .bubble{background:var(--surface2);border:1px dashed #4a4a60}
.msg .meta{font-size:11px;color:var(--dim);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.msg.hidden-msg .bubble{opacity:.45;text-decoration:line-through}
.msg.flagged .bubble{box-shadow:0 0 0 1px var(--red)}
.sender-label{font-size:10.5px;padding:1px 6px;border-radius:5px;background:rgba(77,163,255,.14);color:var(--blue);font-weight:700}
.sender-label.admin{background:rgba(224,154,58,.15);color:var(--gold)}
.sender-label.tg{background:rgba(42,171,238,.15);color:var(--tg)}
.team-marker{font-size:10.5px;color:var(--muted);font-style:italic}
.tip-msg{align-self:center;background:rgba(224,154,58,.1);border:1px solid rgba(224,154,58,.3);color:var(--gold);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:650}
.sys-msg{align-self:center;color:var(--muted);font-size:12px;background:var(--surface);border:1px solid var(--border);padding:5px 12px;border-radius:999px;text-align:center}
.media-msg{width:240px;aspect-ratio:4/3;border-radius:14px}
.composer{padding:12px 14px;border-top:1px solid var(--border);background:var(--surface);display:flex;gap:8px;align-items:center}
.composer input{border-radius:999px;background:var(--bg2)}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--border);flex:none}
.icon-btn:hover{background:var(--surface3)}
.icon-btn.primary{background:var(--grad);border:0}
.privacy-note{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);padding:8px 16px;background:var(--bg2);border-top:1px solid var(--border)}
.powered{font-size:11px;color:var(--dim);text-align:center;padding:6px}
.live-strip{display:flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(61,220,132,.08);border-bottom:1px solid rgba(61,220,132,.25);color:var(--green);font-size:13px;font-weight:650}
.typing{align-self:flex-start;color:var(--muted);font-size:12.5px;font-style:italic}
.paywall{display:grid;place-items:center;text-align:center;padding:40px}

/* how chat works diagram */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:10px}
.flow-node{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:170px;justify-content:center}
.flow-node .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center}
.flow-node b{font-size:15px}
.flow-node p{font-size:12.5px;color:var(--muted)}
.flow-arrow{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--dim);font-size:10.5px}
.flow-arrow svg{width:34px;height:14px}

/* account */
.acc-head{display:flex;gap:20px;align-items:center}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px}
.stat b{font-size:24px;display:block;letter-spacing:-.02em}
.stat span{font-size:12.5px;color:var(--muted)}
.list-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:0}
.mini-art{width:46px;height:46px;border-radius:10px;aspect-ratio:auto;flex:none}

/* dashboard */
.notice{display:flex;gap:14px;padding:16px 18px;border-radius:14px;background:rgba(224,154,58,.08);border:1px solid rgba(224,154,58,.35)}
.notice.info{background:rgba(77,163,255,.07);border-color:rgba(77,163,255,.3)}
.notice .ic{color:var(--gold);flex:none;margin-top:2px}
.notice.info .ic{color:var(--blue)}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.bars div{flex:1;border-radius:6px 6px 2px 2px;background:var(--grad);opacity:.85;min-height:6px}
.tg-preview{background:#17212b;border-radius:16px;overflow:hidden;border:1px solid #233140;font-family:-apple-system,"Segoe UI",Roboto,sans-serif}
.tg-head{background:#232e3c;padding:10px 14px;display:flex;align-items:center;gap:10px}
.tg-head .tgav{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#2aabee,#229ed9);display:grid;place-items:center;font-weight:800}
.tg-body{padding:14px;display:flex;flex-direction:column;gap:8px;background:#0e1621;min-height:200px}
.tg-msg{max-width:88%;background:#182533;border-radius:12px 12px 12px 4px;padding:8px 11px;font-size:13.5px;line-height:1.4;color:#e9eef3}
.tg-msg.out{align-self:flex-end;background:#2b5278;border-radius:12px 12px 4px 12px}
.tg-msg .tg-meta{font-size:11px;color:#6d8399;margin-top:3px;text-align:right}
.tg-msg b{color:#6ab3f3}
.tg-btns{display:flex;gap:6px;margin-top:6px}
.tg-btns span{flex:1;text-align:center;background:rgba(255,255,255,.07);border-radius:8px;padding:5px;font-size:12px;color:#8bc3f5}
.code-box{font-family:ui-monospace,Menlo,monospace;font-size:22px;letter-spacing:.2em;font-weight:800;background:var(--bg2);border:1px dashed var(--border);padding:10px 16px;border-radius:12px;display:inline-block}

/* admin */
.admin-bar{background:linear-gradient(90deg,#1A140C,#1A140C);border-bottom:1px solid var(--border-soft)}
.admin-bar .container{display:flex;align-items:center;gap:16px;height:52px}
.admin-bar a{font-size:14px;font-weight:600;color:var(--muted);padding:6px 10px;border-radius:8px}
.admin-bar a.active,.admin-bar a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.admin-shell{display:grid;grid-template-columns:380px 1fr 300px;height:calc(100vh - 64px - 26px - 52px - 40px);min-height:560px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface);margin:20px 0}
.admin-shell.nolist{grid-template-columns:380px 1fr}
.afilters{padding:12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.afilters .row select{padding:7px 9px;font-size:13px}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchips .chip{padding:4px 10px;font-size:12px}
.side-panel{border-left:1px solid var(--border);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;background:var(--surface)}
.side-panel h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.note{background:rgba(224,154,58,.08);border:1px solid rgba(224,154,58,.25);border-radius:10px;padding:9px 11px;font-size:13px}
.note .xs{color:var(--dim)}
.msg.note-msg{align-self:stretch;max-width:100%}
.msg.note-msg .bubble{background:rgba(224,154,58,.08);border:1px solid rgba(224,154,58,.3);color:#f1dfb8}
.mode-select{display:flex;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.mode-select button{padding:6px 10px;border-radius:8px;font-size:12.5px;font-weight:650;color:var(--muted)}
.mode-select button.on{background:var(--surface3);color:var(--text)}
.mode-select button.on[data-mode=creator]{background:rgba(224,154,58,.2);color:var(--gold)}
.mode-select button.on[data-mode=moderator]{background:rgba(77,163,255,.18);color:var(--blue)}
.mode-select button.on[data-mode=assistant]{background:rgba(61,220,132,.14);color:var(--green)}
.mode-select button.on[data-mode=note]{background:rgba(224,154,58,.18);color:var(--gold)}
.admin-composer{border-top:1px solid var(--border);background:var(--surface);padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.admin-composer.note-mode{background:#1d1a10}
.msg-tools{display:none;gap:4px}
.msg:hover .msg-tools{display:flex}
.msg-tools button{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--surface3);color:var(--muted)}
.msg-tools button:hover{color:var(--text)}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.kv span:first-child{color:var(--muted)}

/* footer */
.footer{border-top:1px solid var(--border-soft);margin-top:60px;padding:40px 0 100px;background:#1A140C66}
.footer .container{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{color:var(--muted);font-size:13.5px}
.footer-links a:hover{color:var(--text)}

/* age gate */
.agegate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 0%,rgba(224,154,58,.18),transparent 55%),rgba(12,10,6,.96);backdrop-filter:blur(20px)}
.agegate .box{max-width:460px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:36px 30px;box-shadow:var(--shadow)}
.age-18{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:26px;font-weight:900;border:3px solid var(--gold);color:var(--gold)}

/* auth */
.auth{max-width:420px;margin:50px auto}

/* bottom nav */
.bottom-nav{display:none}
.legal{max-width:780px;margin:40px auto}
.legal p,.legal li{color:#cfccd8;margin:10px 0}
.legal ul{padding-left:20px}

@media (max-width:1100px){
  .admin-shell{grid-template-columns:320px 1fr}
  .admin-shell .side-panel{display:none}
}
@media (max-width:960px){
  .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}
  .hero .container{grid-template-columns:1fr}
  .hero-collage{display:none}
  .nav{display:none}
  .flow{grid-template-columns:1fr;}
  .flow-arrow{transform:rotate(90deg);height:30px}
}
@media (max-width:720px){
  body{font-size:14.5px}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .section{padding:44px 0}
  .header .container{gap:10px}
  .header-right .hide-sm{display:none}
  .phead{flex-direction:column;align-items:flex-start;gap:10px}
  .pcover{height:160px}
  .chat-shell{grid-template-columns:1fr;height:calc(100vh - 64px - 26px - 100px)}
  .chat-shell.has-convo .inbox{display:none}
  .chat-shell:not(.has-convo) .convo{display:none}
  .msg{max-width:88%}
  .admin-shell,.admin-shell.nolist{grid-template-columns:1fr}
  .admin-shell.has-convo .inbox{display:none}
  .admin-shell:not(.has-convo) .convo{display:none}
  /* Flex-shell bottom nav (NOT position:fixed): iOS standalone PWAs mis-paint fixed bottom bars while scrolling. */
  .bottom-nav{display:flex;position:relative;bottom:auto;left:auto;right:auto;flex-shrink:0;z-index:60;background:rgba(26,20,12,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);justify-content:space-around;padding:6px 0 calc(10px + env(safe-area-inset-bottom,0px))}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--muted);padding:4px 8px}
  .bottom-nav a.active{color:var(--accent2)}
  .amounts{grid-template-columns:repeat(2,1fr)}
}
.only-sm{display:none}
@media (max-width:720px){.only-sm{display:initial}}

/* phone-frame Telegram mockups */
.phone{width:375px;max-width:100%;height:760px;border-radius:46px;border:11px solid #1a1a21;background:#0e1621;box-shadow:0 0 0 1px #2c2c36,0 30px 80px rgba(0,0,0,.6);overflow:hidden;display:flex;flex-direction:column;position:relative;margin:0 auto;font-family:-apple-system,"Segoe UI",Roboto,sans-serif}
.phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:110px;height:26px;border-radius:20px;background:#000;z-index:5}
.phone .status{height:40px;flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding:0 26px 4px;font-size:12px;font-weight:700;color:#fff;background:#17212b}
.phone .tg-head{flex:none}
.phone .pinned{flex:none;background:#17212b;border-top:1px solid #0e1621;padding:7px 14px;font-size:12.5px;color:#e9eef3;display:flex;gap:8px;align-items:center}
.phone .pinned b{color:#6ab3f3}
.phone .pinned.live{background:#13261d;color:#7be3a6}
.phone .tg-body{flex:1;overflow-y:auto;min-height:0;background:#0e1621 radial-gradient(circle at 20% 10%,rgba(42,171,238,.06),transparent 40%)}
.phone .tg-msg{font-size:13.5px}
.tg-msg .tg-from{font-weight:700;font-size:12.5px;margin-bottom:2px;color:var(--gold)}
.tg-msg .tg-from.mod{color:#4da3ff} .tg-msg .tg-from.team{color:#3ddc84}
.tg-quote{border-left:3px solid #6ab3f3;background:rgba(106,179,243,.08);padding:3px 8px;border-radius:4px;margin-bottom:5px;font-size:12px;color:#a9c7e3}
.tg-quote b{color:#6ab3f3;display:block}
.tg-sys{align-self:center;background:rgba(0,0,0,.35);color:#c7d3de;font-size:11.5px;padding:4px 10px;border-radius:999px;text-align:center;max-width:90%}
.tg-media{width:230px;aspect-ratio:4/3;border-radius:9px;margin-bottom:5px}
.tg-kb{display:grid;gap:5px;margin-top:6px}
.tg-kb.k2{grid-template-columns:1fr 1fr}
.tg-kb button,.tg-kb a{background:rgba(42,171,238,.16);color:#8bc8f7;border-radius:8px;padding:7px 6px;font-size:12.5px;font-weight:600;text-align:center}
.tg-kb button:hover,.tg-kb a:hover{background:rgba(42,171,238,.28)}
.phone .tg-compose{flex:none;background:#17212b;display:flex;gap:8px;align-items:center;padding:8px 10px 18px}
.phone .tg-compose input{background:#0e1621;border:0;border-radius:20px;padding:9px 14px;font-size:14px}
.phone .tg-compose button{width:38px;height:38px;border-radius:50%;background:#2aabee;display:grid;place-items:center;color:#fff;flex:none}
.phone .reply-kb{flex:none;background:#17212b;padding:6px 8px 0;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.phone .reply-kb button{background:#232e3c;color:#e9eef3;border-radius:7px;padding:8px 4px;font-size:12.5px}
.chats-layout{display:grid;grid-template-columns:1fr 400px;gap:28px;align-items:start;padding:30px 0}
.chat-row{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);margin-bottom:10px}
.chat-row.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.flow.f5{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr}
.takeover{display:flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(224,154,58,.1);border-bottom:1px solid rgba(224,154,58,.3);color:var(--gold);font-size:13px;font-weight:650}
@media (max-width:1100px){.flow.f5{grid-template-columns:1fr}.flow.f5 .flow-arrow{transform:rotate(90deg);height:30px}}
@media (max-width:960px){.chats-layout{grid-template-columns:1fr}}
@media (max-width:720px){.phone{height:680px;border-width:8px;border-radius:36px}}

/* ===== iPhone / Telegram dark mockups (matched to reference) ===== */
.phone{width:390px;height:800px;border-radius:58px;border:0;padding:11px;background:linear-gradient(145deg,#3a3a40,#1b1b1f 40%,#2c2c31);box-shadow:0 0 0 1.5px #4a4a52,0 0 0 4px #0b0b0d,0 40px 90px rgba(0,0,0,.65);display:block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
.phone::before{display:none}
.phone .screen{position:relative;width:100%;height:100%;border-radius:47px;overflow:hidden;background:#10161e;display:flex;flex-direction:column}
.phone .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:118px;height:34px;border-radius:20px;background:#000;z-index:6}
.phone .status{height:50px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 30px 0 34px;font-size:15px;font-weight:650;color:#fff;background:#1c242f}
.tgh{flex:none;background:#1c242f;display:flex;align-items:center;gap:8px;padding:4px 12px 9px;border-bottom:1px solid #0c1117}
.tgh .back{display:flex;align-items:center;gap:3px;color:#3e9bf0;min-width:62px}
.tgh .back svg{width:22px;height:22px;stroke-width:2.6}
.tgh .badge{background:#3e9bf0;color:#fff;font-size:12px;font-weight:700;border-radius:10px;padding:0 7px;line-height:19px}
.tgh .ttl{flex:1;text-align:center;line-height:1.2}
.tgh .ttl b{display:block;font-size:16px;color:#fff;font-weight:650}
.tgh .ttl span{font-size:12.5px;color:#7f8b98}
.tgh .ttl span.on{color:#3e9bf0}
.tgh .rt{min-width:62px;display:flex;justify-content:flex-end}
.phone .tg-body{flex:1;min-height:0;overflow-y:auto;padding:10px 10px 12px;display:flex;flex-direction:column;gap:7px;
  background-color:#10161e;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.4'%3E%3Ccircle cx='20' cy='22' r='8'/%3E%3Cpath d='M60 12l4 8 9 1-6 6 1 9-8-4-8 4 1-9-6-6 9-1z'/%3E%3Cpath d='M118 20c4-6 14-3 12 5-1 5-12 12-12 12s-11-7-12-12c-2-8 8-11 12-5z'/%3E%3Crect x='14' y='70' width='22' height='16' rx='4'/%3E%3Cpath d='M70 70l14 8-14 8z'/%3E%3Ccircle cx='128' cy='80' r='11'/%3E%3Cpath d='M122 80h12M128 74v12'/%3E%3Cpath d='M20 125q10-14 20 0t20 0'/%3E%3Cpath d='M92 118h22v18H92zM92 124h22'/%3E%3Ccircle cx='146' cy='140' r='4'/%3E%3C/svg%3E")}
.tgb{max-width:84%;padding:7px 10px 6px 11px;border-radius:17px;font-size:15px;line-height:1.36;color:#fff;position:relative;word-wrap:break-word}
.tgb.in{align-self:flex-start;background:#212b36;border-bottom-left-radius:5px}
.tgb.out{align-self:flex-end;background:#7048d6;border-bottom-right-radius:5px}
.tgb .tm{float:right;margin:7px 0 -3px 10px;font-size:11.5px;color:#8a97a5;display:flex;align-items:center;gap:3px;line-height:1}
.tgb.out .tm{color:rgba(255,255,255,.65)}
.tgb .who{font-size:13.5px;font-weight:650;margin-bottom:1px}
.tgb a{color:#6ab3f3;text-decoration:underline}
.tgb.out a{color:#e6dcff}
.tg-day{align-self:center;background:rgba(32,42,54,.85);color:#fff;font-size:13px;font-weight:600;padding:3px 10px;border-radius:12px;margin:4px 0}
.tg-card{align-self:center;max-width:88%;background:rgba(33,43,54,.92);border-radius:16px;padding:12px 14px;font-size:13.5px;color:#e6ebf0;line-height:1.4;display:flex;gap:8px}
.tgk{display:grid;gap:5px;align-self:stretch;max-width:84%;margin-top:-2px}
.tgk.k2{grid-template-columns:1fr 1fr} .tgk.k3{grid-template-columns:1fr 1fr 1fr}
.tgk button,.tgk a{background:rgba(36,47,60,.88);color:#fff;border-radius:11px;padding:8px 6px;font-size:13.5px;font-weight:550;text-align:center;text-decoration:none;backdrop-filter:blur(4px)}
.tgk button:hover,.tgk a:hover{background:rgba(50,63,78,.95)}
.tg-quote2{border-left:3px solid #6ab3f3;background:rgba(106,179,243,.1);border-radius:5px;padding:3px 8px;margin:2px 0 5px;font-size:13px;line-height:1.3}
.tgb.out .tg-quote2{border-color:#fff;background:rgba(255,255,255,.14)}
.tg-quote2 b{display:block;color:#6ab3f3;font-size:13px}
.tgb.out .tg-quote2 b{color:#fff}
.tg-sheet{flex:none;background:#1c242f;padding:10px 12px 8px;display:flex;flex-direction:column;gap:8px;border-top:1px solid #0c1117}
.tg-sheet button,.tg-sheet a{border-radius:12px;padding:12px;font-size:15.5px;font-weight:550;text-align:center;color:#fff;background:#2a3441}
.tg-sheet .primary{background:#3390ec}
.tg-sheet.grid2{display:grid;grid-template-columns:1fr 1fr}
.tg-bar{flex:none;background:#1c242f;display:flex;align-items:center;gap:9px;padding:7px 10px 6px}
.tg-bar .menu{background:#3390ec;color:#fff;border-radius:16px;padding:6px 12px;font-size:14.5px;font-weight:600;display:flex;gap:5px;align-items:center}
.tg-bar input{flex:1;background:#10161e;border:1px solid #2a3441;border-radius:18px;padding:7px 12px;font-size:15px;color:#fff;min-width:0}
.tg-bar input::placeholder{color:#7f8b98}
.tg-bar .ic{color:#7f8b98;display:grid;place-items:center}
.tg-bar .send{width:34px;height:34px;border-radius:50%;background:#3390ec;color:#fff;display:grid;place-items:center;flex:none}
.tg-home{flex:none;background:#1c242f;height:26px;display:grid;place-items:center}
.tg-home i{width:134px;height:5px;border-radius:3px;background:#fff;display:block}
.tg-reply{flex:none;background:#1c242f;display:flex;align-items:center;gap:10px;padding:7px 14px 0;border-top:1px solid #0c1117}
.tg-reply .bar{width:2px;align-self:stretch;background:#3390ec}
.vipm{display:inline-block;background:var(--gold-grad);color:#2b1c00;font-size:10px;font-weight:800;padding:0 5px;border-radius:4px;vertical-align:1px;margin-left:3px}
.teaml{font-size:11.5px;color:#9cd8b4;font-weight:600}
.mock-caption{text-align:center;font-weight:700;font-size:15px;margin-bottom:14px;color:var(--text)}
.mock-caption span{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px}
@media (max-width:720px){.phone{width:100%;max-width:390px;height:760px}}

.tg-bar input{padding-right:34px}
.admin-shell{grid-template-columns:340px 1fr 310px}
.tgk.k3 button{font-size:12.5px;padding:8px 3px;white-space:nowrap}

/* --- signup / checkout flow fixes --- */
/* fan views: sideways scroll clipped on the page scroller, not on html/body (overflow on html/body breaks position:fixed / sticky on iOS) */
#app.fan-shell .app-scroll{overflow-x:clip}
.grid > *{min-width:0}
.test-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;background:rgba(224,154,58,.1);border:1px solid rgba(224,154,58,.35);color:#f3d79c;border-radius:12px;padding:10px 12px;font-size:13px}
.test-note .icon-sm{flex:none;margin-top:2px}
.demo-confirm{margin-top:18px;border-color:rgba(42,171,238,.45);background:radial-gradient(circle at 100% 0,rgba(42,171,238,.12),transparent 60%),var(--surface)}
.demo-confirm input{width:100%}
.tg-real-link{color:#6ab3f3;font-weight:600;white-space:nowrap}
.tg-real-link .icon-sm{vertical-align:-2px}
.login-grid{align-items:center}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(61,220,132,.3);border-top-color:var(--green);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.modal{max-height:calc(100dvh - 40px)}
@media (max-width:720px){
  .hide-mobile{display:none !important}
  .login-grid{align-items:start}
  .auth{margin:28px auto}
  /* nav is in the flex shell (not fixed), so no body padding-bottom for it */
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100% - 32px)}
  .modal-back{padding:14px;align-items:center}
  .modal-body{padding:20px 18px}
}
@media (max-width:420px){
  .header .container{gap:8px;padding-left:12px;padding-right:12px}
  .header-right{gap:6px}
  .header-right .btn-sm{padding:6px 10px}
}
.login-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.login-grid > *{min-width:0}
.test-banner{padding:8px 40px}
@media (max-width:720px){.login-grid{grid-template-columns:minmax(0,1fr)}}
.chats-layout > *{min-width:0}
@media (max-width:960px){.chats-layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){#walletTop{grid-template-columns:minmax(0,1fr) !important}}


/* ===== MemberPrive.com look & feel ===== */
.grad-text{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--gold);text-shadow:0 0 18px rgba(224,154,58,.45)}
input,select,textarea{background:var(--field);border-color:var(--border-soft);border-radius:var(--radius-sm)}
input:focus,select:focus,textarea:focus{border-color:rgba(224,154,58,.6)}
.summary{background:var(--field);border-color:var(--border-soft)}
.avatar{box-shadow:0 0 0 3px rgba(224,154,58,.3),0 0 18px rgba(224,154,58,.25)}
.avatar img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 20%;border-radius:50%;padding:0;margin:0;background:transparent}  /* absolute: iOS Safari letterboxed grid-item imgs */
.avatar .dot{z-index:2}
.avatar.initials{background:var(--grad);color:var(--on-gold);text-shadow:none;font-weight:700}
.avatar.photo{background:#1A140C}

/* hero */
.mp-hero{position:relative;padding:28px 0 10px}
.mp-hero-banner{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/6;min-height:260px;background:#0C0A06 center/cover no-repeat}
.mp-hero-banner::after{content:"";position:absolute;inset:0;background:var(--image-fade)}
.mp-hero-inner{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 20px}
.mp-hero h1{font-size:clamp(1.875rem,4.5vw,3rem);font-weight:700;max-width:820px;line-height:1.15}
.mp-hero .lead{color:var(--muted);max-width:560px;margin:14px auto 22px;font-size:1rem}
.mp-hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* creator listing card */
.ccard{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.ccard:hover{transform:translateY(-2px);border-color:rgba(224,154,58,.4);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.ccard .cover{height:180px;position:relative;background:#221A10 center/cover no-repeat}
.ccard .cover::after{content:"";position:absolute;inset:0;background:var(--image-fade)}
.ccard .cover.initials-cover{display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(230,207,155,.35),transparent 55%),#1A140C}
.ccard .cover .big-initials{font-size:56px;font-weight:800;color:var(--gold);opacity:.85;letter-spacing:-.04em;z-index:1;position:relative}
.ccard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.ccard .meta-line{font-size:13px;color:var(--muted)}
.ccard .bio-ex{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.ccard .view{align-self:flex-start;margin-top:auto;background:var(--grad);color:var(--on-gold);font-size:.625rem;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.02em}

/* profile */
.pcover{height:220px;border-radius:0;background:#0C0A06 center/cover no-repeat;position:relative}
.pcover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg),rgba(12,10,6,.3),transparent)}
@media (min-width:768px){.pcover{height:288px}}
.phead{margin-top:-48px}
.phead .avatar{border:3px solid transparent;box-shadow:0 0 0 3px rgba(224,154,58,.3),0 0 22px rgba(224,154,58,.4)}
.phead h2{font-size:1.2rem;font-weight:800}
.chat-cta{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:1rem;background:var(--grad);color:var(--on-gold);box-shadow:0 8px 30px rgba(224,154,58,.35);text-align:left;animation:pulseGlow 2.5s ease-in-out infinite}
.chat-cta .ic{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.25);display:grid;place-items:center;flex:none}
.chat-cta b{display:block;font-size:1.05rem}
.chat-cta span{display:block;font-size:13px;opacity:.8}
.attr-pills{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.attr-pills .chip{background:var(--field);border-color:var(--border-soft);color:var(--text)}
.stats-rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:10px}
.stats-rows .kv{padding:2px 0;font-size:13.5px}
.billing-toggle{display:inline-flex;background:var(--field);border:1px solid var(--border-soft);border-radius:999px;padding:4px;gap:2px;margin:0 auto 22px}
.billing-toggle button{padding:8px 18px;border-radius:999px;font-weight:650;font-size:13.5px;color:var(--muted)}
.billing-toggle button.on{background:var(--grad);color:var(--on-gold)}
.billing-toggle .save{margin-left:4px;font-size:11px;opacity:.85}




.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:28px;width:100%}
.footer-note{background:#1A140C;border:1px solid var(--border-soft);border-radius:var(--radius);padding:14px 16px;font-size:13.5px;color:var(--muted)}
.footer-note b{color:var(--gold);font-weight:650}
.footer-bottom{text-align:center;color:var(--dim);font-size:13px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(45,58,89,.3)}
.region-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* fan-bot pinned card (chat-only bot: no menus / tip / unlock / live buttons) */
.tg-pin{align-self:stretch;background:rgba(33,43,54,.95);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center;margin-bottom:4px}
.tg-pin .info{flex:1;min-width:0;line-height:1.3}
.tg-pin .info b{display:block;font-size:14px;color:#fff}
.tg-pin .info span{font-size:12px;color:#8a97a5}

/* studio / admin: no sideways scroll on phones */
@media (max-width:720px){

  .footer-cols{grid-template-columns:1fr}
  .paction{flex-direction:column}
  .paction .btn,.paction .chat-cta{width:100%}
  .stats-rows{grid-template-columns:1fr}
  .admin-shell,.admin-shell.nolist,.admin-shell.has-convo{grid-template-columns:minmax(0,1fr) !important;height:auto;min-height:70vh}
  .admin-shell .inbox,.admin-shell .side-panel{min-width:0}
  #studioMain{grid-template-columns:minmax(0,1fr) !important}
  .admin-bar .container{gap:6px;overflow-x:auto;padding:8px 12px;flex-wrap:wrap;height:auto}
  .admin-bar .container > span.xs{display:none}
  .admin-bar a{flex:none}
  /* Prefer clipping on content, not html/body (iOS fixed/sticky) */
  #app.fan-shell .app-scroll,main{overflow-x:clip}
}

/* MemberPrive header on small phones: keep the wordmark, drop secondary bits so nothing overflows */
@media (max-width:440px){
  .header .logo{font-size:16px;gap:7px}
  .header .logo-mark{width:24px;height:24px}
  .header .logo .lp2{display:none}
  .header .logo .tag{display:none}
  .header-right .credit-pill{display:none}
  .header-right > .tag{display:none}
}
@media (max-width:720px){
  .mp-hero-banner{aspect-ratio:auto;min-height:0;width:100%}
  .mp-hero-inner{position:relative;inset:auto;padding:52px 18px 40px}
}

/* hero: image banner with bottom fade, headline centred below it (keeps the artwork visible) */
.mp-hero-banner{aspect-ratio:16/6;min-height:0;width:100%}
.mp-hero-inner{position:relative;inset:auto;margin-top:-70px;padding:0 20px 8px}
@media (max-width:720px){.mp-hero-banner{aspect-ratio:16/8}.mp-hero-inner{margin-top:-34px;padding:0 6px}}
/* placeholder media tiles: navy + soft gold (no purple/magenta) */
.art{background:radial-gradient(circle at 25% 20%,hsl(var(--h1) 45% 38% / .9),transparent 48%),radial-gradient(circle at 80% 75%,hsl(var(--h2) 70% 48% / .6),transparent 52%),linear-gradient(160deg,hsl(var(--h1) 45% 14%),#0C0A06)}
.art .shape{background:hsl(var(--h2) 70% 60%);opacity:.35}
.admin-bar .tag{white-space:nowrap;flex:none}

/* ---------- video avatars (on top of photo/initials, fade in once playing) ---------- */
.mp-avv{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:inherit;opacity:0;transition:opacity .3s;pointer-events:none;z-index:1}
.mp-avv.on{opacity:1}
.ccard .cover .mp-avv{border-radius:0}
.avv-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.avv-err{color:var(--danger,#ef4343);font-size:13px;margin-top:6px;min-height:1em}

/* "Open chat in Telegram" button: chat icon option F (same as the Mini App): B's light streak across the button and a
   gold glow swelling outward. Glow 1.8s, streak 3.6s. Blue style unchanged. Pulse rings removed Oct 8 (Mark's request). */
.btn-tg-f{position:relative;overflow:hidden;isolation:isolate;animation:tgfGlow 1.8s ease-in-out infinite}
.btn-tg-f::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:38%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%,transparent 100%);
  transform:translateX(-160%) skewX(-12deg);animation:tgfShimmer 3.6s ease-in-out infinite}
.tgf-ic{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none}
.tgf-ic svg{position:relative;z-index:1}
@keyframes tgfShimmer{0%{transform:translateX(-160%) skewX(-12deg)}45%,100%{transform:translateX(330%) skewX(-12deg)}}
@keyframes tgfGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,236,170,0),0 0 10px rgba(240,207,111,.3)}
  45%{box-shadow:0 0 0 4px rgba(255,236,170,.35),0 0 26px 4px rgba(255,226,140,.8)}}
@media (prefers-reduced-motion: reduce){.btn-tg-f{animation:none}.btn-tg-f::after{display:none}}

/* Profile "Chat Now with <name>" button: chat icon option F (light streak + gold glow swelling outward; pulse rings
   removed Oct 8). Replaces the old pulseGlow animation on this button only; gold style and layout unchanged. */
.chat-cta{position:relative;overflow:hidden;isolation:isolate;animation:tgfGlow 1.8s ease-in-out infinite}
.chat-cta::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:38%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%,transparent 100%);
  transform:translateX(-160%) skewX(-12deg);animation:tgfShimmer 3.6s ease-in-out infinite}
.chat-cta .ic{position:relative}
.chat-cta .ic svg{position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){.chat-cta{animation:none}.chat-cta::after{display:none}}

/* Profile chat button (Oct 8): Telegram icon + "Chat Now with <name>" only (old subtitle, Members tag and arrow removed).
   F animation: light streak + outward gold glow on the button (no pulse rings). */
.chat-cta.chat-cta-f{min-height:66px}
.chat-cta.chat-cta-f b{font-size:1.1rem}

/* Profile header (Oct 8): "Send tip" beside Follow (moved from under the chat button), SAME SIZE as Follow: both .btn-sm
   (same padding, font, radius), 1px transparent border to match Follow's 1px border, equal column widths. Same data-action="tip". */
.phead-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;gap:8px;flex:none;position:relative;z-index:1}
.phead-actions .btn{width:100%}
.btn.phead-tip{border:1px solid transparent}

/* Website chat buttons, Oct 8 (Mark, 2nd pass): crisp solid gold border, ALL glow inside the border (inset shadows
   only, nothing paints outside the button box), light streak kept (now 5.6s, sweeping while the plane rests), and the
   Telegram icon no longer pulses: a copy of the plane flies around the button (js/plane-fly.js + pfFly below).
   Padding is reduced by the 2px border so the button keeps its size. Same design in the Mini App (css/chat-icons.css). */
.chat-cta.chat-cta-f{-webkit-animation:none;animation:none;padding:14px 16px;border:2px solid #F0C060;
  box-shadow:inset 0 0 0 1px rgba(110,72,0,.5),inset 0 0 18px 3px rgba(255,241,196,.6)}
.btn-tg-f{-webkit-animation:none;animation:none;padding:9px 16px;border:2px solid #F0C060;
  box-shadow:inset 0 0 0 1px rgba(10,19,41,.3),inset 0 0 14px 2px rgba(255,226,140,.6)}
.btn-tg-f.btn-sm{padding:5px 12px}
.chat-cta.chat-cta-f::after,.btn-tg-f::after{-webkit-animation-duration:5.6s;animation-duration:5.6s;-webkit-animation-delay:-2.8s;animation-delay:-2.8s}
.paction .btn{position:relative;z-index:1}
/* while the plane is away its icon spot shows a faint ghost; on landing the icon gives a small bump */
.pf-on.chat-cta-f .ic svg,.pf-on.btn-tg-f .tgf-ic svg{-webkit-animation:pfGhost 5.6s infinite;animation:pfGhost 5.6s infinite}
@-webkit-keyframes pfGhost{0%{opacity:1;-webkit-transform:scale(1)}5%,46%{opacity:.28;-webkit-transform:scale(.92)}51%{opacity:1;-webkit-transform:scale(1.14)}58%,100%{opacity:1;-webkit-transform:scale(1)}}
@keyframes pfGhost{0%{opacity:1;transform:scale(1)}5%,46%{opacity:.28;transform:scale(.92)}51%{opacity:1;transform:scale(1.14)}58%,100%{opacity:1;transform:scale(1)}}
/*PF-CORE-START (same block in the Mini App css/chat-icons.css)*/
.pf-fly,.chat-cta .pf-fly{position:absolute;left:0;top:0;width:16px;height:16px;display:block;z-index:3;pointer-events:none;opacity:1;font-size:0;
  offset-anchor:50% 50%;offset-rotate:auto;offset-distance:0%;-webkit-animation:pfFly 5.6s infinite;animation:pfFly 5.6s infinite}
.pf-fly[data-pf=waapi]{-webkit-animation:none;animation:none}
.pf-fly svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible;z-index:1;
  -webkit-filter:drop-shadow(0 0 1.5px rgba(255,248,222,1)) drop-shadow(0 0 3px rgba(255,236,170,.8));filter:drop-shadow(0 0 1.5px rgba(255,248,222,1)) drop-shadow(0 0 3px rgba(255,236,170,.8));
  -webkit-animation:pfShow 5.6s infinite;animation:pfShow 5.6s infinite}
.pf-trail,.chat-cta .pf-trail{position:absolute;right:42%;top:50%;width:260%;height:3px;margin-top:-1.5px;display:block;opacity:1;border-radius:3px;
  background:linear-gradient(to left,rgba(255,252,236,.95),rgba(255,236,170,.6) 40%,rgba(255,236,170,0));box-shadow:0 0 4px rgba(255,240,190,.6);
  -webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-animation:pfTrail 5.6s infinite;animation:pfTrail 5.6s infinite}
@-webkit-keyframes pfFly{0%{offset-distance:0%;-webkit-animation-timing-function:cubic-bezier(.5,0,.35,1)}50%,100%{offset-distance:100%}}
@keyframes pfFly{0%{offset-distance:0%;animation-timing-function:cubic-bezier(.5,0,.35,1)}50%,100%{offset-distance:100%}}
@-webkit-keyframes pfShow{0%{opacity:0;-webkit-transform:scale(.5)}5%,44%{opacity:1;-webkit-transform:scale(1)}50%,100%{opacity:0;-webkit-transform:scale(.55)}}
@keyframes pfShow{0%{opacity:0;transform:scale(.5)}5%,44%{opacity:1;transform:scale(1)}50%,100%{opacity:0;transform:scale(.55)}}
@-webkit-keyframes pfTrail{0%,3%{opacity:0;-webkit-transform:scaleX(0)}13%,38%{opacity:1;-webkit-transform:scaleX(1)}48%,100%{opacity:0;-webkit-transform:scaleX(0)}}
@keyframes pfTrail{0%,3%{opacity:0;transform:scaleX(0)}13%,38%{opacity:1;transform:scaleX(1)}48%,100%{opacity:0;transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){.pf-fly{display:none!important}.pf-on .ic svg,.pf-on .tgf-ic svg,.pf-on .cic{-webkit-animation:none!important;animation:none!important}}
/*PF-CORE-END*/

/* Profile-header pop-out avatar (Oct 8): js/avatar-pop.js. Layer 1 = circle photo (crop via inline style), layer 2 =
   person cut-out visible only above/over the top rim (mask hides it inside the circle), with a subtle "come to life"
   loop pivoting on the rim. Geometry: 96px avatar, 3px border, 90px photo box; .pop-cut = 8px side margin, 22px headroom. */
.pop-av{position:relative;flex:none;width:96px;height:96px}
.pop-av .avatar{overflow:hidden;border:3px solid transparent;box-shadow:0 0 0 3px rgba(224,154,58,.3),0 0 22px rgba(224,154,58,.4)}
.pop-cut{position:absolute;left:-5px;top:-19px;width:106px;height:53.5px;overflow:hidden;pointer-events:none;z-index:2;
  -webkit-mask-image:radial-gradient(circle at 53px 67px,transparent 43.5px,#000 44.5px);mask-image:radial-gradient(circle at 53px 67px,transparent 43.5px,#000 44.5px)}
.pop-fig{position:absolute;background-repeat:no-repeat;background-size:100% 100%;will-change:transform}
/*POP-MOTION-START (same block in the Mini App css/app.css). Oct 8, 2nd pass (Mark): the figure visibly comes out.
   1) EMERGENCE: .pop-wait = start pose (photo + cut-out lowered by --rise, head below the rim); js/pop-emerge.js swaps to
      .pop-in when the avatar is on screen -> both layers rise together (individual `translate` property, composes with
      the loop's transform) up and out through the top rim: 1.5s soft ease-out, overshoot 1.5px, settle.
   2) LIFE LOOP (cut-out only, after the emergence): breathing (scaleY + lift), 1-2deg sway/head tilt and one small lean
      forward out of the circle per cycle (period --ld 6.4-7.6s, per-creator start offset --lo). No bounce.
   Reduced motion: final static pose, no animation. */
/* Fix Oct 8 (Mark: head/hair moved strangely on two creators): popLife runs on BOTH layers (cut-out + circle photo,
   same pivot 14px below the rim, same timing), so the head above the rim never moves against a still face below it.
   Loop amplitude softened to ~60% (also avoids edge slivers). */
.pop-fig,.pop-av .avatar>img{-webkit-animation:popLife var(--ld,7s) ease-in-out var(--lo,0s) infinite;animation:popLife var(--ld,7s) ease-in-out var(--lo,0s) infinite}
.pop-av.pop-wait .pop-fig,.pop-av.pop-wait .avatar>img{translate:0 var(--rise,14px);-webkit-animation:none;animation:none}
.pop-av.pop-in .avatar>img{-webkit-animation:popEmerge 1.5s .15s both,popLife var(--ld,7s) ease-in-out calc(1.65s + var(--lo,0s)) infinite;
  animation:popEmerge 1.5s .15s both,popLife var(--ld,7s) ease-in-out calc(1.65s + var(--lo,0s)) infinite}
.pop-av.pop-in .pop-fig{-webkit-animation:popEmerge 1.5s .15s both,popLife var(--ld,7s) ease-in-out calc(1.65s + var(--lo,0s)) infinite;
  animation:popEmerge 1.5s .15s both,popLife var(--ld,7s) ease-in-out calc(1.65s + var(--lo,0s)) infinite}
@keyframes popEmerge{0%{translate:0 var(--rise,14px);animation-timing-function:cubic-bezier(.22,.75,.3,1)}
  74%{translate:0 -1.5px;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{translate:0 0}}
@-webkit-keyframes popEmerge{0%{translate:0 var(--rise,14px);-webkit-animation-timing-function:cubic-bezier(.22,.75,.3,1)}
  74%{translate:0 -1.5px;-webkit-animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{translate:0 0}}
@keyframes popLife{0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1,1)}
  16%{transform:translate3d(0,-.55px,0) rotate(.65deg) scale(1.004,1.012)}
  32%{transform:translate3d(0,0,0) rotate(.8deg) scale(1,1)}
  47%{transform:translate3d(0,-.55px,0) rotate(-.25deg) scale(1.004,1.012)}
  58%{transform:translate3d(0,-.1px,0) rotate(-.8deg) scale(1,1.002)}
  70%{transform:translate3d(0,-1.6px,0) rotate(-.35deg) scale(1.02,1.025)}
  80%{transform:translate3d(0,-1.4px,0) rotate(.2deg) scale(1.018,1.022)}
  91%{transform:translate3d(0,-.25px,0) rotate(.3deg) scale(1.002,1.006)}}
@-webkit-keyframes popLife{0%,100%{-webkit-transform:translate3d(0,0,0) rotate(0deg) scale(1,1)}
  16%{-webkit-transform:translate3d(0,-.55px,0) rotate(.65deg) scale(1.004,1.012)}
  32%{-webkit-transform:translate3d(0,0,0) rotate(.8deg) scale(1,1)}
  47%{-webkit-transform:translate3d(0,-.55px,0) rotate(-.25deg) scale(1.004,1.012)}
  58%{-webkit-transform:translate3d(0,-.1px,0) rotate(-.8deg) scale(1,1.002)}
  70%{-webkit-transform:translate3d(0,-1.6px,0) rotate(-.35deg) scale(1.02,1.025)}
  80%{-webkit-transform:translate3d(0,-1.4px,0) rotate(.2deg) scale(1.018,1.022)}
  91%{-webkit-transform:translate3d(0,-.25px,0) rotate(.3deg) scale(1.002,1.006)}}
@media (prefers-reduced-motion: reduce){.pop-fig,.pop-av .avatar>img,.pop-av.pop-in .pop-fig,.pop-av.pop-in .avatar>img{-webkit-animation:none!important;animation:none!important}
  .pop-av.pop-wait .pop-fig,.pop-av.pop-wait .avatar>img{translate:none}}
/*POP-MOTION-END*/
.pop-av:has(.mp-avv.on) .pop-cut{display:none}   /* a profile video replaces the photo: no static cut-out over it */
/* Studio profile-photo upload panel (js/photo-upload.js) */
.pu-err{color:var(--danger,#ef4343);font-size:13px;margin-top:6px;min-height:1em}
.pu-prog{margin-top:12px}.pu-bar{height:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:6px}
.pu-bar span{display:block;height:100%;background:var(--grad);transition:width .3s}
.pu-preview{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-top:14px;padding:26px 12px 12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px dashed var(--border-soft)}
.pu-stage{padding-top:6px}


/* Header login (Oct 8, Mark): the Fan / Creator / Admin "View as" switcher is gone. Logged out: "Log in" (navy + gold
   outline, .btn-login) opens the role sheet; logged in: a role badge with the name and a small menu with Log out. */
button.btn-login{cursor:pointer;font-family:inherit;line-height:1.4}
.auth-wrap{position:relative}
.auth-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid rgba(224,154,58,.5);background:rgba(224,154,58,.07);color:var(--text);font-weight:600;font-size:13px;max-width:240px;cursor:pointer;font-family:inherit}
.auth-badge:hover{background:rgba(224,154,58,.13)}
.auth-badge .avatar{flex:none}
.auth-ini{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--on-gold);font-weight:800;font-size:12px;flex:none}
.auth-role{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);flex:none}
.auth-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.auth-badge .icon-sm{flex:none;opacity:.7;transition:transform .15s}
.auth-wrap.open .auth-badge .icon-sm{transform:rotate(180deg)}
.auth-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:260px;z-index:60;background:var(--surface);border:1px solid rgba(224,154,58,.35);border-radius:14px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.auth-wrap.open .auth-menu{display:block}
.auth-menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}
.auth-menu-head span{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.auth-menu a,.auth-menu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:9px;font-size:13.5px;color:var(--text);font-family:inherit;background:none;border:0;cursor:pointer}
.auth-menu a:hover,.auth-menu button:hover{background:rgba(224,154,58,.1)}
.auth-menu .auth-out{color:var(--gold);font-weight:700;border-top:1px solid var(--border);border-radius:0 0 9px 9px;margin-top:4px}
.auth-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin:14px 0 14px;border-radius:999px;background:var(--bg2);border:1px solid var(--border)}
.auth-roles button{padding:8px 0;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--muted);font-family:inherit;cursor:pointer}
.auth-roles button.on{background:var(--grad);color:var(--on-gold)}
.auth-pane .field:first-child{margin-top:0}
.auth-tg{background:#2aabee;color:#fff;margin-top:14px;box-shadow:0 8px 30px rgba(42,171,238,.3)}
.auth-demo{margin-top:10px;color:var(--muted);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.auth-err{color:var(--red);min-height:1em;margin-top:6px}
@media (max-width:520px){.auth-badge{max-width:180px;gap:6px;padding-right:8px}.auth-badge .auth-role{font-size:9.5px}}


/* ===== Fan mobile app shell (Oct 8 Mark): pin bottom nav without position:fixed =====
   Structure: #app.fan-shell > header + .app-scroll (main+footer) + .bottom-nav
   On phones the shell is exactly one dynamic viewport tall; only .app-scroll scrolls.
   Desktop keeps normal document scroll (shell is min-height only). */
#app.fan-shell{display:flex;flex-direction:column;min-height:100dvh;min-height:100vh}
#app.fan-shell > .header{flex-shrink:0}
#app.fan-shell > .app-scroll{flex:1 1 auto;min-height:0;width:100%}
#app.fan-shell > .bottom-nav{flex-shrink:0}
@media (max-width:720px){
  html:has(#app.fan-shell),body:has(#app.fan-shell){height:100%;overflow:hidden;overscroll-behavior:none}
  /* Shell = the real visible height (Oct 8 standalone-nav fix). Never 100vh here: on the iPhone Home Screen app
     (opaque status bar) 100vh is the full screen incl. the status bar, so the shell was ~60px taller than the
     visible area and the bottom nav was cut off under the home indicator. The old base min-height:100vh also
     forced that extra height. --mp-app-h is measured by js/app-height.js; 100% (html/body chain) is the fallback. */
  #app.fan-shell{height:100%;height:var(--mp-app-h,100%);min-height:0;max-height:none;overflow:hidden}
  #app.fan-shell > .header{position:relative; /* was sticky; shell pins it */}
  #app.fan-shell > .app-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
/* Oct 12 21:46 (pwa1): iPhone Home Screen app. After coming back from Prive WebKit can keep a short layout viewport, so the
   html/body 100% box is short and clipped the shell (page ended after "About me", dark band under the nav). The shell is
   fixed to the screen with the measured height, so it no longer depends on that box; the scroll area keeps its content. */
@media (max-width:720px){
  html.mp-standalone #app.fan-shell{position:fixed;top:0;left:0;right:0;height:var(--mp-app-h,100%)}
  #app.fan-shell > .app-scroll > main{height:auto;max-height:none;overflow:visible}
}