/**
 * Sakura Console（Xiyin UI）· 高雅简约主题
 * - light: data-theme="light"
 * - Bilibili brand colors: --brand-* (do not mix with theme accent)
 */
:root {
  --brand-sakura: #e8a4b8;
  --brand-sakura-soft: #f0c4d0;
  --brand-sakura-deep: #d4899e;
  --brand-sakura-mist: color-mix(in srgb, #e8a4b8 14%, transparent);

  --bg: #0c0c0f;
  --surface: #16161b;
  --surface-2: #212128;
  --card: var(--surface);
  --panel: var(--surface);
  --line: #3f3f4a;
  --text: #faf8fc;
  --muted: #b4aeb8;

  --accent: #e8a4b8;
  --accent-hover: #f0c4d0;
  --accent-bg: color-mix(in srgb, #e8a4b8 12%, transparent);
  --on-accent: #2a1a20;
  --warn: #d4a85a;
  --danger: #e87888;
  --ok: #6cb8a0;
  --shadow: color-mix(in srgb, #000 36%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent) 50%, transparent);
  --selection-bg: var(--accent);
  --selection-fg: var(--on-accent);

  --brand-bili: #00a1d6;
  --brand-guard-captain: #00a1d6;
  --brand-guard-admiral: #e91e63;
  --brand-guard-governor: #ffb027;
  --brand-admin: #fb7299;
  --brand-medal-from: #23ade5;
  --brand-medal-to: #6bc8ef;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: var(--font);
  --sidebar-w: 204px;

  --control-h: 34px;
  --control-h-sm: 30px;
  --control-pad-x: 14px;
  --control-pad-x-sm: 10px;
  --control-fs: 13px;
  --control-fs-sm: 12px;

  --motion-fast: 200ms;
  --motion: 360ms;
  --motion-slow: 540ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-ark: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
  --brand-sakura: #c97a92;
  --brand-sakura-soft: #d994a8;
  --brand-sakura-deep: #b5657e;
  --brand-sakura-mist: color-mix(in srgb, #c97a92 12%, transparent);

  --bg: #ece9ed;
  --surface: #ffffff;
  --surface-2: #f5f2f6;
  --line: #d4cdd4;
  --text: #181418;
  --muted: #6a626a;
  --accent: #c97a92;
  --accent-hover: #d994a8;
  --accent-bg: color-mix(in srgb, #c97a92 10%, transparent);
  --on-accent: #ffffff;
  --warn: #b45309;
  --danger: #c94d5e;
  --ok: #1f9a78;
  --shadow: color-mix(in srgb, #2a2030 10%, transparent);
}

[data-theme="dark"] {
  --brand-sakura: #e8a4b8;
  --brand-sakura-soft: #f0c4d0;
  --brand-sakura-deep: #d4899e;
  --brand-sakura-mist: color-mix(in srgb, #e8a4b8 14%, transparent);

  --bg: #0c0c0f;
  --surface: #16161b;
  --surface-2: #212128;
  --line: #3f3f4a;
  --text: #faf8fc;
  --muted: #b4aeb8;
  --accent: #e8a4b8;
  --accent-hover: #f0c4d0;
  --accent-bg: color-mix(in srgb, #e8a4b8 12%, transparent);
  --on-accent: #2a1a20;
  --warn: #d4a85a;
  --danger: #e87888;
  --ok: #6cb8a0;
  --shadow: color-mix(in srgb, #000 36%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

::selection {
  background-color: var(--selection-bg, var(--accent)) !important;
  color: var(--selection-fg, var(--on-accent)) !important;
}
::-moz-selection {
  background-color: var(--selection-bg, var(--accent)) !important;
  color: var(--selection-fg, var(--on-accent)) !important;
}

html { font-size: 14px; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  /* 勿对根节点设 manipulation：会干扰原生惯性滑动体感 */
  touch-action: auto;
  overscroll-behavior: none;
}

html.theme-animating,
html.theme-animating body,
html.theme-animating .shell,
html.theme-animating .sidebar,
html.theme-animating .content-col,
html.theme-animating .card,
html.theme-animating .panel,
html.theme-animating .app-topbar,
html.theme-animating .mobile-bar,
html.theme-animating .auth-gate-card,
html.theme-animating .btn,
html.theme-animating .nav-btn,
html.theme-animating input,
html.theme-animating select,
html.theme-animating textarea,
html.theme-animating .topbar-song-chip,
html.theme-animating .session-user-trigger {
  transition:
    background-color 0.55s var(--ease-soft),
    color 0.55s var(--ease-soft),
    border-color 0.55s var(--ease-soft),
    box-shadow 0.55s var(--ease-soft),
    fill 0.55s var(--ease-soft);
}

button,
a,
[role="button"],
.nav-btn,
.bar-btn,
.btn,
.topbar-song-chip,
.session-user-trigger,
.theme-seg button,
.auth-tab,
label.check-row,
.mobile-bar,
.sidebar,
.card {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  outline: none;
}

button:focus,
a:focus,
[role="button"]:focus,
.nav-btn:focus,
.bar-btn:focus,
.btn:focus,
.topbar-song-chip:focus,
.session-user-trigger:focus {
  outline: none;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.nav-btn:focus:not(:focus-visible),
.bar-btn:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.topbar-song-chip:focus:not(:focus-visible),
.session-user-trigger:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.nav-btn:focus-visible,
.bar-btn:focus-visible,
.btn:focus-visible,
.topbar-song-chip:focus-visible,
.session-user-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 内容框细滚动条：淡滑轨 + 稍明显滑块，占位小 */
.la-scroll,
.main,
.table-wrap,
.sc-table-wrap,
.sc-role-list,
.stats-table-wrap,
.log-scroll,
.changelog-scroll,
.log-box,
.log-list,
.runtime,
.lf-list,
.ov-live-feed,
.mc-lyrics-scroll,
.collab-list,
.collab-ticket-detail,
.msg-side-scroll,
.account-list {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--muted) 52%, transparent)
    color-mix(in srgb, var(--muted) 14%, transparent);
  /* 预留滚动槽，避免快速滚动时滚动条显隐导致内容宽度抽搐 */
  scrollbar-gutter: stable;
}
.la-scroll::-webkit-scrollbar,
.main::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.sc-table-wrap::-webkit-scrollbar,
.sc-role-list::-webkit-scrollbar,
.stats-table-wrap::-webkit-scrollbar,
.log-scroll::-webkit-scrollbar,
.changelog-scroll::-webkit-scrollbar,
.log-box::-webkit-scrollbar,
.log-list::-webkit-scrollbar,
.runtime::-webkit-scrollbar,
.lf-list::-webkit-scrollbar,
.ov-live-feed::-webkit-scrollbar,
.mc-lyrics-scroll::-webkit-scrollbar,
.collab-list::-webkit-scrollbar,
.collab-ticket-detail::-webkit-scrollbar,
.msg-side-scroll::-webkit-scrollbar,
.account-list::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.la-scroll::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.sc-table-wrap::-webkit-scrollbar-thumb,
.sc-role-list::-webkit-scrollbar-thumb,
.stats-table-wrap::-webkit-scrollbar-thumb,
.log-scroll::-webkit-scrollbar-thumb,
.changelog-scroll::-webkit-scrollbar-thumb,
.log-box::-webkit-scrollbar-thumb,
.log-list::-webkit-scrollbar-thumb,
.runtime::-webkit-scrollbar-thumb,
.lf-list::-webkit-scrollbar-thumb,
.ov-live-feed::-webkit-scrollbar-thumb,
.mc-lyrics-scroll::-webkit-scrollbar-thumb,
.collab-list::-webkit-scrollbar-thumb,
.collab-ticket-detail::-webkit-scrollbar-thumb,
.msg-side-scroll::-webkit-scrollbar-thumb,
.account-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 48%, transparent);
  border-radius: 999px;
}
.la-scroll::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.sc-table-wrap::-webkit-scrollbar-track,
.sc-role-list::-webkit-scrollbar-track,
.stats-table-wrap::-webkit-scrollbar-track,
.log-scroll::-webkit-scrollbar-track,
.changelog-scroll::-webkit-scrollbar-track,
.log-box::-webkit-scrollbar-track,
.log-list::-webkit-scrollbar-track,
.runtime::-webkit-scrollbar-track,
.lf-list::-webkit-scrollbar-track,
.ov-live-feed::-webkit-scrollbar-track,
.mc-lyrics-scroll::-webkit-scrollbar-track,
.collab-list::-webkit-scrollbar-track,
.collab-ticket-detail::-webkit-scrollbar-track,
.msg-side-scroll::-webkit-scrollbar-track,
.account-list::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-radius: 999px;
}

.la-scroll,
.main,
.table-wrap,
.sc-table-wrap,
.sc-role-list,
.stats-table-wrap,
.log-scroll,
.changelog-scroll,
.log-box,
.log-list,
.runtime,
.lf-list,
.ov-live-feed,
.mc-lyrics-scroll,
.collab-list,
.collab-ticket-detail,
.msg-side-scroll,
.msg-log,
.account-list,
.nav {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
  touch-action: pan-y;
  scroll-behavior: auto;
}
.la-scroll {
  overflow: auto;
}
.main {
  overflow-x: hidden;
  overflow-y: auto;
  /* 勿用 pan-y：会与祖先求交，禁掉内层表格横向滑动 */
  touch-action: manipulation;
}
/* 宽表 / 横滑区：允许手指左右拖，不能只剩拖滚动条 */
.table-wrap,
.sc-table-wrap,
.stats-table-wrap,
.mb-list-wrap {
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

/* 电脑：内层滚到尽头（或本身装得下）时，允许滚轮链式传到外层页面 */
@media (hover: hover) and (pointer: fine) {
  .la-scroll,
  .table-wrap,
  .sc-table-wrap,
  .stats-table-wrap,
  .log-scroll,
  .changelog-scroll,
  .log-box,
  .log-list,
  .runtime,
  .lf-list,
  .ov-live-feed,
  .mc-lyrics-scroll,
  .collab-list,
  .collab-ticket-detail,
  .msg-side-scroll,
  .msg-log,
  .account-list {
    overscroll-behavior-y: auto;
  }
  .main,
  .nav {
    overscroll-behavior-y: contain;
  }
}

/* 仅聊天消息区：可滚但不显示滚动条（手机）；电脑端见下方 media 恢复细条 */
.msg-log {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
  scrollbar-gutter: auto;
}
.msg-log::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .msg-log {
    scrollbar-width: thin !important;
    -ms-overflow-style: auto;
    scrollbar-gutter: stable;
    scrollbar-color:
      color-mix(in srgb, var(--muted) 52%, transparent)
      color-mix(in srgb, var(--muted) 14%, transparent);
  }
  .msg-log::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    display: block !important;
    background: transparent;
  }
  .msg-log::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 48%, transparent);
    border-radius: 999px;
  }
  .msg-log::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    border-radius: 999px;
  }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: Consolas, monospace;
  font-size: 12px;
  padding: 1px 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}

 /* ---- mobile header ---- */ 
.mobile-bar {
  display: none;
  height: 48px;
  padding: 0 10px 0 12px;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.mobile-bar-title {
  display: none;
}
.bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  height: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding: 0 var(--control-pad-x-sm);
  font-size: var(--control-fs-sm);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}
.bar-btn:hover { background: var(--surface-2); }
.bar-btn-icon {
  width: var(--control-h);
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
}
.bar-btn-icon:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.bar-btn-icon:active {
  transform: scale(0.96);
}
.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
  height: 14px;
}
.nav-burger i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}
.nav-burger i:nth-child(2) { width: 14px; }
body.nav-open .nav-burger i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-burger i:nth-child(2) {
  opacity: 0;
  width: 0;
}
body.nav-open .nav-burger i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.content-col {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 20px 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
  overflow: visible;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  width: 100%;
  overflow: visible;
}

.topbar-song-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
.topbar-song-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card, var(--surface)) 88%, transparent);
  color: var(--text);
  font: inherit;
  font-size: var(--control-fs);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-align: left;
}
.topbar-song-chip:hover,
.topbar-song-chip.is-open {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--card, var(--surface)));
}
.topbar-song-chip.is-listening .topbar-song-icon {
  color: var(--accent);
}
.topbar-song-chip--mobile {
  width: 30px;
  height: 30px;
  padding: 0;
  justify-content: center;
  max-width: none;
}
.topbar-song-icon {
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 700;
}
.topbar-song-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-song-detail {
  position: fixed;
  z-index: 80;
  width: min(420px, calc(100vw - 24px));
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 12px 32px color-mix(in srgb, #000 28%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transform-origin: top center;
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out),
    visibility var(--motion-fast);
}
.topbar-song-detail.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.topbar-song-detail.hidden {
  display: none;
}
.topbar-song-detail-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 4px 0;
  font-size: 13px;
}
.topbar-song-detail-row span { color: var(--muted); }
.topbar-song-detail-row strong {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
}
.topbar-song-listen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.topbar-song-listen-hint {
  margin: 0;
  font-size: 12px;
}
.topbar-listen-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mobile-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-shrink: 0;
  justify-content: flex-end;
  min-width: 0;
}

.topbar-pm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--text);
  font: inherit;
  font-size: var(--control-fs);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.topbar-pm-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.topbar-pm-btn.hidden { display: none; }
.topbar-pm-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger, #f07178);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  text-align: center;
}
.topbar-pm-badge.hidden { display: none; }
.mobile-bar .topbar-pm-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.mobile-bar .topbar-pm-label { display: none; }
.mobile-bar .topbar-pm-btn::before {
  content: '消';
  font-weight: 600;
}
.mobile-bar .topbar-pm-btn.has-unread::before { content: '消'; }

.session-user-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.session-user-bar--mobile {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 0;
  width: auto;
  max-width: none;
}

.session-user-bar--desktop {
  width: auto;
  flex: 0 0 auto;
  max-width: min(280px, 36vw);
  overflow: visible;
}

.session-user-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.session-user-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 2px 4px 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: right;
  line-height: 1.2;
}

.session-user-trigger:hover,
.session-user-row.is-open .session-user-trigger {
  border-color: var(--line);
  background: var(--surface-2, var(--bg));
}

.session-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  min-width: 148px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transform-origin: top right;
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out),
    visibility var(--motion-fast);
}
.session-user-menu--float {
  display: none;
  position: fixed;
  z-index: 15000;
  top: 0;
  right: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transform-origin: top right;
}
.session-user-row.is-open .session-user-menu:not(.session-user-menu--float) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 500;
}

.session-user-trigger--avatar-only {
  padding: 2px;
  border-radius: 999px;
}
.session-user-trigger--avatar-only .session-user-text {
  display: none;
}

.session-user-menu[hidden] {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.session-user-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--control-fs);
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-soft);
}

.session-user-menu-item:hover {
  background: var(--surface-2, var(--bg));
}

.session-user-menu-item.is-danger {
  color: #e25555;
}

.session-user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: right;
}

.session-user-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}

.session-user-primary strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.session-user-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.session-user-text .muted {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.session-user-trigger--mobile-bar {
  width: auto;
  max-width: min(44vw, 188px);
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0 4px 0 8px;
  gap: 6px;
  box-sizing: border-box;
  align-items: center;
}

.session-user-mobile-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.session-user-mobile-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 0;
}

.session-user-trigger--mobile-bar .session-user-badges {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 2px;
  margin-top: 0;
  max-width: none;
}

.session-user-trigger--mobile-bar .session-user-face,
.session-user-trigger--mobile-bar .session-user-face-empty {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.session-user-face {
  display: block;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--bg));
  vertical-align: middle;
}

.session-user-face-empty {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}

.session-user-bar.is-admin .session-user-face-empty {
  background: color-mix(in srgb, var(--accent) 28%, var(--surface-2));
}

.session-user-bar .btn-sm {
  flex-shrink: 0;
}

.session-user-bar--mobile .btn-sm {
  display: none;
}

.profile-bili {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-bili-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.profile-bili-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.profile-bili-name {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-bili-face {
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--bg));
}

.profile-bili-face-empty {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--muted) 35%, var(--surface-2));
  font-size: 22px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}
.profile-bili-face-empty[hidden],
.profile-bili-face[hidden] {
  display: none !important;
}
.profile-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  width: fit-content;
}
.profile-online-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.profile-online-pill.is-online {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
}
.profile-online-pill.is-online::before { background: var(--ok); }
.profile-online-pill.is-offline {
  color: var(--muted);
}

.profile-bili-stats {
  margin: 0;
}

.profile-bili-stats > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
}

.sidebar-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.36);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s linear;
}
.sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

 /* ---- shell ---- */ 
.shell {
  display: flex;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 50;
}

