/* ============================================================
   Truliv Dashboard — shared "Replicate" light theme
   Warm cream canvas · hot-orange accent (scarce) · Bricolage display
   Link this AFTER Bootstrap so it overrides. Fonts loaded per-page.
   ============================================================ */
:root {
    --primary: #ea2804;
    --primary-deep: #c01f00;
    --on-primary: #ffffff;
    --ink: #202020;
    --body: #3a3a3a;
    --charcoal: #575757;
    --mute: #646464;
    --ash: #8d8d8d;
    --stone: #bbbbbb;
    --canvas: #f9f7f3;
    --bone: #f3f0e8;
    --card: #ffffff;
    --dark: #202020;
    --hairline: rgba(32,32,32,0.12);
    --hairline-strong: #202020;
    --success: #2b9a66;
    --lime: #a3e635;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --disp: 'Bricolage Grotesque', Georgia, serif;
    --ui: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', monospace;
}

body {
    background: var(--canvas) !important;
    color: var(--ink);
    font-family: var(--ui);
    -webkit-font-smoothing: antialiased;
}

/* ---- Top nav ---- */
.tv-nav {
    max-width: 1100px; margin: 0 auto;
    height: 60px; display: flex; align-items: center; gap: 22px;
    border-bottom: 1px solid var(--hairline);
    font-size: 14px; font-weight: 600;
}
.tv-nav .brand { font-family: var(--disp); font-weight: 700; font-size: 18px;
    color: var(--ink); margin-right: auto; letter-spacing: -0.3px; }
.tv-nav a { color: var(--charcoal); text-decoration: none; }
.tv-nav a:hover { color: var(--ink); }
.tv-nav a.active { color: var(--ink); }

/* ---- Page wrap & header ---- */
.tv-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 96px; }
.tv-head { padding: 52px 0 28px; }
.tv-title { font-family: var(--disp); font-weight: 700; font-size: 60px;
    line-height: 1.0; letter-spacing: -2px; margin: 0 0 14px; color: var(--ink); }
.tv-sub { font-size: 18px; line-height: 1.56; color: var(--body); max-width: 660px; margin: 0; }
@media (max-width: 640px) { .tv-title { font-size: 40px; } }

/* ---- Dark hero header (orange glow) — shared across pages ---- */
.tv-hero { position: relative; overflow: hidden;
    background: linear-gradient(150deg, #2a2a2a 0%, #161616 100%);
    color: #fcfcfc; border-radius: var(--radius-lg);
    padding: 46px 44px; margin: 32px 0 28px; }
.tv-hero::after { content: ""; position: absolute; right: -60px; top: -90px;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(234,40,4,0.5) 0%, rgba(234,40,4,0) 70%); }
.tv-hero-kicker { position: relative; z-index: 1; font-family: var(--mono); font-size: 11px;
    letter-spacing: 1.5px; text-transform: uppercase; color: rgba(252,252,252,0.6); }
.tv-hero .tv-title { position: relative; z-index: 1; color: #fff; margin: 12px 0 14px; }
.tv-hero .tv-sub { position: relative; z-index: 1; color: rgba(252,252,252,0.72); }
@media (max-width: 640px) { .tv-hero { padding: 34px 26px; } }

/* ---- Cards ---- */
.tv-card {
    background: var(--card); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px;
}
.tv-card h5, .tv-card-title {
    font-family: var(--disp); font-weight: 600; font-size: 24px;
    letter-spacing: -0.4px; margin: 0 0 6px; color: var(--ink);
}
.tv-card .hint { font-size: 14px; color: var(--mute); margin: 0 0 18px; line-height: 1.43; }
.tv-kicker { display: inline-block; font-family: var(--mono); font-size: 11px;
    color: var(--primary); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }

/* ---- Buttons ---- */
.tv-btn { font-family: var(--ui); font-size: 16px; font-weight: 600;
    border-radius: var(--radius-full); height: 44px; padding: 0 24px;
    border: none; cursor: pointer; transition: background .15s, opacity .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tv-btn-primary { background: var(--primary); color: var(--on-primary); }
.tv-btn-primary:hover { background: var(--primary-deep); }
.tv-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.tv-btn-dark { background: var(--dark); color: #fcfcfc; }
.tv-btn-dark:hover { opacity: .88; }
.tv-btn-outline { background: var(--card); color: var(--ink); border: 1px solid var(--hairline-strong); }
.tv-btn-outline:hover { background: var(--bone); }

/* ---- Inputs / selects ---- */
.tv-input, select.tv-input, input.tv-input {
    font-family: var(--ui); font-size: 16px; color: var(--ink);
    background: var(--card); border: 1px solid var(--hairline);
    border-radius: var(--radius-full); padding: 11px 18px; height: 44px;
    outline: none; transition: border-color .15s;
}
.tv-input:focus { border-color: var(--hairline-strong); }

/* ---- "How it works" / "What this shows" 3-step band ---- */
.tv-steps-head { font-family: var(--disp); font-weight: 700; font-size: 30px;
    letter-spacing: -0.6px; margin: 4px 0 22px; color: var(--ink); }
.tv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .tv-steps { grid-template-columns: 1fr; } }
.tv-art { position: relative; height: 150px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tv-art .dot { position: absolute; top: 16px; right: 16px; width: 9px; height: 9px;
    border-radius: var(--radius-full); background: var(--lime);
    box-shadow: 0 0 0 4px rgba(163,230,53,0.18); }
.tv-art svg { width: 48px; height: 48px; color: #fff; opacity: .95; }
.tv-g1 { background: linear-gradient(140deg, #2c2c2c 0%, #151515 100%); }
.tv-g2 { background: linear-gradient(140deg, #5a382c 0%, #231512 100%); }
.tv-g3 { background: linear-gradient(140deg, #ea2804 0%, #7a1500 100%); }
.tv-step-meta { padding: 16px 4px 0; }
.tv-badge { display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; background: #d9f99d; color: #3f6212;
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    border-radius: 5px; margin-right: 9px; vertical-align: middle; }
.tv-step-title { font-weight: 600; font-size: 16px; color: var(--ink); vertical-align: middle; }
.tv-step-desc { font-size: 14px; color: var(--mute); line-height: 1.5; margin-top: 10px; }
.tv-note { font-size: 14px; color: var(--charcoal); line-height: 1.5; margin-top: 20px; }

/* ---- Stat pills / chips ---- */
.tv-pill { display: inline-flex; align-items: center; gap: 6px;
    background: var(--bone); color: var(--ink); border: 1px solid var(--hairline);
    border-radius: var(--radius-full); padding: 7px 16px; margin: 4px 6px 4px 0; font-size: 13px; }
.tv-pill b { color: var(--primary); }

/* ---- Bootstrap overrides so existing controls sit on-theme ---- */
.btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; border-radius: var(--radius-full) !important; }
.btn-primary:hover { background: var(--primary-deep) !important; border-color: var(--primary-deep) !important; }
.btn-outline-primary { color: var(--ink) !important; border-color: var(--hairline-strong) !important; border-radius: var(--radius-full) !important; }
.btn-outline-primary:hover { background: var(--bone) !important; color: var(--ink) !important; }
.form-control, .form-select { border-radius: var(--radius-full) !important; border-color: var(--hairline) !important; }
.form-control:focus, .form-select:focus { border-color: var(--hairline-strong) !important; box-shadow: none !important; }
.card { border-radius: var(--radius-lg) !important; border-color: var(--hairline) !important; }
.table { color: var(--body); }
.table thead th { background: var(--bone); color: var(--ink); border-color: var(--hairline); font-weight: 600; }
a { color: var(--primary); }