:root {
  --fr3x-bg: #0b0f16;
  --fr3x-bg-elev: #111823;
  --fr3x-surface: #131a24;
  --fr3x-surface-2: #182232;
  --fr3x-border: #233044;
  --fr3x-text: #e8edf5;
  --fr3x-muted: #93a4bd;
  --fr3x-accent: #22d3ee;
  --fr3x-accent-2: #a78bfa;
  --fr3x-danger: #f87171;
  --fr3x-ok: #34d399;
}

html, body, #app, .app-wrapper, .main-container, .app-main {
  background: var(--fr3x-bg) !important;
  color: var(--fr3x-text) !important;
}

body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; }

/* ---- surfaces ------------------------------------------------------- */
.el-card, .el-dialog, .el-message-box, .el-drawer, .el-popover,
.el-dropdown-menu, .el-select-dropdown, .el-picker-panel,
.el-collapse, .el-collapse-item__header, .el-collapse-item__wrap,
.el-tabs__content, .el-tab-pane, .el-form, .el-descriptions,
.el-descriptions__body, .el-descriptions-item__label,
.el-descriptions-item__content, .el-pagination, .el-transfer-panel {
  background: var(--fr3x-surface) !important;
  color: var(--fr3x-text) !important;
  border-color: var(--fr3x-border) !important;
}

.el-card__header, .el-dialog__header, .el-dialog__footer,
.el-drawer__header, .el-collapse-item__header {
  background: var(--fr3x-surface-2) !important;
  border-color: var(--fr3x-border) !important;
  color: var(--fr3x-text) !important;
}

/* ---- sidebar / top bar ---------------------------------------------- */
.el-menu, .el-menu--vertical, .el-aside, .sidebar-container {
  background: var(--fr3x-bg-elev) !important;
  border-color: var(--fr3x-border) !important;
}
.el-menu-item, .el-submenu__title {
  color: var(--fr3x-muted) !important;
  background: transparent !important;
}
.el-menu-item:hover, .el-submenu__title:hover {
  background: var(--fr3x-surface) !important;
  color: var(--fr3x-text) !important;
}
.el-menu-item.is-active, .el-submenu.is-active > .el-submenu__title {
  color: var(--fr3x-accent) !important;
  background: rgba(34, 211, 238, 0.10) !important;
  border-left: 2px solid var(--fr3x-accent);
}
.navbar, .app-header, .el-header {
  background: var(--fr3x-bg-elev) !important;
  border-bottom: 1px solid var(--fr3x-border) !important;
  color: var(--fr3x-text) !important;
}

/* ---- tables ---------------------------------------------------------- */
.el-table, .el-table__body-wrapper, .el-table tr, .el-table td,
.el-table th.el-table__cell, .el-table__expanded-cell {
  background: transparent !important;
  color: var(--fr3x-text) !important;
  border-color: var(--fr3x-border) !important;
}
.el-table th.el-table__cell {
  background: var(--fr3x-surface-2) !important;
  color: var(--fr3x-muted) !important;
  font-weight: 600;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: var(--fr3x-surface) !important;
}
.el-table::before, .el-table--border::after { background-color: var(--fr3x-border) !important; }
.el-table__empty-text { color: var(--fr3x-muted) !important; }

/* ---- forms ----------------------------------------------------------- */
.el-input__inner, .el-textarea__inner, .el-input__prefix,
.el-input__suffix, .el-input-group__append, .el-input-group__prepend {
  background: var(--fr3x-bg-elev) !important;
  border-color: var(--fr3x-border) !important;
  color: var(--fr3x-text) !important;
}
.el-input__inner::placeholder, .el-textarea__inner::placeholder { color: #64748b !important; }
.el-input__inner:focus, .el-textarea__inner:focus {
  border-color: var(--fr3x-accent) !important;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15) !important;
}
.el-form-item__label, .el-checkbox__label, .el-radio__label,
.el-switch__label, .el-descriptions-item__label { color: var(--fr3x-muted) !important; }
.el-checkbox__inner, .el-radio__inner {
  background: var(--fr3x-bg-elev) !important;
  border-color: var(--fr3x-border) !important;
}

