:root{
  --system-bg:#f5f6f8;
  --system-surface:#ffffff;
  --system-subtle:#eef1f4;
  --system-inverse:#111418;
  --system-text:#12161b;
  --system-muted:#69727d;
  --system-border:#dde2e8;

  --space-xs:.375rem;
  --space-sm:.625rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:3rem;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-card:0 18px 55px rgba(17,20,24,.08);
  --max:1180px;

  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--system-bg)}
body{margin:0;background:var(--system-bg);color:var(--system-text)}
.shell{max-width:var(--max);margin:auto;padding:56px 24px 80px}
.hero{display:grid;gap:14px;margin-bottom:30px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--system-muted)}
h1{font-size:clamp(2.5rem,6vw,5.25rem);line-height:.98;margin:0;letter-spacing:-.05em}
.subtitle{font-size:1.125rem;line-height:1.65;color:var(--system-muted);max-width:780px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:var(--system-surface);border:1px solid var(--system-border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-card)}
.status{grid-column:span 7}
.side{grid-column:span 5}
.full{grid-column:1/-1}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-pill);background:var(--system-subtle);font-weight:700;font-size:.8125rem}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.kicker{font-size:.8125rem;color:var(--system-muted);margin-bottom:8px}
.card h2{font-size:1.5rem;margin:10px 0;letter-spacing:-.025em}
.card p{color:var(--system-muted);line-height:1.65}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
button{border:1px solid var(--system-border);border-radius:12px;background:#fff;padding:12px 16px;font-weight:700;cursor:pointer;min-height:44px}
button.primary{background:var(--system-inverse);color:#fff;border-color:var(--system-inverse)}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.meta div{background:var(--system-subtle);border-radius:14px;padding:14px}
.meta strong{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--system-muted);margin-bottom:6px}
.notice{border:1px dashed var(--system-border);background:rgba(255,255,255,.6)}
footer{margin-top:34px;color:var(--system-muted);font-size:.8125rem}
button:focus-visible,
a:focus-visible{
  outline:3px solid currentColor;
  outline-offset:3px;
}
@media(max-width:850px){
  .status,.side{grid-column:1/-1}
  .meta{grid-template-columns:1fr}
  .shell{padding:36px 18px 56px}
}
@media(max-width:520px){
  .actions{display:grid}
  button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}