:root { color-scheme: dark; }
body { margin:0; background:#0b0f14; color:#e6edf3; font:16px/1.6 system-ui,Segoe UI,Inter; }
a { color:#7cc7ff; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:880px; margin:4rem auto; padding:0 1.25rem; }
.muted { opacity:.75; }

/* nav tabs */
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:1rem;
       padding:.75rem 1rem; background:#0f141b; border-bottom:1px solid #1f2a36; }
.brand a { font-weight:700; font-size:1.1rem; color:#e6edf3; }
.tabs { display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:thin; }
.tab { padding:.45rem .9rem; border-radius:.7rem; border:1px solid transparent; white-space:nowrap; }
.tab:hover { background:#101824; border-color:#1f2a36; }
.tab.active { background:#142033; border-color:#2a3b50; }
.card { background:#0f141b; border:1px solid #1f2a36; border-radius:12px; padding:1rem 1.25rem; margin:1rem 0; }
:root { --brand-size: 32px; }        /* try 32–40px */
.brand-logo {
  height: var(--brand-size);
  width: auto;
  display: block;
}
.brand { padding-left: .25rem; margin-right: .5rem; }  /* a little breathing room */
/* ---- utilities ---- */
.spacer { flex: 1; }                 /* in case you want a spacer div */
.ml-auto { margin-left: auto; }
.ml-8 { margin-left: .5rem; }

/* ---- auth area in the nav (right side) ---- */
.auth-wrapper {
  margin-left: auto;                 /* shove to the far right */
  display: flex; align-items: center; gap: .5rem;
}
.user-email { opacity: .85; font-size: .95rem; }

/* ---- buttons that match your theme ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.42rem .85rem; border-radius:.7rem;
  background:transparent; color:#e6edf3;
  border:1px solid transparent; cursor:pointer; line-height:1;
  transition:background .15s, border-color .15s, filter .15s;
}
.btn.small { padding:.36rem .75rem; font-size:.92rem; }
.btn.primary { background:#142033; border-color:#2a3b50; }
.btn.primary:hover { filter:brightness(1.07); }
.btn.outline { border-color:#1f2a36; }
.btn.outline:hover { background:#101824; border-color:#2a3b50; }
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* ---- inputs (modal) ---- */
.input {
  width:100%; padding:.6rem .75rem; border-radius:.6rem;
  background:#0b0f14; color:#e6edf3; border:1px solid #1f2a36;
}
.input:focus { outline:none; border-color:#2a3b50; box-shadow:0 0 0 2px #142033 inset; }

/* ---- modal ---- */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(1px); }
.modal {
  position:fixed; top:20%; left:50%; transform:translateX(-50%);
  background:#0f141b; border:1px solid #1f2a36; border-radius:12px;
  padding:1rem 1.25rem; width:min(420px,90vw); box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.modal h3 { margin:.25rem 0 1rem; }
.modal .row { display:flex; gap:.5rem; margin-top:.75rem; }

/* ---- account page list ---- */
.kv { list-style:none; padding:0; margin:1rem 0; }
.kv li { display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid #1f2a36; }
.kv li span:first-child { opacity:.8; }