/* Zippost — Sherbet Studio v4
   Tokens: docs/brand-identity/tokens.css · Guide: docs/BRAND_GUIDELINES.md
   Variable names kept from the original sheet so existing markup keeps working. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --bg: #171041;
  --panel: #21174F;
  --panel-2: #2C1F60;
  --text: #F4F1FF;
  --muted: #BCB3DC;
  --faint: #9A90C0;
  --brand: #FF3D9A;
  --brand-soft: rgba(255, 61, 154, .16);
  --accent: #FF7ABA;
  --border: rgba(240, 238, 255, .09);
  --good: #DCF23B;            /* the win metal — scores are wins, never traffic-light green */
  --banked: #7E6BB5;          /* "coals" — replaces grey disabled */
  --radius: 20px;
  --shadow-card: 0 18px 48px rgba(6, 3, 24, .5);
  --shadow-btn: 0 10px 30px rgba(255, 61, 154, .34);
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 460px at 22% -8%, rgba(255, 61, 154, .18), transparent 62%),
    radial-gradient(700px 400px at 84% -10%, rgba(220, 242, 59, .08), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.container { max-width: 1040px; margin: 0 auto; padding: 24px; }
header.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
}
.logo {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: 22px; text-transform: lowercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.logo span { color: inherit; }
.logo::after {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M61 7 L33 55 L47 55 L41 93 L69 45 L55 45 Z" fill="%23FF3D9A" stroke="%23FF3D9A" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><path d="M55 25 L44 52" fill="none" stroke="%23DCF23B" stroke-width="4" stroke-linecap="round"/></svg>') no-repeat center / contain;
  filter: drop-shadow(0 0 9px rgba(255, 61, 154, .5));
}
.tag { color: var(--faint); font-size: 13.5px; }
.btn {
  background: var(--brand); color: var(--bg); border: none; padding: 11px 22px;
  border-radius: 999px; font-family: var(--font-display); font-weight: 600;
  cursor: pointer; font-size: 14.5px; text-decoration: none; display: inline-block;
  box-shadow: var(--shadow-btn);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255, 61, 154, .4); filter: none; }
.btn.secondary { background: var(--brand-soft); color: var(--accent); border: none; box-shadow: none; }
.btn.ghost { background: transparent; border: 1px solid rgba(240, 238, 255, .22); color: var(--text); box-shadow: none; }
.btn:disabled {
  background: transparent; border: 1px solid var(--banked); color: var(--faint);
  box-shadow: none; opacity: 1; cursor: not-allowed; transform: none;
}
.card {
  background: var(--panel); border: none;
  border-radius: var(--radius); padding: 22px; margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input, textarea, select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(255, 61, 154, .5); }
textarea { min-height: 64px; resize: vertical; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.025em; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; margin: 0 0 12px; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; margin: 0 0 6px; }
.muted { color: var(--muted); font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pill { background: var(--brand-soft); border: none; color: var(--accent);
  padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.score { font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }
.topic { border-left: 3px solid var(--brand); }
.topic-summary { margin: 8px 0 6px; font-size: 14px; line-height: 1.5; color: var(--text); }
.why-now { margin: 4px 0 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.why-now strong { color: var(--accent); }
.platform-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.platform-tabs .btn { padding: 7px 15px; font-size: 13px; box-shadow: none; }
.post-body { white-space: pre-wrap; background: var(--panel-2); border: none;
  border-radius: 14px; padding: 15px; font-size: 14px; line-height: 1.55; }
.hero { text-align: center; padding: 72px 20px 60px; }
.hero h1 { font-size: clamp(38px, 6vw, 54px); line-height: 1.06; margin-bottom: 12px; text-wrap: balance; }
.hero p { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 620px; margin: 0 auto 28px; }
.banner { background: var(--panel-2); border: 1px solid var(--banked); color: var(--muted);
  padding: 10px 16px; border-radius: 14px; font-size: 13px; margin-bottom: 16px; }
.hidden { display: none; }
/* Brand Intelligence: the scan box + "the Mirror" confirmation card */
.scan-box { background: var(--panel-2); border: none;
  border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.scan-box h3 { margin: 0 0 10px; font-size: 15px; }
.mirror-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.mirror-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 12px;
  background: #FBFEE8; padding: 6px; flex: none; }
.mirror-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; }
.evidence { border-left: 2px solid var(--good); padding: 6px 0 6px 12px; margin: 10px 0 14px; }
.evidence blockquote { margin: 6px 0; font-size: 13.5px; color: var(--muted);
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic; }
.kit { margin: 10px 0 4px; }
.kit-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.kit-label { font-size: 12px; color: var(--faint); min-width: 96px; }
.swatches { display: flex; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(240, 238, 255, 0.15); }
.voice { margin: 10px 0 4px; }
.voice blockquote { margin: 6px 0; font-size: 14px; color: var(--text);
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  border-left: 2px solid var(--good); padding-left: 10px; }
.post-image { display: block; max-width: 320px; width: 100%; border-radius: 14px;
  border: 1px solid var(--border); margin: 16px 0 6px; }
.compose-box { background: var(--panel-2); border: 1px dashed rgba(240, 238, 255, .18);
  border-radius: 14px; padding: 14px; margin-top: 8px; }
.compose-box input[type=file] { margin-bottom: 8px; }
#brand-kit-panel { background: var(--panel-2); border: none; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.kit-summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); }
#brand-kit-panel input[type=file] { border: none; background: transparent; padding: 6px 0; }
.studio { background: var(--panel-2); border: none; border-radius: 16px; padding: 15px; margin-top: 10px; }
.studio-log { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.studio-msg { font-size: 14px; line-height: 1.5; padding: 9px 14px; border-radius: 14px; max-width: 90%; }
.studio-msg.u { align-self: flex-end; background: var(--brand); color: var(--bg); }
.studio-msg.a { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); }
.spinner { color: var(--faint); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}