/* ============================================================
   DASHBOARD — for referrers and partners

   Signed-in, so it drops the star field and the page transition:
   this is somewhere people come to check a number, not to be sold
   to. It keeps the brand's dark ground and display face so it
   still reads as Kellstar rather than as somebody else's tool.

   Chartreuse, matching the referrals page it follows on from.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #0a0c06;
  --panel: #10130b;
  --line: #232a18;
  --line-soft: #191e12;
  --white: #eef2fa;
  --mute: #a8b09a;
  --dim: #77806a;
  --accent: #b5d94f;
  --ok: #6ee7a8;
  --wait: #ffc466;
  --bad: #ff8095;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* The hidden attribute has to win. Any author rule that sets display
   on an element beats the browser default for [hidden], so a panel
   marked hidden in the HTML renders anyway — which is how a sign-up
   field ends up on a sign-in form. */
[hidden] { display: none !important; }

body { background: var(--ink); color: var(--mute); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
code { font-family: var(--mono); font-size: 0.85em; color: var(--accent); }

/* ---------- bar ---------- */

.db__bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem 1.2rem;
  background: rgba(10, 12, 6, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.db__brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.db__brand svg { width: 1.15rem; height: 1.15rem; fill: var(--white); }
.db__brand span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--white); }
.db__who { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--dim); }
.db__btn {
  padding: 0.4rem 0.75rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--mute);
  font: 500 0.75rem var(--sans);
}
.db__btn:hover { border-color: var(--accent); color: var(--white); }
.db__btn--go { border-color: var(--accent); color: var(--accent); }

/* ---------- panels ---------- */

.db { padding: 1.4rem; max-width: 68rem; margin: 0 auto; }

.db__panel {
  max-width: 32rem; margin: 4rem auto;
  padding: 2.2rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel);
}
.db__panel h1 { font-family: var(--serif); font-weight: 400; font-size: 2rem; color: var(--white); line-height: 1.05; }
.db__lede { margin-top: 0.9rem; line-height: 1.65; }
.db__panel label {
  display: block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  margin: 1.4rem 0 0.45rem;
}
.db__panel input {
  width: 100%; padding: 0.75rem 0.9rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--ink); color: var(--white);
  font: 400 0.95rem var(--sans);
}
.db__panel input:focus-visible { outline: none; border-color: var(--accent); }
.db__go {
  width: 100%; margin-top: 1.3rem; padding: 0.8rem;
  border: 0; border-radius: 9px; cursor: pointer;
  background: var(--accent); color: #1b2205; font: 600 0.9rem var(--sans);
}
.db__go:disabled { opacity: 0.6; cursor: default; }
.db__msg { margin-top: 0.9rem; font-size: 0.85rem; line-height: 1.55; }
.db__msg.is-ok { color: var(--ok); }
.db__msg.is-bad { color: var(--bad); }
.db__fine { color: var(--dim); font-size: 0.8rem; line-height: 1.6; margin-top: 1.1rem; }
.db__fine--foot { margin-top: 2rem; text-align: center; }

/* ---------- head ---------- */

.db__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.db__head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--white); line-height: 1; }
.db__k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }
.db__code { text-align: right; }
.db__codeval { font-family: var(--mono); font-size: 1.05rem; color: var(--white); letter-spacing: 0.05em; }

/* ---------- stats ---------- */

.db__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin-bottom: 1rem;
}
.db__stat { background: var(--panel); padding: 1.1rem; }
.db__statv { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; }
.db__statn { color: var(--dim); font-size: 0.72rem; line-height: 1.5; margin-top: 0.45rem; }

/* ---------- accelerator ---------- */

.db__accel {
  border: 1px solid rgba(181, 217, 79, 0.3); border-radius: 12px;
  padding: 1.1rem 1.3rem; margin-bottom: 1.4rem;
  background: rgba(181, 217, 79, 0.05);
}
.db__accel.is-hit { border-color: var(--accent); background: rgba(181, 217, 79, 0.1); }
.db__accelk { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.db__accelbody { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.6; }
.db__accelbody b { color: var(--white); font-weight: 600; }
.db__bar2 { height: 4px; margin-top: 0.9rem; background: rgba(255, 255, 255, 0.07); border-radius: 100px; overflow: hidden; }
.db__bar2 span { display: block; height: 100%; background: var(--accent); transition: width 0.4s ease; }

/* ---------- blocks ---------- */

.db__block {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 1.3rem; margin-bottom: 1rem; background: var(--panel);
}
.db__block h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem;
  color: var(--white); margin-bottom: 0.8rem;
}
.db__block h2 span { font-family: var(--mono); font-size: 0.7rem; color: var(--dim); }

