/* ============================================================
   TERMINAL THEME — Excellent Tool
   Based on variant_terminal from redesign archive
   Overrides glass-admin.css. Loaded AFTER it.
   ============================================================ */

:root {
    --ink: #e7e7e8;
    --ink-dim: #a5a5a8;
    --ink-mute: #6e6e72;
    --bg: #0b0f17;
    --bg-deep: #070a10;
    --panel: #11161f;
    --panel-2: #0d1119;
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .14);
    --accent: #34d399;
    --accent-2: #22d3ee;
    --warn: #fbbf24;

    /* Re-map glass-admin variables to terminal palette so legacy widgets inherit */
    --bg-dark: #0b0f17;
    --bg-gradient-1: #0b0f17;
    --bg-gradient-2: #0d1119;
    --bg-gradient-3: #11161f;
    --text-primary: #f5f5f6;
    --text-secondary: rgba(231, 231, 232, .7);
    --text-muted: rgba(231, 231, 232, .45);
    --glass-bg: rgba(255, 255, 255, .03);
    --glass-border: rgba(255, 255, 255, .08);
    --glass-hover: rgba(255, 255, 255, .06);
    --glass-shadow: rgba(0, 0, 0, .35);
    --emerald: #059669;
    --emerald-light: #34d399;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #ef4444;
    --info: #22d3ee;
    --sidebar-width: 240px;
    --navbar-height: 52px;
    --border-radius: 12px;
    --card-padding: 20px;
}

/* ======================
   BASE
====================== */
html, body {
    background:
        radial-gradient(ellipse 120% 70% at 50% -20%, #141a28 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 50% 120%, #0d1220 0%, transparent 55%),
        var(--bg-deep) !important;
    background-attachment: fixed !important;
}
body {
    font-family: 'Geist', 'Space Grotesk', -apple-system, system-ui, sans-serif !important;
    color: var(--ink) !important;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

/* Cursor-following soft spotlight (comfort layer) */
html::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        620px circle at var(--cursor-x, 50%) var(--cursor-y, 12%),
        rgba(52, 211, 153, .08),
        transparent 65%
    );
    transition: background 160ms linear;
}

/* Ambient layer: soft colorful blobs (drifting) */
body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(640px circle at 12% 8%,  rgba(52, 211, 153, .14), transparent 62%),
        radial-gradient(600px circle at 88% 92%, rgba(34, 211, 238, .11), transparent 64%),
        radial-gradient(520px circle at 72% 18%, rgba(139, 92, 246, .09), transparent 66%),
        radial-gradient(480px circle at 28% 82%, rgba(251, 191, 36, .06), transparent 68%);
    filter: blur(2px) saturate(120%);
    animation: tv-ambient-drift 28s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 55%, transparent 100%);
    opacity: .85;
}
@keyframes tv-ambient-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
    50%  { transform: translate3d(-30px, 20px, 0) scale(1.05); opacity: 1; }
    100% { transform: translate3d(20px, -15px, 0) scale(1); opacity: .85; }
}

.dashboard, .site-footer { position: relative; z-index: 1; }

/* Global CRT-ish scanline overlay (very subtle) */
.main-content::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, .012) 0px,
        rgba(255, 255, 255, .012) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
    z-index: 0;
}
.main-content { position: relative; }
.main-content > * { position: relative; z-index: 1; }

/* Kill old decorative background layers (orbs, stars, gradients) */
.background, .orb, .orb-1, .orb-2, .orb-3, #star-container,
.hp-glow-bg, .hp-glow, .hp-glow-1, .hp-glow-2, .hp-glow-3 {
    display: none !important;
}

/* Dashboard grid */
.dashboard {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: transparent !important;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ======================
   SIDEBAR
====================== */
.sidebar {
    background: #0d0d10 !important;
    border-right: 1px solid var(--line) !important;
    padding: 20px 16px !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    position: sticky;
    top: 0;
    height: 100vh;
    width: 240px !important;
    min-width: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.sidebar::before, .sidebar::after { display: none !important; }
.sidebar-header {
    padding: 4px 4px 18px !important;
    border-bottom: 1px dashed var(--line) !important;
    margin-bottom: 0 !important;
}
.sidebar-brand { gap: 10px !important; }
.logo {
    width: 32px !important; height: 32px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.logo-text.logo-text-brand {
    font-family: 'Geist', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
}

.nav-menu { padding: 0 !important; margin: 0 !important; list-style: none !important; display: flex; flex-direction: column; gap: 18px; }
.nav-menu > li { list-style: none; }
.nav-section { display: block; }
.nav-section-title {
    font-size: 10px !important;
    color: var(--ink-mute) !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    padding-left: 6px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 8px !important;
}
.nav-section > ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }

.nav-item { list-style: none; }
.nav-link {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 8px 10px !important; border-radius: 6px !important;
    color: var(--ink-dim) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Geist', sans-serif !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    position: relative;
    transition: all .15s;
}
.nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .03) !important;
    border-color: transparent !important;
    transform: none !important;
}
.nav-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(52, 211, 153, .14), rgba(52, 211, 153, .04)) !important;
    border-color: rgba(52, 211, 153, .3) !important;
    box-shadow: inset 2px 0 0 var(--accent), 0 0 14px -4px rgba(52, 211, 153, .4) !important;
}
.nav-link.active::before { display: none !important; }
.nav-link.active::after {
    content: '';
    position: absolute; right: 10px; top: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .7);
    transform: translateY(-50%);
    animation: tv-dot-pulse 1.8s ease-out infinite;
}
@keyframes tv-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); }
    70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.nav-link { overflow: hidden; }
