:root {
  --brand: #ac1f23;
  --brand-dark: #791216;
  --ink: #211d1e;
  --muted: #756f71;
  --line: rgba(172, 31, 35, 0.16);
  --paper: #fff;
  --shadow: 0 24px 70px rgba(77, 16, 20, 0.14);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f8f5f5;
}

.shell { width: min(100%, 520px); margin: 0 auto; min-height: 100vh; background: #fff; }
.topbar { display:flex; align-items:center; gap:12px; padding:18px 22px 12px; }
.logo {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--brand);
  display:grid; place-items:center; color:var(--brand); font-size:10px; font-weight:800;
  background: radial-gradient(circle at 28% 20%, #fff, #f4e9ff 35%, #e6fbff 62%, #fff3e7);
}
.topbar strong { font-size: 19px; }
.holo {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.98), rgba(225,242,255,.72) 24%, transparent 48%),
    radial-gradient(circle at 82% 18%, rgba(255,226,238,.72), transparent 42%),
    linear-gradient(130deg, #fff8f4, #eef2ff 37%, #fff 58%, #f7eaff 78%, #eafffb);
}
.hero { margin: 10px 20px 24px; padding: 24px; border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.eyebrow { color:var(--brand); font-size:12px; letter-spacing:.13em; font-weight:800; text-transform:uppercase; }
h1 { font-size:32px; line-height:1.08; margin:12px 0 8px; }
.status { display:flex; align-items:center; gap:8px; color:#2a7a48; font-weight:700; }
.dot { width:10px; height:10px; border-radius:50%; background:#36b768; box-shadow:0 0 0 5px rgba(54,183,104,.12); }
.card { margin: 0 20px 18px; padding:22px; border-radius:24px; border:1px solid #eee7e8; background:#fff; }
.card h2 { margin:0 0 18px; font-size:21px; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.metric { padding:16px; border-radius:18px; background:#faf7f7; }
.metric span { display:block; color:var(--muted); font-size:13px; margin-bottom:6px; }
.metric strong { font-size:21px; }
.progress { height:9px; border-radius:99px; background:#eee8e9; overflow:hidden; margin:18px 0 8px; }
.progress > div { height:100%; background:var(--brand); border-radius:inherit; }
.button { width:100%; border:0; border-radius:17px; padding:16px 18px; font:inherit; font-weight:800; cursor:pointer; }
.button.primary { color:#fff; background:var(--brand); box-shadow:0 12px 28px rgba(172,31,35,.24); }
.button.secondary { color:var(--brand); background:#f8eded; }
.stack { display:grid; gap:12px; }
.server-row { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid #eee8e9; }
.server-row:last-child { border-bottom:0; }
.server-state { color:#2a7a48; font-weight:700; }
.page-title { padding: 8px 22px 4px; }
.page-title h1 { margin-bottom:6px; }
.page-title p { margin:0; color:var(--muted); }
label { display:block; margin:0 0 15px; color:var(--muted); font-size:14px; font-weight:650; }
input { width:100%; margin-top:7px; padding:14px 15px; border:1px solid #ddd3d5; border-radius:14px; font:inherit; color:var(--ink); background:#fff; }
input:focus { outline:3px solid rgba(172,31,35,.10); border-color:var(--brand); }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 20px; }
.check { display:flex; align-items:center; gap:9px; padding:13px; border:1px solid #e7dddf; border-radius:14px; color:var(--ink); }
.check input { width:auto; margin:0; accent-color:var(--brand); }
.preview { display:none; margin-top:18px; padding:16px; border-radius:16px; background:#f8f3f3; line-height:1.55; }
.preview.visible { display:block; }
.safe { color:#8a6512; font-size:13px; margin:12px 0 0; }
.client-row { display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid #eee8e9; }
.client-row:last-child { border-bottom:0; }
.client-row small { display:block; margin-top:4px; color:var(--muted); }
.client-row > span { white-space:nowrap; color:var(--muted); font-size:13px; }
.foot { padding:20px; color:#9a9294; text-align:center; font-size:12px; }
@media (prefers-reduced-motion:no-preference) { .button { transition: transform .16s ease, box-shadow .16s ease; } .button:active { transform:scale(.985); } }