/* ═══════════════════════════════════════════════════════════════
   BeyondSite — style.css
   Forest green on near-black · Plus Jakarta Sans
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  --bg:           #070c09;
  --bg-card:      #0c1310;
  --bg-card-2:    #111a14;
  --border:       rgba(100,220,140,.07);
  --border-hi:    rgba(100,220,140,.13);
  --text:         #ecf5ee;
  --text-soft:    rgba(236,245,238,.55);
  --text-muted:   rgba(236,245,238,.28);
  --accent:       #2ec97b;
  --accent-lt:    #52e09a;
  --accent-dim:   rgba(46,201,123,.1);
  --accent-glow:  rgba(46,201,123,.22);
  --success:      #34d399;
  --success-dim:  rgba(52,211,153,.14);
  --danger:       #f87171;
  --primary:      #2ec97b;
  --primary-dark: #1f9955;
  --primary-light:#52e09a;
  --secondary:    #1a7a48;
  --font:         'Plus Jakarta Sans', system-ui, sans-serif;
  --radius:       14px;
  --radius-sm:    10px;
}


/* ── LIGHT MODE TOKENS ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:           #f0f7f2;
  --bg-card:      #ffffff;
  --bg-card-2:    #e8f5ed;
  --border:       rgba(30,100,60,.1);
  --border-hi:    rgba(30,100,60,.18);
  --text:         #0d2115;
  --text-soft:    rgba(13,33,21,.6);
  --text-muted:   rgba(13,33,21,.38);
  --accent:       #1a9955;
  --accent-lt:    #2ec97b;
  --accent-dim:   rgba(26,153,85,.1);
  --accent-glow:  rgba(26,153,85,.2);
  --success:      #059669;
  --success-dim:  rgba(5,150,105,.12);
  --danger:       #dc2626;
  --primary:      #1a9955;
  --primary-dark: #147a42;
  --primary-light:#2ec97b;
  --secondary:    #0f6635;
}

[data-theme="light"] .navbar.scrolled {
  background: rgba(240,247,242,.92);
  box-shadow: 0 4px 28px rgba(0,0,0,.08);
}

[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(26,153,85,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,153,85,.06) 1px, transparent 1px);
}

[data-theme="light"] .bg-glow-1 { background: rgba(46,201,123,.12); }
[data-theme="light"] .bg-glow-2 { background: rgba(26,153,85,.08); }

[data-theme="light"] .form-section {
  box-shadow: 0 2px 24px rgba(0,0,0,.06);
}

[data-theme="light"] .template-content {
  border-color: rgba(30,100,60,.12);
  background: #fff;
}

[data-theme="light"] .template-content:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #fff;
  border-color: rgba(30,100,60,.15);
  color: var(--text);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: rgba(13,33,21,.3); }

[data-theme="light"] .btn-secondary {
  background: #e8f5ed;
  border-color: rgba(30,100,60,.18);
  color: var(--text-soft);
}

[data-theme="light"] .pay-card { background: #fff; border-color: rgba(30,100,60,.12); }

[data-theme="light"] .preview-browser-chrome {
  background: #e8f5ed;
  border-color: rgba(30,100,60,.15);
}

[data-theme="light"] .browser-address {
  background: #fff;
  border-color: rgba(30,100,60,.12);
}

[data-theme="light"] .footer {
  background: #e8f5ed;
  border-top-color: rgba(30,100,60,.1);
}

[data-theme="light"] .schema-form-wrap {
  background: #fff;
  border-color: rgba(30,100,60,.1);
}

[data-theme="light"] .schema-section {
  background: #f7fbf8;
  border-color: rgba(30,100,60,.1);
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  background: var(--bg-card);
  color: var(--text-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(20deg);
}

.theme-toggle svg { pointer-events: none; }

/* Show correct icon per theme */
.icon-moon { display: block; }
.icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: block; }

/* ── RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.home-page { cursor: none; }
/* Ensure every child of .home-page inherits cursor:none — overrides UA defaults on buttons/selects/links */
.home-page * { cursor: none !important; }
iframe { cursor: auto; }

/* ── CUSTOM CURSOR ── */
.cursor-follower {
  position: fixed;
  top: 0; left: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent); /* Uses your site's yellow accent */
  color: #fff;
  pointer-events: none;
  z-index: 100000; /* above chatbot panel (9999) and any modal */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Smoothly animate width, height, and background when text is added */
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.3s ease, 
              background 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  will-change: transform;
}

/* State when hovering over data-cursor-text */
.cursor-follower.has-text {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
}

.cursor-text {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  filter: blur(4px);
  /* Delay the text appearance slightly so the bubble expands first */
  transition: opacity 0.28s ease 0.1s, filter 0.28s ease 0.1s;
}

.cursor-follower.has-text .cursor-text {
  opacity: 1;
  filter: blur(0px);
}

/* ── BACKGROUND ──────────────────────────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(46,201,123,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,201,123,.025) 1px, transparent 1px);
  background-size: 60px 60px;
}

.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  animation: glowDrift 22s ease-in-out infinite alternate;
}
.bg-glow-1 {
  width: 640px; height: 640px;
  background: rgba(46,201,123,.06);
  top: -240px; left: -160px;
}
.bg-glow-2 {
  width: 520px; height: 520px;
  background: rgba(46,201,123,.04);
  bottom: -100px; right: -120px;
  animation-direction: alternate-reverse;
  animation-duration: 28s;
}
@keyframes glowDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(36px, 28px) scale(1.08); }
}

.stars { display: none; }

/* ── MAIN CONTAINER ───────────────────────────────────────────────── */
.main-container { position: relative; z-index: 1; }

/* ── NAVBAR ───────────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  padding: 0 40px;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.navbar.scrolled {
  background: rgba(9,8,12,.9);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 28px rgba(0,0,0,.5);
}
.navbar-content {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 15px 0; gap: 24px;
}

/* Logo */
.logo {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--text); flex-shrink: 0;
}
.logo-mark { display: flex; align-items: center; justify-content: center; }
.logo-text {
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: -.03em;
}
.logo-accent { color: var(--accent); }

/* Step track */
.step-track {
  display: flex; align-items: center; gap: 0;
  flex: 1; justify-content: center;
}
.step-indicator {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 100px;
  transition: background .25s;
  cursor: default;
}
.step-num {
  font-size: .7rem; font-weight: 700;
  color: var(--text-muted); transition: color .25s;
  letter-spacing: .04em;
}
.step-label {
  font-size: .75rem; font-weight: 500;
  color: var(--text-muted); transition: color .25s;
}
.step-indicator.active { background: var(--accent-dim); }
.step-indicator.active .step-num,
.step-indicator.active .step-label { color: var(--accent); }
.step-connector {
  width: 22px; height: 1px;
  background: var(--border-hi);
}

/* Navbar right */
.navbar-right {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 120px;
}
.nav-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-dim);
  border: 1px solid rgba(232,160,48,.2);
  color: var(--accent);
  padding: 5px 12px; border-radius: 100px;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .05em;
}
.nav-badge-dot {
  width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
  animation: pulseDot 2.5s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.65); }
}
.btn-nav-login {
  padding: 7px 18px;
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  color: var(--text-soft); font-size: .8rem; font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-nav-login:hover {
  background: var(--accent); border-color: var(--accent);
  color: var(--bg);
}

/* ── HERO + ARC GALLERY ──────────────────────────────────────────── */
.hero-section {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-height: calc(100vh - 64px);
  overflow: hidden;
}

/* Arc stage — JS sets height dynamically based on radius */
.arc-stage {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.arc-pivot {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
}

/* Individual arc card — positioned by JS */
.arc-card {
  position: absolute;
  opacity: 0;
  animation: arcRise .95s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes arcRise {
  from { opacity: 0; transform: translate(-50%, 70%); }
  to   { opacity: 1; transform: translate(-50%, 50%); }
}

.arc-card-inner {
  width: 100%; height: 100%;
  border-radius: 13px;
  overflow: hidden;
  transform: rotate(var(--r, 0deg));
  box-shadow:
    0 10px 32px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,210,140,.07);
  transition: transform .3s ease, box-shadow .3s ease;
}

.arc-card:hover .arc-card-inner {
  transform: rotate(var(--r, 0deg)) scale(1.1);
  box-shadow:
    0 18px 52px rgba(0,0,0,.75),
    0 0 0 1px rgba(232,160,48,.22);
}

.arc-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Hero content */
.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 24px 80px;
  margin-top: -80px; /* overlap arc bottom */
  max-width: 760px;
  animation: fadeInUp .9s .2s cubic-bezier(.16,1,.3,1) both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-dim);
  border: 1px solid rgba(232,160,48,.22);
  color: var(--accent);
  padding: 7px 16px; border-radius: 100px;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .05em; margin-bottom: 28px;
}
.hero-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: pulseDot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

.hero-title {
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  font-weight: 800;
  line-height: 1.06; letter-spacing: -.04em;
  color: var(--text); margin-bottom: 20px;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-lt) 60%, #ffd580 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-title-dim { color: var(--text-soft); }

.hero-subtitle {
  font-size: 1.05rem; color: var(--text-soft);
  font-weight: 300; line-height: 1.72;
  max-width: 560px; margin: 0 auto 36px;
}

.hero-scroll-hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .75rem; color: var(--text-muted);
  letter-spacing: .1em; text-transform: uppercase;
}
.hero-scroll-line {
  width: 32px; height: 1px;
  background: var(--text-muted);
  position: relative; overflow: hidden;
}
.hero-scroll-line::after {
  content: ''; position: absolute;
  left: -100%; top: 0; width: 100%; height: 100%;
  background: var(--accent);
  animation: scanRight 2.2s linear infinite;
}
@keyframes scanRight { to { left: 100%; } }

/* ── CONTAINER ───────────────────────────────────────────────────── */
.container {
  max-width: 860px; margin: 0 auto;
  padding: 0 24px;
}

