/* ProfitProphet — one design system for the marketing site and the logged-in portal.
 *
 * COLOR RULE (from the logo: a green rising arrow over a gold coin):
 *   GREEN  = the brand. Primary actions, active nav/tabs, success, "go".
 *   GOLD   = money. Price/value figures, Premium tier markers, gold-denominated numbers.
 *            Never a generic button — a gold button reads as "buy" and dilutes the Premium cue.
 *   RED    = losses and destructive actions only.
 *
 * Pages previously each declared their own :root with four different naming conventions
 * (--bg-elev / --elev / --panel, --text-dim / --dim, --border / --line). The aliases below
 * keep all of that legacy CSS working while every page resolves to identical values.
 */

:root{
  /* surfaces */
  --bg:#0b0f14;
  --bg-elev:#11161d;
  --bg-elev-2:#151b23;
  --border:#232a33;
  --line-soft:#1c2530;

  /* type */
  --text:#e6e9ed;
  --text-dim:#8b98a5;
  --text-dimmer:#5f6b78;

  /* brand */
  --green:#2ecc71;
  --green-bright:#4ade80;
  --green-dim:rgba(46,204,113,.14);
  --green-line:rgba(46,204,113,.32);

  /* money */
  --gold:#d4a24c;
  --gold-bright:#e8c17a;
  --gold-dim:rgba(212,162,76,.14);
  --gold-line:rgba(212,162,76,.35);

  /* state */
  --red:#ef4444;
  --red-dim:rgba(239,68,68,.14);
  --amber:#e0a63a;
  --blue:#3b82f6;
  --blue-dim:rgba(59,130,246,.14);
  --discord:#5865F2;

  --radius:12px;
  --max:1120px;

  /* ---- aliases: legacy per-page token names, mapped to the canonical values ---- */
  --elev:var(--bg-elev);
  --elev2:var(--bg-elev-2);
  --panel:var(--bg-elev);
  --panel2:var(--bg-elev-2);
  --line:var(--border);
  --ink:var(--text);
  --dim:var(--text-dim);
  --dimmer:var(--text-dimmer);
  --gold2:var(--gold-bright);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',Inter,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

/* ---------- buttons ---------- */
.pp-b{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:8px;border:1px solid transparent;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:opacity .15s,border-color .15s,background .15s;
}
.pp-b:hover{opacity:.9;text-decoration:none;}
.pp-b:active{transform:scale(.985);}
.pp-b:disabled,.pp-b[disabled]{opacity:.55;cursor:default;transform:none;}
.pp-b-sm{padding:8px 14px;font-size:13px;}
.pp-b-lg{padding:14px 26px;font-size:15px;}

/* primary = green. The default action on every page. */
.pp-b-primary{background:var(--green);color:#06210f;}
/* secondary = outlined, neutral */
.pp-b-ghost{background:transparent;border-color:var(--border);color:var(--text);}
.pp-b-ghost:hover{border-color:var(--text-dim);}
/* quiet = low-emphasis inline action */
.pp-b-quiet{background:transparent;border-color:var(--border);color:var(--text-dim);}
.pp-b-quiet:hover{color:var(--text);border-color:var(--text-dim);}
/* gold = MONEY ONLY: upgrade/checkout/Premium. Deliberately rare. */
.pp-b-gold{background:var(--gold);color:#241703;}
.pp-b-danger{background:transparent;border-color:var(--red);color:var(--red);}

/* ---------- surfaces ---------- */
.pp-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;}
.pp-card-pro{border-color:var(--gold-line);}
.pp-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0 0 8px;font-weight:600;}
.pp-muted{color:var(--text-dim);font-size:13px;}

/* ---------- badges / pills ---------- */
.pp-badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;background:var(--green-dim);color:var(--green);
  border:1px solid var(--green-line);}
.pp-badge-gold{background:var(--gold-dim);color:var(--gold);border-color:var(--gold-line);}
.pp-badge-dim{background:rgba(139,152,165,.12);color:var(--text-dim);border-color:var(--border);}

/* ---------- shared top bar (portal pages) ---------- */
.pp-top{display:flex;align-items:center;gap:14px;padding:12px 20px;
  border-bottom:1px solid var(--border);background:#0d1218;}
.pp-top .pp-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;
  color:var(--text);text-decoration:none;flex-shrink:0;}
.pp-top .pp-brand img{width:28px;height:28px;border-radius:7px;}
.pp-top .pp-brand span{color:var(--green);}
.pp-top .pp-spacer{flex:1;}
.pp-top a.pp-navlink{font-size:13px;color:var(--text-dim);text-decoration:none;font-weight:500;white-space:nowrap;}
.pp-top a.pp-navlink:hover{color:var(--text);}
.pp-top a.pp-navlink.on{color:var(--green);}
.pp-top .pp-who{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);}
.pp-top .pp-who img{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);}

@media (max-width:640px){
  .pp-top{gap:10px;padding:10px 14px;flex-wrap:wrap;}
  .pp-top a.pp-navlink{font-size:12px;}
}

/* ---------- money ---------- */
.pp-val{color:var(--gold);font-variant-numeric:tabular-nums;}
.pp-up{color:var(--green);} .pp-down{color:var(--red);} .pp-flat{color:var(--text-dim);}

/* ---------- misc ---------- */
.pp-empty{color:var(--text-dim);font-size:13px;text-align:center;padding:26px 10px;}
a{color:var(--green);}
a:hover{text-decoration:underline;}