.nav-link:not(.active)::after {
    content: '';
    position: absolute;
    left: -100%; top: 0; bottom: 0; width: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 211, 153, .08), transparent);
    transition: left .35s ease;
}
.nav-link:not(.active):hover::after { left: 100%; }

.sidebar-header { position: relative; }
.sidebar-header::after {
    content: '';
    position: absolute; left: 4px; right: 4px; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(52, 211, 153, .4), transparent);
    animation: tv-brand-scan 3.4s ease-in-out infinite;
}
@keyframes tv-brand-scan {
    0%, 100% { transform: translateX(-30%); opacity: .35; }
    50%      { transform: translateX(30%);  opacity: 1; }
}
.logo {
    animation: tv-logo-pulse 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, .3));
}
@keyframes tv-logo-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(52, 211, 153, .25)); }
    50%      { filter: drop-shadow(0 0 14px rgba(52, 211, 153, .55)); }
}
.nav-icon { width: 18px !important; height: 18px !important; opacity: .9 !important; }

/* User block inside sidebar */
.sidebar .user-avatar {
    width: 32px !important; height: 32px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #34d399, #22d3ee) !important;
    display: grid !important; place-items: center !important;
    font-weight: 700 !important; color: #000 !important; font-size: 14px !important;
    box-shadow: none !important;
}
.navbar .user-avatar {
    border-radius: 4px !important;
    background: linear-gradient(135deg, #34d399, #22d3ee) !important;
    color: #000 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    display: inline-grid !important; place-items: center !important;
}
.nav-link .user-info .user-name {
    color: #fff !important; font-size: 13px !important; font-weight: 600 !important;
}

/* ======================
   MAIN / TOPBAR
====================== */
.main-content {
    min-width: 0;
    padding: 0 28px 60px !important;
    margin-left: 0 !important;
    background: transparent !important;
}

.navbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    position: sticky;
    top: 0;
    background: rgba(10, 10, 11, .92) !important;
    backdrop-filter: blur(10px);
    z-index: 4;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
}
.navbar::before, .navbar::after { display: none !important; }

/* Топбар растянуть на всю ширину main-content (у которого padding: 0 28px) */
.main-content > .navbar {
    margin-left: -28px;
    margin-right: -28px;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
@media (max-width: 760px) {
    .main-content > .navbar {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.tv-crumbs { display: flex; gap: 6px; align-items: center; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.tv-crumb-root { color: var(--accent); text-shadow: 0 0 8px rgba(52, 211, 153, .5); }
.tv-crumb-sep { color: var(--ink-mute); }
.tv-crumb-cur { color: #fff; position: relative; }
.tv-crumb-cur::after {
    content: '▋';
    margin-left: 4px;
    color: var(--accent);
    animation: tv-caret 1s steps(1) infinite;
}

.page-title {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    color: var(--ink-dim) !important;
    font-weight: 400 !important;
    background: none !important;
    -webkit-text-fill-color: inherit !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

.navbar-right { display: flex; gap: 20px; align-items: center; }

.tv-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .25);
    color: var(--accent); font-size: 10px; letter-spacing: .1em;
    font-family: 'JetBrains Mono', monospace;
}
.tv-pill-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 6px var(--accent);
    animation: tv-pulse 1.8s ease-in-out infinite;
}
@keyframes tv-pulse { 50% { opacity: .5; } }

.tv-clock { color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.tv-clock b { color: #fff; font-weight: 500; }
.tv-clock .tv-colon { animation: tv-colon-blink 1s steps(1) infinite; color: var(--accent); }
@keyframes tv-colon-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }

.tv-pill { position: relative; box-shadow: 0 0 16px -4px rgba(52, 211, 153, .35); }
.tv-pill::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 20px;
    border: 1px solid rgba(52, 211, 153, .4);
    opacity: 0;
    animation: tv-pill-radar 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes tv-pill-radar {
    0%   { opacity: .8; transform: scale(.9); }
    100% { opacity: 0;  transform: scale(1.35); }
}

.tv-user {
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}
.tv-user span { color: var(--ink-mute); }

/* Navbar dropdown (user menu) */
.navbar .nav-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px !important;
    background: transparent !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    box-shadow: none !important;
}
.navbar .nav-btn:hover { background: rgba(255, 255, 255, .04) !important; border-color: var(--line-strong) !important; }

.dropdown-menu {
    background: #0e0e11 !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(20px);
    font-family: 'Geist', sans-serif !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.5) !important;
}
.dropdown-item {
    color: var(--ink) !important;
    font-size: 13px !important;
}
.dropdown-item:hover { background: rgba(255, 255, 255, .05) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--line) !important; }

/* ======================
   TERMINAL BLOCKS
====================== */
.tv-block {
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
}
.tv-block:last-child { border-bottom: 0; }

.tv-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.tv-block-label { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.tv-block-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-mute);
    padding: 3px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
}
.tv-block-title { font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -.01em; font-family: 'Geist', sans-serif; }
.tv-block-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-mute); }
.tv-block-sub { font-size: 13px; color: var(--ink-dim); margin-top: 4px; font-family: 'Geist', sans-serif; }

