@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme: dark;

  /* surfaces — charcoal with a faint green cast, not pure black */
  --bg:#0F1210;
  --surface:#161A18;
  --surface-2:#1C211E;
  --line:#252B27;
  --line-strong:#333A36;

  /* text */
  --ink:#E9ECE9;
  --ink-soft:#98A19B;
  --ink-faint:#6B736E;

  /* the trace of green */
  --accent:#4FB08F;
  --accent-bright:#63C4A2;
  --accent-dim:#2E6E5A;
  --accent-soft:#152A22;
  --on-accent:#0C1310;

  /* sentiment */
  --positive:#4FB08F;
  --positive-soft:#152A22;
  --negative:#E07A62;
  --negative-soft:#2C1A15;
  --neutral:#8B9490;
  --neutral-soft:#1F2422;

  --focus:#4FB08F;

  /* legacy aliases so existing inline styles keep working */
  --paper:var(--bg);
  --card:var(--surface);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ambient green wash behind the header — the only decorative flourish */
body::before{
  content:'';
  position:fixed;top:0;left:0;right:0;height:440px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(79,176,143,.08), transparent 70%);
  pointer-events:none;z-index:0;
}

h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.mono{font-family:'IBM Plex Mono',monospace;}

a{color:inherit;}
::selection{background:var(--accent-dim);color:#fff;}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

.shell{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}

.nav{
  border-bottom:1px solid var(--line);
  background:rgba(22,26,24,.86);
  backdrop-filter:blur(10px);
  position:relative;z-index:2;
}
.nav-inner{
  max-width:1080px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-brand{
  font-family:'Fraunces',serif;font-weight:600;font-size:18px;
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  min-width:0;
}
.nav-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex:none;}
.nav-links{display:flex;gap:4px;flex:none;}
.nav-links a{
  padding:8px 14px;border-radius:8px;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--ink-soft);
  transition:background .15s, color .15s;
}
.nav-links a:hover, .nav-links a.active{background:var(--accent-soft);color:var(--accent);}

/* ---- header branding ---- */
.brand-logo{
  height:30px;max-width:190px;width:auto;object-fit:contain;display:block;flex:none;
}
.brand-divider{
  width:1px;height:22px;background:var(--line-strong);flex:none;
}
.brand-wordmark{
  font-size:15px;color:var(--ink-soft);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.form-brand{
  display:flex;align-items:center;margin-bottom:28px;
}
.form-brand img{
  height:48px;max-width:260px;width:auto;object-fit:contain;display:block;
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:9px;border:1px solid transparent;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;
  cursor:pointer;transition:all .15s;text-decoration:none;
}
.btn-primary{background:var(--ink);color:var(--bg);}
.btn-primary:hover{background:#fff;}
.btn-secondary{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong);}
.btn-secondary:hover{border-color:var(--accent-dim);color:var(--accent);}
.btn-accent{background:var(--accent);color:var(--on-accent);}
.btn-accent:hover{background:var(--accent-bright);}
.btn-danger{background:transparent;color:var(--negative);border-color:var(--negative-soft);}
.btn-danger:hover{background:var(--negative-soft);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn:disabled:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink);}

input[type=text],input[type=password],input[type=number],select,textarea{
  font-family:'Inter',sans-serif;
  border:1px solid var(--line-strong);border-radius:8px;
  padding:10px 12px;font-size:14px;width:100%;
  background:#121614;color:var(--ink);
}
input::placeholder,textarea::placeholder{color:var(--ink-faint);}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
select option{background:var(--surface-2);color:var(--ink);}
input[type=checkbox]{accent-color:var(--accent);}
label{font-size:13px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:6px;}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
}
.pill-positive{background:var(--positive-soft);color:var(--positive);}
.pill-negative{background:var(--negative-soft);color:var(--negative);}
.pill-neutral{background:var(--neutral-soft);color:var(--neutral);}
.pill-pending{background:var(--surface-2);color:var(--ink-soft);}
.pill-failed{background:var(--negative-soft);color:var(--negative);}