.db__linkrow { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.db__linkrow input {
  flex: 1; min-width: 12rem; padding: 0.65rem 0.85rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--ink); color: var(--white);
  font: 400 0.82rem var(--mono);
}

.db__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.db__fields label {
  display: block; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim);
}
.db__fields input, .db__fields select {
  display: block; width: 100%; margin-top: 0.35rem;
  padding: 0.6rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--ink); color: var(--white);
  font: 400 0.88rem var(--sans);
}
.db__fields input:focus-visible, .db__fields select:focus-visible { outline: none; border-color: var(--accent); }
.db__log .db__go { width: auto; padding: 0.65rem 1.6rem; }

/* ---------- tables ---------- */

.db__tablewrap { overflow-x: auto; }
.db__table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 34rem; }
.db__table th {
  text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); font-weight: 400; white-space: nowrap;
}
.db__table td { padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.db__table td:first-child { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); white-space: nowrap; }
.db__table td b { color: var(--white); }
.db__table td em { display: block; font-style: normal; font-size: 0.72rem; color: var(--dim); margin-top: 0.2rem; }
.db__none { color: var(--dim); text-align: center; padding: 1.6rem !important; font-family: var(--sans) !important; font-size: 0.88rem !important; }

.db__pill {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 100px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  background: rgba(255, 255, 255, 0.06); color: var(--dim);
}
.db__pill.is-ok   { background: rgba(110, 231, 168, 0.15); color: var(--ok); }
.db__pill.is-wait { background: rgba(255, 196, 102, 0.15); color: var(--wait); }
.db__pill.is-bad  { background: rgba(255, 128, 149, 0.15); color: var(--bad); }
.db__pill.is-paid { background: rgba(181, 217, 79, 0.16); color: var(--accent); }

@media (max-width: 800px) {
  .db__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db__fields { grid-template-columns: 1fr; }
  .db__code { text-align: left; }
}
@media (max-width: 520px) {
  .db { padding: 0.8rem; }
  .db__panel { margin: 1.5rem auto; padding: 1.4rem; }
}

/* ============================================================
   ACCOUNT — sign in, join, points

   Added when the dashboard stopped being partner-only. A customer
   who has never referred anyone opens this page too, so the partner
   blocks hide rather than showing empty tables that read like
   something is missing.
   ============================================================ */

.db__panel--wide { max-width: 30rem; }

.db__toggle {
  display: flex; gap: 0.3rem; margin: 1.3rem 0 0.4rem;
  padding: 0.25rem; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25);
}
.db__tab {
  flex: 1; padding: 0.55rem 0.5rem; border: 0; border-radius: 7px;
  background: none; color: var(--dim); cursor: pointer;
  font: 500 0.82rem var(--sans);
}
.db__tab:hover { color: var(--white); }
.db__tab.is-on { background: rgba(181, 217, 79, 0.14); color: var(--white); }

.db__hint {
  font-size: 0.76rem; line-height: 1.55; color: var(--dim);
  margin-top: 0.55rem;
}
.db__hint b { color: var(--mute); font-weight: 500; }

.db__msg.is-good { color: var(--ok); }

/* ---------- points ---------- */

.db__points {
  border: 1px solid var(--line); border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(181, 217, 79, 0.08), transparent 60%),
    var(--panel);
  padding: 1.2rem 1.3rem; margin-bottom: 1.1rem;
}
.db__pointsmain { margin-bottom: 1rem; }
.db__pointsbig {
  font: 400 3rem/1 var(--display, "Instrument Serif", serif);
  color: var(--white); font-variant-numeric: tabular-nums;
  margin: 0.3rem 0 0.35rem;
}
.db__pointsworth { color: var(--accent); font-size: 0.88rem; }

.db__pointsside {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.db__pointsside .db__statv { font-variant-numeric: tabular-nums; }

.db__rules {
  list-style: none; margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: grid; gap: 0.35rem;
}
.db__rules li {
  position: relative; padding-left: 1rem;
  font-size: 0.78rem; line-height: 1.5; color: var(--dim);
}
.db__rules li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  opacity: 0.7;
}

/* ---------- status pills ---------- */

.db__pill--paid, .db__pill--complete, .db__pill--payable {
  color: var(--ok); border-color: rgba(110, 231, 168, 0.35);
}
.db__pill--cancelled, .db__pill--void {
  color: var(--bad); border-color: rgba(255, 128, 149, 0.3);
}
.db__pill--shipped { color: var(--accent); border-color: rgba(181, 217, 79, 0.35); }

@media (max-width: 620px) {
  .db__pointsbig { font-size: 2.4rem; }
  .db__points { padding: 1rem; }
}