:root{--accent:#d6336c;--muted:#6b7280;--bg:#f8fafc}
*{box-sizing:border-box} body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;background:var(--bg);color:#111}
.container{max-width:980px;margin:24px auto;padding:0 16px}
.hero{background:linear-gradient(90deg,#fff 0,#fff);padding:28px 0;text-align:center}
h1{color:var(--accent);margin:0;font-size:clamp(22px,4vw,36px)}
.subtitle{color:var(--muted);margin-top:8px}
.card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 8px 30px rgba(15,23,42,0.06);margin-bottom:18px}
form label{display:block;margin-bottom:10px} input{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef6}
.actions{margin-top:12px} .btn{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:10px;cursor:pointer}
.grid{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:800px){.grid{grid-template-columns:1fr 320px}}
.muted{color:var(--muted)} .table{width:100%;border-collapse:collapse} .table th,.table td{padding:10px;border-bottom:1px solid #eef2f7}
.small{padding:6px 8px;font-size:13px}
.info{color:var(--muted);margin-top:10px}
.error{color:#b00020}