/* ═══════════════════════════════════════════════════════════════
   Techclick Attractive Dark Theme v4 — 2026-08-06
   Shared by /  /chat  /netfix  /incident
   Dark, high-contrast, colorful accents — not white, not flat.
   Load AFTER app-polish.css
   ═══════════════════════════════════════════════════════════════ */

:root,
body.tc-page,
body.tc-page-intel,
body.tc-page-ai,
body.tc-page-netfix {
  --tc-bg: #05080f;
  --tc-bg-elev: #0a101c;
  --tc-bg-card: #101826;
  --tc-bg-card-2: #152033;
  --tc-line: rgba(148, 163, 184, 0.12);
  --tc-line-strong: rgba(94, 234, 212, 0.32);
  --tc-text: #f4f7fb;
  --tc-text-2: #d5deea;
  --tc-text-3: #9aabbe;
  --tc-teal: #2dd4bf;
  --tc-teal-2: #14b8a6;
  --tc-sky: #38bdf8;
  --tc-violet: #a78bfa;
  --tc-amber: #fbbf24;
  --tc-rose: #fb7185;
  --tc-green: #34d399;
  --tc-glow-teal: rgba(45, 212, 191, 0.22);
  --tc-glow-sky: rgba(56, 189, 248, 0.18);
  --tc-glow-violet: rgba(167, 139, 250, 0.18);
  --tc-radius: 14px;
  --tc-radius-sm: 10px;
  --tc-shadow: 0 12px 40px rgba(0, 0, 0, 0.38);
  --tc-shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.28);
  --tc-font: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  --tc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Map legacy vars used across pages */
  --bg: var(--tc-bg) !important;
  --bg2: var(--tc-bg-elev) !important;
  --bg3: var(--tc-bg-card) !important;
  --bg4: var(--tc-bg-card-2) !important;
  --bg5: #1c2a40 !important;
  --border: var(--tc-line) !important;
  --border2: var(--tc-line-strong) !important;
  --border3: rgba(45, 212, 191, 0.48) !important;
  --cyan: var(--tc-teal) !important;
  --cyan2: var(--tc-teal-2) !important;
  --cyan-dim: rgba(45, 212, 191, 0.12) !important;
  --green: var(--tc-green) !important;
  --red: var(--tc-rose) !important;
  --amber: var(--tc-amber) !important;
  --purple: var(--tc-violet) !important;
  --blue: var(--tc-sky) !important;
  --text: var(--tc-text) !important;
  --text2: var(--tc-text-2) !important;
  --text3: var(--tc-text-3) !important;
  --text4: #6b7c90 !important;
  --radius: var(--tc-radius) !important;
  --shadow: var(--tc-shadow) !important;

  /* NetFix aliases */
  --bg-deep: var(--tc-bg) !important;
  --bg-sidebar: var(--tc-bg-elev) !important;
  --bg-chat: var(--tc-bg) !important;
  --bg-input: var(--tc-bg-card) !important;
  --text-primary: var(--tc-text) !important;
  --text-secondary: var(--tc-text-2) !important;
  --accent-blue: var(--tc-sky) !important;
  --orange: var(--tc-amber) !important;
  --bubble-user: rgba(45, 212, 191, 0.14) !important;
  --bubble-ai: rgba(16, 24, 38, 0.92) !important;
}

/* ── Page canvas: deep navy + aurora mesh ── */
html,
body,
body.tc-page,
body.tc-page-intel,
body.tc-page-ai,
body.tc-page-netfix {
  background-color: var(--tc-bg) !important;
  color: var(--tc-text) !important;
  font-family: var(--tc-font) !important;
}