.tv-search {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px;
    background: #0e0e11; border: 1px solid var(--line);
    min-width: 260px;
}
.tv-search svg { color: var(--ink-mute); }
.tv-search input {
    background: none; border: 0; outline: 0; color: #fff;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    flex: 1; padding: 0;
}
.tv-search input::placeholder { color: var(--ink-mute); }
.tv-search kbd {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
    color: var(--ink-dim);
}

.tv-link-sm { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
.tv-link-sm:hover { color: #fff; }

/* ======================
   BUTTONS
====================== */
.tv-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 8px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--line-strong);
    color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all .15s;
    font-family: 'Geist', sans-serif;
    text-decoration: none;
}
.tv-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.tv-btn-primary {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .4), 0 6px 24px -8px rgba(52, 211, 153, .5);
    position: relative;
    overflow: hidden;
    animation: tv-primary-pulse 2.6s ease-in-out infinite;
}
.tv-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%, transparent 100%);
    transform: translateX(-100%);
    pointer-events: none;
}
.tv-btn-primary:hover { background: #fff !important; border-color: #fff !important; animation: none; }
.tv-btn-primary:hover::before { animation: tv-btn-sweep .9s ease-out; }
@keyframes tv-btn-sweep { to { transform: translateX(100%); } }
@keyframes tv-primary-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .0), 0 4px 18px -6px rgba(52, 211, 153, .35); }
    50%      { box-shadow: 0 0 0 4px rgba(52, 211, 153, .15), 0 8px 28px -6px rgba(52, 211, 153, .55); }
}
.tv-btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 24px -10px rgba(255, 255, 255, .25); }
.tv-btn kbd {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(0, 0, 0, .2); border: 1px solid rgba(0, 0, 0, .15);
    color: inherit; opacity: .7;
}
.tv-btn:not(.tv-btn-primary) kbd { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }

/* Override Bootstrap buttons globally for a terminal feel */
.btn {
    font-family: 'Geist', sans-serif;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    transition: all .15s;
}
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000 !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
}
.btn-outline-primary, .btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--ink) !important;
}
.btn-outline-primary:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn-outline-light:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    color: #fff !important;
}
.btn-danger { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }
.btn-success { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; }

