/* Praxis by MNA Research -- shared brand layer for subscriber pages.
   Tokens/fonts mirror mnaresearch.com (Cinzel / Cormorant Garamond / Manrope, gold on deep navy). */

@font-face { font-family:'Cinzel'; font-style:normal; font-weight:400 600; font-display:swap;
             src:url('/static/fonts/cinzel-latin.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:300 600; font-display:swap;
             src:url('/static/fonts/manrope-latin.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 500; font-display:swap;
             src:url('/static/fonts/cormorant-latin.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
             src:url('/static/fonts/cormorant-italic-latin.woff2') format('woff2'); }

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

:root {
  --bg:#070b11; --surface:#0b111a; --surface2:#101826; --divider:#1c2534;
  --border:rgba(201,161,74,0.16); --border-strong:rgba(201,161,74,0.34);
  --text:#ead9b0; --text-soft:#c8b98f; --muted:#8d8672; --faint:#5d5949;
  --gold:#c9a14a; --gold-bright:#e8c877; --steel:#9fb4d0;
  --green:#5fbf86; --red:#e07a6f; --amber:#d9a441;
  --font-display:'Cinzel',Georgia,serif;
  --font-accent:'Cormorant Garamond',Georgia,serif;
  --font-body:'Manrope',-apple-system,'Segoe UI',sans-serif;
  --radius-sm:0.375rem; --radius-lg:0.875rem;
}

body {
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:14px; line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased;
}

a { color:var(--gold-bright); }

/* ---------- Auth screens (login / forgot / set / change / error) ---------- */
body.auth {
  display:flex; align-items:center; justify-content:center; padding:32px 16px;
  background:
    linear-gradient(180deg, rgba(7,11,17,0.70) 0%, rgba(7,11,17,0.93) 65%, #070b11 100%),
    url('/static/img/praxis-hero-bg.jpg') center 28% / cover no-repeat fixed,
    var(--bg);
}
.card {
  background:rgba(11,17,26,0.93); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:38px 36px 32px; width:100%; max-width:420px;
  box-shadow:0 18px 50px rgba(0,0,0,0.55); backdrop-filter:blur(6px);
}
.logo { text-align:center; margin-bottom:26px; }
.logo::before {
  content:''; display:block; width:96px; height:96px; margin:0 auto 12px;
  background:url('/static/img/praxis-emblem.png') center/contain no-repeat;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.65));
}
.logo h1 {
  font-family:var(--font-display); font-weight:600; font-size:1.5rem;
  letter-spacing:0.42em; padding-left:0.42em; color:var(--gold-bright);
}
.logo p {
  font-family:var(--font-display); font-weight:500; font-size:0.66rem; letter-spacing:0.34em;
  padding-left:0.34em; text-transform:uppercase; color:var(--muted); margin-top:7px;
}
.logo::after {
  content:''; display:block; width:64px; height:1px; margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-title {
  font-family:var(--font-accent); font-style:italic; font-size:1.4rem; text-align:center;
  color:var(--text); margin-bottom:18px;
}
.subtitle { text-align:center; color:var(--text-soft); font-size:0.86rem; margin-bottom:22px; }
.subtitle span { color:var(--gold-bright); font-weight:600; }

body.auth label {
  display:block; font-family:var(--font-display); font-size:0.68rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--text-soft); margin-bottom:7px;
}
body.auth input[type="email"], body.auth input[type="password"], body.auth input[type="text"] {
  width:100%; background:rgba(7,11,17,0.92); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--font-body); font-size:0.95rem; padding:12px 14px;
  outline:none; margin-bottom:18px; transition:border-color .2s, box-shadow .2s;
}
body.auth input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,161,74,0.14); }

body.auth button[type="submit"] {
  width:100%; border:none; border-radius:var(--radius-sm); cursor:pointer; padding:14px;
  font-family:var(--font-display); font-weight:600; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase;
  color:#1a1404; background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow:0 4px 24px rgba(201,161,74,0.22); transition:filter .2s, box-shadow .2s;
}
body.auth button[type="submit"]:hover { filter:brightness(1.07); box-shadow:0 6px 30px rgba(201,161,74,0.32); }