/* ── FORM SECTION ────────────────────────────────────────────────── */
.form-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 40px;
  margin-bottom: 32px;
  animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) both;
}

/* Section header */
.section-header {
  margin-bottom: 32px; text-align: center;
}
.step-badge {
  display: inline-block;
  background: var(--accent-dim);
  border: 1px solid rgba(232,160,48,.22);
  color: var(--accent);
  padding: 4px 14px; border-radius: 100px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 14px;
}
.section-header h2 {
  font-size: 1.65rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--text);
  margin-bottom: 6px;
}
.section-header p {
  font-size: .9rem; color: var(--text-soft);
  font-weight: 300;
}

/* ── FORM ────────────────────────────────────────────────────────── */
.form-modern { display: flex; flex-direction: column; gap: 24px; }

.form-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-group label {
  font-size: .8rem; font-weight: 600;
  color: var(--text-soft); letter-spacing: .03em;
}

.input-box { position: relative; }

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: .9rem; font-weight: 400;
  padding: 12px 16px;
  outline: none;
  transition: border-color .22s, box-shadow .22s, background .22s;
  -webkit-appearance: none;
}
.form-group textarea {
  resize: vertical; min-height: 110px; line-height: 1.6;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(232,160,48,.5);
  background: rgba(46,201,123,.04);
  box-shadow: 0 0 0 3px rgba(232,160,48,.1);
}

/* ── SELECT (schema-form + everywhere) ──────────────────────────────
   The schema-rendered <select> elements (Brand tone, Hours, Closed?, NBFC
   category, etc.) need explicit styling so the input itself looks themed,
   AND the native dropdown popup needs its <option> elements styled —
   without an `option` rule, browsers render options with default white
   background and our inherited light text, making them invisible. */
select {
  background: var(--bg-card-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 400;
  padding: 12px 16px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Custom dropdown chevron (since native arrow is removed by appearance:none) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e8a030' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  transition: border-color .22s, box-shadow .22s, background-color .22s;
}
select:focus {
  border-color: rgba(232,160,48,.5);
  background-color: rgba(232,160,48,.04);
  box-shadow: 0 0 0 3px rgba(232,160,48,.1);
}
select:hover { border-color: rgba(232,160,48,.35); }

/* The actual dropdown popup. Browsers honour color/background on <option>
   on Chrome, Edge, Firefox; Safari ignores most styling on options. */
select option {
  background: #16131a;          /* matches --bg-card-2 explicitly (vars don't propagate to the OS popup on all browsers) */
  color: #f5f0e8;               /* matches --text */
  padding: 10px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
}
select option:checked,
select option:hover {
  background: #1f1a26;          /* slightly lighter for hover/selected */
  color: #ffffff;
}

.input-highlight {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease; pointer-events: none;
}
.form-group input:focus ~ .input-highlight,
.form-group textarea:focus ~ .input-highlight { transform: scaleX(1); }

/* ── Required-field indicator ─────────────────────────────────── */
.required-mark {
  color: #f87171;
  font-weight: 700;
  margin-left: 2px;
  font-size: 1.05em;
  display: inline-block;
  line-height: 1;
}

/* ── Field error state (red ring + brief shake when validation fails) ── */
.form-group input.field-error,
.form-group textarea.field-error,
.form-group select.field-error {
  border-color: #f87171 !important;
  background: rgba(248,113,113,.04);
  box-shadow: 0 0 0 3px rgba(248,113,113,.18);
  animation: fieldShake .42s cubic-bezier(.36,.07,.19,.97);
}
@keyframes fieldShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX( 2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX( 4px); }
}