body.tc-page::before,
body.tc-page-intel::before,
body.tc-page-ai::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 70% 50% at 12% -10%, rgba(45, 212, 191, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 8%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 70% 100%, rgba(167, 139, 250, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 20% 90%, rgba(251, 191, 36, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #060a12 0%, #05080f 50%, #070b14 100%) !important;
  opacity: 1 !important;
}

body.tc-page > *,
body.tc-page-intel > *,
body.tc-page-ai > * {
  position: relative;
  z-index: 1;
}

/* ── Top bars ── */
body.tc-page-intel .topnav,
body.tc-page-ai .hdr,
body.tc-page-netfix .header {
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.94), rgba(8, 12, 22, 0.9)) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

body.tc-page-intel .brand-mark {
  background: linear-gradient(135deg, #2dd4bf 0%, #38bdf8 55%, #a78bfa 100%) !important;
  color: #042f2e !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 22px var(--tc-glow-teal) !important;
  border-radius: 10px !important;
}

body.tc-page-intel .brand-name,
body.tc-page-ai .ai-brand span {
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
}

body.tc-page-intel .brand-name em {
  background: linear-gradient(90deg, #5eead4, #38bdf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

body.tc-page-intel .brand-tag,
body.tc-page-intel .brand-product {
  background: rgba(45, 212, 191, 0.1) !important;
  border: 1px solid rgba(45, 212, 191, 0.28) !important;
  color: #5eead4 !important;
  border-radius: 999px !important;
}

body.tc-page-intel .nav-tab,
body.tc-page-ai .sec-tab {
  color: var(--tc-text-2) !important;
  border-radius: 10px !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, border-color 0.18s !important;
}

body.tc-page-intel .nav-tab:hover,
body.tc-page-ai .sec-tab:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

body.tc-page-intel .nav-tab.active,
body.tc-page-ai .sec-tab.active,
body.tc-page-intel .mbb-btn.active,
body.tc-page-ai .mbb-btn.active {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(56, 189, 248, 0.1)) !important;
  color: #5eead4 !important;
  border: 1px solid rgba(45, 212, 191, 0.35) !important;
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.12) !important;
}

body.tc-page .tc-upgrade-btn,
body.tc-page-intel .tc-upgrade-btn {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.14), rgba(56, 189, 248, 0.1)) !important;
  border: 1px solid rgba(45, 212, 191, 0.4) !important;
  color: #99f6e4 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.1);
}

body.tc-page .tc-upgrade-btn:hover {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.24), rgba(56, 189, 248, 0.16)) !important;
}

/* ── Guest banner ── */
body.tc-page-intel .tc-guest-banner {
  background: linear-gradient(90deg, rgba(12, 18, 32, 0.95), rgba(15, 28, 42, 0.95), rgba(20, 18, 40, 0.92)) !important;
  border-bottom: 1px solid rgba(45, 212, 191, 0.22) !important;
  color: var(--tc-text-2) !important;
}

body.tc-page-intel .tc-guest-badge {
  color: #5eead4 !important;
}

body.tc-page-intel .tc-guest-cta {
  background: rgba(45, 212, 191, 0.1) !important;
  border: 1px solid rgba(45, 212, 191, 0.35) !important;
  color: #99f6e4 !important;
  border-radius: 999px !important;
}

/* ── Sidebars & shells ── */
body.tc-page-intel .sidebar,
body.tc-page-netfix .sidebar,
body.tc-page-ai .tc-os-side {
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.98), rgba(7, 11, 18, 0.98)) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

body.tc-page-intel .content,
body.tc-page-ai .section,
body.tc-page-ai .msgs,
body.tc-page-netfix .main-content {
  background: transparent !important;
  color: var(--tc-text) !important;
}

