/* Moon panel: glass sidebar over the dot field.
 *
 * Not part of the panel's own files: nginx adds this stylesheet to the panel's HTML, so the
 * panel release stays untouched and a new release keeps the look. Remove the sub_filter
 * lines in /etc/nginx/snippets/moon-stage-routes.conf to go back.
 *
 * The page's dot field (moon-dot-backdrop) is a canvas over the workspace only: a 24px grid,
 * 1px dots in rgba(172,155,218,.28), first dot 12px in. The sidebar continues the same grid in
 * CSS, anchored to its right edge so the dots line up across the seam.
 */

:root {
  --mg-dot: rgba(172, 155, 218, 0.28);
  --mg-glass: rgba(255, 255, 255, 0.045);
  --mg-glass-top: rgba(255, 255, 255, 0.075);
  --mg-edge: rgba(255, 255, 255, 0.085);
  --mg-edge-hover: rgba(255, 255, 255, 0.16);
  --mg-accent: 139, 131, 235;
}

/* The sidebar box goes: no fill, border, frame or rounded card, just the dot field. */
html body .c-shell.moon-ui .c-sidebar,
html body .c-shell .c-sidebar {
  background-color: #000 !important;
  background-image: radial-gradient(circle at center, var(--mg-dot) 0 1px, transparent 1.6px) !important;
  background-size: 24px 24px !important;
  background-position: right 0 top 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* No scrollbar line beside the menu; it still scrolls when it doesn't fit. */
html body .c-shell .c-sidebar nav,
html body .c-shell .c-sidebar {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}
html body .c-shell .c-sidebar nav::-webkit-scrollbar,
html body .c-shell .c-sidebar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Section labels and the user block sit on the field without their own boxes. */
html body .moon-ui .c-sidebar .sidebar-provider,
html body .moon-ui .c-sidebar .workspace-switch {
  background: transparent !important;
}
html body .moon-ui .c-sidebar .sidebar-user {
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

/* Glass buttons. */
html body .moon-ui .c-sidebar .nav-group > button {
  position: relative;
  margin: 0 0 8px !important;
  border-radius: 13px !important;
  border: 1px solid var(--mg-edge) !important;
  background: linear-gradient(180deg, var(--mg-glass-top), var(--mg-glass)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 22px -14px rgba(0, 0, 0, 0.9) !important;
  color: #c9c6e2 !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.15s ease, transform 0.12s ease !important;
}
html body .moon-ui .c-sidebar .nav-group > button > svg {
  color: #a9a3d6 !important;
}
html body .moon-ui .c-sidebar .nav-group > button:hover:not(.active) {
  border-color: var(--mg-edge-hover) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.055)) !important;
  color: #fff !important;
}
html body .moon-ui .c-sidebar .nav-group > button:active {
  transform: scale(0.985);
}

/* The current page: the same glass, lit with the Moon violet. */
html body .moon-ui .c-sidebar .nav-group > button.active,
html body .moon-ui .c-sidebar .nav-group > button.active:hover {
  border-color: rgba(181, 170, 255, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(var(--mg-accent), 0.30), rgba(var(--mg-accent), 0.12)),
    linear-gradient(180deg, var(--mg-glass-top), var(--mg-glass)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(var(--mg-accent), 0.10),
    0 10px 28px -12px rgba(var(--mg-accent), 0.55) !important;
  color: #f3f0ff !important;
}
html body .moon-ui .c-sidebar .nav-group > button.active > svg {
  color: #d9d2ff !important;
  filter: drop-shadow(0 0 6px rgba(var(--mg-accent), 0.55));
}
/* The old left bar on the active item is replaced by the glow. */
html body .moon-ui .c-sidebar .nav-active-mark {
  display: none !important;
}

/* Counters inside buttons as small glass chips. */
html body .moon-ui .c-sidebar .nav-group > button i {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px !important;
}

/* As a slide-in drawer (narrow screens) the menu floats over the page, so it keeps a frosted
 * pane behind the buttons to stay readable. */
html body .c-shell.moon-ui[data-navigation=drawer] .c-sidebar {
  background-color: rgba(6, 6, 10, 0.78) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.07) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .moon-ui .c-sidebar .nav-group > button { transition: none !important; }
  html body .moon-ui .c-sidebar .nav-group > button:active { transform: none; }
}

/* ------------------------------------------------------------------------------------------
 * The rest of the panel in the same glass, over the same dot field.
 * ---------------------------------------------------------------------------------------- */

:root {
  --mg-card: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  --mg-card-edge: rgba(255, 255, 255, 0.08);
  --mg-blur: blur(16px) saturate(140%);
  --mg-lift: 0 18px 40px -28px rgba(0, 0, 0, 0.95);
  --mg-shine: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Top bar: 100% transparent, dots stay fully visible through it without blur, no dividing line */
html body .c-shell.moon-ui .c-topbar,
html body .moon-ui .c-topbar,
html body .c-topbar {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

/* Cards, panels and pop-ups. */
html body .moon-ui .c-panel,
html body .c-modal {
  background: var(--mg-card) !important;
  border: 1px solid var(--mg-card-edge) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: var(--mg-shine), var(--mg-lift) !important;
}
html body .c-modal {
  background: linear-gradient(180deg, rgba(28, 26, 44, 0.86), rgba(14, 13, 24, 0.9)) !important;
}

/* Stat summary rows (e.g. Backups page): must NOT be styled as cards or solid black boxes.
 * Clean, seamless stats floating directly on the dot canvas, matching server summary stats */
html body .moon-ui .backup-stat-row,
html body .moon-ui .x-backups-page .backup-stat-row {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 14px 0 20px !important;
}

html body .moon-ui .backup-stat-row .c-panel,
html body .moon-ui .backup-stat-row > .c-panel,
html body .moon-ui .x-backups-page .backup-stat-row .c-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

html body .moon-ui .backup-stat-row strong {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  order: -1 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

html body .moon-ui .backup-stat-row .stat-top {
  font-size: 13px !important;
  color: #aab6cc !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body .moon-ui .backup-stat-row .stat-top svg,
html body .moon-ui .backup-stat-row small {
  display: none !important;
}

html body .moon-ui .c-panel-head {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
/* Page head: no dividing line slicing across the dot canvas */
html body .moon-ui .c-page-head,
html body .c-page-head {
  border: 0 !important;
  border-bottom: 0 !important;
}

/* Table rows inside cards: no solid fills, a soft glass row on hover. */
html body .moon-ui .c-table-wrap,
html body .moon-ui .c-table-wrap table,
html body .moon-ui .c-table-wrap thead,
html body .moon-ui .c-table-wrap th {
  background: transparent !important;
}
html body .moon-ui .c-table-wrap td,
html body .moon-ui .c-table-wrap th {
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html body .moon-ui .c-table-wrap tbody tr:hover > td {
  background: rgba(255, 255, 255, 0.035) !important;
}

/* Buttons. */
html body .moon-ui .c-button:not(.ghost),
html body .c-modal .c-button:not(.ghost) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px !important;
  color: #ece9ff !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 20px -14px rgba(0, 0, 0, 0.9) !important;
}
html body .moon-ui .c-button:not(.ghost):hover:not(:disabled),
html body .c-modal .c-button:not(.ghost):hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
html body .moon-ui .c-button.primary,
html body .c-modal .c-button.primary {
  background: linear-gradient(180deg, rgba(var(--mg-accent), 0.72), rgba(var(--mg-accent), 0.42)) !important;
  border-color: rgba(196, 186, 255, 0.55) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 30px -14px rgba(var(--mg-accent), 0.75) !important;
}
html body .moon-ui .c-button.primary:hover:not(:disabled),
html body .c-modal .c-button.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(var(--mg-accent), 0.86), rgba(var(--mg-accent), 0.54)) !important;
  border-color: rgba(214, 206, 255, 0.7) !important;
}
html body .moon-ui .c-button.danger,
html body .c-modal .c-button.danger {
  background: linear-gradient(180deg, rgba(255, 105, 140, 0.2), rgba(255, 105, 140, 0.08)) !important;
  border-color: rgba(255, 150, 175, 0.38) !important;
  color: #ffdbe5 !important;
}
html body .moon-ui .c-button:disabled {
  opacity: 0.5;
}

/* Search, inputs, selects. */
html body .moon-ui .c-search,
html body .moon-ui .c-field input,
html body .moon-ui .c-field select,
html body .moon-ui .c-field textarea,
html body .c-modal .c-field input,
html body .c-modal .c-field select,
html body .c-modal .c-field textarea {
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html body .moon-ui .c-search:focus-within,
html body .moon-ui .c-field :is(input, select, textarea):focus,
html body .c-modal .c-field :is(input, select, textarea):focus {
  border-color: rgba(181, 170, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(var(--mg-accent), 0.18) !important;
  outline: none !important;
}

/* Tab and filter groups: a glass track with a lit pill for the chosen one. */
html body .moon-ui :is(.filter-tabs, .page-tabs, .m-filter-segments, .m-view-toggle, .x-workspace-tabs) {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 13px !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
}
html body .moon-ui :is(.filter-tabs, .page-tabs, .m-filter-segments, .m-view-toggle, .x-workspace-tabs) button {
  border-radius: 9px !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body .moon-ui :is(.filter-tabs, .page-tabs, .m-filter-segments, .m-view-toggle, .x-workspace-tabs) button:hover:not(.active):not([aria-selected=true]):not([aria-pressed=true]) {
  background: rgba(255, 255, 255, 0.06) !important;
}
html body .moon-ui :is(.filter-tabs, .page-tabs, .m-filter-segments, .m-view-toggle, .x-workspace-tabs) button:is(.active, [aria-selected=true], [aria-pressed=true]) {
  background: linear-gradient(180deg, rgba(var(--mg-accent), 0.34), rgba(var(--mg-accent), 0.16)) !important;
  border: 1px solid rgba(181, 170, 255, 0.38) !important;
  color: #f3f0ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Badges as small glass chips. */
html body .moon-ui .c-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
}

/* Glass blur is costly on weak devices and unreadable without transparency support. */
@media (prefers-reduced-transparency: reduce) {
  html body .moon-ui :is(.c-panel, .c-button, .c-search, .c-sidebar .nav-group > button),
  html body .c-modal {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ------------------------------------------------------------------------------------------
 * One moving dot field behind the whole window (moon-dots.js). Only once that script runs
 * (it marks <html> with .moon-glass-dots-on): the panel's own canvas, which covered only the
 * page area, and the still CSS dots under the sidebar step aside, and the layers above go
 * clear so the field shows everywhere. Without the script the page keeps the dots above.
 * ---------------------------------------------------------------------------------------- */
html.moon-glass-dots-on body {
  background: #000 !important;
}
canvas.moon-glass-dots {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
html.moon-glass-dots-on #app,
html.moon-glass-dots-on .c-shell {
  position: relative;
  z-index: 1;
}
html.moon-glass-dots-on .c-shell,
html.moon-glass-dots-on .c-shell.moon-ui .c-workspace {
  background: transparent !important;
}
html.moon-glass-dots-on body .c-shell.moon-ui .c-sidebar,
html.moon-glass-dots-on body .c-shell .c-sidebar {
  background-color: transparent !important;
  background-image: none !important;
}
html.moon-glass-dots-on .moon-dot-backdrop {
  display: none !important;
}
/* The slide-in menu on phones still needs its frosted pane over the page. */
html.moon-glass-dots-on body .c-shell.moon-ui[data-navigation=drawer] .c-sidebar {
  background-color: rgba(6, 6, 10, 0.78) !important;
}

/* Console log rows: the row grid has a column for the source, which the panel hides, so the
 * message used to land in that narrow 100px column and wrap after every word. The message
 * now always runs to the end of the row (phone layouts already start it at column 1). */
html body .moon-ui .console-log-panel .terminal-line > p,
html body .moon-ui .x-console-page .terminal-line > p {
  grid-column-end: -1 !important;
  min-width: 0;
}

/* World page, "Time of day" and "Weather": the panel draws these as frameless blocks with no
 * inner padding; as glass cards they get the padding a card needs. */
html body .moon-ui .x-world-page .world-command-grid[data-section=environment] > .c-panel {
  padding: 18px 18px 20px !important;
}
html body .moon-ui .x-world-page .world-command-grid[data-section=environment] .c-panel-head {
  padding-inline: 0 !important;
}

/* The four time presets (morning, day, evening, night) are separate glass buttons like the
 * weather ones, the chosen one lit; not a tab track. */
html body .moon-ui .x-world-page .m-time-presets {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
html body .moon-ui .x-world-page .m-time-presets button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 13px !important;
  color: #e4e0f7 !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}
html body .moon-ui .x-world-page .m-time-presets button:hover:not(:disabled):not([aria-pressed=true]) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
html body .moon-ui .x-world-page .m-time-presets button:is([aria-pressed=true], .active, .selected),
html body .moon-ui .x-world-page .weather-grid button.selected {
  background: linear-gradient(180deg, rgba(var(--mg-accent), 0.42), rgba(var(--mg-accent), 0.2)) !important;
  border-color: rgba(196, 186, 255, 0.55) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px -14px rgba(var(--mg-accent), 0.7) !important;
}

/* Tab bars (world sections, console, workspace): the panel keeps room under the tabs for a
 * scrollbar and a bottom padding. Inside the glass track that left an empty strip, so the
 * track gets even padding and the bar still scrolls sideways without a visible scrollbar. */
html body .moon-ui :is(.page-tabs, .x-workspace-tabs, .filter-tabs) {
  padding: 4px !important;
  gap: 4px !important;
  align-items: center !important;
  border: 0 !important;
  border-bottom: 0 !important;
  scrollbar-width: none !important;
}
html body .moon-ui :is(.page-tabs, .x-workspace-tabs, .filter-tabs)::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
}
html body .moon-ui :is(.page-tabs, .x-workspace-tabs) button {
  margin: 0 !important;
  min-height: 38px;
}

/* Remaining solid parts brought into the glass look. */
/* World page outer surface: glass instead of a solid violet slab. */
html body .moon-ui .x-world-page .moon-world-surface {
  background: var(--mg-card) !important;
  border: 1px solid var(--mg-card-edge) !important;
  border-radius: 20px !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: var(--mg-shine), var(--mg-lift) !important;
}
/* Table header rows: no solid band. */
html body .moon-ui .c-table-wrap th,
html body .moon-ui .m-server-table-head,
html body .moon-ui table thead {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
/* Dropdowns (sort order etc.) as glass controls. */
html body .moon-ui select,
html body .c-modal select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px !important;
  color: #ece9ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
html body .moon-ui select:hover { border-color: rgba(255, 255, 255, 0.2) !important; }
html body .moon-ui select option { background: #14121f; color: #ece9ff; }

/* Console page in the glass look. */
html body .moon-ui .x-console-page .terminal-panel,
html body .moon-ui .x-console-page .console-log-heading,
html body .moon-ui .x-console-page .console-log-toolbar,
html body .moon-ui .console-log-panel .terminal-output {
  background: transparent !important;
}
html body .moon-ui .x-console-page .terminal-panel {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html body .moon-ui .console-log-panel .terminal-output {
  background: rgba(0, 0, 0, 0.28) !important;
}
html body .moon-ui .console-log-toolbar { border-color: rgba(255, 255, 255, 0.07) !important; }
html body .moon-ui .console-log-panel .terminal-line { border-color: rgba(255, 255, 255, 0.05) !important; }
/* No empty column where the hidden source used to be: time, level, message. */
html body .moon-ui .x-console-page .console-log-panel .terminal-line,
html body .moon-ui .console-log-panel .terminal-line {
  grid-template-columns: 72px 56px minmax(0, 1fr) !important;
}
html body .moon-ui .console-log-panel .terminal-line > span:not(.console-level) { display: none !important; }
html body .moon-ui .console-log-panel .terminal-line .console-level {
  background: rgba(var(--mg-accent), 0.22) !important;
  border: 1px solid rgba(181, 170, 255, 0.28);
  border-radius: 8px !important;
}
html body .moon-ui .console-log-panel .console-level.warn { background: rgba(255, 196, 10, 0.16) !important; border-color: rgba(255, 196, 10, 0.32); }
html body .moon-ui .console-log-panel .console-level.error { background: rgba(255, 105, 140, 0.18) !important; border-color: rgba(255, 150, 175, 0.34); }
/* Command line: a frosted strip instead of a solid violet bar. */
html body .moon-ui .console-command-bar,
html body .moon-ui .x-console-page .console-command-bar {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
}
/* The server strip above. */
html body .moon-ui .x-console-page .console-connection-strip {
  background: var(--mg-card) !important;
  border: 1px solid var(--mg-card-edge) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
}

/* Servers page: the server table and its cards in glass. */
html body .moon-ui .m-server-table:not(.is-grid),
html body .moon-ui .m-server-table.is-grid .m-server-row {
  background: var(--mg-card) !important;
  border: 1px solid var(--mg-card-edge) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: var(--mg-shine), var(--mg-lift) !important;
}
html body .moon-ui .m-server-table-head {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
html body .moon-ui .m-server-row { border-color: rgba(255, 255, 255, 0.06) !important; }
html body .moon-ui .m-server-row-main:hover { background: rgba(255, 255, 255, 0.035) !important; }
html body .moon-ui .m-server-row-main .m-map-marker {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
}
/* Dropdowns: same glass as buttons (the plain tint read as a solid box). */
html body .moon-ui select,
html body .c-modal select,
html body .c-server-select select,
html body .m-focus-header select {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px !important;
}

/* No divider line under the Moon logo in the sidebar. */
html body .moon-ui .c-brand { border-bottom: 0 !important; }

/* Moon logo: transparent background and direct true-color rendering without screen blend */
html body .moon-ui .c-brand,
html body .c-shell .c-brand,
html body .c-sidebar .c-brand {
  background: transparent !important;
  border-bottom: 0 !important;
}
html body .moon-ui .c-brand img,
html body .c-shell .c-brand img,
html body .c-sidebar .c-brand img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}

/* ------------------------------------------------------------------------------------------
 * Liquid Glass UI refinements: remove solid black backgrounds and give buttons liquid glass
 * ---------------------------------------------------------------------------------------- */

/* Platform context strip: 100% transparent, NO black background, no dividing line */
html body .moon-ui .platform-context-strip,
html body .platform-context-strip {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Role badge: pill in liquid glass with subtle glow */
html body .moon-ui .platform-context-strip .platform-context-role {
  background: linear-gradient(180deg, rgba(var(--mg-accent), 0.22), rgba(var(--mg-accent), 0.08)) !important;
  border: 1px solid rgba(181, 170, 255, 0.28) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  color: #e5dfff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 10px -4px rgba(var(--mg-accent), 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* Top bar buttons: liquid glass icon pills matching global-search */
html body .c-shell.moon-ui .c-topbar .icon-action,
html body .c-shell.moon-ui .c-topbar .desktop-toggle,
html body .c-shell.moon-ui .c-topbar .mobile-toggle,
html body .c-shell.moon-ui .c-topbar .bell-button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  color: #c9c5e8 !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px -10px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.16s ease !important;
  cursor: pointer;
}
html body .c-shell.moon-ui .c-topbar .icon-action:hover,
html body .c-shell.moon-ui .c-topbar .desktop-toggle:hover,
html body .c-shell.moon-ui .c-topbar .mobile-toggle:hover,
html body .c-shell.moon-ui .c-topbar .bell-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.065)) !important;
  border-color: rgba(181, 170, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 14px -3px rgba(var(--mg-accent), 0.45) !important;
  transform: translateY(-1px) !important;
}
html body .c-shell.moon-ui .c-topbar .icon-action:active,
html body .c-shell.moon-ui .c-topbar .desktop-toggle:active,
html body .c-shell.moon-ui .c-topbar .bell-button:active {
  transform: translateY(1px) scale(0.97) !important;
}

/* Global search pill: liquid glass matching topbar buttons */
html body .c-shell.moon-ui .global-search {
  height: 36px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px !important;
  color: #c9c5e8 !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px -10px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.16s ease !important;
}
html body .c-shell.moon-ui .global-search:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)) !important;
  border-color: rgba(181, 170, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 14px -3px rgba(var(--mg-accent), 0.45) !important;
}
html body .c-shell.moon-ui .global-search kbd {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  color: #aba6cf !important;
}

/* Context strip buttons & ghost buttons (e.g. 'Клиенты >', 'Свои серверы') in liquid glass */
html body .moon-ui .platform-context-strip .c-button,
html body .moon-ui .platform-context-strip .c-button.ghost,
html body .moon-ui .c-button.ghost,
html body .c-modal .c-button.ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 11px !important;
  color: #ded9ff !important;
  padding: 6px 14px !important;
  -webkit-backdrop-filter: var(--mg-blur);
  backdrop-filter: var(--mg-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 16px -10px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.16s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html body .moon-ui .platform-context-strip .c-button:hover,
html body .moon-ui .platform-context-strip .c-button.ghost:hover:not(:disabled),
html body .moon-ui .c-button.ghost:hover:not(:disabled),
html body .c-modal .c-button.ghost:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06)) !important;
  border-color: rgba(181, 170, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 14px -3px rgba(var(--mg-accent), 0.45) !important;
  transform: translateY(-1px) !important;
}
html body .moon-ui .platform-context-strip .c-button:active,
html body .moon-ui .c-button.ghost:active:not(:disabled) {
  transform: translateY(1px) scale(0.98) !important;
}

/* Moon logo: restored to clean transparent image directly on dots without any card/wrapper */
html body .moon-ui .c-brand,
html body .c-shell .c-brand,
html body .c-sidebar .c-brand {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .moon-ui .c-brand img,
html body .c-shell .c-brand img,
html body .c-sidebar .c-brand img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}


/* ------------------------------------------------------------------------------------------
 * Fluid Motion & Smooth Micro-animations
 * Apple/macOS-style smooth cubic-bezier easing curves, gentle spring lifts, and liquid focus
 * ---------------------------------------------------------------------------------------- */

/* 1. Silky Page & View Transition: subtle rise and crystal-clear fade on view switch */
@keyframes moon-page-enter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.996);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
html body .moon-ui .c-page,
html body .c-shell .c-page {
  animation: moon-page-enter 0.34s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 2. Modal dialogs: smooth spring entrance with frosted background transition */
@keyframes moon-modal-enter {
  0% {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.95);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}
@keyframes moon-overlay-enter {
  0% {
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
html body .c-modal-overlay {
  animation: moon-overlay-enter 0.28s ease-out both !important;
}
html body .c-modal {
  animation: moon-modal-enter 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

/* 3. Dropdowns & popovers: smooth fluid unfold */
@keyframes moon-dropdown-enter {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
html body .c-dropdown,
html body [role="menu"] {
  animation: moon-dropdown-enter 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  transform-origin: top center;
}
html body .c-dropdown [role="menuitem"] {
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease !important;
}
html body .c-dropdown [role="menuitem"]:hover {
  transform: translateX(4px) !important;
}

/* 4. Sidebar navigation buttons: smooth slide & lift with glowing hover */
html body .moon-ui .c-sidebar .nav-group > button {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s ease !important;
}
html body .moon-ui .c-sidebar .nav-group > button:hover:not(.active) {
  transform: translateX(4px) translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              0 8px 24px -10px rgba(0, 0, 0, 0.8),
              0 0 16px -4px rgba(var(--mg-accent), 0.35) !important;
}
html body .moon-ui .c-sidebar .nav-group > button:active {
  transform: translateX(2px) translateY(1px) scale(0.985) !important;
  transition-duration: 0.08s !important;
}
html body .moon-ui .c-sidebar .nav-group > button > svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
}
html body .moon-ui .c-sidebar .nav-group > button:hover:not(.active) > svg {
  transform: scale(1.12);
}

/* 5. Liquid Glass Buttons & Controls everywhere: fluid hover lift and soft press feedback */
html body .moon-ui :is(.c-button, button.c-button, a.c-button),
html body .c-modal .c-button,
html body .c-shell.moon-ui .c-topbar :is(.icon-action, .desktop-toggle, .mobile-toggle, .bell-button) {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.24s ease,
              border-color 0.24s ease,
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s ease,
              filter 0.2s ease !important;
}
html body .moon-ui :is(.c-button, button.c-button, a.c-button):hover:not(:disabled),
html body .c-modal .c-button:hover:not(:disabled),
html body .c-shell.moon-ui .c-topbar :is(.icon-action, .desktop-toggle, .mobile-toggle, .bell-button):hover {
  transform: translateY(-2px) !important;
}
html body .moon-ui :is(.c-button, button.c-button, a.c-button):active:not(:disabled),
html body .c-modal .c-button:active:not(:disabled),
html body .c-shell.moon-ui .c-topbar :is(.icon-action, .desktop-toggle, .mobile-toggle, .bell-button):active {
  transform: translateY(1px) scale(0.97) !important;
  transition-duration: 0.08s !important;
}

/* 6. Tabs switching (.page-tabs, .x-workspace-tabs, .filter-tabs): smooth transition */
html body .moon-ui :is(.page-tabs, .x-workspace-tabs, .filter-tabs) button {
  transition: background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.18s ease,
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .moon-ui :is(.page-tabs, .x-workspace-tabs, .filter-tabs) button:hover:not(.active) {
  transform: translateY(-1px) !important;
}
html body .moon-ui :is(.page-tabs, .x-workspace-tabs, .filter-tabs) button:active {
  transform: translateY(1px) scale(0.98) !important;
  transition-duration: 0.08s !important;
}

/* 7. Server grid cards: smooth floating card hover lift with glass glow */
html body .moon-ui .m-server-table.is-grid .m-server-row {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background 0.25s ease !important;
}
html body .moon-ui .m-server-table.is-grid .m-server-row:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(181, 170, 255, 0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 18px 40px -14px rgba(0, 0, 0, 0.85),
              0 0 24px -6px rgba(var(--mg-accent), 0.35) !important;
}

/* Table rows in list mode: soft slide and highlight */
html body .moon-ui .m-server-table:not(.is-grid) .m-server-row-main {
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .moon-ui .m-server-table:not(.is-grid) .m-server-row-main:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  transform: translateX(3px) !important;
}

/* 8. Global search bar: liquid expansion & focus glow */
html body .moon-ui .global-search,
html body .c-topbar .global-search {
  transition: border-color 0.25s ease,
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease !important;
}
html body .moon-ui .global-search:focus-within {
  border-color: rgba(181, 170, 255, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 0 22px -3px rgba(var(--mg-accent), 0.5),
              0 8px 24px -8px rgba(0, 0, 0, 0.7) !important;
  transform: translateY(-1px) !important;
}

/* 9. Live server pulse: breathing green beacon for active servers */
@keyframes moon-live-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 209, 149, 0.7), 0 0 8px rgba(76, 209, 149, 0.5);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 6px rgba(76, 209, 149, 0), 0 0 14px rgba(76, 209, 149, 0.85);
  }
}
html body .moon-ui .m-dot.positive {
  background: #4cd195 !important;
  animation: moon-live-pulse 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

/* 10. Form fields: smooth liquid focus */
html body .moon-ui :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  transition: border-color 0.22s ease,
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s ease,
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .moon-ui :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  border-color: rgba(181, 170, 255, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 0 18px -3px rgba(var(--mg-accent), 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html body .moon-ui *,
  html body .c-modal *,
  html body .c-shell * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Moon Interactive: Rolling Ticker, Liquid Glass Player Badges & Actions
   ========================================================================== */

/* 1. Animated Rolling Number Ticker */
.moon-ticker {
  display: inline-flex !important;
  align-items: baseline !important;
  vertical-align: baseline !important;
  line-height: 1 !important;
  overflow: hidden !important;
  font-variant-numeric: tabular-nums !important;
}
.moon-ticker-static {
  display: inline-block !important;
  line-height: 1 !important;
}
.moon-ticker-slot {
  display: inline-block !important;
  height: 1.15em !important;
  overflow: hidden !important;
  vertical-align: -0.14em !important;
  line-height: 1.15em !important;
  width: 0.65em !important;
  text-align: center !important;
}
.moon-ticker-column {
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}
.moon-ticker-num {
  display: block !important;
  height: 1.15em !important;
  line-height: 1.15em !important;
  text-align: center !important;
}

/* 2. Floating Liquid Glass Chips (Ping, Session Time) */
.moon-player-meta-strip {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
.moon-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.2px !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: all 0.2s ease !important;
}
.moon-chip-ping {
  background: linear-gradient(180deg, rgba(76, 209, 149, 0.2), rgba(76, 209, 149, 0.06)) !important;
  border: 1px solid rgba(76, 209, 149, 0.35) !important;
  color: #a4f5cb !important;
}
.moon-chip-time {
  background: linear-gradient(180deg, rgba(var(--mg-accent), 0.2), rgba(var(--mg-accent), 0.06)) !important;
  border: 1px solid rgba(181, 170, 255, 0.28) !important;
  color: #ded8ff !important;
}
.moon-chip-offline {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #8c88a8 !important;
}
.moon-ping-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #4cd195 !important;
  box-shadow: 0 0 6px #4cd195 !important;
  display: inline-block !important;
}

/* In Table view */
.moon-table-ping {
  margin-inline-start: 8px !important;
}

/* 3. Quick Action Buttons on Rows & Cards */
.moon-card-quick-actions,
.moon-row-quick-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.moon-card-quick-actions {
  margin-inline-start: auto !important;
}
.moon-row-quick-actions {
  margin-inline-end: 8px !important;
}
.moon-mini-btn {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  color: #d1ccf2 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
.moon-mini-btn:hover {
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.7) !important;
}
.moon-btn-msg:hover {
  background: linear-gradient(180deg, rgba(var(--mg-accent), 0.3), rgba(var(--mg-accent), 0.1)) !important;
  border-color: rgba(181, 170, 255, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px -2px rgba(var(--mg-accent), 0.5) !important;
}
.moon-btn-kick:hover {
  background: linear-gradient(180deg, rgba(255, 196, 10, 0.28), rgba(255, 196, 10, 0.08)) !important;
  border-color: rgba(255, 206, 60, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 0 12px -2px rgba(255, 196, 10, 0.5) !important;
}
.moon-btn-ban:hover {
  background: linear-gradient(180deg, rgba(255, 80, 110, 0.32), rgba(255, 80, 110, 0.1)) !important;
  border-color: rgba(255, 110, 140, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 0 12px -2px rgba(255, 80, 110, 0.5) !important;
}
.moon-mini-btn:active {
  transform: translateY(1px) scale(0.95) !important;
}

/* 4. Player Profile Modal: Telemetry Strip & Quick Action Deck */
.moon-profile-telemetry {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 20px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.moon-telem-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.moon-telem-label {
  font-size: 11px !important;
  color: #8c87ad !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.moon-telem-val {
  font-size: 13px !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.moon-telem-val.val-good { color: #a4f5cb !important; }
.moon-telem-val.val-warn { color: #ffd17a !important; }

.moon-profile-deck {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
}
.moon-action-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e5e1fc !important;
  text-align: start !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px -12px rgba(0, 0, 0, 0.7) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.moon-action-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px -10px rgba(0, 0, 0, 0.8) !important;
}
.moon-action-card:active {
  transform: translateY(1px) scale(0.98) !important;
}
.moon-action-card b {
  display: block !important;
  font-size: 13px !important;
  color: #ffffff !important;
}
.moon-action-card small {
  display: block !important;
  font-size: 11px !important;
  color: #9f9abf !important;
  margin-top: 1px !important;
}
.moon-action-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}

.moon-action-msg .moon-action-icon {
  background: rgba(var(--mg-accent), 0.22) !important;
  border: 1px solid rgba(181, 170, 255, 0.35) !important;
  color: #d8d0ff !important;
}
.moon-action-msg:hover {
  border-color: rgba(181, 170, 255, 0.45) !important;
  box-shadow: 0 0 18px -4px rgba(var(--mg-accent), 0.4) !important;
}

.moon-action-kick .moon-action-icon {
  background: rgba(255, 196, 10, 0.22) !important;
  border: 1px solid rgba(255, 206, 60, 0.38) !important;
  color: #ffe47a !important;
}
.moon-action-kick:hover {
  border-color: rgba(255, 206, 60, 0.5) !important;
  box-shadow: 0 0 18px -4px rgba(255, 196, 10, 0.4) !important;
}

.moon-action-ban .moon-action-icon {
  background: rgba(255, 80, 110, 0.25) !important;
  border: 1px solid rgba(255, 110, 140, 0.42) !important;
  color: #ffb8c7 !important;
}
.moon-action-ban:hover {
  border-color: rgba(255, 110, 140, 0.55) !important;
  box-shadow: 0 0 18px -4px rgba(255, 80, 110, 0.45) !important;
}

.moon-action-mute .moon-action-icon {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #e5e0f8 !important;
}
.moon-action-mute:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* 5. In-Modal Message Dialog (Whisper Prompt) */
.moon-msg-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  animation: moon-overlay-enter 0.24s ease-out both !important;
}
.moon-msg-modal {
  width: 100% !important;
  max-width: 480px !important;
  background: linear-gradient(180deg, rgba(28, 25, 46, 0.95), rgba(15, 13, 26, 0.98)) !important;
  border: 1px solid rgba(181, 170, 255, 0.3) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 60px -15px rgba(0, 0, 0, 0.95), 0 0 28px -6px rgba(var(--mg-accent), 0.4) !important;
  padding: 22px !important;
  animation: moon-modal-enter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.moon-msg-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.moon-msg-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(var(--mg-accent), 0.25) !important;
  border: 1px solid rgba(181, 170, 255, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 16px !important;
}
.moon-msg-head h4 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}
.moon-msg-head p {
  margin: 3px 0 0 !important;
  font-size: 12px !important;
  color: #9d98bf !important;
}
.moon-msg-close {
  margin-inline-start: auto !important;
  background: transparent !important;
  border: 0 !important;
  color: #8c87ab !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
}
.moon-msg-close:hover { color: #fff !important; background: rgba(255, 255, 255, 0.1) !important; }
.moon-msg-body label {
  display: block !important;
  font-size: 12px !important;
  color: #c4bee6 !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
}
.moon-msg-body textarea {
  width: 100% !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}
.moon-msg-body textarea:focus {
  border-color: rgba(181, 170, 255, 0.6) !important;
  box-shadow: 0 0 16px -3px rgba(var(--mg-accent), 0.5) !important;
  outline: none !important;
}
.moon-msg-quick-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
.moon-msg-quick-tags button {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  color: #c9c4e8 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.moon-msg-quick-tags button:hover {
  background: rgba(var(--mg-accent), 0.25) !important;
  border-color: rgba(181, 170, 255, 0.4) !important;
  color: #fff !important;
}
.moon-msg-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

/* 6. Liquid Glass Toast Container */
.moon-toast-container {
  position: fixed !important;
  top: 20px !important;
  right: 24px !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  pointer-events: none !important;
}
.moon-toast {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(28, 25, 46, 0.92), rgba(15, 13, 26, 0.95)) !important;
  border: 1px solid rgba(181, 170, 255, 0.3) !important;
  color: #f1edff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 32px -8px rgba(0, 0, 0, 0.9), 0 0 18px -4px rgba(var(--mg-accent), 0.45) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  opacity: 0 !important;
  transform: translateY(-10px) scale(0.95) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
}
.moon-toast-show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
.moon-toast-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  background: rgba(var(--mg-accent), 0.3) !important;
  border: 1px solid rgba(181, 170, 255, 0.5) !important;
  color: #fff !important;
}
.moon-toast-success .moon-toast-icon {
  background: rgba(76, 209, 149, 0.3) !important;
  border-color: rgba(76, 209, 149, 0.6) !important;
  color: #a4f5cb !important;
}
.moon-toast-danger .moon-toast-icon {
  background: rgba(255, 80, 110, 0.3) !important;
  border-color: rgba(255, 80, 110, 0.6) !important;
  color: #ffccd7 !important;
}

/* 7. Enhanced Badges in Moon UI */
html body .moon-ui .c-badge.tone-success,
html body .moon-ui .c-badge.success,
html body .moon-ui .c-badge[data-tone="success"] {
  background: linear-gradient(180deg, rgba(76, 209, 149, 0.22), rgba(76, 209, 149, 0.08)) !important;
  border: 1px solid rgba(76, 209, 149, 0.38) !important;
  color: #a4f5cb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 12px -2px rgba(76, 209, 149, 0.4) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
html body .moon-ui .c-badge.tone-danger,
html body .moon-ui .c-badge.danger,
html body .moon-ui .c-badge[data-tone="danger"] {
  background: linear-gradient(180deg, rgba(255, 85, 115, 0.24), rgba(255, 85, 115, 0.09)) !important;
  border: 1px solid rgba(255, 105, 135, 0.42) !important;
  color: #ffccd7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 12px -2px rgba(255, 85, 115, 0.4) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
/* ==========================================================================
   Smart Console: Syntax Highlighting, Floating Resume Pill, Autoscroll Toggle, Quick RCON
   ========================================================================== */

/* Make log panel a relative container for floating indicators */
html body .moon-ui .console-log-panel {
  position: relative !important;
}

/* Terminal line animations & base styling */
html body .moon-ui .console-log-panel .terminal-line {
  transition: background 0.18s ease, border-color 0.18s ease !important;
  border-left: 3px solid transparent !important;
  padding-left: 10px !important;
}

/* 1. Log Syntax Highlighting */
/* Player Join / Connect */
html body .moon-ui .console-log-panel .terminal-line.is-log-join {
  background: linear-gradient(90deg, rgba(76, 209, 149, 0.13), rgba(76, 209, 149, 0.02) 45%, transparent) !important;
  border-left-color: rgba(76, 209, 149, 0.85) !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-join p {
  color: #d8fced !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-join .console-level {
  background: rgba(76, 209, 149, 0.22) !important;
  border: 1px solid rgba(76, 209, 149, 0.45) !important;
  color: #a4f5cb !important;
}

/* Engine / System Errors */
html body .moon-ui .console-log-panel .terminal-line.is-log-error {
  background: linear-gradient(90deg, rgba(255, 75, 110, 0.15), rgba(255, 75, 110, 0.03) 45%, transparent) !important;
  border-left-color: rgba(255, 75, 110, 0.88) !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-error p {
  color: #ffe6eb !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-error .console-level {
  background: rgba(255, 75, 110, 0.25) !important;
  border: 1px solid rgba(255, 75, 110, 0.5) !important;
  color: #ffc4ce !important;
}

/* Warnings */
html body .moon-ui .console-log-panel .terminal-line.is-log-warn {
  background: linear-gradient(90deg, rgba(245, 171, 53, 0.14), rgba(245, 171, 53, 0.02) 45%, transparent) !important;
  border-left-color: rgba(245, 171, 53, 0.85) !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-warn p {
  color: #fff4d6 !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-warn .console-level {
  background: rgba(245, 171, 53, 0.22) !important;
  border: 1px solid rgba(245, 171, 53, 0.45) !important;
  color: #ffe19f !important;
}

/* RCON Commands & Highlights */
html body .moon-ui .console-log-panel .terminal-line.is-log-command {
  background: linear-gradient(90deg, rgba(162, 140, 255, 0.16), rgba(162, 140, 255, 0.03) 45%, transparent) !important;
  border-left-color: rgba(175, 155, 255, 0.9) !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-command p {
  color: #f2eeff !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-command .console-level {
  background: rgba(162, 140, 255, 0.26) !important;
  border: 1px solid rgba(185, 170, 255, 0.5) !important;
  color: #e9e3ff !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-command code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  background: rgba(162, 140, 255, 0.2) !important;
  border: 1px solid rgba(185, 170, 255, 0.4) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
}

/* Player Disconnect / Leave */
html body .moon-ui .console-log-panel .terminal-line.is-log-leave {
  background: linear-gradient(90deg, rgba(140, 145, 175, 0.11), rgba(140, 145, 175, 0.02) 45%, transparent) !important;
  border-left-color: rgba(140, 145, 175, 0.7) !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-leave p {
  color: #b8bcd4 !important;
}
html body .moon-ui .console-log-panel .terminal-line.is-log-leave .console-level {
  background: rgba(140, 145, 175, 0.2) !important;
  border: 1px solid rgba(140, 145, 175, 0.38) !important;
  color: #cfd2e3 !important;
}

/* 2. Floating Resume Pill */
.moon-scroll-pill {
  position: absolute !important;
  bottom: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, rgba(32, 28, 54, 0.9), rgba(18, 16, 32, 0.94)) !important;
  border: 1px solid rgba(185, 170, 255, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 34px -6px rgba(0, 0, 0, 0.92), 0 0 20px -4px rgba(var(--mg-accent), 0.5) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  color: #ece8ff !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  z-index: 50 !important;
  animation: moon-pill-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.moon-scroll-pill:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.02) !important;
  border-color: rgba(205, 195, 255, 0.65) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 44px -6px rgba(0, 0, 0, 0.95), 0 0 28px 0 rgba(var(--mg-accent), 0.7) !important;
}
.moon-scroll-pill:active {
  transform: translateX(-50%) scale(0.97) !important;
}

.moon-scroll-badge {
  background: linear-gradient(135deg, #7260e2, #9482ff) !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

@keyframes moon-pill-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* 3. Toolbar AutoScroll Toggle Button */
.moon-autoscroll-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.moon-autoscroll-toggle.is-active {
  background: rgba(76, 209, 149, 0.14) !important;
  border: 1px solid rgba(76, 209, 149, 0.4) !important;
  color: #a4f5cb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px -2px rgba(76, 209, 149, 0.35) !important;
}
.moon-autoscroll-toggle.is-active:hover {
  background: rgba(76, 209, 149, 0.22) !important;
  border-color: rgba(76, 209, 149, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px -2px rgba(76, 209, 149, 0.5) !important;
}
.moon-autoscroll-toggle.is-paused {
  background: rgba(245, 171, 53, 0.14) !important;
  border: 1px solid rgba(245, 171, 53, 0.4) !important;
  color: #ffe19f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px -2px rgba(245, 171, 53, 0.35) !important;
}
.moon-autoscroll-toggle.is-paused:hover {
  background: rgba(245, 171, 53, 0.22) !important;
  border-color: rgba(245, 171, 53, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px -2px rgba(245, 171, 53, 0.5) !important;
}

/* 4. Quick RCON Command Chips */
.moon-console-quick-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.moon-quick-chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: #dcd7f5 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  cursor: pointer !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.moon-quick-chip:hover {
  background: linear-gradient(180deg, rgba(var(--mg-accent), 0.3), rgba(var(--mg-accent), 0.12)) !important;
  border-color: rgba(181, 170, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 0 10px -2px rgba(var(--mg-accent), 0.4) !important;
}
.moon-quick-chip:active {
  transform: scale(0.96) !important;
}
/* ==========================================================================
   Liquid Glass Settings Page (Normal/Proper Settings Redesign)
   ========================================================================== */

/* 1. Tab Scoping */
.moon-hidden-tab {
  display: none !important;
}

/* 2. Page Container & Identity Header */
.moon-ui .x-settings-page {
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 60px;
}

.moon-ui .m-settings-identity {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 8px 16px !important;
  margin-bottom: 22px !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* 3. Segmented Pill Navigation Bar */
.moon-ui .x-settings-page .settings-layout > nav {
  grid-column: 1/-1 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  margin-bottom: 8px !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px -10px rgba(0, 0, 0, 0.6) !important;
  overflow-x: auto !important;
}

.moon-ui .x-settings-page .settings-layout > nav button {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #a7a2c7 !important;
  font-size: 13.5px !important;
  font-weight: 550 !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
}

.moon-ui .x-settings-page .settings-layout > nav button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.075) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.moon-ui .x-settings-page .settings-layout > nav button.active {
  background: linear-gradient(135deg, rgba(var(--mg-accent), 0.78), rgba(var(--mg-accent), 0.45)) !important;
  border-color: rgba(196, 186, 255, 0.6) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -4px rgba(var(--mg-accent), 0.5) !important;
  transform: translateY(-1px) !important;
}

.moon-ui .x-settings-page .settings-layout > nav button > svg:last-child {
  display: none !important;
}

/* 4. Settings Panels & Cards */
.moon-ui .x-settings-page .c-panel {
  background: linear-gradient(180deg, rgba(28, 25, 46, 0.75), rgba(16, 14, 28, 0.85)) !important;
  border: 1px solid rgba(181, 170, 255, 0.16) !important;
  border-radius: 20px !important;
  padding: 26px !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 18px 44px -14px rgba(0, 0, 0, 0.8) !important;
  margin-bottom: 24px !important;
}

.moon-ui .x-settings-page .c-panel-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 16px !important;
  margin-bottom: 22px !important;
}

.moon-ui .x-settings-page .c-panel-head h2 {
  font-size: 18px !important;
  font-weight: 650 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
}

.moon-ui .x-settings-page .c-panel-head p {
  color: #9f9abf !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* 5. Inputs, Selects & Textareas */
.moon-ui .settings-profile-form,
.moon-ui .password-security-form {
  padding: 0 !important;
}

.moon-ui .settings-profile-form .c-field label,
.moon-ui .password-security-form .c-field label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #c4bde6 !important;
  margin-bottom: 8px !important;
  display: block !important;
  letter-spacing: 0.2px !important;
}

.moon-ui .settings-profile-form input,
.moon-ui .settings-profile-form select,
.moon-ui .settings-profile-form textarea,
.moon-ui .password-security-form input {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  color: #f5f2ff !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.moon-ui .settings-profile-form input:focus,
.moon-ui .settings-profile-form select:focus,
.moon-ui .settings-profile-form textarea:focus,
.moon-ui .password-security-form input:focus {
  border-color: rgba(181, 170, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 18px -2px rgba(var(--mg-accent), 0.45) !important;
  outline: none !important;
}

.moon-ui .settings-profile-form input:read-only {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
  color: #928eb2 !important;
  cursor: not-allowed !important;
}

.moon-ui .settings-profile-form select option {
  background: #181528 !important;
  color: #f1edff !important;
}

.moon-ui .x-settings-page .form-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 20px 0 0 0 !important;
  margin-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.moon-ui .x-settings-page .form-footer span {
  font-size: 12.5px !important;
  color: #8c88ab !important;
}

/* 6. Apple-style iOS Glass Toggle Switches */
.moon-ui .preference-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-top: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.moon-ui .preference-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.moon-ui .preference-row input[type="checkbox"],
.moon-ui .mfa-check input[type="checkbox"],
.moon-spotlight-toggle,
.moon-motion-toggle,
.moon-blur-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 44px !important;
  height: 24px !important;
  flex: 0 0 44px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  position: relative !important;
  cursor: pointer !important;
  outline: none !important;
  margin: 0 !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.moon-ui .preference-row input[type="checkbox"]::before,
.moon-ui .mfa-check input[type="checkbox"]::before,
.moon-spotlight-toggle::before,
.moon-motion-toggle::before,
.moon-blur-toggle::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.moon-ui .preference-row input[type="checkbox"]:checked,
.moon-ui .mfa-check input[type="checkbox"]:checked,
.moon-spotlight-toggle:checked,
.moon-motion-toggle:checked,
.moon-blur-toggle:checked {
  background: linear-gradient(135deg, #7260e2, #9482ff) !important;
  border-color: rgba(181, 170, 255, 0.6) !important;
  box-shadow: 0 0 14px -2px rgba(114, 96, 226, 0.6) !important;
}

.moon-ui .preference-row input[type="checkbox"]:checked::before,
.moon-ui .mfa-check input[type="checkbox"]:checked::before,
.moon-spotlight-toggle:checked::before,
.moon-motion-toggle:checked::before,
.moon-blur-toggle:checked::before {
  transform: translateX(20px) !important;
}

/* 7. Aside Account Identity Deck */
.moon-ui .x-settings-page .m-settings-summary {
  background: linear-gradient(180deg, rgba(32, 28, 52, 0.8), rgba(18, 16, 30, 0.9)) !important;
  border: 1px solid rgba(181, 170, 255, 0.2) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 44px -14px rgba(0, 0, 0, 0.85), 0 0 24px -6px rgba(var(--mg-accent), 0.25) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.moon-ui .x-settings-page .m-settings-summary > svg {
  display: none !important;
}

.moon-ui .x-settings-page .m-settings-summary h2 {
  font-size: 15px !important;
  font-weight: 650 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.moon-ui .x-settings-page .m-settings-summary dl > div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.moon-ui .x-settings-page .m-settings-summary dt {
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #9893bb !important;
  font-weight: 600 !important;
}

.moon-ui .x-settings-page .m-settings-summary dd {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #f2eeff !important;
}

.moon-ui .x-settings-page .m-settings-summary p {
  color: #8f8ba8 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 16px 0 !important;
}

/* User Identity Deck Injected at top of aside */
.moon-identity-deck {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.moon-identity-avatar-ring {
  position: relative;
}

.moon-identity-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7260e2, #a28cff);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px -2px rgba(114, 96, 226, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.moon-identity-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4cd195;
  border: 2px solid #161324;
  box-shadow: 0 0 8px rgba(76, 209, 149, 0.7);
}

.moon-identity-name {
  font-size: 15px;
  font-weight: 650;
  color: #ffffff;
  line-height: 1.2;
}

.moon-identity-handle {
  font-size: 12px;
  color: #a49fc7;
  margin-top: 2px;
}

.moon-identity-badge {
  font-size: 10.5px;
  color: #6de2a5;
  font-weight: 600;
  margin-top: 4px;
}

/* 8. Appearance Studio */
.moon-appearance-studio {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.moon-studio-header h4 {
  font-size: 15px;
  font-weight: 650;
  color: #ffffff;
  margin: 0;
}

.moon-studio-header p {
  font-size: 12.5px;
  color: #9994bc;
  margin: 4px 0 16px;
}

.moon-studio-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b7b0dd;
  font-weight: 600;
  margin-bottom: 10px;
}

.moon-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.moon-palette-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  color: #dcd7f5 !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.moon-palette-btn:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.moon-palette-btn.active {
  background: rgba(var(--mg-accent), 0.2) !important;
  border-color: var(--btn-color) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px -2px rgba(var(--mg-accent), 0.45) !important;
}

.moon-palette-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.moon-studio-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.moon-studio-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.moon-studio-toggle-row:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.moon-studio-toggle-info b {
  display: block;
  font-size: 13px;
  color: #f1edff;
  font-weight: 600;
}

.moon-studio-toggle-info small {
  display: block;
  font-size: 11.5px;
  color: #8f8aa8;
  margin-top: 2px;
}

/* 9. Security Telemetry Card */
.moon-security-telemetry {
  margin-bottom: 22px;
}

.moon-telem-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(181, 170, 255, 0.12);
  border-radius: 16px;
  padding: 18px 20px;
}

.moon-telem-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.moon-telem-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--mg-accent), 0.2);
  border: 1px solid rgba(181, 170, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.moon-telem-card-head h5 {
  font-size: 14px;
  font-weight: 650;
  color: #ffffff;
  margin: 0;
}

.moon-telem-card-head p {
  font-size: 12px;
  color: #928cb5;
  margin: 2px 0 0;
}

.moon-shield-pill {
  margin-left: auto;
  background: rgba(76, 209, 149, 0.18);
  border: 1px solid rgba(76, 209, 149, 0.45);
  color: #a4f5cb;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 650;
  box-shadow: 0 0 10px -2px rgba(76, 209, 149, 0.4);
}

.moon-session-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.moon-session-chip {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  display: inline-flex;
  gap: 6px;
}

.moon-chip-k {
  color: #8c88ab;
}

.moon-chip-v {
  color: #e9e5ff;
  font-weight: 600;
}

/* 10. Ambient Cursor Spotlight */
.moon-ambient-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(var(--mg-accent), 0.15) 0%, rgba(var(--mg-accent), 0.04) 45%, transparent 70%);
  filter: blur(32px);
  will-change: transform;
  transition: opacity 0.4s ease;
}

html.moon-spotlight-off .moon-ambient-spotlight {
  display: none !important;
}

html.moon-reduced-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html.moon-blur-off * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
   User Avatar & Profile Photo Styles
   ========================================================================== */
.user-avatar-img,
.x-account-avatar-img,
.avatar-preview-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
}

.avatar-settings-group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.avatar-preview-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #231c38;
  border: 2px solid #584683;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(114, 96, 226, 0.25);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-preview-initials {
  font-size: 22px;
  font-weight: 700;
  color: #d1c2f1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avatar-actions-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  background: #342852;
  color: #f1edff;
  cursor: pointer;
  border: 1px solid #594784;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  user-select: none;
}

.avatar-upload-btn:hover {
  background: #44346c;
  border-color: #7962b8;
  box-shadow: 0 4px 14px rgba(114, 96, 226, 0.3);
  transform: translateY(-1px);
}

.avatar-upload-btn:active {
  transform: translateY(0);
}

.avatar-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(239, 68, 68, 0.12);
  color: #ff9b9b;
  cursor: pointer;
  border: 1px solid rgba(239, 68, 68, 0.3);
  transition: all 0.2s ease;
  user-select: none;
}

.avatar-remove-btn:hover {
  background: rgba(239, 68, 68, 0.24);
  border-color: rgba(239, 68, 68, 0.55);
  color: #ffbaba;
  transform: translateY(-1px);
}

.avatar-hint {
  font-size: 11px;
  color: #928ca8;
}

/* ==========================================================================
   PWA & Mobile Standalone Enhancements
   ========================================================================== */
body {
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

@media all and (display-mode: standalone) {
  html, body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
  }
}