/* public/assets/style.css — v2 polished dark UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0b1218;
  --panel:#0e1621;
  --elev:#121c2a;
  --border:#1e2a3a;
  --muted:#9fb2c7;
  --text:#e6edf3;
  --text-dim:#c5d3e0;
  --brand:#3aa0ff;
  --brand-2:#154a7a;
  --ok:#0e3b20;
  --ok-b:#1f6a3b;
  --warn:#3a0e13;
  --warn-b:#6a1f28;
}

*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; }
a{ color:#bfe1ff; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:1180px; margin:0 auto; padding:28px; }

.header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.header h1{ font-size:32px; letter-spacing:.2px; margin:0; }

.card{
  background: linear-gradient(180deg, var(--panel), var(--elev));
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

h2{ margin:0 0 12px; font-size:22px; }

.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.table thead th{
  background:#0c1a28;
  color:#cfe5ff;
  text-align:left;
  padding:12px 10px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0;
}
.table tbody td{
  padding:12px 10px; border-bottom:1px solid var(--border);
}
.table tbody tr:hover{ background:#0c1520; }

.badge{
  display:inline-block;
  max-width:260px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:6px 10px; border-radius:999px;
  background:#14283e; border:1px solid #1e3b5d; color:#cfe5ff; font-size:12px;
}

.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px; gap:8px; cursor:pointer;
  background:#0d141d; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
}
.btn:hover{ background:#111a25; }
.btn.brand{ background:#0b2236; border-color:var(--brand-2); color:#cfe5ff; }
.btn.brand:hover{ background:#0e2b45; }
.btn.warn{ background:var(--warn); border-color:var(--warn-b); color:#ffd1d5; }
.btn.warn:hover{ filter:brightness(1.1); }
.btn.ghost{ background:transparent; }

.notice{ color:var(--muted); font-size:13px; }

.input, textarea, select{
  width:100%; background:#0e141b; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
}
textarea{ min-height:180px; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.grid{ display:grid; gap:12px; }

.small{ font-size:12px; color:var(--text-dim); }
.right{ text-align:right; }
.footer{ margin-top:18px; color:var(--muted); font-size:12px; }

/* Banners */
.banner{ background:#0e2f47; border:1px solid #1f4d6a; color:#cde9ff; padding:10px 12px; border-radius:10px; margin-bottom:12px; }
.alert-success{ background:var(--ok); border:1px solid var(--ok-b); color:#c5eed1; padding:12px 14px; border-radius:10px; }
.alert-warn{ background:#33220e; border:1px solid #6a4a1f; color:#ffd9a1; padding:12px 14px; border-radius:10px; }
.alert-error{ background:var(--warn); border:1px solid var(--warn-b); color:#ffd1d5; padding:12px 14px; border-radius:10px; }

/* Mobile */
@media (max-width: 820px){
  .row{ grid-template-columns:1fr; }
  .header{ flex-direction:column; gap:10px; align-items:flex-start; }
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{ border:1px solid var(--border); border-radius:12px; margin:10px 0; padding:10px; background:#0c1520; }
  .table td{ border:none; padding:8px 0; }
  .table td .actions{ justify-content:flex-start; }
}