/*
 * theme-2026-dark.css ("2026 dark")
 * ─────────────────────────────────────────────────────────────────────────
 * Default theme for GitDXD (2026).
 *
 * Inspired by:
 *   • Omarchy       — deep obsidian-midnight ink, crisp 1px hairlines, TUI clarity
 *   • CachyOS       — electric cyan (#38bdf8) & emerald-teal (#2dd4bf) aurora glow
 *   • JetBrains     — high-contrast dark surfaces, multi-stop electric gradients,
 *                     and crisp JetBrains Mono code typography
 *   • GitHub/GitLab — clean Primer/Pajamas dark hierarchy, readable diffs & pills
 *   • Hack Club     — vibrant coral-rose (#fb7185 / #ec3750) & warm amber accents
 *   • Lovable       — 2026 Bento card elevation, top-edge specular rim, ambient glow
 */

@import url("./_base-forgejo-dark.css");
@import url("./theme-neumorphism.css");

:root {
  color-scheme: dark;
  --is-dark-theme: true;

  /* ── Typography ─────────────────────────────────────────────────── */
  --fonts-proportional: "Inter", "Geist", "SF Pro Text", -apple-system,
    "Segoe UI", "Noto Sans", system-ui, sans-serif !important;
  --fonts-monospace: "JetBrains Mono", "Berkeley Mono", "Cascadia Code",
    "Fira Code", "SF Mono", "Source Code Pro", ui-monospace,
    "DejaVu Sans Mono", Consolas, monospace !important;

  /* ── Obsidian & midnight-slate neutral ramp (dark → light) ──────── */
  --steel-900: #080a0f;
  --steel-850: #0b0d13;
  --steel-800: #0d1017;
  --steel-750: #111520;
  --steel-700: #151a27;
  --steel-650: #1b2232;
  --steel-600: #232c40;
  --steel-550: #2f3b54;
  --steel-500: #4b5975;
  --steel-450: #697896;
  --steel-400: #8b9bb8;
  --steel-350: #a8b6cf;
  --steel-300: #c0cce0;
  --steel-250: #d5dfed;
  --steel-200: #e2e8f0;
  --steel-150: #edf2f7;
  --steel-100: #f8fafc;

  /* ── Primary: Electric Cyan-Blue (CachyOS / JetBrains / GitHub) ─── */
  --color-primary: #38bdf8;
  --color-primary-contrast: #060911;
  --color-primary-dark-1: #7dd3fc;
  --color-primary-dark-2: #7dd3fc;
  --color-primary-dark-3: #bae6fd;
  --color-primary-dark-4: #bae6fd;
  --color-primary-dark-5: #e0f2fe;
  --color-primary-dark-6: #e0f2fe;
  --color-primary-dark-7: #f0f9ff;
  --color-primary-light-1: #0ea5e9;
  --color-primary-light-2: #0284c7;
  --color-primary-light-3: #2563eb;
  --color-primary-light-4: #1d4ed8;
  --color-primary-light-5: #1e40af;
  --color-primary-light-6: #1e3a8a;
  --color-primary-light-7: #172554;
  --color-primary-alpha-10: rgba(56, 189, 248, 0.10);
  --color-primary-alpha-20: rgba(56, 189, 248, 0.20);
  --color-primary-alpha-30: rgba(56, 189, 248, 0.30);
  --color-primary-alpha-40: rgba(56, 189, 248, 0.40);
  --color-primary-alpha-50: rgba(56, 189, 248, 0.50);
  --color-primary-alpha-60: rgba(56, 189, 248, 0.60);
  --color-primary-alpha-70: rgba(56, 189, 248, 0.70);
  --color-primary-alpha-80: rgba(56, 189, 248, 0.80);
  --color-primary-alpha-90: rgba(56, 189, 248, 0.90);
  --color-primary-hover: #7dd3fc;
  --color-primary-active: #0ea5e9;

  /* ── Secondary (Midnight Slate) ─────────────────────────────────── */
  --color-secondary: #1b2232;
  --color-secondary-dark-1: #2f3b54;
  --color-secondary-dark-2: #4b5975;
  --color-secondary-dark-3: #697896;
  --color-secondary-dark-4: #8b9bb8;
  --color-secondary-dark-5: #a8b6cf;
  --color-secondary-dark-6: #c0cce0;
  --color-secondary-dark-7: #d5dfed;
  --color-secondary-dark-8: #e2e8f0;
  --color-secondary-dark-9: #edf2f7;
  --color-secondary-dark-10: #f8fafc;
  --color-secondary-dark-11: #f8fafc;
  --color-secondary-dark-12: #ffffff;
  --color-secondary-dark-13: #ffffff;
  --color-secondary-light-1: #232c40;
  --color-secondary-light-2: #151a27;
  --color-secondary-light-3: #111520;
  --color-secondary-light-4: #0d1017;
  --color-secondary-alpha-10: rgba(27, 34, 50, 0.10);
  --color-secondary-alpha-20: rgba(27, 34, 50, 0.20);
  --color-secondary-alpha-30: rgba(27, 34, 50, 0.30);
  --color-secondary-alpha-40: rgba(27, 34, 50, 0.40);
  --color-secondary-alpha-50: rgba(27, 34, 50, 0.50);
  --color-secondary-alpha-60: rgba(27, 34, 50, 0.60);
  --color-secondary-alpha-70: rgba(27, 34, 50, 0.70);
  --color-secondary-alpha-80: rgba(27, 34, 50, 0.80);
  --color-secondary-alpha-90: rgba(27, 34, 50, 0.90);
  --color-secondary-hover: #232c40;
  --color-secondary-active: #2f3b54;

  /* ── Named Accents: Cyan, Violet, Coral (Hack Club), Emerald ────── */
  --color-red: #fb7185;
  --color-orange: #fb923c;
  --color-yellow: #fbbf24;
  --color-olive: #a3e635;
  --color-green: #34d399;
  --color-teal: #2dd4bf;
  --color-blue: #38bdf8;
  --color-violet: #818cf8;
  --color-purple: #a78bfa;
  --color-pink: #f472b6;
  --color-brown: #d6a27c;
  --color-grey: #8b9bb8;
  --color-black: #111520;

  --color-red-light: #fda4af;
  --color-orange-light: #fdba74;
  --color-yellow-light: #fde047;
  --color-olive-light: #bef264;
  --color-green-light: #6ee7b7;
  --color-teal-light: #5eead4;
  --color-blue-light: #7dd3fc;
  --color-violet-light: #a5b4fc;
  --color-purple-light: #c4b5fd;
  --color-pink-light: #f9a8d4;
  --color-brown-light: #e5bfa3;
  --color-grey-light: #cbd5e1;
  --color-black-light: #1b2232;

  --color-red-dark-1: #ec3750;
  --color-orange-dark-1: #f97316;
  --color-yellow-dark-1: #f59e0b;
  --color-olive-dark-1: #65a30d;
  --color-green-dark-1: #10b981;
  --color-teal-dark-1: #14b8a6;
  --color-blue-dark-1: #0ea5e9;
  --color-violet-dark-1: #6366f1;
  --color-purple-dark-1: #8b5cf6;
  --color-pink-dark-1: #ec4899;
  --color-brown-dark-1: #b07d56;
  --color-grey-dark-1: #64748b;
  --color-black-dark-1: #080a0f;

  --color-red-dark-2: #be123c;
  --color-orange-dark-2: #c2410c;
  --color-yellow-dark-2: #b45309;
  --color-olive-dark-2: #4d7c0f;
  --color-green-dark-2: #059669;
  --color-teal-dark-2: #0d9488;
  --color-blue-dark-2: #0284c7;
  --color-violet-dark-2: #4f46e5;
  --color-purple-dark-2: #7c3aed;
  --color-pink-dark-2: #be185d;
  --color-brown-dark-2: #8c5e3c;
  --color-grey-dark-2: #475569;
  --color-black-dark-2: #05070b;

  --color-gold: #fbbf24;
  --color-white: #f8fafc;
  --color-pure-black: #05070b;

  /* ── ANSI (Omarchy Tokyo-Night + CachyOS Terminal) ──────────────── */
  --color-ansi-black: #111520;
  --color-ansi-red: #ec3750;
  --color-ansi-green: #10b981;
  --color-ansi-yellow: #f59e0b;
  --color-ansi-blue: #3b82f6;
  --color-ansi-magenta: #8b5cf6;
  --color-ansi-cyan: #06b6d4;
  --color-ansi-white: #a8b6cf;
  --color-ansi-bright-black: #4b5975;
  --color-ansi-bright-red: #fb7185;
  --color-ansi-bright-green: #34d399;
  --color-ansi-bright-yellow: #fbbf24;
  --color-ansi-bright-blue: #38bdf8;
  --color-ansi-bright-magenta: #a78bfa;
  --color-ansi-bright-cyan: #2dd4bf;
  --color-ansi-bright-white: #f8fafc;

  /* ── Diffs (GitHub/GitLab 2026 high-clarity emerald & coral) ────── */
  --color-diff-removed-word-bg: rgba(251, 113, 133, 0.30);
  --color-diff-added-word-bg: rgba(52, 211, 153, 0.26);
  --color-diff-removed-row-bg: rgba(236, 55, 80, 0.11);
  --color-diff-moved-row-bg: rgba(251, 191, 36, 0.12);
  --color-diff-added-row-bg: rgba(16, 185, 129, 0.11);
  --color-diff-removed-row-border: rgba(251, 113, 133, 0.42);
  --color-diff-moved-row-border: rgba(251, 191, 36, 0.42);
  --color-diff-added-row-border: rgba(52, 211, 153, 0.42);
  --color-diff-inactive: #111520;

  /* ── Status Alerts ──────────────────────────────────────────────── */
  --color-error-border: rgba(251, 113, 133, 0.45);
  --color-error-bg: rgba(159, 18, 57, 0.24);
  --color-error-bg-active: rgba(190, 18, 60, 0.34);
  --color-error-bg-hover: rgba(190, 18, 60, 0.30);
  --color-error-text: #fda4af;
  --color-success-border: rgba(52, 211, 153, 0.45);
  --color-success-bg: rgba(6, 95, 70, 0.26);
  --color-success-text: #6ee7b7;
  --color-warning-border: rgba(251, 191, 36, 0.45);
  --color-warning-bg: rgba(146, 64, 14, 0.26);
  --color-warning-text: #fde047;
  --color-info-border: rgba(56, 189, 248, 0.45);
  --color-info-bg: rgba(3, 105, 161, 0.24);
  --color-info-text: #bae6fd;

  /* ── Badges ─────────────────────────────────────────────────────── */
  --color-red-badge: #fb7185;
  --color-red-badge-bg: rgba(251, 113, 133, 0.14);
  --color-red-badge-hover-bg: rgba(251, 113, 133, 0.26);
  --color-green-badge: #34d399;
  --color-green-badge-bg: rgba(52, 211, 153, 0.14);
  --color-green-badge-hover-bg: rgba(52, 211, 153, 0.26);
  --color-yellow-badge: #fbbf24;
  --color-yellow-badge-bg: rgba(251, 191, 36, 0.14);
  --color-yellow-badge-hover-bg: rgba(251, 191, 36, 0.26);
  --color-orange-badge: #fb923c;
  --color-orange-badge-bg: rgba(251, 146, 60, 0.14);
  --color-orange-badge-hover-bg: rgba(251, 146, 60, 0.26);

  /* ── Thin accents / danger ──────────────────────────────────────── */
  --color-thin-green: #34d399;
  --color-thin-red: #fb7185;
  --color-thin-purple: #a78bfa;
  --color-thin-orange: #fb923c;
  --color-thin-red-highlight: #fda4af;
  --color-danger-bg: rgba(159, 18, 57, 0.25);

  /* ── Surfaces (Obsidian Bento Hierarchy) ────────────────────────── */
  --color-body: #0b0d13;
  --color-box-header: #131824;
  --color-box-body: #111520;
  --color-box-body-highlight: #181f2e;
  --color-text-dark: #05070b;
  --color-text: #e2e8f0;
  --color-text-light: #cbd5e1;
  --color-text-light-1: #b8c4d9;
  --color-text-light-2: #94a3b8;
  --color-text-light-3: #64748b;
  --color-footer: #080a0f;
  --color-timeline: #1e2638;
  --color-input-text: #f1f5f9;
  --color-input-background: #080a10;
  --color-input-toggle-background: #1b2232;
  --color-input-border: rgba(148, 163, 184, 0.18);
  --color-input-border-hover: rgba(56, 189, 248, 0.45);
  --color-header-wrapper: #080a0f;
  --color-header-wrapper-transparent: rgba(8, 10, 15, 0);
  --color-light: rgba(0, 0, 0, 0.35);
  --color-light-border: rgba(148, 163, 184, 0.12);
  --color-hover: #181f2e;
  --color-active: #1f293d;
  --color-menu: #111520;
  --color-card: #111520;
  --fancy-card-bg: #111520;
  --fancy-card-border: rgba(148, 163, 184, 0.14);
  --color-markup-table-row: rgba(255, 255, 255, 0.025);
  --color-markup-code-block: #080a10;
  --color-markup-code-inline: #161c2a;
  --color-button: #151b28;
  --color-code-bg: #080a10;
  --color-shadow: rgba(0, 0, 0, 0.65);
  --color-secondary-bg: #111520;
  --color-text-focus: #f8fafc;
  --color-expand-button: #1b2232;
  --color-placeholder-text: #52607a;
  --color-editor-line-highlight: rgba(56, 189, 248, 0.08);
  --color-project-board-bg: #111520;
  --color-project-board-dark-label: #8b9bb8;
  --color-caret: #38bdf8;
  --color-reaction-bg: rgba(56, 189, 248, 0.08);
  --color-reaction-active-bg: rgba(56, 189, 248, 0.20);
  --color-reaction-hover-bg: rgba(56, 189, 248, 0.30);
  --color-tooltip-text: #f8fafc;
  --color-tooltip-bg: #06080d;
  --color-nav-bg: rgba(8, 10, 15, 0.84);
  --color-nav-hover-bg: #181f2e;
  --color-secondary-nav-bg: #0b0d13;
  --color-label-text: #e2e8f0;
  --color-label-bg: #1b2232;
  --color-label-hover-bg: #252f45;
  --color-label-active-bg: #2f3b54;
  --color-label-bg-alt: #232c40;
  --color-accent: #38bdf8;
  --color-small-accent: #2dd4bf;
  --color-highlight-fg: #7dd3fc;
  --color-highlight-bg: rgba(56, 189, 248, 0.16);
  --color-overlay-backdrop: rgba(5, 7, 11, 0.82);
  --color-selection-bg: rgba(56, 189, 248, 0.28);
  --color-selection-fg: #f8fafc;
  --checkerboard-color-1: #151a27;
  --checkerboard-color-2: #0b0d13;
  --color-indicator-offline: #64748b;
  --color-indicator-offline-20: rgba(100, 116, 139, 0.20);
  --color-indicator-idle: #34d399;
  --color-indicator-idle-20: rgba(52, 211, 153, 0.20);
  --color-indicator-active: #38bdf8;
  --color-indicator-active-20: rgba(56, 189, 248, 0.20);

  /* ── Console ────────────────────────────────────────────────────── */
  --color-console-fg: #e2e8f0;
  --color-console-fg-subtle: #8b9bb8;
  --color-console-bg: #06080d;
  --color-console-border: rgba(148, 163, 184, 0.14);
  --color-console-hover-bg: rgba(56, 189, 248, 0.08);
  --color-console-active-bg: #1b2232;
  --color-console-menu-bg: #111520;
  --color-console-menu-border: rgba(148, 163, 184, 0.20);

  /* ── 2026 Bento / Specular 1px Borders + Elevation (replaces heavy neumorphism) ── */
  --nm-radius: 12px;
  --nm-radius-sm: 8px;
  --nm-shadow-dark: rgba(0, 0, 0, 0.65);
  --nm-shadow-light: rgba(255, 255, 255, 0.06);
  --nm-divider-color: rgba(148, 163, 184, 0.12);
  --nm-divider: rgba(148, 163, 184, 0.12);
  --nm-raised: 0 0 0 1px rgba(148, 163, 184, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px -10px rgba(0, 0, 0, 0.70);
  --nm-raised-sm: 0 0 0 1px rgba(148, 163, 184, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 14px -3px rgba(0, 0, 0, 0.55);
  --nm-raised-xs: 0 0 0 1px rgba(148, 163, 184, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.45);
  --nm-inset: inset 0 0 0 1px rgba(148, 163, 184, 0.14),
    inset 0 2px 6px rgba(0, 0, 0, 0.55);
  --nm-inset-sm: inset 0 0 0 1px rgba(148, 163, 184, 0.15),
    inset 0 1px 3px rgba(0, 0, 0, 0.45);
  --nm-flat: 0 0 0 1px rgba(148, 163, 184, 0.14);

  /* ── 2026 Signature Gradients & Glows ───────────────────────────── */
  --dxd-2026-grad-primary: linear-gradient(
    135deg,
    #38bdf8 0%,
    #0ea5e9 48%,
    #6366f1 100%
  );
  --dxd-2026-grad-text: linear-gradient(
    120deg,
    #38bdf8 0%,
    #2dd4bf 38%,
    #a78bfa 72%,
    #fb7185 100%
  );
  --dxd-2026-glow-cyan: 0 0 24px -4px rgba(56, 189, 248, 0.35);
  --dxd-2026-glow-card: 0 0 0 1px rgba(56, 189, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 14px 34px -10px rgba(0, 0, 0, 0.78),
    0 0 26px -6px rgba(56, 189, 248, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════
   2026 Dark — Base Canvas & Ambient Aurora
   ═══════════════════════════════════════════════════════════════════════ */

body {
  background-color: #0b0d13 !important;
  background-image:
    radial-gradient(ellipse 65% 42% at 18% -8%, rgba(56, 189, 248, 0.08), transparent 70%),
    radial-gradient(ellipse 55% 38% at 82% -6%, rgba(139, 92, 246, 0.07), transparent 70%),
    radial-gradient(ellipse 45% 32% at 50% 104%, rgba(251, 113, 133, 0.04), transparent 70%) !important;
  background-attachment: fixed !important;
  color: #e2e8f0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Links: Emerald-Teal & Electric Sky (CachyOS / Omarchy) ───────── */
a {
  color: #38bdf8 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
a:hover,
a:focus {
  color: #5eead4 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.text.grey a,
.meta a,
.commit-header a,
.breadcrumb a,
.ui.breadcrumb a,
.sha,
.commit-sha {
  color: #8b9bb8 !important;
}
.text.grey a:hover,
.meta a:hover,
.commit-header a:hover,
.breadcrumb a:hover,
.ui.breadcrumb a:hover {
  color: #38bdf8 !important;
}

::selection {
  background: rgba(56, 189, 248, 0.28);
  color: #f8fafc;
}

.sha,
.commit-sha,
.commit-id-short,
.version,
.ui.label.sha {
  font-family: var(--fonts-monospace) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Navbar & Footer — Frosted Glass + Hairline Shimmer
   ═══════════════════════════════════════════════════════════════════════ */

.navbar,
#navbar,
nav.navbar,
.ui.menu.navbar,
.ui.secondary.menu.navbar {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background: rgba(8, 10, 15, 0.80) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.70) !important;
}
#navbar::after,
nav.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(56, 189, 248, 0.45) 25%,
    rgba(167, 139, 250, 0.45) 55%,
    rgba(251, 113, 133, 0.38) 80%,
    transparent 100%
  );
  pointer-events: none;
}

.navbar .item,
#navbar .item {
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.navbar .item:hover,
#navbar .item:hover {
  background: rgba(56, 189, 248, 0.10) !important;
  color: #f8fafc !important;
}

.navbar .brand,
.navbar .brand:hover {
  color: #f8fafc !important;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.page-footer,
footer,
.ui.page-footer {
  background: rgba(8, 10, 15, 0.90) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2026 Repository View, File Tree & Explore Polish
   ═══════════════════════════════════════════════════════════════════════ */

.repository .repo-header {
  background: linear-gradient(180deg, rgba(17, 21, 32, 0.78), rgba(11, 13, 19, 0.92)) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#repo-files-table,
.ui.table.repo-table {
  background: #111520 !important;
  border-radius: 12px !important;
  box-shadow: var(--nm-raised) !important;
  overflow: hidden !important;
}
#repo-files-table tbody tr:hover td {
  background: rgba(56, 189, 248, 0.07) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2026 Bento Cards, Buttons, Tabs & Inputs
   ═══════════════════════════════════════════════════════════════════════ */

.ui.card:hover,
.ui.cards > .card:hover,
.dxd-feature:hover {
  box-shadow: var(--dxd-2026-glow-card) !important;
}

/* Primary CTA button: Electric cyan → blue → indigo gradient + inner rim */
.ui.primary.button,
.ui.primary.buttons .button,
.ui.primary.label {
  background: var(--dxd-2026-grad-primary) !important;
  color: #04070f !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 4px 16px -3px rgba(14, 165, 233, 0.38) !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  filter: brightness(1.08);
  color: #04070f !important;
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 6px 22px -2px rgba(56, 189, 248, 0.52) !important;
  text-decoration: none !important;
}

/* Secondary / default buttons: crisp dark surface + cyan border glow on hover */
.ui.button:not(.primary):not(.basic):hover,
.ui.buttons .button:not(.primary):not(.basic):hover {
  background: #181f2e !important;
  color: #7dd3fc !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px -3px rgba(0, 0, 0, 0.6) !important;
  text-decoration: none !important;
}

/* Ghost / basic buttons */
.ui.basic.button,
.ui.basic.buttons .button {
  background: rgba(17, 21, 32, 0.55) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.ui.basic.button:hover,
.ui.basic.buttons .button:hover {
  background: rgba(56, 189, 248, 0.08) !important;
  color: #7dd3fc !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: var(--dxd-2026-glow-cyan) !important;
  text-decoration: none !important;
}

/* Inputs & editors: recessed obsidian terminal well + glowing focus ring */
input,
textarea,
select,
.ui.input input,
.ui.form input:not([type="checkbox"]):not([type="radio"]),
.ui.form textarea,
.ui.form select,
.ui.search input,
.CodeMirror {
  background: #080a10 !important;
}
input:focus,
textarea:focus,
select:focus,
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.search input:focus,
.ui.action.input:focus-within {
  box-shadow: inset 0 0 0 1px #38bdf8,
    0 0 0 3px rgba(56, 189, 248, 0.20) !important;
}

/* Active tabs: crisp electric accent bar */
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item {
  color: #f8fafc !important;
  border-bottom: 2px solid #38bdf8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Landing Page (home.tmpl) — 2026 Hero & Bento Polish
   ═══════════════════════════════════════════════════════════════════════ */

.dxd-landing .dxd-eyebrow {
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.12),
    rgba(139, 92, 246, 0.12)
  ) !important;
  color: #7dd3fc !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.dxd-landing .dxd-hero h1 em {
  background: var(--dxd-2026-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.dxd-landing .dxd-mock {
  background: linear-gradient(180deg, #131824 0%, #0e121b 100%) !important;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 48px -12px rgba(0, 0, 0, 0.75),
    0 0 40px -10px rgba(56, 189, 248, 0.12) !important;
}

.dxd-landing .dxd-mock-bar .dot.r { background: #ec3750 !important; box-shadow: none !important; }
.dxd-landing .dxd-mock-bar .dot.y { background: #fbbf24 !important; box-shadow: none !important; }
.dxd-landing .dxd-mock-bar .dot.g { background: #34d399 !important; box-shadow: none !important; }

.dxd-landing .dxd-feature .icon {
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.12), rgba(139, 92, 246, 0.10)) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.dxd-landing .dxd-cta-band {
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(56, 189, 248, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 70% at 85% 100%, rgba(139, 92, 246, 0.10), transparent 70%),
    #111520 !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 44px -12px rgba(0, 0, 0, 0.72) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Syntax Highlighting — JetBrains Islands + Omarchy Tokyo Night + Coral
   ═══════════════════════════════════════════════════════════════════════ */

.chroma { background: #080a10 !important; }
.chroma .err { color: #fb7185; background: transparent; }
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
.chroma .cs, .chroma .cp, .chroma .cpf { color: #596780; font-style: italic; }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
.chroma .kr, .chroma .kt { color: #fb7185; }
.chroma .o, .chroma .ow { color: #38bdf8; }
.chroma .p { color: #94a3b8; }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
.chroma .sd, .chroma .sh, .chroma .sx { color: #34d399; }
.chroma .se, .chroma .ss { color: #2dd4bf; }
.chroma .si, .chroma .sa { color: #fbbf24; }
.chroma .sr { color: #38bdf8; }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
.chroma .mi, .chroma .mo, .chroma .il { color: #fbbf24; }
.chroma .n, .chroma .nx, .chroma .nn, .chroma .nv,
.chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #e2e8f0; }
.chroma .na, .chroma .nb, .chroma .bp, .chroma .ni,
.chroma .nl, .chroma .py { color: #a78bfa; }
.chroma .nf { color: #38bdf8; }
.chroma .nc, .chroma .ne, .chroma .nd, .chroma .nt { color: #2dd4bf; }
.chroma .no { color: #fb923c; }
.chroma .go { color: #64748b; }
.chroma .gp { color: #94a3b8; }
.chroma .gh { color: #38bdf8; font-weight: bold; }
.chroma .gu { color: #34d399; }
.chroma .gt { color: #fb7185; }
.chroma .gd { color: #fda4af; background-color: rgba(236, 55, 80, 0.18); }
.chroma .gi { color: #6ee7b7; background-color: rgba(16, 185, 129, 0.18); }

/* CodeMirror */
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #fb7185; }
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom,
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #fbbf24; }
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #38bdf8; }
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #596780; }
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #34d399; }
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #2dd4bf; }
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin,
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #a78bfa; }
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #fb7185; }
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #38bdf8; }