/* Asteri white-first visual system — tokens exactly as spec §0.8. */
:root {
  --app-bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-subtle: #FCFAFB;
  --surface-brand-soft: #FCF6F8;
  --text-primary: #22242B;
  --text-secondary: #626774;
  --text-muted: #7A808C;
  --border: #E4E1E5;
  --border-strong: #D6D1D7;
  --brand-primary: #A5446A;
  --brand-primary-hover: #8D3659;
  --brand-primary-soft: #F8E9EF;
  --brand-rose: #D7A1B6;
  --brand-rose-gold: #B78773;
  --brand-lavender: #8A7AAE;
  --focus: #7C3AED;
  --queued-bg: #F2F4F7;  --queued-text: #475467;
  --working-bg: #FFFAEB; --working-text: #8A4B08;
  --attention-bg: #FEF3F2; --attention-text: #B42318;
  --complete-bg: #ECFDF3; --complete-text: #067647;
  --origin-original: #067647;
  --origin-external-fan: #22242B;
  --origin-my-creation: #B42318;
  --sidebar-width: 230px;
  --topbar-height: 64px;
  --panel-radius: 12px;
  --control-height: 44px;
  --space-page: 24px;
  --space-panel: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--app-bg); color: var(--text-primary);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}
a { color: var(--brand-primary); }
h1 { font-size: 30px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 22px 0 10px; }

button, .btn {
  height: var(--control-height); padding: 0 20px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-primary); font: 600 15px/1 inherit; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--surface-brand-soft); }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-primary-hover); }
button[disabled], .btn[disabled] { opacity: .55; cursor: not-allowed; }

input, select, textarea {
  height: var(--control-height); padding: 0 12px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface); color: var(--text-primary);
  font: 15px inherit; font-family: inherit; width: 100%;
}
textarea { height: auto; padding: 10px 12px; }
label { display: block; font-size: 13.5px; color: var(--text-secondary); margin: 14px 0 5px; font-weight: 600; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--panel-radius); padding: var(--space-panel);
}
.helper-card { background: var(--surface-brand-soft); border-color: var(--brand-rose); }

.status-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.status-queued { background: var(--queued-bg); color: var(--queued-text); }
.status-working { background: var(--working-bg); color: var(--working-text); }
.status-attention { background: var(--attention-bg); color: var(--attention-text); }
.status-complete { background: var(--complete-bg); color: var(--complete-text); }

table.data { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--panel-radius); overflow: hidden; }
table.data th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14.5px; }
table.data tr:last-child td { border-bottom: 0; }

/* shell */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .brandhead { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.sidebar .brandhead img { width: 34px; height: 34px; border-radius: 9px; }
.sidebar .brandhead b { font-size: 18px; letter-spacing: .01em; }
.nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 9px;
  color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 15px;
}
.nav a svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav a:hover { background: var(--surface-subtle); color: var(--text-primary); }
.nav a.active { background: var(--brand-primary-soft); color: var(--brand-primary); }
.nav a.disabled { opacity: .45; cursor: not-allowed; }
.sidebar .foot { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted); }

.topbar { height: var(--topbar-height); display: flex; align-items: center; gap: 16px;
  padding: 0 var(--space-page); border-bottom: 1px solid var(--border); background: var(--surface); }
.topbar .crumb { font-weight: 700; font-size: 16px; }
.topbar .who { margin-left: auto; font-size: 14px; color: var(--text-secondary); display: flex; gap: 12px; align-items: center; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { padding: var(--space-page); max-width: 1100px; width: 100%; margin: 0 auto; }

/* seven-step strip */
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 4px; }
.step { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); }
.step.done { color: var(--complete-text); border-color: var(--complete-bg); background: var(--complete-bg); }
.step.current { color: var(--brand-primary); border-color: var(--brand-rose); background: var(--brand-primary-soft); }

/* empty states may use larger mascot art (spec §0.9) */
.empty { text-align: center; padding: 48px 20px; }
.empty img { max-width: 230px; height: auto; }
.empty h2 { margin-top: 18px; }
.empty p { color: var(--text-secondary); max-width: 440px; margin: 8px auto 20px; }

.note-muted { color: var(--text-muted); font-size: 13.5px; }

@media (prefers-reduced-motion: no-preference) {
  button, .btn, .nav a { transition: background .15s ease, color .15s ease; }
}
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .sidebar .foot { display: none; }
  .nav { flex-direction: row; }
}

/* destructive actions: quiet until hovered, never the primary button */
.btn-danger { color: #b42318; border-color: #f1c4bf; }
.btn-danger:hover { background: #fdecea; border-color: #e5a29a; }