/* ---- buttons --------------------------------------------------------- */
.el-button {
  background: var(--fr3x-surface-2) !important;
  border-color: var(--fr3x-border) !important;
  color: var(--fr3x-text) !important;
}
.el-button:hover { border-color: var(--fr3x-accent) !important; color: var(--fr3x-accent) !important; }
.el-button--primary {
  background: linear-gradient(135deg, #0891b2, var(--fr3x-accent)) !important;
  border-color: transparent !important;
  color: #04121a !important;
  font-weight: 600;
}
.el-button--primary:hover { color: #04121a !important; filter: brightness(1.08); }
.el-button--danger { background: var(--fr3x-danger) !important; color: #1b0a0a !important; }
.el-button--text { background: transparent !important; color: var(--fr3x-accent) !important; }
.el-button.is-disabled, .el-button.is-disabled:hover { opacity: 0.45; }

/* ---- tabs, tags, pagination, misc ----------------------------------- */
.el-tabs__item { color: var(--fr3x-muted) !important; }
.el-tabs__item.is-active { color: var(--fr3x-accent) !important; }
.el-tabs__active-bar { background-color: var(--fr3x-accent) !important; }
.el-tabs__nav-wrap::after { background-color: var(--fr3x-border) !important; }
.el-tag { background: var(--fr3x-surface-2) !important; border-color: var(--fr3x-border) !important; color: var(--fr3x-text) !important; }
.el-pager li { background: var(--fr3x-surface) !important; color: var(--fr3x-muted) !important; }
.el-pager li.active, .el-pager li:hover { color: var(--fr3x-accent) !important; }
.el-message, .el-notification { background: var(--fr3x-surface-2) !important; border-color: var(--fr3x-border) !important; color: var(--fr3x-text) !important; }
.el-loading-mask { background-color: rgba(11, 15, 22, 0.72) !important; }
.el-divider { background-color: var(--fr3x-border) !important; }
.el-tooltip__popper, .el-popper { background: var(--fr3x-surface-2) !important; color: var(--fr3x-text) !important; border-color: var(--fr3x-border) !important; }
.el-popper[x-placement^="bottom"] .popper__arrow::after { border-bottom-color: var(--fr3x-surface-2) !important; }
.el-scrollbar__thumb { background-color: #33415a !important; }
a { color: var(--fr3x-accent) !important; }

/* ---- login ----------------------------------------------------------- */
.login-container, .login-form, .login-box {
  background: radial-gradient(1200px 600px at 20% 0%, #12202e 0%, var(--fr3x-bg) 55%) !important;
}
.login-container .el-card, .login-form .el-card { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }

/* ---- fr3x brand chip injected by brand.js --------------------------- */
.fr3x-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin-right: 12px;
  border: 1px solid var(--fr3x-border); border-radius: 999px;
  background: rgba(34, 211, 238, 0.08);
  color: var(--fr3x-accent); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
}
.fr3x-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fr3x-accent); box-shadow: 0 0 10px var(--fr3x-accent);
}

/* ---- scrollbars ------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fr3x-bg); }
::-webkit-scrollbar-thumb { background: #2a3a52; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4d6b; }


/* ---- fr3x wordmark + login backdrop ---------------------------------- */
.fr3x-word {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--fr3x-accent), var(--fr3x-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* The login route paints a light gradient on an unnamed container, so the
   backdrop and card are identified at runtime by brand.js and tagged here. */
body:has(.login-person) {
  background: radial-gradient(1100px 620px at 18% 0%, #12202e 0%, transparent 60%),
              radial-gradient(900px 520px at 85% 15%, #1a1630 0%, transparent 55%),
              var(--fr3x-bg) !important;
}
.fr3x-login-backdrop {
  background: transparent !important;
  background-image: none !important;
}
.fr3x-login-card {
  background: var(--fr3x-surface) !important;
  background-image: none !important;
  border: 1px solid var(--fr3x-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}
.fr3x-login-submit {
  background: linear-gradient(135deg, #0891b2, var(--fr3x-accent)) !important;
  color: #04121a !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* =====================================================================
   fr3x cyberpunk glass layer
   Applied after the functional dark overrides so it can use translucency
   without losing contrast. Blur is limited to large surfaces: dozens of
   backdrop-filter layers would cost more than the effect is worth.
   ===================================================================== */
:root {
  --fr3x-neon: #22d3ee;
  --fr3x-neon-2: #ff2fb9;
  --fr3x-neon-3: #a78bfa;
  --fr3x-glass: rgba(16, 24, 38, 0.62);
  --fr3x-glass-strong: rgba(12, 18, 30, 0.82);
  --fr3x-hairline: rgba(34, 211, 238, 0.28);
}

html, body {
  background-color: #05070c !important;
  background-image:
    radial-gradient(900px 520px at 8% -10%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(167, 139, 250, 0.14), transparent 55%),
    radial-gradient(700px 420px at 50% 110%, rgba(255, 47, 185, 0.10), transparent 60%),
    linear-gradient(rgba(34, 211, 238, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.045) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 44px 44px, 44px 44px !important;
  background-attachment: fixed !important;
}

/* subtle CRT scanlines; never intercepts input */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---- glass surfaces -------------------------------------------------- */
.el-card, .el-dialog, .el-message-box, .el-drawer, .el-popover,
.el-dropdown-menu, .el-select-dropdown, .el-picker-panel, .el-collapse,
.el-descriptions, .el-table, .el-tabs__content, .fr3x-login-card {
  background: var(--fr3x-glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--fr3x-hairline) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}

.el-card__header, .el-dialog__header, .el-drawer__header,
.el-collapse-item__header {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.10), rgba(167, 139, 250, 0.06)) !important;
  border-bottom: 1px solid var(--fr3x-hairline) !important;
}

/* ---- chrome ---------------------------------------------------------- */
.el-header, .navbar, .app-header, .el-aside, .sidebar-container, .el-menu {
  background: var(--fr3x-glass-strong) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--fr3x-hairline) !important;
}
.el-menu-item.is-active {
  color: #d9fbff !important;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.65);
  box-shadow: inset 0 0 24px rgba(34, 211, 238, 0.10), inset 2px 0 0 var(--fr3x-neon);
}
.el-menu-item:hover { box-shadow: inset 0 0 20px rgba(34, 211, 238, 0.08); }

/* ---- type ------------------------------------------------------------ */
.el-card__header, .el-dialog__title, .el-drawer__header, h1, h2, h3 {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #eafcff !important;
}
.el-button, .el-tag, .el-menu-item, .el-form-item__label {
  letter-spacing: 0.04em;
}

/* ---- controls -------------------------------------------------------- */
.el-input__inner, .el-textarea__inner {
  background: rgba(5, 10, 18, 0.72) !important;
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
  box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.05);
}
.el-input__inner:focus, .el-textarea__inner:focus {
  border-color: var(--fr3x-neon) !important;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18), 0 0 22px rgba(34, 211, 238, 0.25) !important;
}
.el-button {
  border: 1px solid rgba(148, 170, 200, 0.28) !important;
  background: rgba(16, 24, 38, 0.72) !important;
  transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.el-button:hover {
  border-color: var(--fr3x-neon) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.28);
  transform: translateY(-1px);
}
.el-button--primary {
  background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 45%, #a78bfa 100%) !important;
  color: #03121a !important;
  box-shadow: 0 0 26px rgba(34, 211, 238, 0.35);
}
.el-button--primary:hover {
  box-shadow: 0 0 34px rgba(34, 211, 238, 0.55);
  filter: brightness(1.06);
}
.fr3x-login-submit {
  background: linear-gradient(135deg, #06b6d4, #22d3ee 50%, #a78bfa) !important;
  color: #03121a !important;
  box-shadow: 0 0 28px rgba(34, 211, 238, 0.40);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- tables ---------------------------------------------------------- */
.el-table th.el-table__cell {
  background: rgba(34, 211, 238, 0.07) !important;
  color: #b9f4ff !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(34, 211, 238, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(34, 211, 238, 0.18), inset 0 -1px 0 rgba(34, 211, 238, 0.18);
}

/* ---- badge / wordmark ------------------------------------------------ */
.fr3x-badge {
  border: 1px solid rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.10);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.25), inset 0 0 12px rgba(34, 211, 238, 0.12);
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}
.fr3x-word {
  background: linear-gradient(120deg, #22d3ee, #ff2fb9 70%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.45));
}

/* ---- login ----------------------------------------------------------- */
body:has(.login-person) {
  background-image:
    radial-gradient(900px 560px at 12% -5%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(760px 480px at 92% 8%, rgba(255, 47, 185, 0.14), transparent 58%),
    linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px),
    #05070c !important;
  background-size: auto, auto, 44px 44px, 44px 44px, auto !important;
  background-attachment: fixed !important;
}
.fr3x-login-card {
  border: 1px solid rgba(34, 211, 238, 0.35) !important;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65), 0 0 40px rgba(34, 211, 238, 0.12) !important;
}

/* ---- motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .el-button, .fr3x-badge { transition: none !important; }
  .el-button:hover { transform: none !important; }
}

/* login controls: the submit is not always an <el-button>, so target the card */
.fr3x-login-card button,
.fr3x-login-card [class*="btn"],
.fr3x-login-card [class*="Btn"] {
  background: linear-gradient(135deg, #06b6d4, #22d3ee 45%, #a78bfa) !important;
  color: #03121a !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.fr3x-login-card h1, .fr3x-login-card h2, .fr3x-login-card h3,
.fr3x-login-card [class*="title"] {
  color: #eafcff !important;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body:has(.login-person) footer,
body:has(.login-person) [class*="footer"],
body:has(.login-person) [class*="copyright"] {
  color: #7dd3fc !important;
  letter-spacing: 0.08em;
}

.fr3x-login-card { color: #eafcff !important; }
.fr3x-login-card [class*="login"] { color: #eafcff !important; }