/**
 * Tokify
 * @author David Medel
 * @Copyright 2026 Medel Platforms (medel.es)
 *
 * Design system — Apple-inspired, futuristic. Depth via glass + glow, fluid
 * type, micro-interactions. Themed with CSS variables (light/dark).
**/

:root {
  --brand: #0066ff;
  --brand-2: #7aa8ff;
  --accent: #8a5cff;
  --glow: color-mix(in srgb, var(--brand) 45%, transparent);

  --bg: #05070d;
  --bg-soft: #0b0f1a;
  --text: #f4f7fe;
  --muted: #9aa4bd;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --shadow: 0 30px 70px -28px rgba(0,0,0,.7);
  --ring: color-mix(in srgb, var(--brand) 50%, transparent);

  --nav-h: 68px;
  --r-xl: 26px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --ease: cubic-bezier(.22,.7,.16,1);
}

[data-theme="light"]{
  --bg:#eceff6; --bg-soft:#ffffff; --text:#070a12; --muted:#586079;
  --surface:rgba(255,255,255,.7); --surface-2:#ffffff;
  --border:rgba(10,18,40,.08); --border-strong:rgba(10,18,40,.14);
  --shadow:0 30px 60px -30px rgba(30,55,110,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--text); line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.012em;
  background:
    radial-gradient(1000px 600px at 85% -10%, color-mix(in srgb,var(--brand) 26%,transparent), transparent 60%),
    radial-gradient(760px 520px at -5% 5%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 58%),
    radial-gradient(600px 600px at 50% 120%, color-mix(in srgb,var(--brand-2) 14%,transparent), transparent 60%),
    var(--bg);
}

h1,h2,h3{letter-spacing:-.028em; font-weight:700; margin:.2em 0}
h1{font-size:clamp(1.9rem,3.2vw,2.5rem)}
a{color:var(--brand); text-decoration:none; transition:opacity .2s var(--ease)}
a:hover{opacity:.82}
code{background:var(--surface-2); padding:2px 7px; border-radius:6px; font-size:.86em}
.container{max-width:1160px; margin:0 auto; padding:0 24px}
.muted{color:var(--muted)}

/* ============ Top navigation ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--bg-soft) 62%,transparent);
  backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{position:relative; display:flex; align-items:center; gap:22px; height:66px; max-width:1360px; margin:0 auto; padding:0 24px}
.spacer{flex:1}
.brand{display:inline-flex; align-items:center; gap:11px; font-weight:800; font-size:1.16rem; letter-spacing:-.03em; color:var(--text)}
.brand:hover{opacity:1}
.logo-mark{
  width:30px; height:30px; border-radius:9px; position:relative; flex:none;
  background:conic-gradient(from 210deg, var(--accent), var(--brand), var(--brand-2), var(--accent));
  box-shadow:0 6px 18px -4px var(--glow), inset 0 0 0 1px rgba(255,255,255,.25);
}
.logo-mark::after{content:""; position:absolute; inset:7px; border-radius:5px; background:var(--bg-soft); opacity:.55}
.brand b{color:var(--brand)}

/* nav links with animated underline */
.nav-links{display:flex; align-items:center; gap:2px}
.nav-links a{
  color:var(--muted); font-weight:500; padding:8px 10px; border-radius:9px; position:relative; white-space:nowrap;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{color:var(--text); background:var(--surface)}

/* control capsule (lang, theme) */
.navctl{
  display:inline-flex; align-items:center; gap:6px; padding:5px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  backdrop-filter:blur(8px);
}
.navctl select{
  border:0; background:transparent; color:var(--text); font:inherit; font-weight:600;
  padding:6px 8px; border-radius:999px; cursor:pointer;
}
.navctl select:focus{outline:none; box-shadow:none}

/* Public topbar: logo left, links centered, controls + CTA right. */
.topbar-menu{display:flex; align-items:center; gap:12px; flex:1; justify-content:flex-end; min-width:0}
/* Center the nav in normal flow so it never overlaps the right-side controls. */
.topbar-menu > .nav-center{margin:0 auto; flex-shrink:1; min-width:0}
.nav-links a{display:inline-flex; align-items:center; gap:7px}
.nav-links a .material-icons{font-size:1.2rem; color:var(--brand)}
.topbar-ctl{display:flex; align-items:center; gap:8px}
.topbar-ctl .ctl-btn{width:40px; height:40px; background:var(--surface); border:1px solid var(--border)}
.topbar-ctl .ctl-btn:hover{border-color:var(--brand); color:var(--brand)}
.topbar-burger{display:none; margin-left:auto; width:42px; height:42px; border-radius:12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:1.1rem; place-items:center; transition:.18s var(--ease)}
.topbar-burger:hover{border-color:var(--brand); color:var(--brand)}
.tb-login{color:var(--muted); font-weight:600; padding:8px 10px; border-radius:9px; transition:color .18s var(--ease)}
.tb-login:hover{color:var(--text)}
/* animated underline on nav links */
.nav-links a::after{content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; border-radius:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
/* register CTA gets a subtle glow */
.topbar-menu > .btn.sm{box-shadow:0 6px 20px -6px var(--glow)}
@media(max-width:1024px){
  .topbar-inner{gap:10px; padding:0 16px}
  .topbar-burger{display:grid}
  .topbar-menu{position:absolute; top:calc(100% + 8px); left:14px; right:14px; margin-left:0; flex:0; display:none;
    flex-direction:column; align-items:stretch; gap:14px; padding:16px;
    border-radius:16px; background:var(--bg-soft); border:1px solid var(--border-strong); box-shadow:var(--shadow)}
  [data-theme="dark"] .topbar-menu{background:#0e1422}
  .topbar-menu.open{display:flex; animation:tkpop .16s var(--ease)}
  .topbar-menu > .nav-center{position:static; transform:none; width:100%}
  .topbar-menu .nav-links{flex-direction:column; align-items:stretch; gap:8px; width:100%}
  /* Mobile nav rows: card-like, icon chip, chevron affordance, clear tap target. */
  .topbar-menu .nav-links a{display:flex; align-items:center; gap:14px; padding:14px 16px;
    border-radius:14px; background:var(--surface); border:1px solid var(--border);
    font-weight:600; color:var(--text); transition:background .16s,border-color .16s,transform .12s}
  .topbar-menu .nav-links a:hover,.topbar-menu .nav-links a:active{background:color-mix(in srgb,var(--brand) 10%,var(--surface)); border-color:color-mix(in srgb,var(--brand) 45%,var(--border)); transform:none}
  .topbar-menu .nav-links a .material-icons{font-size:1.15rem; width:38px; height:38px; display:grid; place-items:center;
    border-radius:11px; background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand); flex:none}
  .topbar-menu .nav-links a::after{display:none}
  .topbar-ctl{align-self:stretch; justify-content:center; gap:14px}
  .topbar-menu .tb-login{padding:13px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--border); text-align:center; font-weight:600}
  .topbar-menu .btn.sm{width:100%; justify-content:center; padding:13px}
}

/* ============ Public footer (futuristic) ============ */
.site-foot{position:relative; overflow:hidden; margin-top:40px; border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--bg-soft) 55%,transparent)}
.foot-glow{position:absolute; top:-160px; left:50%; transform:translateX(-50%); width:760px; height:320px; pointer-events:none;
  background:radial-gradient(ellipse at center, color-mix(in srgb,var(--brand) 22%,transparent), transparent 70%); filter:blur(50px)}
.foot-inner{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:54px 24px 30px;
  display:grid; grid-template-columns:1.4fr 2fr; gap:40px}
