:root {
  color-scheme: light;
  --canvas: #f4f6fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #1d2530;
  --muted: #697383;
  --line: #e3e7ee;
  --accent: #1467d9;
  --accent-soft: #eaf2ff;
  --success: #18794e;
  --warning: #b54708;
  --danger: #c53434;
  --radius-card: 18px;
  --radius-row: 14px;
  --radius-control: 12px;
  --radius-tight: 8px;
  --shadow-card: 0 12px 34px rgb(31 47 70 / 8%);
  --shadow-float: 0 14px 36px rgb(31 47 70 / 16%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent), white 45%); outline-offset: 2px; }
.app-shell { min-height: 100dvh; }
.topbar { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-5); background: rgb(255 255 255 / 94%); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: -.04em; font-size: 20px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: var(--accent); border-radius: 10px; box-shadow: 0 7px 17px rgb(20 103 217 / 25%); }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.muted { color: var(--muted); }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: var(--radius-control); font-weight: 750; transition: background .16s ease, transform .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 7px 18px rgb(20 103 217 / 22%); }
.button-secondary { color: var(--accent); background: var(--accent-soft); }
.button-quiet { color: var(--muted); background: transparent; }
.button-quiet:hover { color: var(--ink); background: #edf1f6; }
.icon-button { width: 42px; padding: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.field { display: grid; gap: 7px; }
.field label { color: var(--muted); font-size: 13px; font-weight: 750; }
.control { width: 100%; min-height: 44px; padding: 0 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); }
.control::placeholder { color: #9aa4b2; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.status-ready { color: var(--success); background: #eaf7f0; }
.status-draft { color: var(--warning); background: #fff4e5; }
.dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.section-title { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { justify-content: space-between; }
@media (max-width: 700px) { .topbar { padding: 0 var(--space-4); } }