/* ============================================================
   GrowthEngine AI — "Atelier" admin design system
   Warm editorial growth console. Paper & ink, emerald signature,
   amber accent, clay danger. Fraunces display + Hanken Grotesk UI.
   Built with the frontend-design system. All legacy class names
   are preserved so existing views keep working.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* surfaces */
  --paper:#f4efe5;
  --paper-2:#efe8db;
  --surface:#fffdf8;
  --surface-2:#faf5ec;
  --ink:#211d18;
  --ink-soft:#6c645a;
  --ink-faint:#9a9085;
  --line:#e6ddcd;
  --line-strong:#d8cdb8;

  /* brand palette */
  --brand:#1f7a5a;          /* emerald — growth / revenue */
  --brand-deep:#155943;
  --brand-tint:#e4f0ea;
  --accent:#dca42a;         /* amber — energy / heritage yellow */
  --accent-deep:#b9851a;
  --accent-tint:#fbf1d8;
  --danger:#bf4a2e;         /* clay */
  --danger-tint:#f6e3dc;

  /* status */
  --ok:#1f7a5a; --ok-tint:#e1efe8;
  --warn:#b9851a; --warn-tint:#fbf1d8;
  --info:#3a6ea5; --info-tint:#e4edf6;

  /* type */
  --font-display:"Fraunces","Hoefler Text",Georgia,serif;
  --font-ui:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,monospace;

  /* shape */
  --r-sm:9px; --r:13px; --r-lg:18px; --r-xl:26px;
  --pad:18px;
  --shadow-sm:0 1px 2px rgba(33,29,24,.05),0 2px 8px rgba(33,29,24,.05);
  --shadow:0 8px 24px rgba(33,29,24,.08);
  --shadow-lg:0 22px 60px rgba(33,29,24,.14);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);

  --sidebar-w:262px;
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:color-mix(in srgb,var(--brand) 24%,transparent)}
a{color:var(--brand-deep)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.1;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(28px,3vw,40px);font-weight:600}
h2{font-size:22px}
h3{font-size:17px}
p{margin:0 0 12px}
small{font-size:12.5px}
code,pre,.mono{font-family:var(--font-mono)}
code{display:inline-block;background:var(--brand-tint);color:var(--brand-deep);padding:3px 7px;margin:2px 3px 2px 0;border-radius:7px;font-size:12.5px}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}

/* ---------- App canvas ---------- */
.admin-glass-body{
  min-height:100vh;
  background:
    radial-gradient(1200px 460px at 78% -8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),
    radial-gradient(900px 420px at -6% 8%,color-mix(in srgb,var(--brand) 11%,transparent),transparent 58%),
    var(--paper);
  background-attachment:fixed;
}
/* subtle paper grain */
.admin-glass-body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------- Sidebar / navigation ---------- */
.sidebar,.glass-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:50;
  background:var(--surface);
  border-right:1px solid var(--line);
  padding:18px 14px 22px;
  overflow:auto;
  box-shadow:1px 0 0 rgba(33,29,24,.02);
}
.sidebar::-webkit-scrollbar{width:9px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:9px;border:3px solid var(--surface)}

.brand-panel{
  display:flex;gap:12px;align-items:center;margin:4px 4px 18px;padding:6px 4px;
  text-decoration:none;
}
.brand-mark{
  width:42px;height:42px;border-radius:13px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--brand),var(--brand-deep));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;
  box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 32%,transparent);
}
.brand-panel h2{margin:0;font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1}
.brand-panel small{display:block;color:var(--ink-soft);font-size:11.5px;margin-top:2px}

.nav-home{
  display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:11px 12px;
  border-radius:var(--r);text-decoration:none;font-weight:700;color:#fff;
  background:linear-gradient(150deg,var(--brand),var(--brand-deep));
  box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 26%,transparent);
}
.nav-home::before{content:"◆";font-size:11px;opacity:.9}

.nav-group{margin:18px 0 4px}
.nav-group>span{
  display:flex;align-items:center;gap:8px;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.14em;
  font-size:10.5px;font-weight:800;margin:0 6px 8px;
}
.nav-group>span::before{
  counter-increment:navstage;content:counter(navstage);
  width:18px;height:18px;border-radius:6px;flex:0 0 auto;
  display:grid;place-items:center;font-size:10px;
  background:var(--accent-tint);color:var(--accent-deep);letter-spacing:0;
}
aside.sidebar{counter-reset:navstage}
/* utility groups (Start here / Settings): no number badge */
.nav-group.no-count>span::before{content:none;counter-increment:none}

.sidebar a,.sidebar button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;margin:3px 0;text-align:left;cursor:pointer;
  color:var(--ink);background:transparent;border:1px solid transparent;
  border-radius:var(--r-sm);text-decoration:none;font:inherit;font-size:14px;font-weight:600;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.sidebar a svg,.sidebar button svg{width:17px;height:17px;flex:0 0 auto;opacity:.65;stroke-width:1.9}
.sidebar a:hover,.sidebar button:hover{background:var(--surface-2);transform:translateX(2px)}
.sidebar a:hover svg{opacity:1;color:var(--brand)}
.sidebar a.active{
  background:var(--brand-tint);color:var(--brand-deep);
  box-shadow:inset 3px 0 0 var(--brand);
}
.sidebar a.active svg{opacity:1;color:var(--brand)}
.sidebar a[href="/admin/logout"]{margin-top:14px;color:var(--danger);font-weight:700}
.sidebar a[href="/admin/logout"]:hover{background:var(--danger-tint)}

/* sidebar collapse */
.app-sidebar-toggle{
  position:fixed;left:14px;top:14px;z-index:100000;width:38px;height:38px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:11px;font-weight:800;box-shadow:var(--shadow-sm);cursor:pointer;
}
.app-sidebar-toggle:hover{background:var(--ink);color:var(--surface)}
.sidebar{transition:transform .22s ease}
.main{transition:margin-left .22s ease}
.app-sidebar-collapsed .sidebar{transform:translateX(calc(-1 * var(--sidebar-w) - 4px))}
.app-sidebar-collapsed .main{margin-left:0!important}

