:root{
  --bg:#0f1115;
  --card:#151a22;
  --border:#2a3241;
  --text:#e7eaf0;
  --muted:#9aa5b1;
  --btn:#202838;
  --btn2:#2b3750;
  --primary:#3b82f6;
}

*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.topbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:#0c0f14;
  border-bottom:1px solid var(--border);
}
.container{ padding:16px; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.card-header{
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.card-body{ padding:16px; }
.title{ font-weight:700; font-size:16px; }
.subtitle{ font-size:13px; color:var(--muted); }

.btn{
  background:var(--btn);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{ background:var(--btn2); }
.btn-primary{
  background:rgba(59,130,246,.2);
  border-color:rgba(59,130,246,.4);
}
.icon-btn{
  background:transparent;
  border:0;
  color:var(--text);
  font-size:18px;
  cursor:pointer;
}

/* Modal */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:9999;
  align-items:center;
  justify-content:center;
}
.modal{
  width:min(620px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.modal-header,.modal-footer{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.modal-footer{ border-bottom:0; border-top:1px solid var(--border); }
.modal-body{ padding:14px; }
.modal-title{ font-weight:700; }

/* Toast */
.toast{
  position:fixed;
  left:16px;
  bottom:16px;
  background:#0c0f14;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  opacity:0;
  transform: translateY(10px);
  transition: .2s;
  z-index:10000;
  pointer-events:none;
}
.toast.show{
  opacity:1;
  transform: translateY(0);
}