:root{
  --accent:#3D6CFF;
  --bg:#f3f5f9;
  --card:#ffffff;
  --line:#e7e9f2;
  --txt:#0f172a;
  --muted:#667085;
  --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;display:flex;font:14px/1.4 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--txt);background:linear-gradient(180deg,#f6f8ff 0,#eef1ff 100%) fixed;
}

.sidebar{
  width:230px; background:#0b1220; color:#c7d2fe; display:flex; flex-direction:column;
  border-right:1px solid #101828;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 10px}
.brand .logo{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;font-weight:700;
}
.brand .title{font-weight:700;color:#e5e7eb}
.menu{display:flex;flex-direction:column;padding:6px}
.menu .item{
  padding:10px 12px;margin:2px 4px;border-radius:8px;color:#e5e7eb;text-decoration:none;
  display:block;cursor:pointer;user-select:none
}
.menu .item:hover{background:#101828}
.menu .item.active{background:#111b2e;outline:1px solid #1f2861}
.menu .item.danger{color:#fecaca}
.userbox{margin-top:auto;padding:14px;border-top:1px solid #111827;font-size:12px}
.userbox .muted{color:#94a3b8}

.content{flex:1;display:flex;flex-direction:column;padding:22px;gap:16px}
.toolbar{
  display:flex;align-items:center;justify-content:space-between;background:transparent;
}
.left,.right{display:flex;gap:10px;align-items:center}
.btn{
  border:1px solid var(--line); background:#fff; color:#0f172a; border-radius:8px;
  padding:8px 12px; cursor:pointer;
}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.btn:active{transform:translateY(1px)}
.input,.select{
  height:36px; border:1px solid var(--line); background:#fff; border-radius:8px; padding:0 10px;
}
.link{color:var(--muted);text-decoration:none}
.link:hover{color:var(--accent)}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute;top:110%;left:0;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 30px rgba(16,24,40,.08);padding:6px;display:none;z-index:10
}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu button{
  width:100%;text-align:left;background:transparent;border:0;padding:8px;border-radius:6px;cursor:pointer
}
.dropdown-menu button:hover{background:#f5f6fb}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;
  box-shadow:0 10px 40px rgba(16,24,40,.06)
}
.hidden{display:none}

.table{width:100%}
.thead,.row{
  display:grid; grid-template-columns: 48px 1fr 120px 140px 120px 120px; align-items:center;
  border-bottom:1px solid var(--line); min-height:46px; padding:0 12px
}
.thead{background:#f7f8ff; color:#475569; font-weight:700}
.c{padding:6px 8px}
.c-check{display:grid;place-items:center}
.grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w100{width:100px}
.w120{width:120px}

.row.empty{justify-content:center;display:flex;padding:28px;color:var(--muted)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
.badge.active{background:#ecfdf5;color:#047857}
.badge.paused{background:#fff7ed;color:#b45309}
.badge.blocked{background:#fef2f2;color:#b91c1c}

.dialog{
  min-width:420px;display:flex;flex-direction:column;gap:12px;padding:10px
}
dialog{border:0;border-radius:16px;box-shadow:0 20px 60px rgba(16,24,40,.25)}
label{display:flex;flex-direction:column;gap:6px}
input[type=text],input[type=email],select{
  height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff
}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.empty-card{padding:36px;color:var(--muted)}