/* ---------- Main column ---------- */
.main,.glass-main{
  position:relative;z-index:1;
  margin-left:var(--sidebar-w);
  padding:30px clamp(20px,3vw,42px) 60px;
  max-width:1500px;
}
.main>h1:first-child,.glass-main>h1{margin-top:4px}

/* Active brand bar */
.brand-scope-bar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.brand-scope-bar strong{font-weight:700}
.brand-scope-bar span{color:var(--brand-deep)!important;font-family:var(--font-display)}
.brand-scope-bar small{color:var(--ink-soft)}

/* ---------- Cards / panels ---------- */
.card,.panel,.glass-panel,.glass-card,.card-form,.phase-card,.metric-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--pad);
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
}
.card{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.glass-card:hover,.phase-card:hover,.card:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
.panel h2,.glass-panel h2{margin-top:0}

/* metric / stat cards */
.grid4,.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.grid4 .card,.metric-card{margin-bottom:0;text-align:left}
.card strong,.metric-card strong{display:block;font-family:var(--font-display);font-size:38px;font-weight:600;color:var(--ink);line-height:1}
.card span,.metric-card span{color:var(--ink-soft);font-weight:600;font-size:13px}
.metric-glass .card{position:relative;overflow:hidden}
.metric-glass .card::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--brand-tint);opacity:.6}

/* phase / step cards */
.workflow-grid,.ge-steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}
.ge-steps-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.phase-card,.glass-card,.ge-step-card{margin-bottom:0}
.glass-card>span,.phase-card>span{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:10px;
  background:var(--brand-tint);color:var(--brand-deep);font-family:var(--font-display);font-weight:600;font-size:16px;
}
.phase-card h3,.glass-card h3,.ge-step-card h3{margin:6px 0 8px}
.phase-card p,.glass-card p,.ge-step-card p{color:var(--ink-soft);line-height:1.5;margin:0 0 14px}

/* ---------- Hero ---------- */
.glass-hero,.hero-dashboard{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.3fr .7fr;gap:26px;align-items:center;
  margin-bottom:22px;padding:34px;border-radius:var(--r-xl);
  background:
    radial-gradient(700px 320px at 88% -20%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),
    linear-gradient(135deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.glass-hero::before{content:"";position:absolute;left:-2px;top:18px;bottom:18px;width:5px;border-radius:9px;background:linear-gradient(var(--brand),var(--accent))}
.compact-hero{grid-template-columns:1fr}
.eyebrow{color:var(--brand-deep);font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:11.5px;margin:0 0 10px}
.glass-hero h1{font-size:clamp(30px,3.6vw,50px);margin:0 0 12px}
.glass-hero p,.muted.light{color:var(--ink-soft)}
.glass-hero ol,.glass-hero ul{color:var(--ink-soft)}
.workflow-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);
}
.workflow-card strong{display:block;font-family:var(--font-display);font-size:18px;margin-bottom:10px}
.workflow-card ol,.workflow-card ul{margin:0;padding-left:18px}
.workflow-card li{margin:7px 0;color:var(--ink-soft)}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* workflow strip */
.workflow-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0 0 18px}
.workflow-strip div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:var(--shadow-sm)}
.workflow-strip strong{display:block;color:var(--ink);font-family:var(--font-display)}
.workflow-strip span{color:var(--ink-soft);font-size:13px;font-weight:600}

/* ---------- Buttons ---------- */
button,.btn,.btn-small,.small-btn,input[type=submit]{
  font-family:var(--font-ui);
}
.btn,button.btn,input[type=submit],.sidebar+*  .btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--brand);color:#fff;border:1px solid transparent;
  padding:11px 18px;border-radius:var(--r);font-weight:700;font-size:14px;
  text-decoration:none;cursor:pointer;transition:filter .15s ease,transform .12s ease,box-shadow .15s ease;
  box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 22%,transparent);
}
.btn:hover,input[type=submit]:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* generic standalone <button> (forms) */
button:not(.btn):not(.btn-small):not(.small-btn):not(.link-danger):not(.app-sidebar-toggle):not(.preview-x){
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--brand);color:#fff;border:0;padding:11px 18px;border-radius:var(--r);
  font-weight:700;font-size:14px;cursor:pointer;transition:filter .15s ease,transform .12s ease;
  box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 20%,transparent);
}
button:not(.btn):not(.btn-small):hover{filter:brightness(1.06)}

.btn.ghost{
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:none;
}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--brand);color:var(--brand-deep)}
.btn.accent{background:var(--accent);color:#3a2c08;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent)}

.btn-small,.small-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ink);color:var(--surface);border:1px solid transparent;
  padding:8px 13px;border-radius:var(--r-sm);font-weight:700;font-size:13px;
  text-decoration:none;cursor:pointer;transition:filter .15s ease,transform .12s ease;
}
.btn-small:hover,.small-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-small.primary{background:var(--brand);color:#fff}
.small-btn{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.small-btn:hover{border-color:var(--brand);color:var(--brand-deep)}

.danger,.btn.danger{background:var(--danger)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 6px 16px color-mix(in srgb,var(--danger) 22%,transparent)}
.link-danger{background:none;border:0;color:var(--danger);font-weight:700;cursor:pointer;text-decoration:underline;padding:0;box-shadow:none}

/* ---------- Forms ---------- */
label{display:block;font-weight:700;margin-top:12px;color:var(--ink);font-size:14px}
input,textarea,select{
  width:100%;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  margin-top:5px;font-family:var(--font-ui);font-size:14px;color:var(--ink);
  background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--brand);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
textarea{min-height:96px;line-height:1.55;resize:vertical}

.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;margin-top:0}
.grid-form.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.span2{grid-column:span 2}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.check,.checkline{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-weight:700}
.checkline input,.check input{width:auto;margin:0}
.field-row{display:grid;gap:5px;margin-bottom:10px}
.field-row label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0}
.field-row input,.field-row textarea,.field-row select{width:100%}
.hint,.muted{color:var(--ink-soft)}
.muted{margin:0 0 18px}
.hint{font-size:12.5px}
.row{display:grid;grid-template-columns:160px 1fr 1.5fr auto;gap:10px;align-items:end}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin:6px 0 18px}
th,td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:var(--surface-2);color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--surface-2)}
td strong{font-weight:700}

