/* ===== BioLink – Modern UI Refresh (2025-09) ===== */
:root{
  --bg:#0b1020;
  --bg-soft:#0f162d;
  --card:rgba(20, 26, 56, .9);
  --text:#e8ecff;
  --muted:#9aa4c7;
  --accent:#7c5cff;
  --accent-2:#22d3ee;
  --ring: rgba(124,92,255,.35);
  --shadow: 0 20px 50px rgba(0,0,0,.35);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34,211,238,.12), transparent 60%),
    var(--bg);
  color:var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering:optimizeLegibility;
}
.container{max-width:1100px; margin:auto; padding:24px}
.container.narrow{max-width:720px}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns: 260px 1fr}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }
.card{
  background:var(--card);
  border:1px solid rgba(124,92,255,.12);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid transparent;
  background:linear-gradient(180deg, var(--accent), #5b3ef7);
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(124,92,255,.28);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(124,92,255,.35); }
.btn:active{ transform: translateY(0); }
.btn.ghost{ background: transparent; color: var(--text); border-color: rgba(124,92,255,.35); box-shadow: none; border:1px solid rgba(124,92,255,.35) }
.btn.secondary{ background: linear-gradient(180deg, var(--accent-2), #10b7d3); box-shadow: 0 8px 20px rgba(16,183,211,.28) }
.input, select.input, textarea.input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(124,92,255,.25); background: #0c1330; color: var(--text);
  outline: none; transition: box-shadow .15s ease, border-color .15s ease, background .2s ease;
}
.input:focus, select.input:focus, textarea.input:focus{ border-color: var(--accent); box-shadow: 0 0 0 6px var(--ring) }
label{color:var(--muted); font-weight:600; font-size: .92rem}
.link{
  display:block; padding:15px 16px; margin:12px 0; border-radius:14px;
  background: linear-gradient(180deg, #1a2149, #131a3c); color:#fff; text-decoration:none; font-weight:700;
  border:1px solid rgba(124,92,255,.18); transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.link:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.35) }
.link.featured{ border:1px solid rgba(124,92,255,.5); box-shadow: 0 10px 26px rgba(124,92,255,.25) }
nav.card h3{margin-top:0}
nav.card .btn{ width:100%; margin:6px 0; }
nav.card{ position:sticky; top:18px; align-self:start }
table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; background: rgba(12, 19, 48, .6) }
thead th{ text-align:left; font-size:.85rem; letter-spacing:.2px; color:#cbd5ff; background: rgba(124,92,255,.18); padding:12px 14px }
tbody td{ padding:12px 14px; border-top:1px solid rgba(124,92,255,.12) }
tbody tr:hover td{ background: rgba(124,92,255,.08) }
td .btn{ padding:8px 10px; font-weight:600; border-radius:10px }
.notice{ padding:12px 14px; border-radius:12px; background: rgba(124,92,255,.12); border:1px solid rgba(124,92,255,.35); color:#dbe1ff }
.header{ display:flex; align-items:center; gap:12px; margin-bottom:18px }
.avatar{ width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid rgba(124,92,255,.35) }
.flex{ display:flex; align-items:center; gap:12px; flex-wrap: wrap }
.muted{ color: var(--muted) }
.center{ text-align:center }
.auth-card{ max-width:520px; margin: 40px auto }
.auth-actions{ display:flex; gap:12px; justify-content:space-between; align-items:center }
small.hint{ color:var(--muted); display:block; margin-top:6px }