:root {
  color-scheme: dark;
  --mx: 50vw;
  --my: 35vh;
  --ui-glow-size: 620px;
  --ui-glow-alpha: .42;
  --ui-canvas-0: #08111f;
  --ui-canvas-1: #0c1422;
  --ui-canvas-2: #101726;
  --ui-glass: rgba(16, 22, 33, .42);
  --ui-glass-strong: rgba(10, 17, 29, .68);
  --ui-edge: rgba(215, 232, 248, .045);
  --ui-edge-hover: rgba(205, 234, 255, .42);
  --ui-text: #f5f7fb;
  --ui-muted: #9eabc0;
  --ui-accent: #79c3ff;
  --ui-accent-strong: #d5efff;
  --ui-success: #72dfc4;
  --ui-warning: #f0bd72;
  --ui-danger: #f28e9a;
  --ui-radius: 24px;
  --ui-shadow: 0 20px 58px rgba(0, 0, 0, .26), 0 2px 10px rgba(110, 160, 220, .025), inset 0 2px 5px rgba(255, 255, 255, .026), inset 0 -10px 24px rgba(1, 7, 16, .115);
  --bg: var(--ui-canvas-0);
  --canvas: var(--ui-canvas-0);
  --panel: var(--ui-glass);
  --panel-strong: var(--ui-glass-strong);
  --surface: var(--ui-glass);
  --text: var(--ui-text);
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --line: rgba(215, 232, 248, .075);
  --line-strong: rgba(145, 205, 255, .28);
  --accent: var(--ui-accent);
  --accent-strong: var(--ui-accent-strong);
  --brand: var(--ui-accent);
  --brand-dark: var(--ui-accent-strong);
  --warning: var(--ui-warning);
  --danger: var(--ui-danger);
  --shadow: var(--ui-shadow);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

html { min-width: 320px; background: var(--ui-canvas-0); }
*, *::before, *::after { box-sizing: border-box; }
:where(.app-shell, .workspace, .page-content, .topbar, .topbar-actions, .sidebar, .sidebar nav, .ui-glass-surface, .panel, .panel-head, .data-panel, .data-toolbar, .screen-group, .screen-card, .screen-card-head, .screen-health, .account-card, .media-card, .queue-item, .content-editor, .content-editor-head, .content-columns, .content-pane, .content-queue-item, .target-list, .publish-mode, .revision-list, .table-shell, .table-wrap),
:where(.app-shell, .workspace, .page-content, .topbar, .topbar-actions, .sidebar, .sidebar nav, .ui-glass-surface, .panel, .panel-head, .data-panel, .data-toolbar, .screen-group, .screen-card, .screen-card-head, .screen-health, .account-card, .media-card, .queue-item, .content-editor, .content-editor-head, .content-columns, .content-pane, .content-queue-item, .target-list, .publish-mode, .revision-list, .table-shell, .table-wrap) > * { min-width: 0; }
:where(p, h1, h2, h3, h4, td, th, dd, figcaption, .item-meta, .cell-sub, .detail-copy) { overflow-wrap: anywhere; }
:where(.badge, [class*="badge"]) { flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.row-actions, .editor-actions, .filter-actions, .topbar-actions, .inline-filter, .name-editor) { min-width: 0; flex-wrap: wrap; }
:where(button, button span, .screen-download, .unified-module-nav a, .nav-link, .nav-link span) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
:where(.table-wrap, .table-shell) { width: 100%; max-width: 100%; overflow: auto; }
:where(table) { width: 100%; }
body {
  min-width: 320px;
  color: var(--ui-text);
  background:
    radial-gradient(900px 620px at 18% 12%, rgba(35, 89, 183, .18), transparent 65%),
    radial-gradient(850px 600px at 85% 85%, rgba(91, 60, 180, .14), transparent 70%),
    linear-gradient(145deg, var(--ui-canvas-0) 0%, var(--ui-canvas-1) 46%, var(--ui-canvas-2) 100%);
  background-attachment: fixed;
}

.xh-global-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle var(--ui-glow-size) at var(--mx) var(--my), rgba(90, 170, 255, var(--ui-glow-alpha)) 0%, rgba(120, 100, 255, .23) 18%, rgba(47, 132, 255, .12) 37%, transparent 67%);
  filter: blur(18px);
  will-change: background;
}

