*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F6F3EE;--bg2:#EEE9E1;--bg3:#E5DED4;
  --surface:#FFF;--sf2:#FAF8F5;
  --green:#1A4229;--gm:#265E38;--glt:#E5EDE7;--gpale:#F0F5F1;--green-deep:#0D2B1A;
  --charcoal:#18181A;--c2:#2C2C2E;--muted:#6B6B6B;--m2:#9E9E9E;
  --border:#E0DAD1;--b2:#CEC8BE;
  --warn-bg:#FEF3C7;--warn-c:#92400E;
  --err-bg:#FEE2E2;--err-c:#991B1B;
  --r:10px;--rl:14px;--rx:18px;
  --sh:0 1px 3px rgba(0,0,0,.05);
  --shm:0 2px 8px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
  --shl:0 8px 32px rgba(0,0,0,.10);
  --t:.15s ease
}
/* ── DARK MODE ───────────────────────────────────────────────── */
body.dark-mode{
  --bg:#0F0F10;
  --bg2:#1A1A1C;
  --bg3:#252528;
  --surface:#18181A;
  --sf2:#1F1F21;
  --green:#2A6641;
  --gm:#3A8055;
  --glt:#1A2E22;
  --gpale:#1A2520;
  --green-deep:#0D2B1A;
  --charcoal:#F0F0F0;
  --c2:#D4D4D6;
  --muted:#8A8A8E;
  --m2:#636366;
  --border:#2C2C2E;
  --b2:#3A3A3C;
  --warn-bg:#2C2000;
  --warn-c:#FBBF24;
  --err-bg:#2C0A0A;
  --err-c:#F87171;
  --sh:0 1px 3px rgba(0,0,0,.3);
  --shm:0 2px 8px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  --shl:0 8px 32px rgba(0,0,0,.5);
}
body.dark-mode .fab-mini{background:var(--green)}
body.dark-mode .fab-header{background:var(--green)}
body.dark-mode .chat-ai-avatar{background:var(--green)}
body.dark-mode .fab-msg-avatar{background:var(--green)}
body.dark-mode .btn-p{background:var(--green)}
body.dark-mode .btn-p:hover{background:var(--gm)}
body.dark-mode .tgl.on{background:var(--green)}
body.dark-mode .chat-send{background:var(--green)}
body.dark-mode .chat-send:hover{background:var(--gm)}
body.dark-mode .fab-send{background:var(--green)}
body.dark-mode .create-h1 em{color:var(--gm)}
body.dark-mode .cblk-text .cblk-ico svg{stroke:var(--gm)}
body.dark-mode .ni.active{background:var(--gpale);color:var(--gm)}
body.dark-mode .if-btn.active{background:var(--green);border-color:var(--green)}

