/* Real Prompt Generator: futuristic glass UI. Colours, radii, spacing and type sizes live in assets/css/tokens.css (LR-9). */

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
/* Animated aurora + grid background */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 35% at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(35% 30% at 85% 20%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(45% 40% at 60% 90%, rgba(167, 139, 250, 0.12), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(3%, 2%, 0) rotate(4deg); }
  100% { transform: translate3d(-2%, 4%, 0) rotate(-3deg); }
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-2); }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Top bar ───────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px; position: sticky; top: 0; z-index: 20;
  background: rgba(7, 8, 13, 0.6);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.brand > div { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.tagline { margin: 0; color: var(--muted); font-size: 12.5px; }
.logo { font-size: 26px; color: var(--accent); line-height: 1; }
.logo-img { width: 34px; height: 34px; border-radius: 10px; flex: none; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .4s var(--ease); }
.brand:hover .logo-img { transform: rotate(-8deg) scale(1.06); }
.top-actions { display: flex; gap: 8px; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; margin-left: 4px; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { max-width: 1400px; margin: 0 auto; padding: 44px 24px 12px; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-2); padding: 6px 12px; border: 1px solid rgba(34, 211, 238, 0.25); border-radius: 99px; background: rgba(34, 211, 238, 0.06);
  margin-bottom: 18px;
}
.hero-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: pulse 2s infinite; }
.hero h1 {
  font-size: clamp(30px, 4.6vw, 56px); line-height: 1.05; margin: 0 auto 14px; letter-spacing: -0.035em; font-weight: 700; max-width: 960px;
  background: linear-gradient(120deg, #fff 20%, color-mix(in srgb, var(--accent) 70%, #fff) 55%, var(--accent-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 0 auto; color: var(--muted); max-width: 760px; font-size: 16.5px; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* ── Layout ────────────────────────────────────────────────── */
.layout {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px;
  max-width: 1400px; margin: 0 auto; padding: 22px 24px 48px;
}
.output-sticky { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; display: grid; gap: 16px; padding-bottom: 4px; scrollbar-width: thin; }

/* Glass cards with gradient edge */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--glow);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), transparent 35%, transparent 65%, color-mix(in srgb, var(--accent) 30%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── Idea box ──────────────────────────────────────────────── */
.idea-card { margin-bottom: 16px; }
.idea-label { display: flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.idea-label::before { content: "›"; color: var(--accent); font-size: 16px; }
textarea, input[type="text"], input[type="password"], input[type="email"] {
  width: 100%; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; resize: vertical; outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea:focus, input:focus, select:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 24px -6px var(--accent);
  background: rgba(0, 0, 0, 0.45);
}
#idea { font-size: 18px; min-height: 64px; caret-color: var(--accent); }
.idea-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.toggle { display: inline-flex; gap: 10px; align-items: center; margin-top: 14px; color: var(--muted); font-size: 13.5px; cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 34px; height: 20px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; cursor: pointer; transition: background .25s; margin: 0; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.toggle input:checked { background: var(--accent); border-color: var(--accent); }
.toggle input:checked::after { transform: translateX(14px); }
.select {
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; max-width: 100%; cursor: pointer; outline: none;
}
.select option { background: var(--surface-solid); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border-strong); background: var(--surface-2); border-radius: var(--radius-sm); padding: 9px 15px;
  cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--text);
  transition: transform .18s var(--ease), background .2s, border-color .2s, box-shadow .25s;
}
.btn:hover { background: var(--surface-3); border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn.primary {
  border-color: transparent; color: #fff;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-3)) 60%, var(--accent));
  background-size: 200% 100%; animation: sheen 6s linear infinite;
  box-shadow: 0 8px 26px -10px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn.primary:hover { box-shadow: 0 10px 34px -8px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn.accent {
  border-color: rgba(34, 211, 238, 0.4); color: #e6fbff;
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.22), rgba(167, 139, 250, 0.22));
  box-shadow: 0 0 24px -10px var(--accent-2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn.accent:hover { border-color: var(--accent-2); box-shadow: 0 0 30px -6px var(--accent-2); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.small { padding: 5px 11px; font-size: 12.5px; border-radius: 10px; }
.btn.success { border-color: var(--ok) !important; color: var(--ok) !important; background: rgba(52, 211, 153, 0.1) !important; box-shadow: 0 0 24px -8px var(--ok) !important; animation: none; }
@keyframes sheen { to { background-position: -200% 0; } }

/* Click ripple (added by app.js) */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  animation: ripple .6s var(--ease) forwards;
}
.chip .ripple, .tab .ripple { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, #fff), transparent 70%); }
@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(28); opacity: 0; } }

/* ── Sections ──────────────────────────────────────────────── */
.section { margin-bottom: 14px; padding: 0; overflow: hidden; animation: rise .5s var(--ease) both; }
.section:nth-child(2) { animation-delay: .04s; } .section:nth-child(3) { animation-delay: .08s; } .section:nth-child(4) { animation-delay: .12s; }
.section:nth-child(5) { animation-delay: .16s; } .section:nth-child(6) { animation-delay: .2s; } .section:nth-child(7) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.section > summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; gap: 12px; user-select: none; }
.section > summary::-webkit-details-marker { display: none; }
.section > summary::after { content: ""; margin-left: 10px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .3s var(--ease); flex: none; }
.section[open] > summary::after { transform: rotate(45deg); }
.section-num {
  font: 700 12px var(--mono); color: var(--accent); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 0 18px -6px var(--accent);
}
.section-title { font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }
.section-badge { margin-left: auto; font: 600 11.5px var(--mono); color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 3px 9px; }
.section-hint { color: var(--muted); font-size: 13px; margin: -8px 20px 6px 66px; }
.section-body { padding: 4px 20px 18px; }

.group { padding: 12px 0; border-top: 1px solid var(--border); }
.group:first-child { border-top: none; }
.group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.group-label { font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #c4c8d8; }
.group-meta { font-size: 11.5px; color: var(--muted); }
.adv-tag { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-3); border: 1px solid rgba(167, 139, 250, 0.4); border-radius: 99px; padding: 1px 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 6px 12px;
  font-size: 13px; cursor: pointer; color: #d5d8e4;
  transition: transform .18s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .25s;
}
.chip:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.07); transform: translateY(-1px); color: #fff; }
.chip:active { transform: scale(.94); }
.chip.active {
  color: #fff; border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent-3) 20%, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 6px 20px -8px var(--accent);
}
.chip.pop { animation: pop .38s var(--ease); }
@keyframes pop { 0% { transform: scale(.9); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
.chip.auto { font-style: italic; color: var(--muted); }
.chip.auto.active { color: #fff; background: var(--surface-3); border-color: var(--border-strong); box-shadow: none; }
.chip .desc { opacity: .65; font-size: 11px; margin-left: 4px; }
.custom-input { margin-top: 9px; font-size: 13px; padding: 8px 11px !important; }
.group.adv-hidden { display: none; }

/* ── Output panel ──────────────────────────────────────────── */
.output-card { padding: 16px; }
.output-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.output-title { display: flex; align-items: center; gap: 8px; font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2s infinite; }
.win-dots { display: flex; gap: 6px; }
.win-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.win-dots i:nth-child(1) { background: #f87171; } .win-dots i:nth-child(2) { background: #fbbf24; } .win-dots i:nth-child(3) { background: #34d399; }
.tabs { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.tab { position: relative; overflow: hidden; isolation: isolate; flex: 1; border: none; background: transparent; padding: 8px; border-radius: 9px; cursor: pointer; font: 600 12.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); transition: color .2s, background .25s; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface-3); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--border-strong); }
.tab[hidden] { display: none; }
.output-text {
  font: 12.8px/1.7 var(--mono); background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px; margin: 0 0 12px; white-space: pre-wrap; word-break: break-word; min-height: 200px; max-height: 44vh; overflow: auto;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5); transition: border-color .4s, box-shadow .4s;
}
.output-text.prose { font: 14.5px/1.7 var(--font); color: #e7e9f2; }
.output-text.empty { color: var(--muted); font-style: italic; }
.output-text.flash { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 0 26px -10px var(--accent); }
.output-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

.enhanced {
  margin-top: 12px; border: 1px solid rgba(34, 211, 238, 0.35); border-radius: var(--radius-sm); padding: 13px 15px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(167, 139, 250, 0.08)); animation: rise .45s var(--ease);
}
.enhanced-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.enhanced-head strong { font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.enhanced-head .btn { margin-left: auto; }
.enhanced p { margin: 0; font-size: 14px; line-height: 1.65; }
.enhanced-video { margin-top: 8px !important; padding-top: 8px; border-top: 1px dashed var(--border); }
.stale { font-size: 11px; color: var(--warn); }

.meter { margin-top: 16px; }
.meter-head { display: flex; justify-content: space-between; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.meter-head strong { color: var(--text); font-size: 13px; }
.meter-bar { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 99px; overflow: hidden; }
#strength-fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); box-shadow: 0 0 14px var(--accent); transition: width .6s var(--ease); }
#strength-fill.good { background: linear-gradient(90deg, var(--accent-2), var(--ok)); box-shadow: 0 0 14px var(--ok); }
.strength-items { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.strength-items li { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); transition: color .3s, border-color .3s; }
.strength-items li.ok { color: var(--ok); border-color: rgba(52, 211, 153, 0.3); }
.strength-items li.ok::before { content: "✓ "; }
.strength-items li:not(.ok)::before { content: "○ "; }

.warnings { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.warnings li { font-size: 13px; padding: 9px 12px; border-radius: 10px; animation: rise .35s var(--ease); }
.warnings li.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(251, 191, 36, 0.2); }
.warnings li.tip { background: var(--tip-bg); color: var(--tip); border: 1px solid rgba(56, 189, 248, 0.18); }
.wordcount { color: var(--muted); font: 11.5px var(--mono); margin: 10px 0 0; }

/* ── Dialogs ───────────────────────────────────────────────── */
.dialog {
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0; color: var(--text); width: min(480px, calc(100vw - 32px));
  background: rgba(16, 18, 28, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.dialog[open] { animation: dlg .35s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.dialog.wide { width: min(720px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(3, 4, 8, 0.7); backdrop-filter: blur(4px); }
.dialog-body { padding: 22px; display: grid; gap: 10px; }
.dialog h2 { margin: 0 0 4px; font-size: 19px; }
.dialog h3 { margin: 8px 0 0; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dialog label { font-weight: 500; font-size: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.end { justify-content: flex-end; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.note { color: var(--muted); font-size: 12.5px; margin: 0; }
.status { font-size: 13px; min-height: 1.2em; margin: 0; }
.mono-block { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px; font-size: 14px; line-height: 1.65; margin: 0; }
.library-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.library-list li { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; gap: 8px; align-items: center; transition: border-color .2s; }
.library-list li:hover { border-color: var(--border-strong); }
.library-list .lib-main { flex: 1; min-width: 0; }
.library-list .lib-name { font-weight: 600; }
.library-list .lib-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-empty { color: var(--muted); font-style: italic; }

/* ── Toast & spinner ───────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(24px) scale(.96); opacity: 0;
  background: rgba(18, 20, 30, 0.92); border: 1px solid var(--border-strong); color: var(--text); padding: 11px 18px; border-radius: 14px; font-size: 14px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 0 24px -12px var(--accent);
  transition: opacity .3s var(--ease), transform .35s var(--ease); pointer-events: none; z-index: 60; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast.error { border-color: rgba(248, 113, 113, 0.5); color: #fecaca; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 0 24px -10px #f87171; }
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 7px; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); animation: scan 1.1s linear infinite;
}
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── Ad slots ──────────────────────────────────────────────── */
.ad-slot { max-width: 1400px; margin: 18px auto; padding: 0 24px; text-align: center; overflow: hidden; }
.ad-label { display: block; font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .7; margin-bottom: 5px; }
/* LR-7: the label shows only once Google fills the slot; an unfilled slot closes up */
.ad-slot:has(ins.adsbygoogle):not(:has(ins[data-ad-status="filled"])) .ad-label { display: none; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-preview span, .ad-stage span { display: block; border: 2px dashed var(--accent); border-radius: var(--radius-sm); padding: 22px 12px; color: var(--accent); font: 600 12px var(--mono); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ad-stage span { border-color: var(--border-strong); color: var(--muted); background: rgba(255, 255, 255, 0.02); }

/* ── SEO content, pages, footer ────────────────────────────── */
.seo-content { max-width: 1400px; margin: 0 auto; padding: 8px 24px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.prose h1 { font-size: 30px; margin: 0 0 14px; letter-spacing: -0.02em; }
.prose h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: -0.01em; }
.prose h3 { font-size: 16px; }
.prose p, .prose li { color: #d3d6e2; }
.prose a { color: var(--accent-2); }
.prose .steps { padding-left: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.prose .steps li { counter-increment: step; position: relative; padding-left: 42px; min-height: 28px; line-height: 1.55; }
.prose .steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -1px; width: 30px; height: 26px; font: 700 12px var(--mono); color: var(--accent); background: var(--accent-soft); border-radius: 8px; display: grid; place-items: center; }
.faq details { border-top: 1px solid var(--border); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font: 600 18px var(--mono); line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 8px 0 0; color: var(--muted); }
.page-wrap { max-width: 840px; margin: 0 auto; padding: 32px 16px 40px; }
.site-footer {
  border-top: 1px solid var(--border); background: rgba(7, 8, 13, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 28px 24px; text-align: center; color: var(--muted); font-size: 13.5px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-bottom: 10px; }
.site-footer a { color: #c9ccd9; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--accent); }
.site-footer p { margin: 0; }
[hidden] { display: none !important; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; padding: 16px 16px 40px; }
  .output-sticky { position: static; max-height: none; }
  .topbar { padding: 10px 16px; }
  .tagline { display: none; }
  .brand-name { font-size: 15px; }
  .logo-img { width: 30px; height: 30px; }
  .top-actions .btn { padding: 7px 11px; }
  .hero { padding: 28px 16px 4px; }
  .hero p { font-size: 15px; }
  .ad-slot { padding: 0 16px; }
  .seo-content { grid-template-columns: 1fr; padding: 0 16px 16px; }
  .section-hint { margin-left: 20px; }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── Phase 1: Auto state, safety, Detail score, focus ──────── */
.chip.auto { border-style: dashed; font: 700 10.5px var(--mono); letter-spacing: .12em; font-style: normal; color: var(--muted); padding: 7px 11px; }
.chip.auto.active { color: #fff; border-color: var(--border-strong); border-style: dashed; background: var(--surface-3); }
.chip.auto-pick { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: #fff; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.chip.disabled, .chip[aria-disabled="true"] { opacity: .35; cursor: not-allowed; text-decoration: line-through; transform: none !important; box-shadow: none !important; }
.auto-picked {
  margin-left: auto; border: none; background: none; padding: 0; cursor: pointer;
  font: 500 11.5px var(--font); color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px;
}
.auto-picked:hover { color: var(--accent); }
.chip:focus-visible, .btn:focus-visible, .tab:focus-visible, .auto-picked:focus-visible, .score-tip:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}
.group.highlight, .card.highlight { animation: glowpulse 1.6s var(--ease); border-radius: 12px; }
@keyframes glowpulse { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 30px -6px var(--accent); } }
#strength-score.level-low { color: #f87171; } #strength-score.level-mid { color: var(--warn); } #strength-score.level-high { color: var(--ok); }
#strength-fill.level-low { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 14px #ef4444; }
#strength-fill.level-mid { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 14px #f59e0b; }
#strength-fill.level-high { background: linear-gradient(90deg, var(--accent-2), var(--ok)); box-shadow: 0 0 14px var(--ok); }
.score-tip { display: block; width: 100%; text-align: left; margin-top: 10px; border: 1px dashed var(--border-strong); background: var(--surface-2); color: var(--text); border-radius: 10px; padding: 8px 11px; font-size: 13px; cursor: pointer; }
.score-tip::before { content: "↗ "; color: var(--accent); }
.score-tip:hover { border-color: var(--accent); }
.strength-items li.user { color: var(--ok); border-color: rgba(52, 211, 153, 0.3); }
.strength-items li.user::before { content: "✓ "; }
.strength-items li.auto { color: #fcd9bd; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.strength-items li.auto::before { content: "◐ "; }
.strength-items li.missing::before { content: "○ "; }
.strength-items li.ok::before { content: ""; }
.output-text.blocked { color: var(--warn); font-style: normal; text-align: center; display: grid; place-items: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Categories, quick settings, show all ───────────────────── */
.category-card { margin-bottom: 16px; padding: 14px; display: grid; gap: 12px; }
.cat-top { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 14px; padding: 5px; }
.cat-tab { position: relative; overflow: hidden; isolation: isolate; border: none; background: transparent; color: var(--muted); padding: 11px; border-radius: 10px; font-weight: 650; font-size: 15px; cursor: pointer; transition: background .25s, color .2s; }
.cat-tab:hover { color: var(--text); }
.cat-tab.active { color: #fff; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-3) 30%, transparent)); box-shadow: 0 6px 22px -10px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.cat-sub { display: flex; flex-wrap: wrap; gap: 7px; }
.cat-pill { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); color: #d5d8e4; border-radius: 99px; padding: 7px 14px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .2s var(--ease); }
.cat-pill:hover { border-color: var(--border-strong); color: #fff; transform: translateY(-1px); }
.cat-pill.active { color: #fff; border-color: var(--accent-2); background: rgba(34, 211, 238, 0.12); box-shadow: 0 0 18px -8px var(--accent-2); }
.cat-tab:focus-visible, .cat-pill:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.quick-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.quick-field { display: grid; gap: 5px; }
.quick-field span { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.quick-field .select { width: 100%; }
.show-all { width: 100%; margin: 4px 0 8px; padding: 12px; border-style: dashed; font-weight: 600; }
.show-all::before { content: "⚙ "; color: var(--accent); }
@media (max-width: 520px) { .quick-settings { grid-template-columns: 1fr; } .cat-tab { font-size: 14px; padding: 10px 6px; } }

/* ── Main nav ──────────────────────────────────────────────── */
/* ── Main menu (right side), account button, mobile menu ───── */
.main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.main-nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 10px; transition: color .2s, background .2s; white-space: nowrap; }
.main-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.main-nav a:hover { color: var(--text); background: var(--surface-2); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a.active { color: #fff; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.main-nav a.active::after { transform: scaleX(1); }
.nav-ico { display: none; }
.nav-account-link { display: none !important; }
.top-actions { align-items: center; }
.top-actions .account-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; text-decoration: none; }
.account-btn .avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px -4px var(--accent); }
.account-btn.signed-in { border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.account-btn.active { border-color: var(--accent); }

.nav-toggle { display: none; position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer; padding: 0; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .35s var(--ease), opacity .2s, top .35s var(--ease), background .3s; }
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; right: 16px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle:hover span:nth-child(2) { right: 11px; }
.nav-open .nav-toggle { border-color: var(--accent); box-shadow: 0 0 20px -6px var(--accent); }
.nav-open .nav-toggle span { background: var(--accent); }
.nav-open .nav-toggle span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: translateX(10px); }
.nav-open .nav-toggle span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
.nav-scrim { position: fixed; inset: 0; z-index: 18; background: rgba(3, 4, 8, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; } }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-block; }
  .top-actions .account-btn { padding: 4px; }
  .account-btn [data-account-label] { display: none; }
  .account-btn .avatar { width: 32px; height: 32px; }
  .main-nav {
    position: fixed; top: var(--topbar-h, 64px); left: 12px; right: 12px; z-index: 19; margin: 0;
    flex-direction: column; align-items: stretch; gap: 6px; padding: 12px;
    border-radius: 20px; border: 1px solid var(--border-strong);
    background: rgba(12, 14, 22, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 40px -20px var(--accent);
    clip-path: inset(0 0 100% 0 round 20px); opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: clip-path .45s var(--ease), opacity .3s, transform .45s var(--ease), visibility 0s .45s;
  }
  .nav-open .main-nav { clip-path: inset(0 0 0 0 round 20px); opacity: 1; visibility: visible; transform: none; transition: clip-path .45s var(--ease), opacity .3s, transform .45s var(--ease), visibility 0s; }
  .main-nav a { font-size: 16px; padding: 14px 16px; border-radius: 14px; gap: 12px; opacity: 0; transform: translateX(-16px); transition: opacity .35s, transform .4s var(--ease), background .2s, color .2s; }
  .nav-open .main-nav a { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 55ms), calc(80ms + var(--i, 0) * 55ms), 0s, 0s; }
  .main-nav a::after { display: none; }
  .main-nav a.active, .main-nav a[aria-current] { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent); box-shadow: inset 3px 0 0 var(--accent); }
  .nav-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 16px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
  .nav-account-link { display: inline-flex !important; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 14px 14px !important; }
  .nav-account-link .nav-ico { color: var(--accent-2); background: rgba(34, 211, 238, 0.12); border-color: rgba(34, 211, 238, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav, .main-nav a, .nav-toggle span { transition: none !important; }
}

/* ── Prompt Library page ───────────────────────────────────── */
.hero-compact { padding-bottom: 4px; }
.hero-compact h1 { font-size: clamp(28px, 4vw, 46px); }
.library-wrap { max-width: 1240px; margin: 0 auto; padding: 18px 24px 40px; display: grid; gap: 20px; }
.howto h2 { margin: 0 0 10px; font-size: 18px; }
.howto-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.howto-steps li { counter-increment: s; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 12px 46px; position: relative; font-size: 14px; color: #d3d6e2; }
.howto-steps li::before { content: counter(s); position: absolute; left: 12px; top: 11px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font: 700 12px var(--mono); color: var(--accent); background: var(--accent-soft); }
.lib-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-filters .cat-pill { text-decoration: none; }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lib-grid { grid-template-columns: 1fr; } .library-wrap { padding: 14px 16px 32px; } }
.lib-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; animation: rise .45s var(--ease) both; }
.lib-card[hidden] { display: none; }
.lib-media { position: relative; display: block; width: 100%; padding: 0; border: none; background: #000; cursor: zoom-in; aspect-ratio: 4 / 5; overflow: hidden; }
.lib-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.lib-card:hover .lib-media img { transform: scale(1.04); }
.lib-badge { position: absolute; left: 12px; top: 12px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 5px 10px; border-radius: 99px; background: rgba(7, 8, 13, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); }
.lib-body { padding: 16px; display: grid; gap: 10px; flex: 1; align-content: start; }
.lib-model { margin: 0; font-size: 12.5px; color: var(--muted); }
.lib-model strong { color: var(--accent-2); font-weight: 600; }
.lib-title { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.lib-tabs { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.lib-tab { flex: 1; border: none; background: transparent; color: var(--muted); font: 600 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 6px; border-radius: 8px; cursor: pointer; }
.lib-tab.active { background: var(--surface-3); color: #fff; }
.lib-prompt { margin: 0; font: 13.5px/1.6 var(--font); color: #e3e5ee; background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; white-space: pre-wrap; word-break: break-word; max-height: 190px; overflow: auto; }
.lib-prompt.mono { font: 12px/1.55 var(--mono); }
.lib-copy { width: 100%; padding: 13px; font-size: 15px; }
.lib-tip { font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }
.lib-tip summary { cursor: pointer; font-weight: 600; color: #c9ccd9; }
.lib-tip p { margin: 8px 0 0; }
.lib-empty, .lib-none, .lib-cta { text-align: center; }
.lib-cta h2 { margin: 0 0 6px; }
.lib-cta p { color: var(--muted); margin: 0 0 14px; }
.lightbox { width: min(92vw, 1100px); padding: 0; background: #000; }
.lightbox img { display: block; width: 100%; max-height: 86vh; object-fit: contain; }
.lightbox form { position: absolute; right: 8px; top: 8px; }

/* ── Graphic Design page ───────────────────────────────────── */
.cat-link { text-decoration: none; border-style: dashed; color: var(--accent-2); }
.cat-link:hover { color: #fff; border-color: var(--accent-2); }
.design-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.design-cat {
  position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 4px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); color: #d5d8e4; border-radius: 14px; padding: 12px 6px; cursor: pointer;
  transition: transform .18s var(--ease), border-color .2s, background .2s, box-shadow .25s;
}
.design-cat:hover { transform: translateY(-2px); border-color: var(--border-strong); color: #fff; }
.design-cat.active { color: #fff; border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent-3) 22%, transparent)); box-shadow: 0 8px 26px -12px var(--accent); }
.design-cat-icon { font-size: 22px; line-height: 1; color: var(--accent); }
.design-cat.active .design-cat-icon { color: #fff; }
.design-cat-label { font-size: 13px; font-weight: 600; text-align: center; }
@media (max-width: 620px) { .design-cats { grid-template-columns: repeat(3, 1fr); } }
.design-text-card, .design-options-card { margin-bottom: 16px; }
.card-title { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.card-hint { margin: 4px 0 14px; color: var(--muted); font-size: 13px; }
.design-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.design-field { display: grid; gap: 5px; align-content: start; }
.design-field.wide { grid-column: 1 / -1; }
.design-field > span { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.design-field small { color: var(--muted); font-size: 12px; }
.design-input { font-size: 14.5px; }
textarea.design-input { min-height: 54px; }
@media (max-width: 620px) { .design-fields { grid-template-columns: 1fr; } }
.design-options-card .group:first-of-type { border-top: none; }
.swatches { display: inline-flex; margin-right: 7px; vertical-align: -2px; }
.swatches i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); margin-left: -4px; }
.swatches i:first-child { margin-left: 0; }
.custom-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.custom-colors[hidden] { display: none; }
.color-field { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.color-field input[type="color"] { width: 44px; height: 44px; border: none; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type="color"]::-webkit-color-swatch { border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); }
.color-field span { font-size: 12px; font-weight: 600; }
.color-field code { font: 11px var(--mono); color: var(--muted); }
@media (max-width: 520px) { .custom-colors { grid-template-columns: repeat(2, 1fr); } }
.design-page .output-text { white-space: pre-wrap; max-height: 52vh; }
.model-tip { margin: 6px 0 0; font-size: 12.5px; color: var(--tip); background: var(--tip-bg); border: 1px solid rgba(56, 189, 248, 0.18); border-radius: 10px; padding: 8px 11px; }
.model-tip:empty { display: none; }
.design-tips { margin-top: 12px; font-size: 13px; color: #c9ccd9; border-top: 1px solid var(--border); padding-top: 10px; }
.design-tips summary { cursor: pointer; font-weight: 600; }
.design-tips ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }

/* ── Design templates, images, how-to ──────────────────────── */
.tpl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tpl-head span { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tpl-head small { color: var(--muted); font-size: 12px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tpl-card {
  position: relative; overflow: hidden; isolation: isolate; text-align: left; display: grid; gap: 3px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); color: #d5d8e4; border-radius: 12px; padding: 10px 12px; cursor: pointer;
  transition: transform .18s var(--ease), border-color .2s, background .2s;
}
.tpl-card strong { font-size: 13.5px; color: #fff; }
.tpl-card small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tpl-card:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.tpl-card.active { border-color: var(--accent-2); background: rgba(34, 211, 238, 0.1); box-shadow: 0 0 20px -10px var(--accent-2); }
.quick-4 { grid-template-columns: repeat(2, 1fr); }
.quick-actions .btn { width: 100%; padding: 9px; }
.design-refs-card { margin-bottom: 16px; }
.ref-list { display: grid; gap: 8px; margin-bottom: 10px; }
.ref-row { display: grid; grid-template-columns: auto 56px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ref-num { font: 700 11px var(--mono); color: var(--accent-2); letter-spacing: .05em; }
.ref-thumb { width: 56px; height: 56px; border-radius: 10px; border: 1px dashed var(--border-strong); display: grid; place-items: center; overflow: hidden; cursor: pointer; font-size: 10.5px; color: var(--muted); text-align: center; }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) { .ref-row { grid-template-columns: auto 48px 1fr; } .ref-row .btn { grid-column: 1 / -1; } }
.design-howto { margin-top: 12px; border: 1px solid rgba(249, 115, 22, 0.3); background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.design-howto strong { color: #fff; }
.design-howto ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; color: #e3e5ee; }
.fields-toggle { grid-column: 1 / -1; justify-self: start; }

/* ══ Homepage ═════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 14px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: pulse 2s infinite; }
:root { --h0: #f97316; --h1: #22d3ee; --h2: #a78bfa; --h3: #34d399; --h4: #fbbf24; --h5: #f472b6; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* Hero */
.home-hero { position: relative; overflow: hidden; padding: 64px 24px 40px; }
.home-hero-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.home-title {
  font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 18px; font-weight: 750;
  background: linear-gradient(110deg, #fff 10%, #ffd9bf 35%, var(--accent) 55%, var(--accent-2) 80%, #fff 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: titleShine 9s ease-in-out infinite;
}
@keyframes titleShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.home-sub { color: #b7bbcc; font-size: 17px; max-width: 560px; margin: 0 0 26px; }
.hero-try { display: flex; gap: 8px; padding: 6px; border-radius: 16px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border-strong); max-width: 560px; box-shadow: 0 20px 60px -30px var(--accent); }
.hero-try input { flex: 1; border: none; background: transparent; font-size: 16px; padding: 10px 12px; box-shadow: none !important; }
.hero-try .btn { padding: 12px 18px; font-size: 15px; }
.hero-links { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.hero-links a { color: #d5d8e4; text-decoration: none; border-bottom: 1px dashed var(--border-strong); }
.hero-links a:hover { color: var(--accent-2); }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; animation: float 18s ease-in-out infinite; }
.orb-a { width: 420px; height: 420px; left: -120px; top: -80px; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.orb-b { width: 360px; height: 360px; right: -80px; top: 40px; background: rgba(34, 211, 238, 0.45); animation-delay: -6s; }
.orb-c { width: 300px; height: 300px; left: 40%; bottom: -160px; background: rgba(167, 139, 250, 0.45); animation-delay: -12s; }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 20px) scale(.95); } }

/* Demo window */
.demo-window {
  position: relative; border-radius: 20px; padding: 16px; background: rgba(12, 14, 22, 0.78); border: 1px solid var(--border-strong);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03);
  min-height: 430px; display: grid; gap: 12px; align-content: start;
}
.demo-window::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--spin, 0deg), transparent 0 60%, var(--accent) 70%, var(--accent-2) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-border 6s linear infinite; }
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-border { to { --spin: 360deg; } }
.demo-bar { display: flex; align-items: center; justify-content: space-between; }
.demo-label { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.demo-idea { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border); font-size: 16px; min-height: 48px; }
.demo-caret-label { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.caret { width: 2px; height: 20px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; align-content: flex-start; }
.demo-chip { font-size: 12px; padding: 5px 10px; border-radius: 99px; border: 1px solid; animation: chipIn .45s var(--ease) both; background: rgba(255, 255, 255, 0.03); }
.demo-chip b { font-weight: 700; margin-right: 3px; }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
.demo-chip.c0, .hl.c0 { color: var(--h0); border-color: color-mix(in srgb, var(--h0) 45%, transparent); }
.demo-chip.c1, .hl.c1 { color: var(--h1); border-color: color-mix(in srgb, var(--h1) 45%, transparent); }
.demo-chip.c2, .hl.c2 { color: var(--h2); border-color: color-mix(in srgb, var(--h2) 45%, transparent); }
.demo-chip.c3, .hl.c3 { color: var(--h3); border-color: color-mix(in srgb, var(--h3) 45%, transparent); }
.demo-chip.c4, .hl.c4 { color: var(--h4); border-color: color-mix(in srgb, var(--h4) 45%, transparent); }
.demo-chip.c5, .hl.c5 { color: var(--h5); border-color: color-mix(in srgb, var(--h5) 45%, transparent); }
.hl { border-bottom: 1px dashed; }
.demo-output { font-size: 14px; line-height: 1.7; color: #dfe2ec; min-height: 160px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); }
.demo-score { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.demo-meter { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.demo-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--ok)); box-shadow: 0 0 14px var(--accent-2); transition: width .4s var(--ease); }
.demo-score strong { color: var(--ok); font-size: 15px; }

/* Marquee */
.marquee { padding: 18px 0 8px; overflow: hidden; text-align: center; }
.marquee-label { margin: 0 0 12px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-row { display: flex; gap: 12px; padding-right: 12px; }
.marquee-pill { white-space: nowrap; padding: 9px 18px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: #cfd3e1; font-weight: 600; font-size: 14px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Stats */
.stats { max-width: 1100px; margin: 26px auto 10px; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { text-align: center; padding: 22px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.stat-card strong { display: block; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; background: linear-gradient(120deg, #fff, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-card span { color: var(--muted); font-size: 13.5px; }

/* Sections */
.home-section { max-width: 1240px; margin: 0 auto; padding: 64px 24px 10px; }
.home-section.narrow { max-width: 860px; }
.section-head { text-align: center; margin-bottom: 30px; }
.section-head h2 { margin: 0; font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; }

/* Tool cards */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tool-card {
  position: relative; display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 22px; text-decoration: none; color: var(--text);
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.07), transparent 45%), var(--surface);
  border: 1px solid var(--border); transition: transform .25s var(--ease), border-color .3s, box-shadow .3s; transform-style: preserve-3d;
}
.tool-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 30px 70px -30px var(--accent); }
.tool-card h3 { margin: 8px 0 0; font-size: 21px; letter-spacing: -0.02em; }
.tool-card p { margin: 0; color: #b7bbcc; font-size: 14.5px; }
.tool-cta { color: var(--accent-2); font-weight: 600; font-size: 14px; margin-top: 4px; }
.tool-visual { height: 150px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); overflow: hidden; position: relative; }
.tv-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; align-content: center; justify-content: center; }
.tv-chips span { font-size: 12px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--border); color: #c9ccd9; animation: chipBlink 4s ease-in-out infinite; }
.tv-chips span:nth-child(odd) { animation-delay: -2s; }
.tv-chips span:nth-child(3n) { animation-delay: -1s; }
@keyframes chipBlink { 0%, 40%, 100% { background: transparent; color: #c9ccd9; border-color: var(--border); } 50%, 80% { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff; border-color: var(--accent); } }
.tv-poster { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 14px 26px 1fr 16px 18px; gap: 7px; padding: 14px 40px; }
.tv-poster .z { border-radius: 5px; background: rgba(255, 255, 255, 0.08); animation: zoneBuild 5s var(--ease) infinite both; }
.z1 { grid-column: 1 / -1; width: 40%; } .z2 { grid-column: 1 / -1; background: linear-gradient(90deg, var(--accent), var(--accent-3)) !important; }
.z3 { grid-row: 3; } .z4 { grid-row: 3; background: rgba(34, 211, 238, 0.35) !important; border-radius: 40% 40% 8px 8px !important; }
.z5 { grid-column: 1 / -1; background: rgba(244, 114, 182, 0.5) !important; } .z6 { grid-column: 1 / -1; background: rgba(42, 46, 158, 0.8) !important; }
.z1 { animation-delay: 0s; } .z2 { animation-delay: .25s; } .z3 { animation-delay: .5s; } .z4 { animation-delay: .75s; } .z5 { animation-delay: 1s; } .z6 { animation-delay: 1.25s; }
@keyframes zoneBuild { 0% { opacity: 0; transform: scaleX(.3); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.tv-grid i { border-radius: 9px; background: linear-gradient(135deg, rgba(249, 115, 22, 0.35), rgba(167, 139, 250, 0.35)); animation: shimmer 3s ease-in-out infinite; }
.tv-grid i:nth-child(2) { background: linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(52, 211, 153, 0.3)); animation-delay: -.5s; }
.tv-grid i:nth-child(3) { animation-delay: -1s; } .tv-grid i:nth-child(4) { background: linear-gradient(135deg, rgba(244, 114, 182, 0.35), rgba(251, 191, 36, 0.3)); animation-delay: -1.5s; }
.tv-grid i:nth-child(5) { animation-delay: -2s; } .tv-grid i:nth-child(6) { background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(167, 139, 250, 0.35)); animation-delay: -2.5s; }
@keyframes shimmer { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }

/* Compare */
.compare { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 18px; align-items: stretch; }
.compare-card { border-radius: 20px; padding: 22px; border: 1px solid var(--border); background: var(--surface); }
.compare-card.bad { opacity: .85; }
.compare-card.good { border-color: color-mix(in srgb, var(--ok) 45%, transparent); box-shadow: 0 0 50px -25px var(--ok); }
.compare-tag { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.compare-card.good .compare-tag { color: var(--ok); }
.compare-text { font-size: 15.5px; line-height: 1.65; margin: 10px 0 14px; }
.compare-card.bad .compare-text { font-size: 22px; color: #9aa0b4; font-style: italic; }
.compare-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.compare-card.bad li::before { content: "✕ "; color: #f87171; } .compare-card.good li::before { content: "✓ "; color: var(--ok); }
.compare-arrow { align-self: center; font-size: 34px; color: var(--accent); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* Try it */
.try { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }
.try-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 12px; }
.try-label { width: 70px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.try-output { display: grid; gap: 14px; align-content: start; }
.try-prompt { margin: 0; font-size: 15px; line-height: 1.75; padding: 16px; border-radius: 14px; background: var(--code-bg); border: 1px solid var(--border); min-height: 150px; transition: border-color .4s, box-shadow .4s; }
.try-prompt.flash { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 26px -10px var(--accent); }

/* Features */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature { padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); transition: border-color .3s, transform .3s var(--ease); }
.feature:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.feature-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 18px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 0 22px -8px var(--accent); }
.feature h3 { margin: 14px 0 6px; font-size: 16px; }
.feature p { margin: 0; color: #a9adbf; font-size: 13.5px; }

/* Library preview */
.home-lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.home-lib-item { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; display: block; border: 1px solid var(--border); }
.home-lib-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.home-lib-item:hover img { transform: scale(1.05); }
.home-lib-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: #fff; font-weight: 600; font-size: 14px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 26px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); opacity: .5; }
.timeline li { position: relative; text-align: center; padding: 0 10px; }
.t-num { position: relative; display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font: 700 15px var(--mono); color: #fff; background: var(--bg-2); border: 2px solid var(--accent); box-shadow: 0 0 24px -6px var(--accent); }
.timeline h3 { margin: 14px 0 6px; font-size: 18px; }
.timeline p { margin: 0; color: #a9adbf; font-size: 14px; }

/* CTA */
.home-cta { position: relative; overflow: hidden; max-width: 1100px; margin: 70px auto 40px; padding: 60px 24px; text-align: center; border-radius: 28px; border: 1px solid var(--border-strong); background: var(--surface); }
.cta-glow { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent, rgba(34, 211, 238, 0.35), transparent); animation: spinSlow 14s linear infinite; filter: blur(50px); opacity: .6; pointer-events: none; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.home-cta h2, .home-cta p, .cta-buttons { position: relative; }
.home-cta h2 { margin: 0 0 10px; font-size: clamp(26px, 3.6vw, 44px); letter-spacing: -0.03em; }
.home-cta p { margin: 0 0 22px; color: #c3c7d6; }
.cta-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-buttons .btn { padding: 13px 22px; font-size: 15px; }

/* Responsive */
@media (max-width: 1000px) {
  .home-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .tools, .home-lib { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .try { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .home-hero { padding: 36px 16px 24px; }
  .hero-try { flex-direction: column; }
  .stats { grid-template-columns: 1fr 1fr; padding: 0 16px; }
  .home-section { padding: 48px 16px 6px; }
  .tools, .home-lib, .features, .timeline { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
  .compare { grid-template-columns: 1fr; }
  .compare-arrow { transform: rotate(90deg); justify-self: center; animation: none; }
  .demo-window { min-height: 0; }
  .orb { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .marquee-track { animation: none; } }

/* ══ Sign-in window ═══════════════════════════════════════════ */
.auth-dialog { border: none; padding: 0; background: transparent; color: var(--text); max-width: min(440px, calc(100vw - 24px)); width: 100%; overflow: visible; }
.auth-dialog::backdrop { background: rgba(3, 4, 8, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.auth-dialog[open] .auth-card { animation: authIn .45s var(--ease) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.auth-card { position: relative; overflow: hidden; display: grid; gap: 12px; padding: 30px 26px 22px; border-radius: 24px; background: rgba(12, 14, 22, 0.96); border: 1px solid var(--border-strong); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 60px -30px var(--accent); }
.auth-glow { position: absolute; inset: -60% -30% auto; height: 300px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, transparent), transparent); filter: blur(30px); pointer-events: none; animation: float 14s ease-in-out infinite; }
.auth-card > :not(.auth-glow):not(.auth-close) { position: relative; }
.auth-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; z-index: 2; }
.auth-close:hover { color: var(--text); border-color: var(--border-strong); }
.auth-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 30px -6px var(--accent); }
.auth-title { margin: 4px 0 0; font-size: 24px; letter-spacing: -0.02em; }
.auth-why { margin: -4px 0 0; color: #c3c7d6; font-size: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); }
.auth-tabs button { border: none; background: transparent; color: var(--muted); font: 600 14px var(--font, inherit); padding: 9px; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s; }
.auth-tabs button.active { background: var(--surface-3); color: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); }
.auth-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #c9ccd9; }
.auth-field input { width: 100%; font-size: 16px; }
.auth-dialog[data-mode="login"] .auth-name { display: none; }
.auth-pass { position: relative; display: block; }
.auth-pass input { padding-right: 64px; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--accent-2); font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 8px; }
.auth-error { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: #fecaca; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.35); }
.auth-submit { width: 100%; padding: 13px; font-size: 15px; }
.auth-small { margin: 0; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ══ Sign-in: shared pieces (window and pages), LR-2 ═══════════ */
.auth-google { min-height: 44px; display: flex; justify-content: center; }
.auth-google[hidden], .auth-or[hidden] { display: none; }
.auth-or { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.auth-forgot { font-weight: 500; font-size: 12.5px; color: var(--accent-2); text-decoration: none; }
.auth-forgot:hover, .auth-forgot:focus-visible { text-decoration: underline; }
.auth-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: #c9ccd9; line-height: 1.4; cursor: pointer; }
.auth-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.auth-check a { color: var(--accent-2); }
.auth-dialog[data-mode="login"] .auth-terms, .auth-dialog[data-mode="signup"] .auth-remember, .auth-dialog[data-mode="signup"] .auth-forgot { display: none; }
.auth-strength { font-weight: 500; color: var(--muted); min-height: 1em; }
.auth-strength[data-level="0"] { color: #f87171; } .auth-strength[data-level="1"] { color: var(--warn, #fbbf24); } .auth-strength[data-level="2"], .auth-strength[data-level="3"] { color: var(--ok); }
.auth-done { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: #bbf7d0; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.35); }
.auth-done[hidden], .auth-error[hidden] { display: none; }

/* Pages: form left, brand panel right; one column on phones */
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 34px 24px 50px; min-height: 70vh; align-items: center; }
.auth-pane { display: grid; justify-items: center; }
.auth-card-page { width: 100%; max-width: 440px; }
.auth-form { display: grid; gap: 12px; }
.auth-form .auth-submit { text-align: center; text-decoration: none; }
.auth-side { position: relative; overflow: hidden; align-self: stretch; border-radius: 24px; border: 1px solid var(--border); background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%), rgba(12, 14, 22, 0.7); display: grid; align-items: center; }
.auth-side-inner { padding: 40px 36px; display: grid; gap: 18px; }
.auth-side-kicker { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.auth-side-big { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.auth-side-demo { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); font-size: 13.5px; }
.ad-in { font-family: "JetBrains Mono", monospace; color: #fff; }
.ad-arrow { color: var(--accent); }
.ad-out { color: #c3c7d6; line-height: 1.5; }
.auth-side-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: #d5d8e4; font-size: 14px; }
.auth-side-perks li::before { content: "✓"; color: var(--ok); margin-right: 8px; }
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; padding: 18px 16px 36px; min-height: 0; }
  .auth-side { display: none; }
  .auth-card-page { padding: 26px 18px 20px; }
}

/* "Confirm your email" bar */
.verify-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto; padding: 8px 44px 8px 16px; font-size: 13.5px; color: #fde68a; background: rgba(251, 191, 36, 0.08); border-bottom: 1px solid rgba(251, 191, 36, 0.25); }
.verify-bar b { color: #fff; word-break: break-all; }
.verify-bar .vb-resend { border: 1px solid rgba(251, 191, 36, 0.45); background: transparent; color: #fde68a; border-radius: 99px; padding: 4px 12px; font: 600 12.5px inherit; cursor: pointer; }
.verify-bar .vb-resend:disabled { opacity: .6; cursor: default; }
.verify-bar .vb-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none; background: transparent; color: #fde68a; cursor: pointer; border-radius: 8px; }
.verify-bar button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Account page: Security and sign-in */
#acc-security { display: grid; gap: 18px; padding-top: 6px; }
.sec-ok, .sec-warn { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.sec-ok { color: var(--ok); background: rgba(52, 211, 153, 0.1); }
.sec-warn { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
.sec-sessions h3, .sec-events h3 { margin: 0; font-size: 15px; }
.sec-sessions ul, .sec-events ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sec-sessions li, .sec-events li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; }
.sec-sessions li small, .sec-events li small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sec-events li small { margin: 0; }
.sec-sessions .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* ══ My account page ══════════════════════════════════════════ */
.account-wrap { max-width: 1100px; margin: 0 auto; padding: 30px 24px 50px; display: grid; gap: 18px; min-height: 60vh; align-content: start; }
.account-empty { text-align: center; padding: 40px 24px; display: grid; gap: 12px; justify-items: center; }
.account-empty h1, .account-empty h2 { margin: 0; }
.account-empty p { margin: 0; color: #b7bbcc; max-width: 520px; }
.account-loading { grid-auto-flow: column; justify-content: center; align-items: center; color: var(--muted); }
.account-hero { position: relative; overflow: hidden; padding: 44px 32px; text-align: center; display: grid; justify-items: center; gap: 6px; }
.account-hero > :not(.auth-glow) { position: relative; }
.account-hero h1 { margin: 0; font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -0.03em; }
.account-hero p { color: #c3c7d6; max-width: 580px; margin: 6px 0 10px; }
.account-perks { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; text-align: left; font-size: 14px; color: #d5d8e4; }
.account-perks b { color: var(--accent); margin-right: 6px; }
.account-profile { display: flex; align-items: center; gap: 16px; padding: 20px 22px; flex-wrap: wrap; }
.account-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; font-size: 24px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 34px -8px var(--accent); }
.account-who { flex: 1; min-width: 180px; }
.account-who h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.account-who p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.account-stats { text-align: center; padding: 0 12px; }
.account-stats strong { display: block; font-size: 26px; background: linear-gradient(120deg, #fff, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.account-stats span { color: var(--muted); font-size: 12px; }
.account-import { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); animation: chipIn .5s var(--ease) both; }
.account-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.account-tools input[type=search] { flex: 1; min-width: 220px; font-size: 15px; }
.account-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.account-grid > .account-empty { grid-column: 1 / -1; }
.account-none { color: var(--muted); grid-column: 1 / -1; text-align: center; }
.saved-card { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); animation: chipIn .5s var(--ease) both; animation-delay: var(--d, 0ms); transition: border-color .25s, transform .25s var(--ease), opacity .25s; }
.saved-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.saved-card.removing { opacity: 0; transform: scale(.94); }
.saved-card header { display: flex; align-items: center; gap: 8px; }
.saved-kind { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid; }
.saved-kind.c0 { color: var(--h0); } .saved-kind.c1 { color: var(--h1); } .saved-kind.c2 { color: var(--h2); }
.saved-date { color: var(--muted); font-size: 12px; margin-right: auto; }
.saved-fav { border: none; background: transparent; font-size: 18px; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 8px; transition: color .2s, transform .2s; }
.saved-fav:hover { transform: scale(1.15); }
.saved-fav.on { color: #fbbf24; text-shadow: 0 0 12px rgba(251, 191, 36, 0.6); }
.saved-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.saved-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #b7bbcc; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; white-space: pre-line; }
.saved-text.open { -webkit-line-clamp: unset; display: block; }
.saved-card footer { display: flex; gap: 6px; flex-wrap: wrap; }
.account-settings { padding: 0; }
.account-settings summary { padding: 16px 20px; cursor: pointer; font-weight: 600; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 20px 20px; }
.settings-box { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); }
.settings-box h3 { margin: 0 0 2px; font-size: 15px; }
.settings-box p, .settings-box small { margin: 0; color: var(--muted); font-size: 12.5px; }
.danger-box { border-color: rgba(248, 113, 113, 0.3); }
.btn.danger { color: #fecaca; border-color: rgba(248, 113, 113, 0.45); }
.btn.danger:hover { background: rgba(248, 113, 113, 0.15); }
@media (max-width: 760px) {
  .settings-grid, .account-perks { grid-template-columns: 1fr; }
  .account-wrap { padding: 18px 16px 40px; }
  .account-hero { padding: 32px 18px; }
  .account-grid { grid-template-columns: 1fr; }
}

/* reCAPTCHA v3: the badge is hidden, the required notice is in the footer and the sign-in window */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.recaptcha-note a { color: inherit; }

/* ══ Thumbnail Studio ═════════════════════════════════════════ */
.step-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 8px; font: 700 12px var(--mono); color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); vertical-align: 2px; }
.tp-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.tp-style { position: relative; overflow: hidden; display: grid; gap: 4px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.tp-style:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.tp-style.active { border-color: var(--accent); box-shadow: 0 10px 30px -14px var(--accent), inset 0 0 0 1px var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, transparent), var(--surface-2)); }
.tp-style strong { font-size: 14px; }
.tp-style small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tp-swatch { display: flex; gap: 4px; margin-bottom: 4px; }
.tp-swatch i { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px #ffffff22; }
.tp-templates { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.tp-templates .tpl-card { scroll-snap-align: start; }
.tp-channel-list, .tp-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 14px; font-size: 12px; color: var(--muted); }
.tp-suggest { margin: 6px 0 0; }
.tp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.tp-field { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: #c9ccd9; align-content: start; }
.tp-field:first-child, .tp-field:nth-child(2) { grid-column: 1 / -1; }
.tp-field input { width: 100%; font-size: 15px; }
.tp-field:nth-child(2) input { font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.tp-count { font-weight: 500; color: var(--muted); }
.tp-count.bad { color: #fbbf24; }
.tp-add-split { grid-column: 1 / -1; justify-self: start; }
.tp-ref-actions { flex-wrap: wrap; margin-bottom: 6px; }
.tp-group { margin-top: 16px; }
.tp-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tp-group-head h3 { margin: 0; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tp-group-head small { color: var(--muted); font-size: 12px; opacity: .8; }
.tp-expr { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.tp-emo { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s; }
.tp-emo span { font-size: 26px; line-height: 1; transition: transform .25s var(--ease); }
.tp-emo:hover span { transform: scale(1.18) rotate(-6deg); }
.tp-emo.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); box-shadow: 0 0 22px -10px var(--accent); }
.tp-emo.active span { transform: scale(1.15); }
.chip-emoji { margin-right: 4px; }
.pal-dots { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: -2px; }
.pal-dots i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff33; }
.tp-custom { display: flex; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.tp-custom label { display: flex; align-items: center; gap: 6px; }
.tp-custom input[type=color] { width: 34px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; }
.tp-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tp-switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.tp-series { margin-top: 16px; color: var(--muted); font-weight: 500; }
.tp-faceless { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--border-strong); margin-top: 10px; }
.tp-faceless p { margin: 0; font-size: 13.5px; color: #c9ccd9; }
.tp-quick { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin: 10px 0; }

/* Score */
.tp-score { font: 600 12px var(--mono); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); }
.tp-score b { font-size: 15px; color: var(--text); }
.tp-score.good { border-color: color-mix(in srgb, var(--ok) 50%, transparent); } .tp-score.good b { color: var(--ok); }
.tp-score.ok b { color: #fbbf24; } .tp-score.bad b { color: #f87171; }
.tp-tips { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: #c9ccd9; }
.tp-tips li.warn { color: #fcd34d; } .tp-tips li.ok { color: var(--ok); }

/* Variants */
.tp-variants { display: grid; gap: 10px; }
.tp-variant { display: grid; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--code-bg); }
.tp-variant-text { margin: 4px 0 0; font-size: 12.5px; color: #b7bbcc; line-height: 1.5; }
@media (max-width: 760px) {
  .tp-fields { grid-template-columns: 1fr; }
  .tp-preview-wrap { grid-template-columns: 1fr; }
  .tp-phone { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
  .tp-styles { grid-template-columns: 1fr 1fr; }
  .tp-quick { grid-template-columns: 1fr; }
}
.chip.small { font-size: 12px; padding: 5px 10px; }
.tp-promo { display: block; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: #e6e8f0; font-size: 13.5px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.tp-promo b { color: #fff; margin-right: 6px; }
.tp-promo:hover { border-color: var(--accent); }
.thumb-page .builder, .thumb-page .output, .thumb-page .card { min-width: 0; }
.tp-templates { max-width: 100%; }

/* Live preview: a designed mock of the thumbnail */
.tp-preview-wrap { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.tp-canvas { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); container-type: inline-size; background: #000; box-shadow: 0 18px 40px -20px #000; }
.tp-phone { display: grid; gap: 4px; justify-items: center; font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tp-phone-frame { width: 96px; padding: 4px; border-radius: 10px; background: #000; border: 1px solid var(--border-strong); }
.tp-mini { border-radius: 5px; border: none; box-shadow: none; }
.tpv { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.tpv-bgart { position: absolute; inset: 0; z-index: 0; }
.tpv-glow { position: absolute; bottom: -10%; aspect-ratio: 1; z-index: 1; pointer-events: none; filter: blur(2cqi); }
.tpv-person { position: absolute; bottom: 0; z-index: 3; line-height: 0; }
.tpv-bust { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 1.5cqi 2cqi #000a); }
.tpv-hero { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: 30%; aspect-ratio: 1; z-index: 3; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), radial-gradient(circle, var(--c), #000 75%); box-shadow: 0 0 6cqi var(--c); }
.tpv-hero span { position: absolute; inset: 22%; border-radius: 22%; border: .6cqi solid #fff5; transform: rotate(12deg); }

.tpv-text { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: .8cqi; line-height: .92; }
.tpv-text.at-left { left: 4.5%; top: 50%; transform: translateY(-52%); align-items: flex-start; text-align: left; }
.tpv-text.at-right { right: 4.5%; top: 50%; transform: translateY(-52%); align-items: flex-end; text-align: right; }
.tpv-text.at-top { left: 50%; top: 6%; transform: translateX(-50%); align-items: center; text-align: center; }
.tpv-text.at-center { left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; }
.tpv-text.behind { left: 50%; top: 12%; transform: translateX(-50%); z-index: 2; align-items: center; text-align: center; width: 94%; }
.tpv-mainwrap { display: flex; flex-direction: column; align-items: inherit; gap: .6cqi; }
.tpv-line { display: inline-block; white-space: nowrap; font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; line-height: .95; font-size: 11cqi; }
.tpv-line.fx-outline-shadow { -webkit-text-stroke: .35cqi #000; paint-order: stroke fill; text-shadow: .5cqi .6cqi 0 #000; }
.tpv-line.fx-3d { -webkit-text-stroke: .3cqi #000; paint-order: stroke fill; text-shadow: .25cqi .25cqi 0 #000, .5cqi .5cqi 0 #000, .75cqi .75cqi 0 #000, 1cqi 1cqi 1cqi #0008; }
.tpv-line.fx-stacked { text-shadow: 0 .5cqi 1.2cqi #0009; }
.tpv-line.fx-red-box { background: var(--c1); color: #fff !important; padding: .4cqi 1.4cqi .2cqi; transform: rotate(-2deg); box-shadow: .6cqi .6cqi 0 #0008; }
.tpv-line.fx-red-box:nth-child(even) { transform: rotate(1.5deg); margin-left: 3cqi; }
.tpv-line.fx-brush-box { background: #0c0c0c; padding: .6cqi 2cqi .3cqi; clip-path: polygon(1% 12%, 6% 0, 40% 6%, 70% 0, 97% 8%, 100% 40%, 98% 88%, 70% 100%, 35% 94%, 4% 100%, 0 60%); }
.tpv-line.fx-grunge { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.08' numOctaves='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.08' numOctaves='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); text-shadow: 0 0 2cqi #0008; }
.tpv-line.fx-marker { background: linear-gradient(transparent 52%, var(--c1) 52% 92%, transparent 92%); padding: 0 .6cqi; }
.tpv-line.fx-neon { text-shadow: 0 0 1cqi var(--c1), 0 0 3cqi var(--c1), 0 0 6cqi var(--c1); color: #fff !important; }
.tpv-line.fx-box-label { border: .4cqi solid var(--c1); border-radius: 1.2cqi; padding: .6cqi 1.6cqi .3cqi; background: #000a; box-shadow: 0 0 2.5cqi var(--c1); }
.tpv-line.fx-behind-head { text-shadow: 0 .6cqi 2cqi #0006; }
.tpv-second { font-size: 4cqi; font-weight: 700; text-transform: none; letter-spacing: .01em; white-space: nowrap; }
.tpv-label { font: 800 2.6cqi var(--font, sans-serif); letter-spacing: .06em; color: #fff; padding: .6cqi 1.4cqi; border-radius: .6cqi; text-transform: uppercase; white-space: nowrap; align-self: inherit; }

.tpv-pill { position: absolute; top: 5%; z-index: 5; font: 800 2.8cqi sans-serif; color: #fff; padding: .8cqi 2.2cqi; border-radius: 99px; text-transform: uppercase; box-shadow: 0 .6cqi 1.6cqi #0007; }
.tpv-pill.l { left: 4%; } .tpv-pill.r { right: 4%; }
.tpv-side { position: absolute; bottom: 14%; z-index: 5; font-size: 4.4cqi; font-weight: 900; color: #fff; padding: .8cqi 1.8cqi .5cqi; border-radius: 1cqi; text-transform: uppercase; max-width: 36%; white-space: nowrap; background: #000c; border: .35cqi solid var(--b); box-shadow: 0 0 2.5cqi var(--b); }
.tpv-side.l { left: 4%; } .tpv-side.r { right: 4%; }
.tpv-vs { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 6; font: 900 9cqi Impact, sans-serif; color: #ffd60a; -webkit-text-stroke: .4cqi #000; paint-order: stroke fill; text-shadow: 0 0 3cqi #ff3b00; }

/* Background art */
.tpv-polaroid { position: absolute; aspect-ratio: .82; background: #f4f1ea; padding: 4% 4% 14%; box-shadow: .6cqi .8cqi 1.4cqi #000a; }
.tpv-polaroid i { display: block; width: 100%; height: 100%; filter: grayscale(1) contrast(1.2); }
.tpv-polaroid b { position: absolute; left: 50%; top: -4%; width: 1.6cqi; height: 1.6cqi; margin-left: -.8cqi; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6b6b, #b00010); box-shadow: 0 .3cqi .5cqi #0008; }
.tpv-string { position: absolute; inset: 0; width: 100%; height: 100%; }
.tpv-paper { position: absolute; background: #e8e3d8; padding: 3% 4%; display: grid; gap: 3%; align-content: start; filter: grayscale(1); box-shadow: 0 0 3cqi #000; }
.tpv-paper span { height: 6%; min-height: 3px; background: repeating-linear-gradient(90deg, #555 0 30%, transparent 30% 34%); opacity: .55; }
.tpv-paper span:first-child { height: 12%; background: #222; opacity: .8; }
.tpv-strip { position: absolute; left: -2%; width: 60%; height: 9%; transform: rotate(-3deg); }
.tpv-crowd i { position: absolute; width: 13%; aspect-ratio: .8; background: radial-gradient(circle at 50% 30%, #0b1416 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #0b1416 0 58%, transparent 59%); filter: blur(.3cqi); opacity: .95; }
.tpv-bill { position: absolute; width: 9%; aspect-ratio: 2.2; border-radius: .4cqi; background: linear-gradient(90deg, #2f7d32, #5fbf63 50%, #2f7d32); box-shadow: inset 0 0 0 .3cqi #1b4d1e, 0 .4cqi .8cqi #0008; }
.tpv-chart { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 1cqi currentColor); }
.tpv-spark { position: absolute; width: .8cqi; height: .8cqi; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 1.2cqi #ff8a00; }

/* Accents */
.tpv-arrow { position: absolute; z-index: 6; width: 13%; left: 41%; top: 30%; filter: drop-shadow(0 .4cqi .6cqi #000a); }
.tpv-arrow.up { left: 8%; top: auto; bottom: 8%; }
.tpv-ring { position: absolute; z-index: 6; width: 16%; aspect-ratio: 1.2; right: 30%; top: 14%; border: .7cqi solid #ff1a1a; border-radius: 50%; transform: rotate(-12deg); }
.tpv-q { position: absolute; z-index: 6; right: 38%; top: 6%; font: 900 12cqi Impact, sans-serif; text-shadow: 0 0 3cqi currentColor; }
.tpv-q.s1 { font-size: 4cqi; left: 10%; right: auto; top: 12%; color: #fff; } .tpv-q.s2 { font-size: 3cqi; right: 12%; top: 70%; color: #fff; }
.tpv-cash { position: absolute; z-index: 5; bottom: -2%; left: 34%; width: 18%; height: 12%; border-radius: .6cqi; background: repeating-linear-gradient(0deg, #2f7d32 0 .8cqi, #6cc56f .8cqi 1.2cqi); box-shadow: 0 0 2cqi #0009; transform: rotate(-4deg); }
.tpv-cash.b { left: 50%; width: 14%; transform: rotate(6deg); bottom: -4%; }
.tpv-sub { position: absolute; z-index: 6; left: 4.5%; bottom: 7%; font: 800 2.4cqi sans-serif; color: #fff; background: #ff0000; padding: .7cqi 1.8cqi; border-radius: 99px; }
.tpv-scribble { position: absolute; z-index: 2; left: 0; width: 100%; top: 60%; height: 14%; }
.tpv-grain { position: absolute; inset: 0; z-index: 7; opacity: .22; mix-blend-mode: overlay; pointer-events: none; background-size: 30% auto; }
.tpv-vig { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgb(0 0 0 / var(--v)) 100%); }
.tpv-time { position: absolute; right: 2%; bottom: 3%; z-index: 9; font: 700 2.5cqi var(--mono); color: #fff; background: #000c; padding: .3cqi 1cqi; border-radius: .8cqi; }
@media (max-width: 760px) { .tp-preview-wrap { grid-template-columns: 1fr; } }

/* ══ Graphics Studio ══════════════════════════════════════════ */
.gs-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.gs-sizes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.gs-sizes > span { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
.gs-styles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-top: 0; }
.gs-styles .tp-style { padding: 10px; } .gs-styles .tp-style strong { font-size: 13px; }
.gs-span { grid-column: 1 / -1; margin-bottom: 0; }
.tp-field.wide { grid-column: 1 / -1; }
.tp-field.big input { font-size: 18px; font-weight: 700; }
.tp-field textarea { width: 100%; font-size: 14px; resize: vertical; }
.gs-classic { margin: 10px 0 0; }
.gs-stage { display: grid; place-items: center; padding: 14px; border-radius: 14px; background: repeating-conic-gradient(#ffffff06 0 25%, transparent 0 50%) 0 0/18px 18px, #0b0c12; border: 1px solid var(--border); }
.gs-canvas { position: relative; width: 100%; border-radius: 6px; overflow: hidden; container-type: inline-size; box-shadow: 0 20px 50px -20px #000; background: #fff; }
.gs-canvas.k-carousel { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }

.gsv { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.gsv > * { z-index: 2; }
.gsv-text { position: absolute; display: flex; flex-direction: column; gap: 1.6cqmin; z-index: 4; }
.gsv-text.at-left { left: 6%; top: 50%; transform: translateY(-50%); width: 46%; align-items: flex-start; }
.gsv-text.at-below { left: 6%; right: 6%; top: 54%; bottom: 16%; justify-content: center; }
.gsv-text.at-bottom { left: 6%; right: 6%; bottom: 14%; }
.gsv-text.at-center { left: 8%; right: 8%; top: 50%; transform: translateY(-50%); align-items: center; text-align: center; }
.gsv-text.at-top { left: 7%; right: 7%; top: 8%; bottom: 14%; }
.gsv-text.on-color { width: 42%; }
.gsv-text.quote .gsv-h { font-style: italic; }
.gsv-brand { font: 800 3cqmin 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gsv-h { font-size: 9cqmin; font-weight: 900; line-height: 1.02; letter-spacing: -.01em; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.gsv-h em { font-style: normal; }
.gsv-num { font: 900 12cqmin 'Anton', Impact, sans-serif; line-height: .9; }
.gsv-sub { font: 500 3.6cqmin 'Montserrat', sans-serif; line-height: 1.3; }
.gsv-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqmin; font: 600 3.2cqmin 'Montserrat', sans-serif; }
.gsv-pts li { display: flex; align-items: center; gap: 1.6cqmin; }
.gsv-pts b { flex: none; width: 2.6cqmin; height: 2.6cqmin; border-radius: 50%; }
.gsv-stats { display: grid; grid-auto-flow: column; gap: 3cqmin; }
.gsv-stats span { display: grid; gap: .6cqmin; }
.gsv-stats b { font: 900 7cqmin 'Anton', Impact, sans-serif; line-height: 1; }
.gsv-stats small { font: 600 2.6cqmin 'Montserrat', sans-serif; }
.gsv-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqmin; font: 600 3.4cqmin 'Montserrat', sans-serif; width: 100%; }
.gsv-menu li { display: flex; align-items: baseline; gap: 1.4cqmin; }
.gsv-menu i { flex: 1; border-bottom: .3cqmin dotted; opacity: .6; }
.gsv-cta { align-self: flex-start; font: 800 3.2cqmin 'Montserrat', sans-serif; padding: 1.6cqmin 3.4cqmin; border-radius: 99px; box-shadow: 0 1cqmin 2.4cqmin #0004; }
.at-center .gsv-cta { align-self: center; }
.gsv-badge { position: absolute; z-index: 6; right: 6%; top: 6%; width: 20cqmin; aspect-ratio: 1; display: grid; place-items: center; text-align: center; font: 900 3.6cqmin 'Montserrat', sans-serif; line-height: 1.05; padding: 2cqmin; clip-path: polygon(50% 0, 61% 12%, 77% 6%, 80% 22%, 96% 26%, 89% 41%, 100% 54%, 86% 63%, 89% 80%, 72% 80%, 63% 95%, 50% 86%, 37% 95%, 28% 80%, 11% 80%, 14% 63%, 0 54%, 11% 41%, 4% 26%, 20% 22%, 23% 6%, 39% 12%); transform: rotate(-8deg); }
.gsv-foot { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 2.4cqmin 6%; font: 600 2.8cqmin 'Montserrat', sans-serif; display: flex; align-items: center; justify-content: space-between; gap: 2cqmin; }
.gsv-qr { width: 7cqmin; aspect-ratio: 1; background: conic-gradient(#000 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0/2.4cqmin 2.4cqmin; border: .6cqmin solid #fff; }
.gsv-handle { position: absolute; z-index: 6; left: 6%; bottom: 4%; font: 700 2.6cqmin 'Montserrat', sans-serif; }
.gsv-quote { position: absolute; left: 6%; top: 0; font: 900 40cqmin Georgia, serif; line-height: 1; opacity: .9; z-index: 1; }

.gsv-photo { position: absolute; z-index: 3; overflow: hidden; background: #ccc; }
.gsv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsv-photo i { position: absolute; inset: 0; display: block; font-style: normal; }
.gsv-photo.right { right: 5%; top: 14%; width: 40%; height: 72%; }
.gsv-photo.framed { right: 4%; top: 18%; width: 44%; aspect-ratio: 1; height: auto; }
.gsv-photo.top { left: 0; right: 0; top: 0; height: 50%; }
.gsv-photo.full { inset: 0; }
.gsv-photo.diag { right: 0; top: 0; width: 56%; height: 100%; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.gsv-photo.center-small { left: 50%; top: 9%; width: 30%; aspect-ratio: 1; transform: translateX(-50%); }
.gsv-photo.fr-circle { border-radius: 50%; box-shadow: 0 0 0 1.8cqmin var(--ring); }
.gsv-photo.fr-rounded { border-radius: 4cqmin; box-shadow: 0 2cqmin 4cqmin #0005; }
.gsv-photo.fr-arch { border-radius: 50cqmin 50cqmin 2cqmin 2cqmin; }
.gsv-photo.fr-hexagon { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.gsv-photo.fr-diagonal { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); }
.gsv-photo.fr-blob { border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; }
.gsv-photo.fr-polaroid { padding: 2cqmin 2cqmin 7cqmin; background: #fff; transform: rotate(-4deg); box-shadow: 0 2cqmin 4cqmin #0006; }
.gsv-photo.fr-polaroid img, .gsv-photo.fr-polaroid i { position: relative; height: 100%; }
.gsv-photo.top.fr-circle, .gsv-photo.full.fr-circle, .gsv-photo.diag.fr-circle, .gsv-photo.top.fr-arch, .gsv-photo.full.fr-arch, .gsv-photo.full.fr-blob, .gsv-photo.top.fr-blob { border-radius: 0; box-shadow: none; }
.gsv-phphoto { background: radial-gradient(circle at 50% 36%, #e2b48f 0 13%, transparent 14%), radial-gradient(ellipse at 50% 92%, #2d3a5a 0 34%, transparent 35%), linear-gradient(160deg, #cfd8e3, #8fa2b8); }
.gsv-ph3d { background: radial-gradient(circle at 38% 34%, #fff9, transparent 18%), radial-gradient(circle at 50% 50%, var(--a) 0 32%, transparent 33%), radial-gradient(circle at 72% 72%, var(--b) 0 16%, transparent 17%), linear-gradient(160deg, #f3efff, #dcd6f7); }
.gsv-phill { background: radial-gradient(circle at 50% 40%, #ffd9b8 0 12%, transparent 13%), radial-gradient(ellipse at 50% 90%, var(--a) 0 32%, transparent 33%), radial-gradient(circle at 20% 20%, var(--b) 0 10%, transparent 11%), #fff3e3; }
.gsv-phicons { display: grid !important; place-items: center; font-size: 9cqmin; background: #f5f5f5; letter-spacing: 1cqmin; }
.gsv-fullphoto { position: absolute; inset: 0; z-index: 1; }
.gsv-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, #0000 30%, #000c); }
.gsv-diag { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 60%; clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); }

/* decor */
.gsv-dg { position: absolute; z-index: 1; width: 70%; height: 30%; }
.gsv-dg.a { right: -20%; top: -8%; transform: rotate(-24deg); }
.gsv-dg.b { left: -25%; bottom: -10%; transform: rotate(-24deg); height: 18%; }
.gsv-circle { position: absolute; z-index: 1; border-radius: 50%; }
.gsv-circle.a { width: 42%; aspect-ratio: 1; right: -12%; bottom: -12%; opacity: .9; }
.gsv-circle.b { width: 26%; aspect-ratio: 1; left: -8%; top: 10%; border: 2cqmin solid; }
.gsv-wave { position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 22%; }
.gsv-blob { position: absolute; z-index: 1; filter: blur(.4cqmin); border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; opacity: .8; }
.gsv-blob.a { width: 46%; aspect-ratio: 1.1; right: -14%; top: -12%; } .gsv-blob.b { width: 34%; aspect-ratio: 1; left: -10%; bottom: -10%; }
.gsv-dots { position: absolute; z-index: 1; right: 6%; bottom: 20%; width: 18%; aspect-ratio: 1.4; background: radial-gradient(var(--c) 22%, transparent 24%) 0 0/20% 28%; opacity: .6; }
.gsv-lines { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, var(--c) 1px, transparent 1px) 0 0/12.5% 100%; }
.gsv-frame { position: absolute; z-index: 1; inset: 3.5%; border: .5cqmin solid; }
.gsv-sun { position: absolute; z-index: 1; width: 90%; aspect-ratio: 1; left: 5%; bottom: -55%; border-radius: 50%; background: repeating-conic-gradient(var(--a) 0 7deg, var(--b) 7deg 14deg); opacity: .45; }
.gsv-leaf { position: absolute; z-index: 1; width: 14%; } .gsv-leaf.a { left: 2%; bottom: 0; } .gsv-leaf.b { right: 3%; top: 2%; transform: rotate(160deg); }
.gsv-spark { position: absolute; z-index: 3; font-size: 4cqmin; color: #fff; } .gsv-spark.a { left: 8%; top: 8%; } .gsv-spark.b { right: 10%; top: 30%; font-size: 3cqmin; } .gsv-spark.c { left: 40%; bottom: 8%; }
.gsv-sphere { position: absolute; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, var(--c) 45%, #0005); }
.gsv-sphere.a { width: 16%; aspect-ratio: 1; right: 8%; top: 8%; } .gsv-sphere.b { width: 9%; aspect-ratio: 1; left: 6%; bottom: 18%; }
.gsv-doodle { position: absolute; z-index: 3; width: 18%; left: 6%; top: 6%; }

/* carousel */
.gsv.car { position: relative; inset: auto; overflow-x: auto; padding: 2px 0 12px; }
.gsv-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6px * (min(var(--n), 3) - 1)) / min(var(--n), 3)); gap: 6px; }
.gsv-slide { position: relative; aspect-ratio: var(--r); border-radius: 4px; overflow: hidden; container-type: inline-size; box-shadow: 0 10px 24px -14px #000; }
.gsv-slide .gsv-text.at-center { left: 9%; right: 9%; }
.gsv-slide .gsv-h { font-size: 11cqmin; }
.gsv-slide .gsv-num { font-size: 16cqmin; }
.gsv-flow { position: absolute; top: 0; bottom: 0; z-index: 1; background: radial-gradient(ellipse 12% 60% at 10% 90%, var(--c), transparent 70%), radial-gradient(ellipse 14% 50% at 45% 10%, var(--c), transparent 70%), radial-gradient(ellipse 12% 60% at 85% 85%, var(--c), transparent 70%), linear-gradient(170deg, transparent 47%, color-mix(in srgb, var(--c) 50%, transparent) 47.5% 49%, transparent 49.5%); opacity: .55; }
.gsv-swipe { position: absolute; z-index: 5; right: 6%; bottom: 5%; font: 800 4.5cqmin 'Montserrat', sans-serif; }
.gsv-dotsbar { position: absolute; z-index: 5; left: 50%; bottom: 5%; transform: translateX(-50%); display: flex; gap: 1.2cqmin; }
.gsv-dotsbar i { width: 1.8cqmin; height: 1.8cqmin; border-radius: 50%; }
.gsv-more { display: block; text-align: right; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* mockup */
.gsv.mock .gsv-prodwrap { position: absolute; z-index: 4; left: 50%; bottom: 23%; width: 34%; transform: translateX(-50%); }
.gsv-prodwrap.sc-floating { bottom: 30%; transform: translateX(-50%) rotate(-10deg); }
.gsv-prodwrap.sc-flatlay { bottom: 30%; transform: translateX(-50%) rotate(-30deg); }
.gsv-prod { width: 100%; height: auto; display: block; filter: drop-shadow(1.2cqmin 2cqmin 1.6cqmin #0004); }
.gsv-prodimg { width: 100%; height: auto; display: block; border-radius: 2cqmin; filter: drop-shadow(1.2cqmin 2cqmin 1.6cqmin #0005); }
.gsv-podium { position: absolute; z-index: 3; left: 50%; bottom: 10%; width: 52%; height: 15%; transform: translateX(-50%); background: linear-gradient(180deg, color-mix(in srgb, var(--p) 80%, #fff) 0 28%, var(--p) 28%); border-radius: 50% / 28%; box-shadow: 0 2cqmin 3cqmin #0003; }
.gsv-podium::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56%; border-radius: 50%; background: color-mix(in srgb, var(--p) 70%, #fff); }
.gsv-podium.tall { height: 20%; width: 44%; left: 44%; }
.gsv-block { position: absolute; z-index: 2; right: 10%; bottom: 10%; width: 20%; height: 30%; background: var(--p); box-shadow: inset -1.4cqmin 0 0 #0002; }
.gsv-floor { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 26%; background: var(--p); }
.gsv-floatshadow { position: absolute; z-index: 2; left: 50%; bottom: 12%; width: 30%; height: 4%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(#0004, transparent 70%); }
.gsv-splash { position: absolute; z-index: 3; left: 50%; bottom: 14%; width: 70%; height: 46%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, #ffffffcc, #bfe7ff88 40%, transparent 70%); border-radius: 50% 50% 0 0; filter: blur(.2cqmin); }
.gsv-fabric { position: absolute; z-index: 2; left: -10%; right: -10%; bottom: 0; height: 40%; background: repeating-radial-gradient(ellipse at 30% 120%, var(--p) 0 6%, color-mix(in srgb, var(--p) 70%, #fff) 9%, var(--p) 13%); }
.gsv-rocks, .gsv-stone { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 26%; background: radial-gradient(ellipse at 30% 30%, #9a948a, #6b665e); }
.gsv-rocks { clip-path: polygon(0 40%, 18% 10%, 34% 30%, 52% 0, 70% 26%, 86% 6%, 100% 30%, 100% 100%, 0 100%); }
.gsv-palm { position: absolute; z-index: 3; width: 26%; } .gsv-palm.a { left: 6%; bottom: 14%; transform: rotate(-12deg); } .gsv-palm.b { right: 6%; bottom: 14%; transform: rotate(16deg) scaleX(-1); width: 22%; }
.gsv-leafshadow { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .22; mix-blend-mode: multiply; background: repeating-linear-gradient(115deg, #000 0 2.5%, transparent 2.5% 7%), radial-gradient(ellipse at 20% 20%, #000a, transparent 50%); -webkit-mask-image: radial-gradient(ellipse at 25% 30%, #000, transparent 60%); mask-image: radial-gradient(ellipse at 25% 30%, #000, transparent 60%); }
.gsv-rimglow { position: absolute; z-index: 3; left: 50%; bottom: 20%; width: 40%; height: 60%; transform: translateX(-50%); background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 45%, transparent), transparent 65%); }
.gsv-fruit { position: absolute; z-index: 5; width: 12%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#ffb547 0 26deg, #fff4d6 26deg 30deg); box-shadow: 0 0 0 .9cqmin #ff9f1c, 0 1cqmin 1.4cqmin #0003; }
.gsv-fruit.a { left: 20%; bottom: 10%; } .gsv-fruit.b { right: 18%; bottom: 13%; width: 9%; }
.gsv-flower { position: absolute; z-index: 5; font-size: 7cqmin; color: #f6a6b2; } .gsv-flower.a { left: 18%; bottom: 12%; } .gsv-flower.b { right: 18%; bottom: 16%; font-size: 5cqmin; }
.gsv-drop { position: absolute; z-index: 5; width: 2.2cqmin; aspect-ratio: .8; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff, #9fd8ff 60%); }
.gsv-drop.a { left: 30%; top: 40%; } .gsv-drop.b { right: 28%; top: 34%; } .gsv-drop.c { right: 34%; top: 54%; width: 1.6cqmin; }
.gsv-ice { position: absolute; z-index: 5; width: 9%; aspect-ratio: 1; border-radius: 1.4cqmin; background: linear-gradient(135deg, #ffffffcc, #cdeeffaa); box-shadow: inset 0 0 1cqmin #fff; transform: rotate(18deg); } .gsv-ice.a { left: 22%; bottom: 11%; } .gsv-ice.b { right: 22%; bottom: 13%; transform: rotate(-12deg); }
.gsv-pebble { position: absolute; z-index: 5; width: 8%; aspect-ratio: 1.4; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8d2c6, #8f887c); } .gsv-pebble.a { left: 24%; bottom: 10%; } .gsv-pebble.b { right: 26%; bottom: 11%; width: 6%; }
.gsv-smoke { position: absolute; z-index: 3; left: 10%; right: 10%; bottom: 10%; height: 40%; background: radial-gradient(ellipse at 40% 80%, #ffffff30, transparent 60%), radial-gradient(ellipse at 70% 70%, #ffffff22, transparent 60%); filter: blur(1cqmin); }
.gsv-mhead { position: absolute; z-index: 6; left: 0; right: 0; top: 7%; text-align: center; font-size: 7cqmin; font-weight: 900; display: grid; justify-items: center; gap: 1.4cqmin; }
.gsv-mhead small { font: 800 3cqmin 'Montserrat', sans-serif; padding: 1cqmin 2.6cqmin; border-radius: 99px; }

/* logo */
.gsv.logo { display: grid; place-items: center; }
.gsv-logo { display: flex; align-items: center; gap: 3cqmin; max-width: 84%; }
.gsv-logo.emblem, .gsv-logo.mascot, .gsv-logo.abstract, .gsv-logo.monogram { flex-direction: column; text-align: center; }
.gsv-lmark { flex: none; display: grid; place-items: center; }
.gsv-lmark.combo { width: 16cqmin; height: 16cqmin; border-radius: 4cqmin; font: 900 10cqmin 'Poppins', sans-serif; }
.gsv-lmark.mono { width: 26cqmin; height: 26cqmin; border-radius: 50%; border: 1.4cqmin solid; font: 800 11cqmin 'Playfair Display', serif; }
.gsv-lmark.emblem { width: 50cqmin; aspect-ratio: 1; border-radius: 50%; padding: 6cqmin; box-shadow: inset 0 0 0 1.6cqmin #0003, inset 0 0 0 2.6cqmin currentColor; text-align: center; }
.gsv-lmark.emblem span { font: 900 7cqmin 'Shrikhand', serif; line-height: 1; }
.gsv-lmark.emblem small { font: 700 2.8cqmin 'Montserrat', sans-serif; letter-spacing: .2em; margin-top: 1.4cqmin; }
.gsv-lmark.mascot { width: 24cqmin; height: 24cqmin; border-radius: 50%; font-size: 7cqmin; color: #fff; }
.gsv-lmark.abs { width: 22cqmin; height: 22cqmin; background: conic-gradient(var(--a) 0 25%, var(--b) 0 50%, var(--a) 0 75%, var(--b) 0); border-radius: 30%; transform: rotate(45deg); }
.gsv-lname { font-size: 12cqmin; font-weight: 900; line-height: 1; white-space: nowrap; }
.gsv-ltag { font: 600 3.2cqmin 'Montserrat', sans-serif; letter-spacing: .25em; text-transform: uppercase; margin-top: 1cqmin; }
@media (max-width: 760px) { .gs-cats { grid-template-columns: repeat(4, 1fr); } .gs-styles { grid-template-columns: repeat(3, 1fr); } }
.gsv-photo.full { clip-path: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; padding: 0 !important; }
.gsv-photo.top:not(.fr-diagonal) { clip-path: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; padding: 0 !important; }
.gsv.mock .gsv-prodwrap { width: 40%; }
.gs-canvas:not(.k-carousel) { container-type: size; }
.gsv-slide { container-type: size; }
.gsv-text.at-left, .gsv-text.at-center, .gsv-text.at-bottom { max-height: 88%; }
.gsv-lwords { display: grid; gap: 1cqmin; min-width: 0; }
.gsv-logo.monogram .gsv-lwords, .gsv-logo.mascot .gsv-lwords, .gsv-logo.abstract .gsv-lwords { justify-items: center; }
@media (max-width: 760px) { .gs-cats { grid-template-columns: repeat(3, 1fr); } }

/* ══ Mockup Studio ════════════════════════════════════════════ */
.ms-cats { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ms-custom { margin-top: 10px; }
.ms-styles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ms-styles .tp-style { padding: 10px 12px; } .ms-styles .tp-style strong { font-size: 13px; }
.ms-uploads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ms-slot { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 14px; border: 1px dashed var(--border-strong); background: var(--surface-2); }
.ms-slot.slot-product { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.ms-slot-head { display: grid; gap: 2px; } .ms-slot-head strong { font-size: 13px; } .ms-slot-head small { font-size: 11.5px; color: var(--muted); }
.ms-slot-body { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-thumb { position: relative; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-strong); }
.ms-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ms-thumb button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #000b; color: #fff; font-size: 10px; cursor: pointer; }
.ms-drop { width: 58px; height: 58px; border-radius: 10px; border: 1px dashed var(--border-strong); display: grid; place-items: center; align-content: center; cursor: pointer; color: var(--muted); transition: border-color .2s, color .2s; }
.ms-drop span { font-size: 20px; line-height: 1; } .ms-drop small { font-size: 10px; }
.ms-drop:hover { border-color: var(--accent); color: var(--text); }
.ms-modelbox { margin: 14px 0 4px; padding: 12px 14px 14px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--accent-2) 5%, var(--surface-2)); }
.ms-modelbox > .tp-group-head h3 { color: var(--accent-2); }
.ms-switches { flex-wrap: wrap; gap: 14px; margin: 4px 0 10px; }
.ms-quick { grid-template-columns: 1fr 1fr; }
.ms-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .ms-uploads { grid-template-columns: 1fr; } .ms-cats { grid-template-columns: repeat(3, 1fr); } .ms-quick { grid-template-columns: 1fr; } }

.msv { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.msv-bg { position: absolute; inset: 0; }
.msv-prod { position: absolute; z-index: 4; left: 50%; bottom: 20%; width: 46cqmin; transform: translateX(-50%); }
.msv-prod.float { bottom: 28%; transform: translateX(-50%) rotate(-12deg); }
.msv-prod.in-hand { bottom: 30%; width: 34cqmin; transform: translateX(-30%) rotate(-6deg); }
.msv-prod.hanger { top: 16%; bottom: auto; width: 60cqmin; }
.msv-prod.ghost { top: 10%; bottom: auto; width: 66cqmin; filter: drop-shadow(0 3cqmin 4cqmin #0003); }
.msv-prod.folded { width: 54cqmin; bottom: 22%; transform: translateX(-50%) scaleY(.55); }
.msv-prod.detail { width: 120cqmin; bottom: -30%; }
.msv-prod.flat { bottom: 26%; width: 50cqmin; transform: translateX(-50%) rotate(-14deg); }
.msv-prod svg, .msv-prodsmall svg { width: 100%; height: auto; display: block; filter: drop-shadow(1.2cqmin 2cqmin 1.6cqmin #0004); }
.msv-photo { width: 100%; height: auto; display: block; border-radius: 2cqmin; filter: drop-shadow(1.4cqmin 2.4cqmin 2cqmin #0005); }
.msv-prodsmall { position: absolute; z-index: 6; right: 14%; bottom: 30%; width: 22cqmin; transform: rotate(-8deg); }
.msv-prodsmall.ugc { right: auto; left: 54%; bottom: 40%; width: 20cqmin; }
.msv-figure { position: absolute; z-index: 4; left: 50%; bottom: 2%; height: 92%; transform: translateX(-50%); }
.msv-figure svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 2cqmin 3cqmin #0004); }
.msv-figure.pose-walking { transform: translateX(-50%) rotate(2deg); }
.msv-figure.pose-turning svg { transform: rotate(-3deg); }
.msv-figure.ugc { height: 70%; left: 40%; }
.msv-face { position: absolute; left: 50%; top: 2.2%; width: 23%; aspect-ratio: .85; transform: translateX(-50%); border-radius: 46%; object-fit: cover; box-shadow: 0 0 0 .4cqmin #fff8; }
.msv-hand { position: absolute; z-index: 5; left: 0; bottom: 18%; width: 70cqmin; }
.msv-hand svg { width: 100%; height: auto; display: block; }
.msv-hanger { position: absolute; z-index: 5; left: 50%; top: 9%; width: 40cqmin; transform: translateX(-50%); }
.msv-surface { position: absolute; z-index: 3; left: 50%; bottom: 10%; width: 64cqmin; height: 16cqmin; transform: translateX(-50%); background: linear-gradient(180deg, color-mix(in srgb, var(--p) 75%, #fff) 0 30%, var(--p) 30%); border-radius: 50% / 30%; box-shadow: 0 2cqmin 3cqmin #0003; }
.msv-surface.s-plinth, .msv-surface.s-stacked { border-radius: 1cqmin; height: 22cqmin; width: 54cqmin; }
.msv-surface.s-fluted-pedestal { background: repeating-linear-gradient(90deg, var(--p) 0 3cqmin, color-mix(in srgb, var(--p) 70%, #fff) 3cqmin 4cqmin); border-radius: 1cqmin; height: 26cqmin; width: 40cqmin; }
.msv-surface.s-marble, .msv-surface.s-wood, .msv-surface.s-terrazzo, .msv-surface.s-sand, .msv-surface.s-moss, .msv-surface.s-mirror, .msv-surface.s-water, .msv-surface.s-fabric, .msv-surface.s-rock { left: 0; width: 100%; bottom: 0; height: 26%; border-radius: 0; transform: none; }
.msv-surface.s-marble { background: linear-gradient(115deg, #0000 40%, #0001 41%, #0000 43%), #f1f0ec; }
.msv-surface.s-wood { background: repeating-linear-gradient(90deg, #a87b52 0 3%, #9a6e47 3% 5%, #b08356 5% 9%); }
.msv-surface.s-sand { background: #e3cfa6; } .msv-surface.s-moss { background: radial-gradient(#6f9a4a 30%, #4e7a34); } .msv-surface.s-mirror { background: linear-gradient(180deg, #ffffff55, #0002); }
.msv-surface.s-water { background: repeating-radial-gradient(ellipse at 50% 0, #9fd3ef 0 4%, #c9e8f7 4% 8%); } .msv-surface.s-fabric { background: repeating-radial-gradient(ellipse at 30% 120%, var(--p) 0 6%, color-mix(in srgb, var(--p) 70%, #fff) 9%, var(--p) 13%); }
.msv-surface.s-rock { background: radial-gradient(ellipse at 30% 30%, #9a948a, #6b665e); clip-path: polygon(0 40%, 18% 10%, 34% 30%, 52% 0, 70% 26%, 86% 6%, 100% 30%, 100% 100%, 0 100%); }
.msv-surface.s-terrazzo { background: radial-gradient(circle at 20% 30%, #c47a55 0 2%, transparent 3%) 0 0/12% 30%, #ece6dc; }
.msv-floatshadow { position: absolute; z-index: 2; left: 50%; bottom: 12%; width: 40cqmin; height: 5cqmin; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(#0005, transparent 70%); }
.msv-leafshadow { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: .2; mix-blend-mode: multiply; background: repeating-linear-gradient(115deg, #000 0 2.5%, transparent 2.5% 7%); -webkit-mask-image: radial-gradient(ellipse at 25% 30%, #000, transparent 60%); mask-image: radial-gradient(ellipse at 25% 30%, #000, transparent 60%); }
.msv-spot { position: absolute; z-index: 1; left: 50%; top: 0; width: 70cqmin; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%); }
.msv-leaf { position: absolute; z-index: 5; width: 26cqmin; } .msv-leaf.a { left: 4%; bottom: 10%; transform: rotate(-14deg); } .msv-leaf.b { right: 6%; bottom: 12%; transform: rotate(16deg) scaleX(-1); width: 20cqmin; }
.msv-fl { position: absolute; z-index: 6; font-size: 7cqmin; color: #f3a3b4; } .msv-fl.a { left: 18%; bottom: 12%; } .msv-fl.b { right: 20%; bottom: 15%; font-size: 5cqmin; }
.msv-fruit { position: absolute; z-index: 6; width: 13cqmin; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#ffb547 0 26deg, #fff4d6 26deg 30deg); box-shadow: 0 0 0 .9cqmin #ff9f1c; } .msv-fruit.a { left: 14%; bottom: 10%; } .msv-fruit.b { right: 14%; bottom: 14%; width: 10cqmin; }
.msv-ice { position: absolute; z-index: 6; width: 10cqmin; aspect-ratio: 1; border-radius: 1.4cqmin; background: linear-gradient(135deg, #fffc, #cdeeffaa); transform: rotate(18deg); } .msv-ice.a { left: 24%; bottom: 9%; } .msv-ice.b { right: 24%; bottom: 11%; transform: rotate(-12deg); }
.msv-drop { position: absolute; z-index: 6; width: 2.4cqmin; aspect-ratio: .8; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff, #9fd8ff 60%); } .msv-drop.a { left: 30%; top: 36%; } .msv-drop.b { right: 28%; top: 30%; } .msv-drop.c { right: 34%; top: 52%; }
.msv-smoke { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8%; height: 40%; background: radial-gradient(ellipse at 40% 80%, #ffffff40, transparent 60%), radial-gradient(ellipse at 70% 70%, #ffffff2a, transparent 60%); filter: blur(1.4cqmin); }
.msv-burst { position: absolute; z-index: 3; left: 50%; top: 48%; width: 80cqmin; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--c) 0 3%, transparent 4%) 0 0/16% 16%; -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 62%); mask-image: radial-gradient(circle, #000 20%, transparent 62%); opacity: .6; }
.msv-beans { position: absolute; z-index: 6; left: 10%; right: 10%; bottom: 6%; height: 10%; background: radial-gradient(ellipse, #5a3a24 0 30%, transparent 32%) 0 0/7% 60%; }
.msv-pet { position: absolute; z-index: 6; right: 12%; bottom: 10%; font-size: 22cqmin; }
.msv-flat { position: absolute; z-index: 3; border-radius: 1cqmin; opacity: .85; } .msv-flat.a { left: 8%; top: 10%; width: 22cqmin; height: 14cqmin; transform: rotate(10deg); } .msv-flat.b { right: 10%; top: 14%; width: 16cqmin; aspect-ratio: 1; border-radius: 50%; background: #222; } .msv-flat.c { right: 12%; bottom: 10%; width: 24cqmin; height: 16cqmin; transform: rotate(-8deg); }
.msv-ringlight { position: absolute; z-index: 5; right: 8%; top: 12%; width: 26cqmin; aspect-ratio: 1; border-radius: 50%; border: 2.2cqmin solid #fff; box-shadow: 0 0 6cqmin #fff, inset 0 0 3cqmin #fff8; }
.msv-phoneui { position: absolute; z-index: 9; left: 4%; right: 4%; top: 3%; display: flex; justify-content: space-between; font: 800 3cqmin 'Montserrat', sans-serif; color: #fff; text-shadow: 0 0 1cqmin #000a; }
.msv-phoneui span:first-child { color: #ff4d4d; }
.msv-head { position: absolute; z-index: 9; left: 6%; right: 6%; top: 6%; text-align: center; font: 900 8cqmin 'Playfair Display', serif; line-height: 1.05; }
.msv-sticker { position: absolute; z-index: 9; display: grid; place-items: center; text-align: center; width: 18cqmin; aspect-ratio: 1; padding: 1.4cqmin; border-radius: 50%; font: 900 2.8cqmin 'Montserrat', sans-serif; line-height: 1.05; box-shadow: 0 1cqmin 2cqmin #0004; transform: rotate(-10deg); }
.msv-sticker.s0 { left: 6%; top: 24%; } .msv-sticker.s1 { right: 6%; top: 22%; transform: rotate(8deg); } .msv-sticker.s2 { left: 8%; bottom: 8%; }
.msv-price { position: absolute; z-index: 9; right: 6%; bottom: 7%; font: 900 5cqmin 'Montserrat', sans-serif; padding: 1.2cqmin 3cqmin; border-radius: 99px; box-shadow: 0 1cqmin 2cqmin #0004; }
.msv-figure.duo-a { left: 34%; height: 88%; } .msv-figure.duo-b { left: 66%; height: 90%; }
.msv-figure.back svg ellipse { fill: #1d130e; }

/* ── Design Studios dropdown ──────────────────────────────── */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 600 14px var(--font, inherit); padding: 8px 12px; border-radius: 10px; border: none; background: none; cursor: pointer; white-space: nowrap; transition: color .2s, background .2s; }
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn, .nav-drop.has-active .nav-drop-btn { color: var(--text); background: var(--surface-2); }
.nav-drop.has-active .nav-drop-btn { color: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); }
.nav-caret { font-size: 10px; transition: transform .25s var(--ease); }
.nav-drop.open .nav-caret { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 320px; display: grid; gap: 4px; padding: 8px; border-radius: 16px; border: 1px solid var(--border-strong);
  background: rgba(12, 14, 22, 0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 70px -20px #000, 0 0 40px -24px var(--accent);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.nav-drop.open .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease), visibility 0s; }
@media (hover: hover) and (min-width: 1081px) { .nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease), visibility 0s; } }
.nav-drop-menu a { display: flex !important; align-items: center; gap: 12px; padding: 10px 12px !important; border-radius: 12px; white-space: normal !important; }
.nav-drop-menu a::after { display: none; }
.nav-drop-menu .nav-ico { display: grid !important; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; color: var(--accent); background: var(--accent-soft); }
.nav-txt { display: grid; gap: 1px; } .nav-txt b { color: var(--text); font-size: 14px; } .nav-txt small { color: var(--muted); font-size: 12px; font-weight: 500; }
.cat-title { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 1080px) {
  .nav-drop { display: contents; }
  .nav-drop-btn { display: none; }
  .nav-drop-menu { position: static; width: auto; display: contents; opacity: 1; visibility: visible; transform: none; padding: 0; border: none; background: none; box-shadow: none; backdrop-filter: none; }
  .nav-drop-menu a { padding: 14px 16px !important; }
  .nav-txt small { display: none; }
}
@media (max-width: 1080px) { .main-nav .nav-txt b { color: inherit; font-weight: inherit; font-size: inherit; } }
.ms-modelbox.needs-photo { border-color: color-mix(in srgb, #fbbf24 55%, transparent); }
.ms-modelbox.needs-photo > .tp-group-head small { color: #fcd34d; }
.ms-uploads { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .ms-uploads { grid-template-columns: 1fr; } }
.ms-slot.needs-photo { border-color: #fbbf24; background: color-mix(in srgb, #fbbf24 8%, var(--surface-2)); }
.link-btn { background: none; border: none; padding: 4px 0; color: var(--muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .link-btn:hover { color: var(--text); }

/* ── Image Studio and Video Studio (v2.16) ───────────────────── */
.is-cats { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); margin-bottom: 4px; }
.is-idea { width: 100%; font-size: 16px; line-height: 1.5; resize: vertical; min-height: 64px; }
.is-idea-row { gap: 12px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
.is-uploads { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.is-uploads[hidden] { display: none; }
.is-looks { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); margin-bottom: 4px; }
.is-look { grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; padding: 10px 12px; }
.is-look strong { font-size: 13px; }
.is-look em { grid-column: 2; font: 600 9.5px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-3); }
.is-look em.real { color: var(--accent-2); }
.is-sw { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #fff2; }
.is-look:not(:has(em)) .is-sw { grid-row: auto; }
.is-sec { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); margin-bottom: 10px; overflow: hidden; }
.is-sec[open] { background: color-mix(in srgb, var(--accent) 3%, var(--surface-2)); }
.is-sec > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; }
.is-sec > summary::-webkit-details-marker { display: none; }
.is-sec > summary::after { content: "▾"; margin-left: 6px; color: var(--muted); transition: transform .25s var(--ease); }
.is-sec[open] > summary::after { transform: rotate(180deg); }
.is-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
.is-sec-icon { font-size: 18px; }
.is-sec-label { font-weight: 700; font-size: 15px; flex: 1; }
.is-sec-count { font: 600 11px var(--mono); color: var(--muted); padding: 3px 8px; border-radius: 99px; border: 1px solid var(--border); }
.is-sec-count.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.is-sec-body { padding: 2px 14px 14px; animation: isopen .3s var(--ease); }
@keyframes isopen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.is-sec-body .tp-group:first-child, .is-sec-body .is-note + .tp-group { margin-top: 4px; }
.is-clear { border: 0; background: none; color: var(--accent); font: inherit; font-size: 11.5px; cursor: pointer; padding: 0; }
.is-clear:hover { text-decoration: underline; }
.is-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.is-note { margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: var(--tip); background: var(--tip-bg); }
.is-note[hidden] { display: none; }
.output-text.mono { font: 12.5px/1.6 var(--mono); }
.is-board-hint { margin: 6px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.is-board-hint[hidden] { display: none; }
.is-canvas { container-type: size; background: #111; cursor: crosshair; }
.vid-page .is-canvas { cursor: default; }

/* Shot board layers */
.isv { position: absolute; inset: 0; overflow: hidden; transition: transform .4s var(--ease), filter .4s; }
.isv.dutch { transform: rotate(-6deg) scale(1.14); }
.isv.bw { filter: grayscale(1) contrast(1.1); }
.isv > i, .isv > div, .isv > span { position: absolute; }
.isv-bg { inset: -4%; transition: filter .4s, background .4s; }
.isv-fig { left: 50%; transform: translateX(-50%); transition: height .45s var(--ease), bottom .45s var(--ease); z-index: 4; }
.isv-fig.top { top: 9%; }
.isv-fig svg, .isv-fig .isv-duo svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 1.5cqmin 2cqmin #0005); }
.isv-fig .isv-emoji { display: block; font-size: 34cqmin; line-height: 1; transform: translateY(-10%); }
.isv-fig .isv-prodimg { height: 72%; width: auto; margin-top: 14%; border-radius: 2cqmin; box-shadow: 0 2cqmin 4cqmin #0006; }
.isv-duo { display: flex; height: 100%; gap: 0; margin-left: -20%; margin-right: -20%; }
.isv-duo svg:nth-child(2) { margin-left: -14%; } .isv-duo svg:nth-child(3) { margin-left: -14%; height: 94%; align-self: end; }
.isv-sheet { display: flex; height: 70%; gap: 2cqmin; margin-top: 10%; }
.isv-sheet > div { height: 100%; } .isv-sheet svg { height: 100%; width: auto; }
.isv-wide { inset: 0; z-index: 4; display: flex; align-items: flex-end; justify-content: center; transition: transform .45s var(--ease); transform-origin: 50% 80%; }
.isv-wide svg { width: 100%; height: 60%; }
.isv-glow { z-index: 3; width: 90cqmin; height: 90cqmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lc) 70%, transparent), transparent 62%); mix-blend-mode: screen; opacity: .8; transition: left .45s var(--ease), top .45s var(--ease); pointer-events: none; }
.isv-shadow { z-index: 3; left: 50%; width: 46cqmin; height: 5cqmin; border-radius: 50%; background: radial-gradient(#0007, transparent 70%); filter: blur(1.4cqmin); transition: transform .45s var(--ease); }
.isv-shadow.hard { background: radial-gradient(#000a, transparent 72%); filter: blur(.3cqmin); }
.isv-rim { z-index: 5; inset: 0; background: radial-gradient(ellipse 30% 45% at 50% 42%, transparent 60%, color-mix(in srgb, var(--lc) 40%, transparent) 70%, transparent 78%); mix-blend-mode: screen; }
.isv-window { z-index: 2; top: 14%; width: 22cqmin; height: 34cqmin; border: 1.2cqmin solid #fff8; background: linear-gradient(160deg, #fffbe9cc, #d9ecffaa); box-shadow: 0 0 8cqmin #fff6; }
.isv-stars { z-index: 1; inset: 0 0 40% 0; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 12%, #fff, transparent), radial-gradient(1px 1px at 85% 40%, #fff, transparent), radial-gradient(1px 1px at 10% 8%, #fff, transparent); opacity: .8; }
.isv-neon { z-index: 2; inset: 0 0 34% 0; background: radial-gradient(circle at 18% 40%, #ff2bd655, transparent 28%), radial-gradient(circle at 82% 30%, #00e0ff55, transparent 30%); }
.isv-fg { z-index: 7; inset: 0; pointer-events: none; filter: blur(1.6cqmin); }
.isv-fg.fg-leaves { background: radial-gradient(ellipse 22% 16% at 6% 92%, #3f7a3c, transparent 70%), radial-gradient(ellipse 18% 14% at 96% 6%, #4c8a44, transparent 70%), radial-gradient(ellipse 16% 12% at 92% 96%, #2f6a30, transparent 70%); }
.isv-fg.fg-glass { filter: none; background: radial-gradient(circle at 12% 20%, #ffffff55 0 1.2cqmin, transparent 1.4cqmin), radial-gradient(circle at 30% 70%, #ffffff44 0 .9cqmin, transparent 1.1cqmin), radial-gradient(circle at 78% 30%, #ffffff55 0 1.4cqmin, transparent 1.6cqmin), radial-gradient(circle at 88% 78%, #ffffff44 0 1cqmin, transparent 1.2cqmin), linear-gradient(#ffffff0d, #ffffff0d); }
.isv-fg.fg-window { filter: blur(.8cqmin); box-shadow: inset 0 0 0 5cqmin #1b1612; }
.isv-fg.fg-flowers { background: radial-gradient(circle at 8% 90%, #f7a6c0, transparent 14%), radial-gradient(circle at 20% 98%, #ffd1dc, transparent 12%), radial-gradient(circle at 94% 92%, #f7a6c0, transparent 12%); }
.isv-fg.fg-table { background: linear-gradient(0deg, #4a3020 0 12%, transparent 13%); }
.isv-fg.fg-shoulder { background: radial-gradient(ellipse 30% 46% at 2% 90%, #1d1a1a, transparent 70%); }
.isv-atm { z-index: 6; inset: 0; pointer-events: none; }
.atm-haze { background: linear-gradient(0deg, #ffffff22, #ffffff10); }
.atm-fog { background: linear-gradient(0deg, #ffffff55 0 20%, #ffffff10 60%, transparent); }
.atm-dust { background: radial-gradient(1px 1px at 30% 40%, #fff9, transparent), radial-gradient(1px 1px at 60% 30%, #fff9, transparent), radial-gradient(1.5px 1.5px at 40% 60%, #fffa, transparent), radial-gradient(1px 1px at 70% 55%, #fff9, transparent), linear-gradient(115deg, transparent 30%, #fff1 45%, transparent 60%); }
.atm-steam, .atm-smoke { background: radial-gradient(ellipse 30% 40% at 40% 70%, #ffffff30, transparent 70%), radial-gradient(ellipse 26% 36% at 62% 52%, #ffffff22, transparent 70%); filter: blur(1.5cqmin); }
.atm-smoke { background: radial-gradient(ellipse 40% 30% at 30% 80%, #cfd3dc55, transparent 70%), radial-gradient(ellipse 36% 30% at 70% 60%, #cfd3dc40, transparent 70%); }
.atm-sparks { background: radial-gradient(2px 2px at 30% 60%, #ffb347, transparent), radial-gradient(2px 2px at 64% 40%, #ff8a3d, transparent), radial-gradient(1.5px 1.5px at 50% 30%, #ffd27a, transparent), radial-gradient(2px 2px at 76% 70%, #ffb347, transparent); }
.isv-rain { z-index: 8; inset: -10% 0 0; background: repeating-linear-gradient(105deg, transparent 0 9px, #ffffff40 9px 10px, transparent 10px 23px); animation: israin .5s linear infinite; pointer-events: none; }
.isv-rain.storm { background: repeating-linear-gradient(110deg, transparent 0 6px, #ffffff55 6px 7px, transparent 7px 15px), linear-gradient(#0004, #0004); }
@keyframes israin { to { transform: translate(-6px, 10%); } }
.isv-snow { z-index: 8; inset: -20% 0 0; background: radial-gradient(2px 2px at 20% 10%, #fff, transparent), radial-gradient(2px 2px at 60% 30%, #fff, transparent), radial-gradient(3px 3px at 80% 15%, #fff, transparent), radial-gradient(2px 2px at 40% 50%, #fff, transparent); background-size: 30% 30%; animation: issnow 4s linear infinite; pointer-events: none; }
@keyframes issnow { to { transform: translateY(20%); } }
.isv-tint { z-index: 9; inset: 0; mix-blend-mode: soft-light; pointer-events: none; }
.isv-grain { z-index: 10; inset: 0; opacity: .14; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); mix-blend-mode: overlay; }
.isv-hud { z-index: 12; inset: 0; pointer-events: none; font: 600 2.6cqmin var(--mono); color: #fff; text-shadow: 0 0 .8cqmin #000; letter-spacing: .04em; }
.isv-hud::before { content: ""; position: absolute; inset: 3.2cqmin; background: linear-gradient(#fff, #fff) left top/4cqmin 2px, linear-gradient(#fff, #fff) left top/2px 4cqmin, linear-gradient(#fff, #fff) right top/4cqmin 2px, linear-gradient(#fff, #fff) right top/2px 4cqmin, linear-gradient(#fff, #fff) left bottom/4cqmin 2px, linear-gradient(#fff, #fff) left bottom/2px 4cqmin, linear-gradient(#fff, #fff) right bottom/4cqmin 2px, linear-gradient(#fff, #fff) right bottom/2px 4cqmin; background-repeat: no-repeat; opacity: .8; }
.isv-thirds { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.3% - .5px), #ffffff26 calc(33.3% - .5px) calc(33.3% + .5px), transparent 0, transparent calc(66.6% - .5px), #ffffff26 calc(66.6% - .5px) calc(66.6% + .5px), transparent 0), linear-gradient(transparent calc(33.3% - .5px), #ffffff26 calc(33.3% - .5px) calc(33.3% + .5px), transparent 0, transparent calc(66.6% - .5px), #ffffff26 calc(66.6% - .5px) calc(66.6% + .5px), transparent 0); }
.hud { position: absolute; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud.tl { left: 5cqmin; top: 5cqmin; } .hud.tr { right: 5cqmin; top: 5cqmin; } .hud.bl { left: 5cqmin; bottom: 5cqmin; } .hud.br { right: 5cqmin; bottom: 5cqmin; }
.hud .rec { color: #ff4d4d; animation: isblink 1.2s steps(2) infinite; }
@keyframes isblink { 50% { opacity: .2; } }
.isv-sun { z-index: 11; width: 5cqmin; height: 5cqmin; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 .6cqmin #0006, 0 0 4cqmin 1cqmin var(--lc); transition: left .45s var(--ease), top .45s var(--ease); pointer-events: none; }
.is-canvas:hover .isv-sun { animation: issun 1.2s ease-in-out infinite; }
@keyframes issun { 50% { box-shadow: 0 0 0 .6cqmin #0006, 0 0 7cqmin 2cqmin var(--lc); } }

/* Video Studio: mode cards, timeline, shot editor */
.vs-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.vs-mode { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .25s, background .25s; }
.vs-mode:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.vs-mode.active { border-color: var(--accent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-3) 10%, var(--surface-2))); box-shadow: 0 14px 36px -16px var(--accent), inset 0 0 0 1px var(--accent); }
.vs-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vs-mode-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 22px; background: var(--surface-3); }
.vs-mode.active .vs-mode-icon { background: linear-gradient(135deg, var(--accent), var(--accent-3)); }
.vs-mode-text { display: grid; gap: 4px; }
.vs-mode-text strong { font-size: 16px; }
.vs-mode-text small { font-size: 12.5px; color: #c4c8d6; line-height: 1.45; }
.vs-mode-text em { font: 600 10px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.vs-uploads { margin-bottom: 12px; }
.vs-uploads.big .ms-thumb, .vs-uploads.big .ms-drop { width: 96px; height: 96px; }
.vs-idea-field { margin-top: 4px; }
.vs-timeline { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding: 2px 2px 8px; }
.vs-seg { position: relative; overflow: hidden; min-width: 78px; display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease), flex-grow .35s var(--ease); }
.vs-seg:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.vs-seg.active { border-color: var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 24%, transparent), var(--surface-2)); box-shadow: inset 0 0 0 1px var(--accent); }
.vs-seg b { font: 700 11px var(--mono); color: var(--accent); }
.vs-seg span { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-seg small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-add { flex: none; width: 58px; display: grid; place-items: center; align-content: center; border-radius: 12px; border: 1px dashed var(--border-strong); background: none; color: var(--muted); font-size: 20px; cursor: pointer; transition: color .2s, border-color .2s; }
.vs-add small { font-size: 10.5px; }
.vs-add:hover { color: var(--text); border-color: var(--accent); }
.vs-meter { position: relative; font: 600 12px var(--mono); color: var(--muted); padding-bottom: 8px; margin-bottom: 12px; }
.vs-meter .good { color: var(--ok); } .vs-meter .bad { color: #f87171; }
.vs-meter i { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ok), var(--accent-2)); transition: width .35s var(--ease); }
.vs-meter i.bad { background: #f87171; }
.vs-meter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--surface-3); z-index: -1; }
.vs-shot { padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 3%, var(--surface-2)); animation: isopen .3s var(--ease); }
.vs-shot-head { margin-bottom: 10px; gap: 8px; flex-wrap: wrap; } .vs-shot-head h3 { margin: 0; font-size: 15px; }
.vs-shot-head .row { gap: 6px; }
.vs-action { margin-bottom: 6px; } .vs-action input { font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.vs-moves { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 7px; }
.vs-move { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, transform .18s var(--ease); }
.vs-move:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.vs-move.active { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-3) 16%, transparent)); }
.vs-move strong { font-size: 12.5px; }
.vs-move small { grid-column: 1 / -1; font-size: 10.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.vs-move-ico { grid-row: 1; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--surface-3); color: var(--accent-2); }
.vs-move-ico::before { content: "◼"; }
.mv-ico-push::before { content: "⊙"; } .mv-ico-pull::before { content: "◎"; } .mv-ico-panl::before { content: "⇠"; } .mv-ico-panr::before { content: "⇢"; }
.mv-ico-tiltu::before { content: "⇡"; } .mv-ico-truck::before { content: "⇉"; } .mv-ico-follow::before { content: "⇧"; } .mv-ico-orbit::before { content: "⟲"; }
.mv-ico-crane::before { content: "⤴"; } .mv-ico-drone::before { content: "✈"; } .mv-ico-fpv::before { content: "⤵"; } .mv-ico-hand::before { content: "〰"; }
.mv-ico-whip::before { content: "⇶"; } .mv-ico-vertigo::before { content: "⧖"; } .mv-ico-rack::before { content: "◐"; } .mv-ico-crash::before { content: "⊕"; }
.vs-line { display: grid; grid-template-columns: 96px 1fr auto; gap: 6px; margin-bottom: 6px; }
.vs-line .input { min-width: 0; }
.vs-dialogue .bad { color: #f87171; }
.vs-player { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vs-player .btn { width: 38px; padding-left: 0; padding-right: 0; flex: none; }
.vs-playbar { flex: 1; display: flex; gap: 3px; height: 8px; }
.vs-pseg { position: relative; overflow: hidden; border: 0; padding: 0; border-radius: 4px; background: var(--surface-3); cursor: pointer; min-width: 10px; }
.vs-pseg i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.vs-pseg.done i { width: 100%; }
.vs-pseg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes vsfill { to { width: 100%; } }
.vs-total { font: 600 12px var(--mono); color: var(--muted); }

/* Video preview stage */
.vsv { position: absolute; inset: 0; overflow: hidden; container-type: size; --amp: 1; }
.vsv.bw { filter: grayscale(1) contrast(1.1); } .vsv.sepia .vsv-photo { filter: sepia(.35); }
.vsv > i, .vsv > div, .vsv > p { position: absolute; }
.vsv-world { inset: 0; transform-origin: 50% 50%; animation-duration: var(--dur, 4s); animation-timing-function: ease-in-out; animation-fill-mode: both; will-change: transform; }
.vsv-world.loop { animation-iteration-count: infinite; animation-direction: alternate; }
.vsv-sky { position: absolute; inset: -12%; }
.vsv-photo { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; }
.vsv-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; color: #c4c8d6; background: repeating-linear-gradient(45deg, #ffffff06 0 10px, transparent 10px 20px), #15171f; }
.vsv-empty span { font-size: 14cqmin; } .vsv-empty b { font-size: 4.4cqmin; } .vsv-empty small { font-size: 3.2cqmin; color: var(--muted); }
.vsv-subj { position: absolute; inset: 0; transform: scale(var(--zoom, 1)); transform-origin: 50% 28%; transition: transform .5s var(--ease); }
.vsv-person { position: absolute; left: 50%; bottom: 6%; height: 74%; transform: translateX(-50%); display: flex; }
.vsv-person svg { height: 100%; width: auto; filter: drop-shadow(0 1.5cqmin 2cqmin #0006); }
.vsv-person.duo svg:nth-child(2) { margin-left: -18%; height: 94%; align-self: end; }
.vsv-emoji { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); font-size: 34cqmin; line-height: 1; filter: drop-shadow(0 2cqmin 3cqmin #0007); }
.vsv-emoji.small { font-size: 18cqmin; white-space: nowrap; }
.vsv-mount { position: absolute; left: -10%; right: -10%; width: 120%; bottom: 0; height: 52%; }
.vsv-fg { inset: 0; pointer-events: none; box-shadow: inset 0 0 12cqmin #0008; z-index: 6; }
.vsv-clouds { inset: 0 -50% 50% -50%; z-index: 3; background: radial-gradient(ellipse 12% 30% at 20% 50%, #ffffffaa, transparent 70%), radial-gradient(ellipse 10% 26% at 45% 30%, #ffffff88, transparent 70%), radial-gradient(ellipse 14% 32% at 75% 60%, #ffffff99, transparent 70%); filter: blur(1cqmin); animation: vsdrift 14s linear infinite; }
@keyframes vsdrift { to { transform: translateX(25%); } }
.vsv-mist { inset: 40% -40% 0 -40%; z-index: 5; background: radial-gradient(ellipse 30% 40% at 30% 70%, #ffffff55, transparent 70%), radial-gradient(ellipse 30% 40% at 70% 80%, #ffffff44, transparent 70%); filter: blur(2cqmin); animation: vsdrift 10s linear infinite alternate; }
.vsv-steam { left: 30%; right: 30%; bottom: 40%; height: 40%; z-index: 5; background: radial-gradient(ellipse 30% 30% at 40% 80%, #ffffffaa, transparent 70%), radial-gradient(ellipse 26% 26% at 60% 50%, #ffffff77, transparent 70%); filter: blur(1.5cqmin); animation: vssteam 3s ease-out infinite; }
@keyframes vssteam { from { transform: translateY(20%) scale(.8); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-40%) scale(1.3); opacity: 0; } }
.vsv-leaves { inset: 0; z-index: 7; pointer-events: none; }
.vsv-leaves b { position: absolute; top: -10%; font-size: 6cqmin; animation: vsleaf 6s linear infinite; }
.vsv-leaves b:nth-child(1) { left: 15%; } .vsv-leaves b:nth-child(2) { left: 55%; animation-delay: -2s; } .vsv-leaves b:nth-child(3) { left: 80%; animation-delay: -4s; }
@keyframes vsleaf { to { transform: translate(-20cqmin, 120cqh) rotate(540deg); } }
.vsv-embers { inset: 0; z-index: 7; background: radial-gradient(2px 2px at 20% 80%, #ffb347, transparent), radial-gradient(2px 2px at 50% 90%, #ff8a3d, transparent), radial-gradient(2px 2px at 80% 85%, #ffd27a, transparent), radial-gradient(1.5px 1.5px at 35% 70%, #ffb347, transparent); background-size: 50% 50%; animation: vsember 4s linear infinite; }
.vsv-embers.magic { background: radial-gradient(2px 2px at 20% 80%, #b9f, transparent), radial-gradient(2px 2px at 50% 90%, #8ef, transparent), radial-gradient(2.5px 2.5px at 80% 85%, #fff, transparent), radial-gradient(1.5px 1.5px at 35% 70%, #fcf, transparent); background-size: 50% 50%; }
@keyframes vsember { to { background-position: 0 -100cqh, 0 -100cqh, 0 -100cqh, 0 -100cqh; } }
.vsv-sparkle { inset: 0; z-index: 7; background: radial-gradient(1.5px 1.5px at 30% 60%, #fff, transparent), radial-gradient(2px 2px at 65% 45%, #dff6ff, transparent), radial-gradient(1.5px 1.5px at 48% 75%, #fff, transparent); animation: isblink 1.6s ease-in-out infinite; }
.vsv-pass { left: -30%; bottom: 8%; width: 24%; height: 40%; z-index: 5; background: radial-gradient(ellipse 30% 14% at 50% 14%, #0009, transparent 70%), linear-gradient(#0008, #0008) 50% 100%/40% 80% no-repeat; border-radius: 40%; filter: blur(.6cqmin); animation: vspass 5s linear infinite; }
.vsv-pass.traffic { height: 4%; bottom: 30%; width: 40%; background: linear-gradient(90deg, transparent, #ff4d4d, #ffd27a, transparent); filter: blur(.4cqmin); animation-duration: 1.6s; }
@keyframes vspass { to { transform: translateX(170cqw); } }
.vsv-sub { left: 8%; right: 8%; bottom: 12%; z-index: 12; margin: 0; text-align: center; font: 600 3.6cqmin/1.35 var(--font); color: #fff; padding: 1.4cqmin 2.4cqmin; border-radius: 1.4cqmin; background: #000a; animation: isopen .3s var(--ease); }
.vsv-sub[hidden] { display: none; }
.vsv-eq { display: flex; gap: .6cqmin; align-items: flex-end; height: 3.4cqmin; }
.vsv-eq i { display: block; width: .8cqmin; background: var(--accent-2); animation: vseq .8s ease-in-out infinite alternate; }
.vsv-eq i:nth-child(2) { animation-delay: -.2s; } .vsv-eq i:nth-child(3) { animation-delay: -.5s; } .vsv-eq i:nth-child(4) { animation-delay: -.35s; }
@keyframes vseq { from { height: 20%; } to { height: 100%; } }

/* Camera moves (amplitude follows "How much motion") */
.mv-static { animation-name: none; }
.mv-push { animation-name: mvpush; } @keyframes mvpush { from { transform: scale(1); } to { transform: scale(calc(1 + .2 * var(--amp))); } }
.mv-pull { animation-name: mvpull; } @keyframes mvpull { from { transform: scale(calc(1 + .22 * var(--amp))); } to { transform: scale(1); } }
.mv-panl { animation-name: mvpanl; } @keyframes mvpanl { from { transform: scale(1.18) translateX(calc(6% * var(--amp))); } to { transform: scale(1.18) translateX(calc(-6% * var(--amp))); } }
.mv-panr { animation-name: mvpanr; } @keyframes mvpanr { from { transform: scale(1.18) translateX(calc(-6% * var(--amp))); } to { transform: scale(1.18) translateX(calc(6% * var(--amp))); } }
.mv-tiltu { animation-name: mvtilt; } @keyframes mvtilt { from { transform: scale(1.22) translateY(calc(-7% * var(--amp))); } to { transform: scale(1.22) translateY(calc(7% * var(--amp))); } }
.mv-truck { animation-name: mvtruck; } @keyframes mvtruck { from { transform: scale(1.16) translateX(calc(-6% * var(--amp))); } to { transform: scale(1.16) translateX(calc(6% * var(--amp))); } }
.mv-follow { animation-name: mvfollow; } @keyframes mvfollow { 0% { transform: scale(1.06) translateY(0); } 25% { transform: scale(1.09) translateY(-.6%); } 50% { transform: scale(1.12) translateY(0); } 75% { transform: scale(1.15) translateY(-.6%); } 100% { transform: scale(1.18) translateY(0); } }
.mv-orbit { animation-name: mvorbit; } @keyframes mvorbit { from { transform: perspective(60cqw) scale(1.2) rotateY(calc(-12deg * var(--amp))) translateX(calc(-5% * var(--amp))); } to { transform: perspective(60cqw) scale(1.2) rotateY(calc(12deg * var(--amp))) translateX(calc(5% * var(--amp))); } }
.mv-crane { animation-name: mvcrane; } @keyframes mvcrane { from { transform: scale(1.1) translateY(calc(8% * var(--amp))); } to { transform: scale(1.3) translateY(calc(-6% * var(--amp))); } }
.mv-drone { animation-name: mvdrone; } @keyframes mvdrone { from { transform: perspective(60cqw) rotateX(8deg) scale(1.05) translateY(4%); } to { transform: perspective(60cqw) rotateX(8deg) scale(calc(1.05 + .3 * var(--amp))) translateY(-3%); } }
.mv-fpv { animation-name: mvfpv; animation-timing-function: cubic-bezier(.6, 0, .4, 1); } @keyframes mvfpv { from { transform: scale(1) rotate(-3deg); } to { transform: scale(calc(1 + .6 * var(--amp))) rotate(3deg); } }
.mv-hand { animation-name: mvhand; animation-timing-function: linear; } @keyframes mvhand { 0%, 100% { transform: scale(1.06) translate(0, 0) rotate(0); } 15% { transform: scale(1.06) translate(.6%, -.4%) rotate(.3deg); } 35% { transform: scale(1.06) translate(-.5%, .3%) rotate(-.2deg); } 55% { transform: scale(1.06) translate(.4%, .5%) rotate(.2deg); } 75% { transform: scale(1.06) translate(-.6%, -.2%) rotate(-.3deg); } }
.mv-whip { animation-name: mvwhip; } @keyframes mvwhip { 0%, 40% { transform: scale(1.1) translateX(0); filter: none; } 55% { transform: scale(1.1) translateX(-30%); filter: blur(2cqmin); } 70%, 100% { transform: scale(1.1) translateX(0); filter: none; } }
.mv-vertigo .vsv-sky, .mv-vertigo .vsv-photo { animation: mvvert var(--dur, 4s) ease-in-out both; } @keyframes mvvert { from { transform: scale(1); } to { transform: scale(calc(1 + .4 * var(--amp))); } }
.mv-vertigo.loop .vsv-sky, .mv-vertigo.loop .vsv-photo { animation-iteration-count: infinite; animation-direction: alternate; }
.mv-rack { animation-name: mvrack; } @keyframes mvrack { from { filter: blur(1.4cqmin); transform: scale(1.04); } to { filter: blur(0); transform: scale(1.04); } }
.mv-crash { animation-name: mvcrash; animation-timing-function: cubic-bezier(.7, 0, .3, 1); } @keyframes mvcrash { 0% { transform: scale(1); } 30%, 100% { transform: scale(calc(1 + .55 * var(--amp))); } }

@media (max-width: 560px) {
  .vs-modes { grid-template-columns: 1fr; }
  .vs-line { grid-template-columns: 76px 1fr auto; }
  .is-looks { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .vsv-world, .vsv-world *, .isv-rain, .isv-snow, .vsv > i, .vsv-leaves b { animation: none !important; }
}
.jump-preview { display: none; }
@media (max-width: 960px) {
  .jump-preview { display: inline-flex; position: fixed; z-index: 60; right: 16px; bottom: 18px; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 99px; font: 700 13px var(--font); color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--accent), var(--accent-3)); box-shadow: 0 10px 30px -8px var(--accent); transition: opacity .25s, transform .25s var(--ease); }
  .jump-preview.off { opacity: 0; transform: translateY(16px); pointer-events: none; }
}

/* ── Auto and Reset, copy bar (v2.17) ─────────────────────────── */
.studio-bar { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.studio-bar .btn { white-space: nowrap; }
.chip-auto { border-style: dashed; color: #e9ddff; border-color: color-mix(in srgb, var(--accent-3) 55%, transparent); background: color-mix(in srgb, var(--accent-3) 8%, transparent); }
.chip-auto.active { color: #fff; border-style: solid; border-color: var(--accent-3); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-3) 45%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent)); box-shadow: 0 6px 20px -8px var(--accent-3); }
.chip.auto-pick, .tp-emo.auto-pick { border-style: dashed; border-color: color-mix(in srgb, var(--accent-3) 70%, transparent); background: color-mix(in srgb, var(--accent-3) 18%, transparent); box-shadow: none; }
.chip.auto-pick::after, .tp-emo.auto-pick::after { content: "auto"; margin-left: 6px; font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-3); vertical-align: 1px; }
.tp-expr .chip-auto { min-height: 100%; display: grid; place-items: center; }
.toast .toast-undo { margin-left: 10px; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text); border-radius: 8px; padding: 3px 10px; font: 600 13px var(--font); cursor: pointer; }
.toast:has(.toast-undo).show { pointer-events: auto; }
.output-sticky .copy-bar { position: sticky; bottom: -4px; z-index: 6; margin: 10px -20px; padding: 14px 20px 12px; background: linear-gradient(180deg, transparent, var(--surface-solid) 30%); }
@media (max-width: 960px) { .output-sticky .copy-bar { bottom: 0; } }
.vs-shots-head { gap: 8px; align-items: center; margin-bottom: 4px; } .vs-shots-head .card-hint { margin: 0; }
.is-looks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.is-look { grid-template-columns: auto minmax(0, 1fr); }
.is-look strong { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.card > .row.between { gap: 10px; flex-wrap: wrap; }
/* Homepage studio cards */
.tv-video { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 12px 16px; }
.tvv-modes { display: flex; gap: 6px; justify-content: center; }
.tvv-modes b { font: 600 10.5px var(--mono); padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); color: #c9ccd9; animation: tvvMode 6s infinite; }
.tvv-modes b.on { animation-delay: -3s; }
@keyframes tvvMode { 0%, 45% { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); color: #fff; } 50%, 100% { background: transparent; border-color: var(--border); color: #c9ccd9; } }
.tvv-frame { position: relative; overflow: hidden; border-radius: 8px; background: linear-gradient(180deg, #ff9440, #ffd08a 60%, #5f7a5a 62%); }
.tvv-frame i { position: absolute; left: 44%; bottom: 8%; width: 12%; height: 70%; border-radius: 40% 40% 6px 6px; background: #3a2a24; animation: mvpush 3s ease-in-out infinite alternate; transform-origin: 50% 30%; --amp: 1.5; }
.tvv-shots { display: flex; gap: 4px; height: 8px; }
.tvv-shots i { border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: .7; }
.tv-thumb { background: linear-gradient(120deg, #ffd400, #ff5b2e); display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.tvt-face { font-size: 64px; filter: drop-shadow(0 4px 0 #000); }
.tvt-text { font: 900 20px/1.05 "Inter", sans-serif; color: #fff; -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; transform: rotate(-3deg); }
.tvt-arrow { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 6px; background: #ff1f1f; transform: rotate(-30deg); border-radius: 3px; box-shadow: 0 0 0 2px #fff; }
.tv-mock { background: radial-gradient(ellipse at 50% 35%, #f6efe6, #e2d4c2 70%); }
.tvm-pod { position: absolute; left: 50%; bottom: 14%; width: 96px; height: 26px; transform: translateX(-50%); border-radius: 50% / 40%; background: linear-gradient(180deg, #efe6da 0 30%, #cdbca6 30%); box-shadow: 0 8px 16px #0003; }
.tvm-bottle { position: absolute; left: 50%; bottom: 26%; width: 34px; height: 74px; transform: translateX(-50%); border-radius: 8px; background: linear-gradient(90deg, #9a5a1e, #c47a3a 40%, #9a5a1e); box-shadow: 4px 8px 12px #0004; animation: tvmFloat 4s ease-in-out infinite; }
.tvm-bottle::before { content: ""; position: absolute; left: 9px; top: -14px; width: 16px; height: 14px; border-radius: 4px 4px 0 0; background: #222; }
.tvm-leaf { position: absolute; bottom: 14%; width: 30px; height: 60px; border-radius: 0 100% 0 100%; background: #4f8d58; }
.tvm-leaf.a { left: 24%; transform: rotate(-20deg); } .tvm-leaf.b { right: 24%; transform: rotate(20deg) scaleX(-1); }
@keyframes tvmFloat { 50% { transform: translateX(-50%) translateY(-6px); } }

/* ── Collapsed option groups, icons, colours, consistency lock (v2.18) ── */
.kit-group { border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; margin: 0 0 8px; background: rgba(255, 255, 255, .02); transition: background .2s, border-color .2s; }
.kit-group.open { background: color-mix(in srgb, var(--accent) 4%, rgba(255, 255, 255, .02)); border-color: var(--border-strong); padding-bottom: 12px; }
.kit-group > .tp-group-head, .kit-group > .group-head { display: flex; align-items: center; gap: 8px; min-height: 46px; margin: 0; cursor: pointer; user-select: none; }
.kit-group > .tp-group-head:focus-visible, .kit-group > .group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.kit-group > .tp-group-head h3, .kit-group > .group-head .group-label { display: flex; align-items: center; gap: 8px; margin: 0; flex: none; }
.kit-group > .tp-group-head small { display: none; }
.kit-group.open > .tp-group-head small { display: inline; }
.kit-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-3); font-size: 14px; letter-spacing: 0; text-transform: none; }
.kit-sum { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #d5d8e4; text-align: right; }
.kit-sum.is-auto { color: #cdb9ff; }
.kit-group > .tp-group-head::after, .kit-group > .group-head::after { content: "▾"; flex: none; color: var(--muted); transition: transform .25s var(--ease); }
.kit-group.open > .tp-group-head::after, .kit-group.open > .group-head::after { transform: rotate(180deg); }
.kit-group:not(.open) > :not(.tp-group-head):not(.group-head) { display: none !important; }
.kit-group.open > .chips, .kit-group.open > .tp-expr, .kit-group.open > .is-looks { animation: isopen .25s var(--ease); }
.is-looks .chip-auto { align-self: stretch; }
.kit-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.kit-colors label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; color: #d5d8e4; }
.kit-colors input[type=color] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; flex: none; }
.kit-colors code { margin-left: auto; font: 11px var(--mono); color: var(--muted); }
.kit-lock { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.kit-lock:has(input:checked) { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.kit-lock-switch { font-weight: 600; }
.kit-lock-hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.kit-lock-chips { margin-top: 8px; }
.kit-lock-chips .chip { font-size: 12px; padding: 5px 10px; }
.is-sec-body > .kit-group:first-child { margin-top: 4px; }
.kit-group > .tp-group-head, .kit-group > .group-head { flex-wrap: nowrap; }
.kit-group > .tp-group-head h3, .kit-group > .group-head .group-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-group > .tp-group-head .kit-sum { flex: 1 1 auto; }
.layout > .builder, .layout > .output, .builder .card, .output .card { min-width: 0; }
.kit-group > .tp-group-head .kit-sum, .kit-group > .group-head .kit-sum { flex: 1 1 0; width: 0; }

/* ── Thumbnail type picker with live mini thumbnails (v2.19) ── */
.tp-niches { margin: 2px 0 12px; }
.tp-niche { font-size: 12.5px; }
.tp-types { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tp-type { position: relative; display: grid; gap: 6px; align-content: start; padding: 8px 8px 12px; text-align: left; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .25s; min-width: 0; }
.tp-type:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 16px 34px -18px #000; }
.tp-type:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-type.active { border-color: var(--accent); box-shadow: 0 14px 36px -16px var(--accent), inset 0 0 0 1px var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), var(--surface-2)); }
.tp-type.active::after { content: "✓"; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px var(--font); box-shadow: 0 2px 8px #0008; }
.tp-tile { width: 100%; border-radius: 10px; pointer-events: none; box-shadow: 0 8px 20px -12px #000; }
.tp-tile .tpv-time { font-size: 3.4cqi; }
.tp-type-name { display: flex; align-items: center; gap: 7px; padding: 0 4px; font-weight: 700; font-size: 14px; }
.tp-type-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--surface-3); font-size: 12px; flex: none; }
.tp-type small { padding: 0 4px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tp-templates .tp-tpl { display: grid; gap: 6px; align-content: start; padding: 8px 8px 10px; min-width: 200px; }
.tp-tpl strong { padding: 0 2px; } .tp-tpl small { padding: 0 2px; }
@media (max-width: 560px) { .tp-types { grid-template-columns: 1fr 1fr; gap: 8px; } .tp-type small { display: none; } .tp-type-name { font-size: 12.5px; } }
/* VS badge sits between the two side labels, never on the face */
.tpv-vs { top: auto; bottom: 11%; transform: translateX(-50%) rotate(-8deg); }
.tpv-side { font-size: 5.6cqi; }
@media (max-width: 560px) { .tp-niches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .tp-niches::-webkit-scrollbar { display: none; } .tp-niche { flex: none; } }

/* ── Privacy tooltip, compact prompt box with copy icon (v2.20) ── */
.kit-tip { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; vertical-align: 2px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--tip); font: italic 700 12px Georgia, serif; cursor: help; padding: 0; }
.kit-tip::after { content: attr(data-tip); position: absolute; z-index: 40; left: 50%; top: calc(100% + 10px); transform: translateX(-50%) translateY(-4px); width: min(280px, 78vw); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--text); font: 500 12.5px/1.45 var(--font); font-style: normal; letter-spacing: 0; text-transform: none; text-align: left; box-shadow: 0 16px 40px -14px #000; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.kit-tip::before { content: ""; position: absolute; z-index: 41; left: 50%; top: calc(100% + 5px); width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: var(--surface-solid); border-left: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong); opacity: 0; transition: opacity .2s; }
.kit-tip:hover::after, .kit-tip:focus-visible::after, .kit-tip:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.kit-tip:hover::before, .kit-tip:focus-visible::before, .kit-tip:focus::before { opacity: 1; }
@media (max-width: 560px) { .kit-tip::after { left: auto; right: -40px; transform: none; } }
.kit-out { position: relative; margin: 0 0 12px; }
.kit-out > pre.output-text { margin: 0; max-height: 190px; overflow: hidden; padding-right: 46px; }
.kit-out.expanded > pre.output-text { max-height: none; overflow: visible; }
.kit-out.can-expand:not(.expanded)::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 30px; height: 56px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: linear-gradient(transparent, var(--code-bg) 85%); pointer-events: none; }
.kit-out:has(> pre[hidden]) { display: none; }
.kit-copy { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-strong); background: rgba(18, 20, 30, .85); color: #d5d8e4; cursor: pointer; font: 700 14px var(--font); transition: background .2s, color .2s, transform .15s var(--ease); backdrop-filter: blur(6px); }
.kit-copy:hover { background: var(--surface-3); color: #fff; transform: translateY(-1px); }
.kit-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit-copy.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.kit-expand { display: block; margin: 6px auto 0; padding: 4px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); color: var(--accent-2); font: 600 12px var(--font); cursor: pointer; position: relative; z-index: 2; }
.kit-expand:hover { border-color: var(--border-strong); color: #fff; }
.kit-expand[hidden] { display: none; }
.kit-tip::after { transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(-4px); }
.kit-tip:hover::after, .kit-tip:focus-visible::after, .kit-tip:focus::after, .kit-tip.show::after { opacity: 1; transform: translateX(calc(-50% + var(--tip-shift, 0px))); }
.kit-tip.show::before { opacity: 1; }
@media (max-width: 560px) { .kit-tip::after { left: 50%; right: auto; } }

/* ── Menu: minimal futuristic active state (v2.21) ──
   No pill box. The current page glows white with a small cyan "signal light" under it; hover shows a dim one. */
@media (min-width: 1081px) {
  .main-nav a, .main-nav a:hover, .main-nav a.active, .nav-drop-btn, .nav-drop-btn:hover, .nav-drop.open .nav-drop-btn, .nav-drop.has-active .nav-drop-btn { background: none; box-shadow: none; }
  .main-nav > a, .nav-drop-btn { position: relative; color: #8b90a5; letter-spacing: .01em; transition: color .25s, text-shadow .25s; }
  .main-nav > a::after, .nav-drop-btn::after {
    content: ""; position: absolute; left: 50%; right: auto; bottom: -1px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-2); box-shadow: 0 0 6px 1px var(--accent-2), 0 0 16px 3px color-mix(in srgb, var(--accent-2) 45%, transparent);
    transform: translateX(-50%) scale(0); opacity: 0; transition: transform .35s var(--ease), opacity .25s;
  }
  .main-nav > a:hover, .nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color: #e6e8f2; }
  .main-nav > a:hover::after, .nav-drop-btn:hover::after { transform: translateX(-50%) scale(.6); opacity: .45; }
  .main-nav > a.active, .main-nav > a[aria-current="page"], .nav-drop.has-active .nav-drop-btn { color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 55%, transparent); }
  .main-nav > a.active::after, .main-nav > a[aria-current="page"]::after, .nav-drop.has-active .nav-drop-btn::after { transform: translateX(-50%) scale(1); opacity: 1; animation: navSignal 2.6s ease-in-out infinite; }
  .main-nav > a:focus-visible, .nav-drop-btn:focus-visible { outline: 1px solid color-mix(in srgb, var(--accent-2) 60%, transparent); outline-offset: 4px; border-radius: 8px; }
  .nav-drop-menu a.active, .nav-drop-menu a[aria-current="page"] { background: color-mix(in srgb, var(--accent-2) 8%, transparent); box-shadow: inset 2px 0 0 var(--accent-2); }
}
@keyframes navSignal { 0%, 100% { box-shadow: 0 0 6px 1px var(--accent-2), 0 0 16px 3px color-mix(in srgb, var(--accent-2) 45%, transparent); } 50% { box-shadow: 0 0 4px 0 var(--accent-2), 0 0 8px 1px color-mix(in srgb, var(--accent-2) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .main-nav > a.active::after, .nav-drop.has-active .nav-drop-btn::after { animation: none; } }

/* ══ Plans and usage (LR-3) ═══════════════════════════════════ */
.usage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: #c9ccd9; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.usage-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.usage-pill.low { color: #fde68a; border-color: rgba(251, 191, 36, 0.4); }
.usage-pill.low::before { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.usage-pill[hidden] { display: none; }
.pro-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1a1205; background: linear-gradient(135deg, #fde68a, #f59e0b); vertical-align: middle; }
.pro-badge[hidden] { display: none; }
.director-btn { background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(194, 65, 12, 0.18)) !important; }
.limit-dialog .lim-what { margin: 0; color: #e5e7f0; font-size: 15px; }
.limit-dialog .lim-why { margin: 0; color: #fde68a; font-size: 14px; }
.limit-dialog .lim-later { width: 100%; }
.account-plan { display: grid; gap: 16px; padding: 22px; scroll-margin-top: 90px; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.plan-head h2 { margin: 2px 0 4px; font-size: 24px; }
.plan-head p { margin: 0; }
.plan-cta { display: grid; gap: 6px; justify-items: end; text-align: right; max-width: 280px; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.meter { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.meter.off { opacity: .6; }
.meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; }
.meter-top small { color: var(--muted); font-weight: 500; text-align: right; }
.meter-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
@media (max-width: 560px) { .plan-cta { justify-items: start; text-align: left; max-width: none; } .account-plan { padding: 18px 16px; } }

/* ══ Upgrade button (every page) ══════════════════════════════ */
.top-actions .upgrade-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; text-decoration: none; font-weight: 700; font-size: 13.5px; color: #1a1205; background: linear-gradient(135deg, #fde68a, #f59e0b 55%, #f97316); border: none; box-shadow: 0 0 22px -6px #f59e0b; transition: transform .2s var(--ease), box-shadow .2s; }
.top-actions .upgrade-btn:hover, .top-actions .upgrade-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 0 30px -4px #f59e0b; color: #1a1205; }
.top-actions .upgrade-btn:focus-visible { outline: 2px solid #fde68a; outline-offset: 3px; }
.upgrade-btn .up-short { display: none; }
.nav-pricing-link { display: none !important; }
@media (max-width: 1080px) {
  .nav-pricing-link { display: inline-flex !important; }
  .nav-pricing-link .nav-ico { color: #f59e0b; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); }
}
@media (max-width: 480px) {
  .top-actions .upgrade-btn { padding: 7px 11px; }
  .upgrade-btn .up-txt { display: none; }
  .upgrade-btn .up-short { display: inline; }
}

/* ══ Pricing page ═════════════════════════════════════════════ */
.grad { background: linear-gradient(120deg, #fde68a, #f59e0b 45%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-wrap { max-width: 1160px; margin: 0 auto; padding: 34px 24px 60px; display: grid; gap: 26px; }
.pr-hero { text-align: center; display: grid; justify-items: center; gap: 10px; }
.pr-hero h1 { margin: 4px 0 0; font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -0.035em; line-height: 1.06; max-width: 860px; }
.pr-hero p { margin: 0; color: #c3c7d6; max-width: 620px; font-size: 16px; }
.pr-toggles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.pr-switch { display: inline-flex; padding: 4px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); }
.pr-switch button { border: none; background: transparent; color: var(--muted); font: 600 14px inherit; padding: 9px 16px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; }
.pr-switch button[aria-pressed="true"] { background: var(--surface-3); color: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); }
.pr-switch button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.pr-switch-sm button { padding: 9px 13px; font-size: 13px; }
.pr-save-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; color: #052e1c; background: var(--ok); }

.pr-founding { display: flex; align-items: center; gap: 22px; padding: 20px 24px; border-color: rgba(245, 158, 11, 0.35); background: linear-gradient(120deg, rgba(245, 158, 11, 0.1), rgba(194, 65, 12, 0.08) 50%, rgba(12, 14, 22, 0.6)); }
.pr-founding h2 { margin: 6px 0 4px; font-size: clamp(19px, 2.4vw, 25px); }
.pr-founding p { margin: 0; color: #c3c7d6; font-size: 14.5px; }
.pr-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fde68a; }
.pr-ring { position: relative; width: 104px; height: 104px; flex: none; display: grid; place-items: center; }
.pr-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pr-ring circle { fill: none; stroke-width: 10; }
.pr-ring .ring-bg { stroke: rgba(255, 255, 255, 0.08); }
.pr-ring .ring-fg { stroke: #f59e0b; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s var(--ease); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)); }
.pr-ring.in .ring-fg { stroke-dasharray: calc(100 - var(--p)) 100; }
.pr-ring div { position: relative; text-align: center; display: grid; line-height: 1.1; }
.pr-ring strong { font-size: 24px; }
.pr-ring small { font-size: 11px; color: var(--muted); }

.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pr-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 22px 24px; border-radius: 24px; background: rgba(12, 14, 22, 0.8); border: 1px solid var(--border); transition: transform .3s var(--ease), border-color .3s; }
.pr-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.pr-popular { border-color: rgba(245, 158, 11, 0.55); background: radial-gradient(120% 60% at 50% 0%, rgba(245, 158, 11, 0.14), transparent 60%), rgba(14, 14, 22, 0.92); box-shadow: 0 30px 80px -40px rgba(245, 158, 11, 0.55); }
.pr-mine { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.pr-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #1a1205; background: linear-gradient(135deg, #fde68a, #f59e0b); white-space: nowrap; box-shadow: 0 6px 20px -6px #f59e0b; }
.pr-card-head { display: flex; gap: 12px; align-items: center; }
.pr-card-head h2 { margin: 0; font-size: 22px; }
.pr-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.pr-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 20px; background: var(--surface-2); border: 1px solid var(--border); flex: none; }
.pr-popular .pr-icon { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #1a1205; border: none; }
.pr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-height: 74px; align-content: flex-start; }
.pr-price strong { font-size: 44px; letter-spacing: -0.04em; line-height: 1; }
.pr-price span { color: var(--muted); font-size: 14px; }
.pr-billed { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.pr-cta { display: grid; gap: 6px; }
.pr-cta .btn { width: 100%; justify-content: center; text-align: center; text-decoration: none; padding: 12px; }
.pr-current { opacity: .85; cursor: default; }
.pr-soon { opacity: .75; cursor: default; }
.pr-note { color: var(--muted); font-size: 12.5px; text-align: center; }
.pr-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: #d5d8e4; }
.pr-points li { display: flex; gap: 9px; align-items: flex-start; }
.pr-points li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #052e1c; background: var(--ok); }
.pr-popular .pr-points li::before { background: #f59e0b; color: #1a1205; }

.pr-info { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.pr-info .card { padding: 22px; display: grid; gap: 10px; align-content: start; }
.pr-info h2 { margin: 0; font-size: 19px; }
.pr-info p { margin: 0; }
.pr-bars { display: grid; gap: 12px; margin-top: 6px; }
.pr-bar { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.pr-bar-label { color: #c9ccd9; font-weight: 600; }
.pr-bar-track { height: 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.pr-bar-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1.2s var(--ease); }
.pr-power.in .pr-bar-track i { width: var(--w); }
.pr-bar-pro .pr-bar-track i { background: linear-gradient(90deg, #fde68a, #f59e0b); box-shadow: 0 0 14px rgba(245, 158, 11, 0.6); }
.pr-bar-studio .pr-bar-track i { background: linear-gradient(90deg, #f59e0b, #f97316, #ef4444); }
.pr-bar:nth-child(2) .pr-bar-track i { transition-delay: .15s; } .pr-bar:nth-child(3) .pr-bar-track i { transition-delay: .3s; } .pr-bar:nth-child(4) .pr-bar-track i { transition-delay: .45s; }
.pr-bar-num { text-align: right; min-width: 74px; line-height: 1.1; }
.pr-bar-num b { display: block; font-size: 15px; }
.pr-bar-num small { color: var(--muted); font-size: 11px; }
.pr-chai { text-align: center; justify-items: center; }
.pr-chai-icon { font-size: 34px; }
.pr-chai h2 { font-size: 34px !important; letter-spacing: -0.03em; }
.pr-chai p { color: #c3c7d6; font-size: 14px; }
.pr-chai-compare { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pr-chai-compare > div:not(.vs) { display: grid; justify-items: center; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; min-width: 92px; }
.pr-chai-compare b { font-size: 20px; }
.pr-chai-compare small { color: var(--muted); }
.pr-chai-compare .hl { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.1); }
.pr-chai-compare .vs { color: var(--muted); font-size: 12px; }
.pr-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.pr-steps li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.pr-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: linear-gradient(var(--accent-2), transparent); transform-origin: top; transform: scaleY(0); transition: transform .8s var(--ease); }
.pr-trial.in .pr-steps li::after { transform: scaleY(1); }
.pr-step-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 16px -4px var(--accent-2); }
.pr-steps b { display: block; font-size: 14.5px; }
.pr-steps small { color: var(--muted); font-size: 13px; }

.pr-compare { padding: 24px; display: grid; gap: 14px; }
.pr-compare h2 { margin: 0; font-size: 22px; }
.pr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 520px; }
.pr-table th, .pr-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.pr-table thead th { font-size: 15px; color: #fff; }
.pr-table tbody th { text-align: left; font-weight: 500; color: #d5d8e4; }
.pr-table td small { display: block; color: var(--muted); font-size: 11.5px; }
.pr-table .hl { background: rgba(245, 158, 11, 0.07); }
.pr-table thead .hl { color: #fde68a; border-radius: 12px 12px 0 0; }
.pr-ico { display: inline-block; width: 26px; }
.pr-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #052e1c; background: var(--ok); }
.pr-no { color: var(--muted); }
.pr-faq { display: grid; gap: 10px; }
.pr-faq h2 { margin: 0 0 4px; font-size: 22px; }
.pr-faq details { padding: 14px 18px; }
.pr-faq summary { cursor: pointer; font-weight: 600; }
.pr-faq details p { margin: 10px 0 0; color: #c3c7d6; }
.pr-final { text-align: center; padding: 32px 22px; display: grid; justify-items: center; gap: 8px; }
.pr-final h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.pr-final p { margin: 0 0 8px; color: #c3c7d6; }
@media (max-width: 980px) {
  .pr-plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; width: 100%; }
  .pr-popular { order: -1; }
  .pr-info { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pr-wrap { padding: 20px 16px 40px; gap: 20px; }
  .pr-founding { flex-direction: column; text-align: center; padding: 20px 16px; }
  .pr-switch button { padding: 8px 12px; font-size: 13px; }
  .pr-price strong { font-size: 38px; }
  .pr-compare { padding: 18px 12px; }
}
@media (prefers-reduced-motion: reduce) { .pr-bar-track i, .pr-ring .ring-fg, .pr-steps li::after { transition: none; } }
/* Room for the Upgrade button on mid-size screens */
@media (min-width: 1081px) { .topbar .brand-name { white-space: nowrap; } }
.pr-wrap[data-currency="USD"] .pr-founding { display: none; }
@media (min-width: 1081px) and (max-width: 1320px) { .topbar .tagline { display: none; } .main-nav a, .nav-drop-btn { padding-left: 10px; padding-right: 10px; } }
.pr-cur-inr, .pr-cur-usd { display: grid; justify-items: center; gap: 10px; }
.pr-wrap[data-currency="INR"] .pr-cur-usd, .pr-wrap[data-currency="USD"] .pr-cur-inr { display: none; }

/* ══ Billing (LR-4) ═══════════════════════════════════════════ */
.pay-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; font-size: 14px; color: #fecaca; background: rgba(244, 63, 94, 0.14); border-bottom: 1px solid rgba(244, 63, 94, 0.4); text-align: center; }
.pay-bar a { color: #fff; font-weight: 700; padding: 4px 12px; border-radius: 99px; background: #e11d48; text-decoration: none; }
.pay-dialog .pay-amount { margin: -4px 0 0; font-size: 15px; color: #c9ccd9; }
.pay-dialog .pay-amount b { font-size: 26px; color: #fff; }
.pay-dialog .pay-amount s { color: var(--muted); margin: 0 4px; }
.pay-dialog select { width: 100%; font-size: 16px; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(0, 0, 0, 0.35); color: var(--text); }
.pay-coupon { display: flex; gap: 8px; }
.pay-coupon input { flex: 1; }
.account-billing { padding: 22px; display: grid; gap: 14px; scroll-margin-top: 90px; }
.account-billing .card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-billing h2 { margin: 0; font-size: 22px; }
.account-billing h3 { margin: 4px 0 0; font-size: 15px; }
.bill-now { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.bill-now b { font-size: 17px; }
.bill-now small { display: block; color: var(--muted); margin-top: 3px; }
.bill-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bill-ok, .bill-warn, .bill-bad { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.bill-ok { color: var(--ok); background: rgba(52, 211, 153, 0.12); }
.bill-warn { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.bill-bad { color: #fb7185; background: rgba(244, 63, 94, 0.14); }
.bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bill-grid select, .bill-buyer select { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(0, 0, 0, 0.35); color: var(--text); font: inherit; }
.bill-invoices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bill-invoices li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; }
.bill-invoices li span { flex: 1; min-width: 0; }
.bill-invoices small { display: block; color: var(--muted); font-size: 12px; }
.bill-buyer summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.bill-buyer form { margin-top: 10px; }
@media (max-width: 640px) { .bill-grid { grid-template-columns: 1fr; } .account-billing { padding: 18px 16px; } }

/* ══ Header and menus (LR-0B) ═════════════════════════════════ */
.hdr .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hdr .site-link, .hdr .mega-btn:not(.account-btn) { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: none; border-radius: 10px; background: transparent; color: #a3a8bb; font: 600 14.5px var(--font, inherit); text-decoration: none; cursor: pointer; transition: color .2s, background .2s; white-space: nowrap; }
.hdr .site-link:hover, .hdr .mega-btn:not(.account-btn):hover, .hdr .mega.open > .mega-btn:not(.account-btn) { color: #fff; background: var(--surface-2); }
.hdr .site-link.active, .hdr .mega.has-active > .mega-btn:not(.account-btn) { color: #fff; }
.hdr .site-link.active::after, .hdr .mega.has-active > .mega-btn:not(.account-btn)::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%); background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.hdr .site-link:focus-visible, .hdr .mega-btn:focus-visible, .hdr .mega-item:focus-visible, .hdr .menu-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.hdr .mega-arrow { font-size: 11px; opacity: .7; transition: transform .2s; }
.hdr .mega.open .mega-arrow { transform: rotate(180deg); }
.mega { position: relative; }
.mega-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; width: 400px; padding: 8px; display: grid; gap: 2px; border-radius: 16px; background: rgba(14, 16, 24, 0.98); border: 1px solid var(--border-strong); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.mega-menu.mega-sm { width: 290px; }
.mega-menu.right { left: auto; right: 0; }
.mega.open > .mega-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
@media (hover: hover) and (min-width: 901px) { .mega:not(.user-menu):hover > .mega-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; } }
.mega-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: 12px; background: transparent; color: var(--text); font: 500 14px var(--font, inherit); text-align: left; text-decoration: none; cursor: pointer; }
.mega-item:hover, .mega-item.active { background: var(--surface-2); }
.mega-item.active { box-shadow: inset 2px 0 0 var(--accent-2); }
.mega-item .nav-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; font-size: 16px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.mega-txt { display: grid; line-height: 1.3; }
.mega-txt b { font-size: 14.5px; color: #fff; }
.mega-txt small { color: var(--muted); font-size: 12.5px; }
.new-badge { padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; color: #052e1c; background: var(--ok); }
.user-head { display: grid; gap: 2px; padding: 8px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.user-head b { font-size: 14.5px; } .user-head small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.plan-badge { justify-self: start; margin-top: 6px; padding: 2px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #c9ccd9; background: var(--surface-3); }
.plan-badge.plan-pro, .plan-badge.plan-studio { color: #1a1205; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.plan-badge.plan-trial { color: #052e2e; background: #67e8f9; }
.hdr .top-actions .account-btn .mega-arrow { margin-left: -2px; }
.hdr .account-btn.mega-btn { cursor: pointer; font: inherit; color: var(--text); }
.sheet-only { display: none; }
.menu-toggle { display: none; position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease); }
.menu-toggle span:nth-child(1) { top: 14px; } .menu-toggle span:nth-child(2) { top: 20px; } .menu-toggle span:nth-child(3) { top: 26px; }
.nav-open .menu-toggle span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
.nav-open .menu-toggle span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
@media (min-width: 901px) {
  .hdr .top-actions .account-btn [data-account-label] { display: inline; }
  .hdr .top-actions .account-btn { padding: 6px 12px 6px 6px; }
}
@media (max-width: 900px) {
  .hdr .tagline { display: none; }
  .menu-toggle { display: inline-block; }
  .hdr .site-nav { position: fixed; left: 0; right: 0; top: var(--topbar-h, 64px); bottom: 0; z-index: 55; margin: 0; padding: 14px 16px 30px; flex-direction: column; align-items: stretch; gap: 4px; overflow-y: auto; background: rgba(9, 10, 16, 0.985); border-top: 1px solid var(--border); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s, transform .22s, visibility 0s .22s; }
  .nav-open .hdr .site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .22s; }
  .hdr .site-link, .hdr .mega-btn:not(.account-btn) { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 17px; border-radius: 14px; }
  .hdr .site-link.active::after, .hdr .mega.has-active > .mega-btn:not(.account-btn)::after { left: auto; right: 14px; bottom: 50%; transform: translateY(50%); }
  .site-nav .mega-menu { position: static; width: auto; display: none; opacity: 1; visibility: visible; transform: none; padding: 4px 0 8px 8px; border: none; background: transparent; box-shadow: none; }
  .site-nav .mega.open > .mega-menu { display: grid; }
  .sheet-only { display: grid; gap: 4px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
  .sheet-only .site-link { justify-content: flex-start; }
  .hdr .top-actions .account-btn { padding: 4px; }
  .hdr .top-actions .account-btn .mega-arrow { display: none; }
  .hdr .top-actions .signin-btn { padding: 6px 12px 6px 6px; }
  .hdr .top-actions .signin-btn [data-account-label] { display: inline; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 400px) { .hdr .brand-name { font-size: 14px; } .hdr .logo-img, .hdr .logo { width: 26px; height: 26px; } .hdr .top-actions { gap: 6px; } .hdr .top-actions .signin-btn { padding: 5px 10px 5px 5px; font-size: 13.5px; } .hdr .top-actions .signin-btn .avatar { width: 24px; height: 24px; } }

/* Footer (LR-0B) */
.foot .foot-cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 24px; max-width: 1160px; margin: 0 auto; text-align: left; }
.foot .foot-col { display: grid; align-content: start; gap: 8px; }
.foot .foot-col a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot .foot-col a:hover { color: var(--text); }
.foot .foot-title { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9ccd9; }
.foot .foot-brand p { margin: 0; color: var(--muted); font-size: 14px; }
.foot .foot-brand .brand-name { font-weight: 700; font-size: 16px; color: var(--text); }
.foot .foot-note { margin: 26px auto 0; max-width: 1160px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .foot .foot-cols { grid-template-columns: 1fr 1fr; } .foot .foot-brand { grid-column: 1 / -1; } }
.pr-hero .pr-h1 { margin: 2px 0 0; font-size: clamp(16px, 1.6vw, 18px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fde68a; }
.pr-hero .pr-lead { margin: 4px 0 0; font-size: clamp(30px, 4.6vw, 54px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; max-width: 860px; color: var(--text); }
/* A blurred or transformed header would trap the fixed phone sheet inside it: drop the effect while the sheet is open */
@media (max-width: 900px) { .nav-open .topbar.hdr { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; filter: none !important; background: rgb(9, 10, 16) !important; } }
@media (max-width: 900px) { .nav-open .jump-preview { display: none !important; } .hdr .mega.has-active > .mega-btn:not(.account-btn)::after { display: none; } }

/* ══ Prompt Generator page (/prompt-generator) ════════════════ */
.hub-wrap { max-width: 1240px; margin: 0 auto; padding: 8px 24px 60px; display: grid; gap: 46px; }
.hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.hub-head h2 { margin: 4px 0 0; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; }
.hub-head .eyebrow { margin: 0; }
.hub-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.hub-cat { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: rgba(12, 14, 22, 0.85); border: 1px solid var(--border); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.hub-cat:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 30px 70px -40px rgba(249, 115, 22, .5); }
.hub-cat-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.hub-cat-img img, .hub-cat-img svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.hub-cat:hover .hub-cat-img img, .hub-cat:hover .hub-cat-img svg { transform: scale(1.04); }
.hub-cat-ico { position: absolute; left: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .2); }
.hub-cat-body { display: grid; gap: 8px; padding: 18px 18px 20px; flex: 1; align-content: start; }
.hub-cat-body h2 { margin: 0; font-size: 21px; }
.hub-cat-body h2 a { color: #fff; text-decoration: none; }
.hub-cat-body p { margin: 0; color: #b7bbcc; font-size: 14px; }
.hub-cat-body .hub-ex-label { margin-top: 6px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hub-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hub-examples a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: #d5d8e4; font-size: 13.5px; text-decoration: none; transition: border-color .2s, color .2s; }
.hub-examples a:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: #fff; }
.hub-examples a span { color: var(--accent); }
.hub-open { justify-self: start; margin-top: 8px; text-decoration: none; }
.hub-arrows { display: flex; gap: 8px; }
.hub-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 22px; cursor: pointer; }
.hub-arrow:hover { border-color: var(--accent); }
.hub-arrow:focus-visible, .reel-track:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.reel-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 240px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.reel { scroll-snap-align: start; display: grid; gap: 10px; }
.reel-media { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #0b0d14; border: 1px solid var(--border); }
.reel-media video, .reel-media img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.reel-chip { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reel-num { position: absolute; right: 10px; top: 8px; font: 800 22px var(--font, inherit); color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.reel-body h3 { margin: 0 0 8px; font-size: 15px; }
.reel-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.reel-actions .btn { text-decoration: none; }
.reel-link { font-size: 12.5px; color: var(--muted); }
.reel-idea .reel-art { position: absolute; inset: 0; display: grid; align-content: end; gap: 10px; padding: 18px; background: radial-gradient(120% 70% at 30% 10%, hsl(var(--h) 70% 50% / .6), transparent 62%), linear-gradient(160deg, hsl(calc(var(--h) + 40) 55% 20%), #07080d); }
.reel-idea .reel-ico { font-size: 34px; color: #fff; opacity: .9; }
.reel-idea .reel-art p { margin: 0; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hub-shot { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.hub-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.hub-shot:hover img { transform: scale(1.05); }
.hub-shot span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; color: #fff; font-size: 13px; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.hub-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.hub-steps li { position: relative; display: grid; gap: 6px; padding: 20px 18px; border-radius: 18px; border: 1px solid var(--border); background: rgba(12, 14, 22, 0.8); }
.hub-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 18px; z-index: 1; }
.hub-steps .step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px -4px var(--accent); }
.hub-steps b { font-size: 16px; }
.hub-steps small { color: var(--muted); font-size: 13.5px; }
.hub-faq { display: grid; gap: 10px; }
.hub-faq h2 { margin: 0 0 4px; font-size: 22px; }
.hub-faq details { padding: 14px 18px; }
.hub-faq summary { cursor: pointer; font-weight: 600; }
.hub-faq details p { margin: 10px 0 0; color: #c3c7d6; }
@media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-steps { grid-template-columns: 1fr 1fr; } .hub-steps li::after { display: none; } }
@media (max-width: 560px) { .hub-wrap { padding: 4px 16px 40px; gap: 34px; } .reel-track { grid-auto-columns: 72%; } .hub-steps { grid-template-columns: 1fr; } .hub-arrows { display: none; } }
.hub-wrap > * { min-width: 0; }
/* Prompt Generator: the words open the page, the arrow opens the list */
.hdr .mega-split { display: inline-flex; align-items: center; }
.hdr .mega-link { position: relative; display: inline-flex; align-items: center; padding: 9px 4px 9px 13px; border-radius: 10px 0 0 10px; color: #a3a8bb; font: 600 14.5px var(--font, inherit); text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
.hdr .mega-split:hover .mega-link, .hdr .mega-split.open .mega-link { color: #fff; background: var(--surface-2); }
.hdr .mega-split.has-active .mega-link { color: #fff; }
.hdr .mega-split.has-active .mega-link::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%); background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.hdr .mega-split > .mega-btn.mega-caret { padding: 9px 10px 9px 4px; border-radius: 0 10px 10px 0; }
.hdr .mega-split > .mega-btn.mega-caret::after { display: none !important; }
.hdr .mega-split:hover > .mega-btn.mega-caret { background: var(--surface-2); color: #fff; }
.hdr .mega-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.hdr .mega-split > .mega-menu { top: calc(100% + 10px); }
@media (max-width: 900px) {
  .hdr .mega-split { display: grid; grid-template-columns: 1fr auto; }
  .hdr .mega-link { padding: 15px 14px; font-size: 17px; border-radius: 14px 0 0 14px; }
  .hdr .mega-split > .mega-btn.mega-caret { width: 56px !important; justify-content: center !important; padding: 15px 0 !important; border-radius: 0 14px 14px 0 !important; }
  .hdr .mega-split > .mega-menu { grid-column: 1 / -1; }
  .hdr .mega-split.has-active .mega-link::after { display: none; }
}
/* Links styled as buttons never show an underline */
a.btn, a.btn:hover, a.btn:focus, a.btn:visited { text-decoration: none; }
/* Google button: a dark page makes the Google frame draw a white box around its button; keep the frame transparent */
.auth-google { color-scheme: light; min-height: 44px; }
.auth-google iframe { color-scheme: light; background: transparent !important; border-radius: 99px; }
.auth-google > div { margin: 0 auto; }
.plan-cta .plan-upgrade { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 10px 18px; border: none; border-radius: 99px; font-weight: 700; color: #1a1205; background: linear-gradient(135deg, #fde68a, #f59e0b 55%, #f97316); box-shadow: 0 0 24px -6px #f59e0b; }
.plan-cta .plan-upgrade:hover { color: #1a1205; transform: translateY(-1px); }
.plan-cta { gap: 8px; }

/* ── Image to Prompt (LR-3A) ───────────────────────────────────── */
.an-page .muted { color: var(--muted); }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.select.small { padding: 6px 30px 6px 10px; font-size: 13px; min-height: 34px; }
.an-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); margin-bottom: 14px; }
.an-switch-btn { padding: 7px 16px; border-radius: 99px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; }
.an-switch-btn.active { background: var(--accent); color: #fff; }
.an-switch-btn.soon { opacity: .6; cursor: not-allowed; }
.an-switch-btn small { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.an-main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; display: grid; gap: 22px; }
.an-main > * { min-width: 0; }
.an-app { padding: 22px; }
.an-off { text-align: center; padding: 36px 20px; }

.an-drop { display: grid; justify-items: center; gap: 8px; padding: 42px 18px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.an-drop:hover, .an-drop:focus-within, .an-dragging .an-drop { border-color: var(--accent); background: var(--accent-soft); }
.an-drop-icon { font-size: 30px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.an-drop strong { font-size: 17px; }
.an-pick { margin-top: 6px; pointer-events: none; }
.an-dragging::after { content: "Drop your image to analyse it"; position: fixed; inset: 12px; z-index: 90; display: grid; place-items: center; border: 3px dashed var(--accent); border-radius: var(--radius); background: rgba(7, 8, 13, .82); color: #fff; font-size: 20px; font-weight: 700; pointer-events: none; }
.an-hint-field { display: grid; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.an-rights { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; cursor: pointer; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.an-rights input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.an-rights.need { border-color: var(--warn); background: var(--warn-bg); }
.an-privacy { margin: 8px 0 0; font-size: 13px; }
.an-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn); font-size: 13.5px; }

.an-busy { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 22px; align-items: start; }
.an-busy-ref img, .an-ref img { width: 100%; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.an-busy-ref img:not([src]), .an-busy-ref img[src=""] { aspect-ratio: 4 / 3; }
.an-step { font-weight: 700; font-size: 17px; margin: 4px 0 12px; }
.an-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.an-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-3)); transition: width .8s var(--ease); }
.an-skel { display: grid; gap: 10px; margin: 20px 0; }
.an-skel i { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: an-shine 1.4s linear infinite; }
.an-skel i.short { width: 60%; }
@keyframes an-shine { to { background-position: -200% 0; } }

.an-error { text-align: center; padding: 30px 10px; }
.an-error-icon { font-size: 30px; color: var(--warn); }
.an-error p { font-size: 16px; margin: 10px auto 18px; max-width: 520px; }

.an-result { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 26px; align-items: start; }
.an-ref { position: relative; }
.an-badge { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .65); color: #fff; font: 600 12px var(--mono); }
.an-summary { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 14px 0; }
.an-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.an-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); color: var(--text); font: 600 12px var(--mono); cursor: pointer; }
.an-swatch span { width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255, 255, 255, .25); }
.an-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-texts { margin-top: 16px; font-size: 14px; }
.an-texts ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.an-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.an-tabs .tab { white-space: nowrap; flex: 1 0 auto; padding-inline: 14px; }
.an-pane { margin-top: 14px; }
.an-models { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.an-out { max-height: 420px; overflow: auto; }
.an-json { font-size: 12.5px; }
.an-row { display: grid; grid-template-columns: 12px minmax(90px, 150px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.an-row-label { font-weight: 600; font-size: 14px; }
.an-row-ctl { display: grid; gap: 4px; justify-items: start; }
.an-row-ctl .select { width: 100%; max-width: 340px; }
.an-multi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.an-multi .chip { font-size: 12.5px; }
.an-custom { font-size: 12.5px; }
.an-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; background: #6b7280; }
.an-dot.hi { background: var(--ok); }
.an-dot.mid { background: var(--warn); }
.an-note { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--tip-bg); color: var(--tip); font-size: 13.5px; }
#an-guide h3 { font-size: 15px; margin: 18px 0 6px; }
#an-guide h3:first-child { margin-top: 0; }
.an-refnote { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.an-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.an-edit { display: grid; gap: 4px; }
.an-edit small { color: var(--muted); font-size: 12.5px; }
.an-studio-pick { max-width: 280px; }
.an-report-btn { margin-left: auto; align-self: center; font-size: 13px; color: var(--muted); }
.an-report-cats { display: grid; gap: 8px; margin: 12px 0; text-align: left; font-size: 14px; }
.an-report-cats label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.an-report-dlg textarea { width: 100%; margin-bottom: 10px; }

@media (max-width: 760px) {
  .an-app { padding: 16px; }
  .an-busy, .an-result { grid-template-columns: minmax(0, 1fr); }
  .an-busy-ref { max-width: 180px; }
  .an-ref img { max-height: 300px; object-fit: contain; }
  .an-row { grid-template-columns: 12px minmax(0, 1fr); }
  .an-row-ctl { grid-column: 2; }
  .an-actions .btn { flex: 1 1 auto; }
  .an-edit { flex: 1 1 100%; }
  .an-edit .btn { width: 100%; }
  .an-report-btn { margin-left: 0; }
}

/* ── Media to Prompt menu and footer column (LR-3A) ── */
.foot .foot-cols.has-media { grid-template-columns: 1.3fr repeat(5, 1fr); }
@media (min-width: 761px) and (max-width: 1100px) { .foot .foot-cols, .foot .foot-cols.has-media { grid-template-columns: repeat(5, 1fr); } .foot .foot-cols .foot-brand { grid-column: 1 / -1; } .foot .foot-cols:not(.has-media) { grid-template-columns: repeat(4, 1fr); } .foot .foot-cols.has-media .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) { .foot .foot-cols.has-media { grid-template-columns: 1fr 1fr; } }
.foot .foot-soon { color: var(--muted); font-size: 14px; opacity: .75; }
.foot .foot-soon small, .soon-badge { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #c9ccd9; background: var(--surface-3); vertical-align: 1px; }
.mega-item.is-soon { cursor: default; opacity: .7; }
.mega-item.is-soon:hover { background: transparent; }

/* ── Hand-off banner in the generators (LR-3A) ── */
.kit-handoff { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); background: var(--tip-bg); color: var(--text); font-size: 14px; animation: pop .38s var(--ease); }
.kit-handoff-ico { font-size: 18px; flex: none; }
.kit-handoff-txt { flex: 1; min-width: 0; line-height: 1.45; }
.kit-handoff-txt small { display: block; color: var(--muted); font-size: 12.5px; }
.kit-handoff .btn { flex: none; }
.kit-sb { flex-wrap: wrap; } /* Update 2.0 U2-5: storyboard banner, two buttons wrap on phones */
.kit-handoff-x { flex: none; background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.kit-handoff-x:hover { color: var(--text); }
.kit-handoff-x:focus-visible { outline: 2px solid var(--accent); }

/* ── Video to Prompt: key frames (LR-3A) ── */
.an-frames-title { margin: 0 0 4px; font-size: 18px; }
.an-strip { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 12px; margin-top: 12px; scroll-snap-type: x proximity; }
.an-shot { flex: none; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); scroll-snap-align: start; }
.an-shot-label { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); }
.an-shot-frames { display: flex; gap: 6px; }
.an-frame { margin: 0; display: grid; gap: 4px; justify-items: center; }
.an-frame img { height: 96px; width: auto; max-width: 172px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #000; display: block; }
.an-frame figcaption { font: 500 11.5px var(--mono); color: var(--muted); text-align: center; }
.an-sound { font-size: 13px; margin: 4px 0 0; }
.an-busy-ref img:not([src]) { background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='16' font-size='12' text-anchor='middle'%3E%F0%9F%8E%AC%3C/text%3E%3C/svg%3E") center / 48px no-repeat; }
@media (max-width: 760px) { .an-frame img { height: 78px; max-width: 140px; } }

/* ── Video to Prompt: result (LR-3A) ── */
.an-v-strip .an-frame { cursor: default; transition: opacity .2s; }
.an-v-strip .an-frame figcaption b { color: var(--accent-2); font-weight: 700; }
.an-v-strip:has(.lit) .an-frame:not(.lit) { opacity: .35; }
.an-v-strip .an-frame.lit img { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-2); }
.an-vgrid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 10px; }
.an-look { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 12px; }
.an-look h3, .an-sub { margin: 0 0 8px; font-size: 15px; }
.an-sub { margin-top: 18px; }
.an-sub small { font-weight: 400; font-size: 12.5px; }
.an-look dl { margin: 0; display: grid; gap: 6px; }
.an-look dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.an-look dt { color: var(--muted); }
.an-look dd { margin: 0; }
.an-shotlist { display: grid; gap: 10px; }
.an-shotcard { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 10px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.an-shotcard:hover { border-color: var(--border-strong); }
.an-shotcard[aria-pressed="true"] { border-color: var(--accent-2); background: var(--tip-bg); }
.an-shotcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-shotcard img { width: 92px; height: 68px; object-fit: cover; border-radius: 8px; background: #000; }
.an-shotcard-body { display: grid; gap: 5px; min-width: 0; }
.an-shotcard-head { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.an-shotcard-head b { white-space: nowrap; }
.an-shotcard-head small { white-space: nowrap; }
.an-shotcard-head small { color: var(--muted); font: 500 12px var(--mono); }
.an-shotcard-head .an-dot { margin-left: auto; }
.an-shotcard-desc { font-size: 13.5px; line-height: 1.4; }
.an-shotcard-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.an-shotcard-facts i { font-style: normal; color: var(--muted); }
.an-shotcard-act { font-size: 12.5px; color: var(--muted); }
.an-startframe { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 12px; align-items: start; }
.an-startframe img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }
.an-startframe p { margin: 0; font-size: 14px; }
@media (max-width: 760px) {
  .an-vgrid { grid-template-columns: minmax(0, 1fr); }
  .an-vgrid .an-right { order: -1; }
  .an-shotcard { grid-template-columns: 72px minmax(0, 1fr); }
  .an-shotcard img { width: 72px; height: 54px; }
  .an-startframe { grid-template-columns: minmax(0, 1fr); }
  .an-startframe img { max-width: 220px; }
}

/* ── Media to Prompt entry points (LR-3A step A6) ── */
.hero-media-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 14px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); background: var(--tip-bg); color: var(--text); font-size: 14px; text-decoration: none; transition: border-color .2s, transform .2s; }
.hero-media-chip b { color: var(--accent-2); font-weight: 600; }
.hero-media-chip:hover { border-color: var(--accent-2); transform: translateY(-1px); color: var(--text); }
.hero-media-chip:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.kit-refbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 14px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px dashed color-mix(in srgb, var(--accent-2) 45%, transparent); background: var(--tip-bg); }
.kit-refbar small { color: var(--muted); font-size: 12.5px; }
.kit-refdlg { width: min(1100px, calc(100vw - 24px)); height: min(860px, calc(100dvh - 24px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); color: var(--text); overflow: hidden; }
.kit-refdlg[open] { display: flex; flex-direction: column; }
.kit-refdlg::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.kit-refdlg-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.kit-refdlg iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
@media (max-width: 760px) { .kit-refdlg { inset: 0; margin: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; } }
/* Image and Video to Prompt opened inside a generator */
.an-embed .hdr, .an-embed .nav-scrim, .an-embed .site-footer, .an-embed .ad-slot, .an-embed .pay-bar { display: none !important; }
.an-embed .an-main { padding-top: 14px; }
/* A hidden tooltip still made the page wider than a phone (sideways scroll on the Thumbnail page): only draw it while shown */
.kit-tip:not(:hover):not(:focus):not(.show)::after, .kit-tip:not(:hover):not(:focus):not(.show)::before { display: none; }

/* ── Account panel (LR-5): sidebar on desktop, scrolling tab bar on phones ── */
.acc-shell { max-width: 1180px; margin: 0 auto; padding: 26px 20px 50px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.acc-shell .acc-main { max-width: none; margin: 0; padding: 0; }
.acc-nav { position: sticky; top: calc(var(--topbar-h, 76px) + 8px); display: grid; gap: 2px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.acc-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 500 14px var(--font); text-decoration: none; text-align: left; cursor: pointer; white-space: nowrap; }
.acc-nav-link:hover { background: var(--surface-2); color: var(--text); }
.acc-nav-link.active { background: var(--surface-3); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
.acc-nav-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.acc-nav-ico { width: 20px; text-align: center; flex: none; }
.acc-nav-out { margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; padding-top: 12px; }
.acc-card { padding: 20px 22px; }
.acc-card h2 { margin: 0 0 10px; font-size: 17px; }
.acc-card .card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acc-card .card-top h2 { margin: 0 0 10px; }
.acc-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acc-title h1 { margin: 0; font-size: 24px; }
.acc-count { font: 600 12.5px var(--mono); color: var(--muted); padding: 4px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); }
.acc-count.full { color: var(--warn); border-color: var(--warn); }
.acc-lead { margin: -6px 0 0; }
.acc-hero { display: flex; align-items: center; gap: 16px; padding: 20px 22px; flex-wrap: wrap; }
.acc-who h1 { margin: 0; font-size: 24px; }
.acc-who p { margin: 4px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.acc-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-3)); }
.acc-avatar.lg { width: 64px; height: 64px; font-size: 26px; }
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-btn .avatar.has-img { overflow: hidden; background: none; padding: 0; }
.account-btn .avatar.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.acc-danger-bar, .acc-note-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; font-size: 14px; }
.acc-danger-bar { border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .08); }
.acc-note-bar { border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); background: var(--tip-bg); }
.acc-danger-bar.inline, .acc-note-bar.inline { border: 1px solid; border-radius: var(--radius-sm); margin: 0 0 12px; }
.acc-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acc-recent li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.acc-recent-t { flex: 1; min-width: 0; display: grid; }
.acc-recent-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.acc-recent-t small { color: var(--muted); font-size: 12px; }
.acc-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.acc-quick-link { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .2s, transform .2s; }
.acc-quick-link small { color: var(--muted); font-weight: 400; font-size: 12px; }
.acc-quick-link:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--text); }
.acc-selects { display: flex; gap: 8px; flex-wrap: wrap; }
.saved-model { font: 500 11px var(--mono); color: var(--muted); padding: 2px 7px; border-radius: 99px; border: 1px solid var(--border); }
.acc-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.acc-char { display: grid; gap: 10px; padding: 16px; align-content: start; }
.acc-char header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.acc-char h3 { margin: 0; font-size: 16px; }
.acc-char-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.acc-char-items b { color: var(--muted); font-weight: 500; }
.acc-char footer { display: flex; gap: 6px; flex-wrap: wrap; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.acc-table th, .acc-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.acc-table th { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.acc-chart { width: 100%; height: 140px; display: block; }
.acc-chart rect { fill: var(--accent-2); opacity: .85; }
.acc-chart rect:hover { opacity: 1; fill: var(--accent); }
.acc-chart-x { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 4px; }
.meter-reset { color: var(--muted); font-size: 12px; }
.meter.high .meter-bar i { background: linear-gradient(90deg, var(--warn), var(--accent)); }
.acc-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acc-photo-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acc-notify { display: grid; gap: 12px; justify-items: start; }
.acc-switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.acc-switch input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.acc-switch span { display: grid; gap: 2px; }
.acc-switch small { color: var(--muted); }
.acc-field { display: grid; gap: 6px; font-size: 13.5px; }
.danger-card .danger-box { background: rgba(248, 113, 113, .04); }
.kit-lock-save { margin-top: 10px; }
@media (max-width: 900px) {
  .acc-shell { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 40px; gap: 14px; }
  .acc-nav { position: sticky; top: calc(var(--topbar-h, 64px) - 2px); z-index: 20; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 14px; background: var(--surface-solid); }
  .acc-nav::-webkit-scrollbar { display: none; }
  .acc-nav-link { flex: none; padding: 8px 12px; font-size: 13.5px; }
  .acc-nav-link.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .acc-nav-out { margin: 0; border: 0; padding-top: 8px; border-radius: 10px; }
  .acc-card { padding: 16px; }
  .acc-table thead { display: none; }
  .acc-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .acc-table td { border: 0; padding: 0; }
  .acc-table td:last-child { grid-column: 1 / -1; padding-top: 6px; }
}

/* ── Admin "view as user" banner (LR-6) ── */
.viewas-bar { position: sticky; top: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; padding: 10px 16px; background: #7c3aed; color: #fff; font-size: 14px; text-align: center; }
.viewas-bar a { color: #fff; font-weight: 700; text-decoration: underline; }

/* ── Footer social links (LR-6) ── */
.foot .foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.foot .foot-social-link { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; }
.foot .foot-social-link:hover { border-color: var(--accent); color: var(--text); }

/* ── Contact page (LR-6 step 6E) ── */
.contact-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 20px; align-items: start; max-width: 1040px; }
.contact-card h1 { margin-top: 0; }
.contact-form { display: grid; gap: 12px; margin-top: 12px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form .tp-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-done { padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .35); color: var(--text); }
.contact-side h2 { margin-top: 0; font-size: 17px; }
@media (max-width: 760px) { .contact-wrap { grid-template-columns: minmax(0, 1fr); } .contact-grid { grid-template-columns: 1fr; } }

/* ── Announcement bar (LR-6, Admin, Content) ── */
.ann-bar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 44px 9px 16px; font-size: 14px; text-align: center; color: #fff; }
.ann-bar[hidden] { display: none; }
.ann-bar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ann-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; opacity: .8; font-size: 15px; cursor: pointer; padding: 4px 8px; }
.ann-x:hover, .ann-x:focus-visible { opacity: 1; }
.ann-orange { background: linear-gradient(90deg, #c2410c, #ea580c); }
.ann-blue { background: linear-gradient(90deg, #1d4ed8, #2563eb); }
.ann-green { background: linear-gradient(90deg, #047857, #059669); }
.ann-purple { background: linear-gradient(90deg, #6d28d9, #7c3aed); }
.ann-red { background: linear-gradient(90deg, #b91c1c, #dc2626); }

/* LR-8: legal pages, Help center, What's new */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }
.legal-nav a { color: var(--muted); }
.legal-nav a:hover, .legal-nav a:focus-visible { color: var(--text); }
.help-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.help-wrap > * { min-width: 0; }
.help-wrap [hidden] { display: none !important; }
.help-head h1 { margin: 0 0 6px; }
.help-search { display: block; margin: 14px 0 12px; }
.help-search .input { width: 100%; font-size: 16px; }
.help-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.help-toc a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; color: var(--text); text-decoration: none; font-size: 14px; }
.help-toc a:hover, .help-toc a:focus-visible { border-color: var(--accent); }
.help-sec h2 { margin: 0 0 8px; font-size: 20px; }
.help-item { border-bottom: 1px solid var(--border); }
.help-item:last-of-type { border-bottom: 0; }
.help-item summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style-position: outside; }
.help-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.help-a { padding: 0 0 12px; color: var(--muted); line-height: 1.6; }
.help-a ol, .help-a ul { margin: 0; padding-left: 20px; }
.help-a p { margin: 0 0 8px; }
.help-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.help-table th, .help-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.help-table thead th { color: var(--muted); font-weight: 600; }
.help-sec .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.help-contact p { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.changelog .cl-entry { padding: 14px 0; border-top: 1px solid var(--border); }
.changelog .cl-entry time { color: var(--muted); font: 600 12px var(--mono); letter-spacing: .04em; }
.changelog .cl-entry h2 { margin: 4px 0 6px; font-size: 19px; }
.changelog .cl-entry p { margin: 0; }

/* LR-8 step 8B: pricing trust strip and founder note, About founder, payment pages, 404 */
.pr-trust { max-width: 1160px; margin: 6px auto 26px; padding: 0 16px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.pr-trust-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; color: var(--muted); font-size: 14px; }
.pr-trust-line b { color: var(--ok, #22c55e); }
.pr-pay { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pr-pay li { padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px; font: 600 12.5px var(--mono); letter-spacing: .02em; color: var(--text); background: rgba(255, 255, 255, 0.03); }
.pr-pay .pr-rzp { border-style: dashed; color: var(--muted); font-family: inherit; font-weight: 500; }
.pr-founder { display: flex; gap: 18px; align-items: center; max-width: 820px; margin: 0 auto 22px; }
.pr-founder-photo, .about-photo { border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--border); }
.pr-founder-note { margin: 0 0 8px; font-size: 17px; line-height: 1.55; }
.pr-founder-name { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.pr-founder-name span { color: var(--muted); }
.about-founder { display: flex; gap: 20px; align-items: flex-start; margin: 24px 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); }
.about-founder h2 { margin: 0 0 2px; }
.about-role { margin: 0 0 10px; color: var(--muted); }
.bill-unlocked { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(34, 197, 94, 0.06); }
.bill-h { margin: 0 0 6px; font-weight: 700; }
.bill-unlocked ul, .bill-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14.5px; }
.bill-tips { color: var(--muted); padding-left: 2px; }
.bill-tips li::before { content: "• "; }
.err-card { text-align: center; }
.err-code { margin: 0; font: 800 64px/1 var(--mono); color: var(--accent); opacity: .85; }
.err-card h1 { margin: 10px 0 6px; }
.err-search { display: flex; gap: 8px; max-width: 420px; margin: 18px auto; }
.err-search .input { flex: 1; min-width: 0; }
.err-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
@media (max-width: 560px) { .pr-founder, .about-founder { flex-direction: column; align-items: flex-start; } }

/* LR-9 step 9A: hero plan line and founder band on home */
.home-plan { margin: -4px 0 16px; color: var(--text); font-weight: 600; font-size: var(--fs-md); }
.founder-band { max-width: 1160px; margin: 8px auto 28px; padding: 0 16px; }
.acc-card .ui-empty { padding: var(--space-4) var(--space-2); }

/* LR-9 step 9B: red usage pill at the limit, locked features stay visible */
.usage-pill.out { color: #fecaca; border-color: rgba(248, 113, 113, 0.5); }
.usage-pill.out::before { background: var(--err); box-shadow: 0 0 8px var(--err); }
.is-locked { opacity: .78; }
.is-locked:hover { opacity: 1; }
.is-locked .ui-badge-locked { margin-left: 4px; }

/* LR-9 step 9B: account dashboard, onboarding checklist, studio tour */
.account-plan.plan-paid { border: 1px solid transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, var(--grad) border-box; }
.acc-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 10px; }
.acc-ring { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.acc-ring.off { opacity: .6; }
.acc-ring .ui-ring { --size: 52px; flex: none; }
.acc-ring-t { display: grid; gap: 2px; min-width: 0; }
.acc-ring-t small { color: var(--muted); font-size: var(--fs-xs); }
.acc-recent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.acc-recent .acc-rcard { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "t k" "t n" "b b"; gap: 4px 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.acc-rcard .acc-rthumb { grid-area: t; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; font-weight: 800; font-size: 18px; background: var(--accent-soft); color: var(--accent); }
.acc-rcard .saved-kind { grid-area: k; justify-self: start; }
.acc-rcard .acc-recent-t { grid-area: n; min-width: 0; }
.acc-rcard .acc-recent-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-rcard .btn { grid-area: b; justify-self: start; }
.acc-onboard .ob-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 6px 0 14px; }
.acc-onboard .ob-bar i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ob-steps li { display: flex; align-items: center; gap: 12px; }
.ob-steps li > span:nth-child(2) { flex: 1; display: grid; }
.ob-steps small { color: var(--muted); }
.ob-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong); font-weight: 700; font-size: 13px; flex: none; }
.ob-steps li.done .ob-dot { background: var(--ok); border-color: var(--ok); color: #06210f; }
.ob-steps li.done b { text-decoration: line-through; color: var(--muted); }
.tour-hl { position: relative; z-index: 41; box-shadow: 0 0 0 3px var(--accent-2), 0 0 0 9999px rgba(0, 0, 0, 0.45) !important; border-radius: var(--radius-sm); }
.tour-card { position: fixed; z-index: 90; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); padding: 16px 18px; background: var(--surface-solid); box-shadow: var(--shadow-lg); }
.tour-step { font: 600 var(--fs-xs) var(--mono); color: var(--accent-2); letter-spacing: .06em; }
.tour-text { margin: 6px 0 12px; }
.tour-actions { display: flex; justify-content: space-between; gap: 8px; }

/* LR-9 step 9C: simple mode, mobile prompt sheet, AI skeleton, "Understood as" */
.simple-bar, .simple-back { display: none; }
.rpg-simple .simple-bar { display: grid; gap: 12px; }
html:not(.rpg-simple) .simple-back { display: inline-flex; justify-self: end; margin-bottom: 8px; }
html:not(.rpg-simple) .builder:not([data-simple-studio]) .simple-back { display: none; }
.rpg-simple .builder[data-simple-studio] > .card:not([data-simple]):not(.simple-bar) { display: none; }
.simple-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.simple-label { font: 600 var(--fs-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.simple-plat { display: inline-flex; align-items: center; gap: 4px; }
.simple-plat .select { min-width: 170px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.seg-btn { padding: 6px 14px; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--muted); font: 600 var(--fs-sm) var(--font); text-decoration: none; cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.simple-go { font-size: var(--fs-md); padding-inline: 22px; }
.simple-need { box-shadow: 0 0 0 3px var(--warn) !important; }
.simple-flash { box-shadow: 0 0 0 3px var(--accent-2), var(--glow) !important; transition: box-shadow .3s; }
.prompt-sheet { display: none; }
@media (max-width: 899px) {
  .has-prompt-sheet .prompt-sheet { display: flex; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 70; align-items: center; gap: 8px; padding: 8px 8px 8px 14px;
    border: 1px solid var(--border-strong); border-radius: 16px; background: color-mix(in srgb, var(--surface-solid) 94%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-lg);
    transition: transform var(--dur) var(--ease), opacity var(--dur); }
  .prompt-sheet.ps-hide { transform: translateY(130%); opacity: 0; pointer-events: none; }
  .ps-open { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; background: none; border: 0; color: var(--text); padding: 2px 0; cursor: pointer; }
  .ps-line { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-score { font: 600 11px var(--mono); color: var(--accent-2); }
  .ps-copy { flex: none; min-height: 40px; padding-inline: 16px; }
  .has-prompt-sheet .site-footer { padding-bottom: 84px; }
  .has-prompt-sheet .tour-card { bottom: 84px; }
}
.ai-skel { padding: 14px; margin-top: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.ai-skel[hidden] { display: none; }
.understood { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.understood[hidden] { display: none; }
.understood b { color: var(--accent-2); }
.understood span { color: var(--text); }

/* LR-9 step 9D: before and after slider */
.ba-section { max-width: 920px; margin: 30px auto; padding: 0 16px; text-align: center; }
.ba { --pos: 50%; position: relative; aspect-ratio: 4 / 5; max-height: 640px; margin: 18px auto 10px; max-width: 520px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .6); pointer-events: none; }
.ba-line::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; font-weight: 700; }
.ba-tag { position: absolute; top: 12px; padding: 4px 10px; border-radius: var(--radius-pill); font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; background: rgba(0, 0, 0, .6); color: #fff; pointer-events: none; }
.ba-l { left: 12px; } .ba-r { right: 12px; background: var(--accent); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-range:focus-visible + .ba-line, .ba:focus-within .ba-line { box-shadow: 0 0 0 3px var(--accent-2); }
.ba-idea { color: var(--muted); margin: 6px 0 12px; }
.ba-idea b { color: var(--text); }
.ba-pick { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.ba-thumb { padding: 0; border: 2px solid var(--border); border-radius: 12px; overflow: hidden; background: none; cursor: pointer; }
.ba-thumb[aria-pressed="true"] { border-color: var(--accent); }
.ba-thumb img { display: block; width: 64px; height: 64px; object-fit: cover; }

/* LR-9 step 9D: Prompt Library masonry with hover actions */
.lib-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.lib-filterbar .lib-filters { margin: 0; }
.lib-selects { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-masonry { display: block; columns: 3 280px; column-gap: 16px; }
.lib-masonry .lib-card { break-inside: avoid; margin: 0 0 16px; display: block; padding: 0; overflow: hidden; }
.lib-masonry .lib-card[hidden] { display: none; }
.lib-media-wrap { position: relative; }
.lib-masonry .lib-media { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lib-masonry .lib-media img { display: block; width: 100%; height: auto; }
.lib-masonry .lib-badge { position: absolute; top: 10px; left: 10px; }
.lib-hover { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .85) 45%); opacity: 0; transform: translateY(8px); transition: opacity var(--dur), transform var(--dur); }
.lib-card:hover .lib-hover, .lib-card:focus-within .lib-hover { opacity: 1; transform: none; }
.lib-first { margin: 0 0 8px; color: #fff; font-size: var(--fs-sm); line-height: 1.4; }
.lib-hover-actions { display: flex; gap: 8px; }
.lib-masonry .lib-body { padding: 12px 14px 14px; }
.lib-masonry .lib-title { margin: 0 0 2px; font-size: var(--fs-md); }
.lib-masonry .lib-model { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-xs); }
.lib-full summary, .lib-masonry .lib-tip summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); }
@media (hover: none) { .lib-hover { position: static; opacity: 1; transform: none; background: var(--surface-2); padding: 10px 12px; } .lib-first { color: var(--text); } }

/* LR-9 step 9D: sign-in gallery and Pricing polish */
.auth-gallery { position: relative; aspect-ratio: 4 / 5; max-width: 340px; margin: 18px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.ag-item { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.ag-item.on { opacity: 1; }
.ag-item img { width: 100%; height: 100%; object-fit: cover; }
.ag-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: var(--fs-sm); }
.pr-card.pr-popular { border: 1px solid transparent; background: linear-gradient(rgba(14, 14, 22, 0.96), rgba(14, 14, 22, 0.96)) padding-box, var(--grad) border-box; }
@media (min-width: 900px) { .pr-card.pr-popular { transform: translateY(-10px); } }
.pr-no { font-size: 13px; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .ag-item { transition: none; } .lib-hover { transition: none; } }

/* LR-10 cookie consent bar */
.cookie-bar { position: fixed; z-index: 95; left: 12px; right: 12px; bottom: 12px; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px;
  border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface-solid); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; flex: 1 1 320px; color: var(--muted); }
.cc-actions { display: flex; gap: 8px; margin-left: auto; }
.foot-consent { margin: 4px 0 0; text-align: center; font-size: var(--fs-xs); }
.has-prompt-sheet .cookie-bar { bottom: 84px; }

/* LR-11 speed and contrast: the hero is visible at once (it is what the visitor sees first); small footer link readable */
.home-hero .reveal { opacity: 1; transform: none; transition: none; }
.foot-consent .linklike { color: var(--text); opacity: .85; }

/* LR-3A A7: saved analyses in the account, "Try one" samples on Image to Prompt */
.saved-kind.c3 { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.an-saved-thumb { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin: 8px 0; background: var(--surface-2); }
.an-samples { display: grid; gap: 8px; margin: 14px 0 4px; }
.an-samples[hidden] { display: none; }
.an-sample-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.an-sample { flex: none; display: grid; gap: 4px; justify-items: center; width: 92px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 12px; }
.an-sample:hover { border-color: var(--accent); }
.an-sample img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.an-sample span { line-height: 1.3; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Update 2.0 M3: jewellery card (Image studio, behind the "jewelry" switch) */
.jw-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.jw-tabs::-webkit-scrollbar { display: none; }
.jw-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font: 500 13px/1 inherit; cursor: pointer; }
.jw-tab:hover { color: var(--text); border-color: var(--border-strong); }
.jw-tab.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.jw-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jw-n:empty { display: none; }
.jw-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: 600 11px/18px var(--mono, monospace); text-align: center; }
.jw-chips > [hidden] { display: none !important; }
.jw-card .jw-row { margin: 12px 0 0; padding: 0; border: 0; background: none; }
.jw-row-label { display: block; margin-bottom: 6px; font: 600 11px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jw-row-label small { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }

/* Update 2.0 M1: genre chips under the idea box and the "More genres" sheet */
.gn-row { display: flex; align-items: flex-start; gap: 8px 10px; margin: 12px 0 4px; flex-wrap: wrap; }
.gn-label { flex: none; padding-top: 9px; font: 600 11px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gn-row .gn-chips { flex: 1 1 240px; display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gn-row .gn-chips::-webkit-scrollbar { display: none; }
.gn-row .gn-chips .chip { flex: none; }
.gn-more { border-style: dashed; }
.gn-sheet { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 680px); padding: 18px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-solid, #12141e); color: var(--text); }
.gn-sheet::backdrop { background: rgba(0, 0, 0, .6); }
.gn-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.gn-sheet-head h2 { margin: 0; font-size: 20px; }
.gn-sheet h3 { margin: 16px 0 8px; font: 600 11px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 520px) { .gn-sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; max-height: 85vh; } }

/* Update 2.0 M2: quality hint under the prompt */
.q-hint b { color: var(--text); font-weight: 600; }
.q-note { display: block; margin-top: 4px; color: #fcd34d; }
.q-words { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; white-space: nowrap; cursor: pointer; }
.q-words input { accent-color: var(--accent); }

/* Update 2.0 F1: copy image tray */
.cp-tray, .sh-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); padding: 18px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-solid, #12141e); color: var(--text); }
.cp-tray::backdrop, .sh-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.cp-head, .sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cp-head h2, .sh-head h2 { margin: 0; font-size: 20px; }
.cp-tray h3 { margin: 16px 0 8px; font: 600 11px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cp-main { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cp-list li { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; }
.cp-list li.copied { border-color: color-mix(in srgb, #22c55e 50%, transparent); }
.cp-list img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.cp-list span { flex: 1; min-width: 0; }
.cp-msg:not(:empty) { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.cp-ok { margin: 0; }
.cp-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.cp-fail-img { display: block; max-width: 100%; max-height: 240px; margin: 8px 0; border-radius: 10px; }
.cp-open { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-open .chip, .sh-targets .chip { text-decoration: none; }
@media (max-width: 520px) { .cp-tray, .sh-dialog { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; } }

/* Update 2.0 F4: like, share and the share page */
.sh-btns { display: contents; }
.sh-like.active { color: #fb7185; border-color: color-mix(in srgb, #fb7185 50%, transparent); }
.sh-link { display: flex; gap: 8px; margin: 12px 0; }
.sh-link .input { flex: 1; min-width: 0; }
.sh-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-dialog .check { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.sh-dialog .tp-field { margin: 12px 0; }
.sh-err { color: var(--err, #f43f5e); }
.share-wrap { max-width: 860px; margin: 24px auto; padding: 0 16px; }
.share-card h1 { margin: 8px 0 4px; font-size: clamp(24px, 5vw, 36px); }
.share-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.share-img { display: block; width: 100%; height: auto; margin: 16px 0; border-radius: 14px; border: 1px solid var(--border); }
.share-prompt { margin: 16px 0; }
.share-prompt h2, .share-card > h2 { margin: 0 0 8px; font-size: 16px; }
.share-chips { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.share-chips li { padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; }
.share-chips li span { color: var(--muted); }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.share-like.active { color: #fb7185; }
.share-foot a { color: inherit; }
.share-meta .pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); font: 600 11px var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; }

/* Update 2.0 U2-3: Prompt Library (database) */
.lb-wrap { max-width: 1200px; margin: 0 auto; padding: 16px 16px 48px; }
.lb-crumbs { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.lb-crumbs a { color: inherit; }
.lb-head h1 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 44px); }
.lb-head > p { margin: 0 0 12px; color: var(--muted); }
.lb-search { position: relative; display: flex; gap: 8px; max-width: 640px; }
.lb-search .input { flex: 1; min-width: 0; min-height: 46px; }
.lb-suggest { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface-solid, #12141e); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.lb-suggest a { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.lb-suggest a:hover, .lb-suggest a:focus-visible { background: var(--surface-2); }
.lb-suggest small { color: var(--muted); flex: none; }
.lb-count { margin: 10px 0 0; font-size: 13px; }
.lb-chips { display: flex; gap: 6px; margin: 18px 0 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.lb-chips::-webkit-scrollbar { display: none; }
.lb-chips .chip { flex: none; text-decoration: none; }
@media (min-width: 900px) { .lb-chips { flex-wrap: wrap; overflow: visible; } }
.lb-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 18px; }
.lb-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 140px; flex: 1 1 140px; max-width: 220px; }
.lb-row h2, .lp-related h2, .lp-models h2 { font-size: 18px; margin: 18px 0 10px; }
.lb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1040px) { .lb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lb-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px 8px 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.lb-thumb { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease, ease); }
.lb-card:hover .lb-thumb img { transform: scale(1.03); }
.lb-cover, .lp-cover { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; padding: 14px; background: linear-gradient(160deg, #1d2030, #2a1d2b); color: #fff; font-weight: 600; line-height: 1.3; }
.lb-cover b, .lp-cover b { font: 600 11px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lp-cover { aspect-ratio: 16 / 7; border-radius: 16px; margin: 12px 0; font-size: clamp(20px, 4vw, 30px); }
.lb-type, .lb-lock, .lb-pick { position: absolute; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font: 600 11px var(--mono, monospace); letter-spacing: .04em; }
.lb-type { left: 8px; }
.lb-lock { right: 8px; }
.lb-pick { right: 8px; top: auto; bottom: 8px; color: #fcd34d; }
.lb-title { margin: 0; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-title a { color: var(--text); text-decoration: none; }
.lb-title a::after { content: ""; }
.lb-preview { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font: 12px/1.45 var(--mono, monospace); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.lb-preview.locked { filter: blur(3px); user-select: none; }
.lb-copy { align-self: flex-start; }
.lb-models { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-model { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--muted); text-decoration: none; }
.lb-model:hover { color: var(--text); border-color: var(--border-strong); }
.lb-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 12px; color: var(--muted); }
.lb-foot a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.lb-save { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px; min-width: 32px; min-height: 32px; }
.lb-save.active { color: #fb7185; }
.lb-save:focus-visible { outline: 2px solid var(--accent); border-radius: 8px; }
.lb-more { text-align: center; margin: 20px 0; }
.lb-empty { text-align: center; padding: 28px; }
.lb-about { margin-top: 24px; }
.lb-about h2 { font-size: 18px; margin: 16px 0 8px; }
.lb-faq { border-top: 1px solid var(--border); padding: 10px 0; }
.lb-faq summary { cursor: pointer; font-weight: 600; }
.lb-cta { margin-top: 20px; text-align: center; }
.lb-cta .btn { margin: 4px; }
/* post page */
.lp-head h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 40px); }
.lp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: 13px; }
.lp-meta > a { color: var(--text); }
.lp-badge { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); font: 600 11px var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; }
.lp-summary { color: var(--muted); margin: 0 0 12px; max-width: 760px; }
.lp-preview-note { padding: 10px 12px; border-radius: 10px; background: #fcd34d22; border: 1px solid #fcd34d55; }
.lp-media { margin: 12px 0; }
.lp-main { display: block; width: 100%; max-width: 720px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; background: var(--surface-2); }
.lp-main img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.lp-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; }
.lp-strip button { flex: none; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; background: none; }
.lp-strip img { display: block; width: 72px; height: 90px; object-fit: cover; }
.lp-prompt { margin: 16px 0; }
.lp-prompt h2, .lp-use h2, .lp-needs h2, .lp-steps h2, .lp-tips h2, .lp-faq h2, .lp-video h2 { margin: 0 0 10px; font-size: 18px; }
.lp-fields { display: grid; gap: 8px; margin-bottom: 10px; }
@media (min-width: 700px) { .lp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-fields p { grid-column: 1 / -1; } }
.lp-prompt-box { max-height: 60vh; overflow: auto; font-size: 14px; }
.lp-prompt-box.locked { -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.lp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lp-unlock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-2); }
.lp-json { margin-top: 10px; }
.lp-use-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-model-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lp-model p { margin: 6px 0; }
.lp-cols { display: grid; gap: 16px; margin: 16px 0; }
@media (min-width: 800px) { .lp-cols { grid-template-columns: 1fr 1fr; } }
.lp-needs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lp-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.lp-intro, .lp-video, .lp-tips, .lp-faq { margin: 16px 0; }
.lp-yt { position: relative; display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; background: #000; }
.lp-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.lp-yt span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.lp-yt-frame { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
.lp-version { border-top: 1px solid var(--border); padding: 10px 0; }
.lp-version summary { cursor: pointer; font-weight: 600; }
.lp-sticky { display: none; }
@media (max-width: 699px) {
  .lp-page { padding-bottom: 76px; }
  .lp-main img { max-height: 34vh; } /* media, title, prompt and Copy fit the first screen */
  .lp-summary { display: none; }
  .lp-sticky { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface-solid, #12141e); border-top: 1px solid var(--border-strong); }
  .lp-sticky .btn { flex: 1; }
}
/* Update 2.0 U2-3 B5: Trending Now reels */
.lb-trend { margin: 18px 0 6px; }
.lb-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lb-trend-head h2 { margin: 0; font-size: 18px; }
.lb-trend-nav { display: none; gap: 6px; }
@media (min-width: 900px) { .lb-trend-nav { display: flex; } }
.lb-reels { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 0 6px; scrollbar-width: none; }
.lb-reels::-webkit-scrollbar { display: none; }
.lb-reel { flex: 0 0 min(46vw, 210px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.lb-reel-media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #000; }
.lb-reel-media video, .lb-reel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-reel-play { position: absolute; inset: auto auto 10px 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; }
.lb-reel-media:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-reel-body { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.lb-reel-body b { line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-reel-meta { color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lb-reel-body .btn { align-self: flex-start; }
.lb-viewer { width: min(920px, 100vw); max-height: 100vh; padding: 0; border: 0; border-radius: 18px; background: var(--surface-solid, #12141e); color: var(--text); overflow: hidden; }
.lb-viewer::backdrop { background: rgba(0, 0, 0, .8); }
.lb-viewer[open] { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .lb-viewer[open] { grid-template-columns: minmax(0, 380px) 1fr; } }
.lb-viewer-media { aspect-ratio: 9 / 16; max-height: 78vh; background: #000; }
.lb-viewer-media video, .lb-viewer-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.lb-viewer-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-width: 0; }
.lb-viewer-prompt { -webkit-line-clamp: 8; min-height: 6em; }
.lb-gen-block { margin-top: 8px; } .lb-gen-block h2 { font-size: 20px; margin: 0 0 12px; }

/* Update 2.0 U2-4: Partner Program */
.pt-wrap { max-width: 1000px; margin: 0 auto; padding: 16px 16px 48px; }
.pt-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 16px 0; }
.pt-cards b { display: block; font-size: 18px; margin-bottom: 4px; }
.pt-example strong { color: var(--accent); }
.pt-grid { display: grid; gap: 10px 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pt-grid { grid-template-columns: 1fr 1fr; } }
.pt-form { display: grid; gap: 10px; margin-top: 10px; }
.pt-form .check { display: flex; gap: 8px; align-items: flex-start; }
.pt-check { font-size: 12px; color: #4ade80; min-height: 1em; }
.pt-check.bad, .pt-made.bad { color: var(--err, #f43f5e); }
.pt-made { margin: 0; font-size: 13px; word-break: break-all; }
.pt-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 12px 0 16px; padding-bottom: 4px; scrollbar-width: none; }
.pt-tabs::-webkit-scrollbar { display: none; }
.pt-tabs .chip, .pt-range .chip { flex: none; text-decoration: none; }
.pt-range { display: flex; gap: 6px; margin: 0 0 12px; }
.pt-kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
@media (min-width: 760px) { .pt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pt-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.pt-kpi span { font-size: 12px; color: var(--muted); }
.pt-kpi b { font-size: 22px; }
.pt-kpi small { font-size: 11px; color: var(--muted); }
.pt-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 8px 0; }
.pt-chart i { position: relative; flex: 1; min-width: 2px; height: max(2px, var(--h)); background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 3px 3px 0 0; }
.pt-chart em { position: absolute; left: 50%; top: -9px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #4ade80; }
.pt-qr { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pt-qr img, .pt-qr canvas { background: #fff; padding: 8px; border-radius: 10px; }
.pt-code b { font: 700 24px var(--mono, monospace); letter-spacing: .06em; margin-right: 8px; }
.pt-users { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.pt-kit { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pt-asset { display: flex; flex-direction: column; gap: 8px; }
.pt-asset img { width: 100%; border-radius: 10px; }
.pt-co { text-align: center; max-width: 560px; margin: 24px auto; }
.pt-co-photo { border-radius: 50%; object-fit: cover; }
.pt-co-msg { font-size: 18px; }
.pt-co-code { padding: 10px; border-radius: 12px; background: color-mix(in srgb, #059669 18%, transparent); }
.pt-statement table { width: 100%; }
.acc-joined { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px; font-size: 12px; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; }
.acc-joined img { border-radius: 50%; object-fit: cover; }
@media print { .site-header, .site-footer, .btn { display: none !important; } .pt-statement { border: 0; } }
.pt-hero .btn { margin-top: 16px; }

/* ── Update 2.0 U2-8: Hall of Fame ── */
.hof-wrap { max-width: 900px; margin: 0 auto; padding: 16px 16px 48px; }
.hof-hero h1 { font-size: clamp(30px, 6vw, 46px); margin: 8px 0; letter-spacing: -0.03em; }
.hof-upd { display: inline-block; margin-left: 6px; font-size: 13px; color: var(--accent-2); }
.hof-me { margin: 12px 0; border-color: var(--accent); } .hof-me p { margin: 4px 0; }
.hof-tabs, .hof-periods, .hof-seasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.hof-list { list-style: none; padding: 0; margin: 8px 0 20px; display: flex; flex-direction: column; gap: 6px; }
.hof-row { display: grid; grid-template-columns: 36px 40px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.hof-row.top1 { border-color: #e9b949; background: linear-gradient(90deg, rgba(233, 185, 73, .15), var(--surface)); }
.hof-row.top2 { border-color: #b8c2cc; } .hof-row.top3 { border-color: #c98b5a; }
.hof-rank { font: 800 18px var(--font); text-align: center; }
.hof-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; font-weight: 700; }
.hof-av img { width: 100%; height: 100%; object-fit: cover; }
.hof-av.big { width: 72px; height: 72px; font-size: 28px; }
.hof-name { min-width: 0; display: flex; flex-direction: column; } .hof-name a { color: inherit; } .hof-name small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-val { font: 600 13px var(--mono); color: var(--muted); white-space: nowrap; }
.hof-mv { font: 700 11px var(--font); min-width: 36px; text-align: right; } .hof-mv.up { color: var(--ok); } .hof-mv.down { color: var(--err); } .hof-mv.new { color: var(--accent-2); } .hof-mv.same { color: var(--muted); }
.hof-empty { padding: 16px; }
.hof-profile { display: flex; gap: 16px; align-items: center; } .hof-profile h1 { margin: 0; }
.hof-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.hof-badge { font-size: 12px; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(233, 185, 73, .14); color: #f1cf7a; border: 1px solid rgba(233, 185, 73, .35); text-decoration: none; }
.pt-rank { margin: 10px 0; }
@media (max-width: 520px) { .hof-row { grid-template-columns: 28px 32px 1fr auto; } .hof-mv { display: none; } .hof-av { width: 32px; height: 32px; } }
/* Update 2.0 U2-9: help video links */
.help-video { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent-2); text-decoration: none; white-space: nowrap; }
.help-video:hover, .help-video:focus-visible { text-decoration: underline; }
.help-video-row { text-align: center; margin: 12px auto; }
.gl-examples ul { padding-left: 18px; } .gl-examples li { margin: 8px 0; }

/* ── Kritiverse home page (SEO1) ── */
.kv-hero { position: relative; overflow: hidden; padding: clamp(56px, 10vw, 120px) 16px clamp(40px, 7vw, 80px); text-align: center; }
.kv-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.kv-title { font-size: clamp(44px, 9vw, 88px); line-height: 1; letter-spacing: -0.035em; margin: 12px 0 18px; background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--accent) 70%, #fff) 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kv-lead { font-size: clamp(17px, 2.4vw, 21px); color: var(--muted); max-width: 640px; margin: 0 auto; }
.kv-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0 12px; }
.kv-note { font-size: 14px; color: var(--muted); margin: 0; }
.kv-section { max-width: 1080px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) 16px; }
.kv-section > h2 { font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -0.02em; margin: 0 0 18px; }
.kv-stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kv-stage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.kv-stage h3 { font-size: 17px; margin: 0; } .kv-stage h3 a { color: inherit; }
.kv-stage p { margin: 0; color: var(--muted); font-size: 14px; }
.kv-step { font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; font-weight: 700; }
.kv-badge { align-self: flex-start; margin-top: auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--surface-2, rgba(255,255,255,.06)); color: var(--muted); }
.kv-badge.live { background: color-mix(in srgb, #22c55e 18%, transparent); color: #86efac; }
.kv-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kv-tool { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; }
.kv-tool:hover, .kv-tool:focus-visible { border-color: var(--accent); }
.kv-tool span { color: var(--muted); font-size: 14px; }
.kv-wait { max-width: 640px; }
.kv-form { display: grid; gap: 12px; margin-top: 14px; }
.kv-form .check { font-size: 14px; }
.kv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kv-ok { padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, #22c55e 15%, transparent); color: #bbf7d0; }
.kv-err { padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, #ef4444 15%, transparent); color: #fecaca; margin: 0; }
.kv-msg:empty { display: none; }
.kv-founder p { color: var(--muted); max-width: 720px; }
.kv-faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.kv-faq summary { cursor: pointer; font-weight: 600; }
.kv-faq p { color: var(--muted); margin: 8px 0 0; }
.kv-step { color: color-mix(in srgb, var(--accent) 45%, #fff) !important; }
.kv-form .field { display: grid; gap: 6px; }
.kv-form .field .select, .kv-form .field .input { width: 100%; }
@media (min-width: 1100px) { .kv-stages { grid-template-columns: repeat(5, 1fr); } }