body > main,
body > .app-shell,
body > .login-shell,
body > section,
body > dialog,
#appShell,
#loginShell { position: relative; z-index: 1; }

.ui-glass-surface {
  --lx: 50%;
  --ly: 50%;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--ui-edge) !important;
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: linear-gradient(145deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .006) 38%, rgba(5, 10, 18, .045) 100%), var(--ui-glass) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(24px) saturate(145%) contrast(104%);
  -webkit-backdrop-filter: blur(24px) saturate(145%) contrast(104%);
}
.ui-glass-positioned { position: relative; }

.ui-glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(340px circle at var(--lx) var(--ly), rgba(132, 198, 255, .17) 0%, rgba(118, 112, 255, .075) 35%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .012) 16%, transparent 38%),
    linear-gradient(135deg, rgba(190, 226, 255, .025) 0%, transparent 32%, rgba(82, 119, 182, .018) 72%, rgba(0, 0, 0, .035) 100%);
}

.ui-glass-surface > :not(.ui-glass-layer):not(.map-copy) { position: relative; z-index: 2; }
.ui-glass-surface > .map-copy { z-index: 0; }
.ui-glass-layer { position: absolute; border-radius: inherit; pointer-events: none; }
.ui-glass-edge {
  inset: -1px;
  z-index: 4;
  padding: 1px;
  background: radial-gradient(250px circle at var(--lx) var(--ly), rgba(218, 239, 255, .98) 0%, rgba(145, 205, 255, .78) 22%, rgba(112, 151, 255, .38) 43%, rgba(255, 255, 255, .12) 58%, transparent 76%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(135, 202, 255, .34)) drop-shadow(0 0 12px rgba(100, 139, 255, .16));
}
.ui-glass-bevel {
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0, rgba(214, 236, 255, .035) 2px, rgba(255, 255, 255, .01) 7px, transparent 15px),
    linear-gradient(90deg, rgba(180, 220, 255, .02), transparent 12%, transparent 88%, rgba(75, 105, 165, .016)),
    linear-gradient(0deg, rgba(0, 0, 0, .075) 0, rgba(0, 0, 0, .02) 5px, transparent 14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), inset 0 3px 8px rgba(215, 238, 255, .02), inset 0 -8px 18px rgba(1, 7, 16, .12), inset 3px 0 10px rgba(194, 224, 255, .012), inset -3px 0 10px rgba(34, 56, 98, .022);
}
.ui-glass-texture {
  inset: 0;
  z-index: 1;
  opacity: .18;
  mix-blend-mode: soft-light;
  background-image: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .1) 0 .6px, transparent .8px), radial-gradient(circle at 76% 64%, rgba(255, 255, 255, .055) 0 .55px, transparent .75px);
  background-size: 7px 7px, 11px 11px;
  filter: blur(.15px);
}
.ui-glass-caustic {
  inset: 5px;
  z-index: 1;
  opacity: .52;
  background: radial-gradient(190px 90px at calc(var(--lx) + 28px) calc(var(--ly) - 18px), rgba(205, 236, 255, .055), rgba(151, 199, 255, .02) 40%, transparent 72%), linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, .012) 49%, rgba(153, 204, 255, .018) 52%, transparent 58%);
  filter: blur(5px);
}