/* ---------- Badges / tags / status ---------- */
.badge{display:inline-block;background:var(--ink);color:var(--surface);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700}
.tag{display:inline-block;border-radius:999px;padding:4px 10px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-soft)}
.tag.status-active,.status-won,.status-qualified{background:var(--ok-tint);color:var(--brand-deep);border-color:transparent}
.tag.status-draft,.status-contacted{background:var(--warn-tint);color:var(--accent-deep);border-color:transparent}
.status-new{background:var(--info-tint);color:var(--info);border-color:transparent}
.status-lost{background:var(--danger-tint);color:var(--danger);border-color:transparent}

/* ---------- States / callouts ---------- */
.error{background:var(--danger-tint);color:#7e2e1a;padding:12px 14px;border-radius:var(--r);margin:12px 0;border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);font-weight:600}
.success{background:var(--ok-tint);color:var(--brand-deep);padding:12px 14px;border-radius:var(--r);margin:12px 0;border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);font-weight:700}
.empty-state{border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:28px;text-align:center;background:var(--surface-2);color:var(--ink-soft);font-weight:600}
.empty-state h3{margin:0 0 8px;font-size:22px;color:var(--ink)}
.manual-callout{padding:16px 18px;border-radius:var(--r);background:var(--info-tint);border:1px solid color-mix(in srgb,var(--info) 26%,transparent);color:#234a72;margin:18px 0;font-weight:600;line-height:1.5}
.warn-callout{padding:16px 18px;border-radius:var(--r);background:var(--warn-tint);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);color:#7c5a10;margin:18px 0;font-weight:600;line-height:1.5}

/* ---------- Help dots & modal (from layout_top) ---------- */
.help-dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:999px;background:var(--brand-tint);color:var(--brand-deep);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);font-size:12px;font-weight:800;cursor:pointer;vertical-align:middle}
.help-dot:hover{background:var(--brand);color:#fff}
.help-modal-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 48%,transparent);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:999999;padding:20px}
.help-modal-backdrop.active{display:flex}
.help-modal{width:min(560px,96vw);border-radius:var(--r-xl);padding:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);color:var(--ink)}
.help-modal h3{margin:0 0 10px;font-size:22px}
.help-modal p{line-height:1.55;margin:0 0 12px;color:var(--ink-soft)}
.help-modal pre{white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow:auto;font-size:13px}