.sidebar-head {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--line);
}
.sidebar-head h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.sidebar-head p {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.sidebar-head-toggles {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 10px;
  width: 100%;
}
.sidebar-pref-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    box-shadow var(--motion-fast) var(--ease-soft);
}
.sidebar-pref-btn svg {
  flex-shrink: 0;
  opacity: 0.72;
}
.sidebar-pref-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  color: var(--text);
}
.sidebar-pref-btn[aria-checked="true"] {
  background: var(--surface);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow) 45%, transparent);
}
.sidebar-pref-btn[aria-checked="true"] svg {
  opacity: 1;
  color: var(--accent);
}
.sidebar-pref-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.sidebar-pref-label {
  white-space: nowrap;
}

.nav-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}
.nav {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0 10px;
  -webkit-overflow-scrolling: touch;
  
  scrollbar-width: none;
}
.nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.nav-scrollbar {
  flex: 0 0 8px;
  width: 8px;
  align-self: stretch;
  position: relative;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-left: 0;
  cursor: pointer;
  touch-action: none;
}
.nav-scrollbar.hidden {
  visibility: hidden;
  pointer-events: none;
}
.nav-scrollbar-thumb {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 0;
  min-height: 28px;
  background: color-mix(in srgb, var(--muted) 48%, transparent);
  border: 0;
  border-radius: 999px;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
  transition: background var(--motion-fast, 0.15s) var(--ease-soft, ease);
}
.nav-scrollbar-thumb:active {
  cursor: grabbing;
  background: color-mix(in srgb, var(--muted) 62%, transparent);
}
.nav-btn {
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  border-left: 2px solid transparent;
  background: none;
  color: var(--text);
  text-align: left;
  padding: 0 14px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-unread-badge {
  margin-left: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger, #f07178);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}
.nav-btn.active {
  color: var(--text);
  background: var(--accent-bg);
  border-left-color: var(--accent);
  font-weight: 600;
}

.nav-group {
  margin: 0;
}
.nav-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  text-align: left;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-group-head:hover {
  color: var(--text);
  background: var(--surface-2);
}
.nav-group-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-group-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  opacity: 0.8;
  transition: transform 0.22s ease;
  transform: rotate(0deg);
}
.nav-group.collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}
.nav-group-body {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease;
}
.nav-group.collapsed .nav-group-body {
  grid-template-rows: 0fr;
}
.nav-group-body-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.nav-group .nav-btn {
  padding-left: 22px;
}

.nav-layout-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.panel-settings-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}
.panel-settings-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 12px 14px;
}
.panel-settings-tag {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 650;
}
.panel-settings-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px 16px;
}
.panel-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.panel-settings-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.panel-settings-apply {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 1.6;
}
.panel-settings-field input[type="number"] {
  width: 100%;
  max-width: 160px;
}

.nav-layout-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nav-layout-group.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nav-layout-group.is-dragging {
  opacity: 0.55;
}
.nav-layout-group-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.nav-layout-group-head label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin: 0;
}
.nav-layout-group-head input[type="text"] {
  width: 140px;
  margin: 0;
  padding: 5px 8px;
  font-size: 13px;
}
.nav-layout-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: -1px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
.nav-layout-drag-handle:active { cursor: grabbing; }
.nav-layout-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 4px;
  border-radius: var(--radius);
  border: 1px dashed transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-layout-items.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.nav-layout-items-empty {
  margin: 0;
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}
.nav-layout-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  cursor: grab;
  user-select: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}
.nav-layout-item:active { cursor: grabbing; }
.nav-layout-item.is-dragging {
  opacity: 0.45;
}
.nav-layout-item.drop-before {
  box-shadow: inset 0 2px 0 0 var(--accent);
}
.nav-layout-item.drop-after {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.nav-layout-item-grip {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: -1px;
  flex-shrink: 0;
}
.nav-layout-title-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 160px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}
.nav-layout-title-edit input {
  flex: 1 1 auto;
  min-width: 96px;
  margin: 0;
  padding: 5px 8px;
  font-size: 13px;
}
.nav-layout-item .muted {
  flex: 0 0 auto;
  font-size: 11px;
}
.nav-layout-item strong {
  flex: 1;
  font-weight: 500;
  min-width: 0;
}
.nav-layout-item .btn-sm {
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding: 0 8px;
  cursor: pointer;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.pager-meta {
  font-size: 12px;
  color: var(--text);
}
.pager-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}
.pager-size select {
  min-height: var(--control-h-sm);
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface, var(--bg));
  color: inherit;
  font-size: 12px;
}

.mark-hit {
  padding: 0 2px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: inherit;
  font-weight: 600;
}

.mc-collapse-body.is-collapsed {
  display: none;
}

.lf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.lf-row {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
}
.lf-row.lf-row-sys {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2, var(--bg)));
}
.lf-row.lf-row-sys .lf-text {
  color: color-mix(in srgb, var(--accent) 55%, var(--text));
}
.lf-row.lf-row-official:not(.lf-row-sys) {
  border-color: color-mix(in srgb, #3b82f6 45%, var(--line));
  background: color-mix(in srgb, #3b82f6 12%, var(--surface-2, var(--bg)));
}
.lf-row.lf-row-official:not(.lf-row-sys) .lf-text {
  color: color-mix(in srgb, #60a5fa 40%, var(--text));
}
.lf-row.lf-row-official.lf-row-sys {
  border-color: color-mix(in srgb, var(--accent) 50%, #3b82f6);
  box-shadow: inset 3px 0 0 color-mix(in srgb, #3b82f6 80%, transparent);
}
.id-badge.is-sys {
  color: var(--on-accent, #2a1a20);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
}
.id-badge.is-official {
  color: #dbeafe;
  background: color-mix(in srgb, #2563eb 55%, transparent);
  border: 1px solid color-mix(in srgb, #3b82f6 70%, var(--line));
}
.lf-face {
  flex: 0 0 auto;
}
.lf-face .acl-face,
.lf-face img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.lf-body {
  flex: 1 1 auto;
  min-width: 0;
}
.lf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.lf-time {
  position: absolute;
  right: 10px;
  bottom: 6px;
  margin: 0;
  z-index: 0;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #fff;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
.lf-text {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  padding-right: 11em;
  font-size: 14px;
  word-break: break-word;
}
.lf-at,
.ov-feed-at {
  color: var(--brand-bili, #00a1d6);
  font-weight: 600;
  margin-right: 2px;
}
.lf-emote {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  width: 50px;
  height: 50px;
  margin: 0 2px;
}
.lf-emote-full {
  display: inline-block;
  margin-top: 2px;
}
.sidebar-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.theme-seg {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: var(--control-h-sm);
}
.theme-seg button {
  flex: 1;
  border: 0;
  background: var(--surface);
  color: var(--muted);
  padding: 0;
  height: 100%;
  font-size: var(--control-fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.theme-seg button + button { border-left: 1px solid var(--line); }
.theme-seg button.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 500;
}

.health {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--text);
}
.health::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.health.ok::before { background: var(--ok); }
.health.bad::before { background: var(--danger); }
.health.idle::before { background: var(--warn); }

.sidebar-version {
  margin: 4px 0 0;
  font-size: 11px;
}
.powerby {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.beian-line {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.sidebar-foot .beian-line {
  text-align: left;
}
.beian-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}
.beian-link:hover {
  color: var(--text);
  border-bottom-color: color-mix(in srgb, var(--text) 45%, transparent);
}

 /* ---- main ---- */ 
.main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding: 20px 24px 40px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
}

.panel { display: none; }
.panel.active {
  display: block;
}
.panel-chat.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.panel-chat .panel-head {
  flex-shrink: 0;
  margin-bottom: 12px;
}
.main:has(#panel-chat.active) {
  padding: 16px 20px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-head {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.panel-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}
.panel-head p {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.panel-head .panel-presence-meta {
  margin-top: 10px;
  padding: 0;
  background: transparent;
  border: none;
}

.grid { display: grid; gap: 12px; margin-bottom: 12px; }
.cards-2 { grid-template-columns: 1fr 1fr; }
.cards-3 { grid-template-columns: 1fr 1fr 1fr; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.card h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }

.hint, .muted { color: var(--text); font-size: 12px; }
.pre { white-space: pre-wrap; }
.status-line { margin: 0 0 6px; font-size: 13px; }
.error { color: var(--danger); font-size: 13px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--control-fs);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft),
    box-shadow var(--motion-fast) var(--ease-soft),
    opacity var(--motion-fast) var(--ease-soft);
}
.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
.btn:active {
  transform: scale(0.97);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
[data-theme="dark"] .btn { color: var(--on-accent); }
[data-theme="light"] .btn { color: #fff; }

.btn.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
.btn.ghost:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--muted) 55%, var(--line));
  color: var(--text);
}

.btn.sr-act-rm,
.btn.sr-act-rm:hover {
  background: #c62828;
  border-color: #b71c1c;
  color: #fff;
}
.btn.sr-act-idle,
.btn.sr-act-idle:hover {
  background: #1565c0;
  border-color: #0d47a1;
  color: #fff;
}
.btn.sr-act-preview,
.btn.sr-act-preview:hover {
  background: #f9a825;
  border-color: #f57f17;
  color: #1a1a1a;
}

.btn-sm {
  height: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding: 0 var(--control-pad-x-sm);
  font-size: var(--control-fs-sm);
}

.btn.topbar-listen-chip,
[data-theme="dark"] .btn.topbar-listen-chip,
[data-theme="light"] .btn.topbar-listen-chip {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
.btn.topbar-listen-chip:hover,
[data-theme="dark"] .btn.topbar-listen-chip:hover,
[data-theme="light"] .btn.topbar-listen-chip:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.btn.topbar-listen-chip.is-active,
.btn.topbar-listen-chip.is-active:hover,
[data-theme="dark"] .btn.topbar-listen-chip.is-active,
[data-theme="dark"] .btn.topbar-listen-chip.is-active:hover,
[data-theme="light"] .btn.topbar-listen-chip.is-active,
[data-theme="light"] .btn.topbar-listen-chip.is-active:hover {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface));
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qr-box {
  width: 200px;
  max-width: 100%;
  height: 200px;
  border: 1px dashed var(--line);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; }

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.info-grid span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 1px;
}
.info-grid strong {
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.pill.live { border-color: var(--ok); color: var(--ok); }
.pill.offline { border-color: var(--danger); color: var(--danger); }
.pill.round { border-color: var(--warn); color: var(--warn); }

.live-hero {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cover {
  width: 112px;
  height: 63px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.form-stack label,
.form-grid label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.form-stack input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.form-stack select,
.form-grid input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0 10px;
  font: inherit;
  font-size: var(--control-fs);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1;
}
.form-stack textarea,
.form-grid textarea,
textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;
  min-height: 72px;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--control-fs);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.45;
  resize: vertical;
}
.acl-add-form {
  max-width: 420px;
  margin-bottom: 8px;
}
textarea:focus,
input:not([type="range"]):focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}

.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hhl-setting-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hhl-setting-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.hhl-setting-key {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 400;
  word-break: break-all;
}
.hhl-query-params {
  flex: 1 1 160px;
  min-width: 0;
  width: auto;
}
.inline.top { align-items: flex-start; }
.inline input, .inline select, .inline textarea { flex: 1; min-width: 100px; margin-top: 0; }

.form-grid {
  display: grid;
  gap: 10px;
}
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.link-grid a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.link-grid a:hover {
  border-color: var(--accent);
  text-decoration: none;
}
.link-grid a small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  line-height: 1.4;
}
.link-grid.big a { min-height: 64px; }

.log-box,
.log-list,
.runtime {
  max-height: 260px;
  overflow: auto;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  font-family: Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.runtime { white-space: pre-wrap; word-break: break-all; }
.log-line { margin-bottom: 2px; }
.log-line.error { color: var(--danger); }
.log-line.warn { color: var(--warn); }
.log-line.success { color: var(--ok); }

.violation-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.violation-item:last-child { border-bottom: 0; }
.violation-item strong { display: block; font-size: 13px; margin-bottom: 2px; }

.hidden { display: none !important; }

.account-list { display: flex; flex-direction: column; gap: 8px; }
.account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  flex-wrap: wrap;
}
.account-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.account-meta { flex: 1; min-width: 0; font-size: 13px; }
.account-meta strong { display: block; font-weight: 500; }
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.dm-settings label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.dm-settings label > span:last-child {
  min-width: 2.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.dm-settings select { margin-top: 0; }

.form-grid input[type="range"],
.dm-settings input[type="range"],
input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 28px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent);
  cursor: pointer;
  --range-fill: 50%;
  --range-track: var(--line);
  --range-track-active: var(--accent);
}
.form-grid input[type="range"]:focus,
.dm-settings input[type="range"]:focus,
input[type="range"]:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
input[type="range"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(
    to right,
    var(--range-track-active) 0%,
    var(--range-track-active) var(--range-fill),
    var(--range-track) var(--range-fill),
    var(--range-track) 100%
  );
}
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--range-track);
}
input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--range-track-active);
  border: 1px solid transparent;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--range-track-active);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--range-track-active);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
input[type="range"]:hover::-webkit-slider-thumb {
  border-color: var(--accent-hover);
  background: var(--accent-bg);
  transform: scale(1.08);
}
input[type="range"]:hover::-moz-range-thumb {
  border-color: var(--accent-hover);
  background: var(--accent-bg);
  transform: scale(1.08);
}
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.12);
  background: var(--accent);
  border-color: var(--accent);
}
input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.12);
  background: var(--accent);
  border-color: var(--accent);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.check-row { flex-direction: row !important; align-items: center !important; }
.check-row input { width: auto !important; margin: 0 !important; accent-color: var(--accent); }