/* ======================
   HERO (HOME)
====================== */
.tv-hero {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px;
    padding: 48px 0 56px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.tv-hero::before {
    content: '';
    position: absolute;
    left: -10%; top: 0; bottom: 0; width: 60%;
    background: radial-gradient(ellipse 50% 60% at 30% 40%, rgba(52, 211, 153, .22), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: tv-hero-glow 8s ease-in-out infinite alternate;
}
.tv-hero > * { position: relative; z-index: 1; }
@keyframes tv-hero-glow {
    0%   { opacity: .55; transform: translate3d(0,0,0) scale(1); }
    100% { opacity: .95; transform: translate3d(20px,-10px,0) scale(1.08); }
}
.tv-hero-kicker {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    display: inline-flex; gap: 8px; align-items: center;
    color: var(--ink-dim); margin-bottom: 24px;
    letter-spacing: .08em;
}
.tv-bracket { color: var(--accent); }
.tv-hero-live { color: var(--accent); margin-left: 8px; font-size: 10px; }
.tv-hero-title {
    font-size: clamp(40px, 5.2vw, 68px);
    line-height: 1.02; letter-spacing: -.035em; font-weight: 600;
    margin: 0 0 20px;
    font-family: 'Geist', sans-serif;
    color: #fff;
}
.tv-hero-accent {
    font-style: italic; font-family: 'Instrument Serif', serif; font-weight: 400;
    background: linear-gradient(110deg, var(--accent) 10%, var(--accent-2) 45%, #f0a890 70%, var(--accent) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: tv-gradient-sweep 9s linear infinite;
    position: relative;
}
@keyframes tv-gradient-sweep {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.tv-hero-title::after {
    content: '▊';
    display: inline-block;
    margin-left: 6px;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: .55em;
    vertical-align: 0.15em;
    animation: tv-caret 1s steps(1) infinite;
    text-shadow: 0 0 12px var(--accent);
}
@keyframes tv-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tv-hero-sub {
    font-size: 16px; line-height: 1.6; color: var(--ink-dim);
    max-width: 540px; margin: 0 0 28px;
}
.tv-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Stat panel on the right of hero */
.tv-stat-panel {
    background: #0e0e11;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px;
    font-family: 'JetBrains Mono', monospace;
}
.tv-stat-head { font-size: 11px; color: var(--ink-mute); margin-bottom: 16px; letter-spacing: .08em; }
.tv-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.tv-stat { border: 1px solid var(--line); padding: 10px 12px; border-radius: 6px; background: rgba(255, 255, 255, .015); }
.tv-stat-label { font-size: 9px; color: var(--ink-mute); letter-spacing: .12em; margin-bottom: 4px; }
.tv-stat-val { font-size: 26px; font-weight: 700; color: #fff; line-height: 1; }
.tv-stat-val span { font-size: 14px; color: var(--accent); margin-left: 2px; }
.tv-stat-bar { margin-top: 8px; height: 3px; background: rgba(255, 255, 255, .06); border-radius: 2px; overflow: hidden; position: relative; }
.tv-stat-bar div {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .6s;
    box-shadow: 0 0 8px var(--accent);
    position: relative;
}
.tv-stat-bar div::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: translateX(-100%);
    animation: tv-bar-shine 2.6s ease-in-out infinite;
}
@keyframes tv-bar-shine { 40%, 100% { transform: translateX(260%); } }
.tv-bar-zero div { background: #4b4b50; box-shadow: none; }
.tv-bar-zero div::after { display: none; }

.tv-stat:hover {
    border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
    background: rgba(52, 211, 153, .04);
}
.tv-stat { transition: border-color .2s, background .2s; }
.tv-stat-val { transition: text-shadow .25s; }
.tv-stat:hover .tv-stat-val { text-shadow: 0 0 14px rgba(52, 211, 153, .5); }

.tv-ascii {
    white-space: pre; font-size: 11px; color: var(--ink-dim); line-height: 1.4;
    overflow-x: auto;
    position: relative;
}
.tv-ascii::after {
    content: '_';
    display: inline-block;
    color: var(--accent);
    animation: tv-caret 1s steps(1) infinite;
    margin-left: 2px;
}

.tv-stat-panel {
    position: relative;
    overflow: hidden;
}
.tv-stat-panel::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(240px circle at 90% 10%, rgba(34, 211, 238, .1), transparent 65%);
    pointer-events: none;
}
.tv-stat-panel > * { position: relative; z-index: 1; }
.tv-stat-head { position: relative; padding-right: 60px; }
.tv-stat-head::after {
    content: '● REC';
    position: absolute;
    right: 0; top: 0;
    font-size: 9px; letter-spacing: .1em;
    color: #ef4444;
    animation: tv-rec-blink 1.4s steps(1) infinite;
}
@keyframes tv-rec-blink { 0%, 60% { opacity: 1; } 70%, 100% { opacity: .25; } }

/* ======================
   MARQUEE TICKER
====================== */
.tv-ticker {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.tv-ticker-label {
    flex-shrink: 0;
    padding: 3px 9px;
    background: var(--accent);
    color: #000;
    font-weight: 700;
    letter-spacing: .1em;
    border-radius: 3px;
    position: relative;
    z-index: 2;
    animation: tv-ticker-label-pulse 2s ease-in-out infinite;
}
@keyframes tv-ticker-label-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
    50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}
.tv-ticker-track {
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.tv-ticker-row {
    display: inline-flex;
    gap: 28px;
    animation: tv-ticker-slide 40s linear infinite;
    padding-left: 100%;
}
.tv-ticker-row > span { display: inline-flex; gap: 8px; align-items: center; }
.tv-ticker-row > span::before {
    content: '▸';
    color: var(--accent);
}
@keyframes tv-ticker-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
.tv-ticker:hover .tv-ticker-row { animation-play-state: paused; }

/* ======================
   CATEGORIES (chips)
====================== */
.tv-cats { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tv-cat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 6px;
    background: transparent; border: 1px solid var(--line);
    color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: .08em; cursor: pointer;
    transition: all .15s;
    text-transform: uppercase;
}
.tv-cat:hover { color: #fff; border-color: var(--line-strong); }
.tv-cat.is-on { background: #fff; color: #000; border-color: #fff; }
.tv-cat-n { font-size: 10px; opacity: .6; }
.tv-cat.is-on .tv-cat-n { opacity: .5; }

/* ======================
   FEATURED (solid tools)
====================== */
.tv-featured-block { position: relative; }
.tv-featured-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: .05em;
}

.tv-featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 4px;
}

.tv-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: 16px 18px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25));
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: border-color .3s, transform .3s, box-shadow .3s;
}
.tv-feature:hover {
    color: inherit;
    transform: translateY(-4px);
    border-color: color-mix(in oklch, var(--tint) 55%, var(--line));
    box-shadow: 0 24px 60px -24px color-mix(in oklch, var(--tint) 70%, transparent),
                0 0 0 1px color-mix(in oklch, var(--tint) 30%, transparent) inset;
}

/* Background layers */
.tv-feature-bg {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -10px), 0);
    transition: transform .25s ease-out;
}
.tv-feature-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .55;
    mix-blend-mode: screen;
    transition: opacity .4s, transform .5s;
}
.tv-feature-blob-a {
    width: 300px; height: 300px;
    background: var(--tint);
    top: -80px; left: -60px;
    animation: tv-feature-drift-a 12s ease-in-out infinite alternate;
}
.tv-feature-blob-b {
    width: 260px; height: 260px;
    background: var(--tint2, var(--tint));
    bottom: -90px; right: -70px;
    animation: tv-feature-drift-b 14s ease-in-out infinite alternate;
}
@keyframes tv-feature-drift-a {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(40px,50px,0) scale(1.12); }
}
@keyframes tv-feature-drift-b {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(-30px,-40px,0) scale(1.15); }
}
.tv-feature:hover .tv-feature-blob { opacity: .85; }

