/* Daily Lead System — brand skin. Distinct from Simple Commissions.
   Palette (matches the logo art): near-black canvas, electric blue -> purple
   -> magenta gradient, cyan accent. */
:root{
  --dls-bg:#060609; --dls-panel:#101018; --dls-panel-2:#171826;
  --dls-ink:#f3f5fc; --dls-muted:#9aa3c4; --dls-border:rgba(255,255,255,.09);
  --dls-blue:#2f8bff; --dls-cyan:#29c6ff; --dls-purple:#9b3cff; --dls-magenta:#e12fbf;
  --dls-grad:linear-gradient(120deg,#29c6ff,#2f7bff,#9b3cff,#e12fbf);
  /* compatibility aliases for pages/styles that still reference the old names */
  --dls-green:#2f8bff; --dls-green-2:#2f7bff; --dls-gold:#29c6ff;
  --dls-radius:16px; --dls-shadow:0 12px 40px rgba(0,0,0,.45);
}
/* ── NO ORPHANS (Jeff's standing preference). A heading that drops one word onto
      its own line, or a paragraph that widows its last word, reads as a mistake.
      balance spreads a heading evenly; pretty stops body copy widowing. Purely
      presentational ... anything without support wraps exactly as it did. ── */
h1,h2,h3,h4,.dls-h1,.dls-h2,.dls-eyebrow{text-wrap:balance}
p,li,.dls-sub,.dls-lead{text-wrap:pretty}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.dls{color:var(--dls-ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
  /* gradient canvas: near-black with faint brand glows */
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(47,139,255,.14), transparent 60%),
    radial-gradient(1000px 640px at 108% 6%, rgba(155,60,255,.14), transparent 60%),
    radial-gradient(900px 700px at 60% 116%, rgba(225,47,191,.10), transparent 60%),
    var(--dls-bg);
  background-attachment:fixed}
a{color:inherit}

/* App shell: fixed left sidebar + scrolling content */
.dls-app{min-height:100vh}
.dls-sidebar{position:fixed;top:0;left:0;bottom:0;width:236px;z-index:40;display:flex;flex-direction:column;
  padding:20px 14px;background:linear-gradient(180deg,rgba(16,16,24,.96),rgba(10,11,20,.96));
  border-right:1px solid var(--dls-border)}   /* no live blur: it is redrawn on every scroll (Jeff, 2026-10-05) */
.dls-side-logo{display:block;padding:4px 4px 14px}
.dls-side-logo img{width:100%;max-width:200px;height:auto;display:block}
.dls-side-nav{display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1;scrollbar-width:none}
.dls-side-nav::-webkit-scrollbar{display:none}
.dls-side-link{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--dls-muted);font-weight:600;
  font-size:14.5px;padding:10px 12px;border-radius:11px;position:relative;transition:background .15s,color .15s,transform .12s}
.dls-side-link:hover{color:var(--dls-ink);background:rgba(255,255,255,.05);transform:translateX(2px)}
.dls-side-ic{width:22px;text-align:center;font-size:16px}
.dls-side-link.is-active{color:#fff;background:var(--dls-grad);box-shadow:0 6px 18px rgba(47,123,255,.28)}
/* 🚀 SETUP — the one deliberately oversized nav item. Everything that is genuinely hard to
   find again (API keys, the Marketing Mind, the likeness upload, the training video) lives
   behind it, and it must not read as one more row in a list of thirty. Amber while it is
   unfinished, calm once it is done, but always the same size and always at the top. */
.dls-side-link--setup{font-size:15.5px;font-weight:800;color:var(--dls-ink);padding:13px 12px;margin-bottom:4px;
  border:1px solid var(--dls-border);background:rgba(255,255,255,.04)}
.dls-side-link--setup .dls-side-ic{font-size:19px}
.dls-side-link--setup.is-todo{color:#f5c451;border-color:rgba(245,196,81,.55);background:rgba(245,196,81,.10)}
.dls-side-link--setup.is-todo:hover{background:rgba(245,196,81,.16);color:#f5c451}
.dls-side-group{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dls-muted);opacity:.65;padding:6px 12px 3px;margin-top:12px;border-top:1px solid var(--dls-border)}
.dls-side-group:first-child,.dls-side-group.is-first{border-top:none;margin-top:4px}
.dls-side-group--admin{color:var(--dls-gold,#f5c451);opacity:.85}
.dls-side-foot{border-top:1px solid var(--dls-border);padding-top:12px;margin-top:8px}
.dls-side-user{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--dls-ink);margin-bottom:8px}
.dls-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--dls-panel-2);flex:none}
.dls-avatar--ph{display:grid;place-items:center;font-weight:800;color:var(--dls-muted)}
.dls-side-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dls-side-logout{display:inline-block;color:var(--dls-muted);text-decoration:none;font-size:13px;font-weight:600}
.dls-side-logout:hover{color:var(--dls-cyan)}
.dls-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35}
.dls-scrim.is-on{display:block}