#styleCss {
  font-family: Consolas, monospace;
  font-size: 12px;
  min-height: 240px;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 8px;
}
.ov-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ov-table th,
.ov-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.ov-table th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.ov-table tr:last-child td { border-bottom: 0; }
.ov-table tr.is-playing td {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface, var(--bg)));
}
.ov-table tr.is-selected td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ov-table tr[data-selectable="1"] { cursor: pointer; }
.ov-table .col-num { width: 32px; color: var(--muted); }
.ov-table .col-name { min-width: 140px; }
.ov-table .col-dur,
.ov-table .col-eta {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ov-table .col-eta { color: var(--muted); }
.ov-table .col-eta .eta-now { color: var(--ok, #1f9a78); font-weight: 600; }
.ov-table .col-eta .eta-wall { color: var(--text); font-weight: 600; }
.ov-table .col-eta .eta-cd { color: var(--muted); font-weight: 500; }
.ov-table .col-eta .eta-sep { color: var(--muted); font-weight: 400; }
.la-queue-meta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-queue-table .col-dur {
  line-height: 1.25;
}
.sr-queue-table .sr-eta {
  margin-top: 2px;
  font-size: 0.92em;
  color: var(--text);
  font-weight: 600;
}
.sr-queue-table .sr-eta-now {
  color: var(--ok, #1f9a78);
}
.ov-playlist-table th,
.ov-playlist-table td {
  white-space: nowrap;
  vertical-align: middle;
}
.ov-playlist-table .col-name,
.ov-playlist-table td:not(.col-num):not(.col-actions):not(.col-dur):not(.col-eta):not(.col-user) {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-playlist-table .col-user {
  max-width: 280px;
  min-width: 200px;
  overflow: visible;
}
.ov-playlist-table .col-name {
  min-width: 180px;
  max-width: 280px;
}
.ov-table .col-actions {
  white-space: nowrap;
  width: 1%;
  min-width: 132px;
}
.ov-table .col-actions .btn {
  margin: 0 2px;
  display: inline-block;
  white-space: nowrap;
}
.ov-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
}

.sr-cover {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  flex-shrink: 0;
  display: block;
}
span.sr-cover,
.sr-cover-empty {
  display: inline-block;
}
.sr-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
td.sr-name-cell {
  display: table-cell;
}
.sr-cover-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.la-expandable-title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-cover-title.is-truncated,
.la-expandable-title.is-truncated {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sr-cover-title.is-truncated:hover,
.la-expandable-title.is-truncated:hover {
  color: var(--accent);
}
.la-title-full {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--card) 90%, var(--accent) 10%);
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent) 15%);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  animation: laTitleFullIn 0.14s ease;
}
.info-grid > div.is-title-expanded .la-expandable-title.is-truncated {
  color: var(--accent);
}
@keyframes laTitleFullIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.la-song-table .col-name,
.la-song-table .sr-cover-title,
.la-song-table .la-title-full,
.info-grid .la-expandable-title {
  user-select: text;
  -webkit-user-select: text;
}
.la-song-table .la-song-drag-cell {
  width: 34px;
  padding: 4px 2px !important;
  vertical-align: middle;
  text-align: center;
  border: none !important;
}
.la-song-table thead .la-song-drag-cell {
  width: 34px;
  padding: 0 !important;
  border: none !important;
}
.la-song-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
.la-song-drag-handle:active {
  cursor: grabbing;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.la-song-drag-handle.is-long-press-armed {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}
.la-song-drag-handle::before {
  content: '';
  width: 14px;
  height: 10px;
  background: repeating-linear-gradient(
    to bottom,
    var(--muted) 0 2px,
    transparent 2px 4px
  );
}
.la-song-table tr.is-drag-source {
  opacity: 0.5;
  pointer-events: none;
}
.la-song-drag-placeholder td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle;
}
.la-song-drag-placeholder-label {
  display: block;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--card, var(--surface)));
  box-sizing: border-box;
}
.la-song-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;
  margin: 0;
  padding: 0;
  background: var(--card, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  will-change: transform;
  overflow: hidden;
  max-width: min(92vw, 380px);
}
.la-song-drag-ghost-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.la-song-drag-ghost-num {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.la-song-drag-ghost-cover {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--muted) 15%, transparent);
}
.la-song-drag-ghost-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  word-break: break-word;
}
.la-song-table tr.is-drop-target {
  outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -2px;
}
.la-song-drop-marker {
  position: fixed;
  height: 3px;
  z-index: 8999;
  pointer-events: none;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.la-song-drag-active,
body.la-song-long-press-pending {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
body.la-song-drag-active .la-song-table .col-name,
body.la-song-drag-active .la-song-table .sr-cover-title {
  user-select: none;
  -webkit-user-select: none;
}
#srQueueCard.is-list-edit-mode {
  outline: 1px dashed color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}
.la-song-table tr.is-last-reordered {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
#srListEditMode.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-bg) 65%, transparent);
}
.sr-list-head-tools {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sr-user-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
}
a.sr-user-cell:hover .sr-user-name {
  color: var(--accent);
  text-decoration: underline;
}
.sr-user-face {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
}
span.sr-user-face,
.sr-user-face-empty {
  display: inline-block;
  background: color-mix(in srgb, var(--muted) 28%, var(--surface-2, #2a2a30));
}
.sr-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-bili-preview-dialog {
  width: min(920px, 96vw);
  max-width: 96vw;
}
.sr-bili-preview-dialog iframe {
  display: block;
  width: 100%;
  height: min(70vh, 520px);
  border: 0;
  border-radius: 8px;
  background: #000;
}
.sr-medal {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: auto;
  max-width: 7.5em;
  height: 18px;
  box-sizing: border-box;
  padding: 0 5px 0 6px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 18px;
  flex-shrink: 0;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, var(--brand-medal-from, #23ade5), var(--brand-medal-to, #6bc8ef));
}
.sr-medal.is-dim {
  opacity: 0.55;
  filter: grayscale(0.35);
}
.sr-medal-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-medal-lv {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.ov-live-feed-card .ov-live-feed {
  margin-top: 10px;
  max-height: 360px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}
.ov-live-feed-empty {
  margin: 8px 0;
}
.ov-feed-item {
  display: grid;
  grid-template-columns: 40px 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
  transform: translateX(0);
  opacity: 1;
}
.ov-feed-item.is-entry {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.ov-feed-item.ov-feed-enter {
  animation: ov-feed-slide-in 0.38s ease-out both;
}
@keyframes ov-feed-slide-in {
  from {
    transform: translateX(48px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.ov-feed-kind {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ov-feed-item.is-danmaku .ov-feed-kind { color: var(--accent); }
.ov-feed-item.is-entry .ov-feed-kind { color: var(--warn); }
.ov-feed-face {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
}
.ov-feed-face-empty {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--line);
}
.ov-feed-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.4;
}
.ov-feed-userline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}
.ov-feed-name {
  font-weight: 600;
  color: var(--text);
}
.ov-feed-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.ov-feed-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  height: 18px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.ov-feed-chip.is-admin {
  color: #fff;
  border-color: var(--brand-admin);
  background: var(--brand-admin);
}
.ov-feed-chip.is-guard.g3 {
  color: #fff;
  border-color: var(--brand-guard-captain);
  background: var(--brand-guard-captain);
}
.ov-feed-chip.is-guard.g2 {
  color: #fff;
  border-color: var(--brand-guard-admiral);
  background: var(--brand-guard-admiral);
}
.ov-feed-chip.is-guard.g1 {
  color: #fff;
  border-color: var(--brand-guard-governor);
  background: var(--brand-guard-governor);
}
.ov-feed-chip.is-medal {
  color: #fff;
  border-color: var(--brand-medal-from);
  background: linear-gradient(90deg, var(--brand-medal-from), var(--brand-medal-to));
}
.ov-feed-chip.is-medal.is-dim {
  opacity: 0.55;
  filter: grayscale(0.35);
}
.ov-feed-chip.is-medal em {
  font-style: normal;
  margin-right: 3px;
  opacity: 0.9;
}
.ov-feed-chip.is-level {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.ov-feed-text {
  color: var(--muted);
  word-break: break-word;
}
.ov-feed-item.is-danmaku .ov-feed-text {
  color: var(--text);
}
.ov-feed-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .ov-feed-item {
    grid-template-columns: 36px 22px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .ov-feed-time {
    grid-column: 1 / -1;
    justify-self: end;
  }
}
.mc-lyrics {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
  padding: 12px 14px;
  min-height: 72px;
}
.mc-lyrics-meta { margin: 0 0 8px; }
.mc-lyrics-now {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.45;
}
.mc-lyric-roma {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.mc-lyric-orig {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}
.mc-lyric-trans {
  color: var(--muted);
  font-size: 13px;
}
.mc-ops-log-wrap {
  max-height: min(320px, 40vh);
  overflow: auto;
}
.mc-ops-log-table .col-time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 11.5em;
}
.mc-ops-log-table .col-oid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  white-space: normal;
  min-width: 16em;
}
.mc-ops-log-table .col-oid code {
  font: inherit;
  color: var(--muted);
  background: transparent;
  padding: 0;
}
.audit-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.audit-row.audit-fail {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}
.audit-row .error {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.card h3 { margin: 0 0 10px; }
.card > .row-between h3 { margin: 0; }

.about-prose p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
}
.about-prose p:last-child { margin-bottom: 0; }
.about-legal {
  border: 2px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}
.about-legal > h3 {
  color: var(--danger);
}
.about-legal .legal-text,
.about-legal .legal-text p {
  color: color-mix(in srgb, var(--danger) 78%, var(--text));
  font-size: 13px;
}
.about-legal .legal-text strong {
  color: var(--danger);
}
.about-legal .legal-note {
  opacity: 0.9;
  font-size: 12px;
}
.about-legal .beian-link {
  color: var(--danger);
}

.changelog { display: flex; flex-direction: column; gap: 14px; }
.changelog-scroll,
.log-scroll {
  max-height: min(420px, 55vh);
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
.changelog-item header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.changelog-item header .muted {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.changelog-item ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.changelog-item li { margin-bottom: 4px; }

.ov-highlights-card h3 { margin: 0; }
.ov-version-brief { margin: 8px 0 0; }
.ov-highlights {
  margin-top: 10px;
  gap: 10px;
}
.ov-highlights .changelog-item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.ov-highlights .changelog-item header { margin-bottom: 4px; }
.ov-highlights .changelog-item ul {
  margin: 0;
  padding-left: 1.15em;
}
.log-tag {
  display: inline-block;
  margin-right: 2px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  vertical-align: baseline;
}
.log-tag-new {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.log-tag-fix {
  color: #c47a00;
  background: color-mix(in srgb, #e6a700 18%, transparent);
}
[data-theme="dark"] .log-tag-fix { color: #f0b429; }
.log-tag-del {
  color: #c0392b;
  background: color-mix(in srgb, #e05555 14%, transparent);
}
[data-theme="dark"] .log-tag-del { color: #ff7b72; }

 /* ---- public auth gate ---- */ 
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion) var(--ease-soft),
    visibility var(--motion);
}
.auth-gate.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.auth-gate.hidden { display: none; }
.auth-gate-card {
  width: min(720px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 8px 32px color-mix(in srgb, #000 8%, transparent);
}
.auth-gate-card-sm {
  width: min(420px, 100%);
}
.auth-gate-card h1 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
}
.auth-gate-card h3 {
  margin: 0 0 8px;
  font-size: 13px;
}
body.auth-locked .shell,
body.auth-locked .mobile-bar {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
  transition: filter var(--motion) var(--ease-soft);
}
.shell,
.mobile-bar {
  transition: filter var(--motion) var(--ease-soft);
}
.public-user-bar {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.public-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.public-user-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--bg));
}
.public-user-face-empty {
  display: inline-block;
}
.ov-presence-face {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--bg));
}
.auth-tabs {
  display: flex;
  gap: 0;
  margin: 12px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: var(--control-h);
}
.auth-tab {
  flex: 1;
  border: 0;
  background: var(--surface-2, var(--bg));
  color: var(--muted);
  padding: 0 10px;
  height: 100%;
  cursor: pointer;
  font: inherit;
  font-size: var(--control-fs);
  font-weight: 600;
}
.auth-tab.active {
  background: var(--accent-bg, color-mix(in srgb, var(--accent) 18%, transparent));
  color: var(--text);
  font-weight: 600;
}
.auth-pane.hidden,
.reg-step.hidden,
.reg-code-box.hidden { display: none; }
.reg-code-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.reg-code-text {
  flex: 1;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
  word-break: break-all;
}
.reg-verify-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.reg-verify-flags.hidden { display: none; }
.reg-flag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted, #8a9299);
  background: var(--surface-2, var(--bg));
}
.reg-flag.is-ok {
  color: #2f8f6b;
  border-color: rgba(47, 143, 107, 0.35);
  background: rgba(47, 143, 107, 0.08);
}
.reg-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
}
.reg-bili-meta {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}
.reg-default-pages {
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 12px;
  line-height: 1.5;
}
.reg-live-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.reg-live-link:hover {
  text-decoration: underline;
}
.reg-live-link strong {
  color: var(--accent);
}
.reg-wait-retry {
  margin-top: 4px;
  color: var(--warn);
  font-size: 12px;
}
.reg-legal {
  margin-top: 14px;
  padding: 10px 12px;
  border: 2px solid var(--danger);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}
.reg-legal-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
}
.reg-legal-body {
  font-size: 11px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--danger) 75%, var(--text));
}
.reg-legal-body p {
  margin: 0 0 8px;
}
.reg-legal-body p:last-child {
  margin-bottom: 0;
}
.reg-face,
.acl-face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
  flex-shrink: 0;
}
.acl-face-empty {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--line);
}
.acl-face-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.acl-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.acl-tab {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 7px 14px;
  font: inherit;
  font-size: var(--control-fs);
  cursor: pointer;
}
.acl-tab.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-bg);
}
.acl-tab-panel.hidden { display: none; }
.acl-user-main-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.acl-user-main-actions select {
  max-width: 148px;
  height: var(--control-h-sm);
}
.acl-override-note { margin: 0 0 8px; }
.an-msg-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 36px;
}
.an-batch-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
.an-batch-block + .an-batch-sep + .an-batch-block {
  /* spacing via separator */
}
.an-batch-block.is-current {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
.an-batch-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-2));
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.an-batch-head strong { font-size: 12px; }
.an-batch-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 28px;
  padding: 2px;
}
.an-batch-items.drag-over {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.an-batch-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  color: var(--muted);
  font-size: 11px;
  user-select: none;
}
.an-batch-sep::before,
.an-batch-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.an-msg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 5px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: grab;
  min-height: 28px;
  position: relative;
  flex-wrap: wrap;
}
.an-msg-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.an-msg-item.is-dragging { opacity: 0.4; }
.an-msg-item.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.an-msg-item.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.an-msg-item.is-next {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.an-msg-item.is-sending {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.an-msg-item.is-last-sent {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.an-msg-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: color-mix(in srgb, var(--line) 80%, transparent);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.an-msg-item.is-next .an-msg-bar,
.an-msg-item.is-sending .an-msg-bar {
  opacity: 1;
}
.an-msg-bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s linear;
}
.an-msg-eta {
  flex-basis: 100%;
  margin: 0 0 0 26px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
  display: none;
}
.an-msg-item.is-next .an-msg-eta,
.an-msg-item.is-sending .an-msg-eta {
  display: block;
}
.an-msg-grip {
  color: var(--muted);
  letter-spacing: -1px;
  font-size: 11px;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.an-msg-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.an-msg-body input {
  width: 100%;
  height: 26px;
  padding: 2px 8px;
  font-size: 12px;
}
.an-msg-idx {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
}
.an-msg-item .btn-sm {
  height: 24px;
  padding: 0 6px;
  font-size: 11px;
  flex-shrink: 0;
}
.an-msg-empty {
  margin: 0;
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.an-msg-add select {
  max-width: 110px;
  height: var(--control-h-sm);
}
.an-paste-box summary {
  cursor: pointer;
  margin-bottom: 6px;
}
.acl-pick-wrap {
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
  margin-right: 4px;
}
.acl-groups-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acl-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.acl-group-meta { flex: 1; min-width: 0; }
.acl-group-edit {
  width: 100%;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.acl-group-edit label { display: block; margin-bottom: 8px; }
.acl-user-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.acl-user-row .account-meta {
  flex: 1;
  min-width: 180px;
}
.acl-batch-bar {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
}
.acl-batch-pages {
  margin: 10px 0;
}
.acl-batch-select-all {
  display: inline-flex;
  margin-right: 12px;
}
.pill.is-room-admin-page {
  border-color: color-mix(in srgb, #f0b429 50%, var(--line));
  color: #f0b429;
}
.id-badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}
.id-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--bg));
  color: var(--muted);
  white-space: nowrap;
}
.id-badge.is-admin {
  color: #7fd99a;
  border-color: color-mix(in srgb, #7fd99a 45%, var(--line));
}
.id-badge.is-fullauth {
  color: #e6b422;
  border-color: color-mix(in srgb, #e6b422 50%, var(--line));
  font-weight: 700;
}
.id-badge.is-guard.g3 {
  color: #f0b429;
  border-color: color-mix(in srgb, #f0b429 45%, var(--line));
}
.id-badge.is-guard.g2 {
  color: #c084fc;
  border-color: color-mix(in srgb, #c084fc 45%, var(--line));
}
.id-badge.is-guard.g1 {
  color: #f07178;
  border-color: color-mix(in srgb, #f07178 45%, var(--line));
}
.id-badge.is-medal {
  color: #3d9cf0;
  border-color: color-mix(in srgb, #3d9cf0 40%, var(--line));
}
.id-badge.is-audience {
  color: var(--muted);
}
.id-badge.is-unbound {
  color: var(--muted);
  opacity: 0.8;
}
.session-user-badges {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  line-height: 1;
}
.session-user-badges > .id-badge-row {
  display: contents;
}
.session-user-badges .id-badge {
  font-size: 10px;
  padding: 0 5px;
}
.ov-presence-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ov-presence-badges .id-badge {
  font-size: 10px;
  padding: 0 5px;
}
.profile-identity-row {
  grid-column: 1 / -1;
}
.profile-identity-row .id-badge-row {
  margin-top: 2px;
}
.acl-user-row .account-meta,
.reg-logs .account-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.acl-user-row .account-meta strong {
  display: inline;
}
.mono-url {
  font-size: 12px;
  word-break: break-all;
  padding: 6px 8px;
  background: var(--surface-2, var(--bg));
  border-radius: 6px;
  border: 1px solid var(--line);
  flex: 1;
}
.pub-gate-banner,
.pub-closed-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.pub-gate-banner.hidden,
.pub-closed-banner.hidden { display: none; }
body.public-closed .nav-btn:not([data-panel="overview"]):not([data-panel="profile"]) {
  display: none !important;
}
body.guest-mode .nav-btn:not([data-panel="overview"]):not([data-panel="about"]):not([data-panel="profile"]) {
  display: none !important;
}
body.guest-mode.public-closed .nav-btn:not([data-panel="overview"]):not([data-panel="profile"]) {
  display: none !important;
}

.mobile-bar .session-user-bar {
  overflow: visible;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-fast) var(--ease-soft),
    visibility var(--motion-fast);
}
.confirm-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.confirm-modal.hidden { display: none; }
.confirm-dialog {
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.disconnect-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--danger) 28%, rgba(0, 0, 0, 0.55));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-fast) var(--ease-soft),
    visibility var(--motion-fast);
}
.disconnect-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.disconnect-modal.hidden { display: none; }
.disconnect-dialog {
  width: min(440px, 100%);
  padding: 22px 22px 18px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--line));
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  color: var(--text);
}
.disconnect-dialog h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--danger);
}
.disconnect-dialog p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
}
.disconnect-dialog .hint {
  margin-bottom: 14px;
  color: var(--muted);
}
.disconnect-actions {
  justify-content: flex-end;
}
.disconnect-actions .btn {
  border-color: var(--danger);
  background: var(--danger);
}
.disconnect-actions .btn:hover {
  background: color-mix(in srgb, var(--danger) 85%, #000);
  border-color: color-mix(in srgb, var(--danger) 85%, #000);
}
.confirm-dialog h3 {
  margin: 0 0 12px;
  font-size: 17px;
}
.confirm-action {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
}
.confirm-action strong {
  color: var(--accent);
  font-weight: 700;
}
.confirm-detail {
  margin: 0 0 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.confirm-actions {
  margin-top: 18px;
  justify-content: flex-end;
}

.panel {
  position: relative;
}

.panel-readonly-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 18%, var(--surface));
  color: var(--text);
  font-size: 13px;
  position: relative;
  z-index: 3;
}
.panel-readonly-banner strong {
  font-weight: 700;
  color: var(--warn);
}
.panel-readonly-banner span {
  color: color-mix(in srgb, var(--warn) 70%, var(--text));
  font-size: 12px;
}
.panel-readonly .panel-head {
  position: relative;
  z-index: 3;
  background: transparent;
}
.panel-block-locked {
  position: relative;
}
.panel-block-locked > .panel-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  pointer-events: auto;
  cursor: not-allowed;
}
[data-theme="dark"] .panel-block-locked > .panel-lock-overlay {
  background: color-mix(in srgb, var(--surface) 35%, transparent);
}
.panel-lock-msg {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 22%, var(--surface));
  color: var(--warn);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
  box-shadow: 0 2px 10px color-mix(in srgb, #000 12%, transparent);
}
.panel-readonly button,
.panel-readonly input,
.panel-readonly select,
.panel-readonly textarea,
.panel-readonly [contenteditable="true"] {
  pointer-events: none;
  opacity: 0.72;
  cursor: not-allowed;
}
.panel-readonly a.btn {
  pointer-events: none;
  opacity: 0.72;
}