.tv-feature-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 90%);
}
.tv-feature-scan {
    position: absolute; left: 0; right: 0; top: -2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--tint) 80%, #fff), transparent);
    filter: drop-shadow(0 0 10px var(--tint));
    animation: tv-feature-scan-move 4.5s linear infinite;
    opacity: .7;
}
@keyframes tv-feature-scan-move {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(300px); opacity: 0; }
}

.tv-feature > *:not(.tv-feature-bg) { position: relative; z-index: 1; }

/* Head */
.tv-feature-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .12em;
    color: var(--ink-mute);
    margin-bottom: 10px;
}
.tv-feature-label {
    display: inline-flex; align-items: center; gap: 6px;
    color: color-mix(in oklch, var(--tint) 80%, #fff);
}
.tv-feature-label::before {
    content: '●';
    color: var(--tint);
    font-size: 10px;
    animation: tv-feature-dot 1.6s ease-in-out infinite;
    text-shadow: 0 0 6px var(--tint);
}
@keyframes tv-feature-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
.tv-feature-badge {
    padding: 3px 8px;
    background: var(--tint);
    color: #0a0a0b;
    font-weight: 800;
    font-size: 9px;
    letter-spacing: .14em;
    border-radius: 3px;
    box-shadow: 0 0 14px -4px var(--tint);
    animation: tv-feature-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes tv-feature-badge-pulse {
    0%, 100% { box-shadow: 0 0 14px -4px var(--tint); }
    50% { box-shadow: 0 0 22px 0 var(--tint); }
}

/* Body */
.tv-feature-body { flex: 1; display: flex; flex-direction: column; }
.tv-feature-icon {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid color-mix(in oklch, var(--tint) 35%, var(--line));
    background: color-mix(in oklch, var(--tint) 12%, rgba(0,0,0,.3));
    border-radius: 10px;
    color: color-mix(in oklch, var(--tint) 80%, #fff);
    margin-bottom: 12px;
    transition: transform .35s, box-shadow .35s;
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--tint) 25%, transparent) inset;
}
.tv-feature-icon svg { width: 22px; height: 22px; }
.tv-feature:hover .tv-feature-icon {
    transform: translate3d(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 6px), 0) rotate(-4deg) scale(1.06);
    box-shadow: 0 10px 28px -6px color-mix(in oklch, var(--tint) 70%, transparent),
                0 0 0 1px color-mix(in oklch, var(--tint) 45%, transparent) inset;
}

.tv-feature-title {
    font-family: 'Instrument Serif', 'Geist', serif;
    font-size: 24px; line-height: 1.05; font-weight: 400;
    color: #fff;
    margin-bottom: 3px;
    letter-spacing: -.01em;
}
.tv-feature-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .12em;
    color: color-mix(in oklch, var(--tint) 70%, #fff);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.tv-feature-desc {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-dim);
    margin-bottom: 10px;
}

.tv-feature-chips {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: auto;
    padding-bottom: 10px;
}
.tv-feature-chip {
    padding: 2px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .04em;
    color: var(--ink-dim);
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color .2s, border-color .2s, background .2s;
}
.tv-feature:hover .tv-feature-chip {
    border-color: color-mix(in oklch, var(--tint) 35%, var(--line));
    color: color-mix(in oklch, var(--tint) 70%, #fff);
}

.tv-feature-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.tv-feature-cta { transition: color .25s; }
.tv-feature:hover .tv-feature-cta { color: #fff; }
.tv-feature-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--tint) 18%, rgba(255,255,255,.04));
    border: 1px solid color-mix(in oklch, var(--tint) 30%, var(--line));
    color: color-mix(in oklch, var(--tint) 80%, #fff);
    transition: transform .3s, background .25s;
}
.tv-feature-arrow svg { width: 12px; height: 12px; }
.tv-feature:hover .tv-feature-arrow {
    transform: translateX(4px) rotate(-8deg);
    background: var(--tint);
    color: #0a0a0b;
}

