:root{--bg:#f6f7fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--line:#d1d5db;--brand:#1d4ed8;--danger:#b91c1c;--ok:#166534}
*{box-sizing:border-box;font-family:Arial,sans-serif}
body{margin:0;background:var(--bg);color:var(--text)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#111827;color:#fff;gap:16px;flex-wrap:wrap}
.topbar nav a{color:#fff;text-decoration:none;margin-right:12px}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.grid{display:grid;gap:14px}.grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
label{display:block;font-weight:600;margin-bottom:6px}
input,select,button,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px}
button,.btn{background:var(--brand);color:#fff;border:none;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn-secondary{background:#4b5563}.btn-danger{background:var(--danger)}.btn-ok{background:var(--ok)}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.muted{color:var(--muted)}
.kpi{font-size:28px;font-weight:700}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#e5e7eb;font-size:12px}
.alert{padding:12px;border-radius:10px;margin-bottom:12px}.alert-error{background:#fee2e2;color:#991b1b}.alert-success{background:#dcfce7;color:#166534}
.product-box{display:grid;gap:10px;background:#f9fafb;border:1px dashed #cbd5e1;padding:14px;border-radius:12px}
.center{text-align:center}
@media (max-width:700px){.topbar nav{display:flex;flex-wrap:wrap;gap:10px}}