/* ── Hero / welcome ── */
body.tc-page-intel .welcome-hero,
body.tc-page-ai .welcome,
body.tc-page-ai .tc-analyst-os .tc-os-main {
  background:
    linear-gradient(145deg, rgba(20, 32, 52, 0.92), rgba(12, 18, 32, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.12), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(167, 139, 250, 0.1), transparent 42%) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: var(--tc-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow: hidden;
}

body.tc-page-intel .hero-eyebrow,
body.tc-page-ai .tc-os-kicker,
body.tc-page-ai .tc-panel-kicker {
  color: #5eead4 !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
}

body.tc-page-intel .hero-title,
body.tc-page-ai .welcome h2,
body.tc-page-ai .tc-os-topline .tc-os-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

body.tc-page-intel .hero-desc,
body.tc-page-ai .welcome p,
body.tc-page-ai .tc-welcome-desc {
  color: var(--tc-text-2) !important;
}

/* Quick lookup bar */
body.tc-page-intel .tc-quick-lookup {
  background: rgba(5, 8, 15, 0.55) !important;
  border: 1px solid rgba(45, 212, 191, 0.28) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

body.tc-page-intel .tc-quick-lookup input {
  color: #fff !important;
}

body.tc-page-intel .tc-quick-lookup input::placeholder {
  color: #8fa0b4 !important;
}

body.tc-page-intel .tc-quick-lookup button,
body.tc-page-intel .send-btn,
body.tc-page-ai .send-btn,
body.tc-page-netfix .send-btn,
body.tc-page-intel .tc-hero-primary,
body.tc-page-intel .tc-plan-btn:not(.tc-plan-btn-muted),
body.tc-page #auth-overlay .tc-auth-btn-primary {
  background: linear-gradient(135deg, #2dd4bf 0%, #22d3ee 50%, #38bdf8 100%) !important;
  color: #042f2e !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(45, 212, 191, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}

body.tc-page-intel .tc-quick-lookup button:hover,
body.tc-page-intel .send-btn:hover,
body.tc-page-ai .send-btn:hover,
body.tc-page-intel .tc-hero-primary:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(45, 212, 191, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body.tc-page-intel .tc-hero-secondary,
body.tc-page-intel .tc-plan-btn-muted,
body.tc-page #auth-overlay .tc-auth-btn-secondary {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: var(--tc-text-2) !important;
  border-radius: 12px !important;
}

/* ── Use-case pillars ── */
body.tc-page-intel .tc-pillars {
  gap: 14px !important;
}

body.tc-page-intel .tc-pillar {
  background:
    linear-gradient(165deg, rgba(22, 34, 54, 0.95), rgba(12, 18, 32, 0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: var(--tc-shadow-soft) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.tc-page-intel .tc-pillar::before {
  opacity: 0.55 !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.14), transparent 60%) !important;
}

body.tc-page-intel .tc-pillar:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(45, 212, 191, 0.4) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 28px rgba(45, 212, 191, 0.12) !important;
}

body.tc-page-intel .tc-pillar-threat {
  border-color: rgba(251, 191, 36, 0.22) !important;
}
body.tc-page-intel .tc-pillar-threat:hover {
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 28px rgba(251, 191, 36, 0.12) !important;
}
body.tc-page-intel .tc-pillar-netfix {
  border-color: rgba(56, 189, 248, 0.22) !important;
}
body.tc-page-intel .tc-pillar-chat {
  border-color: rgba(167, 139, 250, 0.22) !important;
}
body.tc-page-intel .tc-pillar-analyze {
  border-color: rgba(45, 212, 191, 0.22) !important;
}

body.tc-page-intel .tc-pillar-name {
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.tc-page-intel .tc-pillar-threat .tc-pillar-name { color: #fcd34d !important; }
body.tc-page-intel .tc-pillar-netfix .tc-pillar-name { color: #7dd3fc !important; }
body.tc-page-intel .tc-pillar-chat .tc-pillar-name { color: #c4b5fd !important; }
body.tc-page-intel .tc-pillar-analyze .tc-pillar-name { color: #5eead4 !important; }

body.tc-page-intel .tc-pillar-tag,
body.tc-page-intel .tc-pillar-feats {
  color: var(--tc-text-2) !important;
}

body.tc-page-intel .tc-pillar-cta {
  color: #5eead4 !important;
  border-top: 1px dashed rgba(148, 163, 184, 0.12) !important;
  font-weight: 700 !important;
}

/* ── Pricing cards ── */
body.tc-page-intel .tc-plan-card {
  background:
    linear-gradient(180deg, rgba(20, 30, 48, 0.96), rgba(12, 18, 32, 0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: var(--tc-shadow-soft) !important;
  color: var(--tc-text) !important;
}

body.tc-page-intel .tc-plan-card.tc-plan-featured {
  border-color: rgba(45, 212, 191, 0.42) !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.12), 0 18px 44px rgba(0, 0, 0, 0.35), 0 0 40px rgba(45, 212, 191, 0.08) !important;
  background:
    linear-gradient(165deg, rgba(18, 40, 42, 0.55), rgba(12, 18, 32, 0.98)),
    linear-gradient(180deg, rgba(20, 30, 48, 0.96), rgba(12, 18, 32, 0.98)) !important;
}

body.tc-page-intel .tc-plan-badge {
  background: rgba(45, 212, 191, 0.12) !important;
  border: 1px solid rgba(45, 212, 191, 0.3) !important;
  color: #99f6e4 !important;
  border-radius: 999px !important;
}

body.tc-page-intel .tc-plan-card h3,
body.tc-page-intel .tc-plan-price {
  color: #ffffff !important;
}

body.tc-page-intel .tc-plan-card p,
body.tc-page-intel .tc-plan-card li {
  color: var(--tc-text-2) !important;
}

body.tc-page-intel .tc-pricing-kicker {
  color: #5eead4 !important;
}

body.tc-page-intel .tc-plan-status {
  background: rgba(45, 212, 191, 0.1) !important;
  border: 1px solid rgba(45, 212, 191, 0.25) !important;
  color: #99f6e4 !important;
  border-radius: 999px !important;
}

/* ── Tool cards ── */
body.tc-page-intel .tool-card,
body.tc-page-netfix .nf-scenario-card,
body.tc-page-ai .tc-wf-card,
body.tc-page-ai .starter {
  background:
    linear-gradient(160deg, rgba(20, 30, 48, 0.9), rgba(12, 18, 32, 0.96)) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: var(--tc-shadow-soft) !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.tc-page-intel .tool-card:hover,
body.tc-page-netfix .nf-scenario-card:hover,
body.tc-page-ai .tc-wf-card:hover,
body.tc-page-ai .starter:hover {
  transform: translateY(-3px);
  border-color: rgba(45, 212, 191, 0.4) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(45, 212, 191, 0.1) !important;
}

body.tc-page-intel .tool-name,
body.tc-page-ai .tc-wf-name {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.tc-page-intel .tool-desc,
body.tc-page-ai .tc-wf-desc {
  color: var(--tc-text-2) !important;
}

body.tc-page-intel .tool-tag,
body.tc-page-ai .tc-wf-tag {
  background: rgba(45, 212, 191, 0.12) !important;
  border: 1px solid rgba(45, 212, 191, 0.25) !important;
  color: #99f6e4 !important;
  border-radius: 999px !important;
}

body.tc-page-intel .tool-icon {
  filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.25));
}

body.tc-page-intel .tool-workspace,
body.tc-page-intel #tool-output,
body.tc-page-intel .pcap-card {
  background: rgba(10, 16, 28, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 14px !important;
  color: var(--tc-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ── Chat bubbles & inputs ── */
body.tc-page-intel .bubble-user,
body.tc-page-ai .user-text {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(56, 189, 248, 0.12)) !important;
  border: 1px solid rgba(45, 212, 191, 0.3) !important;
  color: #f8fafc !important;
  border-radius: 14px 14px 4px 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

body.tc-page-intel .bubble-bot,
body.tc-page-ai .bot-text,
body.tc-page-ai .ai-text {
  background: linear-gradient(160deg, rgba(20, 30, 48, 0.95), rgba(12, 18, 32, 0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  color: #f1f5f9 !important;
  border-radius: 14px 14px 14px 4px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

body.tc-page-intel .chat-footer,
body.tc-page-intel .input-bar,
body.tc-page-ai .chat-footer,
body.tc-page-ai .input-row,
body.tc-page-intel .mobile-bottom-bar,
body.tc-page-ai .mobile-bottom-bar {
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.92), rgba(7, 11, 18, 0.98)) !important;
  border-color: rgba(148, 163, 184, 0.1) !important;
  backdrop-filter: blur(12px);
}

body.tc-page-intel .chat-inp,
body.tc-page-intel #chat-inp,
body.tc-page-intel input:not([type="checkbox"]):not([type="radio"]),
body.tc-page-intel textarea,
body.tc-page-intel select,
body.tc-page-ai .inp,
body.tc-page-ai textarea,
body.tc-page-ai input:not([type="checkbox"]):not([type="radio"]),
body.tc-page-ai select,
body.tc-page-netfix textarea,
body.tc-page-netfix input:not([type="checkbox"]):not([type="radio"]),
body.tc-page #auth-overlay .tc-auth-input {
  background: rgba(5, 8, 15, 0.72) !important;
  color: #f4f7fb !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 12px !important;
  caret-color: #2dd4bf;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

body.tc-page-intel input:focus,
body.tc-page-intel textarea:focus,
body.tc-page-intel select:focus,
body.tc-page-ai .inp:focus,
body.tc-page-ai textarea:focus,
body.tc-page-netfix textarea:focus,
body.tc-page #auth-overlay .tc-auth-input:focus {
  border-color: rgba(45, 212, 191, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  outline: none !important;
}

body.tc-page-intel input::placeholder,
body.tc-page-intel textarea::placeholder,
body.tc-page-ai .inp::placeholder,
body.tc-page-ai textarea::placeholder,
body.tc-page-netfix textarea::placeholder {
  color: #8fa0b4 !important;
  opacity: 1 !important;
}

/* Sidebar buttons */
body.tc-page-intel .qa-btn,
body.tc-page-intel .sb-tool-btn,
body.tc-page-netfix .mode-btn {
  background: rgba(16, 24, 38, 0.8) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  color: var(--tc-text-2) !important;
  border-radius: 12px !important;
  transition: all 0.15s ease !important;
}

body.tc-page-intel .qa-btn:hover,
body.tc-page-intel .sb-tool-btn:hover,
body.tc-page-netfix .mode-btn:hover {
  border-color: rgba(45, 212, 191, 0.35) !important;
  color: #fff !important;
  background: rgba(45, 212, 191, 0.08) !important;
}

body.tc-page-intel .qa-btn.active,
body.tc-page-intel .sb-tool-btn.active,
body.tc-page-netfix .mode-btn.active {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(56, 189, 248, 0.1)) !important;
  border-color: rgba(45, 212, 191, 0.4) !important;
  color: #5eead4 !important;
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.1);
}

body.tc-page-intel .qa-title,
body.tc-page-intel .panel-title {
  color: #ffffff !important;
}

body.tc-page-intel .qa-sub,
body.tc-page-intel .panel-sub,
body.tc-page-intel .sb-label {
  color: var(--tc-text-3) !important;
}

/* Chips */
body.tc-page-intel .chip {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: var(--tc-text-2) !important;
  border-radius: 999px !important;
}

body.tc-page-intel .chip:hover {
  border-color: rgba(45, 212, 191, 0.4) !important;
  color: #5eead4 !important;
  background: rgba(45, 212, 191, 0.08) !important;
}

/* Auth overlay */
body.tc-page #auth-overlay,
body.tc-page-intel #auth-overlay,
body.tc-page-ai #auth-overlay {
  background:
    radial-gradient(circle at 20% 15%, rgba(45, 212, 191, 0.12), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.1), transparent 32%),
    rgba(5, 8, 15, 0.94) !important;
}

body.tc-page #auth-overlay .tc-auth-card,
body.tc-page-intel #auth-overlay .tc-auth-card,
body.tc-page-ai #auth-overlay .tc-auth-card {
  background:
    linear-gradient(165deg, rgba(20, 30, 48, 0.98), rgba(10, 16, 28, 0.99)) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: var(--tc-text) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

body.tc-page #auth-overlay .tc-auth-label {
  color: var(--tc-text-3) !important;
}

/* Unified banner */
body.tc-page #techclick-unified-banner,
body.tc-page .tc-unified-banner {
  background: linear-gradient(90deg, #05080f 0%, #0a1624 45%, #0c1220 100%) !important;
  border-bottom: 2px solid #2dd4bf !important;
  color: #d5deea !important;
}

body.tc-page #techclick-unified-banner strong,
body.tc-page .tc-unified-banner strong {
  color: #5eead4 !important;
}

/* NetFix extras */
body.tc-page-netfix {
  background: var(--tc-bg) !important;
  color: var(--tc-text) !important;
}

body.tc-page-netfix .header {
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(8, 12, 22, 0.92)) !important;
}

/* Incident page (no tc-page class always — also target body) */
body {
  --bg: var(--tc-bg, #05080f);
}

/* Scrollbars */
body.tc-page ::-webkit-scrollbar,
body.tc-page-intel ::-webkit-scrollbar,
body.tc-page-ai ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.tc-page ::-webkit-scrollbar-track {
  background: #05080f;
}
body.tc-page ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1a2a40, #243550);
  border-radius: 10px;
  border: 2px solid #05080f;
}
body.tc-page ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #2a3f5c, #355070);
}

body.tc-page ::selection {
  background: rgba(45, 212, 191, 0.32);
  color: #ffffff;
}

/* Result cards / analysis panels if present */
body.tc-page-intel .rc,
body.tc-page-intel .msg,
body.tc-page-intel .panel-header {
  border-color: rgba(148, 163, 184, 0.1) !important;
}

/* Soft pulse for live status */
body.tc-page-intel .pulse {
  background: #34d399 !important;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

/* Mobile bottom bar polish */
body.tc-page-intel .mobile-bottom-bar,
body.tc-page-ai .mobile-bottom-bar {
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Attractive focus for all interactive */
body.tc-page :is(a[href], button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid #2dd4bf !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18) !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  body.tc-page-intel .tc-pillar,
  body.tc-page-intel .tool-card,
  body.tc-page-ai .tc-wf-card,
  body.tc-page-intel .send-btn,
  body.tc-page-intel .tc-quick-lookup button {
    transition: none !important;
    transform: none !important;
  }
}