:root{
  --ink:#1a1714; --sub:#6b635a; --line:#e3ddd4; --bg:#f6f3ee; --panel:#fff;
  --clay:#D8CCBE; --accent:#000; --warn:#b4642f; --ok:#3f7a52;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Gill Sans','Gill Sans MT',Calibri,system-ui,sans-serif;color:var(--ink);background:var(--bg);}
.topbar{display:flex;align-items:center;gap:24px;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap;}
.brand{font-family:Georgia,'Times New Roman',serif;font-size:20px;letter-spacing:.02em;}
.brand span{color:var(--sub);margin:0 1px;}
.brand em{font-style:italic;color:var(--sub);font-size:14px;margin-left:6px;}
.campaign-meta{display:flex;gap:16px;flex:1;flex-wrap:wrap;}
.campaign-meta label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);}
.campaign-meta input{font:inherit;font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 9px;min-width:200px;}
.campaign-meta input.hex{min-width:90px;}
.actions{display:flex;gap:8px;flex-wrap:wrap;}
button{font:inherit;font-size:12px;cursor:pointer;border-radius:6px;padding:8px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);transition:.12s;}
button:hover{border-color:#bdb4a8;}
button.primary{background:#000;color:#fff;border-color:#000;}
button.ghost{background:#fff;}
main{display:grid;grid-template-columns:minmax(380px,1fr) minmax(420px,1fr);gap:0;height:calc(100vh - 58px);}
.builder{overflow-y:auto;padding:18px;border-right:1px solid var(--line);}
.add-row{display:flex;gap:8px;margin-bottom:16px;position:sticky;top:0;background:var(--bg);padding-bottom:8px;z-index:2;}
.add-row select{flex:1;font:inherit;font-size:13px;padding:9px;border:1px solid var(--line);border-radius:6px;background:#fff;}
.add-more{display:block;width:100%;border:1px dashed #bdb4a8;border-radius:10px;background:transparent;color:var(--sub);padding:11px;margin:2px 0 14px;}
.add-more:hover{color:var(--ink);border-color:var(--ink);background:#fff;}
.empty{color:var(--sub);font-size:13px;text-align:center;padding:40px 0;}
.block-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden;}
.block-card.flash{animation:cardflash 1.1s ease-out;}
@keyframes cardflash{0%{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent);}100%{box-shadow:0 0 0 0 transparent;}}
.block-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#faf8f4;border-bottom:1px solid var(--line);}
.block-name{font-family:Georgia,serif;font-size:14px;}
.block-tag{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#000;border-radius:3px;padding:2px 6px;}
.block-tag.plain{background:var(--sub);}
.spacer{flex:1;}
.mini{padding:3px 8px;font-size:12px;line-height:1;border-radius:5px;}
.block-fields{padding:12px 14px;display:grid;gap:12px;}
.block-card.collapsed .block-fields{display:none;}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink);margin-bottom:4px;}
.field .desc{font-size:11px;color:var(--sub);margin:0 0 5px;line-height:1.4;}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:#fff;color:var(--ink);}
.field textarea{min-height:64px;resize:vertical;line-height:1.5;}
.field .row{display:flex;gap:8px;align-items:flex-start;}
.field .thumb{width:46px;height:46px;border:1px solid var(--line);border-radius:6px;object-fit:cover;background:#f0ece5;flex:none;}
.case-chip{display:inline-block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:1px 6px;margin-left:6px;vertical-align:middle;}
.case-chip.lower{background:#efe7f3;color:#6b3f86;}
.case-chip.sentence{background:#e6f0ea;color:var(--ok);}
.md-chip{display:inline-block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:1px 6px;margin-left:6px;vertical-align:middle;background:#eef1f6;color:#4a5a78;cursor:help;}
.warn{color:var(--warn);font-size:11px;margin-top:4px;}
.fix{font-size:10px;padding:2px 7px;margin-left:6px;}
.palette-swatches{display:flex;gap:5px;margin-top:6px;}
.sw{width:18px;height:18px;border-radius:3px;border:1px solid #0002;}
.preview{display:flex;flex-direction:column;min-width:0;}
.preview-tabs{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel);}
.tab{border:none;background:none;padding:6px 10px;color:var(--sub);border-bottom:2px solid transparent;border-radius:0;}
.tab.active{color:var(--ink);border-bottom-color:#000;font-weight:600;}
.status{margin-left:auto;font-size:11px;color:var(--sub);}
.status.warn{color:var(--warn);}
.status.ok{color:var(--ok);}
.preview-body{flex:1;overflow:auto;background:#2c2825;display:flex;justify-content:center;}
/* 640px (not 600) so the email's max-width:600px mobile breakpoint doesn't fire in the
   preview — it would stack horizontal cards like a phone. The 600px email centres inside,
   matching the rasterised PNG (which renders at the same 640px width). */
#liveFrame{width:640px;border:none;background:#fff;min-height:100%;}
.png-wrap{padding:16px;}
.png-wrap img{width:600px;display:block;box-shadow:0 4px 24px #0006;}
/* A rasterised view built from an older campaign: dimmed and captioned, so a stale picture is
   never mistaken for "my edit had no effect". Opening the tab re-renders it. */
.stale{position:relative;}
.stale>*{opacity:.35;filter:grayscale(.6);}
.stale::after{content:'Outdated — click Render PNG to rebuild from your latest edits';
  position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:2;
  background:var(--warn,#b8860b);color:#fff;font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:4px;white-space:nowrap;box-shadow:0 2px 8px #0006;}
.hidden{display:none!important;}

/* slices panel */
.slices-wrap{width:100%;padding:16px;display:flex;flex-direction:column;gap:14px;}
.slices-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.slices-hint{font-size:11px;color:#cdbfae;}
.slices{display:flex;flex-direction:column;align-items:center;gap:14px;}
.slice{width:600px;max-width:100%;background:var(--panel);border-radius:8px;overflow:hidden;box-shadow:0 4px 24px #0006;}
.slice-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;background:#faf8f4;border-bottom:1px solid var(--line);}
.slice-name{font-family:Georgia,serif;font-size:12px;color:var(--ink);}
.slice-dl{font-size:11px;color:var(--accent);text-decoration:underline;cursor:pointer;}
.slice-img{display:block;width:100%;}
.slice-link{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#faf8f4;border-top:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink);}
.slice-link span{flex:none;}
.slice-link-input{flex:1;font:inherit;font-size:12px;font-weight:400;border:1px solid var(--line);border-radius:6px;padding:6px 9px;}
.slice-link.note{font-weight:400;color:var(--sub);font-style:italic;}

/* Klaviyo dialog */
.kv-dialog{border:none;border-radius:12px;padding:0;max-width:440px;width:92vw;box-shadow:0 16px 60px #0005;}
.kv-dialog::backdrop{background:#0007;}
.kv-form{padding:22px;display:flex;flex-direction:column;gap:12px;}
.kv-form h2{margin:0;font-family:Georgia,serif;font-size:20px;font-weight:400;}
.kv-note{margin:0;font-size:11px;color:var(--sub);line-height:1.5;}
.kv-note code{background:#f0ece5;padding:1px 5px;border-radius:4px;font-size:10px;}
.kv-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink);}
.kv-form input,.kv-form select{font:inherit;font-size:13px;font-weight:400;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:#fff;color:var(--ink);}
.kv-form label.kv-manual{font-weight:400;color:var(--sub);font-size:10px;}
.kv-result{font-size:12px;color:var(--ok);background:#e6f0ea;border-radius:6px;padding:10px 12px;line-height:1.5;}
.kv-result.err{color:var(--warn);background:#f6ebe2;}
.kv-result a{color:inherit;font-weight:600;}
.kv-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;}

/* My designs list */
.designs-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;}
.design-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#faf8f4;}
.design-row.current{border-color:var(--accent);}
.design-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.design-name{font-family:Georgia,serif;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.design-when{font-size:10px;color:var(--sub);}
.design-actions{display:flex;gap:6px;flex:none;}

@media (max-width:900px){main{grid-template-columns:1fr;height:auto;}.preview{height:80vh;}.slice{width:100%;}}

/* ── mode toggle (Builder ⇄ Library) ───────────────────────────────────────── */
.mode-toggle{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
.mode-toggle .seg{border:none;border-radius:0;background:#fff;color:var(--sub);padding:7px 14px;}
.mode-toggle .seg.active{background:#000;color:#fff;}
body.mode-library .campaign-meta,body.mode-library .actions{display:none;}

/* ── component library ─────────────────────────────────────────────────────── */
.library{height:calc(100vh - 58px);overflow-y:auto;background:var(--bg);}
.lib-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--line);}
.lib-toolbar input[type=search]{flex:1;min-width:220px;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:6px;padding:8px 11px;background:#fff;}
.lib-toolbar select{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:#fff;}
.lib-check{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sub);}
.lib-count{font-size:11px;color:var(--sub);}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:18px;align-items:start;}

.lib-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.lib-card-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);background:#faf8f4;}
.lib-name{font-family:Georgia,serif;font-size:13px;word-break:break-all;}
.lib-badges{margin-left:auto;display:flex;gap:4px;flex:none;}
.lib-badge{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#000;border-radius:3px;padding:2px 5px;white-space:nowrap;}
.lib-badge.plain{background:var(--sub);}
.lib-badge.draft{background:var(--warn);}
.lib-badge.designed{background:#000;}

.lib-preview{width:100%;position:relative;overflow:hidden;background:#2c2825;min-height:120px;}
.lib-frame{border:0;position:absolute;top:0;left:0;transform-origin:top left;background:#2c2825;}

.lib-controls{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 0;}
.lib-ctrl{display:flex;flex-direction:column;gap:2px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);}
.lib-ctrl select{font:inherit;font-size:12px;text-transform:none;letter-spacing:0;border:1px solid var(--line);border-radius:5px;padding:5px 7px;background:#fff;color:var(--ink);}

.lib-desc{font-size:11px;color:var(--sub);line-height:1.45;margin:10px 12px 0;}
.lib-intent{padding:8px 12px 0;display:flex;flex-direction:column;gap:5px;}
.intent-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.intent-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-right:2px;}
.intent-chip{font-size:10px;border-radius:3px;padding:1px 7px;background:#eef1f6;color:#4a5a78;}
.intent-chip.good{background:#e6f0ea;color:var(--ok);}
.intent-chip.bad{background:#f6e9e3;color:var(--warn);}
.intent-chip.draft{background:#f6e9e3;color:var(--warn);}
.intent-chip.plain{background:#efece7;color:var(--sub);}
.intent-facts{font-size:10px;color:var(--sub);margin:2px 0 0;}

.lib-card-actions{display:flex;gap:6px;padding:12px;margin-top:auto;}
.lib-add{background:#000;color:#fff;border-color:#000;}
.lib-add:hover{border-color:#000;opacity:.85;}

/* variant compare */
.lib-variants{padding:6px 12px 12px;display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--line);margin-top:10px;}
.variant-row{display:flex;flex-direction:column;gap:4px;}
.variant-row-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);}
.variant-cells{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
.variant-cell{flex:none;width:150px;display:flex;flex-direction:column;gap:3px;}
.variant-label{font-size:10px;color:var(--ink);text-align:center;}
.variant-frame-wrap{width:150px;position:relative;overflow:hidden;background:#2c2825;border:1px solid var(--line);border-radius:5px;}
.variant-frame{border:0;position:absolute;top:0;left:0;transform-origin:top left;}

/* coverage dialog */
.cov-dialog::backdrop{background:#1a171466;}
.cov-dialog .kv-form{max-width:760px;}
.coverage-body h3{font-family:Georgia,serif;font-size:15px;margin:18px 0 8px;}
.cov-table{width:100%;border-collapse:collapse;font-size:12px;}
.cov-table th,.cov-table td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
.cov-table th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);}
.cov-table .cov-num{text-align:center;white-space:nowrap;}
.cov-table tr.cov-thin{background:#fbf2ea;}
.cov-chips{display:flex;flex-wrap:wrap;gap:4px;}

/* create-campaign dialog */
.create-dialog .kv-form{max-width:680px;width:min(680px,92vw);}
.create-dialog .kv-note{font-size:12px;color:var(--sub);margin:-2px 0 14px;line-height:1.55;}
.create-form .kv-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.create-form .kv-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);}
.create-form textarea{
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fbfaf7;
  color:var(--ink);
  resize:vertical;
  min-height:140px;
  width:100%;
  box-sizing:border-box;
}
.create-form textarea:focus{outline:2px solid #b89a75;outline-offset:0;border-color:transparent;background:#fff;}
.create-form input[type=text]{
  font:13px ui-sans-serif,system-ui,sans-serif;
  padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:#fbfaf7;color:var(--ink);
  width:100%;box-sizing:border-box;
}
.create-form .kv-check-row{flex-direction:row;align-items:center;gap:8px;font-size:12px;color:var(--ink);}
.create-form .kv-check-row input[type=checkbox]{margin:0;}
.create-status{
  margin:8px 0 0;padding:8px 10px;border-radius:5px;font-size:12px;line-height:1.5;
  border:1px solid var(--line);background:#fbfaf7;color:var(--ink);
}
.create-status.pending{background:#fdf6e3;border-color:#e7d8a4;color:#5a4a1c;}
.create-status.err{background:#fbe9e3;border-color:#e7b0a4;color:#7a3322;}
.create-status.ok{background:#e7f3ec;border-color:#a4d8b8;color:#1e5a3a;}

/* live-context panel inside the create dialog */
.create-live-context{
  margin:14px 0 0;padding:10px 12px;border:1px solid var(--line);
  border-radius:6px;background:#fbfaf7;
}
.clc-header{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);
  margin-bottom:8px;
}
.clc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.clc-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;padding:4px 8px;border-radius:999px;
  background:#efece7;color:var(--sub);
  border:1px solid transparent;
}
.clc-chip .dot{
  width:7px;height:7px;border-radius:50%;background:#bbb;flex:none;
}
.clc-chip.ok{background:#e7f3ec;color:#1e5a3a;}
.clc-chip.ok .dot{background:#3fa46a;}
.clc-chip.unavailable{background:#fbe9e3;color:#7a3322;}
.clc-chip.unavailable .dot{background:#cc6655;}
.clc-chip.loading .dot{background:#b89a75;animation:clcPulse 1.2s ease-in-out infinite;}
.clc-chip .count{font-variant-numeric:tabular-nums;color:var(--sub);}
.clc-chip.ok .count{color:#1e5a3a;}
.clc-chip.unavailable .count{color:#7a3322;}
@keyframes clcPulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.clc-detail{
  font-size:11px;color:var(--sub);line-height:1.5;
  margin-top:4px;min-height:1em;
}
.clc-detail a{color:var(--ink);}

/* The Studio tab is a link, not a button — it is a separate page. */
a.seg{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);}