.error, .success, .welcome-banner {
  border-radius:var(--radius-sm); font-size:0.85rem; padding:11px 14px; margin-bottom:20px; text-align:center;
}
.error   { background:rgba(224,122,111,0.10); border:1px solid rgba(224,122,111,0.38); color:#f0b6ae; }
.success, .welcome-banner { background:rgba(95,191,134,0.10); border:1px solid rgba(95,191,134,0.36); color:#a9e0c2; }
.error a { color:var(--gold-bright); text-decoration:underline; }

.hint { font-size:0.74rem; color:var(--muted); margin:-10px 0 18px; }
.footer-link, .back-link { text-align:center; margin-top:22px; font-size:0.8rem; color:var(--muted); }
.footer-link a, .back-link a { color:var(--gold-bright); text-decoration:none; }
.footer-link a:hover, .back-link a:hover { text-decoration:underline; }
.expired { text-align:center; color:var(--text-soft); }
.expired p { margin-bottom:8px; }

/* error page */
.code { font-family:var(--font-display); font-size:0.7rem; letter-spacing:0.34em; color:var(--gold); text-align:center;
        text-transform:uppercase; margin-bottom:10px; }
.card > h1 { font-family:var(--font-accent); font-weight:500; font-size:1.7rem; text-align:center; color:var(--text); margin-bottom:8px; }
.card > p { color:var(--text-soft); text-align:center; margin-bottom:22px; }
a.btn {
  display:block; text-align:center; text-decoration:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:12px; color:var(--gold-bright); font-family:var(--font-display); font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase;
}
a.btn:hover { background:rgba(201,161,74,0.08); }

/* ---------- App shell (dashboard hub / account) ---------- */
.topbar {
  background:rgba(7,11,17,0.94); border-bottom:1px solid var(--border); min-height:56px;
  display:flex; align-items:center; gap:16px; padding:8px 28px; position:sticky; top:0; z-index:100;
  backdrop-filter:blur(8px); flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--font-display); font-weight:600;
         font-size:0.9rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-bright); white-space:nowrap; }
.brand img { width:34px; height:34px; object-fit:contain; display:block; }
.brand em { font-style:normal; font-weight:500; font-size:0.8em; color:var(--text-soft); margin-left:2px; }
.brand em span { color:var(--gold); }
.pill { font-family:var(--font-display); font-size:0.62rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
        color:var(--gold); border:1px solid var(--border-strong); background:rgba(201,161,74,0.07);
        padding:5px 11px; border-radius:3px; white-space:nowrap; }
.topbar-spacer { flex:1; }
.topbar-right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.feed-live { display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-size:0.66rem; letter-spacing:0.16em;
             text-transform:uppercase; color:var(--green); }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.topbar-quicklinks { display:flex; align-items:center; gap:14px; }
.topbar-quicklink { display:flex; align-items:center; gap:6px; color:var(--text-soft); text-decoration:none; font-size:0.74rem;
                    letter-spacing:0.04em; white-space:nowrap; transition:color .15s; }
.topbar-quicklink:hover { color:var(--gold-bright); }
.tq-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.topbar-email { font-size:0.74rem; color:var(--muted); text-decoration:none; }
.topbar-email:hover { color:var(--text-soft); }
.logout-btn { font-family:var(--font-display); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-soft);
              background:none; border:1px solid var(--border); border-radius:3px; padding:6px 13px; cursor:pointer; transition:.15s; }
.logout-btn:hover { color:var(--gold-bright); border-color:var(--border-strong); }

.hero {
  position:relative; padding:64px 28px 56px; text-align:center; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(7,11,17,0.55) 0%, rgba(7,11,17,0.85) 70%, var(--bg) 100%),
    url('/static/img/praxis-hero-bg.jpg') center 30% / cover no-repeat;
  border-bottom:1px solid var(--border);
}
.hero .eyebrow { font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.42em; padding-left:0.42em; color:var(--gold);
                 text-transform:uppercase; margin-bottom:16px; text-shadow:0 2px 18px rgba(7,11,17,0.9); }
.hero h1 { font-family:var(--font-accent); font-weight:500; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.12; color:var(--text);
           margin-bottom:14px; text-shadow:0 2px 24px rgba(7,11,17,0.9); }
.hero h1 em { font-style:italic; color:var(--gold-bright); }
.hero .lede { max-width:620px; margin:0 auto; color:var(--text-soft); font-size:0.95rem; text-shadow:0 2px 14px rgba(7,11,17,0.9); }

.page { max-width:1040px; margin:0 auto; padding:38px 28px 40px; }
.page.narrow { max-width:700px; }
.section-header { display:flex; align-items:center; gap:16px; margin:34px 0 18px; }
.section-header:first-child { margin-top:0; }
.section-label { font-family:var(--font-display); font-size:0.7rem; font-weight:600; letter-spacing:0.32em; text-transform:uppercase; color:var(--gold); }
.section-line { flex:1; height:1px; background:linear-gradient(90deg, var(--border-strong), transparent); }

