:root{

  --border:#e5e7eb;

  --muted:#6b7280;

  --text:#111827;

  --bg:#f6f7fb;

  --card:#ffffff;

  --shadow: 0 16px 45px rgba(0,0,0,.08);

  --r:16px;

}



*{ box-sizing:border-box; }

body{

  margin:0;

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  color:var(--text);

  background: radial-gradient(1200px 700px at 20% 0%, #eef2ff 0%, transparent 60%),

              radial-gradient(1200px 700px at 100% 10%, #ecfeff 0%, transparent 60%),

              var(--bg);

}



.container{max-width:1150px;margin:1.5rem auto;padding:0 1rem;}

.topbar{

  display:flex;align-items:center;justify-content:space-between;

  gap:1rem;flex-wrap:wrap;margin-bottom:1rem;

}

.title{

  display:flex;gap:.75rem;align-items:center;

}

.title h1,.title h2{margin:0;font-size:1.4rem;}

.subtitle{margin:.15rem 0 0;color:var(--muted);font-size:.95rem}



.card{

  background:var(--card);

  border:1px solid var(--border);

  border-radius:var(--r);

  box-shadow: var(--shadow);

  overflow:hidden;

}

.card-head{

  padding:1rem 1rem .75rem;

  border-bottom:1px solid var(--border);

  display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;

}

.card-body{padding:1rem;}



.btn{

  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;

  padding:.55rem .85rem;

  border:1px solid var(--border);

  border-radius:14px;

  text-decoration:none;

  color:var(--text);

  background:#fff;

  cursor:pointer;

  transition: transform .06s ease, background .15s ease;

}

.btn:active{ transform: scale(.98); }

.btn:hover{ background:#f9fafb; }

.btn.primary{ background:#111827;color:#fff;border-color:#111827; }

.btn.primary:hover{ background:#0b1220; }

.btn.danger{ border-color:#fecaca;color:#b91c1c; }

.btn.ghost{ background:transparent; }



.badge{

  display:inline-flex;align-items:center;

  font-size:.8rem;

  padding:.15rem .5rem;

  border:1px solid var(--border);

  border-radius:999px;

  color:var(--muted);

  background:#fff;

}



.table{

  width:100%;

  border-collapse:separate;

  border-spacing:0;

}

.table th, .table td{

  padding:.7rem .75rem;

  border-bottom:1px solid var(--border);

  text-align:left;

  vertical-align:top;

  font-size:.95rem;

}

.table th{

  font-size:.85rem;

  color:var(--muted);

  letter-spacing:.02em;

  text-transform:uppercase;

  background:#fafafa;

}

.table tr:hover td{ background:#fcfcfd; }



.actions{display:flex;gap:.5rem;flex-wrap:wrap;}

.muted{color:var(--muted);}

.searchbar{

  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;

}

input,select{

  padding:.6rem .75rem;

  border:1px solid var(--border);

  border-radius:14px;

  font:inherit;

  background:#fff;

}

input[type="search"]{min-width:240px;}

hr.sep{border:0;border-top:1px solid var(--border);margin:0;}