/* Per-game flavor */
.tv-feature--clashroyale .tv-feature-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent 0 22px, rgba(245,158,11,.05) 22px 23px);
}
.tv-feature--steam .tv-feature-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.45), transparent 60%),
                radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.35), transparent 60%),
                radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.3), transparent 60%),
                radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,255,255,.4), transparent 60%);
    animation: tv-feature-stars 8s linear infinite;
    opacity: .7;
}
@keyframes tv-feature-stars {
    0%, 100% { opacity: .4; }
    50% { opacity: .9; }
}
.tv-feature--fortnite .tv-feature-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(115deg, transparent 45%, rgba(167,139,250,.12) 46% 48%, transparent 49%),
        linear-gradient(115deg, transparent 62%, rgba(167,139,250,.08) 63% 66%, transparent 67%);
}

/* Responsive */
@media (max-width: 1100px) {
    .tv-featured { grid-template-columns: 1fr 1fr; }
    .tv-featured > *:nth-child(3) { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 720px) {
    .tv-featured { grid-template-columns: 1fr; }
    .tv-featured > *:nth-child(3) { grid-column: auto; }
    .tv-feature { min-height: 0; }
    .tv-feature-title { font-size: 22px; }
}

/* ======================
   TOOLS GRID
====================== */
.tv-tools {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
    background: var(--bg);
}
.tv-tool {
    display: grid;
    grid-template-columns: 40px 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background .2s, transform .25s;
    position: relative;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}
.tv-tool:nth-child(3n) { border-right: 0; }
.tv-tool:hover {
    background: rgba(255, 255, 255, .035);
    color: inherit;
    transform: translateY(-1px);
}
.tv-tool::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--tint, var(--accent)); opacity: 0;
    transition: opacity .2s, box-shadow .2s;
    z-index: 2;
}
.tv-tool:hover::before {
    opacity: 1;
    box-shadow: 0 0 18px 2px color-mix(in oklch, var(--tint, var(--accent)) 60%, transparent);
}
/* Cursor-tracking spotlight */
.tv-tool::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(240px circle at var(--mx, -100px) var(--my, -100px), color-mix(in oklch, var(--tint, var(--accent)) 22%, transparent), transparent 55%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    z-index: 0;
}
.tv-tool:hover::after { opacity: 1; }
.tv-tool-num, .tv-tool-icon, .tv-tool-body, .tv-tool-go { position: relative; z-index: 2; }
.tv-tool:hover .tv-tool-icon {
    transform: rotate(-4deg) scale(1.08);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--tint, var(--accent)) 45%, transparent),
                0 8px 24px -6px color-mix(in oklch, var(--tint, var(--accent)) 60%, transparent);
}
.tv-tool-icon { transition: transform .25s, box-shadow .25s; }
.tv-tool-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-mute); }
.tv-tool-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: grid; place-items: center;
    background: color-mix(in oklch, var(--tint, var(--accent)) 15%, transparent);
    color: var(--tint, var(--accent));
    border: 1px solid color-mix(in oklch, var(--tint, var(--accent)) 30%, transparent);
}
.tv-tool-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.tv-tool-title { font-size: 14px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: 'Geist', sans-serif; }
.tv-tool-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em;
    padding: 2px 5px; border-radius: 3px;
    background: var(--tint, var(--accent)); color: #000; font-weight: 700;
    text-transform: uppercase;
}
.tv-tool-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; font-family: 'Geist', sans-serif; line-height: 1.4; }
.tv-tool-body { min-width: 0; }
.tv-tool-go {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-mute); opacity: 0; transition: opacity .15s;
    white-space: nowrap;
}
.tv-tool:hover .tv-tool-go { opacity: 1; color: var(--tint, var(--accent)); }

/* ======================
   TWO-COL LAYOUT
====================== */
.tv-two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border-bottom: 1px solid var(--line); }
.tv-two-col .tv-col { border-bottom: 0; padding: 40px 0; }
.tv-two-col .tv-col:first-child { padding-right: 32px; border-right: 1px solid var(--line); }
.tv-two-col .tv-col:last-child { padding-left: 32px; }

/* ======================
   FEED (updates)
====================== */
.tv-feed { display: flex; flex-direction: column; }
.tv-feed-row {
    display: grid;
    grid-template-columns: 50px 2px 1fr auto;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    align-items: start;
    text-decoration: none;
    color: inherit;
}
.tv-feed-row:last-child { border-bottom: 0; }
.tv-feed-row:hover .tv-feed-title { color: var(--tint, var(--accent)); }
.tv-feed-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-mute); padding-top: 2px; }
.tv-feed-sep { background: var(--tint, var(--accent)); opacity: .4; width: 2px; align-self: stretch; }
.tv-feed-body { min-width: 0; }
.tv-feed-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; transition: color .15s; font-family: 'Geist', sans-serif; }
.tv-feed-sub { font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
.tv-feed-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--tint, var(--accent)); opacity: .7;
    padding-top: 2px;
}

