:root{
  --primary:#111827;
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0; background:#f3f4f6; color:#111827;}
a{color:var(--primary); text-decoration:none}
.container{max-width:980px; margin:0 auto; padding:24px;}
.card{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px; box-shadow:0 8px 30px rgba(0,0,0,.04)}
.nav{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px}
.nav .links{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer}
.btn.primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.btn.danger{background:#ef4444; color:#fff; border-color:#ef4444}
.grid{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:900px){.grid{grid-template-columns:1.2fr .8fr}}
label{display:block; font-size:13px; color:#374151; margin:10px 0 6px}
input,select{width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; outline:none}
input[type="color"]{height:44px; padding:6px}
small{color:var(--muted)}
.hr{height:1px; background:#e5e7eb; margin:16px 0}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border-bottom:1px solid #e5e7eb; text-align:left; font-size:14px}
.notice{padding:10px 12px; border-radius:10px; background:#ecfeff; border:1px solid #a5f3fc}