.acl-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 10px;
  margin: 8px 0 12px;
}
.acl-page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.acl-user-pages {
  flex: 1 1 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
}
.nav-btn.nav-readonly::after {
  content: '只读';
  margin-left: auto;
  padding-left: 8px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

 /* ---- responsive ---- */ 
@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .mobile-bar {
    display: flex;
    align-items: center;
    min-height: calc(var(--control-h) + 12px + env(safe-area-inset-top, 0px));
    height: auto;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-bottom: 6px;
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  .app-topbar { display: none; }

  .shell {
    height: calc(100dvh - var(--control-h) - 12px - env(safe-area-inset-top, 0px));
    max-width: 100%;
  }
  .content-col {
    height: 100%;
    max-width: 100%;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100dvh;
    max-height: 100dvh;
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none;
    backface-visibility: hidden;
    /* 始终合成层，避免开关菜单时临时 will-change / contain 造成卡顿 */
    will-change: transform;
    z-index: 60;
  }
  .sidebar.open {
    transform: translate3d(0, 0, 0);
    box-shadow: 8px 0 28px color-mix(in srgb, #000 28%, transparent);
  }
  .sidebar-backdrop {
    transition: opacity 0.2s linear, visibility 0.2s;
  }
  .sidebar-backdrop.show {
    will-change: opacity;
  }

  /* 切页时不做面板淡入，避免与侧栏关闭抢帧 */
  .panel.active,
  .panel-chat.active {
    animation: none;
  }
  .nav-btn {
    transition:
      background 0.1s ease,
      color 0.1s ease,
      border-color 0.1s ease;
  }
  .nav-btn:active {
    transform: none;
  }

  .nav-scrollbar {
    flex-basis: 10px;
    width: 10px;
  }
  .nav-scrollbar-thumb {
    left: 1px;
    right: 1px;
    min-height: 40px;
    background: color-mix(in srgb, var(--muted) 52%, transparent);
  }

  .main {
    padding: 14px max(12px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
    max-width: 100%;
  }
  .main:has(#panel-chat.active) {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  .panel,
  .card,
  .grid,
  .table-wrap,
  .sc-panel,
  .sc-shell,
  .sc-main,
  .lv-player-card {
    max-width: 100%;
    min-width: 0;
  }

  .cards-2,
  .cards-3,
  .info-grid,
  .form-grid.cols-2,
  .form-grid.cols-3,
  .panel-settings-fields,
  .audit-filters,
  .ov-billboard-grid,
  .link-grid {
    grid-template-columns: 1fr;
  }

  .qr-box { width: 100%; height: 180px; }

  .inline { flex-direction: column; align-items: stretch; }
  .inline .btn { width: 100%; text-align: center; }

  .account-row { flex-direction: column; align-items: flex-start; }
  .account-actions { width: 100%; }
  .acl-user-row .account-meta {
    min-width: 0;
    flex: 1 1 100%;
  }

  
  .panel-head.row-between {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .panel-head.row-between > div,
  .panel-head.row-between > .btn-row {
    min-width: 0;
    width: 100%;
  }
  /* 顶栏工具条：横滑紧凑按钮，勿拉成半屏大按钮 */
  .panel-head .btn-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 2px;
    margin-top: 0;
    scrollbar-width: none;
  }
  .panel-head .btn-row::-webkit-scrollbar {
    display: none;
  }
  .panel-head .btn-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
    min-height: var(--control-h-sm, 30px);
    padding-left: 12px;
    padding-right: 12px;
  }

  .row-between {
    max-width: 100%;
    min-width: 0;
  }
  .row-between > * {
    min-width: 0;
    max-width: 100%;
  }

  .btn-row {
    max-width: 100%;
  }
  .btn-row .btn {
    max-width: 100%;
  }

  .hhl-query-params {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 100%;
  }

  
  .sc-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .sc-toolbar-left,
  .sc-toolbar-right {
    width: 100%;
  }
  .sc-search {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
  }
  .sc-bandwidth-hint,
  .sc-status {
    white-space: normal;
    max-width: 100%;
    line-height: 1.35;
  }
  .sc-shell {
    max-height: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .sc-role-cols,
  .sc-role-row {
    grid-template-columns: 24px minmax(0, 1fr) 44px 48px;
    gap: 4px;
    font-size: 12px;
  }
  .sc-col-title {
    min-width: 120px;
  }

  .lv-meta {
    align-items: flex-start;
  }
  .lv-toolbar .btn-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }
  .lv-toolbar .btn-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
  }

  .collab-compose:not(.collab-compose-stack) {
    flex-direction: column;
    align-items: stretch;
  }
  .collab-compose input {
    min-width: 0;
    width: 100%;
  }
  .msg-compose-bar {
    flex-wrap: wrap;
  }
  .nav-layout-item {
    flex-wrap: wrap;
  }
  .nav-layout-group-head input[type="text"] {
    width: 100%;
    max-width: none;
  }
  .reg-code-box {
    flex-wrap: wrap;
  }
  .reg-code-text {
    flex: 1 1 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .dm-settings label {
    flex-wrap: wrap;
  }

  .mobile-bar-right {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-width: 0;
  }

  .topbar-song-wrap--mobile {
    flex: 1 1 0;
    min-width: 72px;
    max-width: none;
  }

  .lf-row {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px 10px 8px;
  }
  .lf-body {
    flex: 1 1 calc(100% - 40px);
    min-width: 0;
    max-width: 100%;
  }
  .lf-text {
    padding-right: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.45;
  }
  .lf-time {
    position: static;
    flex: 0 0 100%;
    margin: 4px 0 0;
    padding-left: 38px;
    text-align: right;
    font-size: 10px;
    line-height: 1.2;
    color: var(--muted);
    opacity: 1;
  }

  .info-grid.profile-bili-stats {
    grid-template-columns: 1fr 1fr;
  }

  .profile-bili-head {
    align-items: flex-start;
  }

  .profile-bili-face {
    width: 64px;
    height: 64px;
  }

  .profile-bili-name {
    font-size: 16px;
  }

  .pm-toast {
    min-width: 0;
    left: 12px;
    right: 12px;
    max-width: none;
    width: auto;
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }
  .version-update-toast,
  .topbar-song-detail {
    width: auto;
    left: 12px;
    right: 12px;
    max-width: none;
  }
  .presence-login-toast {
    left: auto;
    right: max(8px, env(safe-area-inset-right, 0px));
    top: max(8px, env(safe-area-inset-top, 0px));
    width: auto;
    max-width: min(168px, calc(100vw - 16px));
  }
  .topbar-song-detail {
    width: auto;
  }

  .auth-gate,
  .confirm-modal,
  .sc-disclaimer-modal,
  .chat-disclaimer-modal,
  .collab-notice-modal {
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  .table-wrap,
  .sc-table-wrap,
  .stats-table-wrap,
  .mb-list-wrap {
    max-width: 100%;
    overflow-x: auto;
    /* 默认不建纵向滚动容器：竖滑交给 .main，避免长表占满屏拖不动页面 */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-y: auto;
  }
  /* 有意限高的内层表：保留竖滚，滚到顶/底后链式带动页面 */
  .sc-table-wrap,
  .stats-table-wrap-rank,
  .la-scroll,
  .log-scroll,
  .changelog-scroll,
  .log-box,
  .log-list,
  .runtime,
  .lf-list,
  .ov-live-feed,
  .mc-lyrics-scroll,
  .collab-list,
  .collab-ticket-detail,
  .account-list {
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }
  .mb-table {
    width: max-content;
    min-width: 540px;
  }
  .mb-table th,
  .mb-table td {
    padding: 8px 8px;
  }
  .mb-table .col-num { width: 32px; }
  .mb-table .mb-actions { width: 1%; }
  .mb-table .col-mode { width: 72px; }
  .mb-table .col-name {
    min-width: 160px;
    max-width: 220px;
  }
  .mb-table .col-artist {
    min-width: 120px;
    max-width: 160px;
  }
  .ov-playlist-table {
    width: max-content;
    min-width: 780px;
  }
  .ov-playlist-table.la-song-table,
  .music-search-table.la-song-table,
  .sr-queue-table.la-song-table,
  .queue-table.la-song-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .music-search-table {
    width: max-content;
    min-width: 720px;
  }
  .ov-playlist-table .col-name {
    min-width: 200px;
    max-width: 300px;
  }
  .ov-playlist-table .col-actions {
    min-width: 148px;
    width: auto;
    white-space: nowrap;
  }
  .ov-playlist-table .col-actions .btn {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
  }
  .ov-playlist-table th,
  .ov-playlist-table td {
    white-space: nowrap;
  }
  .ov-playlist-table.la-song-table th,
  .ov-playlist-table.la-song-table td,
  .music-search-table.la-song-table th,
  .music-search-table.la-song-table td {
    white-space: normal;
  }
  .mc-ops-log-table {
    width: max-content;
    min-width: 720px;
  }
  .mc-ops-log-table .col-oid {
    min-width: 18em;
  }

  /* 手机：恢复细滚动条；仅聊天消息区继续隐藏（见 .msg-log） */
  .la-scroll,
  .main,
  .table-wrap,
  .sc-table-wrap,
  .stats-table-wrap,
  .log-scroll,
  .changelog-scroll,
  .log-box,
  .log-list,
  .runtime,
  .lf-list,
  .ov-live-feed,
  .mc-lyrics-scroll,
  .collab-list,
  .collab-ticket-detail,
  .msg-side-scroll,
  .account-list {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color:
      color-mix(in srgb, var(--muted) 56%, transparent)
      color-mix(in srgb, var(--muted) 16%, transparent);
  }
  .la-scroll::-webkit-scrollbar,
  .main::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar,
  .sc-table-wrap::-webkit-scrollbar,
  .stats-table-wrap::-webkit-scrollbar,
  .log-scroll::-webkit-scrollbar,
  .changelog-scroll::-webkit-scrollbar,
  .log-box::-webkit-scrollbar,
  .log-list::-webkit-scrollbar,
  .runtime::-webkit-scrollbar,
  .lf-list::-webkit-scrollbar,
  .ov-live-feed::-webkit-scrollbar,
  .mc-lyrics-scroll::-webkit-scrollbar,
  .collab-list::-webkit-scrollbar,
  .collab-ticket-detail::-webkit-scrollbar,
  .msg-side-scroll::-webkit-scrollbar,
  .account-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .la-scroll::-webkit-scrollbar-thumb,
  .main::-webkit-scrollbar-thumb,
  .table-wrap::-webkit-scrollbar-thumb,
  .sc-table-wrap::-webkit-scrollbar-thumb,
  .stats-table-wrap::-webkit-scrollbar-thumb,
  .log-scroll::-webkit-scrollbar-thumb,
  .changelog-scroll::-webkit-scrollbar-thumb,
  .log-box::-webkit-scrollbar-thumb,
  .log-list::-webkit-scrollbar-thumb,
  .runtime::-webkit-scrollbar-thumb,
  .lf-list::-webkit-scrollbar-thumb,
  .ov-live-feed::-webkit-scrollbar-thumb,
  .mc-lyrics-scroll::-webkit-scrollbar-thumb,
  .collab-list::-webkit-scrollbar-thumb,
  .collab-ticket-detail::-webkit-scrollbar-thumb,
  .msg-side-scroll::-webkit-scrollbar-thumb,
  .account-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 52%, transparent);
    border: 0;
    border-radius: 999px;
  }
  .la-scroll::-webkit-scrollbar-track,
  .main::-webkit-scrollbar-track,
  .table-wrap::-webkit-scrollbar-track,
  .sc-table-wrap::-webkit-scrollbar-track,
  .stats-table-wrap::-webkit-scrollbar-track,
  .log-scroll::-webkit-scrollbar-track,
  .changelog-scroll::-webkit-scrollbar-track,
  .log-box::-webkit-scrollbar-track,
  .log-list::-webkit-scrollbar-track,
  .runtime::-webkit-scrollbar-track,
  .lf-list::-webkit-scrollbar-track,
  .ov-live-feed::-webkit-scrollbar-track,
  .mc-lyrics-scroll::-webkit-scrollbar-track,
  .collab-list::-webkit-scrollbar-track,
  .collab-ticket-detail::-webkit-scrollbar-track,
  .msg-side-scroll::-webkit-scrollbar-track,
  .account-list::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--muted) 14%, transparent);
  }

  input, select, textarea {
    max-width: 100%;
  }
}