/* ======================
   SECTIONS GRID
====================== */
.tv-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tv-sections.is-wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tv-section {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 16px; background: #0e0e11;
    position: relative; overflow: hidden;
    transition: all .15s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.tv-section:hover {
    border-color: color-mix(in oklch, var(--tint, var(--accent)) 45%, var(--line));
    transform: translateY(-3px);
    color: inherit;
    box-shadow: 0 14px 40px -14px color-mix(in oklch, var(--tint, var(--accent)) 55%, transparent);
}
.tv-section:hover .tv-section-arrow { transform: translateX(4px); }
.tv-section .tv-section-arrow { transition: transform .25s; }
.tv-section:hover::after { animation: tv-section-wobble 1.6s ease-in-out infinite alternate; }
@keyframes tv-section-wobble {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-14px, 10px) scale(1.2); }
}

.tv-tool-badge {
    animation: tv-badge-blink 2.4s ease-in-out infinite;
    box-shadow: 0 0 0 0 currentColor;
}
@keyframes tv-badge-blink {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.25) drop-shadow(0 0 4px currentColor); }
}
.tv-section::after {
    content: ''; position: absolute; top: -40%; right: -40%;
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklch, var(--tint, var(--accent)) 25%, transparent), transparent 70%);
    pointer-events: none;
}
.tv-section-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; position: relative; z-index: 1; }
.tv-section-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    color: var(--tint, var(--accent));
    background: color-mix(in oklch, var(--tint, var(--accent)) 15%, transparent);
}
.tv-section-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
.tv-section-count {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    padding: 3px 7px; border-radius: 20px;
    background: rgba(255, 255, 255, .05); color: var(--ink-dim);
}
.tv-section-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; font-family: 'Geist', sans-serif; position: relative; z-index: 1; }
.tv-section-sub { font-size: 12px; color: var(--ink-dim); line-height: 1.5; font-family: 'Geist', sans-serif; position: relative; z-index: 1; }
.tv-section-arrow { position: absolute; bottom: 14px; right: 16px; color: var(--tint, var(--accent)); font-size: 14px; z-index: 1; }

/* ======================
   PRINCIPLES
====================== */
.tv-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tv-principle { padding: 20px; border-right: 1px solid var(--line); }
.tv-principle:last-child { border-right: 0; }
.tv-principle-k { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); margin-bottom: 12px; letter-spacing: .08em; }
.tv-principle-t { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 6px; font-family: 'Geist', sans-serif; }
.tv-principle-d { font-size: 12px; color: var(--ink-dim); line-height: 1.5; }

/* ======================
   FOOTER
====================== */
.site-footer {
    padding: 30px 28px 30px !important;
    margin: 0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: var(--ink-mute) !important;
    background: transparent !important;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}
.site-footer p { margin: 0; color: var(--ink-mute); font-size: 11px; }
.site-footer a { color: var(--ink-dim); }
.site-footer a:hover { color: #fff; }
.site-footer-tools, .site-footer-legal {
    font-size: 11px !important;
    font-family: 'JetBrains Mono', monospace;
    gap: 8px 14px !important;
}
.site-footer-dot { color: var(--ink-mute); }

/* ======================
   RESPONSIVE
====================== */
@media (max-width: 1100px) {
    .tv-hero { grid-template-columns: 1fr; }
    .tv-tools { grid-template-columns: repeat(2, 1fr); }
    .tv-tool:nth-child(3n) { border-right: 1px solid var(--line); }
    .tv-tool:nth-child(2n) { border-right: 0; }
    .tv-two-col { grid-template-columns: 1fr; }
    .tv-two-col .tv-col:first-child { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
    .tv-two-col .tv-col:last-child { padding-left: 0; }
    .tv-principles { grid-template-columns: 1fr 1fr; }
    .tv-principle:nth-child(2n) { border-right: 0; }
    .tv-principle:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
    .main-content { padding: 0 16px 40px !important; }
    .tv-tools { grid-template-columns: 1fr; }
    .tv-tool { border-right: 0 !important; }
    .tv-sections { grid-template-columns: 1fr; }
    .tv-two-col .tv-col { padding: 24px 0; }
    .navbar { flex-wrap: wrap; gap: 10px; }
    .navbar-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
    .tv-search { min-width: 0; width: 100%; }
    .tv-block { padding: 28px 0; }
    .tv-hero { padding: 32px 0; gap: 24px; }
}

/* Hide mobile sidebar toggle — we'll keep it as is for now */
@media (max-width: 1024px) {
    .dashboard { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; top: 0; left: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .2s;
    }
    .sidebar.open { transform: translateX(0); }
}

/* ======================
   FORM CONTROLS (bootstrap override)
====================== */
.form-control, .form-select, textarea.form-control, input.form-control, .input-group .form-control {
    background: #0e0e11 !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 8px !important;
    font-family: 'Geist', sans-serif !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-mute) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    background: #0e0e11 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .15) !important;
}
.form-label { color: var(--ink) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .02em; }
.form-check-input {
    background: #0e0e11 !important;
    border-color: var(--line-strong) !important;
}
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-check-label { color: var(--ink) !important; font-size: 13px; }
.input-group-text {
    background: #0e0e11 !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-dim) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px !important;
}

/* Tables override */
.table {
    color: var(--ink) !important;
    border-color: var(--line) !important;
}
.table > :not(caption) > * > * {
    background: transparent !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}
.table thead th {
    color: var(--ink-mute) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    border-bottom-color: var(--line-strong) !important;
}

/* Alerts */
.alert {
    background: #0e0e11 !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 8px !important;
    font-family: 'Geist', sans-serif;
}
.alert-success { border-color: rgba(52, 211, 153, .35) !important; color: var(--accent) !important; }
.alert-warning { border-color: rgba(251, 191, 36, .35) !important; color: var(--warn) !important; }
.alert-danger, .alert-error { border-color: rgba(239, 68, 68, .35) !important; color: #fca5a5 !important; }
.alert-info { border-color: rgba(34, 211, 238, .35) !important; color: var(--accent-2) !important; }

/* Breadcrumbs */
.breadcrumb {
    background: transparent !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--ink-dim) !important; }
.breadcrumb-item.active { color: var(--ink) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-mute) !important; content: '/'; }