/* Signature element: sentiment "pulse" bar used wherever sentiment appears */
.pulse{display:flex;height:6px;width:100%;border-radius:4px;overflow:hidden;background:var(--line);}
.pulse > span{height:100%;transition:width .3s ease;}
.pulse .seg-positive{background:var(--positive);}
.pulse .seg-neutral{background:var(--neutral);}
.pulse .seg-negative{background:var(--negative);}

.stat-num{font-family:'Fraunces',serif;font-size:34px;font-weight:500;}
.stat-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;}

table{width:100%;border-collapse:collapse;font-size:14px;}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:10px 8px;border-bottom:1px solid var(--line);}
td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
tr:hover td{background:var(--surface-2);}

.empty-state{
  text-align:center;padding:60px 20px;color:var(--ink-soft);
}
.empty-state h3{margin-bottom:8px;}

.q-field{
  border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px;
  background:var(--surface-2);
}
.q-field-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}

/* ---- drag & drop upload ---- */
.dropzone{
  border:1.5px dashed var(--line-strong);
  border-radius:12px;
  background:var(--surface-2);
  padding:30px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.dropzone:hover{border-color:var(--accent-dim);}
.dropzone.is-over{border-color:var(--accent);background:var(--accent-soft);}
.dropzone-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.dropzone-hint{font-size:12.5px;color:var(--ink-soft);}
.logo-preview{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;background:var(--surface-2);
}
.logo-preview-frame{
  display:flex;align-items:center;justify-content:center;
  min-width:170px;height:64px;padding:8px 14px;
  border-radius:9px;background:var(--surface);border:1px solid var(--line);
}
.logo-preview-frame img{max-height:44px;max-width:190px;width:auto;object-fit:contain;display:block;}

/* ---- builder: tabs ---- */
.tabs{
  display:flex;gap:4px;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:10px 4px;margin-right:20px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--ink-soft);
  transition:color .15s, border-color .15s;
}
.tab:hover{color:var(--ink);}
.tab.is-active{color:var(--accent);border-bottom-color:var(--accent);}

/* ---- builder: design controls ---- */
.design-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:start;}

.seg-control{display:inline-flex;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:9px;padding:3px;gap:3px;}
.seg{
  appearance:none;background:none;border:0;border-radius:7px;cursor:pointer;
  padding:7px 16px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--ink-soft);
}
.seg:hover{color:var(--ink);}
.seg.is-active{background:var(--accent);color:var(--on-accent);}
.seg-control-sm .seg{padding:5px 12px;font-size:12px;}

.color-row{display:flex;align-items:center;gap:10px;}
.color-row input[type=color]{
  width:52px;height:40px;padding:3px;border-radius:9px;
  border:1px solid var(--line-strong);background:var(--surface-2);cursor:pointer;
}
.color-row input[type=text]{width:120px;text-transform:uppercase;}
.field-hint{font-size:12.5px;color:var(--ink-soft);margin:0;}

.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.swatch{
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);padding:0;
}
.swatch:hover{transform:scale(1.12);}

.dropzone.is-locked{cursor:not-allowed;opacity:.6;}
.dropzone.is-locked:hover{border-color:var(--line-strong);}
.logo-preview-frame.is-cover{min-width:190px;padding:6px;}
.logo-preview-frame.is-cover img{max-height:56px;max-width:210px;}

/* ---- builder: live preview ---- */
.preview-sticky{position:sticky;top:20px;}
.preview-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}
.preview-frame{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  min-height:420px;padding:22px;transition:background .2s;
}
.pv-inner{max-width:380px;margin:0 auto;}
.pv-cover{width:100%;height:96px;object-fit:cover;border-radius:9px;display:block;margin-bottom:16px;}
.pv-logo{height:30px;max-width:150px;object-fit:contain;display:block;margin-bottom:14px;}
.pv-headline{font-family:'Fraunces',serif;font-size:21px;font-weight:500;margin-bottom:5px;letter-spacing:-.01em;}
.pv-intro{font-size:12.5px;line-height:1.5;margin-bottom:16px;}
.pv-card{border:1px solid;border-radius:11px;padding:16px;}
.pv-label{font-size:12.5px;font-weight:600;margin-bottom:7px;}
.pv-field{height:44px;border:1px solid;border-radius:7px;}
.pv-chip{
  width:32px;height:30px;border:1px solid;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
}
.pv-chip-wide{width:52px;}
.pv-btn{
  display:inline-block;padding:9px 15px;border-radius:8px;
  font-size:12.5px;font-weight:600;margin-top:4px;
}