button,
.screen-download,
.unified-module-nav a,
.nav-link {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, opacity .16s ease;
}
button:not(.media-card-button):not(.map-point),
.screen-download {
  position: relative;
  overflow: hidden;
  color: #eef6ff;
  border: 1px solid rgba(215, 235, 255, .13);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .045)), rgba(15, 24, 38, .54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 6px 16px rgba(0, 0, 0, .1);
}
button:not(.media-card-button):not(.map-point):not(:disabled):hover,
.screen-download:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: var(--ui-edge-hover);
  background: linear-gradient(180deg, rgba(255, 255, 255, .125), rgba(255, 255, 255, .06)), rgba(19, 34, 54, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(116, 190, 255, .08), 0 8px 22px rgba(0, 0, 0, .18), 0 0 18px rgba(86, 170, 255, .17);
}
button:not(.media-card-button):not(.map-point):not(:disabled):active,
.screen-download:active { transform: translateY(0) scale(.985); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .12); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: rgba(220, 241, 255, .72) !important;
  box-shadow: 0 0 0 3px rgba(93, 170, 255, .16), 0 0 22px rgba(97, 174, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
button:disabled { cursor: not-allowed; opacity: .42; transform: none !important; box-shadow: none !important; }

.nav-link:hover,
.unified-module-nav a:hover { color: #fff !important; transform: translateX(2px); border-color: rgba(191, 224, 255, .16) !important; background: rgba(255, 255, 255, .055) !important; }
.nav-link.active,
.unified-module-nav a.active { color: var(--ui-accent-strong) !important; border-color: rgba(121, 195, 255, .24) !important; background: linear-gradient(135deg, rgba(121, 195, 255, .13), rgba(120, 100, 255, .07)) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 18px rgba(90, 170, 255, .08); }

input,
select,
textarea {
  color: var(--ui-text) !important;
  border: 1px solid rgba(215, 232, 248, .09) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .012)), rgba(4, 10, 19, .44) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), inset 0 -5px 12px rgba(0, 0, 0, .08);
}
input:hover,
select:hover,
textarea:hover { border-color: rgba(171, 213, 248, .2) !important; }
input::placeholder,
textarea::placeholder { color: rgba(158, 171, 192, .56); }

dialog { color: var(--ui-text); background: var(--ui-glass-strong) !important; overflow: hidden; }
dialog::backdrop { background: rgba(2, 7, 15, .72); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
th { color: #8fa1b7 !important; background: rgba(4, 10, 19, .42) !important; }
td { color: #cdd7e5 !important; border-color: rgba(215, 232, 248, .065) !important; }
tbody tr:hover { background: rgba(121, 195, 255, .035) !important; }
.badge.ready,
.badge.success { color: var(--ui-success) !important; background: rgba(114, 223, 196, .08) !important; }
.badge.waiting,
.badge.warning { color: var(--ui-warning) !important; background: rgba(240, 189, 114, .08) !important; }
.badge.failed,
.badge.danger { color: var(--ui-danger) !important; background: rgba(242, 142, 154, .08) !important; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-glass-surface { background: rgba(13, 20, 33, .94) !important; }
}

@media (max-width: 760px), (pointer: coarse) {
  .xh-global-glow { background: radial-gradient(circle 480px at 78% 18%, rgba(90, 170, 255, .2), transparent 70%); filter: blur(18px); }
  button:not(.media-card-button):not(.map-point), .screen-download { min-height: 42px; }
  .unified-module-nav a { min-width: 46px; min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .xh-global-glow { will-change: auto; }
  /* Province markers are a live operational status signal. Keep their scoped,
     low-frequency pulse visible even when the global decorative motion is reduced. */
  .map-point:not(.demo) .map-point-core { animation: provinceCorePulse 1.6s cubic-bezier(.2,.72,.32,1) infinite !important; }
  .map-point:not(.demo)::after { animation: provinceRing 2.2s cubic-bezier(.18,.7,.24,1) infinite !important; }
  .map-point:not(.demo)::before { animation: provinceRing 2.7s .65s cubic-bezier(.18,.7,.24,1) infinite !important; }
}

.toast-region {
  position: fixed;
  z-index: 10000;
  right: 24px;
  bottom: 24px;
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.toast {
  min-width: 0;
  max-width: 100%;
  padding: 13px 15px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(121, 195, 255, .28);
  border-radius: 14px;
  color: #cfeaff;
  background: rgba(8, 18, 31, .9);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
  font-size: 12px;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.success { border-color: rgba(114, 223, 196, .42); color: #a9f2df; }
.toast.error { border-color: rgba(242, 142, 154, .45); color: #ffc1c8; }
.toast.warning { border-color: rgba(240, 189, 114, .45); color: #ffe0a8; }
.toast.info { border-color: rgba(121, 195, 255, .42); color: #cfeaff; }