/* Neon Cyber — phong cách công nghệ: nền gần đen, viền phát sáng cyan/hồng, tiêu đề chữ đơn cách. */
@layer themes {
  :root[data-theme="neon-cyber"] {
    --neon: var(--erp-primary); --neon2: var(--erp-tone-2, #ff2bd6);
    --erp-font-display: "Cascadia Code", "JetBrains Mono", ui-monospace, monospace;
    --erp-bg: #05070c;
    --erp-bg-image: linear-gradient(color-mix(in srgb, var(--neon) 05%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--neon) 05%, transparent) 1px, transparent 1px);
    --erp-surface: #0b0f18; --erp-surface-2: #0f1521; --erp-surface-3: #151d2d; --erp-panel-bg: rgba(11, 15, 24, .92); --erp-overlay: rgba(0, 0, 0, .7);
    --erp-text: #e6fbff; --erp-text-muted: #a3cbd6; --erp-text-faint: #7aa2ae;
    --erp-border: color-mix(in srgb, var(--neon) 28%, transparent); --erp-border-strong: color-mix(in srgb, var(--neon) 55%, transparent);
    --erp-accent: #00e5ff; --erp-accent-contrast: #001318;
    --erp-success: #39ff9f; --erp-warning: #ffd23f; --erp-danger: #ff4d79; --erp-info: #4dc3ff;
    --erp-radius: 4px; --erp-radius-sm: 3px; --erp-radius-lg: 6px;
    --erp-shadow-sm: 0 0 0 1px color-mix(in srgb, var(--neon) 15%, transparent); --erp-shadow: 0 0 14px color-mix(in srgb, var(--neon) 14%, transparent); --erp-shadow-lg: 0 0 40px color-mix(in srgb, var(--neon) 22%, transparent);
    --erp-chrome-bg: #070a11; --erp-chrome-text: #e6fbff; --erp-chrome-muted: #8fb8c4; --erp-chrome-hover: color-mix(in srgb, var(--neon) 1%, transparent);
    --erp-ribbon-bg: #090d15; --erp-ribbon-tabs-bg: #070a11; --erp-ribbon-tab-text: color-mix(in srgb, var(--neon) 45%, #ffffff); --erp-ribbon-tab-active-bg: #090d15;
    --erp-ribbon-tab-active-text: var(--neon); --erp-ribbon-border: color-mix(in srgb, var(--neon) 22%, transparent); --erp-ribbon-btn-hover: color-mix(in srgb, var(--neon) 1%, transparent); --erp-ribbon-btn-active: color-mix(in srgb, var(--neon) 2%, transparent);
    --erp-grid-bg: #080c14; --erp-grid-head: #0d1420; --erp-grid-head-text: color-mix(in srgb, var(--neon) 50%, #ffffff); --erp-grid-alt: #0a0f19; --erp-grid-hover: #0f1a28;
    --erp-grid-selected: color-mix(in srgb, var(--neon) 22%, #080c14); --erp-grid-line: #142233; --erp-grid-foot: #0c121d; --erp-grid-frozen-shadow: 3px 0 6px -2px color-mix(in srgb, var(--neon) 25%, transparent);
    --erp-input-bg: #060a11; --erp-input-border: color-mix(in srgb, var(--neon) 38%, transparent); --erp-input-readonly: #0b111b;
  }
  :root[data-theme="neon-cyber"] body { background-size: 28px 28px; background-attachment: fixed; }
  :root[data-theme="neon-cyber"] .erp-titlebar { border-bottom: 1px solid var(--neon); box-shadow: 0 0 18px color-mix(in srgb, var(--neon) 35%, transparent); }
  :root[data-theme="neon-cyber"] .erp-brand__text strong, :root[data-theme="neon-cyber"] .erp-screen__title { text-shadow: 0 0 8px color-mix(in srgb, var(--neon) 7%, transparent); letter-spacing: .5px; }
  :root[data-theme="neon-cyber"] .erp-ribbon__tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--neon), 0 0 12px color-mix(in srgb, var(--neon) 3%, transparent); }
  :root[data-theme="neon-cyber"] .erp-rbtn .erp-icon, :root[data-theme="neon-cyber"] .erp-tbtn .erp-icon { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--neon) 8%, transparent)); }
  :root[data-theme="neon-cyber"] .erp-toolbar, :root[data-theme="neon-cyber"] .erp-fieldset, :root[data-theme="neon-cyber"] .erp-grid,
  :root[data-theme="neon-cyber"] .erp-filter, :root[data-theme="neon-cyber"] .erp-kpi, :root[data-theme="neon-cyber"] .erp-chart { box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 18%, transparent), 0 0 18px color-mix(in srgb, var(--neon) 08%, transparent); }
  :root[data-theme="neon-cyber"] .erp-btn--primary, :root[data-theme="neon-cyber"] .erp-tbtn--primary { background: transparent; color: var(--neon); border: 1px solid var(--neon); box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--neon) 2%, transparent); }
  :root[data-theme="neon-cyber"] .erp-btn--primary:hover, :root[data-theme="neon-cyber"] .erp-tbtn--primary:hover { background: color-mix(in srgb, var(--neon) 15%, transparent); color: #fff; }
  :root[data-theme="neon-cyber"] .erp-chart__bar { fill: var(--neon); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--neon) 8%, transparent)); }
  :root[data-theme="neon-cyber"] .erp-doctab.is-active { box-shadow: inset 0 2px 0 var(--neon2); }
  :root[data-theme="neon-cyber"] .erp-input:focus { box-shadow: 0 0 0 1px var(--neon), 0 0 12px color-mix(in srgb, var(--neon) 5%, transparent); }
}