/* ── Inline validation banner at top of form ─────────────────── */
.form-banner-error {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.32);
  border-left: 4px solid #f87171;
  border-radius: 10px;
  color: #fca5a5;
  margin-bottom: 22px;
  animation: bannerSlide .28s cubic-bezier(.16,1,.3,1);
}
.form-banner-error[hidden] { display: none; }
.form-banner-error svg { flex-shrink: 0; color: #f87171; }
.form-banner-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.form-banner-body strong {
  font-size: .92rem; font-weight: 700;
  color: #fecaca; letter-spacing: -.005em;
}
.form-banner-body span {
  font-size: .82rem; color: rgba(252,165,165,.85); line-height: 1.55;
}
.form-banner-close {
  background: transparent; border: none;
  color: rgba(252,165,165,.6);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  padding: 0 6px; flex-shrink: 0;
  transition: color .15s, transform .12s;
}
.form-banner-close:hover { color: #fca5a5; transform: scale(1.15); }
@keyframes bannerSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-group small {
  font-size: .75rem; color: var(--text-muted);
  font-weight: 400; line-height: 1.5;
}

/* ── TEMPLATE GRID ───────────────────────────────────────────────── */
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.template-box { cursor: pointer; display: block; }

.template-content {
  border: 1.5px solid var(--border-hi);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: border-color .25s, box-shadow .25s, transform .2s;
  background: var(--bg-card-2);
}
.template-content:hover {
  border-color: rgba(232,160,48,.35);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.template-content.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,160,48,.15), 0 8px 28px rgba(0,0,0,.4);
}

.checkmark {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-size: .65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .2s;
}
.template-content.selected .checkmark { opacity: 1; transform: scale(1); }

.template-label {
  padding: 10px 10px 12px;
  border-top: 1px solid var(--border);
}
.template-label h4 {
  font-size: .78rem; font-weight: 700;
  color: var(--text); margin-bottom: 2px;
}
.template-label p {
  font-size: .65rem; color: var(--text-muted); font-weight: 400;
}

/* ── TEMPLATE PREVIEWS ───────────────────────────────────────────── */
.template-preview {
  height: 90px; display: flex;
  flex-direction: column; overflow: hidden;
}

/* Shared mini-elements */
.tp-nav {
  height: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tp-nav-dark {
  background: rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tp-hero { padding: 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.tp-hero-split { flex-direction: row; gap: 0; padding: 0; }
.tp-split-left { flex: 1; padding: 8px 8px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.tp-split-right { flex: 1; background: rgba(255,255,255,.04); }

.tp-line { height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); }
.tp-line-lg { width: 75%; }
.tp-line-md { width: 55%; }
.tp-line-sm { width: 35%; }

.tp-btn { width: 28px; height: 10px; border-radius: 3px; background: var(--accent); margin-top: 2px; }

.tp-cards { display: flex; gap: 4px; padding: 4px 6px 6px; }
.tp-card { flex: 1; height: 16px; background: rgba(255,255,255,.06); border-radius: 3px; border: 1px solid rgba(255,255,255,.05); }

/* Template 1 — Editorial */
.template-editorial { background: linear-gradient(160deg, #080810, #0e0e1a); }

/* Template 2 — Agency */
.template-agency { background: linear-gradient(160deg, #080810, #0a0a14); }

/* Template 3 — Dev / Terminal */
.template-dev { background: #060c06; }
.tp-terminal { flex: 1; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.tp-term-line { height: 4px; border-radius: 2px; }

/* Template 4 — Web3 */
.template-web3 { background: linear-gradient(160deg, #06060f, #0c0c1c); }
.tp-web3-body { flex: 1; padding: 6px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: center; }
.tp-web3-chip { height: 14px; border-radius: 3px; background: rgba(139,92,246,.25); border: 1px solid rgba(139,92,246,.3); }
.tp-web3-chart { grid-column: span 2; height: 10px; border-radius: 2px; background: linear-gradient(90deg, rgba(139,92,246,.4), rgba(34,211,238,.25)); }

/* Template 5 — Local */
.template-local { background: #faf7f2; }
.tp-local-body { padding: 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.tp-local-tags { display: flex; gap: 3px; padding: 0 8px 6px; }
.tp-tag { height: 8px; flex: 1; border-radius: 8px; background: rgba(196,98,45,.2); }

/* Template 6 — BFSI / Wealth */
.template-bfsi { background: linear-gradient(160deg, #090d16, #0d1421); }
.tp-bfsi-bar { height: 7px; flex-shrink: 0; background: rgba(184,154,62,.15); border-bottom: 1px solid rgba(184,154,62,.12); }
.tp-bfsi-body { flex: 1; padding: 5px 8px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.tp-bfsi-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.tp-bfsi-label { height: 4px; border-radius: 2px; background: rgba(232,228,220,.18); width: 38px; }
.tp-bfsi-val { height: 7px; border-radius: 2px; background: rgba(184,154,62,.6); width: 24px; }

/* Template 7 — Startup / SaaS */
.template-startup { background: #f1f2f5; }
.tp-startup-nav { height: 10px; flex-shrink: 0; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(11,12,14,.09); display: flex; align-items: center; padding: 0 6px; gap: 2px; }
.tp-startup-dot { width: 14px; height: 5px; border-radius: 3px; background: #2560e8; flex-shrink: 0; }
.tp-startup-body { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.tp-startup-kpis { display: flex; gap: 3px; margin-bottom: 2px; }
.tp-startup-kpi { flex: 1; height: 14px; background: rgba(255,255,255,.8); border: 1px solid rgba(11,12,14,.07); border-radius: 3px; }
.tp-startup-chart { flex: 1; background: rgba(255,255,255,.7); border: 1px solid rgba(11,12,14,.06); border-radius: 3px; position: relative; overflow: hidden; }
.tp-startup-chart::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(37,96,232,.18), transparent); }

/* Template 8 — Insurance Agent */
.template-insurance { background: linear-gradient(160deg, #0c1a14, #0f2018); }
.tp-ins-hero { flex: 1; padding: 7px 8px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.tp-ins-badge { height: 5px; width: 32px; border-radius: 8px; background: rgba(52,211,153,.45); margin-bottom: 2px; }
.tp-ins-cards { display: flex; gap: 3px; padding: 0 7px 6px; }
.tp-ins-card { flex: 1; height: 18px; border-radius: 3px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.15); }

/* Compliance review banner — shown above form for regulated templates (BFSI/Insurance/NBFC) */
.compliance-banner {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(180deg, #fff8e6 0%, #fff3d4 100%);
  border: 1px solid #f0c674;
  border-left: 4px solid #c4861f;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px -8px rgba(196,134,31,.4);
}
.compliance-banner .cb-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: #c4861f;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 700;
  margin-top: 1px;
}
.compliance-banner .cb-title {
  font-size: .92rem; font-weight: 700;
  color: #6b4710;
  margin-bottom: 6px;
  letter-spacing: -.005em;
}
.compliance-banner .cb-body {
  font-size: .82rem;
  color: #7a5418;
  line-height: 1.6;
}

/* Template 11 — Portfolio / Freelancer */
.template-portfolio { background: #ffffff; padding: 0; display: flex; flex-direction: column; }
.tp-port-nav { height: 16px; border-bottom: 1px solid rgba(10,10,10,.1); display: flex; align-items: center; padding: 0 7px; gap: 6px; }
.tp-port-brand { width: 24px; height: 5px; background: rgba(10,10,10,.85); border-radius: 1px; }
.tp-port-cta { width: 22px; height: 6px; border-radius: 100px; background: rgba(10,10,10,.85); margin-left: auto; }
.tp-port-hero { flex: 1; padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 3px; }
.tp-port-name-1 { width: 78px; height: 9px; background: rgba(10,10,10,.9); border-radius: 1px; }
.tp-port-name-2 { width: 56px; height: 9px; background: rgba(10,10,10,.9); border-radius: 1px; font-style: italic; }
.tp-port-role { width: 70px; height: 4px; background: rgba(10,10,10,.45); border-radius: 1px; margin-top: 4px; }
.tp-port-work { padding: 0 7px 6px; display: flex; flex-direction: column; gap: 2px; }
.tp-port-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-top: 1px solid rgba(10,10,10,.18); }
.tp-port-row:first-child { border-top: 1px solid rgba(10,10,10,.18); }
.tp-port-row span:first-child { width: 60%; height: 5px; background: rgba(10,10,10,.85); border-radius: 1px; }
.tp-port-row span:last-child  { width: 14px; height: 4px; background: rgba(10,10,10,.45); border-radius: 1px; }

/* Template 10 — Restaurant / Café */
.template-restaurant { background: #f9f4ec; padding: 0; display: flex; flex-direction: column; }
.tp-rest-nav { height: 16px; background: rgba(249,244,236,.95); border-bottom: 1px solid rgba(42,26,20,.1); display: flex; align-items: center; padding: 0 7px; gap: 6px; }
.tp-rest-monogram { width: 9px; height: 9px; border-radius: 50%; background: #7a2e2e; color: #f9f4ec; font-size: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: Georgia, serif; font-style: italic; }
.tp-rest-cta { width: 24px; height: 6px; border-radius: 100px; background: #7a2e2e; margin-left: auto; }
.tp-rest-hero { flex: 1; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
.tp-rest-rules { width: 32px; height: 1px; background: #7a2e2e; margin-bottom: 4px; }
.tp-rest-title-line { width: 70px; height: 5px; border-radius: 2px; background: rgba(42,26,20,.85); }
.tp-rest-title-em   { width: 50px; height: 5px; border-radius: 2px; background: #7a2e2e; }
.tp-rest-title-line.short { width: 60px; }
.tp-rest-sub { width: 90px; height: 2px; border-radius: 2px; background: rgba(42,26,20,.4); margin-top: 4px; }
.tp-rest-btn { width: 28px; height: 6px; border-radius: 100px; background: #7a2e2e; margin-top: 4px; }
.tp-rest-dishes { display: flex; gap: 3px; padding: 0 7px 6px; }
.tp-rest-dish { flex: 1; height: 16px; background: linear-gradient(135deg, rgba(122,46,46,.16), rgba(184,137,64,.16)); border-radius: 2px; border: 1px solid rgba(122,46,46,.18); }

/* Template 9 — NBFC / Lender */
.template-nbfc { background: #fbf7f0; }
.tp-nbfc-topbar { height: 6px; background: #0c4a4a; }
.tp-nbfc-brandmark { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg,#0c4a4a,#0f5e5e); margin-left: 7px; }
.tp-nbfc-hero { flex: 1; padding: 7px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; }
.tp-nbfc-left { display: flex; flex-direction: column; gap: 3px; }
.tp-nbfc-rate { background: #fff; border: 1px solid rgba(14,28,42,.1); border-radius: 4px; padding: 5px 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 4px 10px -4px rgba(14,28,42,.18); position: relative; }
.tp-nbfc-rate::before { content: ''; position: absolute; top: -1px; left: 4px; right: 4px; height: 2px; background: linear-gradient(90deg,#0c4a4a,#e85d2c); border-radius: 0 0 2px 2px; }
.tp-nbfc-rate-label { height: 3px; width: 16px; border-radius: 2px; background: rgba(14,28,42,.3); }
.tp-nbfc-rate-val { height: 8px; width: 24px; border-radius: 2px; background: #0c4a4a; margin-bottom: 2px; }
.tp-nbfc-rate-bullet { height: 2px; width: 28px; border-radius: 2px; background: rgba(14,28,42,.18); }
.tp-nbfc-products { display: flex; gap: 3px; padding: 0 7px 6px; }
.tp-nbfc-prod { flex: 1; height: 16px; border-radius: 3px; background: #fff; border: 1px solid rgba(14,28,42,.1); position: relative; }
.tp-nbfc-prod::after { content: ''; position: absolute; top: 2px; left: 2px; width: 5px; height: 5px; border-radius: 1px; background: rgba(232,93,44,.6); }

.template-12-prev { background: linear-gradient(135deg, #0a0c10 0%, #131720 100%); }
.template-13-prev { background: linear-gradient(135deg, #f7f9fc 0%, #e8f5f2 100%); }

/* Template 14 — MF Distributor (sandstone + maroon + brass) */
.template-mf-prev { background: #f2ede4; display: flex; flex-direction: column; }
.tp-mf-topbar { height: 6px; background: #6b1e2c; flex-shrink: 0; }

/* Template 15 — Stock Broker / Demat (violet + white, Groww-style) */
.template-broker-prev { background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%); display: flex; flex-direction: column; }
.tp-broker-topbar { height: 6px; background: linear-gradient(90deg, #5500eb, #6f33ee); flex-shrink: 0; }
.tp-broker-chart { background: #fff; border: 1px solid rgba(14,14,35,.1); border-radius: 4px; padding: 3px 5px; position: relative; }
.tp-broker-chart::before { content: ''; position: absolute; top: -1px; left: 4px; right: 4px; height: 2px; background: linear-gradient(90deg, #5500eb, #6f33ee); border-radius: 0 0 2px 2px; }

/* Template 16 — SEBI RIA / Investment Adviser (sage + cream + peach, warm/casual) */
.template-ria-prev { background: linear-gradient(180deg, #faf6ef 0%, #fcf3e2 100%); display: flex; flex-direction: column; }
.tp-ria-topbar { height: 6px; background: linear-gradient(90deg, #6b9080, #c79e4c); flex-shrink: 0; }

/* Template 19 — Loan DSA / Direct Sales Agent (deep indigo + electric lime + cream, EMI calc mini) */
.template-dsa-prev { background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); display: flex; flex-direction: column; }
.tp-dsa-topbar { height: 6px; background: linear-gradient(90deg, #1e1b4b 0%, #312e81 50%, #84cc16 100%); flex-shrink: 0; }
.tp-dsa-calc { background: #1e1b4b; border-radius: 5px; padding: 4px 5px; position: relative; box-shadow: 0 4px 8px -2px rgba(30,27,75,.3); display: flex; flex-direction: column; gap: 2px; }
.tp-dsa-calc-label { width: 18px; height: 2px; background: rgba(132,204,22,.5); border-radius: 1px; }
.tp-dsa-calc-emi { font-family: ui-monospace, monospace; font-size: 7px; color: #fff; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.tp-dsa-calc-bar { width: 100%; height: 1.5px; background: rgba(132,204,22,.3); border-radius: 100px; position: relative; margin-top: 1px; }
.tp-dsa-calc-bar::after { content: ''; position: absolute; top: -1px; left: 60%; width: 3.5px; height: 3.5px; border-radius: 50%; background: #84cc16; box-shadow: 0 0 0 1px #fff; }
.tp-dsa-calc-bar2::after { left: 40%; }

/* Template 18 — Diagnostic Lab / Pathology (lab-blue + amber + beaker green, test tubes) */
.template-lab-prev { background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%); display: flex; flex-direction: column; }
.tp-lab-topbar { height: 6px; background: linear-gradient(90deg, #0ea5e9, #22c55e, #f97316); flex-shrink: 0; }
.tp-lab-tubes { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; min-height: 28px; padding-bottom: 1px; }
.tp-lab-tube { width: 5px; height: 22px; border-radius: 100px 100px 3px 3px / 4px 4px 3px 3px; border: 0.8px solid rgba(15,23,42,.18); position: relative; box-shadow: inset 0.5px 0 0 rgba(255,255,255,.4); }
.tp-lab-tube::before { content: ''; position: absolute; top: -1.5px; left: 50%; transform: translateX(-50%); width: 3.5px; height: 1.5px; background: #1e293b; border-radius: 1px; }

/* Template 17 — Healthcare Clinic / Hospital (white + soft sky-blue + mint, cartoon doctor) */
.template-clinic-prev { background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%); display: flex; flex-direction: column; }
.tp-clinic-topbar { height: 6px; background: linear-gradient(90deg, #5eb0ef, #34d399); flex-shrink: 0; }
.tp-clinic-doc { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 28px; }
.tp-clinic-disc { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(160deg, #eaf4fc, #d6e9f7); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tp-clinic-bust { position: relative; z-index: 2; width: 22px; display: flex; flex-direction: column; align-items: center; }
.tp-clinic-head { width: 10px; height: 11px; border-radius: 50% 50% 45% 45%; background: linear-gradient(135deg, #f4c79a 0%, #e6b288 100%); position: relative; box-shadow: 0 1px 0 #3a2820 inset; }
.tp-clinic-head::before { content: ''; position: absolute; top: -1px; left: -0.5px; right: -0.5px; height: 4px; background: #3a2820; border-radius: 50% 50% 0 0; }
.tp-clinic-coat { width: 18px; height: 8px; background: #ffffff; border: 1px solid rgba(15,26,44,.18); border-radius: 4px 4px 2px 2px; margin-top: -1px; position: relative; }
.tp-clinic-coat::after { content: ''; position: absolute; left: 50%; top: 1px; width: 4px; height: 1.5px; background: #34d399; border-radius: 1px; transform: translateX(-50%); }
.tp-ria-portrait { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 26px; }
.tp-ria-disc { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(160deg, #f2c4a3, #e8a87c); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tp-ria-card { position: relative; z-index: 2; background: #fffefa; border-radius: 4px; padding: 3px 4px; width: 28px; box-shadow: 0 4px 10px -4px rgba(42,48,48,.25); border: 1px solid rgba(42,48,48,.08); transform: rotate(-3deg); }
.tp-ria-face { width: 100%; height: 9px; background: linear-gradient(135deg, #f1c79a 0%, #e8a87c 100%); border-radius: 3px; position: relative; }
.tp-ria-face::after { content: ''; position: absolute; top: 1.5px; left: 50%; transform: translateX(-50%); width: 5px; height: 3px; background: #3a2820; border-radius: 50% 50% 0 0; }

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: .88rem; font-weight: 600;
  padding: 11px 22px; border-radius: 10px;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, opacity .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-lg { padding: 13px 28px; font-size: .92rem; min-height: 48px; }

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 24px rgba(232,160,48,.22);
}
.btn-primary:hover {
  background: var(--accent-lt);
  box-shadow: 0 0 36px rgba(232,160,48,.4);
}

.btn-secondary {
  background: var(--bg-card-2);
  color: var(--text-soft);
  border: 1px solid var(--border-hi);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(232,160,48,.06);
}

.btn-success {
  background: var(--success); color: var(--bg);
  box-shadow: 0 0 24px rgba(52,211,153,.2);
}
.btn-success:hover {
  box-shadow: 0 0 36px rgba(52,211,153,.38);
}

.btn-full { width: 100%; }
.btn + .btn-full { margin-top: 10px; }

.button-group { display: flex; gap: 12px; margin-top: 4px; }
.button-group .btn { flex: 1; }

/* ── PAYMENT SUB-STEPS PROGRESS ──────────────────────────────────── */
.pay-substeps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 480px;
  margin: 0 auto 24px;
  padding: 0 12px;
}
.pay-substep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
  background: transparent;
  transition: all 0.25s ease;
  opacity: 0.45;
}
.pay-substep.active {
  opacity: 1;
  background: var(--accent-dim);
}
.pay-substep.completed {
  opacity: 0.85;
}
.pay-substep-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border-hi);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.25s ease;
}
.pay-substep.active .pay-substep-num {
  background: var(--accent);
  color: var(--bg);
}
.pay-substep.completed .pay-substep-num {
  background: var(--success);
  color: var(--bg);
}
.pay-substep-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.pay-substep.active .pay-substep-label {
  color: var(--text);
}
.pay-substep-connector {
  width: 32px;
  height: 2px;
  background: var(--border-hi);
  opacity: 0.4;
  margin: 0 4px;
}
.pay-substep-connector.active {
  background: var(--accent);
  opacity: 0.6;
}

/* ── PAYMENT CARD (Step 3) ──────────────────────────────────────── */
.pay-card {
  max-width: 520px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  box-shadow: 0 24px 60px -28px rgba(232,160,48,.18);
  position: relative;
  overflow: hidden;
}
.pay-card::before {
  content: '';
  position: absolute; top: 0; left: 24px; right: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-lt) 100%);
  border-radius: 0 0 4px 4px;
}
.pay-card-inner { padding: 36px 32px; }

.pay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  font-size: .92rem;
}
.pay-row + .pay-row { border-top: 1px dashed var(--border); }

.pay-label {
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: .01em;
}
.pay-val {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}
.pay-val.pay-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.01em;
  font-feature-settings: 'tnum';
}

.pay-divider {
  height: 1px;
  background: var(--border-hi);
  margin: 18px 0 22px;
}

.pay-note {
  font-size: .82rem;
  color: var(--text-soft);
  background: var(--accent-dim);
  border: 1px dashed var(--border-hi);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
  text-align: center;
  line-height: 1.55;
}

.pay-success {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: var(--success-dim);
  border: 1px solid rgba(52,211,153,.28);
  border-radius: 10px;
  margin-bottom: 18px;
}
.pay-check {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--success);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700;
  box-shadow: 0 0 18px rgba(52,211,153,.45);
}
.pay-success strong {
  display: block;
  color: var(--text);
  font-size: .98rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.pay-success small {
  display: block;
  color: var(--text-soft);
  font-size: .78rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .02em;
}

@media (max-width: 640px) {
  .pay-card-inner { padding: 28px 22px; }
  .pay-val.pay-price { font-size: 1.35rem; }
  .pay-substeps { max-width: 100%; gap: 0; }
  .pay-substep { padding: 6px 8px; }
  .pay-substep-label { font-size: 0.75rem; }
  .pay-substep-connector { width: 20px; margin: 0 2px; }
}

/* ── LOADING STATE ───────────────────────────────────────────────── */
.loading-state {
  text-align: center; padding: 72px 40px;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.loader { display: flex; gap: 8px; align-items: center; justify-content: center; }
.loader-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: loaderBounce 1.4s ease-in-out infinite;
}
.loader-dot:nth-child(1) { animation-delay: -.32s; }
.loader-dot:nth-child(2) { animation-delay: -.16s; }
@keyframes loaderBounce {
  0%,80%,100% { opacity: .3; transform: scale(.7); }
  40% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 16px var(--accent); }
}
.loading-state p { color: var(--text-soft); font-size: .95rem; font-weight: 400; }
.loading-dots::after {
  content: ''; animation: dots 2s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ''; }   25%  { content: '.'; }
  50%  { content: '..'; } 75%  { content: '...'; }
}

/* ── PREVIEW ─────────────────────────────────────────────────────── */
.preview-controls {
  display: flex; gap: 12px; margin-bottom: 20px;
  justify-content: flex-end; align-items: center;
}
.preview-browser-chrome {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 14px;
  position: relative;
  z-index: 10;
}
/* When the device bar is injected above the chrome (by preview-frame.js),
   the device bar takes the rounded top corners and the chrome becomes flat-topped. */
.preview-container:has(.pf-device-bar) .preview-browser-chrome {
  border-radius: 0;
  border-top: none;
}
.browser-dots { display: flex; gap: 5px; flex-shrink: 0; }
.bdot { width: 10px; height: 10px; border-radius: 50%; }
.bdot-r { background: #ff5f57; }
.bdot-a { background: #febc2e; }
.bdot-g { background: #28c840; }
.browser-address {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: .74rem; color: var(--text-muted);
  flex: 1; max-width: 240px;
}
/* Device toggle bar — sits ABOVE the browser chrome as the first row of
   the preview container. Visually matches chrome (same surface colour +
   border style) but takes the rounded top corners. */
.pf-device-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  z-index: 11;  /* above chrome (z-index: 10) so its border line wins */
}
.pf-device-label {
  font-size: .68rem; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 6px;
}
.tpv-device {
  background: var(--bg-card-2);
  border: 1px solid var(--border-hi);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tpv-device:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-dim);
}
.tpv-device.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.pf-frame-stage {
  position: absolute;
  top: 0;            /* updated by preview-frame.js to clear the header rows */
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: flex-start; justify-content: center;
  overflow: visible;
  transition: top .25s ease, width .28s cubic-bezier(.16,1,.3,1), height .28s cubic-bezier(.16,1,.3,1);
}
.pf-frame-stage iframe {
  border: none; display: block;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  transform-origin: top left;
}

.preview-container {
  height: 520px;
  overflow: hidden;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 16px 56px rgba(0,0,0,.6);
  border: 1px solid var(--border);
  border-top: none;
  margin-bottom: 20px;
  position: relative;
}
.preview-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none; display: block; background: white;
}

/* ── SUCCESS ─────────────────────────────────────────────────────── */
.success-container {
  text-align: center; padding: 64px 40px;
  animation: popIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.success-icon {
  width: 72px; height: 72px;
  background: var(--success-dim);
  border: 1px solid rgba(52,211,153,.3);
  color: var(--success); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  animation: successPop .6s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow: 0 0 32px rgba(52,211,153,.2);
}
@keyframes successPop {
  from { transform: scale(0) rotate(-30deg); }
  to   { transform: scale(1) rotate(0); }
}
.success-container h2 {
  font-size: 1.9rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--text);
  margin-bottom: 8px;
}
.success-container p {
  color: var(--text-soft); font-size: .95rem;
  font-weight: 300; margin-bottom: 28px;
}
.success-details {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px; margin-bottom: 28px;
  text-align: left;
}
.detail-item {
  display: flex; align-items: center; gap: 14px;
  font-size: .88rem; color: var(--text-soft);
}
.detail-icon { font-size: 1.2rem; }

/* ── FOOTER ──────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  background:
    linear-gradient(180deg, transparent 0%, rgba(232,160,48,.025) 100%);
  padding: 64px 40px 28px;
  margin-top: 40px;
  position: relative;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 44px;
}
.footer-col {
  display: flex; flex-direction: column;
  gap: 14px;
}
.footer-brand-col { gap: 18px; }
.footer-logo {
  display: inline-block;
  font-family: var(--font);
  font-size: 1.45rem; font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  text-decoration: none;
}
.footer-logo-accent { color: var(--accent); }
.footer-tagline {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.65;
  max-width: 320px;
  font-weight: 400;
}
.footer-parent {
  display: flex; flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-hi);
}
.footer-parent-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-parent-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  background: rgba(52,211,153,.04);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .15s;
  align-self: flex-start;
  max-width: max-content;
}
.footer-parent-link:hover {
  background: rgba(52,211,153,.1);
  border-color: rgba(52,211,153,.4);
  transform: translateY(-1px);
}
.parent-mark {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f766e, #2dd4bf);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .02em;
}
.parent-name {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.15;
  font-size: .9rem; font-weight: 700;
  color: var(--text);
}
.parent-name small {
  font-size: .68rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .01em;
}

.footer-col-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.footer-links {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.footer-links li { margin: 0; }
.footer-links a {
  font-size: .86rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: color .15s, gap .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.footer-links a:hover { color: var(--accent); gap: 7px; }
.footer-links a[target="_blank"]::after {
  content: "↗";
  font-size: .7em;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.footer-links a[target="_blank"]:hover::after { opacity: .8; }

.footer-disclaim {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 18px 22px;
  background: rgba(232,160,48,.04);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: .76rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-muted);
}
.footer-addr {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 580px;
  line-height: 1.55;
}
.footer-addr svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.footer-meta {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.footer-meta-sep { opacity: .5; }
.footer-meta-tag {
  font-weight: 600;
  color: var(--text-soft);
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.18);
  padding: 2px 9px;
  border-radius: 100px;
  font-size: .72rem;
  letter-spacing: .02em;
}

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer { padding: 48px 22px 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── NOTIFICATION TOASTS (script.js creates these) ────────────────── */
.notification {
  position: fixed !important;
  top: 20px !important; right: 20px !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important; font-size: .85rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
  opacity: 0 !important;
  transform: translateY(-16px) !important;
  transition: all .3s ease !important;
  z-index: 9999 !important; max-width: 320px !important;
}
.notification-success {
  background: rgba(52,211,153,.12) !important;
  border: 1px solid rgba(52,211,153,.35) !important;
  color: #6ee7b7 !important;
}
.notification-error {
  background: rgba(248,113,113,.12) !important;
  border: 1px solid rgba(248,113,113,.35) !important;
  color: #fca5a5 !important;
}
.notification-info {
  background: rgba(232,160,48,.08) !important;
  border: 1px solid rgba(232,160,48,.28) !important;
  color: var(--accent) !important;
}

/* ── LOADING OVERLAY (script.js creates this) ─────────────────────── */
.loading-overlay {
  background: rgba(9,8,12,.75) !important;
  backdrop-filter: blur(10px) !important;
}
.loading-spinner {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.7) !important;
}
.loading-spinner p { color: var(--text-soft) !important; }
.spinner-ring {
  border-color: rgba(232,160,48,.12) !important;
  border-top-color: var(--accent) !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .template-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-content { margin-top: -60px; }
}
@media (max-width: 900px) {
  .step-track { display: none; }
}
@media (max-width: 768px) {
  .navbar { padding: 0 20px; }
  .form-section { padding: 28px 22px; }
  .form-row-2 { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: repeat(2, 1fr); }
  .button-group { flex-direction: column; }
  .preview-frame { height: 480px; }
  .hero-content { margin-top: -40px; }
}
@media (max-width: 480px) {
  .navbar-content { gap: 10px; }
  .nav-badge { display: none; }
  .hero-title { font-size: 2.2rem; }
  .form-section { padding: 22px 16px; }
  .template-grid { grid-template-columns: repeat(2, 1fr); }
  .preview-frame { height: 360px; }
  .success-container { padding: 40px 16px; }
  /* Hide cursor on touch devices */
  .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   SCHEMA-DRIVEN FORM (Customize Every Section)
   Three-column grid: [left hint] [form card] [right hint]
   With floating site-map mockup, mobile ⓘ toggle, arrows.
   ═══════════════════════════════════════════════════════════════ */

/* ── Show More / Show Less toggle ─────────────────────────────── */
.show-more-wrap {
  text-align: center;
  margin: 24px 0 0;
}

.btn-show-more {
  background: none;
  border: 1px solid var(--border-hi);
  color: var(--text-soft);
  padding: 10px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  font-family: var(--font);
  transition: all 0.2s ease;
}

.btn-show-more:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.show-more-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-left: 4px;
}

.btn-show-more.active .show-more-arrow {
  transform: rotate(180deg);
}

.hidden-templates {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.3s ease;
}

.hidden-templates.open {
  max-height: 2000px;
  opacity: 1;
}

/* ── Schema form header ─────────────────────────────────────────── */
.schema-form-wrap {
  margin-top: 36px;
}
.schema-form-header {
  text-align: center;
  margin-bottom: 28px;
}
.schema-form-header h3 {
  font-size: 1.35rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--text);
  margin-bottom: 6px;
}
.schema-form-header p {
  font-size: .88rem; color: var(--text-soft);
  font-weight: 300;
}

/* ── Break out of the 860px container for side gutters ─────────── */
.schema-form-grid {
  width: min(1320px, calc(100vw - 40px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── The 3-column row: left hint, form, right hint ─────────────── */
.schema-section-row {
  display: grid;
  grid-template-columns: minmax(140px, 230px) minmax(0, 640px) minmax(140px, 260px);
  gap: 28px;
  align-items: start;
  justify-content: center;
}

/* ── Form card (center column) ─────────────────────────────────── */
.schema-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 30px;
  transition: border-color .25s, box-shadow .25s;
  position: relative;
}
.schema-section.active-peek {
  border-color: rgba(232,160,48,.25);
  box-shadow: 0 0 0 3px rgba(232,160,48,.06);
}
.schema-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.schema-section-head h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em;
  flex: 1;
  margin: 0;
}

/* ✨ AI button */
.btn-ai {
  background: linear-gradient(135deg, var(--accent), var(--accent-lt));
  color: var(--bg);
  border: none;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, opacity .2s;
  white-space: nowrap;
}
.btn-ai:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232,160,48,.35);
}
.btn-ai:disabled { opacity: .6; cursor: wait; }

/* ⓘ info toggle (mobile only, hidden on desktop) */
.hint-info-toggle {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--text-soft);
  width: 26px; height: 26px;
  border-radius: 50%;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.hint-info-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}
.hint-info-toggle svg { width: 14px; height: 14px; }

/* ── Hint gutters (left + right) ─────────────────────────────── */
.hint-gutter {
  position: sticky;
  top: 90px;
  padding-top: 26px;
  color: var(--text-soft);
  user-select: none;
}
.hint-left { text-align: right; }
.hint-right { text-align: left; }

.hint-label-text {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -.005em;
  margin-bottom: 10px;
  font-family: var(--font);
  opacity: .92;
}
.hint-description-text {
  font-size: .78rem;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.65;
  margin-top: 10px;
  max-width: 240px;
}
.hint-right .hint-description-text { margin-left: 0; }
.hint-left .hint-label-text { margin-left: auto; max-width: 200px; }

/* ── Arrow SVGs (white, curved, point into the form card) ──────── */
.hint-arrow {
  width: 100px;
  height: 50px;
  color: rgba(245,240,232,.4);
  display: block;
  opacity: 0;
  animation: arrowFadeIn .6s cubic-bezier(.16,1,.3,1) .3s forwards;
}
.hint-left .hint-arrow {
  margin-left: auto;
  margin-right: -8px;
}
.hint-right .hint-arrow {
  margin-right: auto;
  margin-left: -8px;
}
@keyframes arrowFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Inline hint panel (mobile only: tap ⓘ to reveal) ──────────── */
.hint-inline {
  display: none;
  background: rgba(232,160,48,.06);
  border: 1px solid rgba(232,160,48,.18);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  animation: hintSlide .25s ease;
}
.hint-inline.open { display: block; }
.hint-inline strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.hint-inline p {
  font-size: .76rem;
  color: var(--text-soft);
  line-height: 1.55;
  font-weight: 300;
}
@keyframes hintSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   REPEATERS, IMAGE FIELD, BUTTONS (schema-form components)
   ═══════════════════════════════════════════════════════════════ */

.repeater {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.repeater-item {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.repeater-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-hi);
}
.repeater-head strong {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.btn-add {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed rgba(232,160,48,.35);
  color: var(--accent);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn-add:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}

.link-remove {
  background: transparent;
  border: none;
  color: var(--danger);
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: none;
  transition: opacity .15s;
  opacity: .75;
}
.link-remove:hover { opacity: 1; }

/* Image field */
.image-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.image-preview {
  max-width: 120px;
}
.image-preview img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-hi);
}
.image-preview:empty { display: none; }

.file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card-2);
  border: 1px dashed var(--border-hi);
  color: var(--text-soft);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.file-upload-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.file-upload-icon { font-size: .9rem; }
.file-status {
  font-size: .72rem;
  color: var(--text-muted);
}

.schema-notice {
  padding: 24px;
  text-align: center;
  color: var(--text-soft);
  background: var(--bg-card-2);
  border: 1px dashed var(--border-hi);
  border-radius: 12px;
}
.schema-notice.error { color: var(--danger); border-color: rgba(248,113,113,.35); }

/* ═══════════════════════════════════════════════════════════════
   FLOATING SITE-MAP MOCKUP (bottom-LEFT, collapsible)
   Moved to bottom-left so it doesn't overlap the chatbot bubble.
   ═══════════════════════════════════════════════════════════════ */
.section-mockup {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font);
  pointer-events: none;  /* children re-enable */
}
.section-mockup > * { pointer-events: auto; }
/* Hide the mockup when we're not on the build step */
body:has(#step1[style*="display: none"]) .section-mockup { display: none; }

.mockup-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  transition: background .2s, border-color .2s, transform .15s;
}
.mockup-toggle svg { width: 14px; height: 14px; color: var(--accent); }
.mockup-toggle:hover {
  border-color: rgba(232,160,48,.45);
  transform: translateY(-2px);
}

.mockup-panel {
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  transform-origin: bottom left;
  transition: opacity .2s, transform .2s;
}
.section-mockup.collapsed .mockup-panel {
  opacity: 0;
  transform: scale(.9) translateY(8px);
  pointer-events: none;
  position: absolute;
  bottom: 48px;
  left: 0;
}

.mockup-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mockup-wireframe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 320px;
  overflow-y: auto;
  transition: box-shadow .3s, border-color .3s;
}
.mockup-wireframe.page-glow {
  border-color: rgba(232,160,48,.55);
  box-shadow: 0 0 0 3px rgba(232,160,48,.18), inset 0 0 24px rgba(232,160,48,.08);
}

.mockup-block {
  background: rgba(245,240,232,.05);
  border: 1px solid rgba(245,240,232,.05);
  border-radius: 4px;
  min-height: 14px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  position: relative;
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.mockup-block.active {
  background: rgba(232,160,48,.22);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232,160,48,.28), 0 0 18px rgba(232,160,48,.35);
  transform: translateX(2px);
}

.mockup-block-label {
  font-size: .62rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .25s;
}
.mockup-block.active .mockup-block-label {
  color: var(--accent);
  font-weight: 700;
}

.mockup-header {
  height: 16px;
  background: rgba(245,240,232,.08);
  gap: 8px;
}
.mockup-logo {
  width: 14px; height: 6px;
  background: var(--accent-lt);
  border-radius: 2px;
  opacity: .7;
}
.mockup-nav {
  flex: 1; height: 4px;
  background: rgba(245,240,232,.15);
  border-radius: 2px;
}
.mockup-header.active .mockup-logo { opacity: 1; }

.mockup-hero {
  min-height: 40px;
  background: linear-gradient(135deg, rgba(245,240,232,.06), rgba(245,240,232,.02));
}
.mockup-hero.active {
  background: linear-gradient(135deg, rgba(232,160,48,.28), rgba(232,160,48,.1));
}

.mockup-footer {
  min-height: 18px;
  background: rgba(245,240,232,.04);
  margin-top: 4px;
}

.mockup-hint {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.5;
  margin-top: 10px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — collapse gutters below 1040px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
  .schema-form-grid {
    width: 100%;
    left: auto;
    transform: none;
  }
  .schema-section-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hint-gutter { display: none; }
  .hint-info-toggle { display: inline-flex; }
}

@media (max-width: 900px) {
  .section-mockup {
    bottom: 16px;
    right: 16px;
  }
  .mockup-panel { width: 220px; }
}

@media (max-width: 600px) {
  .section-mockup { display: none; }
  .schema-section { padding: 22px 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   TEMPLATE PREVIEW MODAL  (hover 1.5s on desktop / long-press on touch)
   ═══════════════════════════════════════════════════════════════ */

/* Hint text under "Choose Your Template" */
.template-hint {
  font-size: .78rem;
  color: var(--text-soft);
  margin: -4px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.template-hint::before {
  content: '';
  width: 16px; height: 16px;
  background: rgba(232,160,48,.14);
  border: 1px solid rgba(232,160,48,.28);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.template-hint kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--accent-lt);
  font-weight: 500;
}

/* Soft glow ring while the hover timer is counting down — gives the user
   visual feedback that "something is about to happen" before the modal opens */
.template-box.tpv-pending .template-content {
  box-shadow: 0 0 0 2px rgba(232,160,48,.32),
              0 16px 36px -16px rgba(232,160,48,.34),
              0 0 0 6px rgba(232,160,48,.06);
  transition: box-shadow .3s ease;
}
.template-box.tpv-pending .template-preview {
  transition: filter .3s ease;
  filter: brightness(1.05);
}

/* Backdrop — fades in over a beat, then the modal lifts up after it */
.tpv-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,6,12,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  opacity: 0;
  pointer-events: none;
  transition: background-color .32s cubic-bezier(.16,1,.3,1),
              backdrop-filter   .32s cubic-bezier(.16,1,.3,1),
              -webkit-backdrop-filter .32s cubic-bezier(.16,1,.3,1),
              opacity           .24s ease;
}
.tpv-backdrop.open {
  background: rgba(8,6,12,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 1;
  pointer-events: auto;
}
body.tpv-open { overflow: hidden; }

/* Modal card — combines opacity + scale + slide-up for a soft, premium entrance.
   On exit it reverses with a slightly faster timing so dismissal feels crisp. */
.tpv-modal {
  position: relative;
  width: min(1180px, 100%);
  max-height: calc(100vh - 72px);
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 18px;
  box-shadow: 0 40px 100px -24px rgba(0,0,0,.7),
              0 0 0 1px rgba(232,160,48,.08),
              0 0 80px -20px rgba(232,160,48,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* initial (closed) state */
  opacity: 0;
  transform: translateY(28px) scale(.94);
  transform-origin: center bottom;
  transition: opacity .2s ease,
              transform .2s cubic-bezier(.4,0,1,1);
  will-change: transform, opacity;
}
.tpv-backdrop.open .tpv-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* longer, smoother easing on entry — the 60ms delay lets the backdrop
     start fading in first so the modal feels like it's "lifting from" the page */
  transition: opacity .42s cubic-bezier(.16,1,.3,1) 60ms,
              transform .52s cubic-bezier(.16,1,.3,1) 60ms;
}

/* Header */
.tpv-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(232,160,48,.06), transparent);
  flex-wrap: wrap;
}
.tpv-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.005em;
  margin: 0;
  flex-shrink: 0;
}

/* Device toolbar */
.tpv-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.tpv-toolbar-label {
  font-size: .72rem;
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: 6px;
}
.tpv-device {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all .18s ease;
}
.tpv-device:hover {
  color: var(--text);
  border-color: rgba(232,160,48,.4);
}
.tpv-device.active {
  background: rgba(232,160,48,.14);
  color: var(--accent);
  border-color: var(--accent);
}

.tpv-close {
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  flex-shrink: 0;
}
.tpv-close:hover {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-color: var(--border-hi);
}

/* Iframe wrap — flex container that centers the device "stage" inside it.
   The stage is the scaled-down "device frame" the iframe renders inside. */
.tpv-frame-wrap {
  flex: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(232,160,48,.04), transparent 60%),
    linear-gradient(180deg, #18141d 0%, #100d15 100%);
  overflow: hidden;
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tpv-frame-stage {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -12px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04);
  position: relative;
  flex-shrink: 0;
  /* Smooth resize when device toggles change the stage dimensions */
  transition: width .28s cubic-bezier(.16,1,.3,1), height .28s cubic-bezier(.16,1,.3,1);
}
.tpv-frame-stage[data-device="tablet"] { border-radius: 14px; }
.tpv-frame-stage[data-device="mobile"] { border-radius: 22px; }
.tpv-frame {
  border: none;
  display: block;
  background: #fff;
}

/* Footer */
.tpv-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  background: rgba(0,0,0,.18);
}
.tpv-confirm {
  background: linear-gradient(135deg, var(--accent), var(--accent-lt));
  color: var(--bg);
  border: none;
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 13px 32px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 10px 28px rgba(232,160,48,.32);
  transition: transform .15s ease, box-shadow .2s ease;
}
.tpv-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(232,160,48,.45);
}
.tpv-confirm-arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.tpv-confirm:hover .tpv-confirm-arrow {
  transform: translateX(3px);
}

@media (max-width: 720px) {
  .tpv-backdrop { padding: 14px; }
  .tpv-modal { max-height: calc(100vh - 28px); border-radius: 14px; }
  .tpv-header { padding: 14px 16px; gap: 12px; }
  .tpv-title { font-size: 1rem; flex-basis: 100%; order: -1; }
  .tpv-toolbar { margin-left: 0; flex-wrap: wrap; }
  .tpv-toolbar-label { display: none; }
  .tpv-device { padding: 6px 11px; font-size: .74rem; }
  .tpv-close { position: absolute; top: 10px; right: 10px; }
  .tpv-frame-wrap { min-height: 280px; }
}

/* ── CHATBOT WIDGET (floating help bot) ───────────────────────────── */
.cb-bubble {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-lt));
  color: var(--bg);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 12px 30px -6px rgba(232,160,48,.55), 0 0 0 4px rgba(232,160,48,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cb-bubble:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -6px rgba(232,160,48,.7), 0 0 0 6px rgba(232,160,48,.12); }
.cb-bubble.open { transform: scale(.92) rotate(8deg); }
.cb-bubble-icon { font-size: 1.4rem; line-height: 1; }
.cb-bubble-pulse {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(232,160,48,.45);
  pointer-events: none;
  animation: cbPulse 2.4s ease-out infinite;
}
@keyframes cbPulse {
  0%   { transform: scale(.9); opacity: .85; }
  100% { transform: scale(1.4); opacity: 0; }
}

.cb-panel {
  position: fixed;
  right: 24px; bottom: 100px;
  width: 380px; height: 540px; max-height: calc(100vh - 130px);
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 18px;
  box-shadow: 0 28px 60px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(232,160,48,.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.cb-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.cb-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(232,160,48,.06), transparent);
  border-bottom: 1px solid var(--border);
}
.cb-header-meta { display: flex; align-items: center; gap: 12px; }
.cb-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-lt));
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 0 18px rgba(232,160,48,.35);
}
.cb-title { font-size: .95rem; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.cb-status {
  font-size: .72rem; color: var(--text-soft);
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.cb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}
.cb-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.cb-close:hover { background: rgba(255,255,255,.04); color: var(--text); border-color: var(--border-hi); }

.cb-messages {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}
.cb-messages::-webkit-scrollbar { width: 6px; }
.cb-messages::-webkit-scrollbar-track { background: transparent; }
.cb-messages::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }

.cb-msg { display: flex; max-width: 85%; }
.cb-msg-user  { align-self: flex-end; }
.cb-msg-bot   { align-self: flex-start; }
.cb-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .88rem; line-height: 1.55;
  color: var(--text);
  word-wrap: break-word;
}
.cb-msg-user .cb-msg-bubble {
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.cb-msg-bot .cb-msg-bubble {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.cb-msg-bot .cb-msg-bubble strong { color: var(--accent); }
.cb-msg-bot .cb-msg-bubble code {
  background: rgba(232,160,48,.1); color: var(--accent-lt);
  padding: 1px 6px; border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82em;
}

.cb-typing .cb-msg-bubble { display: flex; gap: 4px; padding: 14px 16px; }
.cb-typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-soft);
  animation: cbBounce 1.3s ease-in-out infinite;
}
.cb-typing-dot:nth-child(2) { animation-delay: .15s; }
.cb-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes cbBounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

.cb-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}
.cb-input-wrap {
  display: flex; gap: 8px; align-items: flex-end;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  padding: 6px 6px 6px 12px;
  transition: border-color .15s;
}
.cb-input-wrap:focus-within { border-color: var(--accent); }
.cb-input {
  flex: 1;
  background: transparent;
  border: none; outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem; line-height: 1.45;
  resize: none;
  padding: 6px 0;
  min-height: 24px; max-height: 120px;
  cursor: text;
}
.cb-input::placeholder { color: var(--text-soft); }
.cb-send {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--accent); color: var(--bg);
  border: none; cursor: pointer;
  font-size: 1.05rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.cb-send:hover { background: var(--accent-lt); }
.cb-send:active { transform: scale(.92); }
.cb-send:disabled { opacity: .4; cursor: not-allowed; }

.cb-disclaimer {
  margin-top: 8px;
  font-size: .68rem;
  color: var(--text-soft);
  text-align: center;
  letter-spacing: .01em;
}

/* Mobile: full-width panel */
@media (max-width: 520px) {
  .cb-panel {
    right: 12px; left: 12px; bottom: 90px;
    width: auto; height: 70vh;
    max-height: calc(100vh - 110px);
  }
  .cb-bubble { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .cb-bubble-icon { font-size: 1.25rem; }
}

/* ── Profile Dropdown ─────────────────────────────────────────── */
.profile-dropdown {
  position: relative;
  display: none;
}

.profile-dropdown.show,
.profile-dropdown[data-visible="true"] {
  display: block;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.profile-trigger:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(46,201,123,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.profile-trigger .profile-name {
  font-size: 0.875rem;
  font-weight: 500;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 1000;
}

.profile-dropdown.open .profile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-section {
  padding: 8px 0;
}

.profile-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  padding: 4px 12px 8px;
}

.profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: background 0.15s;
  cursor: pointer;
}

.profile-item:hover {
  background: rgba(255,255,255,0.06);
}

.profile-item svg {
  color: var(--text-soft);
  flex-shrink: 0;
}

.profile-templates {
  padding: 4px 12px;
}

.profile-template-item {
  font-size: 0.8rem;
  color: var(--text-soft);
  padding: 6px 8px;
  border-radius: 6px;
}

.profile-template-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.profile-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.profile-logout {
  color: #f87171;
}

.profile-logout svg {
  color: #f87171;
}

.profile-logout:hover {
  background: rgba(248,113,113,0.1);
}

/* Hide login button when profile is shown */
.btn-nav-login {
  display: inline-block;
}

.btn-nav-login.hidden {
  display: none;
}

/* ===========================================
   PROFILE PAGE STYLES (moved from inline <style>)
   =========================================== */
.profile-page {
  /* Theme tokens - light */
  --bg:           #fafbf9;
  --bg-2:         #f0f5f1;
  --bg-3:         #e6efe8;
  --surface:      #ffffff;
  --surface-2:    #f7faf7;
  --ink:          #0f1f1a;
  --ink-soft:     rgba(15,31,26,.72);
  --ink-mute:     rgba(15,31,26,.5);
  --ink-faint:    rgba(15,31,26,.32);
  --line:         rgba(15,31,26,.08);
  --line-md:      rgba(15,31,26,.16);
  --green:        #0f766e;
  --green-soft:   #14b8a6;
  --green-deep:   #0d5d57;
  --green-tint:   rgba(15,118,110,.08);
  --green-glow:   rgba(15,118,110,.18);
  --gold:         #d97706;
  --red:          #dc2626;
  --red-tint:     rgba(220,38,38,.08);
  --shadow-1:     0 1px 3px rgba(15,31,26,.06);
  --shadow-2:     0 8px 24px -10px rgba(15,31,26,.16);
  --shadow-3:     0 24px 60px -28px rgba(15,31,26,.22);
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, monospace;
  --radius:       14px;
}
[data-theme="dark"] .profile-page {
  --bg:           #0a1410;
  --bg-2:         #0e1a16;
  --bg-3:         #11211c;
  --surface:      #131e1a;
  --surface-2:    #182521;
  --ink:          #e7f0eb;
  --ink-soft:     rgba(231,240,235,.72);
  --ink-mute:     rgba(231,240,235,.5);
  --ink-faint:    rgba(231,240,235,.3);
  --line:         rgba(255,255,255,.08);
  --line-md:      rgba(255,255,255,.14);
  --green:        #2dd4bf;
  --green-soft:   #5eead4;
  --green-deep:   #0d9488;
  --green-tint:   rgba(45,212,191,.1);
  --green-glow:   rgba(45,212,191,.24);
  --gold:         #fbbf24;
  --red:          #ef4444;
  --red-tint:     rgba(239,68,68,.1);
  --shadow-1:     0 1px 3px rgba(0,0,0,.4);
  --shadow-2:     0 8px 24px -10px rgba(0,0,0,.5);
  --shadow-3:     0 24px 60px -28px rgba(0,0,0,.6);
}
.profile-page {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
.profile-page a { color: inherit; text-decoration: none; }
.profile-page button { font-family: inherit; cursor: pointer; border: none; background: none; }
.profile-page *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Animated BG blobs */
.profile-page .bg-blobs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.profile-page .blob { position: absolute; width: 580px; height: 580px; border-radius: 50%; filter: blur(80px); opacity: .55; animation: float 26s ease-in-out infinite; transition: opacity .35s ease; }
.profile-page .blob-1 { background: radial-gradient(circle, var(--green) 0%, transparent 70%); top: -180px; left: -180px; }
.profile-page .blob-2 { background: radial-gradient(circle, var(--green-soft) 0%, transparent 70%); top: 30%; right: -200px; animation-delay: -9s; }
.profile-page .blob-3 { background: radial-gradient(circle, var(--green) 0%, transparent 70%); bottom: -200px; left: 28%; animation-delay: -18s; }
[data-theme="dark"] .profile-page .blob { opacity: .3; }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -40px) scale(1.08); } 66% { transform: translate(-40px, 50px) scale(.94); } }

/* Nav */
.profile-page .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.profile-page .nav-inner { max-width: 1100px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; }
.profile-page .nav-back { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; color: var(--ink-soft); transition: color .2s, gap .2s; }
.profile-page .nav-back:hover { color: var(--green); gap: 12px; }
.profile-page .nav-actions { display: flex; align-items: center; gap: 10px; }
.profile-page .icon-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-md); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.profile-page .icon-btn:hover { background: var(--green-tint); color: var(--green); border-color: var(--green); transform: translateY(-1px); }
.profile-page .icon-btn svg { width: 18px; height: 18px; }
.profile-page .theme-toggle .icon-moon { display: block; }
.profile-page .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .profile-page .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .profile-page .theme-toggle .icon-sun { display: block; }

/* Layout */
.profile-page .container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 56px 32px 80px; }
.profile-page .section { margin-bottom: 56px; }
.profile-page .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.profile-page .section-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.005em; color: var(--ink); }
.profile-page .section-meta { font-size: .82rem; color: var(--ink-mute); }

/* Profile Header */
.profile-page .profile-header { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 44px 44px 36px; box-shadow: var(--shadow-3); position: relative; overflow: hidden; margin-bottom: 32px; }
.profile-page .profile-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green) 0%, var(--green-soft) 50%, var(--gold) 100%); }
.profile-page .profile-role { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); background: var(--green-tint); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); padding: 6px 12px; border-radius: 100px; margin-bottom: 24px; }
.profile-page .profile-role::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green-glow); }
.profile-page .profile-role.admin { color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.profile-page .profile-role.admin::before { background: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 50%, transparent); }
.profile-page .profile-name { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.05; margin-bottom: 14px; }
.profile-page .profile-email { font-family: var(--mono); font-size: .98rem; color: var(--ink-soft); margin-bottom: 28px; }
.profile-page .profile-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px dashed var(--line-md); gap: 16px; flex-wrap: wrap; }
.profile-page .profile-row-label { font-size: .82rem; font-weight: 600; color: var(--ink-mute); letter-spacing: .04em; text-transform: uppercase; }
.profile-page .profile-row-value { font-family: var(--mono); font-size: .98rem; color: var(--ink); letter-spacing: .04em; }
.profile-page .row-edit { font-size: .82rem; font-weight: 600; color: var(--green); padding: 6px 14px; border-radius: 8px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.profile-page .row-edit:hover { background: var(--green-tint); border-color: var(--green); }

/* Stats Row */
.profile-page .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 56px; }
.profile-page .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-1); transition: transform .2s, box-shadow .25s, border-color .2s; }
.profile-page .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--green) 25%, var(--line)); }
.profile-page .stat-label { font-size: .76rem; font-weight: 600; color: var(--ink-mute); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.profile-page .stat-value { font-size: 2.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; font-feature-settings: 'tnum'; }
.profile-page .stat-value .currency { color: var(--green); font-weight: 700; margin-right: 2px; }
.profile-page .stat-meta { font-size: .8rem; color: var(--ink-mute); }

/* Templates Grid */
.profile-page .templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.profile-page .template-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; cursor: pointer; }
.profile-page .template-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--green); }
.profile-page .template-thumb { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--green); background: linear-gradient(135deg, var(--green-tint) 0%, var(--bg-3) 100%); border-bottom: 1px solid var(--line); }
.profile-page .template-info { padding: 18px 20px 20px; }
.profile-page .template-name { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: -.005em; }
.profile-page .template-base { font-size: .78rem; color: var(--ink-mute); margin-bottom: 14px; }
.profile-page .template-foot { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; }
.profile-page .template-date { color: var(--ink-faint); display: inline-flex; align-items: center; gap: 5px; }
.profile-page .template-status { padding: 3px 10px; border-radius: 100px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
.profile-page .template-status.published { background: var(--green-tint); color: var(--green); }
.profile-page .template-status.draft { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold); }

/* Subscription Card */
.profile-page .sub-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.profile-page .sub-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--green) 0%, var(--green-soft) 100%); }
.profile-page .sub-card-text { flex: 1; min-width: 280px; }
.profile-page .sub-card-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); padding: 4px 10px; border-radius: 100px; margin-bottom: 12px; }
.profile-page .sub-card-title { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
.profile-page .sub-card-body { font-size: .94rem; color: var(--ink-soft); line-height: 1.7; max-width: 540px; }
.profile-page .sub-card-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.profile-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 10px; font-size: .9rem; font-weight: 600; transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; }
.profile-page .btn:hover { transform: translateY(-1px); }
.profile-page .btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 18px var(--green-glow); }
.profile-page .btn-primary:hover { background: var(--green-deep); color: #fff; box-shadow: 0 10px 26px var(--green-glow); }
[data-theme="dark"] .profile-page .btn-primary { color: #0a1410; }
[data-theme="dark"] .profile-page .btn-primary:hover { color: #0a1410; }
.profile-page .btn-secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-md); }
.profile-page .btn-secondary:hover { background: var(--green-tint); color: var(--green); border-color: var(--green); }
.profile-page .btn-danger { background: transparent; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
.profile-page .btn-danger:hover { background: var(--red-tint); border-color: var(--red); }
.profile-page .admin-only { display: none; }
.profile-page.is-admin .admin-only { display: inline-flex; }

/* Activity */
.profile-page .activity { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 0; box-shadow: var(--shadow-1); }
.profile-page .activity-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.profile-page .activity-row:last-child { border-bottom: none; }
.profile-page .activity-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.profile-page .activity-text { font-size: .92rem; color: var(--ink); }
.profile-page .activity-text strong { font-weight: 600; }
.profile-page .activity-meta { font-size: .8rem; color: var(--ink-mute); margin-top: 2px; }
.profile-page .activity-amount { font-family: var(--mono); font-size: .86rem; color: var(--green); font-weight: 600; font-feature-settings: 'tnum'; }

/* Account Actions */
.profile-page .account-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.profile-page .account-actions .btn { flex: 1; min-width: 180px; }

/* Responsive */
@media (max-width: 760px) {
  .profile-page .container { padding: 36px 18px 60px; }
  .profile-page .profile-header { padding: 32px 24px 28px; }
  .profile-page .stats-row { grid-template-columns: 1fr; gap: 12px; }
  .profile-page .sub-card { padding: 28px 22px; }
  .profile-page .sub-card-actions { width: 100%; }
  .profile-page .nav-inner { padding: 14px 18px; }
  .profile-page .activity-row { padding: 14px 18px; gap: 12px; grid-template-columns: 28px 1fr auto; }
}

/* ===========================================
   PLANS PAGE STYLES (moved from inline <style>)
   =========================================== */
.plans-page {
  /* Theme tokens - light */
  --bg:           #fafbf9;
  --bg-2:         #f0f5f1;
  --bg-3:         #e6efe8;
  --surface:      #ffffff;
  --surface-2:    #f7faf7;
  --ink:          #0f1f1a;
  --ink-soft:     rgba(15,31,26,.72);
  --ink-mute:     rgba(15,31,26,.5);
  --ink-faint:    rgba(15,31,26,.32);
  --line:         rgba(15,31,26,.08);
  --line-md:      rgba(15,31,26,.16);
  --green:        #0f766e;
  --green-soft:   #14b8a6;
  --green-deep:   #0d5d57;
  --green-tint:   rgba(15,118,110,.08);
  --green-glow:   rgba(15,118,110,.18);
  --gold:         #d97706;
  --red:          #dc2626;
  --red-tint:     rgba(220,38,38,.08);
  --shadow-1:     0 1px 3px rgba(15,31,26,.06);
  --shadow-2:     0 8px 24px -10px rgba(15,31,26,.16);
  --shadow-3:     0 24px 60px -28px rgba(15,31,26,.22);
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, monospace;
  --radius:       14px;
}
[data-theme="dark"] .plans-page {
  --bg:           #0a1410;
  --bg-2:         #0e1a16;
  --bg-3:         #11211c;
  --surface:      #131e1a;
  --surface-2:    #182521;
  --ink:          #e7f0eb;
  --ink-soft:     rgba(231,240,235,.72);
  --ink-mute:     rgba(231,240,235,.5);
  --ink-faint:    rgba(231,240,235,.3);
  --line:         rgba(255,255,255,.08);
  --line-md:      rgba(255,255,255,.14);
  --green:        #2dd4bf;
  --green-soft:   #5eead4;
  --green-deep:   #0d9488;
  --green-tint:   rgba(45,212,191,.1);
  --green-glow:   rgba(45,212,191,.24);
  --gold:         #fbbf24;
  --red:          #ef4444;
  --red-tint:     rgba(239,68,68,.1);
  --shadow-1:     0 1px 3px rgba(0,0,0,.4);
  --shadow-2:     0 8px 24px -10px rgba(0,0,0,.5);
  --shadow-3:     0 24px 60px -28px rgba(0,0,0,.6);
}
.plans-page *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.plans-page { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background .35s ease, color .35s ease; }
.plans-page a { color: inherit; text-decoration: none; }
.plans-page button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Nav */
.plans-page .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.plans-page .nav-inner { max-width: 1100px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; }
.plans-page .nav-back { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; color: var(--ink-soft); transition: color .2s, gap .2s; }
.plans-page .nav-back:hover { color: var(--green); gap: 12px; }
.plans-page .nav-actions { display: flex; align-items: center; gap: 10px; }
.plans-page .icon-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-md); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.plans-page .icon-btn:hover { background: var(--green-tint); color: var(--green); border-color: var(--green); transform: translateY(-1px); }
.plans-page .icon-btn svg { width: 18px; height: 18px; }
.plans-page .theme-toggle .icon-moon { display: block; }
.plans-page .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .plans-page .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .plans-page .theme-toggle .icon-sun { display: block; }

/* Layout */
.plans-page .container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 56px 32px 80px; }
.plans-page .section { margin-bottom: 56px; }
.plans-page .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.plans-page .section-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.005em; color: var(--ink); }
.plans-page .section-meta { font-size: .82rem; color: var(--ink-mute); }

/* Plans Grid */
.plans-page .plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plans-page .plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 36px 32px; box-shadow: var(--shadow-1); position: relative; display: flex; flex-direction: column; transition: transform .2s, box-shadow .25s; }
.plans-page .plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.plans-page .plan-card.featured { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--shadow-3); }
.plans-page .plan-card.featured::before { content: 'Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; }
.plans-page .plan-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); padding: 4px 10px; border-radius: 100px; margin-bottom: 16px; }
.plans-page .plan-name { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.plans-page .plan-desc { font-size: .9rem; color: var(--ink-mute); line-height: 1.6; margin-bottom: 24px; }
.plans-page .plan-price { margin-bottom: 8px; }
.plans-page .plan-price .amount { font-size: 2.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.plans-page .plan-price .currency { color: var(--green); font-weight: 700; }
.plans-page .plan-price .period { font-size: .9rem; color: var(--ink-mute); }
.plans-page .plan-features { list-style: none; margin-bottom: 32px; flex: 1; }
.plans-page .plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--ink-soft); padding: 8px 0; border-bottom: 1px solid var(--line); }
.plans-page .plan-features li:last-child { border-bottom: none; }
.plans-page .plan-features li svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.plans-page .plan-card .btn { width: 100%; justify-content: center; }
.plans-page .plan-card .btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 18px var(--green-glow); }
.plans-page .plan-card .btn-primary:hover { background: var(--green-deep); }
.plans-page .plan-card .btn-secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-md); }
.plans-page .plan-card .btn-secondary:hover { background: var(--green-tint); color: var(--green); border-color: var(--green); }
.plans-page .admin-banner { background: linear-gradient(90deg, rgba(217,119,6,.12) 0%, rgba(217,119,6,.06) 100%); border: 1px solid var(--gold); border-radius: 10px; padding: 14px 20px; margin-bottom: 28px; display: none; }
.plans-page.is-admin .admin-banner { display: block; }
.plans-page .admin-banner-text { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--gold); font-weight: 500; }
.plans-page .admin-banner-text svg { width: 18px; height: 18px; }
.plans-page .coming-soon { display: flex; align-items: center; justify-content: center; min-height: 400px; }
.plans-page .coming-soon-inner { text-align: center; max-width: 420px; }
.plans-page .coming-soon-icon { width: 64px; height: 64px; background: var(--green-tint); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--green); }
.plans-page .coming-soon-icon svg { width: 28px; height: 28px; }
.plans-page .coming-soon h2 { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.plans-page .coming-soon p { font-size: .95rem; color: var(--ink-mute); line-height: 1.7; margin-bottom: 24px; }
.plans-page .coming-soon .btn { background: var(--green); color: #fff; padding: 12px 28px; }
.plans-page .plans-hidden { display: block; }
.plans-page.is-admin .plans-hidden { display: none; }

/* Responsive */
@media (max-width: 900px) {
  .plans-page .plans-grid { grid-template-columns: 1fr; gap: 20px; }
  .plans-page .container { padding: 36px 18px 60px; }
  .plans-page .nav-inner { padding: 14px 18px; }
}