:root{
  --bg:#f3f8fc;
  --card:#ffffff;
  --accent:#3aa9f5;
  --accent-600:#1e8fe0;
  --accent-700:#1174bd;
  --text:#16202a;
  --muted:#63738a;
  --ok:#0ea5e9;
  --err:#e11d48;
  --ring: rgba(58,169,245,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--bg)}
a{color:var(--accent-700);text-decoration:none}
a:hover{text-decoration:underline}
.container{min-height:100dvh;display:grid;place-items:center;padding:24px}
.card{width:min(980px,100%);background:var(--card);border-radius:16px;box-shadow:0 2px 20px rgba(2,24,43,.06);padding:20px 20px 8px;border:1px solid #e6eef6}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.brand{display:flex;align-items:center;gap:10px}
.brand__dot{width:14px;height:14px;border-radius:999px;background:linear-gradient(135deg,var(--accent),#9dd9ff);box-shadow:0 0 0 6px rgba(58,169,245,.12)}
h1{font-size:20px;margin:0}
.badge{background:#eff7ff;color:#0b69b2;border:1px solid #cfe9ff;border-radius:999px;padding:6px 10px;font-size:12px}
.lead{color:var(--muted);margin:4px 0 14px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.row{display:flex;flex-direction:column}
.span-12{grid-column:span 12}
.span-8{grid-column:span 8}
.span-6{grid-column:span 6}
.span-4{grid-column:span 4}
.label{font-size:13px;color:#38546f;margin:4px 0 6px}
.input, select, textarea{
  border:1px solid #d5e3f2;background:#fbfdff;color:var(--text);
  padding:10px 12px;border-radius:10px;outline:none;
}
textarea{min-height:92px;resize:vertical}
.input:focus, select:focus, textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.btn{
  background:var(--accent);color:white;border:0;border-radius:12px;
  padding:10px 14px;font-weight:600;cursor:pointer
}
.btn:hover{background:var(--accent-600)}
.btn:active{transform:translateY(1px)}
.link{color:var(--accent-700)}
.small{font-size:12px;color:var(--muted)}
.banner{
  border:1px solid #bfe5ff;background:#eef8ff;color:#045f99;
  padding:10px 12px;border-radius:10px;margin:10px 0
}
.banner.error{border-color:#ffc2cc;background:#fff0f3;color:#8a102b}
.hidden{display:none}
.table-wrap{overflow:auto;border:1px solid #e5eef7;border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px;border-bottom:1px solid #e9f1f9}
th{background:#f5faff;text-align:left;color:#245179;position:sticky;top:0}
tfoot td{font-weight:600}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.tag{padding:4px 8px;background:#eff7ff;border:1px solid #cfe9ff;color:#0b69b2;border-radius:999px;font-size:12px}
hr{border:0;border-top:1px dashed #dbe8f6;margin:16px 0}
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px}
@media (max-width:720px){.span-6,.span-8,.span-4{grid-column:span 12}}