.foot-brand .brand{font-size:1.55rem; margin-bottom:12px}
.foot-brand .brand-logo{height:42px; max-width:210px}
.foot-brand .muted{max-width:360px; line-height:1.6; margin:0 0 18px; font-size:1.06rem}
.foot-brand .foot-cta .btn{font-size:1rem; padding:11px 20px}
.foot-brand .foot-cta .btn .material-icons{font-size:22px!important}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.foot-col h4{margin:0 0 12px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.foot-col a{display:block; color:var(--text); padding:6px 0; font-size:.92rem; transition:color .18s var(--ease)}
.foot-col a:hover{color:var(--brand)}
.foot-bottom{position:relative; z-index:1; border-top:1px solid var(--border); text-align:center;
  padding:18px 24px; color:var(--muted); font-size:.85rem}
@media(max-width:760px){
  .foot-inner{grid-template-columns:1fr; gap:30px}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:460px){ .foot-cols{grid-template-columns:1fr 1fr} }

/* ============ Buttons ============ */
.btn{
  --b1:var(--brand-2); --b2:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; font:inherit; font-weight:600;
  padding:11px 20px; border-radius:999px; color:#fff;
  background:linear-gradient(180deg,var(--b1),var(--b2));
  box-shadow:0 10px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
}
.btn:hover{transform:translateY(-1.5px); filter:brightness(1.07); box-shadow:0 18px 36px -12px var(--glow); text-decoration:none}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface); color:var(--text); border:1px solid var(--border-strong); box-shadow:none; backdrop-filter:blur(8px)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:8px 15px; font-size:.9rem}
.btn.block{width:100%}
.icon-btn{
  width:40px; height:40px; border-radius:999px; display:inline-grid; place-items:center; cursor:pointer;
  background:transparent; border:0; color:var(--text); font-size:1.05rem;
  transition:background .2s var(--ease), transform .12s var(--ease);
}
.icon-btn:hover{background:var(--surface-2); transform:translateY(-1px)}

/* ============ Cards ============ */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
  animation:rise .55s var(--ease) both;
}
.card.tight{padding:18px}
.card.glow{position:relative; overflow:hidden}
.card.glow::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--brand) 55%,transparent), transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

/* ============ Forms ============ */
label{display:block; font-size:.82rem; color:var(--muted); margin:16px 0 7px; font-weight:500}
.input,input:not([type]),
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=url],input[type=date],input[type=datetime-local],
textarea,select{
  width:100%; padding:12px 14px; border-radius:var(--r-sm); font:inherit; color:var(--text);
  border:1px solid var(--border-strong); background:var(--bg-soft);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select,[data-theme="dark"] .input{background:rgba(255,255,255,.04)}
input:focus,textarea:focus,select:focus,.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
textarea{resize:vertical}
.field-eye{position:relative}
.field-eye .eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px;
  display:grid; place-items:center; background:none; border:0; cursor:pointer; color:var(--muted); font-size:1.05rem; border-radius:8px}
.field-eye .eye .material-icons{font-size:1.2rem}
.field-eye .eye:hover{background:var(--surface-2)}
.hint{font-size:.78rem; color:var(--muted); margin-top:8px}

/* ============ Hero ============ */
.hero{padding:110px 0 70px; text-align:center; position:relative}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:.8rem; font-weight:600;
  letter-spacing:.02em; margin-bottom:22px}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 10px 1px var(--glow)}
/* Icon badge above a public page title (shared essence across pricing/voices/tools/blog/faq). */
.page-ic{display:grid; place-items:center; width:56px; height:56px; border-radius:18px; margin:0 auto 16px;
  background:color-mix(in srgb,var(--brand) 14%,transparent); border:1px solid var(--glow);
  color:var(--brand); box-shadow:0 10px 26px -12px var(--glow)}
.page-ic .material-icons{font-size:28px; line-height:1}
.hero h1{font-size:clamp(2.6rem,7vw,5rem); line-height:1.0; margin:.05em 0 .26em;
  background:linear-gradient(180deg,var(--text),color-mix(in srgb,var(--text) 55%,var(--brand)));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero p{color:var(--muted); font-size:1.22rem; max-width:640px; margin:0 auto 32px}
.hero .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

a.card{color:inherit; transition:transform .18s var(--ease), border-color .2s var(--ease), background .2s var(--ease)}
a.card:hover{transform:translateY(-4px); border-color:var(--border-strong); text-decoration:none}
.tool-ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.25rem;
  color:var(--brand);
  background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 20%,transparent), color-mix(in srgb,var(--brand) 6%,transparent));
  border:1px solid color-mix(in srgb,var(--brand) 30%,transparent); margin-bottom:14px;
  box-shadow:inset 0 0 18px -8px var(--glow)}
.tool-desc{color:var(--muted); margin:.4em 0 0; font-size:.92rem; line-height:1.5}

/* Centered single-column wrapper for tool pages */
.narrow{max-width:720px; margin:0 auto}

/* Selectable choice cards (radio cards) */
.choice{position:relative; display:flex; gap:14px; align-items:center; cursor:pointer;
  padding:16px; border-radius:var(--r-md); border:1.5px solid var(--border-strong); background:var(--bg-soft);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease)}
.choice:hover{transform:translateY(-2px)}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice .ch-ic{width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:1.3rem;
  color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,transparent); border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
.choice .ch-t{font-weight:700}
.choice .ch-s{color:var(--muted); font-size:.84rem; margin-top:2px}
.choice .ch-check{margin-left:auto; color:var(--brand); opacity:0; transition:opacity .18s var(--ease)}
.choice:has(input:checked){border-color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,transparent); box-shadow:0 0 0 4px var(--ring)}
.choice:has(input:checked) .ch-check{opacity:1}

/* ============ Pills / stats ============ */
.pill{display:inline-flex; align-items:center; justify-content:center; gap:7px; line-height:1; background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:7px 14px; font-size:.8rem; color:var(--muted)}
.pill i,.pill .material-icons{line-height:1; display:inline-flex; align-items:center; font-size:.95em}
.pill.brand{color:var(--brand); border-color:var(--glow); background:color-mix(in srgb,var(--brand) 13%,transparent)}
.stat{font-size:2.2rem; font-weight:800; letter-spacing:-.03em}

/* ============ Segmented tabs ============ */
.tabs{display:inline-flex; gap:4px; padding:5px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; margin-bottom:22px; flex-wrap:wrap}
.tab{border:0; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-weight:600; font-size:.9rem;
  padding:9px 18px; border-radius:999px; transition:color .2s var(--ease), background .2s var(--ease)}
.tab:hover{color:var(--text)}
.tab.active{color:#fff; background:linear-gradient(180deg,var(--brand-2),var(--brand)); box-shadow:0 8px 18px -8px var(--glow)}
.tabpane{display:none; animation:rise .4s var(--ease) both}
.tabpane.active{display:block}
/* Mobile: tabs become a single horizontally-scrollable row (no messy wrapping). */
@media(max-width:680px){
  .tabs{display:flex; flex-wrap:nowrap; overflow-x:auto; max-width:100%; border-radius:16px;
    justify-content:flex-start; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none; white-space:nowrap; padding:9px 14px; font-size:.85rem}
}

/* ============ Toast ============ */
.toast{position:fixed; right:24px; bottom:24px; z-index:90; padding:13px 18px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--border-strong); box-shadow:var(--shadow); font-weight:500;
  backdrop-filter:blur(20px); opacity:0; transform:translateY(12px) scale(.98); transition:.25s var(--ease)}
.toast.show{opacity:1; transform:none}
.toast.err{border-color:#ff5470}

/* ============ Modal ============ */
.modal-backdrop{position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:20px;
  background:rgba(3,6,14,.55); backdrop-filter:blur(8px)}
.modal-backdrop.open{display:grid; animation:fade .2s var(--ease)}
.modal{width:100%; max-width:460px; max-height:calc(100dvh - 40px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg-soft); border:1px solid var(--border-strong);
  border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow); animation:pop .25s var(--ease)}
.modal::-webkit-scrollbar{width:9px}
.modal::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:8px; border:2px solid transparent; background-clip:content-box}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}

/* ===== PWA install guide: platform badge + numbered step cards ===== */
.pwa-guide .pwa-plat{display:inline-flex; align-items:center; gap:8px; margin:2px 0 16px; padding:6px 13px;
  border-radius:999px; font-size:.78rem; font-weight:700; color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent); border:1px solid var(--glow)}
.pwa-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.pwa-step{display:flex; gap:14px; align-items:flex-start; padding:14px 15px; border:1px solid var(--border);
  border-radius:14px; background:var(--surface); transition:border-color .18s var(--ease)}