.version-update-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 14000;
  width: min(440px, calc(100vw - 28px));
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 36px color-mix(in srgb, #000 22%, transparent);
  color: var(--text);
  pointer-events: auto;
}
.version-update-toast.hidden { display: none; }
.version-update-toast .vu-title {
  display: block;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.version-update-toast .vu-meta {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--warn);
}
.version-update-toast .vu-log {
  margin: 0 0 14px;
  padding: 10px 12px 10px 28px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
  font-size: 13px;
  line-height: 1.55;
}
.version-update-toast .vu-log li { margin-bottom: 6px; }
.version-update-toast .vu-log li:last-child { margin-bottom: 0; }
.version-update-toast .btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.version-update-toast .btn {
  font-size: 14px;
  padding: 8px 14px;
}
#versionUpdateRefreshLog {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 88%, #000);
}
#versionUpdateRefreshLog:hover {
  background: var(--warn);
  border-color: var(--warn);
}
@media (max-width: 720px) {
  .version-update-toast {
    top: 56px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

.ov-presence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  margin-top: 4px;
}
.ov-presence-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
  font-size: 13px;
  line-height: 1.3;
}
.ov-presence-chip[data-presence-actor] {
  cursor: pointer;
}
.ov-presence-chip[data-presence-actor]:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.ov-presence-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ecf8e;
  flex-shrink: 0;
}
.ov-presence-chip.is-admin {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.ov-presence-chip .meta {
  color: var(--muted);
  font-size: 12px;
}
.ov-presence-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.idle-folder-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
  max-height: min(40vh, 280px);
  overflow: auto;
}
.idle-folder-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  cursor: pointer;
}
.idle-folder-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.idle-folder-choice input {
  margin-top: 3px;
  flex-shrink: 0;
}
.idle-folder-choice span {
  min-width: 0;
  line-height: 1.4;
}
.idle-folder-choice .hint {
  display: inline;
  margin-left: 6px;
  font-size: 12px;
}
.sr-idle-folder-add {
  display: none !important;
}
.panel-presence-footer {
  display: none !important;
}
.panel-presence-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 8px;
  max-width: 100%;
}
.panel-presence-meta.is-empty,
.panel-presence-meta[hidden] {
  display: none !important;
}
.panel-presence-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--muted) 88%, var(--accent) 12%);
  opacity: 0.9;
}
.panel-presence-names {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.panel-presence-chip {
  display: inline-block;
  max-width: 7.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.presence-login-toast {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 11900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: auto;
  max-width: min(168px, calc(100vw - 16px));
  pointer-events: none;
}
.presence-login-toast.hidden { display: none; }
.presence-login-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  max-width: 100%;
  padding: 3px 7px 3px 3px;
  border: 1px solid color-mix(in srgb, #3ecf8e 35%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent);
  color: var(--text);
  animation: presence-toast-in 0.22s ease;
  backdrop-filter: blur(6px);
}
.presence-login-item.is-activity {
  border-color: color-mix(in srgb, #4cc9f0 40%, var(--line));
}
.presence-login-item.is-activity.is-fail {
  border-color: color-mix(in srgb, #ff6b6b 40%, var(--line));
}
.presence-login-item .pl-face {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.presence-login-item .pl-face-fallback {
  display: inline-block;
  background: var(--surface-2);
}
.presence-login-item .pl-name {
  min-width: 0;
  max-width: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}
.presence-login-item .pl-status {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.2;
}
.presence-login-item.is-leave {
  border-color: color-mix(in srgb, var(--muted) 45%, var(--line));
}
.presence-login-item.is-leave .pl-status {
  color: color-mix(in srgb, var(--muted) 85%, var(--text));
}
@keyframes presence-toast-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 720px) {
  .presence-login-toast {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    left: auto;
    width: auto;
  }
}

.sc-panel { padding: 0; overflow: hidden; }
.sc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}
.sc-toolbar-left,
.sc-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.sc-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.sc-seg-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.sc-seg-btn + .sc-seg-btn {
  border-left: 1px solid var(--line);
}
.sc-seg-btn:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--text); }
.sc-seg-btn.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}
.sc-search {
  min-width: 160px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.sc-status {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.sc-status.is-err { color: var(--danger); }
.sc-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  /* 必须写死高度：仅 max-height 时网格行会被内容撑开，左右都滚不动 */
  height: calc(100vh - 220px);
  min-height: 420px;
  max-height: calc(100vh - 220px);
  overflow: hidden;
}
.sc-sidebar {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
}
.sc-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sc-role-cols,
.sc-role-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 52px 56px;
  gap: 6px;
  align-items: center;
}
.sc-role-cols {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.sc-role-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.sc-role-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}
.sc-role-row:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.sc-role-row.is-active {
  background: color-mix(in srgb, var(--accent-bg) 85%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}
.sc-empty-inline {
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.sc-role-row.top1 .sc-rank { color: #d4a017; font-weight: 700; }
.sc-role-row.top2 .sc-rank { color: #9aa0a6; font-weight: 700; }
.sc-role-row.top3 .sc-rank { color: #b87333; font-weight: 700; }
.sc-rank { font-size: 12px; color: var(--muted); text-align: center; }
.sc-role-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-role-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}
.sc-role-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sc-role-text strong,
.sc-role-text em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}
.sc-role-text strong { font-size: 13px; }
.sc-role-text em { font-size: 11px; color: var(--muted); }
.sc-num { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.sc-num.muted { color: var(--muted); }
.sc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
}
.sc-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  padding: 40px 20px;
}
.sc-empty .hint { font-size: 12px; }
.sc-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.sc-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.sc-role-meta { display: flex; align-items: center; gap: 10px; }
.sc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}
.sc-role-name { font-size: 16px; font-weight: 700; }
.sc-role-work { font-size: 12px; color: var(--muted); }
.sc-role-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--muted);
}
.sc-role-stats strong { color: var(--text); }
.sc-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.sc-pager { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.sc-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sc-table th,
.sc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  text-align: left;
  vertical-align: top;
}
.sc-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--line);
}
.sc-th-num,
.sc-td-num {
  text-align: right;
  white-space: nowrap;
}
.sc-table td { font-variant-numeric: tabular-nums; }
.sc-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-bg) 40%, transparent);
}
.sc-col-title {
  min-width: 180px;
  max-width: 320px;
}
.sc-col-title a { color: var(--accent); text-decoration: none; }
.sc-col-title a:hover { text-decoration: underline; }
.sc-table tr.is-counted td { background: color-mix(in srgb, var(--ok) 4%, transparent); }
.sc-table tr.is-warn td { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.sc-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}
.sc-badge.ok {
  background: color-mix(in srgb, var(--ok) 18%, var(--surface));
  color: var(--ok);
}
.sc-badge.warn {
  background: color-mix(in srgb, var(--warn) 18%, var(--surface));
  color: var(--warn);
}
.sc-votes { font-weight: 700; color: var(--accent); }
.sc-table-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px !important;
}
.sc-bandwidth-hint {
  font-size: 11px;
  color: var(--warn);
  white-space: nowrap;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
}
.sc-disclaimer-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, #000 55%, transparent);
}
.sc-disclaimer-modal.hidden { display: none; }
.sc-disclaimer-dialog {
  width: min(480px, 100%);
  padding: 18px 20px;
  border: 2px solid var(--danger);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 40px color-mix(in srgb, #000 25%, transparent);
}
.sc-disclaimer-dialog h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--danger);
}
.sc-disclaimer-dialog p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
}
.sc-disclaimer-warn {
  padding: 8px 10px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}
.sc-disclaimer-actions {
  margin-top: 14px;
  justify-content: flex-end;
}
.chat-disclaimer-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, #000 55%, transparent);
}
.chat-disclaimer-modal.hidden { display: none; }
.chat-disclaimer-dialog {
  width: min(480px, 100%);
  padding: 18px 20px;
  border: 2px solid var(--warn);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 40px color-mix(in srgb, #000 25%, transparent);
}
.chat-disclaimer-dialog h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--warn);
}
.chat-disclaimer-dialog p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
}
.chat-disclaimer-warn {
  padding: 8px 10px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: var(--warn);
}
.chat-disclaimer-actions {
  margin-top: 14px;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .sc-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .sc-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    height: auto;
    max-height: 240px;
    overflow: hidden;
  }
  .sc-main {
    height: auto;
    overflow: visible;
  }
}

.stats-note { margin: 0 0 12px; }
.stats-body { display: flex; flex-direction: column; gap: 14px; }

