/* The Abyss — minimal, sober, thalasso vibe */
:root{
  --bg0:#05070c;
  --bg1:#0a1322;
  --card:rgba(8,12,18,.68);
  --line:rgba(255,255,255,.10);
  --txt:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.55);
  --accent:rgba(120,200,255,.90);
  --accent2:rgba(65,160,235,.85);
  --danger:rgba(255,140,140,.95);
  --ok:rgba(150,255,200,.95);
  --shadow: 0 25px 70px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 25% 20%, rgba(20,50,80,.45), transparent 60%),
              radial-gradient(1200px 900px at 80% 55%, rgba(10,90,120,.20), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(0,200,255,.07), transparent 60%),
    radial-gradient(700px 700px at 70% 70%, rgba(0,130,255,.06), transparent 60%);
  pointer-events:none;
  filter: blur(0px);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.12em;
  font-size:12px;
  color:var(--muted);
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(120,200,255,.65) 40%, rgba(10,60,90,.2) 70%);
  box-shadow: 0 0 18px rgba(120,200,255,.18);
}
.pill{
  text-decoration:none;
  color:var(--txt);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.08em;
  background: rgba(0,0,0,.18);
}
.pill:hover{border-color: rgba(120,200,255,.25)}
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:48px 18px 28px;
}
.hero{max-width:760px;margin:0 auto 20px}
.kicker{
  color: rgba(120,200,255,.65);
  letter-spacing:.18em;
  font-size:12px;
  margin-bottom:10px;
}
h1{
  margin:0;
  font-size:56px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.muted{color: rgba(255,255,255,.45)}
.sub{
  margin:14px 0 0;
  color: var(--muted);
  font-size:15px;
  line-height:1.6;
}
.card{
  max-width:760px;
  margin:28px auto 0;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.05));
  border-radius:20px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.tabs{
  display:flex;
  gap:10px;
  padding:14px 14px 0;
}
.tab{
  border:1px solid var(--line);
  background: rgba(0,0,0,.10);
  color: var(--muted);
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.10em;
  cursor:pointer;
}
.tab.active{
  color: var(--txt);
  border-color: rgba(120,200,255,.22);
  box-shadow: 0 0 0 3px rgba(120,200,255,.06) inset;
}
.panel{display:none; padding:18px 16px 6px}
.panel.show{display:block}
.label{
  display:block;
  margin:12px 0 6px;
  font-size:12px;
  letter-spacing:.12em;
  color: rgba(255,255,255,.55);
}
.input{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.20);
  color: var(--txt);
  outline:none;
}
.input:focus{
  border-color: rgba(120,200,255,.25);
  box-shadow: 0 0 0 4px rgba(120,200,255,.06);
}
.btn{
  width:100%;
  margin-top:16px;
  padding:14px 14px;
  border-radius:999px;
  border:1px solid rgba(120,200,255,.18);
  background: linear-gradient(180deg, rgba(120,200,255,.14), rgba(60,120,170,.08));
  color: var(--txt);
  font-weight:600;
  letter-spacing:.08em;
  cursor:pointer;
}
.btn:hover{border-color: rgba(120,200,255,.28)}
.hint{
  margin-top:10px;
  color: rgba(255,255,255,.42);
  font-size:12px;
}
.status{
  border-top:1px solid var(--line);
  padding:14px 16px 16px;
}
.msg{min-height:18px; font-size:13px}
.msg.error{color:var(--danger)}
.msg.ok{color:var(--ok)}
.fineprint{margin-top:8px;color:rgba(255,255,255,.40);font-size:12px}
.foot{
  max-width:760px;
  margin:18px auto 0;
  text-align:center;
  color: rgba(255,255,255,.35);
  font-size:12px;
}

/* vault */
.vaultWrap{max-width:980px;margin:0 auto;padding:30px 18px 40px}
.vTitle{font-size:34px;margin:0 0 8px}
.vSub{color:var(--muted);margin:0 0 18px;line-height:1.6}
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.tile{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px;
  background: rgba(0,0,0,.18);
}
.tile h3{margin:0 0 8px; font-size:14px; letter-spacing:.06em}
.tile p{margin:0; color:var(--muted); font-size:13px; line-height:1.55}
.mini{margin-top:10px; color:rgba(255,255,255,.38); font-size:12px}