/* SITE BUILDER MODULE */
  .sb-theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px;}
  .sb-theme-card { border:1.5px solid var(--border); padding:14px; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; background:var(--page-bg); }
  .sb-theme-card:hover{border-color:var(--purple-300, var(--purple-600));}
  .sb-theme-card.sb-theme-selected{border-color:var(--purple-600); box-shadow:0 0 0 3px var(--purple-50);}
  .sb-theme-card b{display:block; font-size:13px; margin-top:10px;}
  .sb-theme-card p{font-size:11.5px; color:var(--ink-500); margin-top:3px;}
  .sb-theme-swatch{width:100%; height:56px; border-radius:8px;}
  .sb-theme-swatch-elegant{background:linear-gradient(135deg,#f7ede3,#c9a97e);}
  .sb-theme-swatch-modern{background:linear-gradient(135deg,#1f2937,#4b5563);}
  .sb-theme-swatch-minimal{background:linear-gradient(135deg,#f8f9fa,#dee2e6);}
  .sb-theme-swatch-bold{background:linear-gradient(135deg,#7c3aed,#db2777);}
  .sb-theme-swatch-romantic{background:linear-gradient(135deg,#ffe3ea,#e8a0b4);}
  .sb-theme-swatch-earthy{background:linear-gradient(135deg,#dfe6c8,#b56b4a);}
  .sb-theme-swatch-luxe{background:linear-gradient(135deg,#0d0d0d,#c9a227);}
  .sb-theme-swatch-pastel{background:linear-gradient(135deg,#fde2ff,#b48ee0);}
  .sb-theme-swatch-coastal{background:linear-gradient(135deg,#cdeae8,#2a9d8f);}
  .sb-theme-swatch-classic{background:linear-gradient(135deg,#1a2340,#a68a3f);}

  .sb-page-grid{display:flex; flex-wrap:wrap; gap:10px;}
  .sb-page-toggle{display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:10px; padding:9px 14px; font-size:12.8px; font-weight:500; cursor:pointer; background:var(--page-bg);}
  .sb-page-toggle input{accent-color:var(--purple-600); width:15px; height:15px;}
  .sb-feature-toggle { background:var(--page-bg); }
  .sb-feature-text p { margin-top:2px; }

  /* Website switcher — rename/delete are grouped and separated from the
     clickable name so a delete tap can't happen by accident while
     scanning between websites. Delete only turns danger-red on hover/focus,
     it stays neutral the rest of the time.
     A salon can own several sites; this used to wrap onto as many rows as
     needed and could push the actual builder content off-screen. It's now
     a single-row horizontal-scroll strip so it stays compact no matter how
     many websites exist. */
  .sb-project-switcher{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; margin-bottom:14px; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
  .sb-project-switcher::-webkit-scrollbar{height:5px;}
  .sb-project-switcher::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px;}
  .sb-project-chip{display:flex; align-items:center; gap:6px; flex:none; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; white-space:nowrap;}
  .sb-project-chip.active{border-color:var(--brand-600, #6366f1); background:var(--brand-50, #eef2ff);}
  .sb-project-chip-select{font-weight:600; font-size:12.5px; max-width:140px; overflow:hidden; text-overflow:ellipsis;}
  .sb-project-chip-status{font-size:10.5px; flex:none;}
  .sb-project-chip-actions{display:flex; align-items:center; gap:4px; margin-left:10px; padding-left:10px; border-left:1px solid var(--border);}
  .sb-project-rename, .sb-project-delete{background:none; border:none; color:var(--ink-400); cursor:pointer; line-height:1; padding:5px 7px; border-radius:6px; transition:background .12s ease, color .12s ease;}
  .sb-project-rename{font-size:13px;}
  .sb-project-delete{font-size:14px;}
  .sb-project-rename:hover, .sb-project-rename:focus-visible{background:var(--page-bg); color:var(--ink-700, #374151);}
  .sb-project-delete:hover, .sb-project-delete:focus-visible{background:var(--red-50, #fef2f2); color:var(--red-600, #dc2626);}

  .sb-preview-tab-active{background:var(--purple-600) !important; color:#fff !important; border-color:var(--purple-600) !important;}

  .sb-preview-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px;}
  .sb-preview-frame{background:var(--card-bg,#fff); width:100%; max-width:760px; max-height:90vh; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:max-width .2s ease;}
  .sb-preview-head{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); gap:10px; flex-wrap:wrap;}
  .sb-preview-tabs{display:flex; gap:8px; flex-wrap:wrap;}
  .sb-preview-controls{display:flex; gap:8px; align-items:center;}
  .sb-preview-body{padding:24px; overflow-y:auto; flex:1;}

  .sb-viewport-group{display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
  .sb-viewport-btn{display:flex; align-items:center; justify-content:center; width:34px; height:32px; border:none; background:none; color:var(--ink-500); cursor:pointer;}
  .sb-viewport-btn svg{width:16px; height:16px;}
  .sb-viewport-btn:hover{background:var(--purple-50);}

  .sb-callout-warn{background:var(--amber-50,#fffbeb); color:var(--amber-600); border:1px solid var(--amber-600); border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:12.5px; display:flex; align-items:flex-start; gap:6px;}
  .sb-callout-warn svg{width:14px; height:14px; flex:none; margin-top:1px;}
  .sb-empty-state{padding:30px; text-align:center; color:var(--ink-500);}

  @media (max-width:560px){
    .sb-preview-frame{max-width:100% !important; max-height:100vh; border-radius:0; height:100%;}
    .sb-preview-head{padding:12px 14px;}
    .sb-preview-body{padding:16px;}
  }
  .sb-viewport-active{background:var(--purple-600) !important; color:#fff;}

  /* ---- CREATION WIZARD ---- */
  .sb-stepper{display:flex; align-items:center; margin-bottom:22px;}
  .sb-step{display:flex; align-items:center; gap:8px; cursor:default; padding:2px 0;}
  .sb-step[role="button"]{cursor:pointer;}
  .sb-step-dot{display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:12px; font-weight:700; flex:none; border:1.5px solid var(--border); color:var(--ink-500); background:var(--page-bg);}
  .sb-step-label{font-size:12.5px; font-weight:600; color:var(--ink-500); white-space:nowrap;}
  .sb-step-line{flex:1; height:1.5px; background:var(--border); margin:0 10px; min-width:16px;}
  .sb-step-active .sb-step-dot{border-color:var(--purple-600); background:var(--purple-600); color:#fff;}
  .sb-step-active .sb-step-label{color:var(--ink-900, #111827);}
  .sb-step-done .sb-step-dot{border-color:var(--purple-600); background:var(--purple-50); color:var(--purple-600);}
  .sb-step-done .sb-step-label{color:var(--ink-700, #374151);}
  .sb-step-upcoming .sb-step-dot{opacity:.7;}

  .sb-step-intro{margin-bottom:16px;}
  .sb-step-title{display:block; font-size:14.5px; margin-bottom:4px;}
  .sb-step-sub{font-size:12.5px; color:var(--ink-500); line-height:1.5;}

  .sb-theme-card{position:relative;}
  .sb-check-badge{display:none; position:absolute; top:10px; right:10px; background:var(--purple-600); color:#fff; font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:20px;}
  .sb-theme-card.sb-theme-selected .sb-check-badge{display:inline-block;}

  .sb-inline-hint{font-size:12px; color:var(--amber-600, #d97706); min-height:16px; margin-top:8px;}

  .sb-wizard-actions{display:flex; justify-content:space-between; align-items:center; margin-top:22px; gap:10px;}

  .sb-generate-btn{font-weight:700;}

  .sb-review-card { border:1px solid var(--border); overflow:hidden; }
  .sb-review-row{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border);}
  .sb-review-row:last-child{border-bottom:none;}
  .sb-review-key{font-size:12px; font-weight:600; color:var(--ink-500); width:90px; flex:none;}
  .sb-review-val{font-size:13px; font-weight:500; flex:1;}
  .sb-review-edit{background:none; border:none; color:var(--purple-600); font-size:12px; font-weight:600; cursor:pointer; padding:0;}

  @media (max-width:480px){
    .sb-step-label{display:none;}
    .sb-review-key{width:70px;}
  }

  /* ---- FEATURES STEP ---- */
  .sb-feature-list{display:flex; flex-direction:column; gap:10px;}
  .sb-feature-toggle{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; transition:border-color .15s;}
  .sb-feature-toggle:has(.sb-feature-checkbox:checked){border-color:var(--purple-600); background:var(--purple-50);}
  .sb-feature-toggle input{margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--purple-600);}
  .sb-feature-text b{display:block; font-size:13.5px; margin-bottom:2px;}
  .sb-feature-text p{font-size:12px; color:var(--ink-500); line-height:1.4;}

  /* ---- PUBLISH & DOMAIN ADMIN PANEL ---- */
  .sb-admin-section{padding:18px 0; border-bottom:1px solid var(--border);}
  .sb-admin-section:first-child{padding-top:6px;}
  .sb-admin-label{display:block; font-size:14px; margin-bottom:4px;}
  .sb-admin-hint{font-size:12.5px; color:var(--ink-500); margin-bottom:12px; line-height:1.4;}
  .sb-publish-live{background:#dcfce7; color:#15803d;}
  .sb-publish-off{background:var(--page-bg); color:var(--ink-500); border:1px solid var(--border);}

  /* ---- REAL PREVIEW IFRAME (byte-identical to the live site) ---- */
  .sb-preview-body:has(.sb-preview-iframe){ padding:0; overflow:hidden; }
  .sb-preview-iframe{ width:100%; height:100%; min-height:60vh; border:none; display:block; background:#fff; }

  /* ---- SKIP-AI LINK (persistent, visible from Step 1) ---- */
  .sb-skip-link{ background:none; border:none; color:var(--purple-600); font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 0; white-space:nowrap; }
  .sb-skip-link:hover{ text-decoration:underline; }

  /* ---- ALWAYS-VISIBLE STEP PROGRESS TEXT (mobile orientation) ---- */
  .sb-step-progress-text{ font-size:11.5px; font-weight:700; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px; }

  /* ---- DANGER ZONE ---- */
  .sb-danger-zone{ margin-top:18px; padding:16px; border:1px solid var(--red-600); background:var(--red-50); border-radius:var(--radius-md); }
  .sb-danger-title{ display:block; font-size:12.5px; font-weight:700; color:var(--red-600); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; }
  .sb-danger-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0; }
  .sb-danger-row + .sb-danger-row{ border-top:1px solid rgba(220,38,38,.15); }
  .sb-danger-row b{ display:block; font-size:13px; color:var(--ink-900,#111827); }
  .sb-danger-row p{ font-size:12px; color:var(--ink-500); margin:2px 0 0; }
  .sb-danger-btn { flex:none; background:#fff; border:1px solid var(--red-600); color:var(--red-600); cursor:pointer; }
  .sb-danger-btn:hover{ background:var(--red-600); color:#fff; }

  /* ---- SETTINGS TAB — LOCKED STATE (no site yet) ---- */
  .sb-settings-locked-banner{ background:var(--amber-50, #fffbeb); border:1px solid var(--amber-200, #fde68a); color:var(--amber-600, #d97706); font-size:12.5px; font-weight:600; padding:10px 14px; border-radius:10px; margin-bottom:16px; }