:root{
  --bg: #000000;
  --surface: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.16);
  --text: #f5f5f7;
  --muted: #c9c9ce;
  --accent: #43d1d1; /* teal */
  --danger: #ff6b6b;
  --warn: #ffca6b;
  --shadow: 0 12px 32px rgba(0,0,0,0.55);
}
*{box-sizing:border-box}
html,body{height:auto; min-height:100%; background:#000;}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background-image:none !important;
  overflow-y:auto;
}
.container{max-width:1180px;margin:32px auto; padding:0 18px 120px;}
.header{display:flex;justify-content:space-between;align-items:center;margin:16px 0 22px}
.header h2{margin:0;font-size:1.35rem;letter-spacing:.2px}
.glass{
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow);
}
/* buttons */
a.btn, button.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:12px;border:1px solid var(--border);
  color:var(--text); text-decoration:none; background: linear-gradient(135deg, rgba(67,209,209,.20), rgba(255,255,255,.05));
}
a.btn:hover, button.btn:hover{transform: translateY(-1px); transition: transform .18s ease, border-color .18s ease; border-color: var(--accent)}
a.btn:focus, button.btn:focus{outline:2px solid var(--accent); outline-offset:2px}
.input, input[type=file], select, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background: var(--surface); color:var(--text); margin:8px 0 12px;
}
label{opacity:.95;font-size:.95rem}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}
.badge{padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.12);font-size:.85rem}
.small{opacity:.9;font-size:.92rem}
.ribbon{border-left:4px solid var(--warn); padding:10px 12px; border-radius:10px; background:rgba(255,202,107,.12)}
.ribbon.danger{border-color:var(--danger); background:rgba(255,107,107,.12)}

/* responsive table -> cards */
@media (max-width: 720px){
  table.table{border:0}
  table.table thead{display:none}
  table.table tr{display:block;margin:10px 0;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;background:rgba(255,255,255,0.04)}
  table.table td{display:flex;justify-content:space-between;gap:12px;border-bottom:0;padding:8px 6px}
  table.table td::before{content:attr(data-label);font-weight:600;opacity:.9}
}