/* ---- required fields ---- */
.req-toggle{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;
}
.req-toggle input{width:auto;margin:0;cursor:pointer;}
.req-star{color:var(--accent);font-weight:700;}
[data-question-wrap].is-missing label{color:var(--negative);}
[data-question-wrap].is-missing textarea,
[data-question-wrap].is-missing select,
[data-question-wrap].is-missing input{border-color:var(--negative);}

/* ---- public form: campaign header ---- */
.pf-shell{max-width:640px;padding-top:48px;padding-bottom:64px;}
.pf-cover{margin-bottom:26px;}
.pf-cover img{width:100%;max-height:280px;object-fit:cover;border-radius:14px;display:block;}
.pf-headline{font-size:28px;margin:0 0 8px;}
.pf-intro{color:var(--ink-soft);margin:0 0 26px;line-height:1.55;}
.pf-body input[type=text],.pf-body textarea,.pf-body select{background:var(--field, #121614);}

@media (max-width:900px){
  .design-grid{grid-template-columns:1fr;}
  .preview-sticky{position:static;}
}

.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line-strong);
  padding:12px 18px;border-radius:9px;
  font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px);transition:all .2s;pointer-events:none;
  z-index:50;
}
.toast.show{opacity:1;transform:translateY(0);}

@media (max-width:720px){
  .nav-inner{flex-wrap:wrap;gap:10px;}
  .brand-logo{height:26px;max-width:150px;}
  .stat-num{font-size:28px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}
/* ------------------------------------------------- free-form dashboard --
   Panels are absolutely positioned inside .dash-canvas so they can be
   dragged and resized freely. Geometry lives in JS (x/w as percentages so
   the layout survives a window resize; y/h in px). "Reset layout" restores
   the tidy grid these defaults describe.                                  */

.dash-canvas{ position:relative; width:100%; }

.panel{
  position:absolute;
  padding:8px;                 /* the visual gutter between panels */
  box-sizing:border-box;
}
/* Panels are translucent, not opaque: the green header wash and whatever sits
   behind an overlapping panel stay faintly visible, so a free layout reads as
   floating cards rather than a flat grid. --surface is rgb(22,26,24); the alpha
   is the only change, and the blur keeps text legible over anything beneath.
   Opacity climbs on hover and again on select, so "which card am I on" never
   depends on the border alone. */
.panel-inner{
  height:100%;
  display:flex; flex-direction:column;
  overflow:hidden;
  background:rgba(22,26,24,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.panel:hover .panel-inner{ background:rgba(22,26,24,.86); }
.panel .panel-inner:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.panel.is-selected .panel-inner{
  background:rgba(22,26,24,.94);
  border-color:var(--accent-dim);
  box-shadow:0 0 0 1px var(--accent-dim), 0 16px 38px rgba(0,0,0,.5);
}

/* Firefox and older Safari have no backdrop-filter; there, transparency alone
   would let the panel behind bleed through the text. Fall back to opaque. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel-inner{ background:var(--surface); }
  .panel:hover .panel-inner,
  .panel.is-selected .panel-inner{ background:var(--surface); }
}

/* The drawer the selected panel writes its underlying figures into. */
.panel-detail{
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(22,26,24,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  padding:18px 20px;
}
.panel-detail-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:12px; flex-wrap:wrap;
}
.panel-detail-title{ font-family:'Fraunces',serif; font-size:18px; font-weight:500; }
.panel-detail-body{ max-height:340px; overflow:auto; }
.panel-detail-hint{ font-size:12.5px; color:var(--ink-faint); }

/* ---- actions panel ---- */
.rec{
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
  background:var(--surface-2);
  padding:12px 14px;
  margin-bottom:10px;
}
.rec:last-child{ margin-bottom:0; }
.rec-action{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.45; }
.rec-line{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:6px; }
.rec-line b{ color:var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:11px; }
.rec-rank{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex:none; margin-right:8px;
  background:var(--accent-soft); color:var(--accent);
  font-size:11px; font-weight:700;
}
.panel-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:move; user-select:none;
  margin-bottom:10px;
}
.panel-head .grip{
  color:var(--ink-faint); font-size:15px; letter-spacing:2px; line-height:1;
  opacity:0; transition:opacity .15s;
}
.panel:hover .panel-head .grip{ opacity:1; }
.panel-body{ flex:1 1 auto; min-height:0; overflow:auto; position:relative; }

.panel.is-dragging{ z-index:30; }
.panel.is-dragging .panel-inner,
.panel.is-resizing .panel-inner{ border-color:var(--accent); }

/* Resize handles: 4 edges + 4 corners. Invisible, but the cursor advertises
   them. Corners sit above edges so they win the overlap. */
.rz{ position:absolute; z-index:6; }
.rz-n { top:2px; left:14px; right:14px; height:9px;  cursor:ns-resize; }
.rz-s { bottom:2px; left:14px; right:14px; height:9px; cursor:ns-resize; }
.rz-w { left:2px; top:14px; bottom:14px; width:9px;  cursor:ew-resize; }
.rz-e { right:2px; top:14px; bottom:14px; width:9px; cursor:ew-resize; }
.rz-nw{ top:2px; left:2px;   width:16px; height:16px; cursor:nwse-resize; z-index:7; }
.rz-ne{ top:2px; right:2px;  width:16px; height:16px; cursor:nesw-resize; z-index:7; }
.rz-sw{ bottom:2px; left:2px;  width:16px; height:16px; cursor:nesw-resize; z-index:7; }
.rz-se{ bottom:2px; right:2px; width:16px; height:16px; cursor:nwse-resize; z-index:7; }

/* A faint corner tick so the resize affordance is discoverable. */
.panel:hover .rz-se::after{
  content:''; position:absolute; right:5px; bottom:5px;
  width:7px; height:7px;
  border-right:2px solid var(--ink-faint);
  border-bottom:2px solid var(--ink-faint);
  border-radius:0 0 2px 0;
}

.banner{
  border:1px solid var(--line-strong);
  background:var(--surface-2);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:16px;
  font-size:14px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.banner-warn{ border-color:#E07A62; }
.banner-warn strong{ color:#E07A62; }

/* The dashboard opts out of the 1080px reading column — a free-form canvas
   wants the whole viewport, and the KPI row only fits in one line at full
   width. Every other page keeps the narrower, more readable measure. */
body.wide .shell,
body.wide .nav-inner{ max-width:none; }
body.wide .shell{ padding-left:20px; padding-right:20px; }

/* Panels are denser than a standalone .card: the header already names the
   panel, so the 24px card padding wastes the vertical room a KPI needs. */
.panel-inner{ padding:14px 16px; }
.panel .stat-num{ font-size:30px; line-height:1.15; }
.panel .panel-head{ margin-bottom:6px; }

/* Panels clip by default. A KPI that scrolls has a scrollbar sitting on top
   of its own number, which is what made the stat cards look jumbled. Only
   panels that opt in (the responses table) scroll. */
.panel-body{ overflow:hidden; }
.panel-body.scrolls{ overflow:auto; }

/* --neutral was #8B9490, a gray with a green cast that measured only ΔE 9.8
   from the positive green under normal vision (3.3 under deuteranopia) —
   below the 15 floor, so "neutral" and "positive" were genuinely hard to tell
   apart. #6B7280 is a cooler gray: 17.7 normal-vision, clear of the floor. */
:root{ --neutral:#6B7280; }

/* The sentiment mix is a stacked bar, and green↔coral sits in the 6–8 CVD
   warn band — legal only with secondary encoding. The 2px surface gap between
   segments is that encoding (paired with the counted legend below the bar). */
.pulse{ height:10px; gap:2px; background:transparent; }
.pulse > span{ border-radius:3px; background-clip:padding-box; }
.pulse-track{
  display:flex; height:10px; width:100%;
  border-radius:4px; background:var(--line);
}