/* Adjust — shared look. Dark field, ice-blue glowing faders. */
:root{
  --bg:#03070B; --bg-2:#07111A;
  --panel:rgba(11,22,32,.72); --panel-2:rgba(16,32,46,.66);
  --line:rgba(130,200,240,.11); --line-2:rgba(130,200,240,.22);
  --ink:#E7F5FF; --ink-2:#86A0B2; --ink-3:#4C6474;
  --glow:#8FDEFF; --glow-2:#45BDF7; --glow-deep:#1C7FB8;
  --glow-soft:rgba(110,205,255,.32);
  --good:#62E6B4; --bad:#FF7383;
  --display:'Unbounded',system-ui,sans-serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:18px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55;
  background:
    radial-gradient(1100px 700px at 104% -14%, rgba(48,150,215,.26), transparent 62%),
    radial-gradient(700px 520px at 92% 2%, rgba(110,200,255,.10), transparent 70%),
    radial-gradient(rgba(255,255,255,.028) 1px, transparent 1.2px) 0 0/22px 22px,
    linear-gradient(180deg, #050B11 0%, var(--bg) 60%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* the light beam from the top-right corner of the artwork */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(222deg, rgba(120,205,255,.13) 0%, rgba(120,205,255,0) 34%),
             linear-gradient(232deg, rgba(120,205,255,.07) 8%, rgba(120,205,255,0) 46%);
  mix-blend-mode:screen;
}
body > *{position:relative; z-index:1}
a{color:inherit}
::selection{background:rgba(110,205,255,.35)}

/* ---------- header ---------- */
header{
  display:flex; align-items:center; gap:12px; padding:14px 26px;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
  background:rgba(3,8,12,.72); backdrop-filter:blur(14px);
}
.mark{width:34px;height:34px;flex:none;border-radius:9px;display:block}
.brand{
  font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em;
  text-decoration:none; color:var(--ink);
  text-shadow:0 0 18px rgba(120,210,255,.35);
}
nav{display:flex; gap:3px; margin-left:16px}
nav button{
  background:none; border:1px solid transparent; font-family:var(--sans); font-weight:700; font-size:14px;
  color:var(--ink-2); padding:7px 14px; border-radius:10px; cursor:pointer;
}
nav button:hover{color:var(--ink)}
nav button[aria-current=true]{color:var(--ink); background:var(--panel-2); border-color:var(--line-2)}
.spacer{margin-left:auto}
.icons{display:flex; align-items:center; gap:9px}
@media(max-width:560px){
  header{padding:12px 14px; gap:8px} nav{margin-left:2px} nav button{padding:7px 9px; font-size:13px}
  .brand{font-size:17px} #xLink{display:none !important} .icons .btn{padding:8px 12px; font-size:13px}
}
@media(max-width:400px){ header .brand{display:none} }

/* ---------- buttons ---------- */
button{font-family:var(--sans); cursor:pointer; color:inherit}
.btn{
  border:1px solid var(--line-2); border-radius:12px; padding:10px 18px;
  font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; display:inline-block;
  background:linear-gradient(180deg, rgba(30,52,70,.75), rgba(12,24,34,.85));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.35);
  transition:border-color .15s, box-shadow .15s;
}
.btn:hover:not(:disabled){border-color:rgba(143,222,255,.45)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.glow{
  color:#03131E; border-color:rgba(190,240,255,.9);
  background:linear-gradient(180deg,#CFF3FF 0%,#8FDEFF 48%,#5CC6F4 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 1px rgba(143,222,255,.25), 0 0 26px rgba(95,200,255,.45);
}
.btn.glow:hover:not(:disabled){box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 1px rgba(143,222,255,.35), 0 0 36px rgba(95,200,255,.65)}
.btn.glow:disabled{filter:saturate(.3); box-shadow:none}
:focus-visible{outline:2px solid var(--glow); outline-offset:2px}

/* ---------- surfaces ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 14px; font-weight:600;
}
.pill{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; border:1px solid var(--line-2); color:var(--ink-2);
}
.pill.grad{color:var(--good); border-color:rgba(98,230,180,.5)}
.pill.fee{color:var(--glow); border-color:rgba(143,222,255,.35)}
.bar{height:8px;border-radius:99px;background:rgba(120,190,235,.08);overflow:hidden;border:1px solid var(--line)}
.bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--glow-deep),var(--glow-2) 60%,var(--glow));
  box-shadow:0 0 12px rgba(110,205,255,.6);
}
[hidden]{display:none !important}