/* 服务状态历史条 */
.la-svc-status { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.la-svc-status--simple { gap: 6px; }
.la-svc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
}
.la-svc-label {
  flex: 0 0 108px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.la-svc-bar {
  flex: 1;
  display: flex;
  min-width: 0;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 40%, transparent);
  gap: 1px;
}
.la-svc-status--simple .la-svc-bar { height: 8px; border-radius: 3px; }
.la-svc-seg { flex: 1 1 0; min-width: 1px; }
.la-svc-seg.is-green { background: var(--ok, #1f9a78); }
.la-svc-seg.is-yellow { background: var(--warn, #d4a85a); }
.la-svc-seg.is-red { background: var(--danger, #c94d5e); }
.la-svc-now {
  flex: 0 0 48px;
  font-size: 11px;
  text-align: right;
  color: var(--muted);
}
.la-svc-now.is-green { color: var(--ok); }
.la-svc-now.is-yellow { color: var(--warn); }
.la-svc-now.is-red { color: var(--danger); }
.la-svc-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  padding-left: 118px;
}
.la-svc-axis-mid {
  flex: 1;
  text-align: center;
  opacity: 0.75;
}
.la-svc-seg.is-archive.is-green { opacity: 0.72; }
.la-svc-seg.is-archive.is-yellow,
.la-svc-seg.is-archive.is-red { opacity: 0.92; }
.la-svc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.la-svc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.la-svc-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.la-svc-legend i.is-green { background: var(--ok); }
.la-svc-legend i.is-yellow { background: var(--warn); }
.la-svc-legend i.is-red { background: var(--danger); }
.la-svc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.la-svc-head h3 { margin: 0; }
.la-svc-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.la-svc-legend--inline {
  margin: 0;
  gap: 8px 12px;
}
.la-svc-bar { cursor: crosshair; }
.la-svc-seg { cursor: inherit; }
.la-svc-tip {
  position: fixed;
  z-index: 12000;
  max-width: min(360px, 92vw);
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card, #1a1a1e) 92%, #000);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  pointer-events: none;
}
.la-svc-tip strong {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}
.la-svc-tip span { display: block; color: var(--muted); }

.stats-table-wrap {
  overflow: auto;
  margin-top: 8px;
  max-width: 100%;
}
.stats-table-wrap-rank {
  max-height: 420px;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.stats-table th,
.stats-table td {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-table thead th {
  color: var(--text);
  font-weight: 600;
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.stats-table tbody th[scope="row"] {
  font-weight: 600;
  text-align: left;
  color: var(--text);
}
.stats-col-label { width: 34%; }
.stats-col-num { width: 16.5%; }
.stats-col-rank { width: 56px; }
.stats-col-name { width: 42%; }
.stats-col-metric { width: auto; }
.stats-table thead th:not(:first-child),
.stats-table td.stats-num,
.stats-table.stats-table-rank thead th:first-child,
.stats-table.stats-table-rank thead th:last-child {
  text-align: right;
}
.stats-table.stats-table-rank thead th:nth-child(2),
.stats-table td.stats-name {
  text-align: left;
}
.stats-num {
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}
.stats-name {
  text-align: left !important;
}
.stats-sub {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.stats-archive-grid > .card {
  min-width: 0;
  overflow: hidden;
}
.stats-archive-grid .stats-table-wrap {
  margin-top: 6px;
}
.stats-archive-grid .stats-table-wrap-rank {
  max-height: 280px;
}

.stats-view-seg {
  margin: 0 0 12px;
}
.stats-view-panel[hidden] {
  display: none !important;
}
.stats-summary-grid {
  margin-top: 10px;
}
.stats-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.stats-bar-row {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.stats-bar-label {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-bar-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  overflow: hidden;
}
.stats-bar-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
}
.stats-bar-val {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stats-hour-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.stats-hour-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.stats-hour-cell > i {
  display: block;
  width: 100%;
  height: 36px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) calc(var(--intensity, 8) * 1%), var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.stats-hour-label {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stats-bac-list {
  margin: 8px 0 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.audience-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.audience-user-card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--panel));
}
.audience-user-card--dim { opacity: 0.88; }
.audience-user-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.audience-user-face {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 44px;
  background: var(--surface-3, #2a2e38);
}
.audience-user-face.ph { display: inline-block; }
.audience-user-meta strong { font-size: 15px; }
.audience-user-meta strong a { color: inherit; text-decoration: none; }
.audience-user-meta strong a:hover { text-decoration: underline; }
.audience-user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.audience-user-tags span {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--muted);
}
.audience-user-sign {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.audience-user-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text);
}
.audience-user-rel {
  margin-top: 8px;
  font-size: 12px;
}
.audience-user-arcs {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.audience-user-arcs h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.audience-arc-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 12px;
  line-height: 1.45;
}
.audience-arc-list li { margin: 4px 0; }
.audience-arc-list a { color: var(--accent, #d4b56a); }

@media (max-width: 768px) {
  .stats-hour-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .stats-bar-row {
    grid-template-columns: 4.8em minmax(0, 1fr);
    grid-template-areas:
      "label val"
      "track track";
  }
  .stats-bar-label { grid-area: label; }
  .stats-bar-val { grid-area: val; justify-self: end; }
  .stats-bar-track { grid-area: track; }
  #panel-stats .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stats-table-kv th[scope="row"] {
  width: 42%;
  white-space: nowrap;
}
.stats-table-kv td.stats-num {
  width: 58%;
}
.stats-rank {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
}
.stats-rank li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.stats-rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.stats-propose {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.stats-propose strong { color: var(--text); font-weight: 600; }

.ov-billboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
@media (max-width: 720px) {
  .ov-billboard-grid { grid-template-columns: 1fr; }
}
.ov-billboard-rank {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}
.ov-billboard-rank li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}
.ov-bb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ov-bb-val {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ov-bb-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.ov-rank-face {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--surface-2);
}
.ov-rank-medal,
.ov-rank-guard {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.ov-rank-guard {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
}
.ov-bb-tips { margin: 10px 0 0; }
.stats-rank strong {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  flex-shrink: 0;
}

.collab-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}
.collab-list-compact { max-height: 280px; }
.collab-item {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  cursor: pointer;
}
.collab-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.collab-item.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.collab-item-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.collab-item-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collab-item-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.collab-ack-readers {
  line-height: 1.45;
  word-break: break-word;
}
.collab-item-body {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 13px;
  white-space: normal;
  word-break: break-word;
}
.collab-chip {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.collab-chip.warn { color: #c9881a; border-color: color-mix(in srgb, #c9881a 40%, var(--line)); }
.collab-chip.urgent { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.collab-chip.open { color: var(--accent); }
.collab-chip.pending { color: #c9881a; }
.collab-chip.resolved { color: var(--ok, #7fd99a); }
.collab-chip.closed { color: var(--muted); }

.collab-chat-card { display: flex; flex-direction: column; min-height: 480px; }
.collab-chat-log {
  flex: 1;
  min-height: 320px;
  max-height: 520px;
  overflow: auto;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.collab-bubble {
  max-width: min(720px, 92%);
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2, var(--card)) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-shrink: 0;
}
.collab-bubble.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.collab-bubble.is-flash {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  transition: outline-color 0.3s ease;
}
@keyframes collab-bubble-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.collab-bubble.is-enter {
  animation: collab-bubble-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.collab-bubble.mine.is-enter { transform-origin: right bottom; }
.collab-bubble:not(.mine).is-enter { transform-origin: left bottom; }
@media (prefers-reduced-motion: reduce) {
  .collab-bubble.is-enter { animation: none; }
}
.collab-bubble-body { min-width: 0; flex: 1; }
.collab-bubble-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.collab-bubble-text {
  white-space: normal;
  word-break: break-word;
  font-size: 14px;
}
.collab-bubble-text.md-body,
.collab-item-body.md-body,
.collab-notice-body.md-body {
  line-height: 1.65;
  color: inherit;
  word-break: break-word;
}
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }
.md-body .md-p {
  margin: 0 0 0.65em;
}
.md-body .md-p:last-child { margin-bottom: 0; }
.md-body .md-h {
  margin: 0.85em 0 0.4em;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text);
}
.md-body .md-h1 {
  font-size: 1.38em;
  padding-bottom: 0.28em;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}
.md-body .md-h2 {
  font-size: 1.22em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.md-body .md-h3 { font-size: 1.1em; }
.md-body .md-h4 { font-size: 1.05em; opacity: 0.95; }
.md-body .md-h5,
.md-body .md-h6 { font-size: 1em; opacity: 0.88; font-weight: 650; }
.md-body .md-quote {
  margin: 0.55em 0;
  padding: 8px 12px 8px 14px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 8%, var(--surface-2)) 0%,
    color-mix(in srgb, var(--surface-2) 55%, transparent) 100%
  );
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  border-radius: 0 var(--radius) var(--radius) 0;
}
.md-body .md-quote .md-quote {
  margin: 0.4em 0 0.15em;
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}
.md-body .md-quote .md-p { margin-bottom: 0.4em; }
.md-body .md-quote .md-p:last-child { margin-bottom: 0; }
.md-body .md-list {
  margin: 0.4em 0 0.65em;
  padding-left: 1.4em;
}
.md-body .md-list .md-list {
  margin: 0.2em 0 0.25em;
}
.md-body .md-list li {
  margin: 0.22em 0;
  padding-left: 0.1em;
}
.md-body .md-ol { list-style: decimal; }
.md-body .md-ul { list-style: disc; }
.md-body .md-ul .md-ul { list-style: circle; }
.md-body .md-ul .md-ul .md-ul { list-style: square; }
.md-body .md-task {
  list-style: none;
  margin-left: -1.15em;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.md-body .md-task-box {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-top: 0.28em;
  border-radius: 3px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--surface);
  font-size: 0.72em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.md-body .md-task.is-checked .md-task-box {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
}
.md-body .md-task.is-checked .md-task-text {
  opacity: 0.72;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent);
}
.md-body .md-pre-wrap {
  margin: 0.55em 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 88%, #000 6%);
  overflow: hidden;
}
.md-body .md-pre-label {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 35%, transparent);
}
.md-body .md-pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12.5px;
  line-height: 1.5;
}
.md-body .md-code,
.md-body .md-pre code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
}
.md-body .md-code {
  padding: 0.12em 0.4em;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  font-size: 0.9em;
  color: color-mix(in srgb, var(--accent) 35%, var(--text));
}
.md-body .md-pre .md-code,
.md-body .md-pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}
.md-body .md-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.md-body .md-link:hover {
  text-decoration-color: var(--accent);
}
.md-body .md-img {
  display: block;
  max-width: min(100%, 420px);
  max-height: 280px;
  margin: 8px 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  object-fit: contain;
  background: var(--surface-2);
}
.md-body .md-hr {
  border: 0;
  height: 1px;
  margin: 0.9em 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--line) 90%, var(--accent) 10%) 20%,
    color-mix(in srgb, var(--line) 90%, var(--accent) 10%) 80%,
    transparent
  );
}
.md-body del {
  opacity: 0.7;
  text-decoration-thickness: 1px;
}
.md-body .md-mark {
  padding: 0.05em 0.28em;
  border-radius: 3px;
  background: color-mix(in srgb, #e8c547 55%, var(--surface-2));
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme="light"] .md-body .md-mark {
  background: color-mix(in srgb, #ffe566 70%, #fff);
}
.md-body .md-table-wrap {
  margin: 0.55em 0;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.md-body .md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
  line-height: 1.45;
}
.md-body .md-table th,
.md-body .md-table td {
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  text-align: left;
  vertical-align: top;
}
.md-body .md-table th {
  font-weight: 650;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  color: var(--text);
  white-space: nowrap;
}
.md-body .md-table tbody tr:last-child td { border-bottom: 0; }
.md-body .md-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
.md-body .md-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.collab-bubble-text .msg-mention {
  color: var(--accent);
  font-weight: 650;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: var(--radius-sm);
  padding: 0 3px;
}
.collab-bubble-quote {
  margin: 0 0 6px;
  padding: 6px 8px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-2, var(--card)) 70%, transparent);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.collab-bubble-quote strong {
  color: var(--text);
  font-weight: 650;
  margin-right: 4px;
}
.collab-bubble-quote-text {
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.collab-bubble-image {
  display: block;
  max-width: min(280px, 70vw);
  max-height: 240px;
  margin-top: 6px;
  border-radius: 8px;
  object-fit: contain;
  background: color-mix(in srgb, #000 8%, transparent);
  cursor: zoom-in;
}
button.collab-bubble-image-btn {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 6px 0 0;
  background: transparent;
  display: block;
  max-width: 100%;
  cursor: zoom-in;
}
.collab-bubble.mine .collab-bubble-image,
.collab-bubble.mine .collab-bubble-image-btn {
  margin-left: auto;
}
.chat-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 16px 24px;
  background: color-mix(in srgb, #000 78%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-fast, 0.18s) var(--ease-soft, ease),
    visibility var(--motion-fast, 0.18s);
}
.chat-image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.chat-image-lightbox.hidden { display: none; }
.chat-image-lightbox-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 14%, transparent);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.chat-image-lightbox-close:hover {
  background: color-mix(in srgb, #fff 24%, transparent);
}
.chat-image-lightbox-stage {
  max-width: min(96vw, 1200px);
  max-height: min(82vh, 900px);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-overflow-scrolling: touch;
}
.chat-image-lightbox-stage img {
  display: block;
  max-width: min(92vw, 1100px);
  max-height: min(78vh, 860px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
  transition: max-width 0.18s ease, max-height 0.18s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.chat-image-lightbox-stage img.is-zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
}
.chat-image-lightbox-hint {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, #fff 70%, transparent);
}
.msg-reply-preview,
.msg-image-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2, var(--card)) 85%, transparent);
}
.msg-reply-preview.hidden,
.msg-image-preview.hidden {
  display: none !important;
}
.msg-reply-preview-body {
  min-width: 0;
  flex: 1;
  font-size: 12px;
  color: var(--muted);
}
.msg-reply-preview-label {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.msg-reply-preview-text {
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-image-preview img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: color-mix(in srgb, #000 10%, transparent);
}
.chat-msg-menu {
  position: fixed;
  z-index: 1201;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  min-width: 112px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px color-mix(in srgb, #000 28%, transparent);
}
.chat-msg-menu.hidden {
  display: none !important;
}
.chat-msg-menu-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.chat-msg-menu-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.collab-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2, #333);
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}
.collab-face-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.collab-name-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.collab-name-link:hover { text-decoration: underline; color: var(--accent); }
.collab-item-head-face {
  display: flex;
  align-items: center;
  gap: 8px;
}
.collab-item-head-face .collab-face {
  width: 28px;
  height: 28px;
}
.user-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, #000 45%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-fast) var(--ease-soft),
    visibility var(--motion-fast);
}
.user-profile-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.user-profile-modal.hidden { display: none; }
.user-profile-dialog {
  width: min(440px, 100%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 16px 48px color-mix(in srgb, #000 35%, transparent);
}
.user-profile-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.user-profile-head .profile-bili-face {
  width: 64px;
  height: 64px;
}
.collab-compose {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.collab-compose input { flex: 1; }
.collab-compose-stack {
  flex-direction: column;
  align-items: stretch;
}
.collab-compose-stack .btn { align-self: flex-end; }

.collab-pm-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px;
}
.msg-shell {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 14px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.msg-side,
.msg-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}
.msg-side.card,
.msg-main.card {
  margin-bottom: 0;
  padding: 0 14px;
  overflow: hidden;
}
.msg-main.is-chat-switch {
  animation: msg-chat-switch 0.28s var(--ease-soft, ease) both;
}
.msg-main.is-chat-switch .msg-main-head,
.msg-main.is-chat-switch .msg-log-wrap,
.msg-main.is-chat-switch .msg-compose {
  animation: msg-chat-fade 0.28s var(--ease-soft, ease) both;
}
.msg-main.is-chat-switch .msg-log-wrap {
  animation-delay: 24ms;
}
.msg-main.is-chat-switch .msg-compose {
  animation-delay: 40ms;
}
@keyframes msg-chat-switch {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes msg-chat-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-main.is-chat-switch,
  .msg-main.is-chat-switch .msg-main-head,
  .msg-main.is-chat-switch .msg-log-wrap,
  .msg-main.is-chat-switch .msg-compose {
    animation: none !important;
  }
}
.msg-side {
  border-right: 0;
}
.msg-back-btn { display: none; flex-shrink: 0; }
.msg-side-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--line);
}
.msg-side-head .panel-presence-meta {
  flex: 1 1 100%;
  margin-top: 2px;
}
.msg-side-head h2,
.msg-side-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}
.msg-side-scroll {
  flex: 1;
  min-height: 0;
  padding: 8px 0 14px;
}
.msg-log-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.msg-log {
  flex: 1;
  min-height: 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  touch-action: pan-y;
  overflow-anchor: none;
}
.chat-jump-bottom {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 22%, transparent);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.chat-jump-bottom.hidden {
  display: none !important;
}
.chat-jump-bottom:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
}
.chat-jump-bottom-arrow {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.chat-jump-bottom-count {
  min-width: 1.2em;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.3;
}
.chat-jump-bottom-count.hidden {
  display: none !important;
}
.msg-section-label {
  margin: 10px 4px 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.msg-session-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-session {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--motion-fast, 0.18s) var(--ease-soft, ease),
    border-color var(--motion-fast, 0.18s) var(--ease-soft, ease);
}
.msg-session:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.msg-session.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.msg-session-main { min-width: 0; flex: 1; }
.msg-session-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.msg-session-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.msg-session-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-unread {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger, #f07178);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.msg-unread.is-muted {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
}
.msg-new-dm {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  min-width: 0;
}
.chat-warn-banner {
  flex-shrink: 0;
  margin: 0 -14px;
  padding: 8px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--warn) 88%, var(--text));
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
}
.msg-compose {
  flex-shrink: 0;
  position: relative;
  border-top: 1px solid var(--line);
  padding: 10px 0 0;
  background: transparent;
  min-width: 0;
}
.msg-compose > .status-line {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 6px);
  max-width: min(100%, 280px);
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, #000 12%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
  z-index: 4;
  backdrop-filter: blur(6px);
}
.msg-compose > .status-line:empty {
  display: none;
}
.msg-compose > .status-line:not(:empty) {
  animation: msg-status-in 0.18s var(--ease-out, ease) both;
}
@keyframes msg-status-in {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: none; }
}
#chatSend.is-sending {
  opacity: 0.85;
  cursor: wait;
}
.msg-compose-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.msg-at-prefix {
  flex-shrink: 0;
  margin-top: 8px;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  cursor: pointer;
}
.msg-at-prefix:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}
.msg-compose-field textarea {
  flex: 1;
  min-width: 0;
}
.chat-at-menu {
  position: fixed;
  z-index: 1200;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px color-mix(in srgb, #000 28%, transparent);
}
.chat-at-menu.hidden,
.msg-at-prefix.hidden {
  display: none !important;
}
.chat-at-menu-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 650;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.chat-at-menu-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
#panel-chat,
#panel-chat * {
  -webkit-touch-callout: none;
}
#chatInput,
#chatInput * {
  -webkit-touch-callout: default;
  user-select: text;
}
.msg-main-title {
  min-width: 0;
  flex: 1;
}
.msg-main-title h3 {
  margin: 0;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-main-title .hint {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
#chatMuteBtn.is-muted {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
}
.msg-compose textarea {
  width: 100%;
  min-height: 64px;
  max-height: 160px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.45;
}
.msg-compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.msg-compose-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
#chatCharCount.is-limit { color: var(--danger); }
@media (max-width: 900px) {
  .collab-pm-layout { grid-template-columns: 1fr; }
  .panel-chat .panel-head {
    display: none;
  }

  .main:has(#panel-chat.active) {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html.la-wall-on .main:has(#panel-chat.active) {
    background: transparent !important;
  }
  /* 手机聊天：留在顶栏下方主内容区，flex 撑满高度；shell 用 block + 双层 absolute 左右滑 */
  #panel-chat.panel-chat.active {
    position: relative;
    z-index: auto;
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-sizing: border-box;
  }
  html.la-wall-on #panel-chat.panel-chat.active {
    background: transparent !important;
  }
  #panel-chat .msg-shell {
    display: block;
    flex: 1 1 0;
    height: 0;
    min-height: 0;
    position: relative;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
  }
  #panel-chat .msg-side.card,
  #panel-chat .msg-main.card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #panel-chat .msg-side,
  #panel-chat .msg-main {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
  }
  #panel-chat .msg-side {
    z-index: 1;
    background: color-mix(in srgb, var(--surface-2) 92%, transparent);
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
  #panel-chat .msg-main {
    z-index: 2;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    transform: translate3d(100%, 0, 0);
    pointer-events: none;
  }
  #panel-chat .msg-shell.is-thread .msg-side {
    transform: translate3d(-100%, 0, 0);
    pointer-events: none;
  }
  #panel-chat .msg-shell.is-thread .msg-main {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
  #panel-chat .msg-main.is-chat-switch,
  #panel-chat .msg-main.is-chat-switch .msg-main-head,
  #panel-chat .msg-main.is-chat-switch .msg-log-wrap,
  #panel-chat .msg-main.is-chat-switch .msg-compose {
    animation: none !important;
  }
  .msg-back-btn { display: inline-flex; }
  @media (prefers-reduced-motion: reduce) {
    #panel-chat .msg-side,
    #panel-chat .msg-main {
      transition: none;
    }
  }
  .msg-side-head,
  .msg-main-head {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    flex-shrink: 0;
  }
  .chat-warn-banner {
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
  .msg-side-scroll {
    padding-left: 8px;
    padding-right: 8px;
  }
  .msg-log {
    padding-left: 12px;
    padding-right: 12px;
  }
  .msg-compose,
  .msg-new-dm {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  .msg-compose {
    padding-top: 10px;
    border-top: 1px solid var(--line);
    background: transparent;
  }
  html.la-wall-on #panel-chat .msg-side {
    background: color-mix(in srgb, var(--surface-2) 62%, transparent) !important;
    backdrop-filter: blur(var(--la-glass-blur)) saturate(1.06);
    -webkit-backdrop-filter: blur(var(--la-glass-blur)) saturate(1.06);
  }
  html.la-wall-on #panel-chat .msg-main {
    background: color-mix(in srgb, var(--surface) 68%, transparent) !important;
    backdrop-filter: blur(var(--la-glass-blur)) saturate(1.06);
    -webkit-backdrop-filter: blur(var(--la-glass-blur)) saturate(1.06);
  }
  html.la-wall-on #panel-chat .msg-compose {
    background: transparent !important;
    border-top-color: var(--la-glass-border);
  }
  .collab-bubble {
    max-width: calc(100% - 8px);
  }
  .msg-compose textarea {
    width: 100%;
    max-width: 100%;
  }
  .topbar-song-wrap--mobile {
    flex: 1 1 0;
    min-width: 72px;
    max-width: none;
    margin-right: 0;
  }
  .topbar-song-wrap--mobile .topbar-song-chip {
    width: 100%;
    height: var(--control-h);
    min-height: var(--control-h);
    padding: 0 var(--control-pad-x-sm);
    font-size: var(--control-fs-sm);
  }
  .topbar-song-wrap--mobile .topbar-song-text {
    min-width: 0;
  }
}
.collab-pm-main { display: flex; flex-direction: column; min-height: 480px; }
.collab-ticket-detail {
  min-height: 240px;
  max-height: 420px;
  overflow: auto;
}
.collab-ticket-replies {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collab-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, #000 45%, transparent);
}
.collab-notice-modal.hidden { display: none; }
.collab-notice-card {
  width: min(480px, 100%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 16px 48px color-mix(in srgb, #000 35%, transparent);
}
.collab-notice-level {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.collab-notice-card.is-warn .collab-notice-level { color: #c9881a; }
.collab-notice-card.is-urgent .collab-notice-level { color: var(--danger); }
.collab-notice-body {
  white-space: normal;
  word-break: break-word;
  line-height: 1.55;
  margin: 10px 0;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--muted);
}
.field input,
.field textarea,
.field select,
.collab-compose input,
.collab-compose textarea,
#ticketStatus {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

.lv-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}
.lv-meta > div {
  min-width: 0;
  flex: 1;
}
.lv-meta strong,
#lvMetaSub {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.lv-cover {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--surface-2, var(--bg));
  flex-shrink: 0;
}
.lv-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #0b0d12;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.lv-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.lv-listen-sink {
  position: fixed;
  width: 1px;
  height: 1px;
  left: 0;
  bottom: 0;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}
.lv-player-card.is-audio-only .lv-stage {
  display: none;
}

.mb-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.mb-filter-label input {
  min-width: 200px;
}
.mb-err-card {
  margin-bottom: 12px;
}
.mb-err-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 13px;
}
.mb-err-label textarea {
  width: 100%;
  min-height: 0;
  height: var(--control-h, 34px);
  padding: 6px 10px;
  line-height: 1.35;
  resize: vertical;
  font: inherit;
  box-sizing: border-box;
}
.mb-list-wrap {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.mb-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 13px;
}
.mb-table th,
.mb-table td {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
}
.mb-table thead th {
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
}
.mb-table .col-num {
  width: 40px;
  color: var(--muted);
}
.mb-table .col-mode { width: 88px; }
.mb-table .col-name {
  min-width: 160px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-table .col-artist {
  min-width: 120px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-table .mb-actions {
  width: 1%;
  white-space: nowrap;
  text-align: left;
}
.mb-table .mb-actions .btn + .btn { margin-left: 4px; }
.mb-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, #000 45%, transparent);
}
.mb-modal.hidden { display: none; }

.ubl-scope {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.ubl-scope-song {
  background: rgba(255, 196, 86, 0.14);
  color: #ffd98a;
}
.ubl-scope-global {
  background: rgba(255, 100, 100, 0.14);
  color: #ffb4b4;
}
.mb-dialog {
  width: min(420px, 100%);
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface, var(--bg));
  box-shadow: 0 16px 40px color-mix(in srgb, #000 35%, transparent);
}
.mb-dialog h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.page-desc-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(70vh, 720px);
  overflow: auto;
  padding-right: 4px;
}
.page-desc-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.page-desc-row:last-child { border-bottom: none; padding-bottom: 0; }
.page-desc-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.page-desc-title strong { font-size: 14px; }
.page-desc-default {
  font-size: 12px;
  line-height: 1.35;
}
.page-desc-row textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
}

 /* ---- app motion system ---- */ 
@keyframes ui-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ui-toast-in {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to { opacity: 1; transform: none; }
}

.auth-gate.is-open .auth-gate-card {
  animation: ui-panel-in var(--motion-fast) var(--ease-out) both;
}

.chat-disclaimer-modal,
.collab-notice-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-fast) var(--ease-soft),
    visibility var(--motion-fast);
}
.chat-disclaimer-modal.is-open,
.collab-notice-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pm-toast:not(.hidden),
.version-update-toast:not(.hidden),
.presence-login-toast:not(.hidden) {
  animation: ui-toast-in var(--motion-fast) var(--ease-out) both;
}