.pwa-step:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border))}
.pwa-step .pwa-ic{flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-size:1.05rem; color:var(--brand); background:color-mix(in srgb,var(--brand) 14%,transparent)}
.pwa-step .pwa-tx{line-height:1.55; padding-top:2px; color:var(--text)}
.pwa-step .pwa-n{display:inline-grid; place-items:center; width:20px; height:20px; margin-right:9px;
  border-radius:50%; background:var(--brand); color:#fff; font-size:.74rem; font-weight:800; vertical-align:1px}

/* ===== Auth (login / register) — futuristic ===== */
.auth{position:relative; min-height:calc(100dvh - 70px); display:grid; place-items:center; padding:48px 20px; overflow:hidden}
.auth::before{content:""; position:absolute; top:-220px; left:50%; width:680px; height:680px; transform:translateX(-50%);
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, color-mix(in srgb,var(--brand) 26%,transparent), transparent 62%); filter:blur(50px)}
.auth::after{content:""; position:absolute; bottom:-260px; right:-120px; width:520px; height:520px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, color-mix(in srgb,#a855f7 22%,transparent), transparent 62%); filter:blur(60px)}
.auth-card{position:relative; z-index:1; width:100%; max-width:440px; padding:36px 34px;
  border:1px solid var(--border-strong); border-radius:22px; background:var(--bg-soft);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent)}
[data-theme="dark"] .auth-card{background:color-mix(in srgb,var(--bg-soft) 80%,transparent);
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%)}
.auth-brand{display:flex; justify-content:center; font-size:1.5rem; margin-bottom:20px}
.auth-brand .brand-logo{height:38px; max-width:190px}
.auth-card h1{margin:0 0 4px; font-size:1.7rem; letter-spacing:-.02em; text-align:center}
.auth-sub{color:var(--muted); margin:0 0 22px; font-size:.92rem; text-align:center}
.auth-form{display:flex; flex-direction:column; gap:13px}
.auth-field{position:relative}
.auth-field > .fa-solid{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.92rem; pointer-events:none; z-index:1}
.auth-field input{width:100%; padding-left:42px}
.auth-field .auth-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--muted);
  cursor:pointer; padding:7px; display:grid; place-items:center; border-radius:8px}
.auth-field .auth-eye:hover{color:var(--text); background:var(--surface-2)}
.auth-field:has(.auth-eye) input{padding-right:44px}
.auth-card .btn.block{margin-top:8px}
.auth-foot{text-align:center; color:var(--muted); margin:18px 0 0; font-size:1.02rem}
.auth-legal{text-align:center; color:var(--muted); margin:14px 0 0; font-size:.78rem; line-height:1.5}
.auth-legal a{color:var(--muted); text-decoration:underline}
.auth-legal a:hover{color:var(--text)}
.auth-alert{background:rgba(255,94,122,.12); border:1px solid rgba(255,94,122,.45); color:#ff5e7a;
  border-radius:12px; padding:12px 14px; margin-bottom:18px; font-size:.88rem}
.form-error{background:rgba(255,94,122,.12); border:1px solid rgba(255,94,122,.45); color:#ff5e7a;
  border-radius:12px; padding:11px 14px; margin-bottom:16px; font-size:.88rem}
.btn.copied,.icon-btn.copied{background:#22c55e!important;border-color:#22c55e!important;color:#fff!important}
/* Clips review grid */
.clips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.clip-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.clip-card video{width:100%;max-height:360px;object-fit:contain;background:#000;display:block}
.clip-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-right:8px}
.clip-foot .clip-keep{flex:1;min-width:0}
.clip-foot .ced-edit{flex:none;color:var(--muted)}
.clip-foot .ced-edit:hover{color:var(--brand)}
.clip-keep{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:.88rem;cursor:pointer}
.clip-keep input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;cursor:pointer;
  border:2px solid var(--border-strong);border-radius:6px;background:var(--surface);position:relative;transition:.15s var(--ease)}
.clip-keep input[type=checkbox]:hover{border-color:var(--brand)}
.clip-keep input[type=checkbox]:checked{background:linear-gradient(135deg,var(--brand-2),var(--brand));border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.clip-keep input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ============ App / admin layout — professional side navbar (no top header) ============ */
.layout{display:grid; grid-template-columns:270px 1fr; min-height:100vh}
.sidebar{display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh;
  border-right:1px solid var(--border);
  background:color-mix(in srgb,var(--bg-soft) 60%,transparent);
  backdrop-filter:saturate(160%) blur(20px); -webkit-backdrop-filter:saturate(160%) blur(20px)}
.sidebar .brand{padding:8px 10px 4px; font-size:1.22rem; align-self:center}
.nav-main{flex:1; display:flex; flex-direction:column; gap:3px; overflow-y:auto; margin:16px 0}
.nav-sep{height:1px; background:var(--border); margin:8px 6px}
.sidebar a.nav-link{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-sm);
  color:var(--muted); font-weight:500; transition:background .18s var(--ease), color .18s var(--ease)}
.sidebar a.nav-link:hover{background:var(--surface); color:var(--text); text-decoration:none}
.sidebar a.nav-link.active{background:color-mix(in srgb,var(--brand) 15%,transparent); color:var(--text)}
.sidebar a.nav-link.active::before{content:""; width:4px; height:18px; border-radius:4px; background:var(--brand);
  margin:0 -5px 0 -4px; box-shadow:0 0 10px var(--glow)}
.sidebar .ic{width:22px; text-align:center; opacity:.95; font-size:1rem}

.nav-foot{display:flex; flex-direction:column; gap:12px; padding-top:14px; border-top:1px solid var(--border)}
.mins-box{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:999px;
  color:var(--brand); font-weight:700; font-size:.92rem; text-align:center;
  background:color-mix(in srgb,var(--brand) 13%,transparent); border:1px solid var(--glow)}
.upgrade-btn{justify-content:center}
.nav-foot-sep{height:1px; background:var(--border); margin:2px 0}
/* Stacked: action buttons on top, then the account identity below (readable). */
.user-row{display:flex; flex-direction:column; gap:14px}
.user-id{display:flex; align-items:center; gap:12px; min-width:0}
.user-av{width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.05rem; color:#fff;
  background:linear-gradient(135deg,var(--brand),#a855f7);
  box-shadow:0 0 0 1px var(--glow), 0 4px 14px color-mix(in srgb,var(--brand) 38%,transparent)}
.user-meta{min-width:0}
.user-name{font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.user-email{color:var(--muted); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.user-acts{display:flex; align-items:center; justify-content:space-between; gap:6px; padding-bottom:14px; border-bottom:1px solid var(--border)}
.user-acts .icon-btn{width:40px; height:40px; font-size:1.02rem}
/* Language icon-button + popover */
.lang-switch{position:relative}
.lang-menu{position:absolute; bottom:calc(100% + 8px); right:0; z-index:80; display:none; min-width:90px; padding:6px;
  max-height:min(60vh, 340px); overflow-y:auto; overscroll-behavior:contain;
  border-radius:12px; background:var(--bg-soft); border:1px solid var(--border-strong); box-shadow:var(--shadow); animation:tkpop .14s var(--ease)}
[data-theme="dark"] .lang-menu{background:#0e1422}
.lang-switch.open .lang-menu{display:block}
.lang-switch.lang-down .lang-menu{top:calc(100% + 8px); bottom:auto}
.lang-opt{display:block; width:100%; text-align:left; padding:8px 12px; border:0; background:transparent; color:var(--text);
  border-radius:8px; cursor:pointer; font:inherit; font-weight:600; letter-spacing:.03em}
.lang-opt:hover{background:var(--surface-2)}
.lang-opt.sel{background:color-mix(in srgb,var(--brand) 16%,transparent); color:var(--brand)}
.ctl-btn{background:var(--surface); border:1px solid var(--border)}
.nav-close{display:none}
.req{color:#ff5470; font-weight:700}

/* API Keys sub-panes + reorderable text providers */
.subpane{display:none}
.subpane.active{display:block; animation:rise .35s var(--ease) both}
.prov-row{display:flex; align-items:flex-start; gap:12px; padding:14px; margin-bottom:10px;
  border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--bg-soft)}
.prov-row .drag{color:var(--muted); padding-top:6px; cursor:grab}
.prov-row.dragging{opacity:.5; border-color:var(--brand)}
#provList .prov-row{align-items:center}
#provList .prov-row .drag{padding-top:0}
.prov-row .drag:active{cursor:grabbing}
.prov-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.prov-ord{display:flex; flex-direction:column; gap:6px}
.prov-ord .icon-btn{width:30px; height:30px; font-size:.8rem}

.main{min-width:0; display:flex; flex-direction:column}
.content{width:100%; max-width:1460px; margin:0 auto; padding:40px 56px}
.content>h1{margin-top:0}

/* Mobile top header + slide-in drawer navbar (hidden on desktop) */
.mobilebar{display:none}
.nav-overlay{display:none}

@media(max-width:980px){
  .mobilebar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; height:68px; padding:0 14px;
    position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--bg-soft) 72%,transparent);
    backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px)}
  .mobilebar .mb-left{justify-self:start}
  .mobilebar .brand{justify-self:center; font-size:1.16rem}
  .mobilebar .mb-right{justify-self:end; display:flex; align-items:center; gap:8px}
  /* Slightly larger, easier-to-tap control buttons on the mobile bar. */
  .mobilebar .icon-btn{width:46px; height:46px; font-size:1.2rem}
  .mobilebar .icon-btn .material-icons{font-size:1.4rem}

  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed; top:0; left:0; height:100dvh; width:284px; z-index:70;
    transform:translateX(-100%); transition:transform .26s var(--ease); border-right:1px solid var(--border)}
  .sidebar .nav-close{display:grid; place-items:center; position:absolute; top:16px; right:14px; z-index:3; width:36px; height:36px}
  .sidebar .brand{align-self:flex-start}
  body.nav-open .sidebar{transform:none; box-shadow:var(--shadow)}
  body.nav-open .nav-overlay{display:block; position:fixed; inset:0; z-index:60;
    background:rgba(3,6,14,.5); backdrop-filter:blur(4px)}
  .content{padding:24px 18px; max-width:none}
}