/* Content shell */
.dls-shell{margin-left:236px;min-height:100vh}
.dls-wrap{max-width:1000px;margin:0 auto;padding:30px 24px 90px;animation:dlsFade .3s ease}
@keyframes dlsFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Mobile top bar (hidden on desktop) */
.dls-mtop{display:none;position:sticky;top:0;z-index:30;align-items:center;gap:12px;padding:10px 14px;
  background:rgba(6,6,9,.97);border-bottom:1px solid var(--dls-border)}
/* The logo image carries a lot of internal whitespace, so 30px left the actual wordmark
   tiny and unreadable on a phone — the one bit of branding on the whole mobile screen.
   44px makes it legible without making the bar tall enough to eat the content. */
.dls-mtop-logo{height:44px;width:auto;max-width:56vw;display:block;object-fit:contain}
.dls-burger{background:var(--dls-panel-2);border:1px solid var(--dls-border);color:var(--dls-ink);
  font-size:18px;line-height:1;padding:7px 11px;border-radius:10px;cursor:pointer}

@media(max-width:860px){
  .dls-shell{margin-left:0}
  .dls-mtop{display:flex}
  .dls-sidebar{transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .dls-sidebar.is-open{transform:none}
  .dls-wrap{padding:20px 16px 80px}
}

/* Cards + layout */
.dls-card{background:var(--dls-panel);border:1px solid var(--dls-border);
  border-radius:var(--dls-radius);padding:20px;margin:0 0 16px}
.dls-grid{display:grid;gap:16px}
@media(min-width:720px){.dls-grid--3{grid-template-columns:repeat(3,1fr)}
  .dls-grid--2{grid-template-columns:repeat(2,1fr)}}
.dls-h1{font-size:26px;font-weight:800;margin:6px 0 4px}
.dls-sub{color:var(--dls-muted);margin:0 0 20px}
.dls-eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:var(--dls-cyan);font-weight:700}

/* Faucet cards */
.dls-faucet{display:block;text-decoration:none;background:var(--dls-panel);
  border:1px solid var(--dls-border);border-radius:var(--dls-radius);padding:22px;
  transition:transform .12s ease,border-color .12s ease}
.dls-faucet:hover{transform:translateY(-2px);border-color:var(--dls-blue)}
.dls-faucet__ico{font-size:30px}
.dls-faucet h3{margin:12px 0 6px;font-size:19px}
.dls-faucet p{margin:0;color:var(--dls-muted);font-size:14px}

/* Buttons */
.dls-btn{display:inline-block;border:none;cursor:pointer;font:inherit;font-weight:700;
  padding:12px 20px;border-radius:11px;text-decoration:none;background:var(--dls-panel-2);color:var(--dls-ink)}