.bar-btn,
.topbar-song-chip,
.session-user-trigger,
.theme-seg button,
.auth-tab {
  transition:
    background var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft),
    box-shadow var(--motion-fast) var(--ease-soft),
    opacity var(--motion-fast) var(--ease-soft);
}
.bar-btn:active,
.topbar-song-chip:active,
.nav-btn:active,
.session-user-trigger:active,
.session-user-menu-item:active {
  transform: scale(0.97);
}

.card {
  transition:
    border-color var(--motion-fast) var(--ease-soft),
    box-shadow var(--motion-fast) var(--ease-soft);
}

.nav-btn {
  transition:
    background var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}

@media (max-width: 768px) {
  .sidebar {
    transition: transform 0.16s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion: 1ms;
    --motion-slow: 1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---- ops (��ά) ---- */
.ops-health-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ops-health-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
}
.ops-health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.ops-health-item.is-green .ops-health-dot,
.ops-health-dot.is-green { background: var(--ok, #7bc9b0); }
.ops-health-item.is-yellow .ops-health-dot,
.ops-health-dot.is-yellow { background: #d4a017; }
.ops-health-item.is-red .ops-health-dot,
.ops-health-dot.is-red { background: #d36b6b; }
.ops-health-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ops-health-level { font-size: 12px; color: var(--muted); }
.ops-ov-health {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.ops-backup-groups { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ops-group-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ops-group-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-backup-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ops-backup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ops-backup-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.collab-item.is-unread {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2, var(--bg)));
}
#ticketStatusFilters .btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

/* 点歌控制 · 控制台排版 */
.sr-toolbar { flex-wrap: wrap; align-items: center; gap: 8px; }
.sr-now-head {
  align-items: flex-start;
  gap: 10px 12px;
  margin-bottom: 10px;
}
.sr-now-head-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.sr-now-head-title h3 {
  margin: 0;
}
.sr-now-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sr-now-actions #srMsg {
  max-width: min(280px, 100%);
  white-space: normal;
  font-size: 12px;
  line-height: 1.35;
}
.sr-console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 16px 20px;
}
@media (max-width: 900px) {
  .sr-console-grid { grid-template-columns: 1fr; }
}
.sr-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
/* .sr-switch 滑块样式见文末「复选框 → 滑块开关」 */
.sr-add-row,
.sr-tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.sr-add-row select,
.sr-add-row input[type="search"],
.sr-add-row input[type="text"] {
  flex: 1;
  min-width: 140px;
}
.sr-add-row select { flex: 0 0 auto; min-width: 120px; max-width: 160px; }
.sr-tools-row .sr-tool-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.sr-tools-row .sr-tool-label select { min-width: 160px; }
.sr-obs-url {
  flex: 1;
  min-width: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.sr-dual {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.sr-dual input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #fd518b;
}
.sr-dual input[type="number"] {
  width: 72px;
  flex-shrink: 0;
}

/* 点歌控制 · 排队列表（左侧把手直接拖动，其余可复制） */
.sr-queue-table {
  user-select: text;
  -webkit-user-select: text;
}
.sr-queue-table .col-drag {
  width: 28px;
  padding-left: 8px;
  padding-right: 4px;
  color: var(--muted);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  text-align: center;
  letter-spacing: -1px;
  font-size: 12px;
  line-height: 1;
}
.sr-queue-table .sr-drag-handle:active {
  cursor: grabbing;
  color: var(--accent);
}
.sr-queue-table.sr-drag-active,
.sr-queue-table.sr-drag-active * {
  cursor: grabbing !important;
  user-select: none !important;
}
.sr-queue-table tr.sr-dragging {
  opacity: 0.55;
}
.sr-queue-table tr.sr-drag-over td {
  box-shadow: inset 0 2px 0 0 var(--accent);
}
.sr-now-extra {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.sr-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sr-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text, #222) 12%, transparent);
  overflow: hidden;
}
.sr-progress-track > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent, #5b8def);
  transition: width 0.2s ease;
}
.sr-cache-track > i {
  background: color-mix(in srgb, var(--ok, #3d9a5f) 80%, var(--accent, #5b8def));
}
.sr-cache-row .hint {
  min-width: 7em;
}
.sr-media-info {
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}
.sr-media-block {
  display: grid;
  gap: 4px;
  color: var(--text, inherit);
}
.sr-media-block .hint {
  margin-right: 4px;
}
.sr-queue-table .col-media {
  max-width: 280px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  white-space: normal;
  word-break: break-word;
}

/* —— 复选框 → 滑块开关（带动画） —— */
label.sr-switch,
label.sw,
label.check-row,
label.row-between:has(> input[type="checkbox"]:not([hidden])) {
  --sw-w: 44px;
  --sw-h: 24px;
  --sw-knob: 18px;
  --sw-pad: 3px;
  --sw-off: color-mix(in srgb, var(--muted) 35%, var(--surface-2, var(--bg)));
  --sw-on: color-mix(in srgb, var(--accent) 72%, var(--ok, #7bc9b0) 10%);
  cursor: pointer;
  user-select: none;
}

/* 轨道：原生 checkbox 本体 */
label.sr-switch > input[type="checkbox"],
label.sw > input[type="checkbox"],
label.check-row > input[type="checkbox"],
label.row-between > input[type="checkbox"]:not([hidden]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: var(--sw-w) !important;
  height: var(--sw-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent) !important;
  border-radius: 999px !important;
  background: var(--sw-off) !important;
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 28%, transparent);
  cursor: pointer !important;
  vertical-align: middle;
  transition:
    background 220ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 220ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 220ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* 滑块圆钮 */
label.sr-switch > input[type="checkbox"]::before,
label.sw > input[type="checkbox"]::before,
label.check-row > input[type="checkbox"]::before,
label.row-between > input[type="checkbox"]:not([hidden])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  width: var(--sw-knob);
  height: var(--sw-knob);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 2px color-mix(in srgb, #000 35%, transparent),
    0 0 0 1px color-mix(in srgb, #000 6%, transparent);
  transform: translateY(-50%) translateX(0);
  transition: transform 220ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}

label.sr-switch > input[type="checkbox"]:checked,
label.sw > input[type="checkbox"]:checked,
label.check-row > input[type="checkbox"]:checked,
label.row-between > input[type="checkbox"]:checked {
  background: var(--sw-on) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, #000 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

label.sr-switch > input[type="checkbox"]:checked::before,
label.sw > input[type="checkbox"]:checked::before,
label.check-row > input[type="checkbox"]:checked::before,
label.row-between > input[type="checkbox"]:checked::before {
  transform: translateY(-50%) translateX(calc(var(--sw-w) - var(--sw-knob) - var(--sw-pad) * 2 - 2px));
}

label.sr-switch > input[type="checkbox"]:active::before,
label.sw > input[type="checkbox"]:active::before,
label.check-row > input[type="checkbox"]:active::before,
label.row-between > input[type="checkbox"]:not([hidden]):active::before {
  width: calc(var(--sw-knob) + 3px);
}

label.sr-switch > input[type="checkbox"]:focus-visible,
label.sw > input[type="checkbox"]:focus-visible,
label.check-row > input[type="checkbox"]:focus-visible,
label.row-between > input[type="checkbox"]:not([hidden]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}

label.sr-switch > input[type="checkbox"]:disabled,
label.sw > input[type="checkbox"]:disabled,
label.check-row > input[type="checkbox"]:disabled,
label.row-between > input[type="checkbox"]:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* 点歌控制台：文案 + 右侧滑块 */
label.sr-switch {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  min-height: var(--control-h-sm, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--surface-2, var(--bg)) 80%, transparent);
  font-size: var(--control-fs-sm, 12px);
  font-weight: 500;
  color: var(--text);
}
label.sr-switch > span {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  pointer-events: none;
}
label.sr-switch:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.sr-switch-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

/* 设置页整行：文案左、滑块右 */
label.row-between:has(> input[type="checkbox"]:not([hidden])) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2, var(--bg)) 70%, transparent);
  font-size: 13px;
  color: var(--text);
}
label.row-between:has(> input[type="checkbox"]:not([hidden])) > span {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
label.row-between:has(> input[type="checkbox"]:not([hidden])):hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

/* check-row：文案旁小滑块 */
label.check-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  width: auto !important;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
label.check-row:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
label.check-row {
  --sw-w: 36px;
  --sw-h: 20px;
  --sw-knob: 14px;
  --sw-pad: 3px;
}
label.check-row.bmoe-letter {
  padding: 4px 6px !important;
}

/* 表格/列表裸复选框：迷你滑块（历史歌单模式 .mh-check 除外，需真勾选框） */
input[type="checkbox"]:not([hidden]):not(label > input):not(.mh-check) {
  --sw-w: 36px;
  --sw-h: 20px;
  --sw-knob: 14px;
  --sw-pad: 3px;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: var(--sw-w);
  height: var(--sw-h);
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, var(--surface-2, var(--bg)));
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 28%, transparent);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: background 220ms var(--ease-out, ease), border-color 220ms ease;
}
input[type="checkbox"]:not([hidden]):not(label > input):not(.mh-check)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  width: var(--sw-knob);
  height: var(--sw-knob);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, #000 35%, transparent);
  transform: translateY(-50%) translateX(0);
  transition: transform 220ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}
input[type="checkbox"]:not([hidden]):not(label > input):not(.mh-check):checked {
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
input[type="checkbox"]:not([hidden]):not(label > input):not(.mh-check):checked::before {
  transform: translateY(-50%) translateX(calc(var(--sw-w) - var(--sw-knob) - var(--sw-pad) * 2 - 2px));
}
input[type="checkbox"]:not([hidden]):not(label > input):not(.mh-check):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
input[type="checkbox"]:not([hidden]):not(label > input):not(.mh-check):disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 总览语录卡（动画/游戏/漫画/绷绷） */
.ov-quote-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.ov-quote-tab {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
}
.ov-quote-tab:last-child { border-right: 0; }
.ov-quote-tab:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.ov-quote-tab.active {
  background: var(--accent-bg);
  color: var(--accent);
}
.ov-hitokoto-card .ov-hitokoto-text {
  margin: 10px 0 6px;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 600;
}
.ov-hitokoto-card .ov-hitokoto-from {
  margin: 0;
}
.la-rule-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.la-rule-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius, 10px) + 2px);
  background: var(--surface-2, var(--bg));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.la-rule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.la-rule-index {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted, #888);
  min-width: 2.2em;
}
.la-rule-del {
  margin-left: auto;
}
.la-rule-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
}
.la-rule-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  min-width: 0;
}
.la-rule-field-full {
  grid-column: 1 / -1;
}
.la-rule-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #888);
  line-height: 1.2;
}
.la-rule-field select,
.la-rule-field input,
.la-rule-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.la-rule-field textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.45;
  font: inherit;
}
.la-rule-ic {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  color: var(--muted, #888);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}
.la-rule-ic input {
  margin: 0;
}
.la-rule-hint {
  margin: 0;
  padding: 0;
  line-height: 1.45;
}
.la-rule-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 2px;
  border-top: 1px dashed color-mix(in srgb, var(--line, #333) 80%, transparent);
}
.la-rule-meta {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.92;
}
.la-rule-claim {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .la-rule-item {
    padding: 12px;
    gap: 12px;
  }
  .la-rule-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .la-rule-del {
    margin-left: 0;
  }
  .la-rule-head {
    gap: 8px 10px;
  }
}
@media (min-width: 1100px) {
  .la-rule-row {
    grid-template-columns: minmax(160px, 200px) minmax(0, 1.2fr);
  }
}
.la-log-list {
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.la-log-item {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--bg));
  font-size: 13px;
  line-height: 1.45;
}
.la-log-meta {
  font-size: 12px;
  color: var(--muted, #888);
  margin-bottom: 4px;
}
.la-corner-toasts {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 13900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}
.la-corner-toast {
  pointer-events: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 18%, transparent);
  animation: la-toast-in 0.28s ease;
}
.la-corner-toast.is-checkin {
  border-left-color: color-mix(in srgb, var(--ok, #3a9) 80%, var(--accent));
}
.la-corner-toast .lc-title {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.la-corner-toast .lc-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.la-corner-toast .lc-from {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted, #888);
}
@keyframes la-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .la-corner-toasts {
    top: 12px;
    right: 12px;
  }
}

/* ---- 随机壁纸 + 毛玻璃 UI ---- */
.la-wall-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.03);
}
.la-wall-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 18%, transparent);
}
[data-theme="dark"] .la-wall-scrim {
  background: color-mix(in srgb, var(--bg) 30%, transparent);
}
[data-theme="light"] .la-wall-scrim {
  background: color-mix(in srgb, var(--bg) 24%, transparent);
}

html.la-wall-on,
html.la-wall-on body {
  background: transparent;
}
html.la-wall-on .shell {
  position: relative;
}
html.la-wall-on .mobile-bar,
html.la-wall-on .content-col {
  position: relative;
  z-index: 2;
}
@media (min-width: 769px) {
  html.la-wall-on .sidebar {
    position: relative;
    z-index: 2;
  }
}
html.la-wall-on .sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}
@media (max-width: 768px) {
  html.la-wall-on .sidebar {
    position: fixed;
    z-index: 60;
  }
}
html.la-wall-on .auth-gate {
  z-index: 1000;
}

html.la-wall-on {
  --muted: var(--text);
  --la-glass-surface: rgba(0, 0, 0, 0.24);
  --la-glass-surface-2: rgba(0, 0, 0, 0.14);
  --la-glass-list: rgba(0, 0, 0, 0.08);
  --la-glass-active: rgba(0, 0, 0, 0.32);
  --la-glass-hover: rgba(0, 0, 0, 0.16);
  --la-glass-border: rgba(255, 255, 255, 0.08);
  --la-glass-blur: 12px;
  --la-text-shield: rgba(0, 0, 0, 0.24);
  --la-text-shield-soft: rgba(0, 0, 0, 0.16);
  --la-text-shield-border: rgba(255, 255, 255, 0.08);
  --la-text-shadow: none;
}
[data-theme="light"].la-wall-on {
  --muted: var(--text);
  --la-glass-surface: rgba(255, 255, 255, 0.34);
  --la-glass-surface-2: rgba(255, 255, 255, 0.22);
  --la-glass-list: rgba(255, 255, 255, 0.12);
  --la-glass-active: rgba(0, 0, 0, 0.08);
  --la-glass-hover: rgba(0, 0, 0, 0.05);
  --la-glass-border: rgba(0, 0, 0, 0.08);
  --la-text-shield: rgba(255, 255, 255, 0.32);
  --la-text-shield-soft: rgba(255, 255, 255, 0.22);
  --la-text-shadow: none;
}

html.la-wall-on .content-col,
html.la-wall-on .main,
html.la-wall-on .nav-wrap {
  background: transparent !important;
}

/* 毛玻璃底：侧栏 / 顶栏 / 卡片 / 表单控件（列表单独更透） */
html.la-wall-on :is(
  .sidebar,
  .app-topbar,
  .mobile-bar,
  .card,
  .auth-gate-card,
  .collab-notice-card,
  .sc-disclaimer-dialog,
  .user-profile-dialog,
  .pm-toast,
  .topbar-song-detail,
  .version-update-toast,
  .la-corner-toast,
  .ov-highlights .changelog-item,
  .reg-code-box,
  .theme-toggle-track,
  .sidebar-pref-btn,
  .la-seg,
  .sc-panel,
  .msg-side,
  .msg-compose,
  .chat-compose,
  .collab-list,
  .runtime,
  .log-box,
  .log-list,
  label.sr-switch,
  .ov-hitokoto-card,
  details.sr-console-more,
  .sr-console-more
) {
  background: var(--la-glass-surface) !important;
  backdrop-filter: blur(var(--la-glass-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--la-glass-blur)) saturate(1.08);
  border-color: var(--la-glass-border);
}

/* 卡片内不再叠第二层毛玻璃，避免大框重叠变深 */
html.la-wall-on .main .card :is(
  .table-wrap,
  .stats-table-wrap,
  .sc-table-wrap,
  .mb-list-wrap,
  .sr-logs,
  #srNow.info-grid,
  #ovNowPlaying.info-grid,
  details.sr-console-more,
  .sr-console-more,
  label.sr-switch,
  .ov-presence-list,
  .ov-billboard,
  .ov-live-feed,
  .pager
) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: color-mix(in srgb, var(--la-glass-border) 70%, transparent) !important;
}