/* ============ Icons (Font Awesome + Material Icons) ============ */
.material-icons{font-size:1.15em; line-height:1; vertical-align:-.18em}
.btn .material-icons{font-size:1.1em}
.nav-links i,.btn i,.pill i{margin-right:0}
.sidebar .ic{width:22px; text-align:center; opacity:.95; font-size:1rem}
.sidebar .ic .material-icons{font-size:1.15rem}
.tool-ic i,.tool-ic .material-icons{font-size:1.1rem}
.thumb i,.thumb .material-icons{font-size:1.3rem}
.brand-ic{color:var(--brand)}

.row{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:0}
.thumb{position:relative; overflow:hidden; width:54px; height:54px; border-radius:12px; background:linear-gradient(135deg,var(--surface-2),transparent);
  border:1px solid var(--border); display:grid; place-items:center; font-size:1.3rem; flex:none; color:var(--brand)}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lib-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-info{flex:1; min-width:0}
.row-acts{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end}
.lib-del{color:#ff5e7a; border-color:color-mix(in srgb,#ff5e7a 40%,var(--border)); background:color-mix(in srgb,#ff5e7a 12%,transparent)}
.lib-del:hover{color:#fff; background:#ff4d6a; border-color:transparent}
@media(max-width:640px){
  #libList .row{flex-wrap:wrap; gap:10px}
  #libList .lib-name{white-space:normal}
  #libList .row-info .muted{white-space:normal}
  .row-acts{margin-left:0; flex:1 1 100%; justify-content:flex-start; margin-top:2px}
  .row-acts .btn{flex:0 1 auto}
  .row-acts .btn.sm{padding:9px 14px}
}

/* ===== Library search + sort ===== */
.lib-search{position:relative; display:flex; align-items:center; width:100%; margin:6px 0 16px}
.lib-search-ic{position:absolute; left:15px; color:var(--muted); font-size:.9rem; pointer-events:none}
.lib-search input{width:100%; padding:13px 52px 13px 40px}
.lib-filter{position:absolute; right:7px}
.lib-filter-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:60; display:none; min-width:218px; padding:6px;
  border-radius:var(--r-md); background:var(--bg-soft); border:1px solid var(--border-strong); box-shadow:var(--shadow); animation:tkpop .14s var(--ease)}
[data-theme="dark"] .lib-filter-menu{background:#0e1422}
.lib-filter-menu.open{display:block}
.lib-filter-head{padding:7px 11px 4px; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.lib-sort{display:block; width:100%; text-align:left; padding:9px 11px; border:0; border-radius:8px; cursor:pointer; font:inherit; font-size:.9rem;
  background:transparent; color:var(--text); transition:.12s var(--ease)}
.lib-sort:hover{background:var(--surface-2)}
.lib-sort.sel{background:color-mix(in srgb,var(--brand) 16%,transparent); color:var(--brand); font-weight:600}

/* ===== Data table ===== */
.data-table{width:100%; border-collapse:collapse; font-size:.9rem}
.data-table th{text-align:left; padding:10px 12px; color:var(--muted); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border-strong); white-space:nowrap}
.data-table td{padding:12px; border-bottom:1px solid var(--border); white-space:nowrap}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--surface)}

