:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#111;
  --muted:#444;
  --border:#d0d0d0;
  --th:#eaeaea;

  --primary:#0b5ed7;
  --success:#198754;
  --danger:#dc3545;
  --warning:#ffc107;
  --gray:#6c757d;
}

*{ box-sizing:border-box; }
body{ margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
.container{ max-width:1200px;margin:0 auto;padding:14px;background:var(--panel);min-height:100vh; }

.topbar{ display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:2px solid var(--border);margin-bottom:10px; }
.brand{ display:flex;align-items:center;gap:12px;min-width:0; }
.brand img{ height:46px; object-fit:contain; }
.brand .title{ font-size:22px;font-weight:800;margin:0; }

.nav{ display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 12px; }
.nav a{ padding:7px 12px;border:2px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text);background:#fff;font-weight:700; }
.nav a.active{ border-color:var(--primary); color:var(--primary); }
.nav a:hover{ background:#f3f3f3; }

.breadcrumbs{ font-size:13px;margin:6px 0 14px;color:var(--muted); }
.breadcrumbs a{ color:var(--primary); text-decoration:none; }
.breadcrumbs span{ margin:0 4px;color:#999; }

.flash{ padding:12px 12px;border-radius:8px;margin-bottom:12px;font-size:14px;position:relative;transition:opacity .25s ease;border:2px solid var(--border); }
.flash.success{ background:#e9f7ef; }
.flash.error{ background:#fdecee; }
.flash.info{ background:#e7f3ff; }
.flash .flash-close{ border:none;background:transparent;font-size:18px;position:absolute;right:10px;top:6px;cursor:pointer; }

.btn{ padding:7px 10px;border:2px solid var(--border);background:#fff;cursor:pointer;text-decoration:none;color:#000;border-radius:8px;font-size:14px;font-weight:700;display:inline-block; }
.btn-save{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-toggle{ background:var(--gray); border-color:var(--gray); color:#fff; }
.btn-activate{ background:var(--success); border-color:var(--success); color:#fff; }
.btn-del{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-used{ background:var(--warning); border-color:var(--warning); color:#000; }

table{ border-collapse:separate; border-spacing:0; width:100%; }
th,td{ padding:10px; border-bottom:1px solid var(--border); }
th{ background:var(--th); text-align:left; border-top:2px solid var(--border); }
tr:nth-child(even) td{ background:#fafafa; }
tr:hover td{ background:#f2f7ff; }

@media (max-width: 820px){
  table.responsive thead{ display:none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td{ display:block; width:100%; }
  table.responsive tr{
    border:2px solid var(--border);
    border-radius:10px;
    margin:10px 0;
    overflow:hidden;
  }
  table.responsive td{
    border:none;
    border-bottom:1px solid var(--border);
    display:flex;
    gap:10px;
    justify-content:space-between;
    align-items:center;
    padding:12px;
  }
  table.responsive td:last-child{ border-bottom:none; }
  table.responsive td::before{
    content: attr(data-label);
    font-weight:900;
    color:#000;
    padding-right:10px;
  }
  .actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
}

@media print{ .no-print{ display:none !important; } }