.dls-btn--primary{background:var(--dls-grad);color:#fff}
.dls-btn--gold{background:var(--dls-cyan);color:#04121a}
.dls-btn--block{display:block;width:100%;text-align:center}

/* Forms */
.dls-field{margin:0 0 14px}
.dls-field label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.dls-field input,.dls-field textarea,.dls-field select{width:100%;padding:12px 14px;
  border-radius:10px;border:1px solid var(--dls-border);background:#0c0d16;color:var(--dls-ink);font:inherit}
.dls-field textarea{min-height:96px;resize:vertical}
/* Same look for a lone input that is not inside a .dls-field wrapper. Without this
   they fall back to the browser default and render as bare white boxes on a dark
   page, which is exactly how the admin pricing inputs shipped. */
.dls-input,input.dls-input,select.dls-input,textarea.dls-input{padding:12px 14px;
  border-radius:10px;border:1px solid var(--dls-border);background:#0c0d16;color:var(--dls-ink);font:inherit}

/* Auth screen */
.dls-auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.dls-auth__box{width:100%;max-width:400px;background:var(--dls-panel);
  border:1px solid var(--dls-border);border-radius:20px;padding:30px;box-shadow:var(--dls-shadow)}
.dls-auth__logo{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:800;font-size:20px;margin-bottom:6px}
.dls-note{color:var(--dls-muted);font-size:13px;text-align:center;margin-top:16px}
.dls-alert{background:rgba(255,90,110,.12);border:1px solid rgba(255,90,110,.35);
  color:#ffb3bd;border-radius:10px;padding:11px 14px;font-size:14px;margin:0 0 14px}

/* ---- Onboarding wizard ---- */
.obw{max-width:640px;margin:0 auto}
.obw-head{text-align:center;margin:6px 0 20px}
.obw-logo{max-width:230px;width:78%;height:auto}
.obw-steps{display:flex;justify-content:space-between;gap:6px;margin:0 0 22px;position:relative}
.obw-steps:before{content:"";position:absolute;top:15px;left:6%;right:6%;height:2px;background:var(--dls-border);z-index:0}
.obw-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;text-align:center}
.obw-step__num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;
  background:var(--dls-panel-2);color:var(--dls-muted);border:2px solid var(--dls-border)}
.obw-step__label{font-size:11px;color:var(--dls-muted);font-weight:600;line-height:1.2}
.obw-step.is-now .obw-step__num{background:var(--dls-grad);color:#fff;border-color:transparent}
.obw-step.is-now .obw-step__label{color:var(--dls-ink)}
.obw-step.is-done .obw-step__num{background:var(--dls-cyan);color:#04121a;border-color:transparent}
.obw-panel{display:none;animation:obwIn .35s ease}
.obw-panel.is-on{display:block}
@keyframes obwIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.obw-h2{font-size:22px;font-weight:800;margin:6px 0 6px}
.obw-h3{font-size:16px;font-weight:800;margin:0 0 4px}
.obw-video{margin:14px 0;border-radius:12px;overflow:hidden;border:1px solid var(--dls-border);background:#000}
.obw-video video{display:block;width:100%;height:auto;max-height:360px}
.obw-check{display:flex;gap:10px;align-items:flex-start;padding:12px;margin:0 0 10px;border-radius:11px;
  border:1px solid var(--dls-border);background:#0c0d16;cursor:pointer;font-size:14px;line-height:1.45}
.obw-check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--dls-cyan)}
.obw-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.obw-msg{font-size:13.5px;color:var(--dls-muted)}
.obw-sep{height:1px;background:var(--dls-border);margin:20px 0}
.obw-face{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.obw-face__preview{width:82px;height:82px;border-radius:50%;flex:none;background:#0c0d16 center/cover no-repeat;
  border:2px dashed var(--dls-border)}
.obw-creative{max-width:320px;width:100%;border-radius:16px;box-shadow:var(--dls-shadow)}
.obw-congrats{font-size:52px;line-height:1}

/* ---- Image style picker ---- */
.dls-styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dls-style-chip{position:relative;display:block;padding:12px 12px 12px 14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--dls-border);background:#0c0d16;transition:border-color .15s,transform .1s}
.dls-style-chip:hover{transform:translateY(-1px)}
.dls-style-chip.is-on{border-color:var(--dls-cyan);box-shadow:inset 0 0 0 1px var(--dls-cyan)}
.dls-style-chip input{position:absolute;top:12px;right:12px;width:16px;height:16px;accent-color:var(--dls-cyan)}
.dls-style-chip b{display:block;font-size:14px;margin:0 0 3px;padding-right:20px}
.dls-style-chip span{display:block;font-size:11.5px;color:var(--dls-muted);line-height:1.35}

/* ---- Share-card favorites strip ---- */
.dls-og-favs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.dls-og-fav{border:1px solid var(--dls-border);border-radius:12px;padding:8px;background:#0c0d16}
.dls-og-fav img{width:100%;border-radius:8px;display:block}
.dls-og-fav .dls-btn{padding:6px 10px;font-size:12px}

/* ---- Lead vendors ---- */
.dls-vendors{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.dls-vendor{border:1px solid var(--dls-border);border-radius:var(--dls-radius);overflow:hidden;background:var(--dls-panel);display:flex;flex-direction:column}
.dls-vendor__thumb{height:150px;background:#0c0d16 center/cover no-repeat;display:grid;place-items:center}
.dls-vendor__thumb span{font-size:44px;font-weight:800;color:var(--dls-muted);opacity:.5}
.dls-vendor__body{padding:16px}

/* ---- Marketing Minds picker ---- */
.dls-minds{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.dls-mind{border:1px solid var(--dls-border);border-radius:12px;padding:12px 14px;background:#0c0d16;cursor:pointer;min-width:170px;transition:border-color .15s}
.dls-mind:hover{border-color:var(--dls-blue)}
.dls-mind.is-sel{border-color:var(--dls-cyan);box-shadow:inset 0 0 0 1px var(--dls-cyan)}
.dls-mind__name{font-weight:700;font-size:14px;margin-bottom:8px}
.dls-mind__row{display:flex;gap:6px;flex-wrap:wrap}
.dls-mind__row .dls-btn{padding:5px 9px;font-size:12px}

/* ---- Chrome logo image ---- */
.dls-logo__img{height:34px;width:auto;display:block}
@media(max-width:560px){ .dls-logo__img{height:30px} }

/* ---- Onboarding: step-by-step instruction list ---- */
.obw-steps-list{background:#0c0d16;border:1px solid var(--dls-border);border-radius:12px;padding:14px 16px;margin:14px 0}
.obw-steps-list ol{margin:0;padding-left:20px}
.obw-steps-list li{color:var(--dls-ink);font-size:13.5px;line-height:1.6;margin:0 0 8px}
.obw-steps-list li:last-child{margin-bottom:0}
.obw-steps-list code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;font-size:12.5px}

/* ---- Visual personalization cards ---- */
.dls-pz-h{font-size:13px;font-weight:800;margin:18px 0 8px;color:var(--dls-ink)}
.dls-pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.dls-pz-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:14px 10px;border-radius:12px;border:1px solid var(--dls-border);background:#0c0d16;cursor:pointer;
  transition:border-color .12s,transform .1s;min-height:78px}
.dls-pz-card:hover{transform:translateY(-1px);border-color:var(--dls-blue)}
.dls-pz-card.is-on{border-color:var(--dls-cyan);box-shadow:inset 0 0 0 1px var(--dls-cyan)}
.dls-pz-card input{position:absolute;opacity:0;pointer-events:none}
.dls-pz-card.is-on:after{content:'✓';position:absolute;top:6px;right:8px;color:var(--dls-cyan);font-weight:800;font-size:12px}
.dls-pz-emoji{font-size:26px;line-height:1}
.dls-pz-label{font-size:12.5px;color:var(--dls-ink);line-height:1.25}
.dls-pz-swatch{width:100%;height:30px;border-radius:8px;display:block}

/* ---- Light polish: subtle motion on interactive elements ---- */
.dls-card{transition:border-color .15s ease, transform .15s ease}
.dls-btn{transition:transform .1s ease, filter .15s ease, background .15s ease}
.dls-btn:hover{filter:brightness(1.08)}
.dls-btn:active{transform:translateY(1px)}
.dls-btn--primary{box-shadow:0 8px 22px rgba(47,123,255,.25)}

/* ---- Admin setup guides ---- */
.dls-guide{border:1px solid var(--dls-border);border-radius:11px;padding:10px 14px;margin:0 0 10px;background:#0c0d16}
.dls-guide>summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none}
.dls-guide>summary::-webkit-details-marker{display:none}
.dls-guide[open]>summary{color:var(--dls-cyan);margin-bottom:8px}
.dls-guide ol{margin:0;padding-left:20px}
.dls-guide li{color:var(--dls-ink);font-size:13.5px;line-height:1.6;margin:0 0 6px}
.dls-guide code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;font-size:12.5px}

/* ── Phones: the page must never pan/drag sideways. Any element a few pixels
   too wide used to make the whole app draggable left-right (messy). Clip
   horizontal overflow at the root and clamp the shell instead. ── */
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
body.dls{overscroll-behavior-x:none}
.dls-shell,.dls-main,.dls-wrap{min-width:0;max-width:100vw}

/* ── Phones: kill iOS Safari's input auto-zoom. Focusing any field with text
   under 16px makes Safari zoom the whole page in and leave it pannable (the
   "I can drag the page over to the left" mess). 16px controls = no auto-zoom,
   and pinch-zoom stays available for accessibility. ── */
@media(max-width:820px){
  input,select,textarea{font-size:16px !important}
}

/* ═══ 🎨 CONTENT ENGINE LOOK, .ce2 (Jeff, 2026-10-05: redesign Marketing Minds, Content Engine, Post Styler,
   Swipe Studio, Ad Lab, Carousels and Ad Swiper in the new Vid Studio's look). Same colours, type, glass and
   one-big-button rhythm as the studio's #vs2. Opened by dls_ce2_open() in _boot.php. The html body prefix
   outranks body.ui26 so the existing cards, buttons and fields inside take the new look without rewrites.
   No backdrop blur: Chrome lags on it during screen shares. ═══ */
.ce2{--bg:#0b0d16;--s1:#121522;--s2:#1a1d2e;--line:rgba(255,255,255,.09);--ink:#eef1fa;--mute:#a3aac6;--dim:#7a82a3;
  --acc:#9b3cff;--acc2:#29c6ff;--pink:#e12fbf;--grad:linear-gradient(120deg,#29c6ff,#2f7bff 35%,#9b3cff 70%,#e12fbf);
  --ok:#34d399;--bad:#fb7185;--r:18px;--r2:12px;--ease:cubic-bezier(.22,1,.36,1);
  --dls-panel:rgba(255,255,255,.035);--dls-panel-2:#1a1d2e;--dls-border:rgba(255,255,255,.1);--dls-ink:#eef1fa;--dls-muted:#a3aac6;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);border-radius:24px;border:1px solid var(--line);
  padding:clamp(16px,3vw,32px);margin:0 0 24px;position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -30px rgba(0,0,0,.6)}
.ce2::before,.ce2::after{content:"";position:absolute;z-index:-1;pointer-events:none;animation:ce2drift 18s ease-in-out infinite alternate}
.ce2::before{inset:-40% -10% auto auto;width:60%;height:80%;background:radial-gradient(closest-side,rgba(155,60,255,.16),transparent)}
.ce2::after{inset:auto auto -30% -10%;width:55%;height:70%;background:radial-gradient(closest-side,rgba(41,198,255,.10),transparent)}
@keyframes ce2drift{to{transform:translate(-8%,6%) scale(1.15)}}
.ce2-orb{position:absolute;z-index:-1;pointer-events:none;width:42%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.28;left:30%;top:8%;
  background:radial-gradient(circle,rgba(225,47,191,.55),rgba(155,60,255,.25) 45%,transparent 70%);animation:ce2orb 22s ease-in-out infinite alternate}
@keyframes ce2orb{to{transform:translate(-30%,-18%) scale(1.25)}}
.ce2 *{box-sizing:border-box}
.ce2 [hidden]{display:none!important}
.ce2 :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ce2 h1,.ce2 h2,.ce2 h3{font-family:'Bricolage Grotesque','DM Sans',sans-serif;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
/* top bar: brand + one tab per content tool */
.ce2-top{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-bottom:clamp(18px,3vw,30px)}
.ce2-brand{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-size:17px}
.ce2-rec{width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(225,47,191,.18)}
.ce2-tabs{display:flex;gap:4px;padding:4px;background:var(--s1);border:1px solid var(--line);border-radius:999px;overflow-x:auto;max-width:100%;scrollbar-width:none;margin-left:auto}
.ce2-tabs::-webkit-scrollbar{display:none}
.ce2-tab{flex:0 0 auto;padding:8px 14px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--mute);text-decoration:none;white-space:nowrap;transition:background .18s var(--ease),color .18s}
.ce2-tab:hover{color:var(--ink)}
.ce2-tab[aria-current=page]{background:var(--grad);color:#fff;box-shadow:0 6px 18px -8px rgba(155,60,255,.7)}
@media(max-width:860px){.ce2-tabs{margin-left:0;width:100%}}
/* hero */
.ce2-hero{margin:0 0 clamp(20px,3vw,30px);animation:ce2up .6s var(--ease) both}
.ce2-hero h1{font-size:clamp(30px,4.6vw,48px);font-weight:800;line-height:1.05;margin:0 0 10px}
.ce2-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ce2-hero p{color:var(--mute);font-size:clamp(15px,1.5vw,17px);line-height:1.55;max-width:68ch;margin:0}
.ce2-ver{display:inline-block;margin-top:10px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.02em}
@keyframes ce2up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the existing pieces, re-dressed */
html body .ce2 .dls-card{background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 50%,rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.11);
  border-radius:22px;padding:clamp(16px,2.4vw,24px);margin:0 0 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -26px rgba(0,0,0,.8);animation:ce2up .5s var(--ease) both}
html body .ce2 .dls-card:hover{transform:none;border-color:rgba(255,255,255,.16)}
html body .ce2 .dls-card > h3,html body .ce2 .dls-card h3{font-size:clamp(18px,2vw,22px);font-weight:800}
html body .ce2 .dls-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .ce2 .dls-eyebrow *{-webkit-text-fill-color:var(--dim)}
html body .ce2 .dls-sub{color:var(--mute)}
html body .ce2 .dls-btn{border:1px solid var(--line);background:var(--s1);color:var(--ink);border-radius:999px;padding:11px 18px;font-weight:700;font-size:14px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none;transition:border-color .15s,background .15s,transform .12s var(--ease),filter .15s}
html body .ce2 .dls-btn:hover{border-color:var(--mute);background:var(--s2);transform:none}
html body .ce2 .dls-btn:active{transform:scale(.97)}
html body .ce2 .dls-btn--primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 28px -12px rgba(155,60,255,.7)}
html body .ce2 .dls-btn--primary:hover{background:var(--grad);filter:brightness(1.08)}
html body .ce2 .dls-btn[disabled]{opacity:.6;cursor:progress}
html body .ce2 .dls-field label,.ce2 .ce2-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
html body .ce2 :is(.dls-field input:not([type=checkbox]):not([type=radio]),.dls-field textarea,.dls-field select,.dls-input,input[type=search],input[type=url],input[type=text].ce2-in,.ce2-in){
  width:100%;background:var(--s1);border:1px solid var(--line);border-radius:var(--r2);color:var(--ink);font:inherit;font-size:16px;padding:13px 15px;line-height:1.45;transition:border-color .15s}
html body .ce2 :is(input,textarea,select):focus{outline:0;border-color:var(--acc)}
html body .ce2 :is(input,textarea)::placeholder{color:var(--dim)}
html body .ce2 select option{background:#1a1d27;color:#eee}
html body .ce2 .dls-style-chip{border:1px solid var(--line);background:var(--s1);border-radius:var(--r);padding:16px;transition:border-color .15s,background .15s,transform .12s var(--ease)}
html body .ce2 .dls-style-chip:hover{border-color:var(--mute);background:var(--s2)}
html body .ce2 .dls-style-chip.is-on{border-color:var(--acc);background:linear-gradient(135deg,rgba(41,198,255,.10),rgba(155,60,255,.16) 55%,rgba(225,47,191,.12));box-shadow:0 0 0 1px var(--acc) inset,0 10px 28px -14px rgba(155,60,255,.8)}
html body .ce2 .dls-alert{border-radius:999px;padding:12px 18px}
html body .ce2 details > summary{cursor:pointer}
/* new pieces, the studio's vocabulary */
.ce2-step{padding:clamp(16px,2.2vw,22px) 0;border-top:1px solid var(--line)}
.ce2-step:first-child{border-top:0;padding-top:0}
.ce2-sh{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ce2-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;min-width:22px}
.ce2 .ce2-sh h2{font-size:clamp(19px,2.2vw,24px);font-weight:800;margin:0}
.ce2-sh p{color:var(--dim);font-size:14px;margin:0 0 0 auto}
.ce2-chips{display:flex;flex-wrap:wrap;gap:8px}
.ce2-chip{border:1px solid var(--line);background:var(--s1);color:var(--ink);border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;font-size:14px;min-height:44px;cursor:pointer;transition:border-color .15s,background .15s,transform .12s var(--ease)}
.ce2-chip:hover{border-color:var(--mute)}
.ce2-chip:active,.ce2-tile:active,.ce2-go:active{transform:scale(.97)}
.ce2-chip[aria-pressed=true]{background:color-mix(in srgb,var(--acc) 24%,var(--s1));color:#fff;border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.ce2-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ce2-tile{text-align:left;border:1px solid var(--line);background:var(--s1);color:var(--ink);border-radius:var(--r);padding:16px;min-height:96px;display:flex;flex-direction:column;gap:6px;font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .12s var(--ease)}
.ce2-tile:hover{border-color:var(--mute);background:var(--s2)}
.ce2-tile b{font-size:15px;line-height:1.25}
.ce2-tile small{color:var(--dim);font-size:13px;line-height:1.4}
.ce2-tile .ico{font-size:24px}
.ce2-tile[aria-pressed=true]{border-color:var(--acc);background:linear-gradient(135deg,rgba(41,198,255,.10),rgba(155,60,255,.16) 55%,rgba(225,47,191,.12));box-shadow:0 0 0 1px var(--acc) inset,0 10px 28px -14px rgba(155,60,255,.8)}
.ce2-tile[aria-pressed=true] small{color:var(--mute)}
.ce2-gobar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.ce2-go{border:0;background:var(--grad);color:#fff;border-radius:999px;padding:17px 32px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em;min-height:56px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 32px -10px rgba(155,60,255,.65);transition:transform .12s var(--ease),filter .15s}
.ce2-go:hover{filter:brightness(1.06)}
.ce2-go:disabled{opacity:.7;cursor:progress}
.ce2-summary{color:var(--dim);font-size:14px;flex:1 1 220px}
.ce2-msg{font-size:14px;font-weight:600}
.ce2-msg.bad{color:var(--bad)} .ce2-msg.ok{color:var(--ok)}
.ce2-sw{display:flex;align-items:flex-start;gap:12px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r2);padding:14px;cursor:pointer}
.ce2-sw input{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:999px;background:var(--s2);position:relative;flex:0 0 auto;transition:background .2s;margin:0;cursor:pointer}
.ce2-sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--mute);transition:transform .2s var(--ease),background .2s}
.ce2-sw input:checked{background:var(--grad)}
.ce2-sw input:checked::after{transform:translateX(16px);background:#fff}
.ce2-sw b{display:block;font-size:14.5px}
.ce2-sw small{display:block;color:var(--mute);font-size:13px;line-height:1.45;margin-top:2px}
.ce2-glass{position:relative;overflow:hidden;border-radius:22px;padding:18px 20px;color:var(--ink);
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 45%,rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 40px -22px rgba(0,0,0,.8);transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.ce2-glass::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.ce2-glass:hover::after{transform:translateX(120%)}
button.ce2-glass:hover,a.ce2-glass:hover{border-color:rgba(155,60,255,.7);transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 22px 50px -20px rgba(155,60,255,.6)}
.ce2-gi{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:linear-gradient(145deg,rgba(41,198,255,.25),rgba(155,60,255,.3),rgba(225,47,191,.25));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
/* drop zone (Ad Swiper) */
.ce2-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:200px;padding:28px 18px;border-radius:22px;cursor:pointer;
  border:1.5px dashed rgba(155,60,255,.55);background:linear-gradient(135deg,rgba(41,198,255,.06),rgba(155,60,255,.09) 55%,rgba(225,47,191,.06));transition:border-color .2s,background .2s,transform .2s var(--ease)}
.ce2-drop:hover,.ce2-drop.is-over{border-color:var(--pink);transform:translateY(-2px);background:linear-gradient(135deg,rgba(41,198,255,.10),rgba(155,60,255,.15) 55%,rgba(225,47,191,.10))}
.ce2-drop b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.2vw,24px)}
.ce2-drop small{color:var(--mute);font-size:14px}
.ce2-drop img{max-height:240px;max-width:100%;border-radius:14px;box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
/* library grid */
.ce2-lib{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ce2-card{display:flex;flex-direction:column;text-align:left;color:inherit;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;padding:0;font:inherit;cursor:pointer;
  transition:transform .2s var(--ease),border-color .15s;animation:ce2up .45s var(--ease) both}
.ce2-card:hover{transform:translateY(-2px);border-color:var(--mute)}
.ce2-card[aria-pressed=true]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.ce2-thumb{aspect-ratio:1;background:var(--s2);position:relative;overflow:hidden;display:grid;place-items:center}
.ce2-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ce2-meta{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px}
.ce2-meta b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ce2-meta small{color:var(--dim);font-size:12.5px}
.ce2-badge{position:absolute;left:8px;top:8px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:rgba(7,8,13,.72);color:#fff}
.ce2-empty{padding:40px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);color:var(--mute)}
.ce2-empty h3{font-size:20px;margin:0 0 6px}
.ce2-bar{height:6px;border-radius:999px;background:var(--s2);overflow:hidden}
.ce2-bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:inherit;transition:width .6s var(--ease)}
.ce2-ring{width:44px;height:44px;border-radius:50%;border:3px solid var(--s2);border-top-color:var(--acc);border-right-color:var(--pink);animation:ce2spin 1s linear infinite}
@keyframes ce2spin{to{transform:rotate(360deg)}}
.ce2-row2{display:grid;gap:18px}
@media(min-width:820px){.ce2-row2{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
@media(prefers-reduced-motion:reduce){.ce2::before,.ce2::after,.ce2-orb,.ce2-ring{animation:none}.ce2-hero,.ce2-card,html body .ce2 .dls-card{animation:none}}
@media(max-width:600px){.ce2{border-radius:18px;padding:16px 14px}.ce2-go{width:100%}.ce2-sh p{margin-left:0;flex-basis:100%}}
/* Marketing Minds in .ce2 */
.ce2 .mtw-home{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ce2 .mtw-big{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;cursor:pointer;text-decoration:none;min-height:88px}
.ce2 .mtw-big b{display:block;font-size:17px;font-family:'Bricolage Grotesque',sans-serif}
.ce2 .mtw-big small{display:block;color:var(--mute);font-size:13.5px;margin-top:3px}
html body .ce2 .dls-minds{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
html body .ce2 .dls-mind{min-width:0;border-radius:var(--r);padding:16px;background:var(--s1);border:1px solid var(--line);transition:border-color .15s,background .15s,transform .2s var(--ease)}
html body .ce2 .dls-mind:hover{border-color:var(--mute);transform:translateY(-2px)}
html body .ce2 .dls-mind.is-sel{border-color:var(--acc);background:linear-gradient(135deg,rgba(41,198,255,.10),rgba(155,60,255,.16) 55%,rgba(225,47,191,.12));box-shadow:0 0 0 1px var(--acc) inset,0 10px 28px -14px rgba(155,60,255,.8)}
html body .ce2 .dls-mind__name{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;margin-bottom:10px}
html body .ce2 .dls-mind__row{display:flex;gap:6px;flex-wrap:wrap}
html body .ce2 .dls-mind__row .dls-btn{min-height:34px;padding:6px 12px;font-size:12.5px}
html body .ce2 #mind-lib .lib-tile{justify-content:flex-start;border-radius:14px;min-height:52px}
/* Post Styler in .ce2: write on the left, the feed preview on the right */
.ce2 .ps-split{display:grid;gap:18px;align-items:start}
@media(min-width:980px){.ce2 .ps-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.ce2 .ps-prev{position:sticky;top:16px}}
html body .ce2 .ps-wrap{max-width:none;margin:0}
.ce2 .ps-go{align-items:center}
.ce2 .ps-go .ce2-go{flex:0 0 auto}
@media(max-width:759px){.ce2 .ps-go .ce2-go,.ce2 .ps-go .dls-btn{flex:1 1 100%}}
.ce2 .ps-fb{background:#fff;color:#050505;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.9);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.ce2 .ps-fb-hd{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.ce2 .ps-fb-hd b{display:block;font-size:15px;color:#050505}
.ce2 .ps-fb-hd small{display:block;font-size:12.5px;color:#65676b}
.ce2 .ps-fb-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#29c6ff,#9b3cff,#e12fbf)}
.ce2 .ps-fb-tx{padding:4px 16px 14px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word;max-height:60vh;overflow:auto}
.ce2 .ps-fb-ph{color:#8a8d91}
.ce2 .ps-fb-ft{display:flex;justify-content:space-around;border-top:1px solid #e4e6eb;padding:10px 6px;font-size:14px;font-weight:600;color:#65676b}
.ce2 .ps-emo{background:var(--s1);border-color:var(--line)}
.ce2 .ps-emo:hover{border-color:var(--acc)}
/* Swipe Studio in .ce2 */
.ce2 .ss-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--s1);border:1px solid var(--line);border-radius:999px;margin:0 0 18px;max-width:100%;overflow-x:auto;flex-wrap:nowrap}
.ce2 .ss-tab{flex:0 0 auto;border:0;background:none;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;color:var(--mute);transition:background .18s var(--ease),color .18s}
.ce2 .ss-tab:hover{color:var(--ink)}
.ce2 .ss-tab.is-on{background:var(--grad);color:#fff;box-shadow:0 6px 18px -8px rgba(155,60,255,.7)}
.ce2 .ss-tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0 0 22px}
.ce2 .ss-tile{border:1px solid var(--line);background:var(--s1);border-radius:var(--r);padding:14px 16px;transition:border-color .15s,background .15s,transform .12s var(--ease)}
.ce2 .ss-tile:hover{border-color:var(--mute);background:var(--s2)}
.ce2 .ss-tile:active{transform:scale(.97)}
.ce2 .ss-tile b{font-size:14.5px}
.ce2 .ss-tile span{color:var(--dim);font-size:12.5px}
.ce2 .ss-tile.is-on{border-color:var(--acc);background:linear-gradient(135deg,rgba(41,198,255,.10),rgba(155,60,255,.16) 55%,rgba(225,47,191,.12));box-shadow:0 0 0 1px var(--acc) inset,0 10px 28px -14px rgba(155,60,255,.8)}
.ce2 .ss-tile.is-on span{color:var(--mute)}
.ce2 .ss-count{background:var(--s1);border:1px solid var(--line);border-radius:999px;color:var(--ink);font:inherit;font-weight:700;padding:14px 18px;min-height:52px}
/* written emails read like real email: white paper, dark ink */
html body .ce2 #ss-results .dls-card,.ce2 #ss-lib .ss-em{background:#fff;color:#1f2330;border:0;border-radius:18px;box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
html body .ce2 #ss-results .dls-card{padding:20px 22px}
.ce2 :is(#ss-results,#ss-lib) .ss-subj{color:#11131c;font-family:'Bricolage Grotesque',sans-serif;font-size:17px}
.ce2 :is(#ss-results,#ss-lib) .ss-prev{color:#6b7084}
html body .ce2 :is(#ss-results,#ss-lib) .dls-btn{background:#f1f2f7;color:#1f2330;border-color:#e2e4ee}
html body .ce2 :is(#ss-results,#ss-lib) .dls-btn--primary{background:var(--grad);color:#fff;border-color:transparent}
.ce2 .ss-em{border-color:var(--line);border-radius:var(--r);background:var(--s1)}
.ce2 .ss-day{color:#fff;background:var(--grad)}
/* Ad Lab in .ce2: a glass search bar that stays in reach, a rail of style chips, cards that lift */
.ce2 .al-bar{position:sticky;top:8px;z-index:5;padding:10px;border-radius:999px;background:rgba(18,21,34,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
html body .ce2 .al-bar :is(input,select){border-radius:999px!important;background:var(--s2)!important;border:1px solid var(--line)!important;min-height:44px;font-size:14.5px!important}
.ce2 .al-cats{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ce2 .al-cats::-webkit-scrollbar{display:none}
.ce2 .al-cats .ce2-chip{flex:0 0 auto;min-height:38px;padding:8px 14px;font-size:13px}
html body .ce2 #al-grid > .dls-card{background:var(--s1);border-radius:var(--r);transition:transform .2s var(--ease),border-color .15s,box-shadow .2s}
html body .ce2 #al-grid > .dls-card:hover{transform:translateY(-3px);border-color:rgba(155,60,255,.6);box-shadow:0 22px 50px -24px rgba(155,60,255,.55)}
.ce2 #al-recent{padding:16px;border-radius:20px;background:linear-gradient(135deg,rgba(41,198,255,.07),rgba(155,60,255,.09) 55%,rgba(225,47,191,.07));border:1px solid rgba(155,60,255,.3)}
.ce2 .al-shape{background:var(--s1);border-color:var(--line);border-radius:12px}
.ce2 .al-shape.is-on{border-color:var(--acc);background:rgba(155,60,255,.14);color:var(--ink)}
@media(max-width:600px){.ce2 .al-bar{border-radius:20px}}