/* ===== Translations admin ===== */
.tr-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:16px 0}
.tr-stat{padding:13px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-soft)}
.tr-stat .muted{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600}
.tr-stat-v{font-size:1.35rem; font-weight:800; margin-top:4px}
.tr-actions{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 0}
.tr-table td{font-size:.84rem}
.tr-src{max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ===== Branding uploads ===== */
.brand-upload{text-align:center}
.bu-label{font-size:.8rem; color:var(--muted); font-weight:600; margin-bottom:8px}
.bu-drop{position:relative; display:grid; place-items:center; height:120px; border-radius:var(--r-md); cursor:pointer; overflow:hidden;
  border:1.5px dashed var(--border-strong); transition:border-color .16s var(--ease)}
.bu-drop:hover{border-color:var(--brand)}
.bu-drop.tile-light{background:#eef1f7}
.bu-drop.tile-dark{background:#0b101c}
.bu-img{max-width:86%; max-height:86%; object-fit:contain; display:none}
.brand-upload.has-img .bu-img{display:block}
.brand-upload.has-img .bu-empty{display:none}
.bu-empty{color:var(--muted); font-size:.82rem; line-height:1.6}
.bu-empty i{font-size:1.5rem}
.bu-del{color:#ff5e7a}
.brand-upload:not(.has-img) .bu-del{display:none}

/* ===== Brand logo (per-theme, app-name fallback) ===== */
.brand-logo{height:30px; max-width:150px; width:auto; display:none; vertical-align:middle}
[data-theme="dark"] .brand.has-dark .brand-logo.dark{display:inline-block}
[data-theme="light"] .brand.has-light .brand-logo.light{display:inline-block}
[data-theme="dark"] .brand.has-dark .brand-name{display:none}
[data-theme="light"] .brand.has-light .brand-name{display:none}
.brand-name{display:inline-flex; align-items:center; gap:9px}

/* ===== Swal-style dialogs ===== */
.swal-backdrop{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px;
  background:rgba(4,7,14,.62); backdrop-filter:blur(5px); opacity:0; transition:opacity .18s var(--ease)}
.swal-backdrop.show{opacity:1}
.swal-card{width:100%; max-width:390px; text-align:center; padding:30px 26px 22px; border-radius:var(--r-lg);
  background:var(--bg-soft); border:1px solid var(--border-strong); box-shadow:var(--shadow);
  transform:translateY(10px) scale(.96); transition:transform .2s var(--ease)}
.swal-backdrop.show .swal-card{transform:none}
.swal-icon{width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; font-size:1.75rem}
.swal-warning .swal-icon{color:#ffb020; background:color-mix(in srgb,#ffb020 16%,transparent)}
.swal-question .swal-icon{color:var(--brand); background:color-mix(in srgb,var(--brand) 16%,transparent)}
.swal-info .swal-icon{color:var(--brand); background:color-mix(in srgb,var(--brand) 16%,transparent)}
.swal-success .swal-icon{color:#22d36b; background:color-mix(in srgb,#22d36b 16%,transparent)}
.swal-error .swal-icon{color:#ff5e7a; background:color-mix(in srgb,#ff5e7a 16%,transparent)}
.swal-title{margin:0 0 6px; font-size:1.22rem; font-weight:800}
.swal-text{margin:0 0 22px; color:var(--muted); font-size:.95rem; line-height:1.5}
.swal-actions{display:flex; gap:10px; justify-content:center}
.swal-actions .btn{min-width:120px}
.swal-danger{background:linear-gradient(180deg,#ff6b85,#e23b58); box-shadow:0 12px 26px -12px rgba(226,59,88,.65)}
@media(max-width:480px){ .swal-actions{flex-direction:column-reverse} .swal-actions .btn{width:100%} }

/* ===== Pricing ===== */
.bill-toggle{display:flex; width:fit-content; gap:4px; padding:5px; margin:26px auto 0; border-radius:999px; background:var(--surface); border:1px solid var(--border)}
.bill-toggle button{border:0; background:transparent; color:var(--muted); font:inherit; font-weight:600; padding:9px 20px; border-radius:999px; cursor:pointer; transition:.16s var(--ease)}
.bill-toggle button:hover{color:var(--text)}
.bill-toggle button.active{color:#fff; background:linear-gradient(180deg,var(--brand-2),var(--brand)); box-shadow:0 8px 18px -8px var(--glow)}
.plans-grid{align-items:stretch}
.plan-card{position:relative; display:flex; flex-direction:column}
.plan-card.popular{border-color:var(--brand)}
/* Sits inside the card (backdrop-filter clips anything outside the rounded box). */
.plan-card.popular{padding-top:18px}
.plan-badge{align-self:center; margin:0 0 12px}
.plan-price{font-size:2.2rem; font-weight:800; letter-spacing:-.02em; margin:.1em 0; line-height:1.1}
.plan-price .ps{font-size:.95rem; font-weight:500}
.plan-min{margin:.2em 0 10px}
.plan-trial{margin-bottom:8px; color:#22d36b; border-color:color-mix(in srgb,#22d36b 35%,transparent); background:color-mix(in srgb,#22d36b 12%,transparent)}
.plan-feats{list-style:none; padding:0; margin:10px 0 0; flex:1}
.plan-feats li{display:flex; align-items:flex-start; gap:9px; padding:6px 0; font-size:.9rem; color:var(--text)}
.plan-feats li i{color:var(--brand); margin-top:4px; font-size:.78rem}
.plan-feats li.feat-no{color:var(--muted)}
.plan-feats li.feat-no i{color:#ff5e7a}
/* Per-feature tooltip: an ⓘ next to the feature, bubble on hover/focus. */
.plan-feats li .feat-txt{flex:1;min-width:0}
.plan-feats li.has-tip{position:relative;cursor:help}
.plan-feats li.has-tip .feat-tip-ic{flex:none;color:var(--muted);opacity:.65;font-size:.72rem;margin-top:5px;transition:color .15s,opacity .15s}
.plan-feats li.has-tip:hover .feat-tip-ic,.plan-feats li.has-tip:focus .feat-tip-ic{color:var(--brand);opacity:1}
.plan-feats li.has-tip:focus{outline:none}
.plan-feats li.has-tip::after{content:attr(data-tip);position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:30;
  padding:9px 12px;border-radius:10px;background:linear-gradient(var(--surface-2),var(--surface-2)),var(--bg);
  border:1px solid var(--border-strong,var(--border));color:var(--text);font-size:.8rem;line-height:1.5;font-weight:500;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.65);white-space:normal;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .16s var(--ease),transform .16s var(--ease);pointer-events:none}
.plan-feats li.has-tip::before{content:"";position:absolute;left:16px;bottom:calc(100% + 2px);z-index:31;
  border:6px solid transparent;border-top-color:var(--border-strong,var(--border));
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease)}
.plan-feats li.has-tip:hover::after,.plan-feats li.has-tip:focus::after{opacity:1;visibility:visible;transform:none}
.plan-feats li.has-tip:hover::before,.plan-feats li.has-tip:focus::before{opacity:1;visibility:visible}
.plan-card.unavail{opacity:.6}
.plan-cta.disabled{pointer-events:none; opacity:.45; filter:grayscale(.5)}

/* ============ Toggle switch ============ */
.switch{position:relative; display:inline-block; width:46px; height:26px; flex:none}
.switch input{opacity:0; width:0; height:0; position:absolute}
.switch .track{position:absolute; inset:0; border-radius:999px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border-strong); transition:.25s var(--ease)}
.switch .track::before{content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; border-radius:50%;
  background:var(--muted); transition:.25s var(--ease)}
.switch input:checked + .track{background:linear-gradient(180deg,var(--brand-2),var(--brand)); border-color:transparent}
.switch input:checked + .track::before{transform:translateX(20px); background:#fff}

/* ============ Upload dropzone ============ */
.dropzone{position:relative; border:1.5px dashed var(--border-strong); border-radius:var(--r-md);
  padding:30px 20px; text-align:center; color:var(--muted); cursor:pointer; background:var(--surface);
  transition:border-color .2s var(--ease), background .2s var(--ease)}
.dropzone:hover,.dropzone.drag{border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,transparent)}
.dropzone .dz-ic{font-size:1.8rem; color:var(--brand); margin-bottom:8px}
.dropzone input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.dropzone .dz-file{color:var(--text); font-weight:600}
.dropzone a{color:var(--brand)}

/* hash tab anchor offset under sticky nav */
[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}

/* ============ Idea-to-Video wizard ============ */
.wz{max-width:920px; margin:0 auto}
/* Guest view of a tool renders in the public layout, whose <main> has no padding
   like the app layout's .content does — add breathing room below the header. */
main.guest-tool{padding:44px 24px 64px}
@media(max-width:980px){ main.guest-tool{padding:28px 16px 48px} }
.stepper{display:flex; align-items:center; gap:8px; margin:18px 0 26px; flex-wrap:wrap}
.stepper .st{display:flex; align-items:center; gap:9px; color:var(--muted); font-weight:600; font-size:.86rem}
.stepper .st .num{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--surface); border:1px solid var(--border-strong); font-size:.82rem; transition:.2s var(--ease)}
.stepper .st.active{color:var(--text)}
.stepper .st.active .num{background:linear-gradient(180deg,var(--brand-2),var(--brand)); border-color:transparent; color:#fff; box-shadow:0 6px 14px -6px var(--glow)}
.stepper .st.done .num{background:color-mix(in srgb,var(--brand) 22%,transparent); border-color:transparent; color:var(--brand)}
.stepper .bar{flex:1; min-width:14px; height:2px; background:var(--border)}
.stepper .st.done + .bar{background:var(--brand)}
@media(max-width:720px){ .stepper .st .lbl{display:none} }

.wz-pane{display:none; animation:rise .4s var(--ease) both}
.wz-pane.active{display:block}
.wz-nav{display:flex; gap:10px; justify-content:space-between; margin-top:26px}

/* caption style gallery */
.style-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px}
.style-card{position:relative; cursor:pointer; text-align:center}
.style-acts{position:absolute; top:6px; right:6px; display:flex; gap:5px; opacity:.55; transition:opacity .15s var(--ease)}
.style-card:hover .style-acts{opacity:1}
@media(hover:none){ .style-acts{opacity:1} } /* always visible on touch devices */
.s-act{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; cursor:pointer;
  background:rgba(8,12,20,.78); border:1px solid var(--border-strong); color:#fff; font-size:.72rem; backdrop-filter:blur(6px)}
.s-act:hover{background:var(--brand); border-color:transparent}
.s-act[data-del]:hover{background:#ff4d6a}
.cap-frame{position:relative; aspect-ratio:9/16; border-radius:var(--r-md); overflow:hidden; border:2px solid var(--border);
  background:linear-gradient(160deg,#1b2740,#0d1422); display:grid; place-items:center; transition:border-color .18s var(--ease), transform .15s var(--ease)}
.style-card:hover .cap-frame{transform:translateY(-3px)}
.style-card.sel .cap-frame{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.style-card .nm{margin-top:8px; font-weight:600; font-size:.9rem}
.cap-frame.add{background:linear-gradient(160deg,var(--brand-2),var(--brand)); color:#fff; font-size:2rem; border-style:dashed; border-color:transparent}
.cap-stage{display:grid; place-items:center; padding:10px; width:100%}

/* live caption text */
.cap-text{font-weight:800; line-height:1.15; text-align:center; padding:0 6px; transition:.2s}
.cap-word{display:inline-block; padding:1px 5px; border-radius:5px; margin:1px}
@keyframes capPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes capFade{from{opacity:0}to{opacity:1}}
@keyframes capPulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 3px currentColor}}

/* builder modal */
.modal.wide{max-width:900px}
.builder{display:grid; grid-template-columns:1fr 300px; gap:22px}
.builder .b-fields{max-height:64vh; overflow:auto; padding-right:10px}
.builder .b-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; margin:8px 0 0; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface)}
.builder .b-row > span:first-child{color:var(--muted); font-size:.9rem; font-weight:500}
.builder .b-fields .ctl{width:auto; min-width:120px}
.builder .b-fields input.ctl[type=number]{min-width:84px; width:84px}
.builder .b-preview{position:sticky; top:0}
@media(max-width:760px){ .builder{grid-template-columns:1fr} }

/* ===== Futuristic custom select ===== */
/* Masked secret inputs (visually hidden, but not a real password field — keeps
   the browser password manager from prompting to save/update credentials). */
input.masked{-webkit-text-security:disc; text-security:disc}
input.masked.reveal{-webkit-text-security:none; text-security:none}

.tk-select{position:relative; display:inline-block; min-width:140px; vertical-align:middle}
.tk-select-native{display:none}
.tk-select-btn{display:flex; align-items:center; gap:10px; width:100%; padding:11px 13px; cursor:pointer; font:inherit;
  border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--bg-soft); color:var(--text); text-align:left; transition:.18s var(--ease)}
[data-theme="dark"] .tk-select-btn{background:rgba(255,255,255,.04)}
.tk-select-btn:hover{border-color:var(--brand)}
.tk-select.open .tk-select-btn{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.tk-select-label{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tk-select-chev{font-size:.68rem; color:var(--muted); transition:transform .18s var(--ease)}
.tk-select.open .tk-select-chev{transform:rotate(180deg); color:var(--brand)}
.tk-select-menu{position:absolute; left:0; right:auto; top:calc(100% + 6px); z-index:140; display:none; max-height:300px; overflow:hidden;
  min-width:100%; width:max-content; max-width:min(440px,92vw); box-sizing:border-box;
  padding:6px; border-radius:var(--r-md); background:var(--bg-soft); border:1px solid var(--border-strong); box-shadow:var(--shadow); animation:tkpop .14s var(--ease)}
[data-theme="dark"] .tk-select-menu{background:#0e1422}
.tk-select.open .tk-select-menu{display:block}
.tk-select.up .tk-select-menu{top:auto; bottom:calc(100% + 6px)}
/* When the select sits near the right edge, anchor the menu to the right instead */
.tk-select.menu-right .tk-select-menu{left:auto; right:0}
.tk-option{display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:8px; cursor:pointer; font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.12s var(--ease)}
.tk-option:hover{background:var(--surface-2)}
.tk-option.sel{background:color-mix(in srgb,var(--brand) 16%,transparent); color:var(--brand); font-weight:600}
.tk-option.sel::after{content:"\2713"; margin-left:auto; font-size:.86rem; font-weight:700; flex:none}
/* Search field inside the menu — looks like a real input */
.tk-select-search{position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:8px; padding:9px 11px; margin:0 0 6px;
  border:1px solid var(--border-strong); border-radius:10px; background:var(--surface-2)}
[data-theme="dark"] .tk-select-search{background:rgba(255,255,255,.05)}
.tk-select-search:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}
.tk-select-search i{color:var(--muted); font-size:.82rem}
.tk-select-search input{flex:1; border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; font-size:.9rem; min-width:0; color:var(--text)}
.tk-select-list{max-height:228px; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:0 4px}
.tk-select-empty{padding:14px 11px; text-align:center; color:var(--muted); font-size:.86rem}
/* Slim, themed scrollbar for the options list */
.tk-select-list{scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent}
.tk-select-list::-webkit-scrollbar{width:8px}
.tk-select-list::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:8px; border:2px solid transparent; background-clip:content-box}
.tk-select-list::-webkit-scrollbar-thumb:hover{background:var(--muted); background-clip:content-box}
@keyframes tkpop{from{opacity:0; transform:translateY(-5px)}to{opacity:1; transform:none}}
/* compact selects inside the nav pill */
.navctl .tk-select{min-width:62px}
.navctl .tk-select-btn{border:none; background:transparent; padding:8px 10px; box-shadow:none}
.navctl .tk-select.open .tk-select-btn{box-shadow:none}

/* ===== Futuristic colour control ===== */
.tk-color{position:relative; display:inline-block}
.tk-color input[type=color]{position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none}
.tk-swatch{display:flex; align-items:center; gap:9px; min-width:140px; padding:7px 11px 7px 8px; cursor:pointer; font:inherit;
  border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--bg-soft); color:var(--text); transition:.18s var(--ease)}
[data-theme="dark"] .tk-swatch{background:rgba(255,255,255,.04)}
.tk-swatch:hover{border-color:var(--brand)}
.tk-color.open .tk-swatch{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.tk-swatch-c{width:22px; height:22px; border-radius:6px; flex:none; border:1px solid rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.tk-swatch-hex{flex:1; font-size:.8rem; letter-spacing:.04em; color:var(--muted)}
.tk-swatch .fa-chevron-down{font-size:.64rem; color:var(--muted)}
.tk-color-pop{position:absolute; left:0; right:auto; top:calc(100% + 6px); z-index:200; display:none; width:236px; padding:12px;
  border-radius:var(--r-md); background:var(--bg-soft); border:1px solid var(--border-strong); box-shadow:var(--shadow); animation:tkpop .14s var(--ease)}
[data-theme="dark"] .tk-color-pop{background:#0e1422}
.tk-color.open .tk-color-pop{display:block}
/* Lift the containing card above later siblings while the picker is open so the
   popover is never hidden behind cards that come after it in the DOM. */
.card:has(.tk-color.open){position:relative; z-index:60; overflow:visible}
.tabpane:has(.tk-color.open){position:relative; z-index:5}
/* Same fix for the custom <select> dropdown: lift its card above later siblings. */
.card:has(.tk-select.open){position:relative; z-index:70; overflow:visible}
.tabpane:has(.tk-select.open){position:relative; z-index:6}

/* Futuristic date picker (enhances <input type="date">) */
.tk-date{position:relative; display:inline-block; width:100%}
.tk-date-native{position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; padding:0}
.tk-date-btn{display:flex; align-items:center; gap:10px; width:100%; padding:11px 13px; cursor:pointer; font:inherit;
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text)}
[data-theme="dark"] .tk-date-btn{background:rgba(255,255,255,.04)}
.tk-date-btn:hover{border-color:var(--brand)}
.tk-date.open .tk-date-btn{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.tk-date-btn .tk-date-lbl{flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tk-date-btn.empty .tk-date-lbl{color:var(--muted)}
.tk-date-btn i{color:var(--muted); font-size:.9rem}
.tk-date-pop{position:absolute; left:0; top:calc(100% + 8px); z-index:160; display:none; width:288px; padding:14px;
  border:1px solid var(--border-strong); border-radius:16px;
  background:linear-gradient(var(--surface-2),var(--surface-2)),var(--bg);
  box-shadow:0 28px 70px -18px rgba(0,0,0,.75)}
[data-theme="dark"] .tk-date-pop{border-color:color-mix(in srgb,var(--brand) 22%,var(--border-strong))}
.tk-date.open .tk-date-pop{display:block; animation:rise .18s var(--ease)}
.tk-date.menu-right .tk-date-pop{left:auto; right:0}
/* Portaled to <body> (position:fixed) so a modal's overflow never clips it. */
.tk-date-pop-fixed{position:fixed; top:auto; left:auto; animation:rise .18s var(--ease)}
.tk-date-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.tk-date-title{font-weight:700; text-transform:capitalize}
.tk-date-nav{width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; display:grid; place-items:center}
.tk-date-nav:hover{border-color:var(--brand); color:var(--brand)}
.tk-date-week{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px}
.tk-date-week span{text-align:center; font-size:.68rem; color:var(--muted); text-transform:uppercase; padding:4px 0}
.tk-date-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.tk-day{aspect-ratio:1; border:none; background:transparent; color:var(--text); border-radius:8px; cursor:pointer; font-size:.84rem}
.tk-day.out{visibility:hidden}
.tk-day:hover:not(.dis):not(.sel){background:var(--surface-2)}
.tk-day.today{box-shadow:inset 0 0 0 1.5px var(--brand)}
.tk-day.sel{background:linear-gradient(180deg,var(--brand-2),var(--brand)); color:#fff; font-weight:700}
.tk-day.dis{color:var(--muted); opacity:.4; cursor:not-allowed}
.tk-date-foot{margin-top:8px; display:flex; justify-content:flex-end}
.tk-date-today{border:none; background:transparent; color:var(--brand); font-weight:600; cursor:pointer; font-size:.82rem}
.tk-sv{position:relative; width:100%; height:132px; border-radius:10px; cursor:crosshair; margin-bottom:12px; touch-action:none}
.tk-sv-cursor{position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45); transform:translate(-50%,-50%); pointer-events:none}
.tk-hue{position:relative; width:100%; height:14px; border-radius:7px; margin-bottom:12px; cursor:pointer; touch-action:none;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.tk-hue-thumb{position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid rgba(0,0,0,.25); transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,.4)}
.tk-palette{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.tk-palette .sw{width:100%; aspect-ratio:1; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); transition:transform .12s var(--ease)}
.tk-palette .sw:hover{transform:scale(1.13); box-shadow:0 0 0 2px var(--brand)}
.tk-hex-row{display:flex; align-items:center; gap:4px; margin-top:11px; padding:0 11px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--bg-soft)}
.tk-hex-row > span{color:var(--muted); font-weight:600}
.tk-hex{flex:1; border:0 !important; background:transparent !important; box-shadow:none !important; padding:9px 0 !important; text-transform:uppercase; letter-spacing:.1em; min-width:0}

/* ===== Range slider (futuristic) ===== */
.b-range{display:flex; align-items:center; gap:12px; min-width:170px}
.b-range input[type=range]{flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:linear-gradient(to right,var(--brand-2),var(--brand)); outline:none; cursor:pointer}
.b-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--brand); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3)}
.b-range input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--brand); cursor:pointer}
.b-range output{min-width:54px; text-align:right; font-weight:600; font-size:.88rem; color:var(--text)}

/* transitions */
.tr-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px}
.tr-tile{cursor:pointer; border:2px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--bg-soft)}
.tr-tile.sel{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.tr-demo{aspect-ratio:16/10; position:relative; overflow:hidden; background:#0d1422}
.tr-demo .a,.tr-demo .b{position:absolute; inset:0; display:grid; place-items:center; font-weight:800; color:#fff}
.tr-demo .a{background:linear-gradient(135deg,#3a2d6b,#2b7bff)}
.tr-demo .b{background:linear-gradient(135deg,#0f7a5a,#22d36b)}
.tr-tile .nm{padding:8px 10px; font-weight:600; font-size:.85rem; text-align:center}
.tr-demo[data-tr=none] .b{display:none}
.tr-demo[data-tr=fade] .b{animation:trFade 2.6s var(--ease) infinite}
.tr-demo[data-tr=slide] .b{animation:trSlide 2.6s var(--ease) infinite}
.tr-demo[data-tr=zoom] .b{animation:trZoom 2.6s var(--ease) infinite}
.tr-demo[data-tr=door-v] .b{animation:trDoorV 2.6s var(--ease) infinite}
.tr-demo[data-tr=door-h] .b{animation:trDoorH 2.6s var(--ease) infinite}
.tr-demo[data-tr=spin] .b{animation:trSpin 2.6s var(--ease) infinite}
@keyframes trFade{0%,15%{opacity:0}45%,75%{opacity:1}100%{opacity:0}}
@keyframes trSlide{0%,15%{transform:translateX(100%)}45%,75%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes trZoom{0%,15%{transform:scale(0);opacity:0}45%,75%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes trDoorV{0%,15%{clip-path:inset(50% 0 50% 0)}45%,75%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(50% 0 50% 0)}}
@keyframes trDoorH{0%,15%{clip-path:inset(0 50% 0 50%)}45%,75%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 50% 0 50%)}}
@keyframes trSpin{0%,15%{transform:rotate(180deg) scale(0);opacity:0}45%,75%{transform:rotate(0) scale(1);opacity:1}100%{transform:rotate(-180deg) scale(0);opacity:0}}

/* script clips */
.clip{display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); margin-bottom:12px}
.clip .c-body{flex:1; min-width:0}
.clip .c-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.clip .c-head .t{font-weight:700}
.clip textarea{min-height:76px}
.clip .c-thumb{position:relative; width:96px; height:128px; flex:none; border-radius:10px; overflow:hidden; border:1px solid var(--border);
  background:linear-gradient(160deg,#1b2740,#0d1422); display:grid; place-items:center; color:var(--brand); cursor:pointer}
.clip .c-thumb img,.clip .c-thumb video{width:100%; height:100%; object-fit:cover}
.clip .c-thumb .c-thumb-up{position:absolute; right:5px; bottom:5px; width:24px; height:24px; border-radius:7px;
  display:grid; place-items:center; background:rgba(8,12,20,.72); color:#fff; font-size:.72rem; opacity:0; transition:opacity .15s}
.clip .c-thumb:hover .c-thumb-up{opacity:1}
.clip-acts{display:flex; gap:6px; margin-left:auto}
.clip-tr{display:flex; align-items:center; justify-content:center; margin:6px 0}
.clip-tr button{font-size:.8rem}

/* voices */
/* Voice picker filters (language + gender chips) */
.voice-filters{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.voice-filters .vf-row{display:flex; flex-wrap:wrap; gap:8px}
.voice-filters .vf-gender{padding-top:2px}
.vchip{padding:7px 15px; border-radius:999px; border:1px solid var(--border-strong); background:var(--bg-soft); color:var(--muted);
  font-weight:600; font-size:.84rem; cursor:pointer; transition:.16s var(--ease)}
.vchip:hover{border-color:var(--brand); color:var(--text)}
.vchip.active{background:var(--text); color:var(--bg); border-color:var(--text)}
[data-theme="dark"] .vchip.active{background:#fff; color:#0b1020}
.vf-gender .vchip.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.voice-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px}
.voice-group{grid-column:1/-1; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:4px 0 -4px}
.voice-card{display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px; border:2px solid var(--border); border-radius:var(--r-md); background:var(--bg-soft); cursor:pointer}
.voice-card.sel{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.voice-card .v-ic{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent)}
.voice-card .v-nm{font-weight:600}
.voice-card.is-feat{border-color:color-mix(in srgb,#f5c518 55%,var(--border))}
.voice-card .v-feat-row{flex-basis:100%; margin-top:2px; padding-top:10px; border-top:1px solid var(--border)}
.v-feat{display:inline-flex;align-items:center;gap:4px;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:999px;color:#f5c518;background:color-mix(in srgb,#f5c518 16%,transparent);border:1px solid color-mix(in srgb,#f5c518 40%,transparent);white-space:nowrap}
.v-feat i{font-size:.6rem}

/* generation */
.genbar{height:12px; border-radius:999px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border)}
.genbar > i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--brand-2),var(--brand)); transition:width .4s var(--ease)}

/* ---- "Writing…" loader shown while an AI script is generated ---- */
.wz-textwrap{position:relative}
.wz-writing{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); padding:30px 16px; text-align:center}
.wz-textwrap .wz-writing{position:absolute; inset:0; background:color-mix(in srgb,var(--surface) 78%,transparent); backdrop-filter:blur(2px); border-radius:14px}
.wz-writing[hidden]{display:none}
.wz-writing .wz-pen{font-size:1.8rem; color:var(--brand); animation:wzPen 1.1s var(--ease) infinite}
@keyframes wzPen{0%,100%{transform:translateX(-3px) rotate(-8deg)} 50%{transform:translateX(3px) rotate(6deg)}}
.wz-writing .wz-dots{display:inline-flex; gap:6px}
.wz-writing .wz-dots i{width:8px; height:8px; border-radius:50%; background:var(--brand); display:block; animation:wzDot 1s var(--ease) infinite}
.wz-writing .wz-dots i:nth-child(2){animation-delay:.15s}
.wz-writing .wz-dots i:nth-child(3){animation-delay:.3s}
@keyframes wzDot{0%,100%{transform:translateY(0); opacity:.4} 50%{transform:translateY(-6px); opacity:1}}

/* ---- Blog cards (shared: /blog list, home featured, related) ---- */
.blog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--brand) 50%,var(--border));box-shadow:0 18px 40px -22px color-mix(in srgb,var(--brand) 60%,#000)}
.blog-card.feat{grid-column:span 2;flex-direction:row}
.bc-media{position:relative;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.blog-card.feat .bc-media{aspect-ratio:auto;width:52%;flex:none}
.bc-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.blog-card:hover .bc-media img{transform:scale(1.05)}
.bc-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:2.4rem;color:color-mix(in srgb,var(--brand) 60%,var(--muted));background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,var(--surface-2)),var(--surface-2))}
.bc-tag{position:absolute;top:12px;left:12px;background:color-mix(in srgb,#000 55%,transparent);color:#fff;font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:999px;backdrop-filter:blur(6px);text-transform:capitalize}
.bc-body{display:flex;flex-direction:column;gap:10px;padding:20px;flex:1;min-width:0}
.blog-card.feat .bc-body{justify-content:center;padding:30px}
.bc-body h2{font-size:1.2rem;line-height:1.3;margin:0}
.blog-card.feat .bc-body h2{font-size:1.6rem}
.bc-ex{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc-meta{display:flex;gap:16px;color:var(--muted);font-size:.8rem;margin-top:auto}
.bc-meta i{margin-right:4px}
.bc-more{color:var(--brand);font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;gap:6px;transition:gap .2s;margin-top:auto}
.blog-card:hover .bc-more{gap:11px}
.home-blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
@media(max-width:640px){.blog-card.feat{flex-direction:column}.blog-card.feat .bc-media{width:100%;aspect-ratio:16/9}}

/* ---- Cookie consent bar ---- */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:300;padding:14px;transform:translateY(120%);transition:transform .3s var(--ease);pointer-events:none}
.cookie-bar.show{transform:none}
.cookie-inner{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--bg-soft);border:1px solid var(--border-strong);box-shadow:var(--shadow);border-radius:16px;padding:14px 20px;pointer-events:auto}
[data-theme="dark"] .cookie-inner{background:#0e1422}
.cookie-inner .cookie-ic{font-size:1.4rem;color:var(--brand);flex:none}
.cookie-inner p{margin:0;flex:1;min-width:200px;font-size:.9rem;color:var(--muted)}
.cookie-inner p a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.cookie-inner .btn{flex:none}

/* ---- Footer social icons: bigger tap target + padding ---- */
.foot-social{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.foot-social a{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:1.1rem;transition:.18s}
.foot-social a:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 50%,var(--border));transform:translateY(-2px)}

/* ---- Date picker: never clip the popup inside a card ---- */
.card:has(.tk-date.open){overflow:visible;z-index:60;position:relative}
.tk-select-native + *,.card:has(.tk-select.open){overflow:visible}

/* ---- Admin: footer social-links editor (Redes tab) ---- */
.social-rows{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.social-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:8px 10px}
.social-row.dragging{opacity:.5}
.social-row .sr-drag{cursor:grab;color:var(--muted)}
.social-row .sr-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.social-row .sr-net{flex:none;min-width:120px;font-weight:600;font-size:.9rem}
.social-row input[type=url]{flex:1;min-width:0;border:1px solid var(--border)!important;background:var(--bg)!important;border-radius:8px;padding:8px 10px;color:var(--text)}
.social-row .sr-del{flex:none;color:var(--muted);cursor:pointer;padding:6px;background:none;border:none}
.social-row .sr-del:hover{color:#ff5e7a}

/* ---- Admin: legal docs editor (Legal tab) ---- */
.legal-edit textarea{width:100%;min-height:160px;font-family:inherit;line-height:1.6;resize:vertical}
.legal-edit details{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:12px;overflow:hidden}
.legal-edit summary{padding:14px 16px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}
.legal-edit summary::-webkit-details-marker{display:none}
.legal-edit summary .chev{margin-left:auto;transition:transform .2s}
.legal-edit details[open] summary .chev{transform:rotate(180deg)}
.legal-edit .legal-fields{padding:0 16px 16px}

/* ---- Segmented control (shared: dashboard, settings modals, API examples) ---- */
.seg{display:inline-flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:12px;flex-wrap:wrap;border:1px solid var(--border)}
.seg .seg-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:none;background:transparent;border-radius:9px;color:var(--muted);font-weight:600;font-size:.85rem;cursor:pointer;transition:background .15s,color .15s}
.seg .seg-btn:hover{color:var(--text)}
.seg .seg-btn.active{background:var(--brand);color:#fff;box-shadow:0 4px 14px -6px var(--glow)}
.seg .seg-btn i{margin:0}
.seg.sm .seg-btn{padding:5px 11px;font-size:.78rem}
.seg-center{display:flex;justify-content:center}

/* Reusable rich-text editor (blog + legal pages) */
.rte{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.rte-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.rte-toolbar button{min-width:34px;height:34px;padding:0 9px;border:1px solid transparent;background:transparent;border-radius:9px;color:var(--muted);cursor:pointer;font-size:.9rem;display:inline-grid;place-items:center;transition:.15s}
.rte-toolbar button:hover{background:var(--surface);color:var(--text)}
.rte-toolbar button.on{background:var(--brand);color:#fff}
.rte-toolbar button:disabled{opacity:.35;cursor:not-allowed}
.rte-sep{width:1px;background:var(--border);margin:4px 2px}
.rte-body{min-height:300px;max-height:60vh;overflow:auto;padding:18px 20px;color:var(--text);line-height:1.7;outline:none}
.rte-body:empty:before{content:attr(data-ph);color:var(--muted)}
.rte-html{min-height:300px;max-height:60vh;width:100%;border:none;outline:none;padding:18px 20px;background:var(--surface);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.6;resize:vertical}
.rte-body h2{font-size:1.5rem;margin:1.1em 0 .5em}
.rte-body h3{font-size:1.2rem;margin:1em 0 .4em}
.rte-body p{margin:0 0 1em}
.rte-body ul,.rte-body ol{margin:0 0 1em 1.4em}
.rte-body blockquote{margin:0 0 1em;padding:8px 16px;border-left:3px solid var(--brand);background:var(--surface-2);border-radius:0 10px 10px 0;color:var(--muted)}
.rte-body img{max-width:100%;border-radius:12px;margin:8px 0}
.rte-body a{color:var(--brand)}

/* ── Social login buttons ─────────────────────────────────────────────
   Brand-identity buttons (Google / Facebook / Apple), shared by login,
   register and the guest checkout. Each wears its real brand colour with
   an icon chip + hover lift/glow so they stand out on the dark auth card
   instead of the flat "ghost" grey they used to be. Provider is chosen by
   the [data-provider] attribute set on the anchor. */
.social-btn{position:relative; font-weight:700; letter-spacing:.15px;
  border:1px solid transparent; padding-left:54px; padding-right:54px;
  background:var(--surface); color:var(--text); box-shadow:none}
.social-btn i{position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
  font-size:18px; background:rgba(255,255,255,.14)}
.social-btn:hover{transform:translateY(-2px); filter:none; text-decoration:none}

/* Google — white pill, dark label, brand-blue G on a light chip */
.social-btn[data-provider="google"]{background:#fff; color:#1f1f1f;
  box-shadow:0 8px 22px -12px rgba(255,255,255,.5), inset 0 0 0 1px rgba(0,0,0,.08)}
.social-btn[data-provider="google"] i{background:rgba(66,133,244,.12); color:#4285F4}
.social-btn[data-provider="google"]:hover{box-shadow:0 16px 34px -12px rgba(66,133,244,.75)}

/* Facebook — brand blue */
.social-btn[data-provider="facebook"]{background:linear-gradient(180deg,#2b8bff,#1877F2); color:#fff;
  box-shadow:0 8px 22px -12px rgba(24,119,242,.85)}
.social-btn[data-provider="facebook"] i{background:rgba(255,255,255,.2); color:#fff}
.social-btn[data-provider="facebook"]:hover{box-shadow:0 16px 36px -10px rgba(24,119,242,.95)}

/* Apple — graphite→black with a subtle rim so it reads on the dark card */
.social-btn[data-provider="apple"]{background:linear-gradient(180deg,#2c2c30,#050505); color:#fff;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.16)}
.social-btn[data-provider="apple"] i{background:rgba(255,255,255,.16); color:#fff; font-size:20px}
.social-btn[data-provider="apple"]:hover{box-shadow:0 16px 34px -12px rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.24)}