.product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:12px; }
.product-card {
  position:relative; display:block; text-decoration:none; color:inherit; padding:26px 28px 24px;
  background:linear-gradient(180deg, var(--surface2), var(--surface)); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s;
}
.product-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.product-card.spx-card::before { background:linear-gradient(90deg, transparent, var(--gold-bright), transparent); }
.product-card.spy-card::before { background:linear-gradient(90deg, transparent, var(--steel), transparent); }
.product-card:hover { border-color:var(--border-strong); transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,0.45); }
.card-ticker { font-family:var(--font-display); font-size:0.64rem; letter-spacing:0.28em; text-transform:uppercase; margin-bottom:11px; }
.card-ticker.spx { color:var(--gold); } .card-ticker.spy { color:var(--steel); }
.card-title { font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:0.06em; color:var(--text); margin-bottom:9px; }
.card-desc { font-size:0.82rem; color:var(--text-soft); line-height:1.65; margin-bottom:16px; }
.card-features { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.card-feature { font-size:0.76rem; color:var(--muted); display:flex; align-items:center; gap:10px; }
.card-feature::before { content:''; width:5px; height:5px; background:var(--gold); opacity:.7; transform:rotate(45deg); flex-shrink:0; }
.card-cta { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:0.68rem; font-weight:600;
            letter-spacing:0.16em; text-transform:uppercase; padding:9px 16px; border-radius:var(--radius-sm); transition:background .2s; }
.card-cta.spx { color:var(--gold-bright); border:1px solid var(--border-strong); background:rgba(201,161,74,0.07); }
.card-cta.spy { color:var(--steel); border:1px solid rgba(159,180,208,0.34); background:rgba(159,180,208,0.06); }
.product-card:hover .card-cta { background:rgba(201,161,74,0.14); }

.info-panel { display:grid; grid-template-columns:repeat(3,1fr); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.info-cell { padding:18px 22px; border-right:1px solid var(--border); }
.info-cell:last-child { border-right:none; }
.info-cell-label { font-family:var(--font-display); font-size:0.64rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold); margin-bottom:7px; }
.info-cell-val { font-size:0.8rem; color:var(--text-soft); line-height:1.6; }
.info-cell-val a { color:var(--gold-bright); text-decoration:none; }
.info-cell-val a:hover { text-decoration:underline; }

.legal-foot { max-width:1040px; margin:6px auto 0; padding:22px 28px 34px; text-align:center; font-size:0.68rem; line-height:1.6; color:var(--faint);
              border-top:1px solid var(--divider); }
.legal-foot strong { color:var(--gold); letter-spacing:0.12em; }

/* account page */
.info-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:4px 0; }
.info-row { display:flex; align-items:center; justify-content:space-between; padding:15px 22px; border-bottom:1px solid var(--divider); }
.info-row:last-child { border-bottom:none; }
.info-label { font-size:0.8rem; color:var(--muted); }
.info-val { font-size:0.88rem; font-weight:600; color:var(--text); }
.badge { display:inline-block; font-family:var(--font-display); font-size:0.62rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
         padding:4px 11px; border-radius:3px; }
.badge-active { background:rgba(95,191,134,0.10); color:var(--green); border:1px solid rgba(95,191,134,0.36); }
.badge-inactive { background:rgba(224,122,111,0.10); color:var(--red); border:1px solid rgba(224,122,111,0.38); }
.badge-tier { background:rgba(201,161,74,0.09); color:var(--gold-bright); border:1px solid var(--border-strong); }
.action-row { display:flex; gap:10px; margin-top:4px; flex-wrap:wrap; }
.page .btn { font-family:var(--font-display); font-size:0.68rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none;
             padding:11px 18px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:rgba(201,161,74,0.06);
             color:var(--gold-bright); cursor:pointer; display:inline-block; transition:background .2s; }
.page .btn:hover { background:rgba(201,161,74,0.14); }
.page .btn-back { color:var(--text-soft); border-color:var(--border); background:none; }
.page .hint { font-size:0.76rem; color:var(--muted); margin:10px 0 0; line-height:1.65; }

@media (max-width:768px) { .topbar-quicklinks, .topbar-email { display:none; } .topbar { padding:8px 16px; } .hero { padding:44px 18px 40px; } .page { padding:28px 16px 30px; } }
@media (max-width:640px) { .product-grid { grid-template-columns:1fr; } .info-panel { grid-template-columns:1fr; }
  .info-cell { border-right:none; border-bottom:1px solid var(--border); } .info-cell:last-child { border-bottom:none; } .card { padding:30px 22px 26px; } }