: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, .ui-glass-surface, .panel, .data-panel, .screen-group, .screen-card, .account-card, .media-card, .queue-item, .revision-list, .table-shell),
:where(.app-shell, .workspace, .ui-glass-surface, .panel, .data-panel, .screen-group, .screen-card, .account-card, .media-card, .queue-item, .revision-list, .table-shell) > * { 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%; }
:where(.row-actions, .editor-actions, .filter-actions, .topbar-actions, .inline-filter, .name-editor) { min-width: 0; flex-wrap: wrap; }
:where(button, .screen-download, .unified-module-nav a) { max-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; }
}