:root {
  --bg: #f5f7fb;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #dbe3ef;
  --card: #ffffff;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --safe: #047857;
  --safe-bg: #ecfdf5;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --shadow: 0 18px 55px rgba(15, 23, 42, 0.09);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: radial-gradient(circle at top left, #dbeafe 0, transparent 32rem), var(--bg); line-height: 1.5; }
a { color: var(--brand); }
code { background: rgba(15,23,42,.07); border-radius: .35rem; padding: .1rem .3rem; }
.hero { color: white; background: linear-gradient(135deg, #0f172a, #1e3a8a 58%, #0f766e); padding: 2rem 1rem 3rem; }
.hero__inner { max-width: 1220px; margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; align-items: center; }
.eyebrow { margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: #bfdbfe; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; }
h2, h3 { margin-top: 0; }
.hero__copy { max-width: 50rem; color: #dbeafe; font-size: 1.1rem; }
.status-panel { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; max-width: 28rem; }
.badge, .pill { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .45rem .7rem; background: #e2e8f0; color: #0f172a; font-weight: 700; font-size: .85rem; }
.badge--safe { background: var(--safe-bg); color: var(--safe); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--muted { background: rgba(255,255,255,.16); color: #e2e8f0; }
.shell { max-width: 1220px; margin: -2rem auto 4rem; padding: 0 1rem; }
.banner { padding: 1rem 1.25rem; border-radius: 1rem; margin-bottom: 1rem; font-weight: 700; box-shadow: var(--shadow); }
.banner--success { background: var(--safe-bg); color: var(--safe); border: 1px solid #a7f3d0; }
.banner--warning { background: var(--warn-bg); color: var(--warn); border: 1px solid #fde68a; }
.banner--error { background: var(--danger-bg); color: var(--danger); border: 1px solid #fecaca; white-space: pre-wrap; }
.notice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.notice { border-radius: 1rem; padding: 1rem; border: 1px solid var(--line); background: white; }
.notice--safe { border-color: #a7f3d0; background: var(--safe-bg); }
.notice--warn { border-color: #fde68a; background: var(--warn-bg); }
.steps { display: flex; gap: .5rem; overflow-x: auto; margin: 1rem 0; padding: .5rem; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; position: sticky; top: .5rem; z-index: 5; }
.steps a { flex: 0 0 auto; text-decoration: none; color: var(--ink); padding: .55rem .85rem; border-radius: 999px; font-weight: 800; }
.steps a:hover, .steps a:focus { background: #dbeafe; color: #1d4ed8; }
.workspace { display: grid; grid-template-columns: 320px 1fr; gap: 1.25rem; align-items: start; }
.card { background: rgba(255,255,255,.96); border: 1px solid rgba(219,227,239,.95); border-radius: 1.25rem; padding: 1.25rem; box-shadow: var(--shadow); }
.sidebar { position: sticky; top: 5.5rem; }
.flow { display: grid; gap: 1.25rem; }
.step-card { scroll-margin-top: 5.5rem; }
.step-heading { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.step-heading p { margin: .25rem 0 0; color: var(--muted); }
.step-number { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: white; background: var(--brand); font-weight: 900; flex: 0 0 auto; }
label { display: grid; gap: .35rem; font-weight: 800; color: #1e293b; }
input, textarea, select { width: 100%; border: 1px solid #cbd5e1; border-radius: .75rem; padding: .78rem .9rem; font: inherit; color: var(--ink); background: white; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus { outline: 3px solid #bfdbfe; outline-offset: 2px; }
.helper, .optional, .empty { color: var(--muted); font-weight: 500; }
.optional { font-size: .82rem; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-form.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.stack { display: grid; gap: .85rem; }
.form-actions, .publish-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.button { width: auto; border: 0; border-radius: .8rem; padding: .78rem 1rem; background: var(--brand); color: white; font-weight: 900; cursor: pointer; box-shadow: 0 10px 20px rgba(37,99,235,.22); }
.button:hover { background: var(--brand-dark); }
.button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.button--secondary { background: #e2e8f0; color: #0f172a; box-shadow: none; }
.button--secondary:hover { background: #cbd5e1; }
.button--danger { background: var(--danger); box-shadow: 0 10px 20px rgba(185,28,28,.18); }
.button--danger-outline { background: white; color: var(--danger); border: 1px solid #fecaca; box-shadow: none; }
.link-button { border: 0; background: none; color: var(--brand); padding: 0; font-weight: 900; cursor: pointer; text-align: left; }
.loading { color: var(--muted); font-weight: 800; }
.advanced { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.advanced summary { cursor: pointer; font-weight: 900; color: #334155; }
.project-list, .small-list { display: grid; gap: .75rem; }
.mini-card { border: 1px solid var(--line); border-radius: .9rem; padding: .75rem; display: grid; gap: .3rem; background: #f8fafc; }
.mini-card.is-active { border-color: #93c5fd; background: #eff6ff; }
.result { margin-top: 1rem; }
.product-card, .publish-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.label { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 900; margin-bottom: .25rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .75rem; margin: .35rem 0 0; }
.kv dt { color: var(--muted); font-weight: 900; }
.kv dd { margin: 0; }
.inline-alert { border-radius: .85rem; padding: .75rem; margin-top: 1rem; }
.inline-alert--success { background: var(--safe-bg); color: var(--safe); }
.inline-alert--warn { background: var(--warn-bg); color: var(--warn); }
.competitor-list { display: grid; gap: .8rem; }
.competitor-card { border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; background: #fbfdff; }
.competitor-card h3 { margin: .6rem 0 .35rem; }
.selection-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 1rem; padding: .75rem 1rem; margin-top: 1rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-top: 1rem; }
.image-card { border: 2px solid var(--line); border-radius: 1rem; overflow: hidden; background: white; }
.image-card.is-selected { border-color: var(--safe); box-shadow: 0 0 0 4px rgba(4,120,87,.12); }
.image-card img { width: 100%; height: 170px; object-fit: cover; display: block; background: #e2e8f0; }
.image-card__body { display: grid; gap: .35rem; padding: .75rem; }
.image-card small { color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.metrics div, .review-item { border: 1px solid var(--line); border-radius: 1rem; padding: .9rem; background: #f8fafc; }
.metrics span, .review-item span { color: var(--muted); font-size: .85rem; font-weight: 800; display: block; }
.metrics strong, .review-item strong { display: block; margin-top: .25rem; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.review-item.is-ok { border-color: #bbf7d0; background: var(--safe-bg); }
.review-item.is-missing { border-color: #fde68a; background: var(--warn-bg); }
.production-gate { margin-top: 1rem; padding: 1rem; border: 1px solid #fecaca; border-radius: 1rem; background: var(--danger-bg); }
.approval-label { min-width: min(100%, 24rem); flex: 1; }
.debug-block pre { max-height: 28rem; overflow: auto; background: #0f172a; color: #dbeafe; border-radius: .9rem; padding: 1rem; }
@media (max-width: 980px) {
  .hero__inner, .workspace { grid-template-columns: 1fr; display: grid; }
  .status-panel { justify-content: flex-start; }
  .sidebar { position: static; }
  .grid-form.compact, .metrics, .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .notice-grid, .grid-form, .product-card, .publish-result, .metrics, .review-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .hero { padding-top: 1.25rem; }
  .steps { border-radius: 1rem; }
  .button { width: 100%; }
}