/* ---------- GrowthAI assistant ---------- */
.growth-ai-launch{position:fixed;right:22px;bottom:22px;z-index:99999;border:0;border-radius:999px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;padding:13px 20px;font-weight:800;box-shadow:0 16px 40px color-mix(in srgb,var(--brand) 34%,transparent);cursor:pointer;font-family:var(--font-ui)}
.growth-ai-launch::before{content:"✦ ";opacity:.9}
.growth-ai-launch:hover{filter:brightness(1.07)}
.growth-ai-chat{position:fixed;right:22px;bottom:80px;z-index:99999;width:min(420px,calc(100vw - 34px));max-height:72vh;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);display:none;overflow:hidden}
.growth-ai-chat.active{display:grid;grid-template-rows:auto 1fr auto}
.growth-ai-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:#fff;padding:13px 15px}
.growth-ai-head b{display:block;font-family:var(--font-display);font-weight:600}
.growth-ai-head small{display:block;color:color-mix(in srgb,#fff 70%,transparent)}
.growth-ai-head button{border:1px solid color-mix(in srgb,#fff 22%,transparent);background:color-mix(in srgb,#fff 10%,transparent);color:#fff;border-radius:9px;padding:6px 10px;font-weight:700;box-shadow:none}
.growth-ai-log{padding:13px;overflow:auto;background:var(--surface-2);display:grid;gap:9px}
.growth-ai-msg{border-radius:var(--r);padding:11px 12px;font-size:13.5px;line-height:1.45}
.growth-ai-msg.user{background:var(--brand-tint);color:var(--brand-deep);margin-left:26px}
.growth-ai-msg.ai{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.growth-ai-msg small{display:block;color:var(--ink-soft);margin-top:6px}
.growth-ai-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:11px;background:var(--surface);border-top:1px solid var(--line)}
.growth-ai-form textarea{resize:none;min-height:42px;max-height:120px;margin:0}
.growth-ai-form button{border:0;border-radius:10px;background:var(--brand);color:#fff;padding:0 15px;font-weight:800}
.growth-ai-examples{display:flex;flex-wrap:wrap;gap:6px;padding:0 11px 11px;background:var(--surface)}
.growth-ai-examples button{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:6px 10px;font-size:11px;font-weight:700;color:var(--ink-soft);box-shadow:none}
.growth-ai-examples button:hover{border-color:var(--brand);color:var(--brand-deep)}

/* ---------- Page-load motion ---------- */
@keyframes ge-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .glass-main>*,.main>*{animation:ge-rise .4s cubic-bezier(.22,.61,.36,1) both}
  .glass-main>*:nth-child(1){animation-delay:.02s}
  .glass-main>*:nth-child(2){animation-delay:.06s}
  .glass-main>*:nth-child(3){animation-delay:.10s}
  .glass-main>*:nth-child(4){animation-delay:.14s}
  .glass-main>*:nth-child(5){animation-delay:.18s}
  .sidebar .nav-group,.sidebar .nav-home{animation:ge-rise .4s ease both}
  .sidebar .nav-home{animation-delay:.03s}
  .sidebar .nav-group:nth-of-type(1){animation-delay:.06s}
  .sidebar .nav-group:nth-of-type(2){animation-delay:.10s}
  .sidebar .nav-group:nth-of-type(3){animation-delay:.14s}
  .sidebar .nav-group:nth-of-type(4){animation-delay:.18s}
  .sidebar .nav-group:nth-of-type(5){animation-delay:.22s}
}

/* ===================================================================
   COMPONENT LAYERS — geometry preserved from prior versions, colors
   mapped to the Atelier tokens so specialized pages stay intact.
   These will each be refined further in their dedicated phase.
   =================================================================== */

/* media library */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.media-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:var(--shadow-sm)}
.media-card img,.picker img{width:100%;height:110px;object-fit:cover;background:var(--surface-2);border-radius:var(--r-sm)}
.media-card small,.picker small{display:block;word-break:break-all;color:var(--ink-soft)}
.picker{max-height:360px;overflow:auto}
.picker div{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;margin-bottom:8px;cursor:pointer}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:12px}
.icon-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;text-align:center}
.icon-card img{height:40px;margin:0 auto 8px}
.favicon-box{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:12px 0}
.favicon-box img{width:32px;height:32px;object-fit:contain}
.published-link{display:inline-block;margin-left:8px;color:var(--brand-deep);font-weight:700}

/* visual page builder */
.builder-shell{display:grid;grid-template-columns:260px minmax(520px,1fr) 340px;gap:18px;align-items:start}
.builder-panel,.block-library,.settings-panel,.canvas{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-sm)}
.builder-panel{position:sticky;top:16px}
.builder-panel h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.block-button,.block-library button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;margin:7px 0;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);cursor:pointer;font-weight:700;text-align:left;color:var(--ink);box-shadow:none}
.block-button:hover,.block-library button:hover{background:var(--accent-tint);border-color:var(--accent)}
.canvas-toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
.canvas-actions{display:flex;gap:8px;flex-wrap:wrap}
.canvas-actions button,.canvas-actions .save{box-shadow:none}
.canvas-actions .save{background:var(--brand);border-color:var(--brand);color:#fff}
.builder-canvas{background:var(--paper-2);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:18px;min-height:720px}
.canvas-section{background:var(--surface);border:2px solid transparent;border-radius:var(--r);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.canvas-section.active{border-color:var(--brand)}
.section-header{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;padding:9px 12px}
.section-header strong{font-size:13px}
.section-controls{display:flex;gap:6px}
.section-controls button{border:0;border-radius:7px;background:color-mix(in srgb,#fff 14%,transparent);color:#fff;padding:5px 8px;cursor:pointer;box-shadow:none}
.section-controls button:hover{background:var(--accent);color:#3a2c08}
.section-preview{padding:18px}
.preview-hero{min-height:240px;color:#fff;background-size:cover;background-position:center;display:flex;align-items:center;padding:30px;border-radius:var(--r-sm)}
.preview-hero .overlay{max-width:600px;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 92%,transparent),color-mix(in srgb,var(--ink) 45%,transparent));padding:24px;border-left:6px solid var(--accent)}
.preview-hero h1{font-size:30px;margin:0 0 10px;color:#fff}
.preview-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.preview-nav img{max-height:46px;max-width:190px}
.preview-nav img.preview-nav-logo{object-fit:contain!important;display:block!important}
.preview-nav .links{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;font-weight:700}
.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.preview-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.preview-card img{width:100%;height:96px;object-fit:cover}
.preview-card div{padding:10px}
.preview-features,.preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.preview-pill{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:12px;text-align:center}
.preview-form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.preview-input{height:38px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);font-size:12px;color:var(--ink-soft);display:flex;align-items:center;padding-left:10px}
.preview-footer{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:18px}
.settings-empty{padding:18px;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r);color:var(--ink-soft)}
.item-editor{border:1px solid var(--line);border-radius:var(--r);padding:10px;margin:10px 0;background:var(--surface-2)}
.item-editor button{margin-right:6px}
.media-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:220px;overflow:auto;border:1px solid var(--line);padding:8px;border-radius:var(--r);background:var(--surface-2)}
.media-choice{border:2px solid transparent;border-radius:var(--r-sm);background:var(--surface);padding:4px;cursor:pointer}
.media-choice.selected{border-color:var(--brand)}
.media-choice img{width:100%;height:58px;object-fit:cover;border-radius:6px}
.media-choice small{font-size:10px}
.builder-block{border:2px dashed var(--line-strong);border-radius:var(--r);margin-bottom:12px;padding:12px;background:var(--surface-2)}
.builder-head{display:flex;justify-content:space-between;align-items:center}
.builder-head button{padding:6px 10px;margin-left:6px}
.builder-block pre{white-space:pre-wrap;background:var(--ink);color:#f3ede0;padding:10px;border-radius:var(--r-sm)}
.builder-preview{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);margin:10px 0}
.builder-preview img{max-height:160px;width:100%;object-fit:cover;background:var(--surface-2)}

/* trust preview */
.trust-preview .preview-pill{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.trust-icon{height:42px;width:42px;object-fit:contain;margin:0 auto 6px}
.trust-img{height:52px;max-width:110px;object-fit:contain;margin:0 auto 6px}

/* style / design-system controls */
.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.palette-grid button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:8px;font-weight:700;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;min-height:38px;color:var(--ink);box-shadow:none}
.style-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.style-grid-3 label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.design-system-form select,.design-system-form input,.design-system-form textarea{max-width:100%}
.style-preview{transition:.2s ease;background:var(--light,var(--surface-2))!important;color:var(--text,var(--ink));border-radius:var(--r);padding:10px}
.style-preview .canvas-section{background:var(--section-bg,var(--surface));border-color:var(--primary,var(--brand))}
.style-preview .canvas-section.active{border-color:var(--primary,var(--brand));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,var(--brand)) 25%,transparent)}
.style-preview .small-btn,.style-preview .preview-pill,.style-preview .preview-card .learn-link{background:var(--primary,var(--brand))!important;color:#fff!important;border-color:var(--primary,var(--brand))!important}
.style-preview .preview-card,.style-preview .preview-pill{background:var(--card-bg,var(--surface));color:var(--text,var(--ink));border-color:color-mix(in srgb,var(--primary,var(--brand)) 35%,var(--line))}
.style-preview .preview-hero .overlay{border-left:5px solid var(--primary,var(--brand))}
.style-preview.dark-mode{background:#0e0c0a!important;color:#f6f2ea}
.style-preview.card-shadow .canvas-section{box-shadow:var(--shadow)}
.style-preview.card-glass .canvas-section{background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(10px)}

/* funnels (legacy board + sales art) */
.funnel-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.funnel-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;min-height:360px}
.funnel-card{background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r);padding:12px;margin-bottom:12px}
.funnel-card strong,.funnel-card small,.funnel-card a{display:block;margin-bottom:5px}
.phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sales-funnel-layout{display:grid;grid-template-columns:190px minmax(360px,1fr) 230px;gap:22px;align-items:center;background:linear-gradient(135deg,var(--brand-deep),var(--ink));padding:28px;border-radius:var(--r-xl);color:#fff;overflow:auto}
.funnel-stage-labels{display:grid;gap:18px}
.funnel-stage-labels span{display:block;background:linear-gradient(90deg,var(--danger),var(--accent-deep));padding:13px 16px;font-weight:800;text-transform:uppercase;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%)}
.funnel-stage-labels.right span{background:linear-gradient(90deg,var(--accent-deep),var(--info));clip-path:polygon(8% 0,100% 0,100% 100%,8% 100%,0 50%)}
.sales-funnel-art{display:grid;justify-items:center;gap:0}
.funnel-slice{height:62px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:20px;font-weight:800;text-transform:uppercase;filter:drop-shadow(0 16px 20px rgba(0,0,0,.24));clip-path:polygon(8% 0,92% 0,80% 100%,20% 100%)}
.funnel-slice strong{font-size:30px;color:#fff}
.slice-1{width:92%;background:var(--danger)}
.slice-2{width:76%;background:var(--accent-deep)}
.slice-3{width:58%;background:var(--accent);color:var(--ink)}
.slice-4{width:40%;background:#6fa01f;color:var(--ink)}
.slice-5{width:24%;background:var(--info)}
.smart-spreadsheet th{position:sticky;top:0}
.smart-spreadsheet td,.smart-spreadsheet th{white-space:nowrap}

/* blog editor */
.blog-editor-shell{display:grid;grid-template-columns:240px 1fr;gap:18px;margin:20px 0}
.blog-editor-tools{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:16px;position:sticky;top:16px;align-self:start}
.blog-editor-tools h2{margin:0 0 12px;color:#fff}
.blog-editor-tools button{display:block;width:100%;background:color-mix(in srgb,#fff 9%,transparent);color:#fff;border:1px solid color-mix(in srgb,#fff 16%,transparent);border-radius:var(--r-sm);padding:10px 12px;margin:8px 0;text-align:left;font-weight:700;cursor:pointer;box-shadow:none}
.blog-editor-tools button:hover{background:var(--brand)}
.blog-editor-tools .hint{font-size:12px;color:color-mix(in srgb,#fff 72%,transparent);line-height:1.45}
.blog-editor-main{display:flex;flex-direction:column;gap:16px}
.blog-editor-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.blog-block-list{display:flex;flex-direction:column;gap:14px}
.blog-edit-block{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface-2)}
.blog-edit-block label{display:flex;flex-direction:column;gap:6px;font-weight:700;margin:8px 0}
.block-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.block-head button{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:6px 9px;margin-left:5px;cursor:pointer;box-shadow:none}

/* visual campaign builder */
.campaign-builder-shell{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.campaign-preview-stage{min-height:520px;background:radial-gradient(circle at 25% 15%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 32%),linear-gradient(135deg,var(--surface),var(--paper-2));border-radius:var(--r-lg);padding:30px;display:flex;align-items:center;justify-content:center;overflow:auto}
.preview-page{width:100%;min-height:430px;display:flex;align-items:center;justify-content:center}
.preview-modal{width:min(780px,96%);background:var(--surface);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr 1fr;position:relative}
.preview-modal.center{display:block;max-width:560px}
.preview-modal.slide_in{max-width:480px;margin-left:auto}
.preview-left,.preview-right{padding:30px}
.preview-left{background:var(--surface)}
.preview-right{background:var(--surface-2)}
.preview-x{position:absolute;right:12px;top:10px;border:0;background:var(--ink-faint);color:#fff;border-radius:50%;width:24px;height:24px;box-shadow:none}
.preview-modal .preview-form{display:grid;gap:10px;margin-top:18px}
.preview-modal .preview-form input{padding:12px;border:1px solid var(--ink);border-radius:6px}
.preview-form button,.preview-sticky button{border:0;color:#fff;font-weight:800;padding:14px;border-radius:6px}
.preview-right ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:20px}
.preview-right li{display:flex;gap:10px;align-items:flex-start}
.preview-sticky{width:100%;display:flex;align-items:center;justify-content:center;gap:20px;padding:18px;color:#fff;border-radius:var(--r-sm)}
.toolbar-row{margin-top:16px;display:flex;gap:10px}
.visual-campaign-form textarea{width:100%;min-height:90px}
.preview-modal.premium{border-radius:var(--r-xl)!important;overflow:hidden!important;box-shadow:var(--shadow-lg)!important;animation:previewPremiumEnter .28s ease both}
.preview-modal.premium .preview-left,.preview-modal.premium .preview-right{padding:38px!important}
.preview-modal.premium h2{font-size:28px;line-height:1.05;margin:0 0 16px}
.preview-modal.premium p{line-height:1.5;color:var(--ink-soft)}
.preview-modal.premium .preview-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.preview-modal.premium .preview-form button{grid-column:1/-1;border-radius:12px!important}
.preview-sticky.premium{border-radius:999px!important;box-shadow:var(--shadow)!important}
.preview-sticky.premium button{border-radius:999px!important}
@keyframes previewPremiumEnter{from{opacity:.4;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* CRM board + pipeline */
.crm-board{display:grid;grid-template-columns:repeat(6,minmax(260px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px;align-items:start}
.crm-column{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;min-height:360px}
.crm-column h2{font-size:15px;display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}
.crm-column.drop-ready{outline:3px solid color-mix(in srgb,var(--brand) 30%,transparent);background:var(--brand-tint)}
.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:12px;box-shadow:var(--shadow-sm);cursor:grab}
.lead-card.dragging{opacity:.55;transform:rotate(1deg)}
.lead-card strong{display:block;font-size:16px}
.lead-card small{display:block;color:var(--ink-soft);margin:3px 0}
.lead-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.lead-actions form{margin:0}
.lead-actions button{width:100%;font-size:12px;padding:7px;margin:0;box-shadow:none}
.note-box{background:var(--surface-2);border-radius:var(--r-sm);padding:8px;margin-top:8px;font-size:12px}
.deal-card-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.deal-temp{font-size:11px;font-weight:800;border-radius:999px;padding:4px 8px;background:var(--brand-tint);color:var(--brand-deep);text-transform:uppercase}
.temp-hot{background:var(--danger-tint);color:var(--danger)}
.temp-cold{background:var(--info-tint);color:var(--info)}
.temp-warm{background:var(--warn-tint);color:var(--accent-deep)}
.deal-mini{display:grid;grid-template-columns:1fr;gap:5px;margin:10px 0}
.deal-mini span{font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px;color:var(--ink);font-weight:700}
.next-activity{border-radius:var(--r-sm);padding:9px;margin:10px 0;background:var(--surface-2);border:1px solid var(--line)}
.next-activity strong,.next-activity span{display:block}
.next-activity.has-activity{background:var(--ok-tint);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.next-activity.missing-activity{background:var(--warn-tint);border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.lead-expand{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;margin:8px 0;background:var(--surface)}
.lead-expand summary{cursor:pointer;font-weight:800;color:var(--brand-deep)}
.deal-form,.lead-expand form.compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.deal-form label{font-size:12px}
.deal-form button,.lead-expand form.compact button{grid-column:1/-1}
.sequence-queue{display:grid;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin:10px 0}
.sequence-queue span{font-size:12px;color:var(--ink-soft)}
.mini-table{font-size:13px}

/* CRM pulse / focus / inbox */
.crm-pulse-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.crm-pulse-grid article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-sm)}
.crm-pulse-grid span{display:block;color:var(--ink-soft);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.crm-pulse-grid strong{display:block;font-family:var(--font-display);font-size:30px;color:var(--ink);margin:6px 0}
.crm-pulse-grid small{color:var(--ink-soft);font-weight:700}
.crm-focus-panel{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}
.crm-focus-list{display:grid;gap:8px}
.crm-focus-list a{display:flex;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-weight:700}
.crm-focus-list a:hover{border-color:var(--brand)}
.crm-actions-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 20px}
.crm-section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:16px}
.crm-inbox-list{display:grid;gap:14px}
.crm-inbox-card{display:grid;grid-template-columns:minmax(240px,1fr) minmax(320px,.9fr);gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm)}
.crm-inbox-card strong{font-size:18px;color:var(--ink)}
.crm-inbox-card span,.crm-inbox-card small{color:var(--ink-soft)}
.crm-convert-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.crm-convert-form button{grid-column:1/-1}

/* email automation / campaigns */
.email-edit-list,.email-campaign-stack{display:grid;gap:14px}
.email-edit-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.email-edit-card summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center}
.email-sequence-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.email-sequence-actions form{margin:0}
.email-edit-card .muted code,.panel .muted code{display:inline-block;margin:4px 4px 0 0}
.email-campaign-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:14px}
.email-route-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm)}
.email-route-head{display:grid;gap:4px;margin-bottom:8px}
.email-route-head span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--brand-deep)}
.email-route-head strong{font-size:18px;color:var(--ink);font-family:var(--font-display)}
.route-meta,.route-lines{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.route-meta span{background:var(--brand-tint);color:var(--brand-deep);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}
.route-lines{display:grid;grid-template-columns:1fr 1fr}
.route-lines span{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;font-size:12px}
.crm-route-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.crm-route-actions button{width:100%;font-size:12px;padding:8px}
.crm-route-actions .won{background:var(--brand)}
.crm-route-actions .lost{background:var(--danger)}
.campaign-card>summary{list-style:none;cursor:pointer}
.campaign-card>summary::-webkit-details-marker,.campaign-sequence-drawer>summary::-webkit-details-marker{display:none}
.campaign-card-summary{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;align-items:center;gap:16px;padding:16px 18px;background:linear-gradient(90deg,var(--surface),var(--surface-2))}
.campaign-card-summary .email-route-head{margin:0}
.campaign-card-summary .email-route-head small{display:block;color:var(--ink-soft);font-size:12px;line-height:1.35;margin-top:4px;font-weight:600}
.campaign-card-summary .route-meta{justify-content:flex-end;margin:0}
.campaign-card-summary:after{content:"Open";justify-self:end;min-width:76px;display:inline-flex;justify-content:center;align-items:center;background:var(--brand);color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800}
.campaign-card[open]>.campaign-card-summary:after{content:"Close";background:var(--ink)}
.campaign-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.campaign-card[open]{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:var(--shadow)}
.campaign-card[open]>.campaign-card-summary{border-bottom:1px solid var(--line)}
.campaign-card>.route-lines,.campaign-card>form,.campaign-card>.campaign-sequence-drawer,.campaign-card>.campaign-open-panel{margin-left:18px;margin-right:18px}
.campaign-open-panel{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.campaign-open-panel h3{margin:0 0 6px;color:var(--ink)}
.campaign-open-panel form{margin:0;flex:0 0 auto}
.campaign-card .route-lines{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px;margin-bottom:14px}
.campaign-card .route-lines span{display:grid;gap:4px;background:var(--surface);border-color:var(--line)}
.campaign-card .route-lines em{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:800}
.campaign-card .route-lines b{color:var(--ink)}
.campaign-sequence-drawer{margin-top:14px;margin-bottom:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:12px}
.campaign-sequence-drawer>summary{cursor:pointer;font-weight:800;color:var(--brand-deep)}
.campaign-email-list{display:grid;gap:10px;margin-top:12px}
.campaign-email-list .email-edit-card{box-shadow:none;background:var(--surface)}
.email-bulk-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 18px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.email-select{display:inline-flex;align-items:center;gap:6px;margin-right:10px;color:var(--ink-soft);font-size:12px;font-weight:800}
.email-command-center{display:grid;grid-template-columns:minmax(260px,.45fr) 1fr;gap:22px;align-items:start}
.campaign-index-head,.campaign-page-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.campaign-table{display:grid;gap:12px}
.campaign-row{display:grid;grid-template-columns:minmax(280px,1fr) auto auto;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm)}
.campaign-row h3{margin:4px 0 6px;color:var(--ink)}
.campaign-row p{margin:0;color:var(--ink-soft);line-height:1.4}
.campaign-stage{display:inline-block;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-deep);font-size:11px;font-weight:800}
.campaign-row-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.campaign-row-meta span{background:var(--brand-tint);color:var(--brand-deep);border-radius:999px;padding:6px 9px;font-size:12px;font-weight:700}
.campaign-row-actions{display:flex;gap:8px;align-items:center}
.campaign-row-actions form{margin:0}
.campaign-detail-hero{display:flex;justify-content:space-between;gap:18px;align-items:center}
.campaign-detail-hero h2{margin:6px 0}
.campaign-detail-hero p{margin:0;color:var(--ink-soft)}
.campaign-detail-routes{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}
.campaign-detail-routes span{display:grid;gap:4px}
.campaign-detail-routes em{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:800}

/* smart funnel engine */
.smart-engine-wrap{background:var(--ink);border-radius:var(--r-lg);padding:22px;overflow:auto;color:#fff;margin:18px 0;box-shadow:var(--shadow)}
.smart-engine-canvas{min-width:1180px;position:relative;height:310px;background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 35%),linear-gradient(135deg,#16130f,#221d16);border:1px solid color-mix(in srgb,#fff 12%,transparent);border-radius:var(--r)}
.smart-node{position:absolute;width:180px;min-height:86px;background:var(--surface);color:var(--ink);border-radius:var(--r);padding:14px;border-top:5px solid var(--brand);box-shadow:var(--shadow)}
.smart-node strong{display:block;font-size:14px;margin-bottom:6px}
.smart-node small{color:var(--ink-soft);line-height:1.3}
.smart-node.source{border-color:var(--accent)}
.smart-node.condition{border-color:var(--info)}
.smart-node.router{border-color:var(--danger)}
.smart-node.tracking{border-color:#39d56f}
.smart-node.conversion{border-color:#8b5cf6}
.smart-wire{position:absolute;height:3px;background:linear-gradient(90deg,var(--accent),var(--brand));transform-origin:left center;border-radius:99px}
.smart-wire:after{content:'';position:absolute;right:-1px;top:-5px;border-left:10px solid var(--brand);border-top:6px solid transparent;border-bottom:6px solid transparent}
.rule-grid{display:grid;grid-template-columns:160px 1fr 1fr auto;gap:10px;align-items:end;margin:10px 0}
.rule-grid input,.rule-grid select{width:100%}
.engine-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:18px 0}
.engine-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.engine-kpi strong{display:block;font-family:var(--font-display);font-size:28px;color:var(--ink)}
.engine-kpi span{color:var(--ink-soft);font-weight:700}

/* domains */
.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.example-grid article,.example-grid div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-sm)}
.example-grid strong{display:block;color:var(--ink);margin-bottom:6px}
.example-grid span,.example-grid p{display:block;color:var(--ink-soft);line-height:1.45;margin:0}
.domain-inline-form{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:8px;align-items:end;min-width:520px}
.domain-inline-form label{margin:0;font-size:12px;color:var(--ink-soft)}
.domain-inline-form input,.domain-inline-form select{margin-top:4px;padding:8px;border-radius:8px}
.domain-inline-form .check{align-self:center;margin-top:18px}
.domain-inline-form button{margin:0}

/* ---------- Login (basic, pre-redesign auth) ---------- */
.login-body{min-height:100vh;display:grid;place-items:center;background:var(--ink)}
.login-card{width:380px;background:var(--surface);border-radius:var(--r-lg);padding:30px}

/* ---------- Premium authentication ---------- */
.auth-body{min-height:100vh;margin:0;background:radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 34%),radial-gradient(circle at 92% 18%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 30%),linear-gradient(135deg,var(--surface),var(--paper-2));font-family:var(--font-ui);color:var(--ink)}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,.9fr) minmax(480px,1.1fr)}
.auth-form-panel{padding:56px clamp(28px,5vw,74px);display:flex;flex-direction:column;justify-content:center;background:var(--surface);border-right:1px solid var(--line)}
.signup-form-panel{justify-content:flex-start}
.auth-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800;margin-bottom:42px}
.auth-brand span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--brand),var(--brand-deep));box-shadow:0 12px 30px color-mix(in srgb,var(--brand) 28%,transparent)}
.auth-brand strong{font-size:18px;font-family:var(--font-display)}
.auth-copy h1{font-size:clamp(38px,5vw,64px);line-height:.96;margin:0 0 14px;letter-spacing:-.02em}
.auth-copy p{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:640px}
.auth-form{display:grid;gap:14px;margin-top:22px}
.auth-form-grid{grid-template-columns:1fr 1fr}
.auth-form .full{grid-column:1/-1}
.auth-form label{font-weight:800;color:var(--ink);margin:0}
.auth-form input{margin-top:7px;border:1px solid var(--line-strong);border-radius:var(--r);padding:14px 15px;background:var(--surface);font-size:15px}
.auth-form button{grid-column:1/-1;border-radius:var(--r);padding:15px 18px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;font-size:16px;box-shadow:0 16px 38px color-mix(in srgb,var(--brand) 26%,transparent)}
.auth-link{color:var(--ink-soft);font-weight:700}
.auth-link a{color:var(--brand-deep);text-decoration:none}
.auth-link a:hover{text-decoration:underline}
.auth-visual-panel{position:relative;overflow:hidden;padding:54px;display:flex;flex-direction:column;justify-content:center;gap:22px;background:var(--ink);color:#fff}
.auth-visual-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--brand) 55%,transparent),transparent 34%),radial-gradient(circle at 82% 26%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 30%),linear-gradient(135deg,#16130f,var(--brand-deep) 60%,#1a1612);opacity:.96}
.auth-visual-panel>*{position:relative}
.auth-product-card{background:color-mix(in srgb,#fff 12%,transparent);border:1px solid color-mix(in srgb,#fff 18%,transparent);border-radius:30px;padding:18px;box-shadow:var(--shadow-lg);backdrop-filter:blur(16px)}
.auth-product-card img{display:block;width:100%;border-radius:22px}
.hero-card{transform:rotate(-1.2deg)}
.auth-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.auth-proof-grid article,.auth-build-list div{background:color-mix(in srgb,#fff 12%,transparent);border:1px solid color-mix(in srgb,#fff 16%,transparent);border-radius:var(--r-lg);padding:16px;backdrop-filter:blur(14px)}
.auth-proof-grid b{display:block;font-size:18px}
.auth-proof-grid span,.auth-build-list span{display:block;color:#ece3d3;margin-top:5px;line-height:1.35}
.auth-build-list{display:grid;gap:12px}
.auth-build-list strong{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff;color:var(--brand-deep);margin-right:12px}
.auth-quote{background:color-mix(in srgb,#fff 10%,transparent);border:1px solid color-mix(in srgb,#fff 16%,transparent);border-radius:var(--r-xl);padding:22px}
.auth-quote p{font-size:20px;line-height:1.45;margin:0;color:#fdfaf3;font-weight:700}

/* ---------- Responsive ---------- */
@media(max-width:1300px){.crm-board{grid-template-columns:repeat(3,minmax(260px,1fr))}}
@media(max-width:1200px){
  .builder-shell,.funnel-board,.phase-grid,.campaign-builder-shell{grid-template-columns:1fr}
  .builder-panel{position:relative;top:auto}
  .preview-cards,.preview-features,.preview-stats{grid-template-columns:1fr 1fr}
  .workflow-grid,.workflow-strip,.grid4,.metric-grid{grid-template-columns:1fr 1fr}
  .glass-hero{grid-template-columns:1fr}
  .crm-pulse-grid{grid-template-columns:repeat(2,1fr)}
  .crm-focus-panel,.crm-inbox-card{grid-template-columns:1fr}
  .email-command-center,.campaign-row,.campaign-detail-hero{grid-template-columns:1fr;display:grid}
}
@media(max-width:1100px){
  /* Mobile: sidebar is an off-canvas drawer — hidden by default, slides in when NOT collapsed. */
  .sidebar{transform:translateX(calc(-1 * var(--sidebar-w) - 12px));box-shadow:var(--shadow-lg);width:min(84vw,300px)}
  body:not(.app-sidebar-collapsed) .sidebar{transform:translateX(0)}
  body:not(.app-sidebar-collapsed)::after{content:"";position:fixed;inset:0;background:rgba(8,10,20,.45);z-index:49}
  .main,.glass-main{margin-left:0!important;padding:64px 16px 40px}
  .app-sidebar-toggle{position:fixed!important;left:12px;top:12px}
  .sales-funnel-layout{grid-template-columns:1fr}
  .funnel-stage-labels{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .grid-form,.two-col,.style-grid-3,.palette-grid,.grid-form.compact,.domain-inline-form{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .domain-inline-form{min-width:0}
  .blog-editor-shell{grid-template-columns:1fr}
  .blog-editor-tools{position:relative;top:auto}
  .campaign-card-summary{grid-template-columns:1fr}
  .campaign-card-summary .route-meta{justify-content:flex-start}
  .campaign-card .route-lines{grid-template-columns:1fr}
  .auth-shell{grid-template-columns:1fr}
  .auth-visual-panel{min-height:480px}
  .auth-form-grid{grid-template-columns:1fr}
  .auth-proof-grid{grid-template-columns:1fr}
  .auth-form-panel{border-right:0}
}
@media(max-width:720px){
  .workflow-grid,.workflow-strip,.grid4,.metric-grid,.two-col,.crm-pulse-grid{grid-template-columns:1fr}
  .crm-board{grid-template-columns:1fr}
  .glass-hero h1{font-size:32px}
  .quick-actions .btn{width:100%}
  .crm-convert-form,.deal-form,.lead-expand form.compact{grid-template-columns:1fr}
}