/* ======================
   LEGACY GLASS-CARD SKIN
   Re-skin any remaining glass-card/stat-card to terminal style
====================== */
.glass-card {
    background: #0e0e11 !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 20px !important;
}
.glass-card::before, .glass-card::after { display: none !important; }
.glass-card:hover { background: rgba(255, 255, 255, .025) !important; border-color: var(--line-strong) !important; transform: none !important; }

.stat-card { cursor: pointer; }
.stat-card-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stat-info h3 {
    font-family: 'Geist', sans-serif !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    margin: 0 0 6px !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}
.stat-info p { color: var(--ink-dim) !important; font-size: 13px !important; line-height: 1.5; }
.stat-value {
    font-family: 'Geist', sans-serif !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700 !important;
}
.stat-icon {
    width: 48px !important; height: 48px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--line) !important;
    color: var(--accent) !important;
    display: grid !important; place-items: center !important;
    flex-shrink: 0;
}
.stat-icon.cyan { color: var(--accent-2) !important; background: rgba(34, 211, 238, .08) !important; border-color: rgba(34, 211, 238, .25) !important; }
.stat-icon.magenta { color: #f0a890 !important; background: rgba(240, 168, 144, .08) !important; border-color: rgba(240, 168, 144, .25) !important; }
.stat-icon.purple { color: #a78bfa !important; background: rgba(167, 139, 250, .08) !important; border-color: rgba(167, 139, 250, .25) !important; }
.stat-icon.success { color: var(--accent) !important; background: rgba(52, 211, 153, .08) !important; border-color: rgba(52, 211, 153, .25) !important; }
.stat-icon.amber { color: var(--warn) !important; background: rgba(251, 191, 36, .08) !important; border-color: rgba(251, 191, 36, .25) !important; }
.stat-icon svg { width: 22px; height: 22px; stroke-width: 1.9; }

.card-title, .card-header h2 {
    font-family: 'Geist', sans-serif !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}
.card-subtitle { color: var(--ink-dim) !important; font-size: 12px !important; }

.stats-grid { gap: 12px !important; }

/* Progress bars */
.progress-bar, .progress {
    background: rgba(255, 255, 255, .06) !important;
    border-radius: 2px;
    height: 4px;
    overflow: hidden;
}
.progress-fill { background: var(--accent) !important; }
.progress-fill.cyan { background: var(--accent-2) !important; }
.progress-fill.magenta { background: #f0a890 !important; }
.progress-fill.purple { background: #a78bfa !important; }
.progress-item { margin-bottom: 12px; }
.progress-header { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12px; color: var(--ink-dim); }
.progress-label { color: var(--ink-dim); }
.progress-value { color: #fff; font-family: 'JetBrains Mono', monospace; }

/* ======================
   LEGACY HOMEPAGE CLASSES — hide (new home uses .tv-* blocks)
====================== */
.hp-cta, .hp-hero, .hp-counters, .hp-section, .hp-glow-bg {
    /* kept for backward if used elsewhere; home page itself is rewritten */
}

/* Links color */
a { color: inherit; }
.text-body, .text-body-secondary { color: var(--ink-dim) !important; }

/* Headings */
h1, h2, h3, h4, h5, h6 { color: #fff; font-family: 'Geist', sans-serif; }

/* Mobile menu toggle */
.mobile-menu-toggle {
    background: #0e0e11 !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 8px !important;
}