:root{--bg:#070813;--card:rgba(255,255,255,.07);--card-border:rgba(255,255,255,.14);--text:#f8f7ff;--muted:rgba(248,247,255,.72);--primary:#8b5cf6;--secondary:#22d3ee;--radius:24px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Vazirmatn",Tahoma,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;padding:16px}
body.center{display:grid;place-items:center}
a{color:inherit}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--b1,#8b5cf6) 28%,transparent),transparent 30%),radial-gradient(circle at 80% 70%,color-mix(in srgb,var(--b2,#22d3ee) 24%,transparent),transparent 32%),var(--bg)}
.blob{position:absolute;width:42vmax;height:42vmax;border-radius:50%;filter:blur(90px);opacity:.3;animation:float 14s ease-in-out infinite alternate}
.blob.one{background:var(--b1,#7c3aed);top:-12%;right:-10%}.blob.two{background:var(--b2,#06b6d4);bottom:-14%;left:-12%;animation-delay:-5s}.blob.three{background:var(--b3,#f43f5e);top:35%;left:25%;animation-delay:-9s;opacity:.18}
@keyframes float{to{transform:translate3d(30px,-40px,0) scale(1.12)}}

.stage{perspective:1100px;width:min(360px,100%);transform-style:preserve-3d;transition:transform .25s ease}
.card{width:100%;border-radius:var(--radius);background:var(--card);border:1px solid var(--card-border);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 24px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden;opacity:0;transform:translateY(42px) scale(.96);animation:cardIn .95s cubic-bezier(.2,.8,.2,1) .12s forwards}
@keyframes cardIn{to{opacity:1;transform:none}}
.cover{height:120px;background:linear-gradient(135deg,color-mix(in srgb,var(--b1,#7c3aed) 72%,transparent),color-mix(in srgb,var(--b2,#06b6d4) 62%,transparent)),var(--cover,none) center/cover no-repeat;position:relative}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,8,19,.78),transparent 45%)}
.avatar{width:96px;height:96px;margin:-48px auto 10px;border-radius:50%;border:4px solid rgba(255,255,255,.92);background:var(--av,linear-gradient(135deg,color-mix(in srgb,var(--b1,#a855f7) 90%,transparent),color-mix(in srgb,var(--b2,#22d3ee) 90%,transparent))) center/cover no-repeat;display:grid;place-items:center;font-size:36px;font-weight:900;box-shadow:0 16px 40px rgba(0,0,0,.35);position:relative;z-index:1}
.info{padding:0 18px 14px;text-align:center}
.name{font-size:1.35rem;font-weight:900;letter-spacing:-.4px}
.role{margin-top:6px;color:#c7d2fe;font-size:.9rem;font-weight:600}
.custom-text{margin-top:11px;color:var(--muted);line-height:1.85;font-size:.9rem;white-space:pre-line}
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.badge{font-size:.74rem;font-weight:800;padding:3px 10px;border-radius:99px;color:var(--b);border:1px solid var(--b);background:color-mix(in srgb,var(--b) 16%,transparent);white-space:nowrap}
.socials{padding:0 16px 14px;display:grid;gap:9px}
.social{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);color:var(--text);text-decoration:none;transition:.25s}
.social:hover{transform:translateY(-3px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.25);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;background:var(--c,#6366f1);box-shadow:0 10px 24px rgba(0,0,0,.28);color:#fff;font-weight:900}
.icon svg{width:20px;height:20px;fill:#fff}
.txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.label{font-weight:800;font-size:.92rem}
.sub{color:rgba(248,247,255,.64);font-size:.78rem;margin-top:2px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copyright{display:block;text-align:center;margin-top:18px;color:rgba(248,247,255,.55);font-size:.78rem}
.copyright a{text-decoration:none;font-weight:800}
.empty{color:var(--muted);text-align:center;font-size:.85rem;padding:6px 0}

.pad{padding:26px 22px}.narrow{width:min(420px,100%)}.tc{text-align:center}
.card.pad{opacity:1;transform:none;animation:none}
form.stack{display:grid;gap:12px;margin-top:18px;text-align:left}
.field{display:grid;gap:6px}
.field>span{font-size:.82rem;color:var(--muted);font-weight:700}
input,select,textarea{width:100%;font:inherit;font-size:.92rem;color:var(--text);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:11px 13px;outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--secondary);box-shadow:0 0 0 3px rgba(34,211,238,.16)}
select option{background:#14152a;color:#fff}
input[type=file]{padding:8px}input[type=checkbox]{width:auto}
input.ltr,.ltr{direction:ltr;text-align:left}
textarea{resize:vertical;min-height:84px;line-height:1.7}
.btn{display:inline-block;border:0;cursor:pointer;border-radius:14px;padding:11px 18px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font:inherit;font-weight:800;font-size:.9rem;text-decoration:none;box-shadow:0 10px 26px rgba(139,92,246,.35);transition:.2s;text-align:center}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.ghost{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.18)}
.btn.danger{background:linear-gradient(135deg,#f43f5e,#be123c);box-shadow:none}
.btn.sm{padding:6px 12px;font-size:.78rem;border-radius:10px}
.alert{padding:10px 14px;border-radius:14px;font-size:.86rem;margin:14px 0 0;text-align:left}
.alert.ok{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4)}
.alert.err{background:rgba(244,63,94,.14);border:1px solid rgba(244,63,94,.45)}
.alert.flash{margin-bottom:18px}
.hint{font-size:.8rem;color:var(--muted);margin-top:16px}
.hint a{color:var(--secondary);font-weight:800;text-decoration:none}
.muted{color:var(--muted)}

.wrap{max-width:1000px;margin:0 auto}
.topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px}
.topbar .brand{font-weight:900;font-size:1.25rem}
.topbar nav{display:flex;gap:8px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 24px 80px rgba(0,0,0,.3);margin-bottom:16px}
.grid2 .panel{margin-bottom:0}
.panel h2{font-size:1.05rem;font-weight:900;margin-bottom:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:14px;text-align:center}
.stat b{display:block;font-size:1.6rem;font-weight:900}.stat span{font-size:.78rem;color:var(--muted)}
.linkrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.linkrow:last-child{border:0}.linkrow .txt{flex:1}
.preview-img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5)}
.preview-cover{width:100%;height:70px;border-radius:12px;object-fit:cover}
.media{display:flex;gap:12px;align-items:center}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.09);vertical-align:top}
th{color:var(--muted);font-weight:700;font-size:.78rem}
.tablewrap{overflow-x:auto}
.tag{font-size:.72rem;padding:2px 8px;border-radius:99px;background:rgba(244,63,94,.2);border:1px solid rgba(244,63,94,.5)}
.tag.adm{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.5)}
details summary{cursor:pointer;color:var(--secondary);font-weight:800;font-size:.8rem}
details form{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
details form input,details form select{width:auto;flex:1;min-width:110px;padding:6px 9px;font-size:.8rem}
.badge form{display:inline}.badge button{background:none;border:0;color:inherit;cursor:pointer;font-weight:900;padding:0 0 0 4px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:14px}
.hero h1{font-size:2.1rem;font-weight:900;line-height:1.5}
.hero p{margin:12px 0 22px;color:var(--muted);line-height:1.9}
.claim{display:flex;gap:8px;direction:ltr}.claim span{align-self:center;color:var(--muted);font-weight:700;white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.card{opacity:1;transform:none}}

.nbs{display:inline-flex;gap:5px;vertical-align:middle;margin-inline-start:7px}
.nb{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--b);cursor:help;outline:none;z-index:5}
.nb svg{width:22px;height:22px;display:block;fill:currentColor;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--b) 70%,transparent))}
.nb .emo{font-size:18px;line-height:1}
.nb::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);background:rgba(10,10,25,.96);color:#fff;border:1px solid color-mix(in srgb,var(--b) 60%,transparent);font-size:.72rem;font-weight:800;letter-spacing:0;padding:4px 10px;border-radius:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:.18s}
.nb:hover::after,.nb:focus::after{opacity:1;transform:translate(-50%,0)}
.badge svg,.badge img{width:15px;height:15px;vertical-align:-3px}.badge svg{fill:currentColor}
.iconpick{display:flex;flex-wrap:wrap;gap:6px}.iconpick label{cursor:pointer}.iconpick input{display:none}
.iconpick span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.iconpick svg{width:20px;height:20px;fill:#fff}
.iconpick input:checked+span{border-color:var(--secondary);background:rgba(34,211,238,.22)}

.badgelist{display:grid;gap:8px;margin:12px 0}
.badgerow{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px 12px;background:rgba(255,255,255,.04)}
.badgehead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.badgehead form{display:block}
.editbadge input[type=color]{flex:0 0 52px;min-width:52px;height:38px;padding:3px}
.editbadge input[name=label]{flex:1 1 160px}
.hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:14px 0}

.name .nm{position:relative;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.name .nbs{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin:0 0 0 8px;white-space:nowrap}

.icon img{width:22px;height:22px;object-fit:contain;display:block}.icon img.w{filter:brightness(0) invert(1)}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);cursor:pointer}
details form input[type=checkbox]{flex:0 0 auto;min-width:0;width:auto}

.info>.nbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px 0 0}

.more-links{display:grid;gap:9px}
button.social.more{width:100%;font:inherit;text-align:left;cursor:pointer;color:var(--text)}

/* ── Profile header polish ── */
.info{padding:2px 20px 16px}
.info .name{font-size:1.6rem;line-height:1.3;letter-spacing:-.5px;background:linear-gradient(180deg,#fff,#d9d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;overflow-wrap:anywhere}
.info .role{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:99px;font-size:.78rem;font-weight:700;letter-spacing:.03em;color:#ddd6fe;background:linear-gradient(135deg,color-mix(in srgb,var(--b1,#8b5cf6) 30%,transparent),color-mix(in srgb,var(--b2,#22d3ee) 18%,transparent));border:1px solid color-mix(in srgb,var(--b1,#8b5cf6) 40%,rgba(255,255,255,.2))}
.info>.nbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.info .nb{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--b) 16%,rgba(255,255,255,.04));border:1px solid color-mix(in srgb,var(--b) 50%,transparent);box-shadow:0 6px 18px color-mix(in srgb,var(--b) 25%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.info .nb:hover,.info .nb:focus{transform:translateY(-2px) scale(1.08);box-shadow:0 10px 24px color-mix(in srgb,var(--b) 40%,transparent)}
.info .nb svg,.info .nb img{width:18px;height:18px;filter:none}
.info .nb .emo{font-size:16px}
.info .custom-text{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem}

/* ── Footer stays at the bottom of the page ── */
body.profile{display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center}
body.profile .copyright{margin:16px 0 4px}

/* ── Pro: name gradient + effects ── */
.info .name.grad{background:var(--g);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.name.fx-shimmer{animation:shim 4s linear infinite}
.name.fx-glow{animation:glowp 2.6s ease-in-out infinite}
.name.fx-both{animation:shim 4s linear infinite,glowp 2.6s ease-in-out infinite}
@keyframes shim{to{background-position:200% 0}}
@keyframes glowp{0%,100%{filter:drop-shadow(0 0 5px var(--g1))}50%{filter:drop-shadow(0 0 16px var(--g1))}}

/* ── Pro: avatar rings ── */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.avatar.ring-gradient,.avatar.ring-spin{border-color:transparent;border-width:5px;background:var(--av,linear-gradient(135deg,color-mix(in srgb,var(--b1,#a855f7) 90%,transparent),color-mix(in srgb,var(--b2,#22d3ee) 90%,transparent))) center/cover no-repeat padding-box,linear-gradient(135deg,var(--b1,#8b5cf6),var(--b2,#22d3ee)) border-box}
.avatar.ring-spin{background:var(--av,linear-gradient(135deg,color-mix(in srgb,var(--b1,#a855f7) 90%,transparent),color-mix(in srgb,var(--b2,#22d3ee) 90%,transparent))) center/cover no-repeat padding-box,conic-gradient(from var(--ang),var(--b1,#8b5cf6),var(--b2,#22d3ee),var(--b3,#f43f5e),var(--b1,#8b5cf6)) border-box;animation:ringspin 3.5s linear infinite}
@keyframes ringspin{to{--ang:360deg}}
.avatar.ring-glow{animation:ringglow 2.4s ease-in-out infinite}
@keyframes ringglow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--b1,#8b5cf6) 60%,transparent),0 16px 40px rgba(0,0,0,.35)}50%{box-shadow:0 0 22px 6px color-mix(in srgb,var(--b2,#22d3ee) 70%,transparent),0 16px 40px rgba(0,0,0,.35)}}

/* ── Pro: link styles + page effects ── */
.ls-outline .social{background:transparent;border:1px solid var(--c)}
.ls-outline .social:hover{background:color-mix(in srgb,var(--c) 14%,transparent)}
.ls-solid .social{background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));border-color:transparent}
.ls-solid .icon{background:rgba(255,255,255,.2);box-shadow:none}
.ls-solid .sub{color:rgba(255,255,255,.82)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ── Pro: option pickers (dashboard) ── */
.optgrid{display:flex;flex-wrap:wrap;gap:8px}
.opt{cursor:pointer}.opt input{display:none}
.opt span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font-size:.82rem;font-weight:700}
.opt input:checked+span{border-color:var(--secondary);background:rgba(34,211,238,.18)}
.gtxt{background:var(--g);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.05rem;font-weight:900}
.dots{display:inline-flex;font-style:normal}.dots u{width:12px;height:12px;border-radius:50%;margin-inline-end:-3px;border:1px solid rgba(0,0,0,.3);display:inline-block}
.tag.pro{background:linear-gradient(135deg,rgba(245,158,11,.3),rgba(168,85,247,.3));border-color:rgba(245,158,11,.6)}

.alert.warn{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.5);margin:10px 0 0}

/* ── Tabs / layout polish ── */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:5px;margin:0 0 16px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-size:.86rem;font-weight:800;color:var(--muted);background:transparent;border:0;padding:10px 16px;border-radius:12px;cursor:pointer;transition:.2s;white-space:nowrap}
.tabs button:hover{color:var(--text);background:rgba(255,255,255,.06)}
.tabs button.on{color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 8px 22px rgba(139,92,246,.35)}
.tabs .count{font-size:.7rem;min-width:20px;padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.14);text-align:center}
.tabs .count.warn{background:#f59e0b;color:#111}
.pane-narrow{max-width:760px;margin-inline:auto}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:.78rem;font-weight:800;padding:5px 12px;border-radius:99px;text-decoration:none;color:var(--muted);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);transition:.2s}
.chip:hover{color:var(--text)}.chip.on{color:#fff;border-color:var(--secondary);background:rgba(34,211,238,.18)}
.stats{margin-top:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}.tabs button{padding:10px 12px}}

/* ── Searchable dropdown ── */
.combo{position:relative}
.combo-input{cursor:pointer}
.combo-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:240px;overflow:auto;background:#14152a;border:1px solid rgba(255,255,255,.18);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px}
.combo-item{padding:8px 10px;border-radius:10px;cursor:pointer;font-size:.88rem}
.combo-item:hover,.combo-item.act{background:rgba(139,92,246,.28)}
.combo-item.sel{font-weight:900;color:var(--secondary)}
.combo-empty{padding:10px;color:var(--muted);font-size:.84rem}

/* ── Pro: more link card styles ── */
.ls-neon .social{background:rgba(0,0,0,.35);border-color:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 0 14px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--c) 18%,transparent)}
.ls-neon .social:hover{background:rgba(0,0,0,.45);box-shadow:0 0 0 1px var(--c),0 0 28px var(--c),inset 0 0 20px color-mix(in srgb,var(--c) 30%,transparent)}
.ls-neon .icon{background:transparent;box-shadow:none;border:1px solid var(--c)}
.ls-neon .icon svg{filter:drop-shadow(0 0 5px var(--c))}
.ls-gradient .social{--bgc:color-mix(in srgb,var(--c) 14%,#0b0c1f);border:2px solid transparent;background:linear-gradient(var(--bgc),var(--bgc)) padding-box,conic-gradient(from var(--ang),var(--c),rgba(255,255,255,.1) 30%,var(--c) 60%,rgba(255,255,255,.1) 90%,var(--c)) border-box;animation:ringspin 4s linear infinite}
.ls-gradient .social:hover{background:linear-gradient(var(--bgc),var(--bgc)) padding-box,conic-gradient(from var(--ang),var(--c),rgba(255,255,255,.1) 30%,var(--c) 60%,rgba(255,255,255,.1) 90%,var(--c)) border-box}
.ls-shine .social{position:relative;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 28%,transparent),rgba(255,255,255,.05))}
.ls-shine .social::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-120%);animation:shine 3.8s ease-in-out infinite;pointer-events:none}
.ls-shine .social:nth-child(2n)::after{animation-delay:.7s}.ls-shine .social:nth-child(3n)::after{animation-delay:1.4s}
@keyframes shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.ls-light .social{background:rgba(255,255,255,.95);border-color:transparent;color:#14152a;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.ls-light .social:hover{background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.32)}
.ls-light .sub{color:#5b5d78}
.ls-brutal .social{background:#fff;color:#111;border:2px solid #111;border-radius:10px;box-shadow:4px 4px 0 var(--c)}
.ls-brutal .social:hover{background:#fff;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--c)}
.ls-brutal .icon{border:2px solid #111;border-radius:8px;box-shadow:none}
.ls-brutal .sub{color:#444}
.ls-pill .social{border-radius:99px;padding:8px 14px 8px 8px}
.ls-pill .icon{border-radius:50%}
.ls-minimal .social{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.18);border-radius:0;box-shadow:none;padding:12px 4px}
.ls-minimal .social:hover{background:transparent;box-shadow:none;border-bottom-color:var(--c);transform:translateX(4px)}
.ls-minimal .icon{background:transparent;box-shadow:none}
.ls-minimal .icon svg{fill:var(--c)}
.ls-minimal .icon b{color:var(--c)}

/* ── Pro: link layouts ── */
.socials.lay-grid,.socials.lay-grid .more-links{grid-template-columns:1fr 1fr}
.lay-grid .more-wrap,.lay-grid .social.more{grid-column:1/-1}
.lay-grid .social{flex-direction:column;text-align:center;padding:14px 8px;gap:8px}
.lay-grid .txt{align-items:center;width:100%}
.lay-grid .sub{text-align:center;max-width:100%}
.socials.lay-tiles,.socials.lay-tiles .more-links{grid-template-columns:repeat(4,1fr);gap:10px}
.lay-tiles .more-wrap,.lay-tiles .social.more{grid-column:1/-1}
.lay-tiles .social{aspect-ratio:1;justify-content:center;padding:8px}
.lay-tiles .social .txt{display:none}
.lay-tiles .social.more{aspect-ratio:auto;justify-content:flex-start;padding:10px 12px}
.lay-tiles .social.more .txt{display:flex}
.lay-tiles .icon{width:44px;height:44px;flex-basis:44px}
.socials .empty{grid-column:1/-1}
.lay-compact .social{padding:6px 10px;gap:10px;border-radius:12px}
.lay-compact .icon{width:32px;height:32px;flex-basis:32px;border-radius:10px}
.lay-compact .icon svg{width:16px;height:16px}.lay-compact .icon img{width:18px;height:18px}
.lay-compact .social:not(.more) .sub{display:none}

/* ── Pro: plans + redeem (dashboard) ── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 10px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.plan .pn{font-size:1rem;font-weight:900}.plan .pd{font-size:.78rem;color:var(--muted)}
.plan .pp{font-weight:800;font-size:.95rem;line-height:1.5}.plan .pp s{font-size:.76rem;color:var(--muted);font-weight:600}
.plan .btn{margin-top:4px}
.plan .ribbon{position:absolute;top:-9px;inset-inline-end:10px;font-size:.7rem;font-weight:900;padding:2px 9px;border-radius:99px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}
.redeem{display:flex;gap:8px}.redeem input{flex:1}
.tag.ok{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.5)}


/* ── No page scrollbar (scrolling still works) ── */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ── Smooth "Show more" ── */
.socials{--gap:9px;--ease:cubic-bezier(.22,1,.36,1)}
.socials.lay-tiles{--gap:10px}
.socials>*{min-width:0}
.more-wrap{display:grid;grid-template-rows:0fr;margin-top:calc(var(--gap) * -1);opacity:0;transition:grid-template-rows .65s var(--ease),margin-top .65s var(--ease),opacity .4s ease}
.more-wrap.open{grid-template-rows:1fr;margin-top:0;opacity:1}
.more-wrap>.more-links{min-height:0;overflow:hidden}
.more-wrap.open>.more-links{animation:moreIn .65s var(--ease) backwards}
.more-wrap.done>.more-links{overflow:visible}
@keyframes moreIn{from{opacity:0;transform:translateY(-10px)}}
button.social.more{transition:height .55s var(--ease),padding .55s var(--ease),margin-top .55s var(--ease),border-width .55s var(--ease),opacity .3s ease,transform .25s,background .25s,box-shadow .25s,border-color .25s}
button.social.more.gone{height:0;padding-top:0;padding-bottom:0;margin-top:calc(var(--gap) * -1);border-width:0;opacity:0;overflow:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.more-wrap,button.social.more{transition:none!important}.more-wrap.open>.more-links{animation:none!important}}

/* ── Admin: long lists (platforms / titles) ── */
.listbar{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.listbar .listsearch{flex:1;padding:9px 13px}
.listcount{font-size:.76rem;white-space:nowrap}
details.addbox{margin:0 0 12px;border:1px dashed rgba(255,255,255,.2);border-radius:14px;padding:10px 14px;background:rgba(255,255,255,.03)}
details.addbox[open]{border-style:solid;border-color:rgba(34,211,238,.35)}
details.addbox>summary{font-size:.86rem}
details.addbox form input:not([type=checkbox]):not([type=color]):not([type=file]){padding:10px 13px;font-size:.88rem}
.listbox{max-height:min(64vh,600px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;padding-inline-end:4px;margin:0;align-content:start}
.listbox::-webkit-scrollbar{display:block;width:6px}
.listbox::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}
@media(min-width:700px){.listbox{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));align-items:start}}
.listbox .badgerow[hidden]{display:none}
.listbox .badgehead{flex-wrap:wrap}
.listbox .badgehead>span:first-child{min-width:0;flex:1 1 150px}
.listempty{text-align:center;font-size:.84rem;padding:14px 0}

/* Stable card width: the grid column no longer depends on the content's intrinsic width */
body.profile{grid-template-columns:minmax(0,1fr)}

/* ═════════ Home page ═════════ */
body.homepage{padding:16px 16px 0}
.hnav{max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0 0}
.hnav .brand{display:inline-flex;align-items:center;gap:3px;font-weight:900;font-size:1.3rem;text-decoration:none}
.hnav .brand .bword{background:linear-gradient(135deg,#fff,#c4b5fd 60%,var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hnav .brand .bmark{height:28px;width:auto;display:block;flex:none}
.hnav nav{display:flex;gap:8px}
.home{max-width:1040px;margin:0 auto;display:grid;gap:clamp(48px,9vw,96px);padding:clamp(36px,8vw,84px) 0 48px}
.home h2{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:900;letter-spacing:-.5px;line-height:1.3}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--secondary);margin-bottom:8px}

.hhero{text-align:center;display:grid;justify-items:center;gap:20px}
.slogan{font-size:clamp(1.7rem,6vw,3.4rem);font-weight:900;letter-spacing:-1px;line-height:1.25;min-height:2.6em;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:0 .3em}
.slogan .brandword{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.slogan .dash{color:var(--muted)}
.caret{display:inline-block;width:3px;height:.95em;margin-left:4px;align-self:center;background:var(--secondary);border-radius:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sub-hero{max-width:560px;color:var(--muted);line-height:1.9;font-size:1.02rem}
.claimbox{display:flex;align-items:center;gap:8px;direction:ltr;width:min(500px,100%);padding:7px 7px 7px 18px;border-radius:20px;background:var(--card);border:1px solid var(--card-border);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);transition:.2s}
.claimbox:focus-within{border-color:var(--secondary);box-shadow:0 0 0 4px rgba(34,211,238,.14),0 24px 70px rgba(0,0,0,.35)}
.claimbox .prefix{color:var(--muted);font-weight:800;white-space:nowrap;font-size:1rem}
.claimbox input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none!important;padding:12px 4px;font-size:1rem;font-weight:700}
.claimbox .btn{padding:12px 26px;border-radius:14px;font-size:1rem}
.fine{font-size:.8rem;color:var(--muted)}

.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hstats>div{text-align:center;padding:26px 12px;border-radius:22px;background:var(--card);border:1px solid var(--card-border);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.hstats b{display:block;font-size:clamp(1.7rem,5vw,2.8rem);font-weight:900;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,#fff,#c4b5fd 55%,var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hstats span{font-size:.82rem;color:var(--muted);font-weight:700}
@media(max-width:560px){.hstats{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(24px,6vw,64px);align-items:center;justify-content:center}
@media(max-width:820px){.split{grid-template-columns:1fr}.demo-wrap{order:2}.what{text-align:center}.ticks{text-align:left;max-width:420px;margin-inline:auto}}
.demo-wrap{display:grid;place-items:center;perspective:1000px}
.card.demo{width:min(340px,100%);opacity:1;transform:rotate(-2deg);animation:demoFloat 6s ease-in-out infinite alternate;pointer-events:none;user-select:none}
@keyframes demoFloat{to{transform:rotate(1.5deg) translateY(-10px)}}
.demo .cover{height:92px}
.demo .avatar{width:80px;height:80px;margin-top:-40px;font-size:30px}
.demo .info{padding-bottom:10px}
.demo .name{font-size:1.35rem;background:linear-gradient(90deg,#f093fb,#f5576c,#f093fb);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shim 4s linear infinite}
.demo .nbs-row{display:flex;justify-content:center;margin-top:10px}
.demo .nb{width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--b) 16%,rgba(255,255,255,.04));border:1px solid color-mix(in srgb,var(--b) 50%,transparent)}
.demo .nb svg{width:16px;height:16px;filter:none}
.demo .nb::after{display:none}
.demo .custom-text{margin-top:12px;font-size:.84rem}
.demo .socials{padding-bottom:16px}
.what p.muted{margin:10px 0 18px;line-height:1.8}
.ticks{list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:30px;color:var(--text);line-height:1.6;font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary)) ;-webkit-mask:none}
.ticks li::after{content:"";position:absolute;left:6px;top:8px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{padding:24px 20px;border-radius:22px;background:var(--card);border:1px solid var(--card-border);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transition:.25s}
.step:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.step i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-style:normal;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 10px 24px rgba(139,92,246,.35);margin-bottom:14px}
.step h3{font-size:1.02rem;font-weight:900;margin-bottom:6px}
.step p{color:var(--muted);font-size:.88rem;line-height:1.8}

.reviews{columns:3 280px;column-gap:14px;margin-top:28px}
.review{break-inside:avoid;margin:0 0 14px;padding:20px;border-radius:22px;background:var(--card);border:1px solid var(--card-border);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.stars{color:#fbbf24;letter-spacing:2px;font-size:.95rem}.stars span{color:rgba(255,255,255,.2)}
.review blockquote{margin:10px 0 14px;line-height:1.85;font-size:.92rem;color:var(--text);overflow-wrap:anywhere}
.review figcaption{display:flex;align-items:center;gap:10px}
.review small{display:block;font-size:.74rem;margin-top:1px;color:var(--muted)}.review small a{color:var(--muted);text-decoration:none}
.rav{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary)) center/cover no-repeat}

.cta.card{padding:clamp(30px,6vw,52px) 20px;text-align:center;display:grid;justify-items:center;gap:12px;opacity:1;transform:none;animation:none;background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(34,211,238,.14)),var(--card)}
.cta .btn{padding:13px 30px;font-size:1rem;margin-top:6px}
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
body.homepage .copyright{margin:0;padding:22px 0 28px;border-top:1px solid rgba(255,255,255,.08)}
body.homepage .copyright a{font-weight:700}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.card.demo{transform:none}}

/* ═════════ Panel layout (dashboard + admin): sidebar ═════════ */
body:has(.shell){padding:18px}
.shell{display:grid;grid-template-columns:268px minmax(0,1fr);gap:22px;max-width:1360px;margin:0 auto;align-items:start}
.side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px;padding:16px;max-height:calc(100vh - 36px);overflow-y:auto;scrollbar-width:none;border-radius:var(--radius);background:var(--card);border:1px solid var(--card-border);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 24px 80px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1)}
.side::-webkit-scrollbar{display:none}
.sbrand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;font-size:1.2rem;line-height:1.15;padding:2px 4px}
.sbrand small{display:block;font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.sbrand .logo{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;font-size:1.15rem;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 10px 24px rgba(139,92,246,.4)}
.who{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.wav{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary)) center/cover no-repeat;border:2px solid rgba(255,255,255,.55)}
.wtxt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.wtxt b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtxt small{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav{display:grid;gap:4px}
.sgroup{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,247,255,.45);padding:12px 12px 4px}
.sgroup:first-child{padding-top:2px}
.snav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:14px;background:transparent;color:var(--muted);font:inherit;font-size:.9rem;font-weight:800;text-align:left;cursor:pointer;transition:.2s}
.snav button:hover{color:var(--text);background:rgba(255,255,255,.07)}
.snav button.on{color:#fff;background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(34,211,238,.8));box-shadow:0 10px 26px rgba(139,92,246,.35)}
.ni{width:20px;height:20px;flex:0 0 20px;fill:currentColor}
.snav .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav .count,.snav .tag{margin-inline-start:auto;flex:0 0 auto}
.snav .count{font-size:.7rem;min-width:22px;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.14);text-align:center;line-height:1.4}
.snav .count.warn{background:#f59e0b;color:#111}
.snav button.on .count{background:rgba(255,255,255,.26)}
.sfoot{display:grid;gap:4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.sfoot a{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:12px;text-decoration:none;font-size:.86rem;font-weight:700;color:var(--muted);transition:.2s}
.sfoot a:hover{color:var(--text);background:rgba(255,255,255,.07)}
.main{min-width:0}
.pagehead{display:grid;gap:2px;margin:2px 0 18px}
.pagehead h1{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:900;letter-spacing:-.5px;line-height:1.3}
.pagehead p{font-size:.88rem}
.main .stats{margin:0 0 20px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.main .stat{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:92px;padding:16px 18px;border-radius:20px;text-align:left}
.main .stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:.85}
.main .stat b{font-size:1.65rem;line-height:1.2;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main .stat span{font-size:.78rem;font-weight:700}
.main .stat.urlstat b{font-size:1.05rem;line-height:1.7}
.stat .copy{position:absolute;top:12px;right:12px;font:inherit;font-size:.72rem;font-weight:800;color:var(--text);padding:4px 10px;border-radius:9px;cursor:pointer;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);transition:.2s}
.stat .copy:hover{background:rgba(255,255,255,.2)}

/* one consistent content width + rhythm for every tab */
.main .tabpane.pane-narrow{max-width:860px;margin-inline:0}
.main .tabpane>.panel+.panel{margin-top:18px}
.main .tabpane>.panel:last-child,.main .grid2 .panel{margin-bottom:0}
.main .grid2{align-items:stretch}
.panel{padding:22px;margin-bottom:0}
.panel h2{font-size:1.1rem;margin-bottom:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel h3{font-size:.95rem;font-weight:900}
.panel .lead{font-size:.84rem;line-height:1.7;margin:4px 0 14px}
.panel>form.stack:first-child,.panel>h2+form.stack{margin-top:16px}
form.stack{gap:14px}
.main form.stack>.btn[type=submit],.main form.stack>div>.btn[type=submit]{justify-self:start;min-width:170px}
.hr{margin:18px 0}

/* equal control sizes everywhere */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select{min-height:44px}
input[type=color]{min-height:44px;padding:4px;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:1.2}
.btn.sm{min-height:36px;padding:0 14px}
details form input:not([type=checkbox]),details form select{min-height:36px;padding:6px 10px;font-size:.82rem}
.opt span{min-height:40px}
.linkrow{padding:10px 0}
.linkrow form .btn.sm{min-width:36px;padding:0 10px}
.tag{display:inline-flex;align-items:center;line-height:1.5}
table{font-size:.86rem}
th{text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
tbody tr:hover td,tr:hover>td{background:rgba(255,255,255,.025)}
.tablewrap{border-radius:14px}
.chips{gap:8px}.chip{display:inline-flex;align-items:center;min-height:32px}
.badgerow{padding:10px 14px}
.badgehead{min-height:36px}

@media(max-width:960px){
  body:has(.shell){padding:12px}
  .shell{grid-template-columns:1fr;gap:14px}
  .side{position:static;max-height:none;padding:12px;gap:10px;border-radius:20px}
  .who{display:none}
  .snav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .snav::-webkit-scrollbar{display:none}
  .snav button{width:auto;flex:0 0 auto;min-height:40px;padding:0 14px}
  .snav button .count{margin-inline-start:6px}
  .sgroup{display:none}
  .sfoot{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px}
  .sfoot a{min-height:36px;padding:0 12px;background:rgba(255,255,255,.05)}
  .main .tabpane.pane-narrow{max-width:none}
}
@media(max-width:560px){
  .panel{padding:16px}
  .main .stats{grid-template-columns:1fr 1fr}
  .main .stat.urlstat{grid-column:1/-1}
  .main form.stack>.btn[type=submit]{justify-self:stretch}
}

/* Login / Sign up forms: full-width submit button */
body.center form.stack>.btn{width:100%;justify-self:stretch}

/* Admin: six equal stat cards in one tidy row */
.main .stats.stats6{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.stats6 .stat{min-height:96px;padding:16px 14px 14px;justify-content:space-between;gap:6px}
.stats6 .stat b{order:2;font-size:1.6rem;line-height:1}
.stats6 .stat span{order:1;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.35;min-height:2.7em;display:flex;align-items:flex-start}
@media(max-width:1180px){.main .stats.stats6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.main .stats.stats6{grid-template-columns:repeat(2,minmax(0,1fr))}.stats6 .stat b{font-size:1.45rem}}

/* Dashboard: three equal stat cards, same look as admin */
.main .stats.stats3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stats3 .stat{min-height:96px;padding:16px 14px 14px;justify-content:space-between;gap:6px}
.stats3 .stat b{order:2;font-size:1.6rem;line-height:1.1}
.stats3 .stat span{order:1;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.35;display:flex;align-items:flex-start;min-height:1.35em}
.stats3 .stat.urlstat b{font-size:1.05rem;line-height:1.6;max-width:100%}
.stats3 .stat .copy{top:10px;right:10px}
.stats3 .stat.urlstat span{padding-right:64px}
@media(max-width:700px){.main .stats.stats3{grid-template-columns:repeat(2,minmax(0,1fr))}.main .stats3 .stat.urlstat{grid-column:1/-1}}

/* Stats row, header and every tab share exactly the same width */
.main{width:100%;margin-inline:auto}
.main-d{max-width:860px}
.main-a{max-width:1120px}
.main .tabpane.pane-narrow{max-width:none}
.main-d .stats3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Content sits right next to the sidebar (no centering gap) */
.main{margin-inline:0}

/* Locked Customize tab */
.snav .count.lockc{display:inline-flex;align-items:center;padding:3px 6px}
.snav .count.lockc .ni{width:13px;height:13px;flex-basis:13px;margin:0}
.lockwrap{position:relative;margin-top:14px;border-radius:18px;overflow:hidden}
.lockprev{filter:blur(6px) saturate(.7);opacity:.5;pointer-events:none;user-select:none;max-height:460px;overflow:hidden;padding:4px}
.lockcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;background:rgba(10,8,24,.45)}
.lockcard h3{font-size:1.1rem;margin:0}
.lockcard p{margin:0 0 6px;font-size:.88rem}
.lockico{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,rgba(245,158,11,.3),rgba(168,85,247,.3));border:1px solid rgba(245,158,11,.6)}
.lockico .ni{width:26px;height:26px;flex-basis:26px;fill:#fff}

/* Sidebar PRO badge (Customize tab) */
.snav .pbadge{margin-inline-start:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px 0 6px;border-radius:99px;font-size:.62rem;font-weight:900;letter-spacing:.08em;line-height:1;color:#1b1030;background:linear-gradient(135deg,#fcd34d,#f59e0b 55%,#f472b6);box-shadow:0 2px 10px rgba(245,158,11,.35)}
.snav .pbadge .ni{width:11px;height:11px;flex:0 0 11px;fill:currentColor;margin:0}
.snav .pbadge.off{color:#fde68a;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.45);box-shadow:none}
.snav button.on .pbadge{box-shadow:0 0 0 2px rgba(255,255,255,.28),0 2px 10px rgba(245,158,11,.4)}
.snav button.on .pbadge.off{color:#fff;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}

/* Badge alignment fix: Latin-only font with predictable metrics, text + icon centered on one line */
.tag,.snav .pbadge{font-family:Arial,Helvetica,"Segoe UI",sans-serif;display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle;white-space:nowrap}
.tag{height:22px;padding:0 9px;box-sizing:border-box;font-weight:800}
.tag.pro{font-weight:900;letter-spacing:.08em;font-size:.66rem;color:#1b1030;border:0;background:linear-gradient(135deg,#fcd34d,#f59e0b 55%,#f472b6);box-shadow:0 2px 10px rgba(245,158,11,.3)}
.snav .pbadge{height:20px;padding:0 8px 0 6px;box-sizing:border-box}
.snav .pbadge .ni,.tag .ni{display:block;align-self:center}
.snav .pbadge.off{padding:0 7px 0 5px}
h2 .tag{margin-inline-start:6px;position:relative;top:-1px}
.who .tag.pro{height:18px;padding:0 7px;font-size:.6rem}

/* Plan limits + file links */
[hidden]{display:none!important}
.row2.one{grid-template-columns:1fr}
.usage{font-size:.8rem;margin:6px 0 10px;line-height:1.7}
.usage b{color:var(--text)}
.linkrow.locked{opacity:.5;filter:saturate(.5)}
.linkrow.is-hidden{opacity:.55}
.linkrow.is-hidden .btn,.linkrow.locked .btn{opacity:1}
.linkrow form .btn.sm[value=toggle_hide]{min-width:58px}
.linkrow.locked .btn.danger{opacity:1}
.tag.lockt{color:#fde68a;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.5);font-size:.64rem;font-weight:800;letter-spacing:.04em;opacity:1}
.limitbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px;padding:12px 14px;border-radius:16px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.45)}
.limitbox>div{flex:1;min-width:180px}
.limitbox p{margin:2px 0 0;font-size:.8rem;line-height:1.6}
.limitbox b{font-size:.92rem}
.lockico.sm{width:36px;height:36px;flex:0 0 36px}
.lockico.sm .ni{width:17px;height:17px;flex-basis:17px}
.social.file .dl{width:18px;height:18px;flex:0 0 18px;margin-inline-start:auto;fill:rgba(248,247,255,.55);transition:.2s}
.social.file:hover .dl{fill:#fff;transform:translateY(2px)}
.lay-grid .social.file .dl,.lay-tiles .social.file .dl{display:none}
#addForm{margin-bottom:14px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}

/* ═════════ Admin v2: users, dialogs, uniform tiles, reviews ═════════ */
.sm:not(.btn){font-size:.76rem}
.tag.warnt{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.5)}
button.chip{font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.chip i{font-style:normal;opacity:.7;margin-inline-start:4px;font-size:.72rem}

/* users toolbar + table */
.utop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.usearch{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.usearch input[type=search]{min-width:230px;width:auto;flex:1;padding:8px 12px;font-size:.85rem}
.usearch select{width:auto;padding:8px 10px;font-size:.82rem}
.bulkbar{display:none;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-bottom:12px;border-radius:14px;border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.08)}
.bulkbar.on{display:flex}
.bulkbar select,.bulkbar input{width:auto;padding:7px 10px;font-size:.82rem}
.bulkbar input[type=number]{width:92px}
.bulkbar .bn{font-size:.82rem;font-weight:800;margin-inline-end:4px}
.utable td{vertical-align:middle}
.utable th.c,.utable td.c{width:34px;text-align:center}
.utable th.r,.utable td.r{text-align:right}
.utable input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--secondary);cursor:pointer}
.utable tr.rowban{background:rgba(244,63,94,.07)}
.ucell{display:flex;gap:10px;align-items:center;min-width:230px}
.uav{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary)) center/cover no-repeat;border:2px solid rgba(255,255,255,.35)}
.uav.lg{width:54px;height:54px;flex-basis:54px;font-size:1.3rem}
.utxt{display:grid;min-width:0;gap:1px;font-size:.86rem}
.utxt a{color:var(--secondary);text-decoration:none;font-weight:700;font-size:.8rem}
.utxt .em{font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.utags{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}.utags:empty{display:none}
.uact{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.uact form{display:block}

/* dialogs */
dialog.mdl{margin:auto;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:#101226;color:var(--text);width:min(700px,calc(100vw - 24px));max-height:calc(100vh - 28px);box-shadow:0 40px 120px rgba(0,0,0,.6);overflow:hidden;text-align:left}
dialog.mdl.narrow{width:min(520px,calc(100vw - 24px))}
dialog.mdl[open]{display:flex;flex-direction:column}
dialog.mdl::backdrop{background:rgba(3,4,12,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.mhead{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(34,211,238,.1))}
.mhead .utxt{flex:1;min-width:0}
.mhead .icon{width:46px;height:46px;flex-basis:46px}
.mx{margin-inline-start:auto;flex:0 0 34px;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer}
.mx:hover{background:rgba(255,255,255,.14)}
.mbody{padding:16px 18px 20px;overflow-y:auto;display:grid;gap:14px;align-content:start}
.mfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mfacts div{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.mfacts span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.mfacts b{font-size:.92rem}
.msec{display:grid;gap:10px;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
.msec h3{font-size:.92rem;font-weight:900}
.msec p{margin:0}
.msec.danger{border-color:rgba(244,63,94,.4);background:rgba(244,63,94,.05)}
.mform{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;margin:0}
.mform .wide{grid-column:1/-1}
.mform input,.mform select{width:100%;min-width:0;padding:10px 12px;font-size:.9rem}
.mform input[type=checkbox],.mform input[type=radio]{width:auto;padding:0;min-width:0}
.mform input[type=color]{height:42px;padding:3px}
.mform input[type=file]{padding:8px 10px}
.checks{display:flex;gap:16px;flex-wrap:wrap}
.mbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.mbtns form{display:block;margin:0}
.presets{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.proform .modes{display:flex;gap:14px;flex-wrap:wrap;align-self:center}
.proform .mbtns{grid-column:1/-1}
@media(max-width:560px){.mform{grid-template-columns:1fr}.mfacts{grid-template-columns:repeat(2,1fr)}}
.bpick{display:flex;gap:8px;flex-wrap:wrap}
.bpick label{cursor:pointer}.bpick input{display:none}
.bpick span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:.78rem;font-weight:800;border:1px solid rgba(255,255,255,.18);color:var(--muted);transition:.15s}
.bpick input:checked+span{color:var(--b);border-color:var(--b);background:color-mix(in srgb,var(--b) 18%,transparent)}
.bpick svg{width:16px;height:16px;fill:currentColor}.bpick img{width:18px;height:18px}

/* badge icon picker */
.pickwrap{display:grid;gap:6px}
.pickhead{font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.iconpick.big{max-height:134px;overflow-y:auto;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(0,0,0,.15);scrollbar-width:thin}
.iconpick .e{font-size:19px;line-height:1}

/* uniform tiles (platforms + titles): every card has exactly the same size */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:6px}
.tile{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:164px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);transition:.2s}
.tile:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.07)}
.tile.off{opacity:.6}
.tile[hidden]{display:none}
.tile-top{display:flex;align-items:center;gap:12px;min-width:0}
.tile-top .icon,.tile-ico{width:46px;height:46px;flex:0 0 46px;border-radius:14px}
.tile-ico{display:grid;place-items:center;font-weight:900;font-size:1.15rem;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 10px 24px rgba(139,92,246,.3)}
.tile-name{display:grid;min-width:0;gap:1px}
.tile-name b{font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-name small{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-info{flex:1;display:grid;align-content:start;gap:8px}
.tile-pre{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-tags{display:flex;gap:6px;flex-wrap:wrap}
.tile-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.tile-actions form{display:block;margin:0}
.tile-actions .btn{width:100%;padding:7px 4px;font-size:.76rem}

/* reviews */
.rvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rvcard{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:230px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045)}
.rvcard[hidden]{display:none}
.rvcard.pin{border-color:rgba(245,158,11,.6);background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(168,85,247,.07))}
.rvtop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rvname{display:grid;min-width:0}
.rvname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvstars{color:#fbbf24;letter-spacing:2px;font-size:.9rem}.rvstars span{opacity:.25}
.rvbody{flex:1;margin:0;color:var(--muted);line-height:1.75;font-size:.88rem;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}

/* Admin: Manage / Ban (or Unban) buttons share one width */
.uact{display:grid;grid-template-columns:minmax(88px,auto);gap:6px;justify-content:end}
.uact>*,.uact form .btn{width:100%}
.uact form{margin:0}
/* Admin: Badges tab - compact card grid (edit opens in a dialog) */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin:12px 0 4px}
.bcard{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);min-width:0}
.bcard:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.bcard>.badge{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;padding:4px 12px}
.bcard .bact{display:flex;gap:6px;flex:0 0 auto}
.bcard .bact form{display:block;margin:0}
.bcard .bact .btn{min-height:30px;padding:0 12px;font-size:.76rem}
.mhead>.badge{font-size:.9rem;padding:5px 14px}

/* Home demo card: gradient name must be clipped on the inner span (mobile browsers drop text when an inline-block child sits inside a background-clip:text parent) */
.demo .name{background:none;-webkit-text-fill-color:currentColor;color:#f5576c;animation:none}
.demo .name .nm{display:inline-block;max-width:100%;padding:0 .05em;color:#f5576c;background:linear-gradient(90deg,#f093fb,#f5576c,#f093fb);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shim 4s linear infinite}
@media(max-width:820px){.demo .name .nm{animation:none;background-size:100% 100%}}

/* email verification */
.codein{font-size:1.6rem!important;letter-spacing:.5em;text-align:center!important;font-weight:900;text-indent:.5em}
.vrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.vrow form{display:block;margin:0}
.vbanner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;line-height:1.7}
details.chg{margin-top:16px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
details.chg summary{cursor:pointer;font-weight:800;font-size:.88rem;color:var(--secondary)}
details.chg form input{width:100%;flex:none;padding:11px 13px;font-size:.92rem;min-height:44px}
.mailres{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.8rem}
.sbrand .logo svg{width:32px;height:32px;display:block}
.alert.vbanner{margin:0 0 18px}

/* checkbox / radio rows inside stacked forms (admin email tab) */
.stack .chk{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;line-height:1.7;color:var(--text)}
.stack .chk input[type=checkbox],.stack .chk input[type=radio]{width:18px;height:18px;min-width:18px;min-height:0;padding:0;margin-top:3px;flex:none;accent-color:var(--secondary);cursor:pointer}

/* ───────── Customize v2: live preview + visual option cards ───────── */
.cz [hidden]{display:none!important}
.czform{margin-top:14px}
.cz{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.cz-main{min-width:0}
@media(min-width:1180px){.cz{grid-template-columns:minmax(0,1fr) 320px}.cz-pv{position:sticky;top:16px}}
@media(max-width:1179px){
  /* compact preview that stays pinned above the options while you scroll */
  .cz-pv{order:-1;position:sticky;top:6px;z-index:9;gap:0;padding:8px;border-radius:20px;background:rgba(10,10,28,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 34px rgba(0,0,0,.45)}
  .cz .cz-pvhead,.cz .cz-hint{display:none}
  .pv{max-width:250px;margin-inline:auto;padding:10px}
  .pv .card{zoom:.56}
}

/* section tabs */
.cz-tabs{display:flex;gap:4px;overflow-x:auto;padding:4px;margin-bottom:18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);scrollbar-width:none}
.cz-tabs::-webkit-scrollbar{display:none}
.cz-tabs button{flex:1 0 auto;position:relative;font:inherit;font-size:.82rem;font-weight:800;color:var(--muted);background:transparent;border:0;padding:9px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:.2s}
.cz-tabs button:hover{color:var(--text);background:rgba(255,255,255,.06)}
.cz-tabs button.on{color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 6px 18px rgba(139,92,246,.3)}
.cz-tabs button.chg::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 2px #14152a}

/* groups + cards */
.cz-grp{margin-bottom:22px}
.cz-grp>h4{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.92rem;font-weight:900;margin-bottom:3px}
.cz-grp>h4 em{font-style:normal;font-weight:800;font-size:.76rem;color:var(--secondary);text-align:right}
.cz-grp>p{font-size:.78rem;color:var(--muted);line-height:1.6;margin-bottom:10px}
.cz-note{color:#fde68a!important;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:7px 10px}
.czgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));transition:opacity .2s}
.czgrid.dim{opacity:.5}
.optc{position:relative;display:block;cursor:pointer}
.optc input{position:absolute;opacity:0;pointer-events:none}
.optc .oc{display:flex;flex-direction:column;gap:8px;height:100%;padding:9px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);transition:transform .18s,background .18s,border-color .18s,box-shadow .18s}
.optc:hover .oc{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.optc input:checked+.oc{border-color:var(--secondary);background:rgba(34,211,238,.12);box-shadow:0 0 0 1px var(--secondary),0 10px 26px rgba(34,211,238,.16)}
.optc input:focus-visible+.oc{outline:2px solid #fff;outline-offset:2px}
.optc .demo{position:relative;display:grid;place-items:center;height:60px;border-radius:11px;background:rgba(0,0,0,.3);overflow:hidden}
.optc .demo.lsd{height:78px;padding:8px;align-content:center}
.optc .lbl{font-size:.78rem;font-weight:800;text-align:center;line-height:1.3}
.optc .tick{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--secondary);display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.optc .tick::after{content:"";width:5px;height:9px;border:solid #04222b;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.optc input:checked+.oc .tick{display:flex}

/* demos */
.gtxt.big{font-size:1.6rem;line-height:1.2}
.gtxt.plain{background:none;-webkit-text-fill-color:currentColor;color:var(--muted)}
.fxd{--g:var(--cg,linear-gradient(90deg,#f6d365,#f43f5e,#8b5cf6,#f6d365));--g1:var(--cg1,#f43f5e);background-size:200% 100%}
.fxd.fx-shimmer{animation:shim 2.6s linear infinite}
.fxd.fx-glow{animation:glowp 2.2s ease-in-out infinite}
.fxd.fx-both{animation:shim 2.6s linear infinite,glowp 2.2s ease-in-out infinite}
.optc .avatar.mini-av{width:42px;height:42px;margin:0;font-size:16px;border-width:3px;box-shadow:none}
.th-sw{position:absolute;inset:0;background:linear-gradient(135deg,var(--t1),var(--t2) 58%,var(--t3))}
.th-sw::before{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:20px;border-radius:7px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4)}
.minilinks{display:grid;gap:5px;width:100%;pointer-events:none}
.minilinks .social{padding:5px 7px;gap:7px;transition:none}
.minilinks .icon{width:16px;height:16px;flex:0 0 16px;border-radius:5px;box-shadow:none}
.minilinks .bar{display:block;height:5px;width:58%;border-radius:3px;background:currentColor;opacity:.5}
.minilinks .bar.s{width:38%}
.lw{display:grid;gap:4px;width:68%}
.lw i{display:block;background:rgba(255,255,255,.6);border-radius:4px}
.lw-list{grid-template-columns:1fr}.lw-list i{height:9px}.lw-list i:nth-child(4){display:none}
.lw-grid{grid-template-columns:1fr 1fr}.lw-grid i{height:16px}
.lw-tiles{grid-template-columns:repeat(4,1fr)}.lw-tiles i{height:auto;aspect-ratio:1}
.lw-compact{grid-template-columns:1fr;gap:3px}.lw-compact i{height:6px}
.pe{font-size:1.7rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));transition:transform .2s}
.optc:hover .pe{transform:scale(1.18) rotate(-6deg)}

/* live preview */
.cz-pv{display:grid;gap:10px}
.cz-pvhead{display:flex;justify-content:space-between;align-items:center;font-size:.84rem}
.cz-pvhead a{font-size:.76rem;font-weight:800;color:var(--secondary);text-decoration:none}
.cz-hint{font-size:.74rem;text-align:center}
.pv{position:relative;isolation:isolate;overflow:hidden;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:radial-gradient(circle at 20% 15%,color-mix(in srgb,var(--b1,#8b5cf6) 30%,transparent),transparent 42%),radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--b2,#22d3ee) 26%,transparent),transparent 44%),var(--bg)}
.pv canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.pv .card{position:relative;z-index:1;opacity:1;transform:none;animation:none;box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}
.pv .cover{height:84px}
.pv .socials{pointer-events:none}
.pv .info .name{font-size:1.35rem}

/* sticky action bar */
.cz-bar{position:sticky;bottom:12px;z-index:8;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding:10px 12px;border-radius:16px;background:rgba(14,15,34,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.cz-state{flex:1 1 auto;display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:800;color:var(--muted)}
.cz-state::before{content:"";width:8px;height:8px;border-radius:50%;background:#4ade80}
.cz-state.dirty{color:#fde68a}
.cz-state.dirty::before{background:#f59e0b;animation:czpulse 1.4s ease-in-out infinite}
@keyframes czpulse{50%{opacity:.3}}
.cz-bar .btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.6)}
#czSave{margin-inline-start:auto}
@media(max-width:560px){
  .czgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cz-bar{gap:6px;padding:8px;bottom:8px}
  .cz-bar .btn.sm{flex:1 1 auto;padding:0 8px;font-size:.78rem}
  .cz-state{flex:0 0 auto;font-size:0;padding-inline:4px}
  .cz-state::before{width:11px;height:11px}
  #czSave{flex:1 1 auto;margin-inline-start:0;min-width:0;padding:0 10px}
  .cz-bar:has(#czDisc:not([hidden])) #czReset{display:none}
}
@media(prefers-reduced-motion:reduce){.fxd,.cz-state.dirty::before{animation:none}.optc .oc,.pe{transition:none}}

/* ═════════ Card-to-card payment ═════════ */
.cpay{width:min(480px,100%);margin:0 auto;padding:12px 0 40px;font-family:"Vazirmatn",Tahoma,sans-serif}
.cpay .card.pad{padding:26px 20px;text-align:center}
.cpay .alert{text-align:center;line-height:1.9}
.cpay-title{font-size:1.15rem;font-weight:900;margin-bottom:14px}
.cpay-plan{font-size:.98rem;font-weight:800;line-height:1.8;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.cpay-label{margin-top:16px;color:var(--muted);font-size:.86rem;font-weight:700}
.cpay-amount{margin:2px 0 18px;font-size:1.05rem;font-weight:800}
.cpay-amount b{font-size:1.9rem;font-weight:900;background:linear-gradient(135deg,#fcd34d,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.cpay-amount span{color:var(--muted);font-size:.95rem}
.ccard{position:relative;margin:0 auto;width:min(380px,100%);aspect-ratio:1.586/1;border-radius:22px;padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,#6d28d9 0%,#2563eb 55%,#06b6d4 100%);box-shadow:0 24px 60px rgba(76,29,149,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.ccard::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12);top:-120px;inset-inline-end:-80px}
.ccard::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);bottom:-110px;inset-inline-start:-60px}
.ccard .chip{position:relative;z-index:1;width:46px;height:34px;align-self:flex-start}
.ccard .cnum{position:relative;z-index:1;white-space:nowrap;font-family:"Courier New",monospace;font-size:clamp(.95rem,4.6vw,1.5rem);font-weight:800;letter-spacing:.08em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);direction:ltr;unicode-bidi:plaintext}
.ccard .chold{position:relative;z-index:1;font-size:1rem;font-weight:800;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.cpay-copy{margin-top:12px}
.cpay-note{margin:16px 0 14px;padding:12px 14px;border-radius:14px;border:1px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.05);font-size:.86rem;line-height:1.95;color:var(--muted)}
.cpay-wide{width:100%}
.cpay-form{display:grid;gap:12px;margin-top:14px;text-align:right}
.cpay-form[hidden]{display:none}
.cpay-form input[type=file]{padding:10px}
.cpay-cancel{margin-top:14px}
.cpay-state{margin:6px 0 16px}
/* purchase dialog (dashboard) */
.paychoose{display:grid;gap:10px}
.paymeth{display:grid;gap:3px;text-align:start;font:inherit;color:var(--text);cursor:pointer;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);transition:.2s}
.paymeth:hover{background:rgba(255,255,255,.12);border-color:rgba(139,92,246,.7);transform:translateY(-2px)}
.paymeth b{font-size:.98rem}.paymeth small{color:var(--muted);font-size:.78rem}
#pdPlan{display:block;margin-top:2px}
.pdh{font-size:1.02rem;font-weight:900;margin-bottom:10px}
.paywarn{padding:14px;border-radius:14px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.5);font-size:.9rem;line-height:2;font-weight:600}
.pdbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pdbtns .btn{flex:1 1 150px}

/* Persian notice in the purchase dialog: right-aligned */
#pdStep2,#pdStep2 .pdh,#pdStep2 .paywarn{text-align:right;direction:rtl}

/* flash messages keep their bottom gap in every color (warn had margin-bottom:0) */
.alert.flash.warn,.alert.flash.ok,.alert.flash.err{margin:0 0 18px}

/* plan line: every part is its own isolated chunk so Persian digits/words never get split by English text */
.cpay-plan span,.cpay-plan bdi{display:inline-block;unicode-bidi:isolate}
.cpay-plan i{font-style:normal;margin:0 8px;opacity:.6}

/* ───── Pro tab v2: status hero (days-left ring / infinity), perks, plan cards ───── */
.prohero{--ga:#fcd34d;--gb:#f472b6;display:flex;align-items:center;gap:28px;padding:26px;position:relative;overflow:hidden;background:radial-gradient(120% 150% at 0% 0%,color-mix(in srgb,var(--ga) 20%,transparent),transparent 62%),var(--card)}
.prohero.st-soon{--ga:#f59e0b;--gb:#ef4444}
.prohero.st-free{--ga:#8b5cf6;--gb:#22d3ee}
.prohero.st-ended{--ga:#94a3b8;--gb:#64748b}
.prohero.st-forever{--ga:#22d3ee;--gb:#8b5cf6}
.pr-gauge{position:relative;flex:none;width:clamp(128px,28vw,164px);aspect-ratio:1}
.pr-gauge svg{width:100%;height:100%;display:block}
.pr-gauge .trk{fill:none;stroke:rgba(255,255,255,.1);stroke-width:9}
.pr-gauge .trk.dash{stroke:rgba(255,255,255,.22);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.pr-gauge .arc{fill:none;stroke:url(#prgrad);stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--off);transform:rotate(-90deg);transform-origin:60px 60px;animation:prfill 1.2s cubic-bezier(.22,1,.36,1) both}
@keyframes prfill{from{stroke-dashoffset:var(--c)}}
.pr-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.pr-num b{font-size:clamp(2.2rem,7vw,3rem);font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pr-num.sm b{font-size:1.7rem}
.pr-num span{margin-top:7px;font-size:.78rem;color:var(--muted)}
.pr-inf{flex:none;width:clamp(150px,34vw,210px)}
.pr-inf svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--gb) 55%,transparent))}
.pr-inf path{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.pr-inf .trk{stroke:rgba(255,255,255,.12)}
.pr-inf .base{stroke:url(#prigrad);opacity:.6}
.pr-inf .run{stroke:#fff;stroke-dasharray:14 86;animation:prrun 3.4s linear infinite}
@keyframes prrun{to{stroke-dashoffset:-100}}
.prohero .pr-txt{flex:1;min-width:0}
.prohero .pr-txt h2{font-size:1.45rem;line-height:1.25;margin:0 0 6px}
.prohero .pr-txt p{color:var(--muted);font-size:.9rem;line-height:1.75;max-width:46ch}
.pr-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media(max-width:560px){.prohero{flex-direction:column;text-align:center;padding:22px 16px;gap:18px}.prohero .pr-txt h2{justify-content:center}.prohero .pr-txt p{margin-inline:auto}.pr-cta{justify-content:center}}
.pr-have{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.pr-have li{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.pr-have b{display:block;font-size:1.05rem;font-weight:900;margin-bottom:2px}
.pr-have span{font-size:.78rem;color:var(--muted);line-height:1.6}
.pr-cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
.pr-cmp th,.pr-cmp td{padding:11px 12px;text-align:start;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.pr-cmp thead th{font-size:.8rem;color:var(--muted);font-weight:700}
.pr-cmp tbody th{font-weight:700}
.pr-cmp .no{color:var(--muted);font-weight:500}
.pr-cmp .pro{font-weight:800;background:linear-gradient(180deg,rgba(245,158,11,.13),rgba(244,114,182,.08))}
.pr-cmp thead .pro{border-radius:12px 12px 0 0;color:#fde68a}
.pr-cmp tbody tr:last-child th,.pr-cmp tbody tr:last-child td{border-bottom:0}
.pr-cmp tbody tr:last-child .pro{border-radius:0 0 12px 12px}
.pr-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.pr-plans .plan{align-items:stretch;text-align:start;gap:4px;padding:20px 16px 16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.pr-plans .plan.best{border-color:rgba(252,211,77,.7);background:linear-gradient(160deg,rgba(252,211,77,.13),rgba(244,114,182,.08));box-shadow:0 0 0 1px rgba(252,211,77,.22),0 18px 50px rgba(245,158,11,.12)}
.pr-flag{position:absolute;top:-10px;inset-inline-start:14px;font-size:.68rem;font-weight:900;padding:3px 10px;border-radius:99px;background:#fcd34d;color:#2a1a05}
.pr-name{font-size:.88rem;font-weight:800;color:var(--muted)}
.pr-dur{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.pr-dur b{font-size:2.4rem;font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pr-dur span{font-size:.9rem;color:var(--muted);font-weight:700}
.pr-day{font-size:.76rem;color:var(--muted);min-height:1.3em}
.pr-price{margin-top:8px;font-weight:900;font-size:1.02rem;line-height:1.45}
.pr-price s{display:block;font-size:.76rem;color:var(--muted);font-weight:600}
.pr-plans .plan .btn{margin-top:12px;width:100%}
.pr-note{font-size:.76rem;line-height:1.8;color:var(--muted);margin-top:14px}
.pr-chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-inline-end:6px;border-radius:99px;font-size:.68rem;font-weight:800;border:1px solid transparent;vertical-align:middle}
.pr-chip.wait{color:#fcd34d;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4)}
.pr-chip.bad{color:#fca5a5;background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4)}
.pr-cmp th{text-transform:none;letter-spacing:0}
.pr-cmp tbody th{font-size:.88rem;color:var(--text)}
.pr-cmp thead th{font-size:.8rem}
.pr-price{margin-bottom:4px}
.pr-plans .plan .btn{margin-top:auto}
.pr-plans .plan .pr-price+.btn{margin-top:auto}

/* ───── SEO tab ───── */
.seoform{gap:16px}
.seo-sw{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.seo-sw input{position:absolute;opacity:0;width:1px;height:1px}
.seo-trk{position:relative;flex:none;width:46px;height:26px;border-radius:99px;background:rgba(255,255,255,.18);transition:background .2s}
.seo-trk::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s}
.seo-sw input:checked+.seo-trk{background:linear-gradient(135deg,#8b5cf6,#22d3ee)}
.seo-sw input:checked+.seo-trk::after{transform:translateX(20px)}
[dir=rtl] .seo-sw input:checked+.seo-trk::after{transform:translateX(-20px)}
.seo-sw input:focus-visible+.seo-trk{outline:2px solid #22d3ee;outline-offset:3px}
.seo-swt{display:grid;gap:2px;min-width:0}
.seo-swt b{font-size:.95rem}
.seo-swt small{font-size:.78rem;color:var(--muted);line-height:1.5}
.serp-wrap{display:grid;gap:8px}
.serp{background:#fff;color:#202124;border-radius:16px;padding:16px 18px;font-family:Arial,Helvetica,sans-serif;direction:ltr;text-align:left;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.serp-site{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.serp-fav{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#fff;font-weight:800;font-size:.8rem}
.serp-id{display:grid;line-height:1.3;min-width:0}
.serp-id b{font-size:.85rem;font-weight:400;color:#202124}
.serp-id small{font-size:.75rem;color:#4d5156;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.serp-t{font-size:1.15rem;line-height:1.35;color:#1a0dab;overflow-wrap:anywhere}
.serp-d{margin-top:4px;font-size:.86rem;line-height:1.58;color:#4d5156;overflow-wrap:anywhere}
.seo-note{font-size:.76rem;line-height:1.8;color:var(--muted)}
.seo-fields{display:grid;gap:14px;transition:opacity .2s}
.seo-fields.off{opacity:.55}
.seo-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.seo-lbl em{font-style:normal;font-size:.74rem;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.seo-lbl em.full{color:#fcd34d}
.seo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.seo-chips:empty{display:none}
.seo-chip{padding:4px 11px;border-radius:99px;font-size:.78rem;font-weight:700;background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.45)}

/* ───────── Dashboard · Profile studio ───────── */
.pf{display:grid;gap:18px}
.pf-studio{position:relative;border-radius:28px;background:var(--card);border:1px solid var(--card-border);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12);animation:pfIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pfIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pf-glow{position:absolute;inset:-30% -20% auto;height:70%;pointer-events:none;z-index:0;filter:blur(40px);opacity:.55;background:radial-gradient(40% 60% at 25% 40%,color-mix(in srgb,var(--b1,#8b5cf6) 60%,transparent),transparent 70%),radial-gradient(40% 60% at 75% 50%,color-mix(in srgb,var(--b2,#22d3ee) 50%,transparent),transparent 70%);animation:pfDrift 12s ease-in-out infinite alternate}
@keyframes pfDrift{to{transform:translateX(6%) scale(1.08)}}
.pf-studio>*{position:relative;z-index:1}
.pf-studio>.pf-glow{position:absolute;z-index:0}
.pf-cover{display:block;height:170px;cursor:pointer;overflow:hidden}
.pf-cover::after{z-index:1;pointer-events:none}
.pf-hint{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:.86rem;color:#fff;background:rgba(7,8,19,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .22s}
.pf-hint .ni,.pf-chip .ni{width:18px;height:18px;fill:currentColor;flex:none}
.pf-cover:hover .pf-hint,.pf-cover.drop .pf-hint{opacity:1}
.pf-cover.drop,.pf-avatar.drop{outline:2px dashed #22d3ee;outline-offset:-6px}
.pf-cover-tools{position:absolute;top:12px;right:12px;z-index:4}
.pf-chip{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;cursor:pointer;font-size:.76rem;font-weight:800;color:#fff;background:rgba(10,10,25,.62);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s;user-select:none}
.pf-chip[hidden]{display:none}
.pf-chip input{position:absolute;opacity:0;width:1px;height:1px}
.pf-chip:hover{background:rgba(244,63,94,.35);border-color:rgba(244,63,94,.7)}
.pf-chip:has(input:checked){background:rgba(244,63,94,.55);border-color:#fb7185}
.pf-chip:has(input:checked) span::after{content:" ✓"}
.pf-chip:has(input:focus-visible){outline:2px solid #22d3ee;outline-offset:2px}
.pf-avwrap{position:relative;z-index:3;width:max-content;margin:0 auto}
.pf-avatar{cursor:pointer;margin:-48px auto 10px;transition:transform .25s}
.pf-avatar::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(7,8,19,.5);opacity:0;transition:opacity .2s}
.pf-avatar:hover::before,.pf-avatar.drop::before{opacity:1}
.pf-avatar:hover{transform:scale(1.04)}
.pf-ini[hidden]{display:none}
.pf-cam{position:absolute;right:-4px;bottom:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--secondary));border:3px solid #0b0c1f;box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform .25s}
.pf-cam .ni{width:15px;height:15px;fill:#fff}
.pf-avatar:hover .pf-cam{transform:scale(1.14) rotate(-8deg)}
.pf-rm-av{position:absolute;left:calc(100% + 10px);top:54px;white-space:nowrap}
.pf-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pf-info{padding-top:2px}
.pf-info .name{margin:0;transition:opacity .2s}
.pf-info .nbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
.pf-info .nb{cursor:default}
.pf-info .nb::after{display:none}
.pf-collapse{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1),opacity .25s}
.pf-collapse.open{grid-template-rows:1fr;opacity:1}
.pf-collapse>div{overflow:hidden;min-height:0}
.pf-collapse.open.vis>div{overflow:visible}
.pf-note{display:none;margin:8px auto 0;width:max-content;max-width:100%;padding:4px 12px;border-radius:99px;font-size:.72rem;font-weight:800;color:#fde68a;background:rgba(245,158,11,.12);border:1px dashed rgba(245,158,11,.55)}
.pf-note.on{display:block}
.pf-sec h2 .ni{width:20px;height:20px;fill:currentColor;opacity:.85}
.pf-sec .row2{margin-top:6px}
.pf textarea{resize:vertical;min-height:84px;line-height:1.7}
.pf-vis{display:grid;gap:10px}
.pf-sw{align-items:flex-start;transition:.2s}
.pf-sw .seo-trk{margin-top:2px}
.pf-sw:hover{border-color:rgba(139,92,246,.5)}
.pf-sw:has(input:checked){background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.42)}
.pf-mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pf-save{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px 12px 18px;border-radius:20px;background:rgba(12,13,32,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.45);transition:border-color .25s,box-shadow .25s}
.pf-save.dirty{border-color:rgba(245,158,11,.55);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 4px rgba(245,158,11,.08)}
.pf-state{display:inline-flex;align-items:center;gap:10px;font-size:.84rem;font-weight:700;color:var(--muted)}
.pf-state i{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18);transition:.25s}
.pf-save.dirty .pf-state{color:#fde68a}
.pf-save.dirty .pf-state i{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.22);animation:pfPulse 1.4s ease-in-out infinite}
@keyframes pfPulse{50%{box-shadow:0 0 0 8px rgba(245,158,11,0)}}
.pf-actions{display:flex;align-items:center;gap:8px}
.pf-save .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.pf-save .btn.busy{pointer-events:none;opacity:.7}
@media(hover:none){.pf-hint{opacity:1;align-items:flex-end;justify-content:flex-start;padding:12px;background:linear-gradient(to top,rgba(7,8,19,.55),transparent 55%);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:.78rem}}
@media(max-width:560px){.pf-cover{height:140px}.pf-actions{width:100%}.pf-actions .btn{flex:1}.pf-state{width:100%}.pf-rm-av{top:50px}}

/* ───────── Verified tick: bare icon right after the name, name stays centred ───────── */
.name.has-vk::before{content:"";display:inline-block;width:21px}
.name.has-vk.vk-off::before{display:none}
.vk{position:relative;display:inline-block;width:18px;height:18px;margin-left:3px;vertical-align:-3px;color:var(--b);outline:none;cursor:help;-webkit-text-fill-color:currentColor;letter-spacing:0}
.vk svg,.vk img{display:block;width:18px;height:18px;fill:currentColor;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--b) 55%,transparent))}
.vk .emo{font-size:16px;line-height:18px}
.vk::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);background:rgba(10,10,25,.96);color:#fff;-webkit-text-fill-color:#fff;border:1px solid color-mix(in srgb,var(--b) 60%,transparent);font-size:.72rem;font-weight:800;line-height:1.4;padding:4px 10px;border-radius:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:.18s;z-index:6}
.vk:hover::after,.vk:focus::after{opacity:1;transform:translate(-50%,0)}
.vk-off .vk{display:none}
.pf-info .vk,.cz-pv .vk,.demo .vk{cursor:default}
.pf-info .vk::after,.cz-pv .vk::after,.demo .vk::after{display:none}
.demo .name.has-vk::before{width:19px}
.demo .vk,.demo .vk svg{width:16px;height:16px}
.demo .vk{margin-left:3px;vertical-align:-2px}

/* SEO preview: the site logo as the favicon (dark disc so the light logo is visible) */
.serp-fav{background:#0b0c1f;border:1px solid #dadce0;box-shadow:none}
.serp-fav img{display:block;width:16px;height:16px;object-fit:contain}

/* ───────── Page style: how the header (avatar · name · title · badges) is arranged ─────────
   Picked in Dashboard → Customize → Style. Adds a class "st-<key>" to the .card (and "stl" for the grid based ones). */

/* shared grid layout used by: side · banner · compact · idcard */
.card.stl{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:104px 1fr auto auto auto 1fr auto auto}
.card.stl>.info{display:contents;text-align:left}
.card.stl>.cover{grid-column:1/-1;grid-row:1;height:auto;min-height:0}
.card.stl>.avatar{grid-column:1;grid-row:2/7;align-self:start;margin:-40px 0 14px 18px;width:88px;height:88px;font-size:32px}
.card.stl .info .name{grid-column:2;grid-row:3;font-size:1.45rem;text-align:left;padding:12px 18px 0 14px;position:relative;z-index:1}
.card.stl .info .role{grid-column:2;grid-row:4;justify-self:start;margin:3px 18px 0 14px;padding:0;border:0;background:none;border-radius:0;font-size:.82rem;letter-spacing:.02em;color:color-mix(in srgb,var(--b2,#22d3ee) 55%,#fff);position:relative;z-index:1}
.card.stl .info>.nbs{grid-column:2;grid-row:5;justify-content:flex-start;margin:9px 18px 0 14px;position:relative;z-index:1}
.card.stl .info .custom-text{grid-column:1/-1;grid-row:7;margin:6px 20px 0;text-align:left}
.card.stl>.socials{grid-column:1/-1;grid-row:8;padding-top:16px}
.card.stl .name.has-vk::before,.card.st-editorial .name.has-vk::before{display:none}
.card.stl .name .vk{margin-left:5px}


/* banner: avatar and name sit on the cover itself */
.card.st-banner{grid-template-rows:minmax(64px,auto) 1fr auto auto auto 14px auto auto}
.card.st-banner>.cover{grid-row:1/7}
.card.st-banner>.avatar{align-self:end;margin:0 0 14px 18px;width:84px;height:84px;position:relative;z-index:2}
.card.st-banner .info .name{padding:0 18px 0 14px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.card.st-banner .info .role{color:#fff;opacity:.88;filter:drop-shadow(0 1px 6px rgba(0,0,0,.6))}
.card.st-banner .info>.nbs{margin-top:8px}
.card.st-banner .info .custom-text{margin-top:14px}

/* compact: no cover, small avatar, a soft colour glow */
.card.st-compact{padding-top:20px;grid-template-rows:0 1fr auto auto auto 1fr auto auto;background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--b1,#8b5cf6) 30%,transparent),transparent 62%),radial-gradient(90% 80% at 100% 0%,color-mix(in srgb,var(--b2,#22d3ee) 18%,transparent),transparent 60%),var(--card)}
.card.st-compact>.cover{display:none}
.card.st-compact>.avatar{margin:0 0 4px 18px;width:72px;height:72px;font-size:26px}
.card.st-compact .info .name{font-size:1.3rem;padding-top:0}
.card.st-compact .info .custom-text{margin-top:16px}

/* ID card: thin gradient strip with a lanyard slot, square photo, mono title */
.card.st-idcard{border-radius:20px;grid-template-rows:24px 18px auto auto auto 1fr auto auto}
.card.st-idcard>.cover{background:linear-gradient(90deg,var(--b1,#8b5cf6),var(--b2,#22d3ee),var(--b3,#f43f5e))}
.card.st-idcard>.cover::after{inset:auto;left:50%;top:50%;width:46px;height:8px;border-radius:99px;transform:translate(-50%,-50%);background:rgba(7,8,19,.55);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.card.st-idcard>.avatar{grid-row:2/7;margin:18px 0 14px 18px;border-radius:22px;width:92px;height:92px;border-width:3px}
.card.st-idcard .info .name{padding-top:18px;font-size:1.35rem}
.card.st-idcard .info .role{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:700}
.card.st-idcard .info>.nbs{margin-top:8px}
.card.st-idcard .info .custom-text{border-top:1px dashed rgba(255,255,255,.22);margin-top:14px}
.card.st-idcard>.socials{padding-top:14px}

/* editorial: left aligned, big name, squircle photo, a short accent line before the title */
.card.st-editorial>.info{padding:2px 22px 16px;text-align:left}
.card.st-editorial>.avatar{margin:-52px 0 14px 22px;border-radius:30px;width:104px;height:104px;font-size:38px}
.card.st-editorial .info .name{font-size:1.9rem;line-height:1.2;letter-spacing:-.8px}
.card.st-editorial .info .role{margin-top:10px;padding:0;border:0;background:none;border-radius:0;font-size:.85rem;color:color-mix(in srgb,var(--b2,#22d3ee) 55%,#fff);display:flex;align-items:center;gap:10px}
.card.st-editorial .info .role::before{content:"";width:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--b1,#8b5cf6),var(--b2,#22d3ee))}
.card.st-editorial .info>.nbs{justify-content:flex-start}
.card.st-editorial .info .custom-text{text-align:left}

/* spotlight: the cover fades into the card, big glowing avatar, title framed by two lines */
.card.st-spot>.cover{height:230px;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.card.st-spot>.cover::after{display:none}
.card.st-spot>.avatar{width:124px;height:124px;margin:-92px auto 14px;font-size:44px;box-shadow:0 0 0 4px rgba(255,255,255,.28),0 0 0 11px rgba(255,255,255,.06),0 0 54px color-mix(in srgb,var(--b1,#8b5cf6) 65%,transparent),0 18px 40px rgba(0,0,0,.4)}
.card.st-spot>.avatar:not(.ring-gradient):not(.ring-spin){border-width:0}
.card.st-spot .info .name{font-size:1.9rem;letter-spacing:-.8px}
.card.st-spot .info .role{margin-top:6px;padding:0;border:0;background:none;border-radius:0;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.card.st-spot .info .role::before,.card.st-spot .info .role::after{content:"";display:inline-block;width:22px;height:1px;background:currentColor;opacity:.5;vertical-align:middle;margin:0 10px}

/* polaroid: a tilted instant photo with a piece of tape */
.card.st-polaroid>.avatar{width:116px;height:116px;border-radius:12px;border:7px solid #fff;border-bottom-width:7px;margin:-54px auto 20px;transform:rotate(-4deg);box-shadow:0 14px 34px rgba(0,0,0,.45);font-size:40px}
.card.st-polaroid>.avatar::before{content:"";position:absolute;top:-15px;left:50%;width:58px;height:20px;margin-left:-29px;transform:rotate(3deg);background:rgba(253,230,138,.62);box-shadow:0 2px 6px rgba(0,0,0,.25);backdrop-filter:blur(2px)}
.card.st-polaroid .info .name{font-size:1.7rem}
.card.st-polaroid .info .role{padding:0;border:0;background:none;border-radius:0;font-size:.9rem;font-style:italic;font-weight:600;color:rgba(255,255,255,.72)}

/* dashboard: the small drawings inside the Style option cards */
.optc .demo.std{height:92px}
.stm{display:block;position:relative;width:86px;height:70px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);overflow:hidden}
.stm i{position:absolute;display:block}
.stm .c{left:0;right:0;top:0;height:24px;background:linear-gradient(135deg,var(--secondary),var(--primary));opacity:.8}
.stm .a{width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.22)}
.stm .n{height:5px;border-radius:3px;background:#fff}
.stm .r{height:4px;border-radius:3px;background:rgba(255,255,255,.5)}
.stm-classic .a{left:31px;top:12px}.stm-classic .n{left:25px;top:40px;width:36px}.stm-classic .r{left:30px;top:50px;width:26px;height:7px;border-radius:9px}
.stm-side .c{height:22px}.stm-side .a{left:6px;top:10px}.stm-side .n{left:34px;top:30px;width:34px}.stm-side .r{left:34px;top:40px;width:22px;height:3px}
.stm-banner .c{height:48px}.stm-banner .a{left:6px;top:22px}.stm-banner .n{left:34px;top:26px;width:30px}.stm-banner .r{left:34px;top:35px;width:20px;height:3px;background:rgba(255,255,255,.8)}
.stm-editorial .c{height:22px}.stm-editorial .a{left:8px;top:10px;width:24px;height:24px;border-radius:8px}.stm-editorial .n{left:8px;top:40px;width:46px;height:6px}.stm-editorial .r{left:20px;top:52px;width:24px;height:3px}.stm-editorial .r::before{content:"";position:absolute;left:-12px;top:0;width:9px;height:3px;border-radius:2px;background:var(--secondary)}
.stm-compact{background:radial-gradient(90% 90% at 0 0,rgba(139,92,246,.45),transparent 70%),rgba(255,255,255,.07)}.stm-compact .c{display:none}.stm-compact .a{left:8px;top:14px;width:24px;height:24px}.stm-compact .n{left:38px;top:18px;width:32px}.stm-compact .r{left:38px;top:28px;width:20px;height:3px}.stm-compact::after{content:"";position:absolute;left:8px;right:8px;top:50px;height:6px;border-radius:3px;background:rgba(255,255,255,.14);box-shadow:0 9px 0 rgba(255,255,255,.1)}
.stm-idcard .c{height:9px;opacity:1}.stm-idcard .a{left:7px;top:17px;border-radius:8px;width:24px;height:24px}.stm-idcard .n{left:37px;top:19px;width:32px}.stm-idcard .r{left:37px;top:29px;width:24px;height:3px;background:var(--secondary);opacity:.8}.stm-idcard::after{content:"";position:absolute;left:7px;right:7px;top:51px;border-top:1px dashed rgba(255,255,255,.4)}
.stm-spot .c{height:42px;opacity:.75;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}.stm-spot .a{left:29px;top:15px;width:28px;height:28px;box-shadow:0 0 14px rgba(139,92,246,.9)}.stm-spot .n{left:23px;top:48px;width:40px;height:6px}.stm-spot .r{left:30px;top:58px;width:26px;height:3px}
.stm-polaroid .c{height:20px}.stm-polaroid .a{left:30px;top:9px;width:26px;height:26px;border-radius:3px;border-width:3px;transform:rotate(-5deg)}.stm-polaroid .n{left:25px;top:44px;width:36px}.stm-polaroid .r{left:30px;top:54px;width:26px;height:3px}

/* Side by side: badges move onto the cover (bottom right), away from the bio divider */
.card.stl.st-side .info>.nbs{grid-row:1;align-self:end;margin:0 12px 10px;padding:4px 6px;border-radius:99px;background:rgba(7,8,19,.5);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card.stl.st-side .info>.nbs{grid-column:2;justify-self:end}
.card.stl.st-side .info .custom-text{margin-top:14px}

/* Side / Mirror badge capsule: uses the full cover width, smaller badges, stays on one line when it can */
.card.stl.st-side .info>.nbs{grid-column:1/-1;max-width:calc(100% - 124px);gap:5px;padding:4px 7px;border-radius:18px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
.card.stl.st-side .info>.nbs{justify-self:end}
.card.stl.st-side .info>.nbs .nb{width:28px;height:28px}
.card.stl.st-side .info>.nbs .nb svg,.card.stl.st-side .info>.nbs .nb img{width:16px;height:16px}
.card.stl.st-side .info>.nbs .nb .emo{font-size:14px}

/* Banner: the cover fades out at the bottom instead of ending in a hard edge, and no divider line above the bio */
.card.st-banner>.cover{-webkit-mask-image:linear-gradient(#000 45%,rgba(0,0,0,.35) 78%,transparent);mask-image:linear-gradient(#000 45%,rgba(0,0,0,.35) 78%,transparent)}
.card.st-banner .info .custom-text{border-top:0;padding-top:0;margin-top:12px}

/* Cover fades into the card (Classic, Side by side, Mirror, Editorial, Polaroid) instead of ending in a hard edge */
.stage>.card:not(.stl):not(.st-editorial):not(.st-spot):not(.st-polaroid):not(.st-float):not(.demo)>.cover,
.pv>.card:not(.stl):not(.st-editorial):not(.st-spot):not(.st-polaroid):not(.st-float)>.cover,
.card.st-side>.cover,.card.st-editorial>.cover,.card.st-polaroid>.cover{-webkit-mask-image:linear-gradient(#000 50%,rgba(0,0,0,.3) 80%,transparent);mask-image:linear-gradient(#000 50%,rgba(0,0,0,.3) 80%,transparent)}

/* Floating card: a glass panel slides up over the cover, the avatar sits half on the cover and half in the panel */
.card.st-float>.cover{height:136px}
.card.st-float>.avatar{width:92px;height:92px;margin:-46px auto 0;font-size:34px;z-index:2}
.card.st-float>.info{position:relative;z-index:1;margin:-64px 14px 0;padding:76px 16px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.16)}
.card.st-float>.info .custom-text{margin-top:14px}
.card.st-float>.socials{padding-top:16px}
.stm-float .c{height:30px}.stm-float .a{left:32px;top:14px;width:22px;height:22px;z-index:2}.stm-float .n{left:25px;top:43px;width:36px}.stm-float .r{left:30px;top:53px;width:26px;height:7px;border-radius:9px}
.stm-float::after{content:"";position:absolute;left:7px;right:7px;top:22px;bottom:5px;border-radius:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28)}

/* Floating card: same cover fade as the other styles */
.card.st-float>.cover{-webkit-mask-image:linear-gradient(#000 50%,rgba(0,0,0,.3) 80%,transparent);mask-image:linear-gradient(#000 50%,rgba(0,0,0,.3) 80%,transparent)}