/* ===== Phantom base (trimmed & modernized for dark) ===== */
:root{
  --bg:#0f0f10; --bg2:#151517; --panel:#1b1c1f; --panel2:#232428;
  --text:#e7e7ea; --muted:#a9abb3; --line:#2a2c31; --line2:#242529;
  --accent:#bbbbc4; /* neutral, no pink/red hovers */
  --green:#3ee53e; --yellow:#ffd700; --red:#ff5c5c;
  --btn-bg:#2b2c31; --btn-bg-h:#2f3137; --btn-txt:#e7e7ea;
  --btn-br:#3a3c44;
  --th-bg:#2a2a2f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.0)}
a:hover{color:inherit;border-bottom-color:transparent}
h1,h2,h3{line-height:1.1;margin:0 0 .75rem}
h1{font-size:2.1rem} h2{font-size:1.5rem}

#wrapper{min-height:100%;display:flex;flex-direction:column}
#header,#footer{background:var(--bg2)}
#header .inner,#main .inner,#footer .inner{max-width:1100px;margin:0 auto;padding:18px}
.logo{display:inline-flex;gap:.6rem;align-items:center;font-weight:700}
.logo .symbol img{width:38px;height:38px;display:block}

/* ===== Buttons (grey pills) ===== */
.button{display:inline-flex;align-items:center;justify-content:center;
  background:var(--btn-bg);color:var(--btn-txt);border:1px solid var(--btn-br);
  padding:.7rem 1rem;border-radius:999px;transition:background .15s ease,transform .05s ease;
  white-space:nowrap}
.button:hover{background:var(--btn-bg-h);transform:translateY(-1px)}
.button.primary{background:#3a3f4a}
.actions{list-style:none;margin:0;padding:0}
.actions li{display:inline-flex;margin:0 .4rem .6rem}

/* Header nav (centered, wrapping) */
#header .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:14px}
#header .actions li{flex:1 1 180px}
#header .actions .button{width:100%}

/* Optional grid of buttons on members page */
.button-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  max-width:920px;margin:10px auto 4px}

/* ===== Tables ===== */
.table-wrapper{overflow:auto;max-width:100%}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line)}
th,td{padding:10px 12px;border:1px solid var(--line2);text-align:center;vertical-align:middle}
thead th{position:sticky;top:0;background:var(--th-bg);z-index:2}
tbody tr:nth-child(even){background:var(--panel2)}
td.left, th.left{text-align:left}

/* Probability colors (text color) */
td.green{color:var(--green)}
td.yellow{color:var(--yellow)}
td.red{color:var(--red)}

/* Page titles & notes */
h1.page{margin:8px 0 14px}
.legend{display:flex;gap:16px;align-items:center;margin:.4rem 0 .8rem;color:var(--muted);font-size:.95rem}
.badge{display:inline-block;padding:.2rem .45rem;border-radius:.4rem;border:1px solid var(--line2);background:var(--panel2)}
.badge.green{color:var(--green);border-color:rgba(62,229,62,.35)}
.badge.yellow{color:var(--yellow);border-color:rgba(255,215,0,.35)}
.badge.red{color:var(--red);border-color:rgba(255,92,92,.35)}

/* Forms (login/signup) */
.fields{display:grid;gap:.8rem}
.field input{width:100%;padding:.75rem .9rem;border-radius:.6rem;border:1px solid var(--line2);
  background:#121316;color:var(--text)}
.actions.special{justify-content:center}