html{font-size:14px}
body{font-family:'Geist',system-ui,sans-serif;background:var(--bg);color:var(--charcoal);height:100vh;overflow:hidden;display:flex}
input,select,textarea,button{font-family:inherit;font-size:inherit}
button{cursor:pointer}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}
.hidden{display:none!important}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r);padding:8px 16px;font-size:13px;font-weight:500;border:none;transition:all var(--t);line-height:1;white-space:nowrap}
.btn-p{background:var(--green);color:#fff}
.btn-p:hover{background:var(--gm);transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,66,41,.18)}
.btn-p:disabled{background:var(--bg3);color:var(--m2);cursor:not-allowed;transform:none;box-shadow:none}
.btn-g{background:transparent;color:var(--c2);border:1px solid var(--b2)}
.btn-g:hover{background:var(--bg2)}
.btn-g:disabled{color:var(--m2);cursor:not-allowed}
.btn-d{background:var(--err-bg);color:var(--err-c);border:1px solid #FECACA}
.btn-d:hover{background:#FEE2E2}
.btn-sm{padding:5px 12px;font-size:12px}

/* FORM */
.inp{width:100%;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r);padding:9px 12px;font-size:13px;color:var(--charcoal);outline:none;transition:border-color var(--t),background var(--t)}
.inp:focus{border-color:var(--gm);background:var(--surface)}
.inp::placeholder{color:var(--m2)}
textarea.inp{resize:vertical;min-height:80px}
.sel{width:100%;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r);padding:9px 12px;font-size:13px;color:var(--charcoal);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.sel:focus{border-color:var(--gm)}
.lbl{display:block;font-size:12px;font-weight:500;color:var(--c2);margin-bottom:5px}
.fg{margin-bottom:16px}

/* UTILS */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.bg-green{background:var(--glt);color:var(--gm)}
.bg-warm{background:var(--warn-bg);color:var(--warn-c)}
.bg-grey{background:var(--bg3);color:var(--muted)}
.bg-red{background:var(--err-bg);color:var(--err-c)}
.tgl-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.tgl-row:last-child{border-bottom:none}
.tgl{width:38px;height:21px;background:var(--bg3);border-radius:11px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.tgl.on{background:var(--green)}
.tgl::after{content:'';position:absolute;width:15px;height:15px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.tgl.on::after{left:20px}
.tgl-lbl{font-size:13px;color:var(--charcoal)}
.tgl-sub{font-size:12px;color:var(--muted);margin-top:2px}
.hr{height:1px;background:var(--border);margin:16px 0}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 32px;background:var(--surface);border:1px dashed var(--b2);border-radius:var(--rx)}
.empty-ico{width:52px;height:52px;background:var(--bg2);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.empty-ico svg{width:24px;height:24px;color:var(--m2)}
.empty-ttl{font-size:15px;font-weight:600;color:var(--c2);margin-bottom:6px}
.empty-sub{font-size:13px;color:var(--muted);line-height:1.6;max-width:280px;margin-bottom:20px}
.sec-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--m2);margin-bottom:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* MODAL */
.mbk{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:900;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s}
.mbk.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border-radius:var(--rx);padding:28px;box-shadow:var(--shl);width:440px;max-width:calc(100vw - 40px);max-height:calc(100vh - 80px);overflow-y:auto;transform:translateY(8px);transition:transform .2s}
.mbk.open .modal{transform:translateY(0)}
.modal-ttl{font-family:'Instrument Serif',serif;font-size:20px;color:var(--charcoal);margin-bottom:4px}
.modal-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.modal-ft{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;background:var(--charcoal);color:#fff;padding:12px 18px;border-radius:var(--rl);font-size:13px;font-weight:500;box-shadow:var(--shl);opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:var(--green)}
.toast.warn{background:#92400E}

/* LOADING */
.spin{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.lbar{height:3px;background:var(--bg3);border-radius:2px;overflow:hidden}
.lbar-fill{height:100%;background:var(--green);border-radius:2px;animation:lbar 1.8s ease-in-out infinite}
@keyframes lbar{0%{width:0%;margin-left:0}50%{width:70%;margin-left:15%}100%{width:0%;margin-left:100%}}
.glov{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.glov.open{opacity:1;pointer-events:all}
.glov-inner{background:var(--surface);border-radius:var(--rx);padding:40px;text-align:center;width:360px;transform:translateY(10px);transition:transform .25s}
.glov.open .glov-inner{transform:translateY(0)}
.glov h3{font-family:'Instrument Serif',serif;font-size:20px;color:var(--charcoal);margin-bottom:6px;margin-top:16px}
.glov p{font-size:13px;color:var(--muted);margin-bottom:24px}

/* ═══ LAYOUT ═══════════════════════════════════════════════════ */
.app{display:flex;height:100vh;width:100%;overflow:hidden}

/* SIDEBAR ─────────────────────────────────────────────────────
   Two flex children:
     .sb-top    — logo + nav, flex:1 + min-height:0, scrolls internally if needed
     .sb-bottom — settings + plan + identity, flex-shrink:0, NEVER clips
   .sb-bottom sits naturally after .sb-top; with flex:1 on .sb-top the
   bottom block is always anchored right above the viewport floor with
   sufficient padding so it never touches the screen edge.
──────────────────────────────────────────────────────────────── */
.sb{
  width:200px;min-width:200px;
  /* height comes from parent .app via flex align-items:stretch — do NOT set
     height:100vh here or the sidebar will extend past the viewport when the
     beta banner adds margin-top to .app */
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* TOP: logo + navigation — grows to fill remaining space above the bottom block */
.sb-top{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sb-logo{padding:20px 16px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.logo{display:flex;align-items:center;gap:8px}
.logo-mk{width:30px;height:30px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mk svg{width:30px;height:30px}
.logo-name{font-family:'Instrument Serif',serif;font-size:15px;color:var(--charcoal);letter-spacing:-.2px}
.logo-name span{color:var(--gm)}
.sb-nav{flex:1;min-height:0;padding:8px 8px;overflow-y:auto}

/* Nav items */
.ni{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;cursor:pointer !important;pointer-events:all !important;font-size:13px;color:var(--muted);transition:all var(--t);user-select:none;margin-bottom:2px}
.ni:hover{background:var(--bg);color:var(--charcoal)}
.ni.active{background:var(--gpale);color:var(--green);font-weight:500}
.ni svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;pointer-events:none}
.ni span{pointer-events:none}

/* BOTTOM: flex-shrink:0 means it NEVER compresses regardless of viewport height.
   padding-bottom:20px lifts the content away from the screen edge so it
   never feels clipped even on short/laptop screens. */
.sb-bottom{
  flex-shrink:0;
  border-top:1px solid var(--border);
  padding:8px 8px 20px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

/* Identity wrapper */
.sb-ft{padding:4px 0 0}

/* Identity card */
.sb-identity{
  background:var(--green-deep);
  border-radius:11px;
  padding:11px 13px 12px;
  margin:2px 4px 0;
}
.sb-identity-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-identity-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:3px;white-space:nowrap}
.sb-signout{cursor:pointer;transition:color .15s}
.sb-signout:hover{color:rgba(255,255,255,.9)}

/* MAIN CONTENT */
.mc{flex:1;overflow-y:auto;min-height:0}
.page{display:none;min-height:100%}
.page.active{display:block}

/* ═══ DASHBOARD ════════════════════════════════════════════════ */
#page-dashboard{display:none;position:relative;overflow:hidden}
#page-dashboard.active{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  overflow:hidden;
}


/* ── Entry animations ── */
@keyframes dashFadeUp{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:translateY(0)}
}
.dash-hero  {animation:dashFadeUp .5s cubic-bezier(.22,.68,0,1.2) .05s both}
.dash-cards {animation:dashFadeUp .5s cubic-bezier(.22,.68,0,1.2) .14s both}

/* ── Container ── */
.dash-outer{
  width:100%;max-width:920px;
  padding:0 40px;
  position:relative;z-index:1;
  text-align:center;
}

/* ── Hero ── */
.dash-hero{margin-bottom:20px}
.dash-headline{
  font-family:'Instrument Serif',serif;
  font-size:clamp(52px,7vw,88px);
  color:var(--charcoal);
  letter-spacing:-3.2px;
  line-height:1.0;
  margin:0 0 10px;
  font-weight:400;
}
/* Gradient accent on the key word */
.dash-hl-grad{
  background:linear-gradient(125deg,#2D6A4F 0%,#52B788 52%,#74C69D 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.dash-tagline{
  font-size:18px;
  color:var(--muted);
  line-height:1.55;
  margin:0 auto 16px;
  font-weight:400;
  max-width:480px;
}

/* Brand identity badge row */
.dash-brand-badge{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
}
.dash-badge-name{
  font-size:14px;font-weight:600;color:var(--gm);
  background:var(--glt);border:1px solid rgba(26,66,41,.15);
  padding:6px 14px;border-radius:20px;
  display:inline-flex;align-items:center;gap:6px;
}
.dash-badge-dot{
  width:7px;height:7px;border-radius:50%;background:var(--gm);flex-shrink:0;
  animation:dashDotPulse 2.6s ease-in-out infinite;
}
@keyframes dashDotPulse{0%,100%{opacity:1}50%{opacity:.35}}
.dash-badge-tone{
  font-size:13px;color:var(--muted);
  background:var(--bg2);border:1px solid var(--border);
  padding:5px 12px;border-radius:20px;
}
.dash-badge-colors{display:inline-flex;gap:5px;align-items:center}
.dash-badge-swatch{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(0,0,0,.08);flex-shrink:0}
.dash-badge-setup{
  font-size:14px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;
  transition:color .2s,text-decoration-color .2s;
  background:none;border:none;font-family:inherit;padding:0;
}
.dash-badge-setup:hover{color:var(--gm);text-decoration-color:var(--gm)}

/* ── 2×2 Action card grid ── */
.dash-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:0;
  text-align:left;
}

/* Card base */
.dash-card{
  display:flex;
  flex-direction:column;
  padding:28px 28px 56px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:20px;
  cursor:pointer;text-align:left;
  position:relative;overflow:hidden;
  font-family:'Geist',sans-serif;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  min-height:148px;
  transition:
    transform      .38s cubic-bezier(.34,1.38,.64,1),
    box-shadow     .38s ease,
    border-color   .14s ease;
}

/* ── Gradient layer (behind everything, revealed on hover) ── */
/* background-size > 100% so background-position can drift */
.dash-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(
    135deg,
    var(--green-deep)  0%,
    var(--green)       30%,
    var(--gm)          100%
  );
  background-size:220% 220%;
  animation:cardGradDrift 10s ease-in-out infinite alternate;
  opacity:0;
  transition:opacity .42s ease;
  z-index:0;
  border-radius:inherit;
}

/* Ambient drift — the background-position shifts slowly */
@keyframes cardGradDrift{
  0%  {background-position:0%   0%  }
  100%{background-position:100% 100%}
}

/* Reveal gradient + scale + glow on hover */
.dash-card:hover::before{opacity:1}
.dash-card:hover{
  transform:scale(1.02);
  border-color:var(--green-deep);
  box-shadow:
    0 10px 44px rgba(26,66,41,.36),
    0 2px 8px rgba(0,0,0,.10);
}
.dash-card:active{transform:scale(1.01);transition-duration:.1s}

/* All child content sits above the gradient layer */
.dash-card-ico,
.dash-card-label,
.dash-card-desc,
.dash-card-arr{position:relative;z-index:1}

/* ── Icon ── */
.dash-card-ico{
  width:46px;height:46px;
  border-radius:13px;
  background:var(--gpale);
  border:1px solid var(--glt);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;flex-shrink:0;
  transition:background .38s ease,border-color .38s ease;
}
.dash-card-ico svg{
  width:20px;height:20px;
  fill:none;stroke:var(--green);stroke-width:1.6;
  transition:stroke .38s ease;
}
.dash-card:hover .dash-card-ico{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.22);
}
.dash-card:hover .dash-card-ico svg{stroke:#fff}

/* ── Label ── */
.dash-card-label{
  font-size:17px;font-weight:700;
  color:var(--charcoal);letter-spacing:-.35px;
  margin-bottom:6px;
  transition:color .38s ease;
  pointer-events:none;
}
.dash-card:hover .dash-card-label{color:#fff}

/* ── Description ── */
.dash-card-desc{
  font-size:13.5px;color:var(--muted);
  line-height:1.5;
  transition:color .38s ease;
  pointer-events:none;
}
.dash-card:hover .dash-card-desc{color:rgba(255,255,255,.65)}

/* ── Arrow (appears bottom-right on hover) ── */
.dash-card-arr{
  position:absolute;
  bottom:24px;right:24px;
  opacity:0;
  transform:translate(5px,-5px);
  transition:opacity .22s ease,transform .24s ease;
}
.dash-card-arr svg{
  width:16px;height:16px;
  fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.8;
}
.dash-card:hover .dash-card-arr{
  opacity:1;
  transform:translate(0,0);
}

/* Hide snapshot — brand info shown via hero badge in no-scroll layout */
#dashSnapshot{display:none}

/* Responsive */
@media(max-width:640px){
  .dash-outer{padding:0 20px}
  .dash-cards{grid-template-columns:1fr;gap:10px}
  .dash-card{padding:22px 22px 46px;min-height:0}
}

/* ── Brand Snapshot ── */
.dash-snapshot{
  display:flex;align-items:center;gap:16px;
  padding:17px 22px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:border-color .22s ease,box-shadow .22s ease;
  cursor:default;
}
.dash-snapshot:hover{
  border-color:rgba(82,183,136,.3);
  box-shadow:0 4px 18px rgba(0,0,0,.07);
}
.dash-snap-ico{
  width:40px;height:40px;border-radius:11px;
  background:linear-gradient(135deg,var(--green),var(--gm));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dash-snap-ico svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.5}
.dash-snap-body{flex:1;min-width:0}
.dash-snap-label{
  font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px;
}
.dash-snap-name{font-size:15px;font-weight:700;color:var(--charcoal);letter-spacing:-.25px}
.dash-snap-meta{font-size:12px;color:var(--muted);margin-top:1px;line-height:1.4}
.dash-snap-colors{display:inline-flex;gap:4px;margin-top:6px}
.dash-snap-swatch{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(0,0,0,.08)}
.dash-snap-edit{
  font-size:13px;font-weight:500;color:var(--gm);
  background:var(--glt);border:1px solid rgba(26,66,41,.15);
  padding:7px 14px;border-radius:9px;cursor:pointer;
  transition:background .2s,transform .18s;font-family:'Geist',sans-serif;flex-shrink:0;
}
.dash-snap-edit:hover{background:rgba(82,183,136,.2);transform:translateY(-1px)}
.dash-snap-setup{
  font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--green),var(--gm));
  border:none;padding:8px 16px;border-radius:9px;cursor:pointer;
  transition:opacity .2s,transform .18s;font-family:'Geist',sans-serif;flex-shrink:0;
}
.dash-snap-setup:hover{opacity:.88;transform:translateY(-1px)}
.dash-snap-empty-txt{font-size:13px;color:var(--muted);margin-top:1px}

/* Dark mode */
body.dark-mode .dash-snap-ico{background:linear-gradient(135deg,var(--green),var(--gm))}
body.dark-mode .dash-hl-grad{
  background:linear-gradient(125deg,#52B788,#74C69D,#95D5B2);
  -webkit-background-clip:text;background-clip:text;
}

/* Responsive */
@media(max-width:800px){
  .dash-outer{padding:0 32px}
  .dash-headline{font-size:clamp(44px,6vw,72px)}
}
@media(max-width:520px){
  .dash-headline{font-size:40px;letter-spacing:-2.4px}
  .dash-tagline{font-size:15px}
}


/* ═══ CREATE ═══════════════════════════════════════════════════ */
#page-create{display:none}
#page-create.active{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding-top:0}
.create-outer{
  width:100%;
  max-width:1060px;
  padding:52px 48px 72px;
}
/* Heading */
.create-heading{text-align:center;margin-bottom:44px}
.create-eyebrow{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--gm);opacity:.8;display:block;margin-bottom:14px}
.create-h1{font-family:'Instrument Serif',serif;font-size:clamp(34px,4.8vw,52px);color:var(--charcoal);letter-spacing:-1.6px;line-height:1.08;margin-bottom:10px}
.create-h1 em{font-style:italic;color:var(--gm)}
.create-sub{font-size:15px;color:var(--muted);line-height:1.7;max-width:440px;margin:0 auto}
/* Grid */
.create-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
/* Block base */
.cblk{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:24px;
  padding:36px 30px 32px;
  display:flex;flex-direction:column;
  cursor:pointer !important;
  pointer-events:all !important;
  transition:
    transform .32s cubic-bezier(.34,1.38,.64,1),
    box-shadow .32s ease,
    background-color .3s ease,
    border-color .3s ease;
  text-align:left;
  box-shadow:0 1px 5px rgba(0,0,0,.04);
  min-height:252px;
  position:relative;
  user-select:none;
}
.cblk:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 48px rgba(0,0,0,.15);
}
.cblk:active{transform:translateY(-2px) scale(1.01);transition-duration:.07s}
/* Type accent colours — icon resting state */
.cblk-image .cblk-ico{background:#EDF2FF}
.cblk-image .cblk-ico svg{stroke:#3B5BDB}
.cblk-text .cblk-ico{background:#F3FBF0}
.cblk-text .cblk-ico svg{stroke:var(--gm)}
.cblk-video .cblk-ico{background:#FFF4E6}
.cblk-video .cblk-ico svg{stroke:#E8590C}
.cblk-web .cblk-ico{background:#E8F4FD}
.cblk-web .cblk-ico svg{stroke:#1971C2}
.cblk-campaign .cblk-ico{background:#FFF8E1}
.cblk-campaign .cblk-ico svg{stroke:#E67700}
.cblk-assistant .cblk-ico{background:#F0EFFF}
.cblk-assistant .cblk-ico svg{stroke:#6741D9}
/* Full background fill on hover */
.cblk-image:hover{background:#3B5BDB;border-color:#3B5BDB}
.cblk-text:hover{background:#2D6A4F;border-color:#2D6A4F}
.cblk-video:hover{background:#D9480F;border-color:#D9480F}
.cblk-web:hover{background:#1971C2;border-color:#1971C2}
.cblk-campaign:hover{background:#E67700;border-color:#E67700}
.cblk-assistant:hover{background:#5F3DC4;border-color:#5F3DC4}
/* Text + icon → white on hover */
.cblk:hover .cblk-title{color:#fff}
.cblk:hover .cblk-desc{color:rgba(255,255,255,.82)}
.cblk:hover .cblk-ico{background:rgba(255,255,255,.18)}
.cblk:hover .cblk-ico svg{stroke:#fff}

/* ── Video disabled / coming-soon state ── */
.cblk-disabled{
  opacity:.5;
  cursor:not-allowed !important;
  pointer-events:none !important;
  filter:grayscale(.3);
}
.cblk-disabled:hover{
  transform:none;
  box-shadow:0 1px 5px rgba(0,0,0,.04);
  background:var(--surface);
  border-color:var(--border);
}
.cblk-disabled:hover .cblk-title,
.cblk-disabled:hover .cblk-desc{color:unset}
.cblk-disabled:hover .cblk-ico{background:unset}
.cblk-disabled:hover .cblk-ico svg{stroke:unset}
/* Coming soon badge */
.cblk-soon{
  position:absolute;
  top:16px;right:16px;
  font-size:10px;font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:20px;
  padding:3px 9px;
}
.cblk:hover .cblk-arr svg{stroke:rgba(255,255,255,.9)}
/* Block elements */
.cblk-ico{
  width:60px;height:60px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;flex-shrink:0;pointer-events:none;
  transition:background .3s ease;
}
.cblk-ico svg{width:28px;height:28px;fill:none;stroke-width:1.55;pointer-events:none;transition:stroke .3s ease}
.cblk-body{flex:1;pointer-events:none}
.cblk-title{font-size:18px;font-weight:700;color:var(--charcoal);letter-spacing:-.25px;line-height:1.2;margin-bottom:9px;transition:color .3s ease}
.cblk-desc{font-size:13px;color:var(--muted);line-height:1.65;transition:color .3s ease}
.cblk-arr{
  position:absolute;bottom:26px;right:26px;
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s,transform .2s;
  pointer-events:none;
}
.cblk-arr svg{width:17px;height:17px;fill:none;stroke:var(--b2);stroke-width:1.8}
.cblk:hover .cblk-arr{opacity:1;transform:translateX(0)}
@media(max-width:820px){
  .create-outer{padding:40px 24px 56px}
  .create-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cblk{min-height:200px;padding:26px 22px 22px}
}
@media(max-width:520px){
  .create-grid{grid-template-columns:1fr;gap:10px}
  .create-h1{font-size:30px}
}

/* ── FLOATING BRAND ASSISTANT ─────────────────────────────── */
.fab-wrap{
  position:fixed;
  bottom:28px;right:28px;
  z-index:8000;
  display:flex;flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}
/* Chat panel */
.fab-panel{
  width:340px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 12px 48px rgba(0,0,0,.14);
  display:flex;flex-direction:column;
  overflow:hidden;
  pointer-events:all;
  transform-origin:bottom right;
  transition:transform .22s cubic-bezier(.34,1.38,.64,1),opacity .2s ease;
}
.fab-panel.hidden{
  transform:scale(.85) translateY(16px);
  opacity:0;
  pointer-events:none;
}
/* Panel header */
.fab-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  background:var(--green);
  flex-shrink:0;
}
.fab-header-left{display:flex;align-items:center;gap:9px}
.fab-header-ico{
  width:28px;height:28px;border-radius:8px;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
}
.fab-header-ico svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.8}
.fab-header-title{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.1px}
.fab-header-sub{font-size:11px;color:rgba(255,255,255,.65);margin-top:1px}
.fab-min-btn{
  width:26px;height:26px;border-radius:7px;border:none;
  background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s;
}
.fab-min-btn:hover{background:rgba(255,255,255,.25)}
.fab-min-btn svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2}
/* Messages */
.fab-msgs{
  flex:1;overflow-y:auto;
  padding:14px 14px 8px;
  display:flex;flex-direction:column;
  gap:10px;
  max-height:280px;
  min-height:160px;
}
.fab-msg-row{display:flex;gap:8px;align-items:flex-end}
.fab-msg-row.user{justify-content:flex-end}
.fab-msg-avatar{
  width:24px;height:24px;border-radius:6px;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.fab-msg-avatar svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.6}
.fab-msg-bubble{
  max-width:82%;padding:8px 12px;
  font-size:12.5px;line-height:1.55;border-radius:12px;
}
.fab-msg-row:not(.user) .fab-msg-bubble{
  background:var(--bg2);color:var(--charcoal);border-radius:4px 12px 12px 12px;
}
.fab-msg-row.user .fab-msg-bubble{
  background:var(--green);color:#fff;border-radius:12px 12px 4px 12px;
}
.fab-typing{display:flex;gap:3px;align-items:center;padding:4px 0}
.fab-typing span{width:5px;height:5px;border-radius:50%;background:var(--m2);animation:typing 1.2s infinite}
.fab-typing span:nth-child(2){animation-delay:.2s}
.fab-typing span:nth-child(3){animation-delay:.4s}
/* Input row */
.fab-input-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.fab-input{
  flex:1;background:var(--bg2);border:1px solid var(--b2);
  border-radius:10px;padding:8px 11px;font-size:12px;
  color:var(--charcoal);outline:none;
  font-family:'Geist',sans-serif;
  transition:border-color var(--t);
}
.fab-input:focus{border-color:var(--gm);background:var(--surface)}
.fab-input::placeholder{color:var(--m2)}
.fab-send{
  width:32px;height:32px;border-radius:9px;
  background:var(--green);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:background var(--t);
}
.fab-send:hover{background:var(--gm)}
.fab-send svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2}
/* Minimized bar */
.fab-mini{
  pointer-events:all;
  display:flex;align-items:center;gap:8px;
  background:var(--green);color:#fff;
  border-radius:14px;padding:10px 16px 10px 12px;
  cursor:pointer;box-shadow:0 4px 20px rgba(26,66,41,.25);
  font-size:13px;font-weight:500;
  transition:transform .18s,box-shadow .18s;
}
.fab-mini:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,66,41,.30)}
.fab-mini svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8;flex-shrink:0}
.fab-mini-dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ade80;margin-left:4px;flex-shrink:0;
}
/* FAB bubble (when panel not visible) hidden by default, mini replaces it */
/* ── CREATE WORKSPACE ─────────────────────────────────────── */
#page-create-workspace{display:none;flex-direction:column}
#page-create-workspace.active{display:flex;height:100vh}
.cws-header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 28px;height:52px;display:flex;align-items:center;gap:14px;flex-shrink:0}
.cws-back{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;transition:color var(--t)}
.cws-back:hover{color:var(--charcoal)}
.cws-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.cws-type-badge{display:flex;align-items:center;gap:6px;background:var(--bg2);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;color:var(--c2)}
.cws-type-badge svg{width:14px;height:14px;fill:none;stroke-width:1.8}

/* ── ASSISTANT page (kept, not in sidebar) ──────────────────── */
#page-aichat{display:none;flex-direction:column}
#page-aichat.active{display:flex;height:100%;overflow:hidden}
.chat-shell{display:flex;flex-direction:column;height:100%;min-height:0;max-width:780px;margin:0 auto;width:100%;padding:0 24px}
.chat-feed{flex:1;min-height:0;overflow-y:auto;padding:24px 0 16px;display:flex;flex-direction:column;gap:20px}
.chat-feed.feed-welcome{justify-content:center;overflow:hidden;padding:0 0 16px}
.chat-welcome{text-align:center;padding:0 20px 24px;max-width:480px;margin:0 auto;width:100%}
.chat-welcome-icon{width:56px;height:56px;background:var(--glt);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.chat-welcome-icon svg{width:28px;height:28px;color:var(--green)}
.chat-welcome h2{font-family:'Instrument Serif',serif;font-size:28px;color:var(--charcoal);letter-spacing:-.4px;margin-bottom:10px}
.chat-welcome p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.chat-welcome-sub{font-size:12px;color:var(--m2);margin-bottom:20px!important}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chat-sug{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:7px 16px;font-size:13px;color:var(--c2);cursor:pointer;transition:all var(--t)}
.chat-sug:hover{background:var(--bg2);border-color:var(--b2)}
/* Assistant starter prompts — full-sentence chips */
.chat-suggestions.ast-starters{flex-direction:column;align-items:stretch;gap:6px}
.chat-suggestions.ast-starters .chat-sug{border-radius:10px;text-align:left;line-height:1.5;padding:10px 16px;font-size:13px}
.chat-msg{display:flex;gap:12px;align-items:flex-start;max-width:100%}
.chat-msg.user{justify-content:flex-end}
.chat-bubble{border-radius:18px;padding:12px 16px;font-size:14px;line-height:1.6;max-width:72%}
.user-bubble{background:var(--green);color:#fff;border-radius:18px 18px 4px 18px}
.ai-bubble{background:var(--surface);border:1px solid var(--border);border-radius:4px 18px 18px 18px;max-width:80%;padding:16px 18px}
.chat-ai-avatar{width:30px;height:30px;border-radius:8px;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.chat-ai-avatar svg{width:16px;height:16px;color:#fff}
.chat-result-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--m2);margin-bottom:12px}
.chat-visual{border-radius:14px;overflow:hidden;padding:32px 24px;text-align:center;margin:4px 0;min-height:160px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.cv-brand{font-size:10px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:1.5px}
.cv-hl{font-family:'Instrument Serif',serif;font-size:22px;color:#fff;letter-spacing:-.4px;line-height:1.2}
.cv-sub{font-size:12px;color:rgba(255,255,255,.65);line-height:1.5}
.cv-cta{display:inline-block;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:7px 18px;font-size:12px;font-weight:500;margin-top:6px;align-self:center}
.chat-ig{border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px;min-height:140px;justify-content:space-between}
.cig-top{display:flex;align-items:center;gap:8px}
.cig-dot{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
.cig-name{font-size:12px;color:rgba(255,255,255,.8);font-weight:500}
.cig-hl{font-family:'Instrument Serif',serif;font-size:20px;color:#fff;letter-spacing:-.3px;line-height:1.2}
.cig-body{font-size:12px;color:rgba(255,255,255,.7);line-height:1.5}
.cig-cta{background:#fff;color:var(--green);border:none;border-radius:6px;padding:6px 14px;font-size:11px;font-weight:600;cursor:pointer;align-self:flex-start}
.chat-list{display:flex;flex-direction:column;gap:8px}
.chat-list-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.chat-list-item:last-child{border-bottom:none}
.chat-list-num{width:22px;height:22px;border-radius:50%;background:var(--glt);color:var(--gm);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.chat-list-item span:last-child{font-size:13px;color:var(--charcoal);line-height:1.55}
.chat-copy{display:flex;flex-direction:column;gap:10px}
.chat-copy-block{background:var(--bg2);border-radius:10px;padding:12px 14px}
.chat-copy-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--m2);margin-bottom:5px}
.chat-copy-text{font-size:13px;color:var(--charcoal);line-height:1.6}
.chat-actions{margin-top:12px;display:flex;gap:8px}
.chat-typing{display:flex;gap:4px;align-items:center;padding:6px 0}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--m2);animation:typing 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat-input-area{padding:20px 0 32px;flex-shrink:0}
.chat-controls{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.chat-ctrl-sel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--c2);cursor:pointer;appearance:none;outline:none;font-family:'Geist',sans-serif}
.chat-ctrl-sel:focus{border-color:var(--gm)}
.chat-input-box{display:flex;align-items:flex-end;gap:10px;background:var(--surface);border:1.5px solid var(--border);border-radius:18px;padding:12px 12px 12px 18px;box-shadow:0 2px 12px rgba(0,0,0,.05);transition:border-color var(--t),box-shadow var(--t)}
.chat-input-box:focus-within{border-color:var(--gm);box-shadow:0 4px 20px rgba(26,66,41,.1)}
.chat-input-box textarea{flex:1;background:none;border:none;outline:none;resize:none;font-size:14px;color:var(--charcoal);line-height:1.55;max-height:120px;min-height:24px;overflow-y:auto}
.chat-input-box textarea::placeholder{color:var(--m2)}
.chat-send{width:36px;height:36px;border-radius:10px;background:var(--green);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background var(--t);align-self:flex-end}
.chat-send:hover{background:var(--gm)}
.chat-send svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}


/* ═══ STUDIO ═══════════════════════════════════════════════════ */
#page-studio{padding:0}
#page-studio.active{display:block;height:100vh;overflow:hidden;position:relative}

/* ── Hub outer ── */
.sh-outer{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0 40px;text-align:center;
}
.sh-hero{margin-bottom:24px}
.sh-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(40px,5.5vw,68px);
  color:var(--charcoal);letter-spacing:-2.4px;line-height:1.0;
  margin-bottom:12px;
}
.sh-sub{font-size:16px;color:var(--muted);max-width:380px;margin:0 auto}

/* ── Hub 2×2 card grid ── */
.sh-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;max-width:920px;width:100%}
.sh-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1.5px solid var(--border);border-radius:20px;
  padding:28px 28px 56px;min-height:148px;
  display:flex;flex-direction:column;gap:6px;
  cursor:pointer;text-align:left;
  transition:transform .32s cubic-bezier(.34,1.38,.64,1),box-shadow .32s ease;
}
.sh-card::before{
  content:'';position:absolute;inset:0;border-radius:19px;
  background-size:220% 220%;opacity:0;
  transition:opacity .34s ease;
  animation:cardGradDrift 8s ease infinite alternate;
}
.sh-card:hover{transform:scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.13)}
.sh-card:hover::before{opacity:1}
.sh-card:hover .sh-card-label{color:#fff}
.sh-card:hover .sh-card-desc{color:rgba(255,255,255,.82)}
.sh-card:hover .sh-card-ico{background:rgba(255,255,255,.18)}
.sh-card:hover .sh-card-ico svg{stroke:#fff}
.sh-card:active{transform:scale(1.01)}
/* Lift content above the ::before gradient layer */
.sh-card-ico,
.sh-card-label,
.sh-card-desc,
.sh-card-arr{position:relative;z-index:1}
/* Card type gradients */
.sh-card-saved::before{background-image:linear-gradient(135deg,#3B5BDB,#748FFC,#A5B4FF)}
.sh-card-bc::before{background-image:linear-gradient(135deg,var(--green),var(--gm))}
.sh-card-check::before{background-image:linear-gradient(135deg,#D9480F,#F76707,#FF9A56)}
.sh-card-camp::before{background-image:linear-gradient(135deg,#5F3DC4,#845EF7,#B197FC)}
/* Card icons */
.sh-card-ico{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .28s ease;
}
.sh-card-ico svg{width:24px;height:24px;transition:stroke .28s ease}
.sh-card-saved .sh-card-ico{background:#EDF2FF}
.sh-card-saved .sh-card-ico svg{stroke:#3B5BDB}
.sh-card-bc .sh-card-ico{background:#F3FBF0}
.sh-card-bc .sh-card-ico svg{stroke:var(--green)}
.sh-card-check .sh-card-ico{background:#FFF4E6}
.sh-card-check .sh-card-ico svg{stroke:#E8590C}
.sh-card-camp .sh-card-ico{background:#F0EFFF}
.sh-card-camp .sh-card-ico svg{stroke:#6741D9}
.sh-card-label{font-size:17px;font-weight:700;color:var(--charcoal);transition:color .28s ease}
.sh-card-desc{font-size:13px;color:var(--muted);line-height:1.6;transition:color .28s ease}
.sh-card-arr{
  position:absolute;bottom:22px;right:22px;
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s,transform .2s;
}
.sh-card-arr svg{width:17px;height:17px;stroke:rgba(255,255,255,.85)}
.sh-card:hover .sh-card-arr{opacity:1;transform:translateX(0)}

/* ── Panel view ── */
.sh-panel-view{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:var(--bg);
}
.sh-panel-view.hidden{display:none}
.sh-panel-header{
  display:flex;align-items:center;gap:16px;
  padding:14px 24px;
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sh-back-btn{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;color:var(--muted);
  background:none;border:none;cursor:pointer;padding:6px 10px;
  border-radius:8px;transition:color .2s,background .2s;
}
.sh-back-btn:hover{color:var(--charcoal);background:var(--bg2)}
.sh-back-btn svg{width:14px;height:14px;stroke:currentColor}
.sh-panel-title{font-size:15px;font-weight:600;color:var(--charcoal)}

/* Panel content */
.studio-panel{display:none;flex:1;overflow-y:auto}
.studio-panel.active{display:flex;flex-direction:column}

/* ── Saved ── */
.saved-panel{padding:24px}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.acard{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:all var(--t);position:relative}
.acard:hover{box-shadow:var(--shm)}
.acard:hover .aov{opacity:1}
.ath{height:90px;display:flex;align-items:center;justify-content:center;background:var(--bg2)}
.ameta{padding:9px 11px}
.a-name{font-size:11px;font-weight:500;color:var(--charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-info{font-size:10px;color:var(--muted);margin-top:2px}
.aov{position:absolute;inset:0;background:rgba(0,0,0,.58);display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;transition:opacity var(--t);border-radius:var(--rl)}
.aov-btn{width:30px;height:30px;border-radius:7px;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aov-btn:hover{background:rgba(255,255,255,.26)}
.aov-btn svg{width:13px;height:13px}

/* ── Brand Check ── */
.check-outer{padding:24px;display:flex;flex-direction:column;gap:16px}
.up-zone{border:2px dashed var(--b2);border-radius:var(--rx);padding:56px 24px;text-align:center;cursor:pointer;transition:all var(--t);background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:14px}
.up-zone:hover,.up-zone.drag-over{border-color:var(--gm);background:var(--gpale)}
.up-zone svg{width:42px;height:42px;color:var(--m2)}
.up-zone h3{font-size:16px;font-weight:600;color:var(--charcoal);letter-spacing:-.2px}
.up-zone p{font-size:13px;color:var(--muted)}
/* OR divider */
.ck-or-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.6px}
.ck-or-divider::before,.ck-or-divider::after{content:'';flex:1;height:1px;background:var(--border)}
/* Manual check button — large */
.ck-manual-btn{width:100%;padding:18px 20px;font-size:14px;font-weight:500;border-radius:var(--rx);border:1.5px solid var(--border);background:var(--surface);color:var(--charcoal);cursor:pointer;transition:border-color var(--t),background var(--t),color var(--t);display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:-.1px}
.ck-manual-btn svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor}
.ck-manual-btn:hover{border-color:var(--gm);background:var(--gpale);color:var(--gm)}
.ck-preview-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:16px;display:flex;align-items:center;gap:14px}
.ck-preview-thumb{width:72px;height:72px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--bg3);position:relative}
.ck-preview-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ck-preview-ph{width:100%;height:100%;display:none;align-items:center;justify-content:center;position:absolute;inset:0}
.ck-preview-meta{flex:1}
.ck-preview-name{font-size:13px;font-weight:500;color:var(--charcoal);margin-bottom:3px}
.ck-preview-sub{font-size:11px;color:var(--muted)}
.ck-actions-row{display:flex;gap:8px;align-items:center}
.check-result-wrap{display:flex;flex-direction:column;gap:0}
.scd{background:var(--surface);border:1px solid var(--border);border-radius:var(--rx);padding:24px}
.big-s{font-family:'Instrument Serif',serif;font-size:64px;color:var(--charcoal);line-height:1;letter-spacing:-2px}
.big-s span{font-size:28px;color:var(--m2)}
.s-desc{font-size:12px;color:var(--muted);margin-top:4px;margin-bottom:16px}
.sbars{display:flex;flex-direction:column;gap:9px}
.sbar-row{display:flex;align-items:center;gap:10px}
.sbar-name{font-size:11px;color:var(--charcoal);width:120px;flex-shrink:0}
.sbar-track{flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.sbar-fill{height:100%;border-radius:2px;transition:width .6s ease}
.sbar-val{font-size:11px;font-weight:600;color:var(--c2);width:30px;text-align:right;flex-shrink:0}
.ck-items{display:flex;flex-direction:column}
.ck-row{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--border)}
.ck-row:last-child{border-bottom:none}
.ck-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ck-dot.p{background:#22C55E}.ck-dot.w{background:#F59E0B}.ck-dot.f{background:#EF4444}
.ck-txt p{font-size:12px;color:var(--charcoal);line-height:1.45}
.ck-txt small{font-size:11px;color:var(--muted)}

/* ── Campaigns ── */
.camp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:16px;cursor:pointer;transition:all var(--t);margin-bottom:10px}
.camp-card:hover{transform:translateY(-2px);box-shadow:var(--shm);border-color:var(--b2)}
.camp-name{font-size:14px;font-weight:600;color:var(--charcoal);margin-bottom:3px}
.camp-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.camp-pb{height:3px;background:var(--bg3);border-radius:2px;overflow:hidden}
.camp-pf{height:100%;background:var(--green);border-radius:2px;transition:width .4s ease}
/* Campaign detail */
.camp-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.camp-detail-card{background:var(--bg2);border-radius:var(--r);padding:12px 14px}
.camp-detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--m2);margin-bottom:4px}
.camp-detail-val{font-size:13px;color:var(--charcoal);line-height:1.5}
.camp-asset-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.camp-asset-thumb{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;cursor:pointer;transition:transform var(--t)}
.camp-asset-thumb:hover{transform:scale(1.08)}
.camp-preview-grid{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.camp-preview-item{display:flex;flex-direction:column;align-items:center}
.camp-preview-frame:hover{opacity:.85}
.camp-detail-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border);margin-top:16px}

/* Asset picker in modal */
.nc-asset-pick{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r);border:1.5px solid var(--border);cursor:pointer;transition:all var(--t);margin-bottom:6px}
.nc-asset-pick:hover{border-color:var(--gm);background:var(--gpale)}
.nc-asset-pick.selected{border-color:var(--gm);background:var(--gpale)}

/* (studio right info panel removed — replaced by hub layout) */


/* ═══ BRAND CORE ═══════════════════════════════════════════════ */
#page-brandcore{padding:28px 32px;max-width:1000px}
.ph{margin-bottom:28px}
.ph-ttl{font-family:'Instrument Serif',serif;font-size:24px;color:var(--charcoal);letter-spacing:-.3px;margin-bottom:3px}
.ph-sub{font-size:13px;color:var(--muted);line-height:1.5}
.bcs{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:20px;margin-bottom:16px}
.bcs-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.bcs-ttl{font-size:14px;font-weight:600;color:var(--charcoal)}
.sw-list{display:flex;gap:10px;flex-wrap:wrap}
.sw-card{cursor:pointer;transition:transform var(--t);display:flex;flex-direction:column;align-items:center;gap:5px}
.sw-card:hover{transform:translateY(-2px)}
.sw-blk{width:52px;height:44px;border-radius:9px;border:1px solid rgba(0,0,0,.06)}
.sw-name{font-size:10px;font-weight:500;color:var(--c2)}.sw-hex{font-size:10px;color:var(--m2)}
.frow{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.frow:last-child{border-bottom:none}
.f-ptxt{flex:1}.f-role{font-size:11px;font-weight:600;color:var(--m2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px}
.f-demo{font-size:22px;color:var(--charcoal);line-height:1}.f-meta{font-size:11px;color:var(--muted);margin-top:3px}
.tag{display:inline-flex;align-items:center;gap:4px;background:var(--glt);border:1px solid rgba(26,66,41,.15);color:var(--gm);font-size:12px;padding:4px 10px;border-radius:20px;margin:3px}
.tag-r{background:var(--err-bg);border-color:#FECACA;color:var(--err-c)}
/* Legacy logo placeholders — kept for compatibility */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:20px;text-align:center}
.lcard-dk{background:var(--charcoal);border-color:#333}
.l-prev{width:52px;height:52px;border-radius:12px;background:var(--green);display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:18px;color:#fff;margin:0 auto 10px}
.l-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--m2)}
.lcard-dk .l-lbl{color:rgba(255,255,255,.4)}

/* ── Logo management cards ──────────────────────────────────── */
.logo-mgmt-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:4px;
}
.logo-mgmt-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rx);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.lmc-preview{
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:14px;
  overflow:hidden;
}
.lmc-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:4px;
  display:block;
}
.lmc-empty{
  aspect-ratio:1 / 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--muted);
  cursor:pointer;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  transition:background var(--t),color var(--t);
}
.lmc-empty:hover{background:var(--glt);color:var(--gm)}
.lmc-empty span{font-size:11.5px;font-weight:500}
.lmc-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 11px;
  gap:6px;
}
.lmc-lbl{
  font-size:11.5px;
  font-weight:600;
  color:var(--charcoal);
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lmc-actions{display:flex;gap:5px;flex-shrink:0;align-items:center}
.lmc-remove-btn{
  width:26px;height:26px;padding:0;
  border-radius:50%;
  background:none;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:10px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
  flex-shrink:0;
}
.lmc-remove-btn:hover{
  background:var(--err-bg,#FEF2F2);
  border-color:#FECACA;
  color:var(--err-c,#DC2626);
}

/* AI logo result */
.logo-ai-result{padding:16px 0 0}
.logo-ai-img{
  width:100%;
  border-radius:var(--rx);
  border:1px solid var(--border);
  display:block;
  margin-bottom:14px;
  background:var(--bg2);
}
.logo-ai-save-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:12px 14px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--rx);
}
.logo-ai-save-lbl{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin-right:2px;
}

/* ═══ IDEAS (was: INSPIRATION) ══════════════════════════════════ */
#page-inspiration{padding:0}
#page-inspiration.active{display:block;height:100vh;overflow:hidden;position:relative}

/* ── Hub outer ── */
.id-outer{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0 40px;text-align:center;
}
.id-hero{margin-bottom:24px}
.id-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(40px,5.5vw,68px);
  color:var(--charcoal);letter-spacing:-2.4px;line-height:1.0;
  margin-bottom:12px;
}
.id-sub{font-size:16px;color:var(--muted);max-width:400px;margin:0 auto}

/* ── Hub 2×2 card grid ── */
.id-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;max-width:920px;width:100%}
.id-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1.5px solid var(--border);border-radius:20px;
  padding:28px 28px 56px;min-height:148px;
  display:flex;flex-direction:column;gap:6px;
  cursor:pointer;text-align:left;
  transition:transform .32s cubic-bezier(.34,1.38,.64,1),box-shadow .32s ease;
}
.id-card::before{
  content:'';position:absolute;inset:0;border-radius:19px;
  background-size:220% 220%;opacity:0;
  transition:opacity .34s ease;
  animation:cardGradDrift 8s ease infinite alternate;
}
.id-card:hover{transform:scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.13)}
.id-card:hover::before{opacity:1}
.id-card:hover .id-card-label{color:#fff}
.id-card:hover .id-card-desc{color:rgba(255,255,255,.82)}
.id-card:hover .id-card-ico{background:rgba(255,255,255,.18)}
.id-card:hover .id-card-ico svg{stroke:#fff}
.id-card:active{transform:scale(1.01)}
/* Content above gradient layer */
.id-card-ico,
.id-card-label,
.id-card-desc,
.id-card-arr{position:relative;z-index:1}
/* Type gradients */
.id-card-content::before{background-image:linear-gradient(135deg,#1E40AF,#3B82F6,#93C5FD)}
.id-card-angles::before{background-image:linear-gradient(135deg,#065F46,#059669,#6EE7B7)}
.id-card-visual::before{background-image:linear-gradient(135deg,#92400E,#D97706,#FCD34D)}
.id-card-campaign::before{background-image:linear-gradient(135deg,#4C1D95,#7C3AED,#C4B5FD)}
/* Icon */
.id-card-ico{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .28s ease;
}
.id-card-ico svg{width:24px;height:24px;fill:none;stroke-width:1.5;transition:stroke .28s ease}
.id-card-content .id-card-ico{background:#EFF6FF}
.id-card-content .id-card-ico svg{stroke:#2563EB}
.id-card-angles .id-card-ico{background:#ECFDF5}
.id-card-angles .id-card-ico svg{stroke:#059669}
.id-card-visual .id-card-ico{background:#FFFBEB}
.id-card-visual .id-card-ico svg{stroke:#D97706}
.id-card-campaign .id-card-ico{background:#F5F3FF}
.id-card-campaign .id-card-ico svg{stroke:#7C3AED}
.id-card-label{font-size:17px;font-weight:700;color:var(--charcoal);transition:color .28s ease}
.id-card-desc{font-size:13px;color:var(--muted);line-height:1.6;transition:color .28s ease}
.id-card-arr{
  position:absolute;bottom:22px;right:22px;
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s,transform .2s;
}
.id-card-arr svg{width:17px;height:17px;fill:none;stroke:rgba(255,255,255,.85)}
.id-card:hover .id-card-arr{opacity:1;transform:translateX(0)}

/* ── Panel view ── */
.id-panel-view{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:var(--bg);
}
.id-panel-view.hidden{display:none}
.id-panel-header{
  display:flex;align-items:center;gap:16px;
  padding:14px 24px;
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.id-back-btn{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;color:var(--muted);
  background:none;border:none;cursor:pointer;padding:6px 10px;
  border-radius:8px;transition:color .2s,background .2s;
}
.id-back-btn:hover{color:var(--charcoal);background:var(--bg2)}
.id-back-btn svg{width:14px;height:14px;stroke:currentColor}
.id-panel-title{font-size:15px;font-weight:600;color:var(--charcoal)}
.id-panel-content{flex:1;overflow-y:auto;padding:32px 32px 48px}

/* ── Idea cards inside panel ── */
.id-ideas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
  max-width:960px;
  margin:0 auto;
}
.id-idea-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:16px;
  padding:20px 22px 22px;
  display:flex;flex-direction:column;gap:9px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.id-idea-card:hover{
  border-color:var(--b2);
  box-shadow:0 4px 20px rgba(0,0,0,.07);
}
.id-idea-label{font-size:15px;font-weight:700;color:var(--charcoal);letter-spacing:-.2px;line-height:1.25}
.id-idea-desc{font-size:12.5px;color:var(--muted);line-height:1.65;flex:1}
.id-idea-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.id-cta-primary{
  background:var(--green);color:#fff;
  border:none;border-radius:20px;
  padding:7px 16px;font-size:12px;font-weight:600;
  cursor:pointer;transition:background .2s,transform .15s;
  pointer-events:all !important;
  white-space:nowrap;
}
.id-cta-primary:hover{background:var(--green);transform:scale(1.03)}
.id-cta-secondary{
  background:var(--bg2);color:var(--charcoal);
  border:1.5px solid var(--border);border-radius:20px;
  padding:7px 16px;font-size:12px;font-weight:500;
  cursor:pointer;transition:background .2s,transform .15s;
  pointer-events:all !important;
  white-space:nowrap;
}
.id-cta-secondary:hover{background:var(--bg3);transform:scale(1.03)}

/* Responsive */
@media(max-width:640px){
  .id-outer{padding:0 20px}
  .id-cards{grid-template-columns:1fr;gap:10px}
  .id-card{padding:22px 22px 46px;min-height:0}
  .id-ideas-grid{grid-template-columns:1fr}
  .id-panel-content{padding:20px}
}


/* ═══ BETA BANNER ═══════════════════════════════════════════════ */
.beta-banner{
  position:fixed;
  top:0;left:0;right:0;
  z-index:8000;
  background:var(--green-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:10px 48px 10px 20px;
  transition:opacity .26s ease, transform .26s ease;
}
.beta-banner-text{
  font-size:12px;
  color:rgba(255,255,255,.75);
  text-align:center;
  line-height:1.5;
}
.beta-banner-link{
  color:rgba(255,255,255,.9);
  text-decoration:underline;
  text-underline-offset:2px;
}
.beta-banner-link:hover{color:#fff}
.beta-banner-close{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:rgba(255,255,255,.5);
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color .14s ease;
}
.beta-banner-close:hover{color:rgba(255,255,255,.9)}
/* When banner is visible: push app down AND shrink its height so it stays
   within the viewport. Without height:calc(100vh-37px), the app extends
   37px past the viewport bottom, clipping the sidebar's bottom section. */
.app{margin-top:37px;height:calc(100vh - 37px)}
body.no-banner .app{margin-top:0;height:100vh}

/* ═══ SIDEBAR USAGE INDICATOR ══════════════════════════════════ */
.sb-usage-wrap{padding:4px 8px 2px}
.sb-plan-row{margin-bottom:5px}
.sb-plan-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:20px;padding:2px 9px}
.sb-plan-free    {background:var(--bg2);color:var(--muted)}
.sb-plan-starter {background:var(--glt);color:var(--gm)}
.sb-plan-premium {background:#EEF5FF;color:#2563EB}
.sb-plan-business{background:#FFF0E6;color:#C45511}
.usage-badge{display:inline-block;font-size:11px;font-weight:500;border-radius:20px;padding:3px 10px;letter-spacing:.01em}
.usage-badge-ok   {background:var(--glt);color:var(--gm)}
.usage-badge-low  {background:var(--warn-bg);color:var(--warn-c)}
.usage-badge-empty{background:var(--err-bg);color:var(--err-c)}

/* ═══ USAGE LIMIT IN-FEED MESSAGE ══════════════════════════════ */
.usage-limit-msg{margin:8px 0}
.usage-limit-inner{
  display:flex;align-items:center;gap:14px;
  background:var(--warn-bg);
  border:1px solid rgba(146,64,14,.18);
  border-radius:var(--rl);
  padding:16px 18px;
}
.usage-limit-icon{width:26px;height:26px;flex-shrink:0;color:var(--warn-c)}
.usage-limit-icon svg{width:26px;height:26px}
.usage-limit-text{flex:1;min-width:0}
.usage-limit-title{font-size:13px;font-weight:600;color:var(--warn-c);margin-bottom:3px}
.usage-limit-sub{font-size:12px;color:var(--charcoal);line-height:1.55}
.usage-limit-cta{flex-shrink:0}

/* ═══ TEAM PAGE ═════════════════════════════════════════════════ */
#page-team{padding:28px 32px;max-width:960px}

/* Card grid */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
  margin-top:20px;
}
.team-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rx);
  padding:20px 18px 16px;
  display:flex;
  flex-direction:column;
  min-height:168px;
  transition:box-shadow var(--t);
}
.team-card:not(.team-card-invite):hover{box-shadow:0 2px 12px rgba(0,0,0,.07)}
.tc-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:14px;
}
.tc-avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--glt);color:var(--gm);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;flex-shrink:0;letter-spacing:0;
}
.tc-name{
  font-size:13.5px;font-weight:600;color:var(--charcoal);
  margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tc-email{
  font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:14px;flex:1;
}
.tc-footer{margin-top:auto}

/* Invite card */
.team-card-invite{
  border:1.5px dashed var(--border);
  background:var(--bg2);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:border-color var(--t),background var(--t);
}
.team-card-invite:hover{
  border-color:var(--gm);
  background:var(--glt);
}
.team-card-invite:focus-visible{
  outline:2px solid var(--gm);
  outline-offset:2px;
}
.tc-invite-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);margin:0 auto 10px;
  transition:all var(--t);
}
.team-card-invite:hover .tc-invite-icon{
  border-color:var(--gm);color:var(--gm);background:var(--glt);
}
.tc-invite-label{font-size:13.5px;font-weight:600;color:var(--charcoal);margin-bottom:4px}
.tc-invite-sub{font-size:11.5px;color:var(--muted)}

/* Role badges */
.team-role-badge{font-size:11px;font-weight:500;border-radius:20px;padding:3px 11px}
.team-role-member{background:var(--bg2);border:1px solid var(--border);color:var(--muted)}
.team-role-editor{background:#EEF5FF;border:1px solid #BFDBFE;color:#2563EB}
.team-role-viewer{background:var(--bg2);border:1px solid var(--border);color:var(--muted)}
.team-role-admin {background:var(--glt);border:1px solid rgba(26,66,41,.15);color:var(--gm)}

/* Remove button inside card */
.team-remove-btn{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:none;border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all var(--t);
}
.team-remove-btn:hover{background:var(--err-bg,#FEF2F2);border-color:#FECACA;color:var(--err-c,#DC2626)}

/* ═══ GUIDED FLOW SYSTEM ════════════════════════════════════════ */

.flow-pg{
  padding:40px 28px 80px;
  max-width:640px;
  width:100%;
  margin:0 auto;
}
/* Center the builder page's scroll area */
#page-builder.active{
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-y:auto;
}

/* Topbar */
.flow-topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:32px;
}
.flow-back-btn{
  background:none;border:1px solid var(--border);border-radius:var(--rx);
  padding:7px 14px;font-size:13px;color:var(--charcoal);
  cursor:pointer;transition:all var(--t);flex-shrink:0;
}
.flow-back-btn:hover{border-color:var(--gm);color:var(--gm);background:var(--glt)}
.flow-brand-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--glt);border:1px solid rgba(26,66,41,.15);
  border-radius:20px;padding:5px 13px;
  font-size:12.5px;font-weight:600;color:var(--gm);
}
.flow-brand-pill::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--gm);flex-shrink:0;
}

/* AI Guide bubble */
.flow-guide{
  display:flex;align-items:flex-start;gap:14px;
  margin-bottom:28px;
  padding:20px 22px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--rx);
}
.flow-guide-avatar{
  width:40px;height:40px;border-radius:50%;
  background:#f4f5f3;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
}
.flow-guide-logo{
  width:26px;height:26px;object-fit:contain;display:block;
}
.flow-guide-content{flex:1;min-width:0}
.flow-guide-label{
  font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--gm);margin-bottom:5px;
}
.flow-guide-message{
  font-size:15.5px;font-weight:500;color:var(--charcoal);
  line-height:1.45;transition:opacity .15s;
}

/* Progress dots */
.flow-progress{
  display:flex;gap:6px;margin-bottom:28px;
  align-items:center;flex-wrap:wrap;
}
.flow-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--border);transition:all .3s;
}
.flow-dot.done{background:var(--gm);opacity:.4}
.flow-dot.active{background:var(--gm);width:22px;border-radius:4px}

/* History strip */
.flow-history{display:flex;flex-direction:column;gap:0;margin-bottom:4px}
.flow-hist-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:8px;
  cursor:pointer;transition:background .15s;
}
.flow-hist-item:hover{background:var(--bg2)}
.flow-hist-q{
  font-size:12px;color:var(--muted);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.flow-hist-a{
  font-size:12px;font-weight:600;color:var(--charcoal);
  background:var(--bg2);border-radius:20px;padding:3px 10px;
  white-space:nowrap;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;flex-shrink:0;
}

/* Step area */
.flow-step-wrap{margin-bottom:16px}
.flow-step{animation:flowStepIn .22s ease both}
@keyframes flowStepIn{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

/* Flow option buttons (tall cards) */
.flow-options{display:flex;flex-direction:column;gap:9px}
.flow-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.flow-option{
  display:flex;align-items:center;gap:12px;
  padding:14px 17px;
  border:1.5px solid var(--border);border-radius:var(--rx);
  background:var(--surface);cursor:pointer;
  transition:border-color .16s,background .16s,color .16s;
  font-size:14px;font-weight:500;color:var(--charcoal);
  text-align:left;width:100%;
}
.flow-option:hover{border-color:var(--gm);background:var(--glt);color:var(--gm)}
.flow-option.active{border-color:var(--gm);background:var(--gm);color:#fff}
.flow-option-check{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid currentColor;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;opacity:.45;transition:opacity .16s;
}
.flow-option.active .flow-option-check{
  opacity:1;background:rgba(255,255,255,.22);border-color:transparent;
}
.flow-option-label{flex:1}

/* Text/textarea inputs in flow */
.flow-input-wrap{margin-top:2px}
.flow-helper-text{
  font-size:12px;color:var(--muted);line-height:1.55;
  margin-bottom:8px;font-style:italic;
}
.flow-inp{
  width:100%;padding:13px 16px;
  border-radius:var(--rx);border:1.5px solid var(--border);
  background:var(--surface);font-size:14px;color:var(--charcoal);
  transition:border-color .18s;outline:none;
  font-family:inherit;box-sizing:border-box;
}
.flow-inp:focus{border-color:var(--gm)}
.flow-inp::placeholder{color:var(--muted)}
textarea.flow-inp{min-height:90px;resize:vertical}

/* Flow nav */
.flow-nav{display:flex;align-items:center;gap:10px;margin-top:14px}
.flow-nav-back{
  background:none;border:1px solid var(--border);border-radius:var(--rx);
  padding:10px 18px;font-size:13px;color:var(--muted);
  cursor:pointer;transition:all .18s;flex-shrink:0;
}
.flow-nav-back:hover{border-color:var(--charcoal);color:var(--charcoal)}
.flow-nav-continue{flex:1;padding:11px;font-size:14px;font-weight:600}

/* Generating state */
.flow-generating{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;padding:56px 20px;text-align:center;
}
.flow-generating-icon{
  width:56px;height:56px;background:var(--gm);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  animation:flowPulse 1.9s ease-in-out infinite;
}
@keyframes flowPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(26,66,41,.3)}
  50%{transform:scale(1.07);box-shadow:0 0 0 14px rgba(26,66,41,0)}
}
.flow-generating-text{font-size:15px;font-weight:600;color:var(--charcoal)}
.flow-generating-sub{font-size:13px;color:var(--muted);margin-top:-4px}

/* ── BrandCore review panel (image flow step 3) ─────────────── */
.flow-brandcore-panel{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--rx);
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.flow-brandcore-empty{
  align-items:center;
  text-align:center;
  padding:32px 24px;
  border-style:dashed;
  opacity:.75;
}
.fbp-empty-icon{color:var(--muted);margin-bottom:8px;display:flex;justify-content:center}
.fbp-empty-title{font-size:13.5px;font-weight:600;color:var(--charcoal);margin-bottom:6px}
.fbp-empty-sub{font-size:12.5px;color:var(--muted);line-height:1.65;max-width:280px}
.fbp-header{display:flex;align-items:center;gap:12px}
.fbp-icon{
  width:32px;height:32px;
  background:var(--glt);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--gm);
}
.fbp-brand-name{font-size:14px;font-weight:700;color:var(--charcoal);letter-spacing:-.2px}
.fbp-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.fbp-rows{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border);padding-top:14px}
.fbp-row{display:flex;align-items:center;gap:14px}
.fbp-row-label{
  font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);
  width:72px;flex-shrink:0;
}
.fbp-row-value{font-size:13px;color:var(--charcoal);line-height:1.4}
.fbp-colors{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fbp-swatch{
  width:22px;height:22px;border-radius:6px;
  border:1px solid rgba(0,0,0,.09);
  flex-shrink:0;cursor:default;
}
.fbp-note{
  font-size:11.5px;color:var(--muted);line-height:1.65;
  border-top:1px solid var(--border);padding-top:12px;
}

/* ── Upload step ───────────────────────────────────────── */
.flow-upload-step{display:flex;flex-direction:column;gap:12px}
.flow-upload-types{display:flex;flex-direction:column;gap:8px}
.flow-upload-type-btn{
  display:flex;flex-direction:column;gap:2px;
  width:100%;text-align:left;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--rx);padding:11px 14px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.flow-upload-type-btn:hover{border-color:var(--gm);background:var(--glt)}
.flow-upload-type-btn.active{border-color:var(--gm);background:var(--glt)}
.fut-label{font-size:13.5px;font-weight:600;color:var(--charcoal)}
.fut-hint{font-size:12px;color:var(--muted);margin-top:1px}
.flow-upload-area{
  border:1.5px dashed var(--border);border-radius:var(--rx);
  padding:28px 20px;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:border-color .15s,background .15s;
}
.flow-upload-area:hover{border-color:var(--gm);background:var(--glt)}
.fua-label{font-size:13.5px;font-weight:600;color:var(--charcoal)}
.fua-hint{font-size:12px;color:var(--muted)}
.flow-upload-done{
  display:flex;align-items:center;gap:10px;
  background:var(--glt);border:1.5px solid var(--gm);
  border-radius:var(--rx);padding:10px 14px;
}
.fud-check{
  width:24px;height:24px;border-radius:50%;background:var(--gm);
  color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fud-info{flex:1;font-size:13px;font-weight:600;color:var(--charcoal)}
.fud-remove{
  font-size:12px;color:var(--muted);background:none;border:none;
  cursor:pointer;padding:2px 4px;text-decoration:underline;
}
.fud-remove:hover{color:var(--charcoal)}

/* Keep legacy builder classes used by result/ad/campaign rendering */
.builder-section{margin-bottom:22px}
.builder-lbl{
  font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.builder-opt{font-weight:400;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--muted);opacity:.7}
.builder-req{font-weight:500;text-transform:none;letter-spacing:0;font-size:11px;color:var(--err-c,#DC2626);opacity:.85}
.b-pills{display:flex;flex-wrap:wrap;gap:8px}
.b-pill{
  padding:7px 16px;border-radius:20px;font-size:13px;font-weight:500;
  border:1.5px solid var(--border);background:var(--surface);
  color:var(--charcoal);cursor:pointer;transition:all var(--t);user-select:none;
}
.b-pill:hover{border-color:var(--gm);color:var(--gm);background:var(--glt)}
.b-pill.active{border-color:var(--gm);background:var(--gm);color:#fff}

.builder-result-wrap{
  margin-top:28px;
  border:1px solid var(--border);border-radius:var(--rx);
  overflow:hidden;
  background:var(--surface);
}
.builder-result-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.builder-result-label{
  font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);
}
.builder-result-actions{display:flex;gap:8px}
.builder-result-body{padding:20px}

/* Image result */
.builder-result-img{
  width:100%;border-radius:calc(var(--rx) - 2px);
  display:block;
}

/* Text result */
.builder-result-text{
  font-size:14.5px;line-height:1.7;color:var(--charcoal);
  white-space:pre-wrap;
}

/* ── Image composite (visual + text overlay) ─────────────────── */
.img-composite{
  display:flex;
  flex-direction:column;
  border-radius:calc(var(--rx) - 2px);
  overflow:hidden;
}

/* Format frames — correct aspect ratios */
.img-frame{
  position:relative;
  overflow:hidden;
  width:100%;
  background:var(--bg2);
}
.img-frame-1x1  { aspect-ratio:1/1; }
.img-frame-4x5  { aspect-ratio:4/5; }
.img-frame-9x16 { aspect-ratio:9/16; max-width:340px; margin:0 auto; }
.img-frame-16x9 { aspect-ratio:16/9; }

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

/* Text overlay layer */
.img-text-layer{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px 24px;
  transition:opacity .2s;
}
.img-text-inner{
  display:flex;
  flex-direction:column;
  gap:5px;
}

/* ── Light text (default) ── */
.img-txt-light .img-text-layer{
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 55%,transparent 100%);
}
.img-txt-light .itl-headline,
.img-txt-light .itl-subtext,
.img-txt-light .itl-cta { color:#fff; }

/* ── Dark text ── */
.img-txt-dark .img-text-layer{
  background:linear-gradient(to top,rgba(255,255,255,.62) 0%,rgba(255,255,255,.18) 55%,transparent 100%);
}
.img-txt-dark .itl-headline,
.img-txt-dark .itl-subtext,
.img-txt-dark .itl-cta { color:#18181A; }

/* ── Bold text style ── */
.img-txt-bold .itl-headline{
  font-family:'Geist',sans-serif;
  font-size:clamp(18px,3.8vw,32px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  text-transform:uppercase;
}
.img-txt-bold .itl-subtext{
  font-size:clamp(11px,1.8vw,14px);
  font-weight:500;
  opacity:.9;
  line-height:1.4;
}
.img-txt-bold .itl-cta{
  font-size:clamp(10px,1.5vw,12px);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:6px;
}

/* ── Minimal text style ── */
.img-txt-minimal .itl-headline{
  font-family:'Geist',sans-serif;
  font-size:clamp(16px,3vw,26px);
  font-weight:300;
  letter-spacing:.05em;
  line-height:1.25;
}
.img-txt-minimal .itl-subtext{
  font-size:clamp(10px,1.5vw,12px);
  font-weight:400;
  opacity:.72;
  letter-spacing:.04em;
}
.img-txt-minimal .itl-cta{
  font-size:clamp(10px,1.4vw,11px);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:6px;
}

/* ── Editorial text style ── */
.img-txt-editorial .itl-headline{
  font-family:'Instrument Serif',serif;
  font-size:clamp(18px,4vw,34px);
  font-weight:400;
  font-style:italic;
  line-height:1.15;
  letter-spacing:-.005em;
}
.img-txt-editorial .itl-subtext{
  font-family:'Geist',sans-serif;
  font-size:clamp(10px,1.5vw,12px);
  font-weight:400;
  letter-spacing:.07em;
  text-transform:uppercase;
  opacity:.78;
}
.img-txt-editorial .itl-cta{
  font-family:'Geist',sans-serif;
  font-size:clamp(10px,1.4vw,12px);
  font-weight:500;
  letter-spacing:.05em;
  margin-top:6px;
}

/* ── Clean text style ── */
.img-txt-clean .itl-headline{
  font-family:'Geist',sans-serif;
  font-size:clamp(16px,3.2vw,28px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.2;
}
.img-txt-clean .itl-subtext{
  font-size:clamp(11px,1.6vw,13px);
  font-weight:400;
  opacity:.84;
  line-height:1.5;
}
.img-txt-clean .itl-cta{
  font-size:clamp(10px,1.5vw,12px);
  font-weight:600;
  letter-spacing:.03em;
  margin-top:6px;
}

/* ── Premium text style ── */
.img-txt-premium .itl-headline{
  font-family:'Instrument Serif',serif;
  font-size:clamp(18px,3.8vw,32px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.2;
}
.img-txt-premium .itl-subtext{
  font-family:'Geist',sans-serif;
  font-size:clamp(10px,1.5vw,11px);
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.78;
}
.img-txt-premium .itl-cta{
  font-family:'Geist',sans-serif;
  font-size:clamp(10px,1.4vw,11px);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:6px;
}

/* Composite control bar */
.img-composite-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 14px;
  border-top:1px solid var(--border);
  background:var(--bg2);
  flex-wrap:wrap;
  gap:8px;
}
.img-toggle-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--charcoal);
  cursor:pointer;
  user-select:none;
}
.img-toggle-label input{cursor:pointer;accent-color:var(--gm)}
.img-color-row{display:flex;align-items:center;gap:7px}
.img-bar-lbl{font-size:12px;color:var(--muted)}
.icb{
  padding:4px 13px;
  border-radius:20px;
  font-size:12px;
  font-weight:500;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--charcoal);
  cursor:pointer;
  transition:all var(--t);
}
.icb.active{border-color:var(--gm);background:var(--gm);color:#fff}
.icb:hover:not(.active){border-color:var(--gm);color:var(--gm)}

/* Required label in builder */
.builder-req{
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  font-size:11px;
  color:var(--err-c,#DC2626);
  opacity:.85;
}

/* Ad result */
.builder-ad-result{display:flex;flex-direction:column;gap:16px}
.builder-ad-result img{
  width:100%;border-radius:calc(var(--rx) - 2px);
  display:block;margin-bottom:4px;
}
.bar-title{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gm);margin-bottom:4px}
.bar-headline{font-size:18px;font-weight:700;color:var(--charcoal);line-height:1.3}
.bar-body{font-size:14px;color:var(--charcoal);line-height:1.65;opacity:.85}
.bar-cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.bar-cta{
  padding:8px 20px;border-radius:20px;font-size:13px;font-weight:600;
  background:var(--gm);color:#fff;display:inline-block;
}

/* Campaign variation cards */
.camp-variations{display:flex;flex-direction:column;gap:20px}
.camp-var-card{border:1px solid var(--border);border-radius:var(--rx);overflow:hidden;background:var(--surface)}
.cvcard-img-wrap{width:100%}
.cvcard-img{width:100%;display:block}
.cvcard-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.cvcard-num{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gm)}
.cvcard-title{font-size:13px;font-weight:700;color:var(--charcoal)}
.cvcard-headline{font-size:16px;font-weight:700;color:var(--charcoal);line-height:1.3}
.cvcard-text{font-size:13.5px;color:var(--charcoal);line-height:1.65;opacity:.85}
.cvcard-cta-row{display:flex;margin-top:4px}
.cvcard-cta{padding:7px 18px;border-radius:20px;font-size:13px;font-weight:600;background:var(--gm);color:#fff;display:inline-block}

/* Campaign result (legacy) */
.builder-campaign-result{display:flex;flex-direction:column;gap:20px}
.bcr-title{font-size:17px;font-weight:700;color:var(--charcoal);margin-bottom:4px}
.bcr-message{font-size:14px;color:var(--charcoal);line-height:1.65;opacity:.85}
.bcr-body{font-size:13.5px;color:var(--charcoal);line-height:1.7;white-space:pre-wrap}

/* Loading */
.builder-loading{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;gap:14px;
}
.builder-loading-dots{display:flex;gap:7px}
.builder-loading-dots span{
  width:9px;height:9px;border-radius:50%;background:var(--gm);
  animation:builderDot 1.2s ease-in-out infinite;
}
.builder-loading-dots span:nth-child(2){animation-delay:.2s}
.builder-loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes builderDot{
  0%,80%,100%{transform:scale(.6);opacity:.4}
  40%{transform:scale(1);opacity:1}
}
.builder-loading-msg{font-size:13.5px;color:var(--muted)}

/* Error */
.builder-error{
  padding:20px;text-align:center;
  font-size:13.5px;color:var(--err-c,#DC2626);
  background:var(--err-bg,#FEF2F2);border-radius:calc(var(--rx) - 2px);
}

/* ═══ SETTINGS ═════════════════════════════════════════════════ */
#page-settings{padding:28px 32px;max-width:760px}
.stg-layout{display:grid;grid-template-columns:180px 1fr;gap:24px}
.snav-item{padding:8px 12px;border-radius:8px;font-size:13px;color:var(--muted);cursor:pointer;transition:all var(--t);margin-bottom:2px}
.snav-item:hover{background:var(--bg2);color:var(--charcoal)}
.snav-item.active{background:var(--gpale);color:var(--green);font-weight:500}
.spanel{display:none}.spanel.active{display:block}
.stg-ttl{font-family:'Instrument Serif',serif;font-size:20px;color:var(--charcoal);margin-bottom:4px}
.stg-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.stg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:20px;margin-bottom:16px}
.stg-card-ttl{font-size:13px;font-weight:600;color:var(--charcoal);margin-bottom:6px}
.stg-help{font-size:12px;color:var(--m2);line-height:1.55;margin-top:2px}
.dz{border:1px solid #FECACA;background:var(--err-bg);border-radius:var(--rl);padding:20px}
.dz-ttl{font-size:13px;font-weight:600;color:var(--err-c);margin-bottom:4px}
.dz-desc{font-size:12px;color:#7F1D1D;margin-bottom:14px;line-height:1.6}

/* ═══ CONFIGURATOR BAR (Image / Ads / Campaign / Video) ════════ */
.img-cfg{
  border-top:1px solid var(--border);
  padding:14px 20px 12px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.img-cfg-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.img-cfg-lbl{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  min-width:44px;
  flex-shrink:0;
}
.img-type-pills,
.img-format-pills{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.img-pill{
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:4px 13px;
  cursor:pointer;
  transition:all .14s ease;
  line-height:1.5;
  white-space:nowrap;
}
.img-pill:hover{
  color:var(--charcoal);
  border-color:var(--b2);
  background:var(--bg3);
}
.img-pill.active{
  color:#fff;
  background:var(--green);
  border-color:var(--green);
}
.img-pill-hint{
  font-size:10px;
  opacity:.6;
  margin-left:2px;
}

/* ═══ YOUR PLAN SECTION ════════════════════════════════════════ */
.plan-status-bar{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:20px;display:flex;flex-direction:column;gap:8px}
.plan-status-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plan-status-badge{background:var(--green);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.2px}
.plan-status-renew{font-size:13px;color:var(--muted)}
.plan-status-pending{display:flex;align-items:center;gap:6px;font-size:12px;background:var(--warn-bg);color:var(--warn-c);border-radius:8px;padding:8px 12px;flex-wrap:wrap}
.plan-status-pending svg{flex-shrink:0}
.plan-cancel-btn{background:none;border:1px solid currentColor;border-radius:6px;color:inherit;font-size:11px;padding:2px 8px;cursor:pointer;margin-left:auto;line-height:1.4}
.plan-cancel-btn:hover{opacity:.7}
.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
.plan-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--rl);padding:24px 20px 18px;display:flex;flex-direction:column;gap:14px;transition:border-color var(--t),box-shadow var(--t);position:relative}
.plan-card--current{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.plan-card--pending{border-color:var(--gm);border-style:dashed}
.plan-card--popular{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.plan-popular-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:3px 12px;border-radius:20px;white-space:nowrap;letter-spacing:.3px}
.plan-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.plan-card-name{font-size:15px;font-weight:600;color:var(--charcoal)}
.plan-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap}
.plan-badge--current{background:var(--glt);color:var(--green)}
.plan-badge--pending{background:var(--warn-bg);color:var(--warn-c)}
.plan-card-price{display:flex;align-items:baseline;gap:3px}
.plan-price-num{font-family:'Instrument Serif',serif;font-size:26px;color:var(--charcoal);letter-spacing:-.5px}
.plan-price-per{font-size:12px;color:var(--muted)}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:7px;flex:1}
.plan-features li{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--c2);line-height:1.45}
.plan-features svg{flex-shrink:0;margin-top:1px;stroke:var(--gm)}
.plan-card-action{margin-top:auto}
.plan-card-action .btn{width:100%;justify-content:center}
.plan-free-row{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--rl);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px;flex-wrap:wrap}
.plan-free-row--current{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.plan-free-row--pending{border-color:var(--gm);border-style:dashed}
.plan-free-info{flex:1;min-width:0}
.plan-free-name{font-size:13px;font-weight:600;color:var(--charcoal);margin-bottom:3px}
.plan-free-feats{font-size:11px;color:var(--muted);line-height:1.5}
.plan-free-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.plan-free-price{font-family:'Instrument Serif',serif;font-size:20px;color:var(--charcoal)}
@media(max-width:960px){.plan-cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.plan-cards{grid-template-columns:1fr}}

/* ── MOBILE HAMBURGER BUTTON ──────────────────────────────────── */
#sbToggle{
  display:none;position:fixed;top:10px;left:10px;z-index:1000;
  width:36px;height:36px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);
  align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sh);flex-shrink:0;
}
#sbToggle svg{width:18px;height:18px;stroke:var(--charcoal);fill:none;stroke-width:1.8;stroke-linecap:round}

/* ── SIDEBAR OVERLAY ──────────────────────────────────────────── */
#sbOverlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:998;
}
#sbOverlay.active{display:block}

/* ── TABLET / MOBILE BREAKPOINT ─────────────────────────────── */
@media(max-width:768px){
  /* ── 1. Kill the beta banner — it overlaps the hamburger (z-index
          conflict) and is unreadable on small screens. The app margin
          that compensates for the banner height must also be reset. ── */
  .beta-banner{display:none!important}
  .app{margin-top:0!important;height:100vh!important}

  /* ── 2. Show hamburger ── */
  #sbToggle{display:flex}

  /* ── 3. Sidebar off-canvas drawer ── */
  .sb{
    position:fixed;left:-220px;top:0;height:100vh;z-index:999;
    width:200px;min-width:200px;
    transition:left .25s ease;
    box-shadow:var(--shl);
  }
  .sb.sb-open{left:0}

  /* ── 4. Logo area — make it a flex row so the hamburger (56px reserved
          on the left) and the logo sit on the same baseline with natural
          vertical centering. The hamburger lives outside .sb but the
          reserved gap prevents any overlap when the drawer is open. ── */
  .sb-logo{
    display:flex;
    align-items:center;
    padding:14px 16px 14px 58px;  /* left gap clears the 36px button + 12px margin */
  }
  .sb-logo .logo{gap:8px}

  /* ── 5. Remove the green identity card in drawer mode — the rounded
          dark-green box clips and splits against the drawer edge at mobile
          widths, making it look broken. Replace with flat unstyled text. ── */
  .sb-identity{
    background:none;
    border-radius:0;
    padding:6px 4px 2px;
    margin:0;
  }
  .sb-identity-name{color:var(--charcoal)}
  .sb-identity-sub{color:var(--muted)}
  .sb-signout{color:var(--muted)}

  /* Override any icon-only rules from the old 480px block */
  .sb .logo-name,.ni span{display:initial}
  .ni{padding:9px 10px;justify-content:flex-start}

  /* Main content fills full width */
  .mc{width:100%}
  .page{padding-top:0}

  /* Dashboard — override centered flex so content clears hamburger */
  #page-dashboard.active{align-items:flex-start;height:auto;overflow-y:auto;padding-top:56px}
  #page-dashboard .dash-outer{padding:24px 20px 60px}
  .dash-cards{grid-template-columns:1fr;gap:10px}
  .dash-card{padding:22px 20px 40px}

  /* Create */
  .create-h1{font-size:28px;letter-spacing:-.8px}
  #page-create,#page-create-workspace{padding:56px 20px 40px}

  /* Studio */
  #page-studio .ph,#page-inspiration .ph,#page-team .ph{padding-top:56px}

  /* Brand Assistant — just needs extra top space */
  .chat-shell{padding:0 12px}
  #page-aichat .chat-shell{padding-top:52px}

  /* Settings — stack layout + horizontal nav scroll */
  #page-settings{padding:56px 16px 40px;max-width:100%}
  .stg-layout{grid-template-columns:1fr}
  #sNav{
    display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;
    border-right:none;border-bottom:1px solid var(--border);
    padding-bottom:12px;margin-bottom:4px;
  }
  .snav-item{padding:5px 10px;font-size:12px;border-radius:6px}

  /* Plan cards — single column */
  .plan-cards{grid-template-columns:1fr}
  .plan-status-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .plan-free-row{flex-direction:column;align-items:flex-start;gap:8px}
  .plan-free-right{width:100%;justify-content:space-between}

  /* Studio page tab bar */
  .studio-tabs,.tabs-row{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}

  /* Ideas page */
  #page-inspiration{padding:56px 16px 40px}
  .sh-cards{grid-template-columns:1fr}

  /* Team page */
  #page-team{padding:56px 16px 40px}
  .check-panel{grid-template-columns:1fr}
}

/* ── SMALL MOBILE ────────────────────────────────────────────── */
@media(max-width:480px){
  .sb{width:200px;min-width:200px}
  .sb .logo-name,.sb-identity,.ni span{display:initial}
  .ni{padding:9px 10px;justify-content:flex-start}
  .dash-card{padding:18px 16px 36px}
  .create-h1{font-size:24px}
  .snav-item{font-size:11px;padding:4px 8px}
  .plan-popular-tag{font-size:9px;padding:2px 7px}
}

/* ── THEME PICKER ─────────────────────────────────────────────── */
.theme-pick{
  border:2px solid var(--border);
  border-radius:var(--rl);
  padding:12px;
  cursor:pointer;
  transition:all var(--t);
}
.theme-pick:hover{border-color:var(--b2)}
.theme-pick.active{border-color:var(--green);background:var(--gpale)}
.theme-prev{
  display:flex;gap:6px;
  border-radius:8px;overflow:hidden;
  height:60px;margin-bottom:8px;
}
.theme-prev-light{background:#F6F3EE}
.theme-prev-dark{background:#0F0F10}
.tp-sidebar{width:30%;background:#FFF;border-right:1px solid #E0DAD1}
.tp-sidebar-dark{background:#18181A;border-right-color:#2C2C2E}
.tp-content{flex:1;padding:6px;display:flex;flex-direction:column;gap:4px}
.tp-card{height:16px;background:#FFF;border-radius:4px;border:1px solid #E0DAD1}
.tp-card-dark{background:#1A1A1C;border-color:#2C2C2E}
.theme-pick-label{font-size:12px;font-weight:600;color:var(--c2);text-align:center}

/* ── ACCENT COLOR PICKER ───────────────────────────────────── */
.accent-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.accent-swatch{
  width:34px;height:34px;border-radius:50%;border:2.5px solid transparent;
  cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;
  outline:none;box-shadow:0 2px 6px rgba(0,0,0,.14);
  display:flex;align-items:center;justify-content:center;
}
.accent-swatch:hover{transform:scale(1.13)}
.accent-swatch.active{
  border-color:var(--charcoal);
  box-shadow:0 0 0 3px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.14);
}
.accent-swatch.active::after{
  content:'';width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}

.logo-mk img {
  height: 50px ;
  width: auto;
  display: block;
}