/* 列表容器（卡片外独立区）：轻透 */
html.la-wall-on .main :is(
  .table-wrap,
  .stats-table-wrap,
  .sc-table-wrap,
  .mb-list-wrap,
  .sr-logs
) {
  background: var(--la-glass-list) !important;
  backdrop-filter: blur(10px) saturate(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  border-color: var(--la-glass-border);
}

/* 总览在线用户 / 高能榜等：无底色 */
html.la-wall-on .main :is(
  .ov-presence-list,
  .ov-billboard,
  .ov-live-feed
) {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.la-wall-on :is(
  .ov-table tr.is-selected td
) {
  background: var(--la-glass-surface-2) !important;
  backdrop-filter: blur(10px) saturate(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
}

html.la-wall-on .main :is(
  .ov-table th,
  .stats-table thead th
) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--la-glass-border) !important;
}

html.la-wall-on .sidebar-head,
html.la-wall-on .sidebar-foot {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--la-glass-border);
}

html.la-wall-on .main :is(
  .ov-table tbody tr.is-playing td,
  .la-song-table tr.is-playing td
) {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.la-wall-on .main :is(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  background: var(--la-glass-surface-2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--la-glass-border);
}

html.la-wall-on .main .ov-table tbody td {
  background: transparent !important;
}
html.la-wall-on .main .ov-table tbody tr:hover td {
  background: transparent !important;
}

html.la-wall-on .main .la-song-table tr {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.la-wall-on .main .la-song-table tbody tr:hover td {
  background: transparent !important;
}

html.la-wall-on .main .la-song-table :is(td, .sr-cover-title, .la-expandable-title) {
  text-shadow: none;
}
html.la-wall-on .main .la-title-full {
  background: var(--la-glass-surface-2) !important;
  border-color: var(--la-glass-border);
  box-shadow: none;
}

html.la-wall-on .auth-gate {
  background: color-mix(in srgb, var(--bg) 42%, transparent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.la-wall-on .btn.ghost:not(.nav-btn) {
  background: var(--la-glass-list) !important;
  border-color: color-mix(in srgb, var(--la-glass-border) 85%, transparent) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html.la-wall-on .sidebar .nav-btn:not(.active) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text);
}
html.la-wall-on .sidebar .nav-btn:not(.active):hover {
  background: transparent !important;
  color: var(--text);
}
html.la-wall-on .sidebar .nav-btn.active {
  background: var(--la-glass-active) !important;
  border-left-color: var(--accent) !important;
  color: var(--text);
  font-weight: 600;
}
html.la-wall-on .sidebar .nav-group-head {
  background: transparent !important;
  color: var(--text);
}
html.la-wall-on .sidebar .nav-group-head:hover {
  background: transparent !important;
  color: var(--text);
}

html.la-wall-on .btn:not(.ghost) {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 顶栏芯片 / 用户按钮：半透明，不挡壁纸 */
html.la-wall-on :is(.topbar-song-chip, .session-user-trigger, .mobile-bar .bar-btn) {
  background: var(--la-glass-list) !important;
  border-color: color-mix(in srgb, var(--la-glass-border) 85%, transparent) !important;
  backdrop-filter: blur(var(--la-glass-blur)) saturate(1.04);
  -webkit-backdrop-filter: blur(var(--la-glass-blur)) saturate(1.04);
}
html.la-wall-on :is(
  .topbar-song-chip:hover,
  .topbar-song-chip.is-open,
  .topbar-song-chip.is-listening,
  .session-user-trigger:hover,
  .session-user-row.is-open .session-user-trigger,
  .mobile-bar .bar-btn:hover
) {
  background: var(--la-glass-surface-2) !important;
  border-color: var(--la-glass-border) !important;
  box-shadow: none !important;
}

/* 页面标题区：整块毛玻璃（标题 + 说明 + 在看），内部不再拆小框 */
html.la-wall-on .main .panel-head {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--la-glass-border) !important;
  border-radius: var(--radius);
  background: var(--la-glass-surface) !important;
  backdrop-filter: blur(var(--la-glass-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--la-glass-blur)) saturate(1.08);
}

html.la-wall-on .main .panel-head h2 {
  color: var(--text);
  text-shadow: none;
}

html.la-wall-on .main .panel-head p {
  margin-top: 4px;
  color: var(--text);
  text-shadow: none;
  line-height: 1.55;
  padding: 0;
  border: none;
  background: transparent !important;
}

html.la-wall-on .main .panel-presence-meta {
  margin-top: 10px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
}

html.la-wall-on .main .panel-presence-label {
  color: var(--text);
  text-shadow: none;
  opacity: 1;
}

html.la-wall-on .main .panel-presence-chip {
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  color: var(--text);
  border-color: var(--la-glass-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html.la-wall-on .main .hint,
html.la-wall-on .main .muted {
  color: var(--text);
}

html.la-wall-on .main .info-grid > div {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

/* 正在播放信息块：整块半透明（与列表区一致） */
html.la-wall-on .main :is(#srNow.info-grid, #ovNowPlaying.info-grid) {
  padding: 10px 12px;
  border: 1px solid var(--la-glass-border) !important;
  border-radius: var(--radius-sm);
  background: var(--la-glass-list) !important;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

html.la-wall-on .main :is(#srNow.info-grid, #ovNowPlaying.info-grid) > div {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--la-glass-border) 85%, transparent) !important;
  padding: 7px 0;
}

html.la-wall-on .main :is(#srNow.info-grid, #ovNowPlaying.info-grid) > div:last-child {
  border-bottom: none !important;
  padding-bottom: 0;
}

html.la-wall-on .main :is(#srNow.info-grid, #ovNowPlaying.info-grid) > div:first-child {
  padding-top: 0;
}

html.la-wall-on .main .info-grid span {
  color: var(--text);
  text-shadow: none;
}

html.la-wall-on .main .info-grid strong {
  text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  html.la-wall-on .main :is(
    p.hint,
    .status-line,
    .stats-note,
    .card > p.hint,
    .sr-now-head .hint,
    #srMsg.hint,
    .sr-queue-head .hint,
    .sr-media-info,
    #srPlayState
  ) {
    padding: 0;
    border: none;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--text);
    text-shadow: none;
  }
}

@media (max-width: 768px) {
  html.la-wall-on .main :is(
    p.hint,
    .status-line,
    .stats-note,
    .card > p.hint,
    .sr-now-head .hint,
    #srMsg.hint,
    .sr-queue-head .hint,
    .sr-media-info,
    #srPlayState
  ) {
    padding: 0;
    border: none;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
    color: var(--text);
  }
}

/* 分页 / 版本弹窗 / 总览芯片 */
html.la-wall-on .pager {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
}

html.la-wall-on .pager-size select {
  background: var(--la-glass-list) !important;
  border-color: var(--la-glass-border) !important;
  border-radius: var(--radius-sm);
  color: var(--text);
}

html.la-wall-on .main .card .table-wrap {
  border: none !important;
  border-radius: 0 !important;
}

html.la-wall-on .main .card :is(#srNow.info-grid, #ovNowPlaying.info-grid) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.la-wall-on .ov-presence-chip {
  background: var(--la-glass-list) !important;
  border-color: var(--la-glass-border) !important;
  border-radius: var(--radius-sm);
  color: var(--text);
}

html.la-wall-on .ov-presence-chip .meta,
html.la-wall-on .ov-bb-val,
html.la-wall-on .ov-presence-empty {
  color: var(--text);
}

html.la-wall-on .version-update-toast {
  background: var(--la-glass-surface) !important;
  backdrop-filter: blur(var(--la-glass-blur)) saturate(1.06);
  -webkit-backdrop-filter: blur(var(--la-glass-blur)) saturate(1.06);
  box-shadow: none !important;
}

/* 自动回复规则 / 公告批次 / 回复记录：与卡片一致的半透明毛玻璃 */
html.la-wall-on .main :is(
  .la-rule-item,
  .la-log-item,
  .an-batch-block
) {
  background: var(--la-glass-surface) !important;
  backdrop-filter: blur(var(--la-glass-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--la-glass-blur)) saturate(1.08);
  border-color: var(--la-glass-border) !important;
  box-shadow: none !important;
}

html.la-wall-on .main .an-batch-head {
  background: var(--la-glass-list) !important;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border-color: var(--la-glass-border) !important;
}

/* 二次确认 / 点歌调序等弹窗：遮罩 + 对话框半透明 */
html.la-wall-on :is(
  .confirm-modal,
  .disconnect-modal
).is-open {
  background: color-mix(in srgb, var(--bg) 38%, transparent) !important;
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}

html.la-wall-on :is(
  .confirm-dialog,
  .disconnect-dialog,
  .sr-bili-preview-dialog
) {
  background: var(--la-glass-surface) !important;
  backdrop-filter: blur(var(--la-glass-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--la-glass-blur)) saturate(1.08);
  border-color: var(--la-glass-border) !important;
  box-shadow: none !important;
}

html.la-wall-on .version-update-toast .vu-log {
  background: transparent !important;
  border-color: var(--la-glass-border);
  border-radius: var(--radius-sm);
}

/* 壁纸模式：无悬停铺底/阴影动效，保持静态半透明（侧栏抽屉右边阴影除外） */
html.la-wall-on .main :is(
  .la-table tbody tr:hover,
  .stats-table tbody tr:hover td,
  .sc-table tbody tr:hover td,
  .collab-item:hover
) {
  background: transparent !important;
  box-shadow: none !important;
}

html.la-wall-on .main .card:hover {
  box-shadow: none !important;
  border-color: var(--la-glass-border) !important;
  transform: none;
}

html.la-wall-on .main :is(
  .la-expandable-title,
  .sr-cover-title,
  .col-name,
  td,
  strong,
  span
):hover {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.la-wall-on :is(.btn, .bar-btn, .ghost):hover {
  box-shadow: none !important;
}

html.la-wall-on .btn.ghost:not(.nav-btn):hover {
  background: var(--la-glass-surface-2) !important;
}

/* 关闭壁纸：恢复实体底 */
html.la-wall-off,
html.la-wall-off body {
  background: var(--bg);
}
html.la-wall-off #laWallBg,
html.la-wall-off .la-wall-scrim {
  display: none !important;
  visibility: hidden !important;
}

/* 壁纸模式：标签/说明与正文同色（深浅模式纯白/纯黑） */
html.la-wall-on :is(.main, .sidebar, .mobile-bar, .app-topbar, .version-update-toast, .auth-gate) :where(
  .hint,
  .muted,
  .status-line,
  label:not(.btn),
  th,
  .sidebar-head p,
  .sidebar-version,
  .powerby,
  .beian-link,
  .health,
  .info-grid span,
  .topbar-song-detail-row span,
  .pager-meta,
  .pager-size,
  .ov-table .col-num,
  .ov-table .col-eta,
  .ov-table .col-eta .eta-cd,
  .ov-presence-empty,
  .ov-presence-chip .meta,
  .panel-presence-label,
  .session-user-text .muted,
  .collab-item-meta,
  .stats-note,
  .stats-propose,
  .sc-num.muted,
  .nav-group-chevron,
  .vu-meta,
  .ov-bb-val,
  .ov-rank-medal,
  .sr-media-info,
  .card > p.hint,
  .ov-empty,
  .pre
) {
  color: var(--text) !important;
  opacity: 1;
}

#sessionUserMenuFloat.session-user-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
#sessionUserMenuFloat.session-user-menu.is-open {
  display: block !important;
}

.panel.is-event-ended {
  position: relative;
  overflow: hidden;
}
.panel.is-event-ended::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  backdrop-filter: blur(16px) saturate(0.82);
  -webkit-backdrop-filter: blur(16px) saturate(0.82);
  background: color-mix(in srgb, var(--bg, #0c0c0e) 48%, transparent);
  pointer-events: auto;
}
.panel.is-event-ended .event-ended-veil {
  position: absolute;
  inset: 0;
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  text-align: center;
}
.panel.is-event-ended .event-ended-text {
  margin: 0;
  font-size: clamp(1.35rem, 3.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--text, #e8e6e3);
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}
.panel.is-event-ended > *:not(.event-ended-veil) {
  pointer-events: none;
  user-select: none;
}

body.is-event-ended {
  position: relative;
  overflow: hidden;
}
body.is-event-ended::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  backdrop-filter: blur(16px) saturate(0.82);
  -webkit-backdrop-filter: blur(16px) saturate(0.82);
  background: rgba(0, 0, 0, 0.42);
  pointer-events: auto;
}
body.is-event-ended .event-ended-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  text-align: center;
}
body.is-event-ended .event-ended-text {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: #f2f2f2;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.65);
}
body.is-event-ended .wrap {
  pointer-events: none;
  user-select: none;
}

/* ---- AstrBot 手动发群聊天面板 ---- */
.ab-chat-card { overflow: hidden; }
.ab-chat-shell {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 0;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.ab-chat-groups {
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2, var(--card)) 70%, transparent);
  min-height: 0;
  max-height: 560px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.ab-chat-c2c-open {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ab-chat-c2c-open input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
}
.ab-chat-c2c-open .btn { width: 100%; }
.ab-chat-group-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.ab-chat-group-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}
.ab-chat-group-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.ab-chat-kind {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--muted, #888);
}
.ab-chat-kind.is-c2c {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
}
.ab-chat-group-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ab-chat-group-item.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 2px 0 0 var(--accent);
}
.ab-chat-group-item strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.ab-chat-group-item .hint {
  font-size: 11px;
  line-height: 1.2;
}
.ab-chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 420px;
  max-height: 560px;
}
.ab-chat-head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.ab-chat-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ab-chat-bubble {
  max-width: min(520px, 92%);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface-2, var(--card)) 88%, transparent);
  align-self: flex-start;
}
.ab-chat-bubble.out {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}
.ab-chat-bubble.is-recalled {
  opacity: 0.55;
  text-decoration: line-through;
}
.ab-chat-bubble-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.ab-chat-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.45;
}
.ab-chat-bubble-media {
  margin-top: 6px;
  display: block;
  max-width: 220px;
  max-height: 180px;
  border-radius: 8px;
  object-fit: cover;
}
.ab-chat-bubble-file {
  margin-top: 4px;
  font-size: 12px;
  color: var(--accent);
}
.ab-chat-bubble-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.ab-chat-bubble-actions .btn-sm {
  height: 26px;
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
}
.ab-chat-compose {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ab-chat-compose textarea {
  width: 100%;
  resize: vertical;
  min-height: 56px;
  max-height: 140px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--card));
  color: var(--text);
  font: inherit;
  padding: 8px 10px;
}
.ab-chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ab-chat-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ab-chat-filebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--card));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.ab-chat-filebtn:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2, var(--card)));
}
.ab-chat-recall-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.ab-chat-recall-label input {
  width: 56px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2, var(--card));
  color: var(--text);
  padding: 0 6px;
  font: inherit;
}
.ab-chat-attach {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2, var(--card)));
  font-size: 12px;
}
.ab-chat-attach-preview {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.ab-chat-attach .ab-chat-attach-clear {
  border: 0;
  background: transparent;
  color: var(--danger, #c44);
  cursor: pointer;
  font: inherit;
  padding: 0 4px;
}

@media (max-width: 768px) {
  .ab-chat-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ab-chat-groups {
    max-height: 140px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .ab-chat-main {
    min-height: 360px;
    max-height: none;
  }
}

/* 历史点歌 · 四页签 / 歌单模式 */
#mcHistoryTabList.active,
#mcHistoryTabRoom.active,
#mcHistoryTabMine.active,
#mcHistoryTabPlaza.active,
#mcHistorySelectToggle.active {
  border-color: var(--accent);
  color: var(--accent);
}
.mh-table .mh-check-col {
  width: 36px;
  text-align: center;
}
.mh-table .mh-join-col {
  width: 88px;
  white-space: nowrap;
  text-align: center;
}
/* 强制原生勾选框，覆盖全局「裸 checkbox → 滑块」 */
.mh-table input.mh-check[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 auto;
  padding: 0 !important;
  border: initial !important;
  border-radius: 0 !important;
  background: initial !important;
  box-shadow: none !important;
  position: static !important;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}
.mh-table input.mh-check[type="checkbox"]::before {
  content: none !important;
  display: none !important;
}
.mh-table th,
.mh-table td {
  vertical-align: middle;
}
.mh-table tr.mh-row-selected {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.mh-select-mode {
  user-select: none;
}
.mh-song-link {
  color: var(--accent);
  text-decoration: none;
}
.mh-song-link:hover {
  text-decoration: underline;
}
.mh-pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.mh-pl-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
}
.mh-pl-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.mh-pl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mh-pl-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mh-pl-list a {
  color: var(--accent);
  word-break: break-all;
}
.mh-join-list {
  max-height: 360px;
  overflow: auto;
}
.mh-feature-closed {
  margin: 48px 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.mh-pl-songs {
  overflow: auto;
  max-height: 320px;
}