/* ============================================
   阿提拉学习 · PC管理后台 - Brand System Refresh
   色系：品牌红 / 深海蓝 / 中性灰白
   目标：只替换颜色，不改变布局与交互结构
   ============================================ */

:root {
  --brand-attila-red: #BF0000;
  --auxiliary-deep-sea-blue: #304E60;
  --state-success: #28A745;
  --state-warning: #FFA000;
  --state-error: #DC3545;
  --state-info: #17A2B8;
  --bg-sidebar-header-dark: #2C3E50;
  --bg-main-content: #F5F5F5;
  --bg-card-module: #FFFFFF;
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-helper-disabled: #999999;
  --text-on-dark-bg: #F0F0F0;
  --border-divider: #DDDDDD;

  --bg-global: var(--bg-main-content);
  --bg-global-gradient: linear-gradient(180deg, #F5F5F5 0%, #F5F5F5 100%);
  --bg-sidebar: var(--bg-sidebar-header-dark);
  --bg-surface: #ECEFF3;
  --bg-surface-2: #E3E8EE;
  --cream: var(--bg-card-module);
  --cream-dark: var(--bg-main-content);
  --bg-card: var(--bg-card-module);
  --bg-card-warm: var(--bg-card-module);
  --bg-dark-card: var(--bg-sidebar-header-dark);
  --text-muted: var(--text-helper-disabled);
  --text-on-dark: var(--text-on-dark-bg);
  --accent: var(--brand-attila-red);
  --accent-hover: #990000;
  --accent-light: rgba(191, 0, 0, 0.08);
  --accent-glow: rgba(191, 0, 0, 0.18);
  --sidebar-surface: rgba(255, 255, 255, 0.78);
  --sidebar-surface-strong: rgba(255, 255, 255, 0.94);
  --sidebar-border: rgba(15, 23, 42, 0.08);
  --sidebar-hover-bg: rgba(15, 23, 42, 0.05);
  --sidebar-active-bg: rgba(191, 0, 0, 0.10);
  --sidebar-floating-shadow:
    0 24px 60px rgba(15, 23, 42, 0.12),
    0 12px 24px rgba(15, 23, 42, 0.08);
  --accent-2: #8F1D1D;
  --accent-warm: #516C7D;
  --success: var(--state-success);
  --warning: var(--state-warning);
  --danger: var(--state-error);
  --border: var(--border-divider);
  --border-strong: var(--border-divider);

  --neu-light: rgba(255, 255, 255, 0.92);
  --neu-dark: rgba(44, 62, 80, 0.10);
  --shadow-sm:
    3px 3px 8px var(--neu-dark),
    -3px -3px 8px var(--neu-light);
  --shadow:
    5px 5px 14px var(--neu-dark),
    -5px -5px 14px var(--neu-light);
  --shadow-lg:
    7px 7px 20px var(--neu-dark),
    -7px -7px 20px var(--neu-light);
  --shadow-xl:
    10px 10px 30px rgba(44, 62, 80, 0.14),
    -10px -10px 30px rgba(255, 255, 255, 0.88);
  --shadow-warm:
    4px 4px 14px rgba(48, 78, 96, 0.12),
    -4px -4px 14px var(--neu-light);
  --shadow-inset:
    inset 2px 2px 6px var(--neu-dark),
    inset -2px -2px 6px var(--neu-light);
  --shadow-neu-sm:
    3px 3px 8px var(--neu-dark),
    -3px -3px 8px var(--neu-light);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --radius-pill: 100px;
  --transition: 0.3s cubic-bezier(.22, .61, .36, 1);

  /* ======================================================
     Global Page Header tokens
     —— 统一所有业务页面头部的字号 / 间距 / Tab 栏样式。
     若需要全局调参，仅需修改这里即可让所有页面同步。
     ====================================================== */
  --gph-breadcrumb-size: 14px;
  --gph-breadcrumb-link: #606266;
  --gph-breadcrumb-current: #303133;

  --gph-title-size: 24px;
  --gph-title-weight: 700;
  --gph-title-color: var(--text-primary);

  --gph-desc-size: 14px;
  --gph-desc-line-height: 1.55;
  --gph-desc-color: var(--text-secondary);

  --gph-tab-size: 14px;
  --gph-tab-height: 44px;
  --gph-tab-padding-x: 28px;
  --gph-tab-color: var(--text-secondary);
  --gph-tab-color-hover: var(--text-primary);
  --gph-tab-color-active: var(--text-primary);
  --gph-tab-active-bar: var(--accent);
  --gph-tab-active-bar-height: 3px;
  --gph-tab-divider: rgba(15, 23, 42, 0.08);

  --gph-action-gap: 10px;

  --gph-block-gap: 12px;
  --gph-section-gap: 16px;
  --gph-bottom-spacing: 18px;

  /* 页面内容壳层留白：以“平台数据报告/数据看板”页为基准 */
  --app-main-padding-y: 24px;
  --app-main-padding-x: 32px;
  --app-main-padding-mobile: 16px;
  --page-shell-padding: 24px;
  --page-shell-padding-mobile: 16px;
}

/* Iconfont Symbol SVG base styles */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: var(--bg-global-gradient);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: "Inter", "Noto Sans SC", "PingFang SC", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100vh;
}

/* ======== App Layout ======== */
.app-login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #F7F8FA 0%, #EEF2F6 100%);
}

.app-login-shell .login-page {
  flex: 1;
  min-height: 0;
}

.app-container {
  height: 100vh;
  overflow: hidden;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #F7F8FA 0%, #EEF2F6 100%);
}

.app-shell-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-shell-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(4px);
}

.sidebar-backdrop-fade-enter-active,
.sidebar-backdrop-fade-leave-active {
  transition: opacity var(--transition);
}

.sidebar-backdrop-fade-enter-from,
.sidebar-backdrop-fade-leave-to {
  opacity: 0;
}

/* ======== Sidebar ======== */
.app-sidebar {
  width: var(--sidebar-current-width);
  min-width: var(--sidebar-current-width);
  flex: 0 0 var(--sidebar-current-width);
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  z-index: 20;
  transition:
    width var(--transition),
    min-width var(--transition),
    flex-basis var(--transition),
    transform var(--transition);
}

.modern-sidebar__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  border-radius: 32px;
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-surface);
  box-shadow: var(--sidebar-floating-shadow);
  backdrop-filter: blur(24px);
}

.modern-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 16px;
}

.modern-sidebar__brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.modern-sidebar__brand-copy {
  min-width: 0;
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #18212F;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.modern-sidebar__toggle {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-secondary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.modern-sidebar__toggle:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.96);
}

.modern-sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 2px;
}

.modern-sidebar__section {
  padding: 8px;
  border-radius: 24px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.54);
  transition: all var(--transition);
}

.modern-sidebar__section.is-active {
  border-color: rgba(191, 0, 0, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 246, 246, 0.98) 100%);
}

.modern-sidebar__section-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 18px;
  transition: background-color var(--transition), transform var(--transition);
}

.modern-sidebar__section-trigger:hover {
  background: var(--sidebar-hover-bg);
}

.modern-sidebar__section-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modern-sidebar__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.modern-sidebar__icon svg {
  width: 20px;
  height: 20px;
}

.modern-sidebar__icon svg.icon {
  fill: currentColor;
}

.modern-sidebar__section.is-active .modern-sidebar__icon,
.modern-sidebar__section-trigger:hover .modern-sidebar__icon {
  color: var(--accent);
}

.modern-sidebar__section-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.modern-sidebar__section-label {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  color: #18212F;
}

.modern-sidebar__section-meta {
  font-size: 12px;
  color: var(--text-helper-disabled);
}

.modern-sidebar__section-arrow {
  color: var(--text-helper-disabled);
  transition: transform var(--transition), color var(--transition);
}

.modern-sidebar__section-arrow.is-open {
  transform: rotate(180deg);
  color: var(--accent);
}

.modern-sidebar__section-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px 2px;
}

.modern-sidebar__item {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  border-radius: 16px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.modern-sidebar__item:hover {
  background: var(--sidebar-hover-bg);
}

.modern-sidebar__item.is-active {
  background: var(--sidebar-active-bg);
  color: var(--accent);
}

.modern-sidebar__item-bar {
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
  transition: background-color var(--transition), box-shadow var(--transition);
}

.modern-sidebar__item.is-active .modern-sidebar__item-bar {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(191, 0, 0, 0.22);
}

.modern-sidebar__item-text {
  min-width: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: #3A4758;
}

.modern-sidebar__item:hover .modern-sidebar__item-text,
.modern-sidebar__item.is-active .modern-sidebar__item-text {
  color: var(--accent);
}

.modern-sidebar__footer {
  padding: 14px 6px 2px;
}

.modern-sidebar__status {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.modern-sidebar__icon-button {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
}

.modern-sidebar__icon-button:hover,
.modern-sidebar__icon-button.is-active {
  background: var(--sidebar-active-bg);
}

.modern-sidebar__icon-button.is-active .modern-sidebar__icon,
.modern-sidebar__icon-button:hover .modern-sidebar__icon {
  color: var(--accent);
}

.app-sidebar.is-collapsed .modern-sidebar__inner {
  padding: 14px 10px;
}

.app-sidebar.is-collapsed .modern-sidebar__header {
  flex-direction: column;
  padding-bottom: 14px;
}

.app-sidebar.is-collapsed .modern-sidebar__brand {
  justify-content: center;
}

.app-sidebar.is-collapsed .logo-icon {
  width: 38px;
  height: 38px;
}

.app-sidebar.is-collapsed .modern-sidebar__brand-copy {
  display: none;
}

.app-sidebar.is-collapsed .modern-sidebar__nav {
  align-items: center;
  gap: 10px;
}

.app-sidebar.is-collapsed .modern-sidebar__footer {
  padding-left: 0;
  padding-right: 0;
}

.app-sidebar.is-collapsed .modern-sidebar__status {
  justify-content: center;
  padding: 0;
}

.app-sidebar-popover.el-popover,
.app-sidebar-popover {
  padding: 10px !important;
  border-radius: 22px !important;
  border: 1px solid var(--sidebar-border) !important;
  background: var(--sidebar-surface-strong) !important;
  box-shadow: var(--sidebar-floating-shadow) !important;
  backdrop-filter: blur(24px);
}

.sidebar-popover {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-popover__title {
  font-size: 14px;
  font-weight: 700;
  color: #18212F;
  padding: 4px 8px 2px;
}

.sidebar-popover__item {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.sidebar-popover__item:hover {
  background: var(--sidebar-hover-bg);
}

.sidebar-popover__item.is-active {
  background: var(--sidebar-active-bg);
}

.sidebar-popover__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(58, 71, 88, 0.35);
  flex-shrink: 0;
}

.sidebar-popover__item.is-active .sidebar-popover__dot {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(191, 0, 0, 0.2);
}

.sidebar-popover__text {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.sidebar-popover__item.is-active .sidebar-popover__text,
.sidebar-popover__item:hover .sidebar-popover__text {
  color: var(--accent);
}

.cloud-status {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cloud-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cloud-status.online::before {
  background: var(--success);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.cloud-status.offline::before {
  background: var(--warning);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.cloud-status.online { color: var(--success); }
.cloud-status.offline { color: var(--warning); }

.sidebar-group-slide-enter-active,
.sidebar-group-slide-leave-active {
  transition: all var(--transition);
  max-height: 320px;
  opacity: 1;
}

.sidebar-group-slide-enter-from,
.sidebar-group-slide-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* ======== Header ======== */
.app-header {
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid var(--sidebar-border) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(22px);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  min-height: 76px !important;
  height: auto !important;
}

.header-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-header__nav-toggle {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-secondary);
}

.app-header__nav-toggle:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.98);
}

.app-header__context {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-header__page-title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #18212F;
}

.header-left .el-breadcrumb {
  font-size: 13px;
}

.header-left .el-breadcrumb__inner,
.header-left .el-breadcrumb__inner a {
  color: var(--text-secondary) !important;
}

.header-left .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #18212F !important;
  font-weight: 600;
}

.header-left .el-breadcrumb__separator {
  color: var(--text-helper-disabled) !important;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

/* ======== Main Content ======== */
.app-main {
  background: transparent !important;
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.app-shell-footer {
  margin-top: auto;
  padding: 14px 24px 18px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-secondary);
  text-align: center;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(14px);
}

.app-shell-footer__main {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.app-shell-footer__meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.app-shell-footer__record {
  display: inline-block;
  text-decoration: none;
  transition: color var(--transition);
}

.app-shell-footer__record:hover {
  color: var(--accent);
}

.app-shell-footer--login {
  position: relative;
  z-index: 2;
  margin: 0 16px 16px;
}

/*
  统一业务页面与侧边栏/四边的距离。
  外层由 .app-main 提供壳层安全区，内层页面根节点再补一层标准内容留白。
  这样所有页面都向“数据看板”页对齐，避免出现 p-2 / py-2 / 无 padding 混用导致的视觉漂移。
*/
.dashboard-root,
.analytics-page,
.courses-page,
.questions-page,
.course-editor-page,
.live-schedule-page,
.live-console-page,
.live-playback-page,
.users-page,
.orders-page,
.moderation-page,
.messages-page,
.access-module-page,
.teacher-dashboard-page,
.teacher-management-page,
.global-settings-page {
  padding: var(--page-shell-padding) !important;
  min-width: 0;
}

/* 角色管理页底部有吸底保存条，需要保留更多底部安全区 */
.access-module-page.pb-24 {
  padding-bottom: calc(var(--page-shell-padding) + 72px) !important;
}

@media (max-width: 1024px) {
  .app-shell {
    padding: 12px;
    gap: 12px;
  }

  .app-sidebar {
    position: fixed;
    top: 12px;
    left: 12px;
    height: calc(100vh - 24px);
    transform: translateX(calc(-100% - 24px));
    pointer-events: none;
  }

  .app-shell.is-sidebar-open .app-sidebar {
    transform: translateX(0);
    pointer-events: auto;
  }

  .app-shell-main {
    width: 100%;
  }

  .app-header {
    padding: 14px 18px;
    border-radius: 24px;
  }

  .app-shell-footer {
    padding: 12px 16px 16px;
  }
}

@media (max-width: 768px) {
  .dashboard-root,
  .analytics-page,
  .courses-page,
  .questions-page,
  .course-editor-page,
  .live-schedule-page,
  .live-console-page,
  .live-playback-page,
  .users-page,
  .orders-page,
  .moderation-page,
  .messages-page,
  .access-module-page,
  .teacher-dashboard-page,
  .teacher-management-page,
  .global-settings-page {
    padding: var(--page-shell-padding-mobile) !important;
  }

  .access-module-page.pb-24 {
    padding-bottom: calc(var(--page-shell-padding-mobile) + 72px) !important;
  }

  .app-shell {
    padding: 10px;
  }

  .app-sidebar {
    top: 10px;
    left: 10px;
    height: calc(100vh - 20px);
  }

  .app-header {
    padding: 12px 14px;
    border-radius: 22px;
    align-items: flex-start;
  }

  .header-left,
  .header-right {
    width: 100%;
  }

  .header-right {
    justify-content: flex-start;
  }

  .app-header__page-title {
    font-size: 16px;
  }
}

/* 驾驶舱：允许自然滚动 */

/* ======== Dashboard — 行动导向首页 ======== */
.dashboard-root {
  width: 100%;
}

.dashboard-root .pulse-card {
  background: var(--bg-card);
  border: none;
  box-shadow: var(--shadow);
  transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
}

.dashboard-root .pulse-card:hover {
  box-shadow: var(--shadow-lg);
}

/* --- 驾驶舱 dashboard.js：主按钮对比度 + 语义色 token --- */
.dashboard-root .bg-primary.text-ink {
  color: #ffffff !important;
}

.dashboard-root .text-amber-600,
.dashboard-root .text-amber-500 {
  color: var(--state-warning) !important;
}

.dashboard-root .bg-amber-50 {
  background-color: rgba(255, 160, 0, 0.12) !important;
}

.dashboard-root .text-emerald-600 {
  color: var(--state-success) !important;
}

.dashboard-root .bg-emerald-50 {
  background-color: rgba(40, 167, 69, 0.1) !important;
}

.dashboard-root .text-red-500 {
  color: var(--state-error) !important;
}

.dashboard-root .bg-red-50 {
  background-color: rgba(220, 53, 69, 0.1) !important;
}

.dashboard-root .bg-primary\/15 {
  background-color: rgba(191, 0, 0, 0.12) !important;
}

.dashboard-root .bg-cream {
  background-color: var(--bg-card-module) !important;
}

.dashboard-root button.bg-primary:hover {
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}

.dashboard-root .border-amber-200\/50 {
  border-color: rgba(255, 160, 0, 0.35) !important;
}

.dashboard-root .bg-orange-50 {
  background-color: rgba(255, 160, 0, 0.12) !important;
}

.dashboard-root .bg-violet-50 {
  background-color: rgba(48, 78, 96, 0.1) !important;
}

.dashboard-root .bg-blue-50 {
  background-color: rgba(48, 78, 96, 0.08) !important;
}

.dashboard-root .border-blue-100\/60 {
  border-color: rgba(48, 78, 96, 0.2) !important;
}

.dashboard-root .hover\:bg-blue-100\/90:hover {
  background-color: rgba(48, 78, 96, 0.14) !important;
}

/* 驾驶舱双栏 + 入场动效 */
.dashboard-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 33vw, 450px);
  gap: 24px;
  align-items: start;
}

@media (max-width: 1536px) {
  .dashboard-two-col {
    grid-template-columns: minmax(0, 1fr) clamp(350px, 31vw, 400px);
  }
}

@media (max-width: 1280px) {
  .dashboard-two-col {
    grid-template-columns: 1fr;
  }
}

.dashboard-col-side {
  position: sticky;
  top: 16px;
}

@media (max-width: 1280px) {
  .dashboard-col-side {
    position: static;
  }
}

.dashboard-metric-card {
  outline: none;
  transition:
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dashboard-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.dashboard-metric-card:focus-visible {
  box-shadow: 0 0 0 2px var(--bg-card-module), 0 0 0 4px rgba(191, 0, 0, 0.35);
}

.dashboard-metric-card--delay-0 { animation: dash-card-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.dashboard-metric-card--delay-1 { animation: dash-card-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both; }
.dashboard-metric-card--delay-2 { animation: dash-card-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both; }
.dashboard-metric-card--delay-3 { animation: dash-card-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both; }

@keyframes dash-card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-panel--enter {
  animation: dash-card-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.todo-expand-enter-active,
.todo-expand-leave-active {
  transition: max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
  overflow: hidden;
}
.todo-expand-enter-from,
.todo-expand-leave-to {
  max-height: 0;
  opacity: 0;
}
.todo-expand-enter-to,
.todo-expand-leave-from {
  max-height: 600px;
  opacity: 1;
}

.dashboard-panel {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dashboard-panel:focus-within,
.dashboard-panel:hover {
  box-shadow: var(--shadow-lg);
}

.dashboard-chart-host {
  min-height: 240px;
}

.dashboard-chart-range {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: #f3f4f6;
}

.dashboard-chart-range__btn {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dashboard-chart-range__btn:hover:not(:disabled) {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.05);
}

.dashboard-chart-range__btn.is-active {
  background: var(--brand-attila-red);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.dashboard-chart-range__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dashboard-soft-note {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(107, 114, 128, 0.88);
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.dashboard-soft-note--fallback {
  color: rgba(180, 83, 9, 0.92);
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.16);
}

.app-header .header-notify-btn {
  color: var(--text-on-dark-bg);
}

.app-header .header-notify-btn:hover {
  color: var(--text-on-dark-bg);
  background: rgba(240, 240, 240, 0.10) !important;
}

.app-header .header-notify-badge .el-badge__content.is-dot {
  top: 4px;
  right: 6px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--bg-sidebar-header-dark);
}

/*
 * 页面根节点：analytics / teacher-dashboard / teacher-management / messages
 * Tailwind 工具类 → 品牌变量（与 .courses-page 块对齐，但不修改课程页选择器）
 */
.analytics-page .text-gray-900,
.teacher-dashboard-page .text-gray-900,
.teacher-management-page .text-gray-900,
.messages-page .text-gray-900,
.live-schedule-page .text-gray-900,
.live-playback-page .text-gray-900 {
  color: var(--text-primary) !important;
}

.analytics-page .text-gray-800,
.teacher-management-page .text-gray-800,
.messages-page .text-slate-800,
.live-schedule-page .text-gray-800,
.live-playback-page .text-gray-800 {
  color: var(--text-primary) !important;
}

.analytics-page .text-gray-500,
.teacher-dashboard-page .text-gray-500,
.teacher-management-page .text-gray-500,
.messages-page .text-gray-500,
.live-schedule-page .text-gray-500,
.live-playback-page .text-gray-500 {
  color: var(--text-secondary) !important;
}

.analytics-page .text-gray-400,
.teacher-dashboard-page .text-gray-400,
.teacher-management-page .text-gray-400,
.messages-page .text-gray-400,
.live-schedule-page .text-gray-400,
.live-playback-page .text-gray-400 {
  color: var(--text-helper-disabled) !important;
}

.analytics-page .text-gray-300,
.teacher-dashboard-page .text-gray-300,
.teacher-management-page .text-gray-300,
.messages-page .text-gray-300,
.live-schedule-page .text-gray-300,
.live-playback-page .text-gray-300 {
  color: var(--border-divider) !important;
}

.analytics-page .text-ink,
.teacher-dashboard-page .text-ink,
.teacher-management-page .text-ink,
.messages-page .text-ink,
.messages-page .text-ink\/80,
.live-schedule-page .text-ink,
.live-playback-page .text-ink,
.live-playback-page .text-ink\/80,
.live-schedule-page .text-ink\/80 {
  color: var(--text-primary) !important;
}

.analytics-page .bg-cream,
.teacher-dashboard-page .bg-cream,
.teacher-management-page .bg-cream,
.messages-page .bg-cream,
.live-schedule-page .bg-cream,
.live-playback-page .bg-cream {
  background-color: var(--bg-card-module) !important;
}

.analytics-page .bg-warm-surface,
.teacher-dashboard-page .bg-warm-surface,
.teacher-management-page .bg-warm-surface,
.live-schedule-page .bg-warm-surface,
.live-playback-page .bg-warm-surface {
  background-color: var(--bg-surface) !important;
}

.analytics-page .bg-yellow-400,
.teacher-dashboard-page .bg-yellow-400,
.teacher-management-page .bg-yellow-400 {
  background-color: var(--brand-attila-red) !important;
  color: #ffffff !important;
}

.analytics-page .hover\:bg-yellow-500:hover,
.teacher-dashboard-page .hover\:bg-yellow-500:hover,
.teacher-management-page .hover\:bg-yellow-500:hover {
  background-color: var(--accent-hover) !important;
  color: #ffffff !important;
}

.analytics-page .shadow-yellow-300\/40,
.teacher-dashboard-page .shadow-yellow-300\/40 {
  --tw-shadow-color: rgba(191, 0, 0, 0.35) !important;
}

.analytics-page .text-yellow-400,
.teacher-dashboard-page .text-yellow-400,
.teacher-management-page .text-yellow-400 {
  color: var(--brand-attila-red) !important;
}

.analytics-page .hover\:bg-yellow-300:hover,
.teacher-dashboard-page .hover\:bg-yellow-300:hover {
  background-color: var(--accent-hover) !important;
  color: #ffffff !important;
}

.analytics-page .focus-visible\:ring-yellow-300:focus-visible,
.teacher-dashboard-page .focus-visible\:ring-yellow-300:focus-visible {
  --tw-ring-color: rgba(191, 0, 0, 0.45) !important;
}

.analytics-page .focus-visible\:ring-offset-slate-900:focus-visible,
.teacher-dashboard-page .focus-visible\:ring-offset-slate-900:focus-visible {
  --tw-ring-offset-color: var(--auxiliary-deep-sea-blue) !important;
}

.analytics-page .ring-yellow-300,
.teacher-management-page .ring-yellow-300 {
  --tw-ring-color: rgba(191, 0, 0, 0.4) !important;
}

.analytics-page .focus\:ring-yellow-300:focus,
.teacher-management-page .focus\:ring-yellow-300:focus {
  --tw-ring-color: rgba(191, 0, 0, 0.4) !important;
}

.analytics-page .focus\:border-yellow-400:focus,
.teacher-management-page .focus\:border-yellow-400:focus {
  border-color: rgba(191, 0, 0, 0.55) !important;
}

.analytics-page .text-green-500 {
  color: var(--state-success) !important;
}

.analytics-page .text-red-500 {
  color: var(--state-error) !important;
}

.analytics-page .text-emerald-600,
.analytics-page .text-emerald-500,
.analytics-page .text-emerald-400,
.teacher-dashboard-page .text-emerald-600,
.teacher-dashboard-page .text-emerald-500,
.teacher-dashboard-page .text-emerald-400,
.teacher-management-page .text-emerald-600,
.messages-page .text-emerald-600,
.messages-page .text-emerald-500 {
  color: var(--state-success) !important;
}

.analytics-page .bg-emerald-50,
.teacher-dashboard-page .bg-emerald-50,
.teacher-management-page .bg-emerald-50,
.messages-page .bg-emerald-50 {
  background-color: rgba(40, 167, 69, 0.1) !important;
}

.analytics-page .text-amber-500,
.analytics-page .text-amber-600,
.analytics-page .text-amber-700,
.teacher-dashboard-page .text-amber-500,
.teacher-dashboard-page .text-amber-600,
.teacher-dashboard-page .text-amber-700,
.teacher-dashboard-page .text-amber-200,
.teacher-dashboard-page .text-amber-300,
.teacher-management-page .text-amber-700,
.teacher-management-page .text-amber-600,
.messages-page .text-amber-500,
.messages-page .text-amber-600 {
  color: var(--state-warning) !important;
}

.messages-page .bg-ink {
  background-color: var(--auxiliary-deep-sea-blue) !important;
}

.messages-page .bg-ink.text-amber-200 {
  color: #ffe0a3 !important;
}

.analytics-page .bg-amber-50,
.teacher-dashboard-page .bg-amber-50,
.teacher-management-page .bg-amber-50,
.messages-page .bg-amber-50 {
  background-color: rgba(255, 160, 0, 0.12) !important;
}

.analytics-page .text-rose-500,
.teacher-dashboard-page .text-rose-500,
.teacher-management-page .text-rose-500,
.messages-page .text-rose-500 {
  color: var(--state-error) !important;
}

.analytics-page .bg-rose-50,
.teacher-dashboard-page .bg-rose-50,
.teacher-management-page .bg-rose-50,
.messages-page .bg-rose-50 {
  background-color: rgba(220, 53, 69, 0.08) !important;
}

.analytics-page .border-rose-50,
.teacher-dashboard-page .border-rose-50,
.messages-page .border-rose-100 {
  border-color: rgba(220, 53, 69, 0.12) !important;
}

.analytics-page .hover\:border-rose-200:hover,
.teacher-dashboard-page .hover\:border-rose-200:hover,
.messages-page .hover\:border-rose-100:hover {
  border-color: rgba(220, 53, 69, 0.28) !important;
}

.analytics-page .hover\:bg-rose-50:hover,
.teacher-dashboard-page .hover\:bg-rose-50:hover,
.messages-page .hover\:bg-rose-50:hover {
  background-color: rgba(220, 53, 69, 0.08) !important;
}

.analytics-page .bg-rose-500,
.teacher-dashboard-page .bg-rose-500,
.messages-page .bg-rose-500 {
  background-color: var(--state-error) !important;
}

.analytics-page .text-rose-500\/80,
.teacher-dashboard-page .text-rose-500\/80 {
  color: rgba(220, 53, 69, 0.88) !important;
}

.analytics-page .text-indigo-500,
.teacher-management-page .text-indigo-700 {
  color: var(--auxiliary-deep-sea-blue) !important;
}

.analytics-page .bg-indigo-500 {
  background-color: var(--auxiliary-deep-sea-blue) !important;
}

.teacher-management-page .bg-indigo-50 {
  background-color: rgba(48, 78, 96, 0.08) !important;
}

.teacher-management-page .text-indigo-700 {
  color: var(--auxiliary-deep-sea-blue) !important;
}

.teacher-management-page .ring-indigo-200\/60 {
  --tw-ring-color: rgba(48, 78, 96, 0.22) !important;
}

.analytics-page .border-gray-200,
.teacher-management-page .border-gray-200 {
  border-color: var(--border-divider) !important;
}

.teacher-management-page nav .border-black {
  border-color: var(--brand-attila-red) !important;
}

.analytics-page .border-t-yellow-400,
.teacher-management-page .border-t-yellow-400 {
  border-top-color: var(--brand-attila-red) !important;
}

.teacher-management-page .hover\:bg-yellow-50\/40:hover {
  background-color: rgba(191, 0, 0, 0.06) !important;
}

.teacher-management-page .text-red-600,
.teacher-management-page .text-red-500,
.teacher-management-page .hover\:text-red-700:hover {
  color: var(--state-error) !important;
}

.teacher-management-page .ring-red-200 {
  --tw-ring-color: rgba(220, 53, 69, 0.35) !important;
}

.teacher-management-page .hover\:bg-red-50:hover {
  background-color: rgba(220, 53, 69, 0.08) !important;
}

.teacher-management-page .text-emerald-600 {
  color: var(--state-success) !important;
}

.teacher-management-page .ring-emerald-200 {
  --tw-ring-color: rgba(40, 167, 69, 0.35) !important;
}

.teacher-management-page .hover\:bg-emerald-50:hover {
  background-color: rgba(40, 167, 69, 0.08) !important;
}

.teacher-management-page .text-green-500,
.teacher-management-page .text-green-700 {
  color: var(--state-success) !important;
}

.teacher-management-page .bg-green-50 {
  background-color: rgba(40, 167, 69, 0.1) !important;
}

.teacher-management-page .bg-red-50 {
  background-color: rgba(220, 53, 69, 0.1) !important;
}

.teacher-management-page .bg-orange-50 {
  background-color: rgba(255, 160, 0, 0.12) !important;
}

.teacher-management-page .text-orange-700 {
  color: var(--state-warning) !important;
}

.teacher-management-page .ring-orange-200 {
  --tw-ring-color: rgba(255, 160, 0, 0.35) !important;
}

.teacher-management-page .bg-blue-50 {
  background-color: rgba(48, 78, 96, 0.08) !important;
}

.teacher-management-page .text-blue-700 {
  color: var(--auxiliary-deep-sea-blue) !important;
}

.teacher-management-page .ring-blue-200 {
  --tw-ring-color: rgba(48, 78, 96, 0.22) !important;
}

.teacher-management-page .bg-amber-50 {
  background-color: rgba(255, 160, 0, 0.12) !important;
}

.teacher-management-page .text-amber-700 {
  color: var(--state-warning) !important;
}

.teacher-management-page .ring-amber-200 {
  --tw-ring-color: rgba(255, 160, 0, 0.4) !important;
}

.teacher-management-page .ring-green-200 {
  --tw-ring-color: rgba(40, 167, 69, 0.35) !important;
}

.teacher-management-page .text-red-500 {
  color: var(--state-error) !important;
}

.teacher-management-page .bg-red-500 {
  background-color: var(--state-error) !important;
}

.teacher-management-page .hover\:bg-gray-50:hover,
.analytics-page .hover\:bg-gray-200:hover {
  background-color: var(--bg-surface) !important;
}

.teacher-management-page .hover\:text-gray-900:hover,
.analytics-page .hover\:text-gray-700:hover {
  color: var(--text-primary) !important;
}

.teacher-management-page .bg-gray-900,
.teacher-management-page .hover\:bg-gray-800:hover {
  background-color: var(--auxiliary-deep-sea-blue) !important;
  color: var(--text-on-dark-bg) !important;
}

.teacher-management-page .ring-\[rgba\(200\,180\,140\,0\.12\)\],
.analytics-page .ring-\[rgba\(200\,180\,140\,0\.12\)\] {
  --tw-ring-color: rgba(48, 78, 96, 0.12) !important;
}

.teacher-management-page .ring-yellow-400,
.teacher-management-page .hover\:ring-yellow-300:hover {
  --tw-ring-color: rgba(191, 0, 0, 0.35) !important;
}

.teacher-management-page .bg-yellow-50\/60 {
  background-color: rgba(191, 0, 0, 0.08) !important;
}

.teacher-management-page .hover\:bg-yellow-50\/40:hover {
  background-color: rgba(191, 0, 0, 0.06) !important;
}

.teacher-management-page .text-yellow-500 {
  color: var(--brand-attila-red) !important;
}

.teacher-management-page .focus\:ring-yellow-400:focus {
  --tw-ring-color: rgba(191, 0, 0, 0.4) !important;
}

.teacher-management-page .bg-red-500,
.teacher-management-page .hover\:bg-red-600:hover {
  background-color: var(--state-error) !important;
  color: #ffffff !important;
}

/* --- 老师工作台：深色 Hero 用深海蓝壳 + 光晕 --- */
.teacher-dashboard-page .bg-ink {
  background-color: var(--auxiliary-deep-sea-blue) !important;
}

.teacher-dashboard-page .bg-ink\/95 {
  background-color: rgba(48, 78, 96, 0.95) !important;
}

.teacher-dashboard-page .bg-ink\/90 {
  background-color: rgba(48, 78, 96, 0.9) !important;
}

.teacher-dashboard-page .bg-ink\/80 {
  background-color: rgba(48, 78, 96, 0.82) !important;
}

.teacher-dashboard-page .bg-ink\/10 {
  background-color: rgba(48, 78, 96, 0.12) !important;
}

.teacher-dashboard-page .teacher-hero-glow {
  background: linear-gradient(to bottom right, rgba(191, 0, 0, 0.14), rgba(48, 78, 96, 0.22), rgba(48, 78, 96, 0.06));
}

.teacher-dashboard-page .text-sky-300 {
  color: #9ecae8 !important;
}

.teacher-dashboard-page .hover\:bg-primary\/10:hover {
  background-color: var(--accent-light) !important;
}

/* --- 消息与触达 messages.js --- */
.messages-page .bg-blue-50 {
  background-color: rgba(48, 78, 96, 0.08) !important;
}

.messages-page .text-blue-900,
.messages-page .text-blue-500,
.messages-page .text-blue-600 {
  color: var(--auxiliary-deep-sea-blue) !important;
}

.messages-page .border-blue-100 {
  border-color: rgba(48, 78, 96, 0.15) !important;
}

.messages-page .bg-\[\#FFF6F6\] {
  background-color: rgba(220, 53, 69, 0.06) !important;
}

.messages-page .bg-\[\#F4FBF6\] {
  background-color: rgba(40, 167, 69, 0.08) !important;
}

.messages-page .bg-\[\#FFF7CC\] {
  background-color: rgba(255, 160, 0, 0.22) !important;
}

.messages-page .border-emerald-100 {
  border-color: rgba(40, 167, 69, 0.2) !important;
}

.messages-page .hover\:bg-emerald-50:hover {
  background-color: rgba(40, 167, 69, 0.08) !important;
}

.messages-page .text-red-600 {
  color: var(--state-error) !important;
}

.messages-page .bg-red-50 {
  background-color: rgba(220, 53, 69, 0.08) !important;
}

.messages-page .el-card {
  background: var(--bg-card-module) !important;
  border: 1px solid rgba(48, 78, 96, 0.08) !important;
  border-radius: var(--radius-sm) !important;
}

.messages-page .el-card__header {
  border-bottom-color: rgba(48, 78, 96, 0.08) !important;
}

.messages-page .feedback-table .el-table__header th {
  background: rgba(48, 78, 96, 0.06) !important;
}

.messages-page .feedback-table .el-table__row:hover > td {
  background: rgba(191, 0, 0, 0.04) !important;
}

/* 数据看板 analytics.js：表格与分页区域 */
.analytics-page .el-table__header th {
  background: rgba(48, 78, 96, 0.06) !important;
}

.analytics-page .el-table__row:hover > td {
  background: rgba(191, 0, 0, 0.04) !important;
}

.analytics-page .el-table {
  --el-table-border-color: rgba(48, 78, 96, 0.1);
}

.analytics-page .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--brand-attila-red) inset !important;
}

.dark-card {
  background: var(--bg-dark-card) !important;
  color: var(--text-on-dark) !important;
  border: none !important;
}

.dark-card * {
  color: var(--text-on-dark);
}

.dark-card .text-muted-on-dark {
  color: rgba(255, 255, 255, 0.5);
}

.warm-accent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 6px var(--accent-glow);
}

/* -- Left-Top: Quick Nav -- */
.quick-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quick-nav-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
}

.quick-nav-row:hover {
  background: var(--bg-surface);
}

.quick-nav-row .nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-nav-row .nav-icon svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: color 0.25s cubic-bezier(.22, .61, .36, 1);
}

.quick-nav-row:hover .nav-icon svg {
  color: var(--accent-hover);
}

.quick-nav-row .nav-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.quick-nav-row .nav-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
}

.quick-nav-row .nav-chevron svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: color 0.25s cubic-bezier(.22, .61, .36, 1);
}

.quick-nav-row:hover .nav-chevron {
  transform: translateX(3px);
}

.quick-nav-row:hover .nav-chevron svg {
  color: var(--accent-hover);
}

/* -- Left-Bottom: Traffic Chart -- */
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.chart-toggle {
  display: flex;
  gap: 0;
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.chart-toggle-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s;
}

.chart-toggle-btn.active {
  background: var(--accent);
  color: var(--text-on-dark-bg);
  box-shadow: 0 2px 8px var(--accent-glow);
}

.chart-toggle-btn:hover:not(.active) {
  color: var(--text-primary);
}

.chart-container {
  width: 100%;
  height: 260px;
  min-height: 200px;
}

/* -- Right-Top: System Status -- */
.status-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.status-row:last-child {
  border-bottom: none;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.green {
  background: var(--success);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.status-dot.orange {
  background: var(--warning);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  animation: pulse 1.5s infinite;
}

.status-dot.red {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.status-info .status-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.status-info .status-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

.status-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: none;
}

.status-tag.tag-green {
  background: var(--state-success);
  color: #ffffff;
}

.status-tag.tag-orange {
  background: var(--state-warning);
  color: #ffffff;
}

.status-tag.tag-red {
  background: var(--state-error);
  color: #ffffff;
}

/* -- Right-Bottom: Stats Grid + Announcements -- */
.stats-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stats-mini-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
  border: none;
  box-shadow: var(--shadow-sm);
}

.stats-mini-card:hover {
  background: var(--bg-card);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.stats-mini-card.is-error {
  cursor: default;
  transform: none;
  outline: 2px solid rgba(239, 68, 68, 0.15);
}

.stats-mini-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}

.stats-mini-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.stats-mini-accent-bar {
  width: 28px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-top: 10px;
}

.stats-loading-indicator {
  color: var(--accent);
  font-size: 24px;
  display: inline-flex;
  align-items: center;
}

.stats-loading-indicator .is-loading {
  animation: stats-spin 1s linear infinite;
}

@keyframes stats-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.stats-error-value {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 28px;
}

.stats-retry .el-link {
  font-size: 12px;
}

.stats-retry .el-icon {
  margin-right: 2px;
}

/* Announcement inline block */
.ann-inline {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  border: none;
  box-shadow: var(--shadow-inset);
}

.ann-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ann-inline-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.ann-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}

.ann-list-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ann-list-compact .ann-compact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: 12px;
  transition: box-shadow 0.2s;
}

.ann-list-compact .ann-compact-item:hover {
  box-shadow: var(--shadow-sm);
}

.ann-compact-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-compact-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Keep old ann-section styles for dialogs that may reference them */
.ann-section {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
}

.ann-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ann-section-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.ann-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ann-item {
  padding: 20px 24px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: none;
  transition: box-shadow 0.2s, transform 0.2s;
}

.ann-item:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.ann-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ann-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.ann-sticky-tag {
  flex-shrink: 0;
}

.ann-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ann-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.ann-meta .el-link {
  font-size: 12px;
  margin-left: auto;
}

.ann-meta .el-link + .el-link {
  margin-left: 0;
}

/* ======== Hotword Tags ======== */
.hotword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hotword-tag {
  cursor: default;
}

.hotword-input {
  width: 120px;
}

/* ======== Report Result ======== */
.report-result {
  margin-top: 20px;
  padding: 20px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.report-summary {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.report-summary b {
  color: var(--text-primary);
  font-weight: 700;
  margin-left: 4px;
}

/* ======== Module Grid (legacy, kept for non-dashboard pages) ======== */
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.module-card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.module-card:hover::before {
  opacity: 1;
}

.module-card-corner {
  display: none;
}

.module-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.module-card-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.module-action-btn {
  flex-shrink: 0;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: var(--accent);
  color: var(--text-on-dark-bg);
  transition: all var(--transition);
  white-space: nowrap;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.module-action-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 20px rgba(191, 0, 0, 0.25);
  transform: translateY(-1px);
}

.module-action-btn.is-disabled {
  background: var(--bg-surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.module-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-item {
  padding: 10px 16px;
  background: var(--bg-surface);
  border-radius: 12px;
  border: none;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.2s;
  position: relative;
  padding-left: 28px;
}

.module-item::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  transition: opacity 0.2s;
}

.module-item:hover {
  background: var(--accent-light);
  color: var(--text-primary);
}

.module-item:hover::before {
  opacity: 1;
}

/* ======== Course Management V2 ======== */
.courses-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 课程页：Tab 已提升到 GlobalPageHeader，内容区内部 tabs 仅负责 pane 切换 */
.courses-page .courses-page-content-tabs > .el-tabs__header {
  display: none !important;
}

.courses-page .courses-page-content-tabs,
.courses-page .courses-page-content-tabs > .el-tabs__content,
.courses-page .courses-page-content-tabs .el-tab-pane {
  min-height: 0;
  flex: 1;
}

/* 课程管理 / 直播管理：模块顶栏 Tab 统一（居中、浅底边、品牌色粗下划线、激活项深色加粗字） */
/* 课程页：不要用 flex:1 撑满 + wrap，否则在部分环境下页签栏会被排到内容下方 */
.courses-page .courses-module-tabs.el-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.courses-page .courses-module-tabs.el-tabs.admin-list-header-tabs {
  justify-content: flex-start;
}

.live-schedule-page .live-module-tabs.el-tabs,
.live-console-page .live-module-tabs.el-tabs,
.live-playback-page .live-module-tabs.el-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.live-schedule-page .live-module-tabs.el-tabs.admin-list-header-tabs,
.live-console-page .live-module-tabs.el-tabs.admin-list-header-tabs,
.live-playback-page .live-module-tabs.el-tabs.admin-list-header-tabs {
  justify-content: flex-start;
}

.courses-page .courses-module-tabs > .el-tabs__content {
  flex: 0 1 auto;
  min-width: 0;
}

.courses-page .courses-module-tabs > .el-tabs__header,
.live-schedule-page .live-module-tabs > .el-tabs__header,
.live-console-page .live-module-tabs > .el-tabs__header,
.live-playback-page .live-module-tabs > .el-tabs__header {
  margin: 0 0 18px;
  /* 页签栏固定在内容区之上（避免 flex + wrap 与 EP 结构导致栏沉底） */
  order: -1;
  flex-shrink: 0;
}

.courses-page .courses-module-tabs .el-tabs__nav-wrap,
.live-schedule-page .live-module-tabs .el-tabs__nav-wrap,
.live-console-page .live-module-tabs .el-tabs__nav-wrap,
.live-playback-page .live-module-tabs .el-tabs__nav-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.courses-page .courses-module-tabs .el-tabs__nav-scroll,
.live-schedule-page .live-module-tabs .el-tabs__nav-scroll,
.live-console-page .live-module-tabs .el-tabs__nav-scroll,
.live-playback-page .live-module-tabs .el-tabs__nav-scroll {
  flex: 0 1 auto;
  min-width: 0;
}

.courses-page .courses-module-tabs .el-tabs__nav,
.live-schedule-page .live-module-tabs .el-tabs__nav,
.live-console-page .live-module-tabs .el-tabs__nav,
.live-playback-page .live-module-tabs .el-tabs__nav {
  float: none;
  display: flex;
}

.courses-page .courses-module-tabs .el-tabs__item,
.live-schedule-page .live-module-tabs .el-tabs__item,
.live-console-page .live-module-tabs .el-tabs__item,
.live-playback-page .live-module-tabs .el-tabs__item {
  padding: 0 28px;
  height: 46px;
  line-height: 46px;
  font-size: 15px;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}

.courses-page .courses-module-tabs .el-tabs__item:hover,
.live-schedule-page .live-module-tabs .el-tabs__item:hover,
.live-console-page .live-module-tabs .el-tabs__item:hover,
.live-playback-page .live-module-tabs .el-tabs__item:hover {
  color: var(--text-primary) !important;
}

.courses-page .courses-module-tabs .el-tabs__item.is-active,
.live-schedule-page .live-module-tabs .el-tabs__item.is-active,
.live-console-page .live-module-tabs .el-tabs__item.is-active,
.live-playback-page .live-module-tabs .el-tabs__item.is-active {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

.courses-page .courses-module-tabs .el-tabs__active-bar,
.live-schedule-page .live-module-tabs .el-tabs__active-bar,
.live-console-page .live-module-tabs .el-tabs__active-bar,
.live-playback-page .live-module-tabs .el-tabs__active-bar {
  height: 3px !important;
  border-radius: 2px;
  background-color: var(--accent) !important;
}

.courses-page .courses-module-tabs .el-tabs__nav-wrap::after,
.live-schedule-page .live-module-tabs .el-tabs__nav-wrap::after,
.live-console-page .live-module-tabs .el-tabs__nav-wrap::after,
.live-playback-page .live-module-tabs .el-tabs__nav-wrap::after {
  background-color: rgba(15, 23, 42, 0.08) !important;
  height: 1px !important;
}

.courses-header {
  margin-bottom: 16px;
}

.courses-header .courses-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.manage-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  height: calc(100vh - 220px);
  min-width: 0;
}

/* -- Left Sidebar -- */
.course-sidebar {
  border-radius: 20px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.sidebar-top h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.course-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.search-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.search-filter-row .search-input {
  flex: 1;
}

.search-filter-row .filter-select {
  width: 90px;
  flex-shrink: 0;
}

.add-course-btn {
  width: 100%;
  padding: 10px 0;
  background: var(--accent);
  color: var(--text-on-dark-bg);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 10px;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.add-course-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}

.course-list-scroll {
  flex: 1;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 2px;
}

.course-card-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 2px;
}

.course-card-v2:hover {
  background: rgba(48, 78, 96, 0.06);
}

.course-card-v2.active {
  background: var(--accent-light);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.course-card-cover {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.course-card-v2.active .course-card-cover {
  background: rgba(191, 0, 0, 0.08);
}

.course-card-info {
  flex: 1;
  min-width: 0;
}

.course-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* -- Status Badges -- */
.status-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.status-badge-lg {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

.badge-published {
  background: var(--state-success);
  color: #ffffff;
}

.badge-draft {
  background: rgba(102, 102, 102, 0.12);
  color: var(--text-secondary);
}

.badge-taken-down {
  background: var(--state-error);
  color: #ffffff;
}

.badge-pending-review {
  background: var(--state-warning);
  color: #ffffff;
}

.badge-rejected {
  background: var(--state-error);
  color: #ffffff;
}

.loading-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.empty-hint {
  text-align: center;
  padding: 20px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* -- Right Content -- */
.course-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-width: 0;
}

/* -- Detail Card -- */
.detail-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 20px;
  box-shadow: var(--shadow-sm);
  border: none;
}

.detail-card-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.detail-card-left {
  flex: 1;
  min-width: 280px;
}

.detail-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.detail-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 6px;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.tag-badge {
  display: inline-block;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
}

.biz-stats {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border-radius: 14px;
  padding: 10px 6px;
  min-width: 0;
  flex-shrink: 0;
}

.biz-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 12px;
  min-width: 0;
}

.biz-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.biz-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
}

.biz-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border-divider);
  flex-shrink: 0;
}

/* -- Detail Actions -- */
.detail-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  align-items: stretch;
}

.action-btn-outline {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border-divider);
  border-radius: 10px;
  background: transparent;
  color: var(--auxiliary-deep-sea-blue);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-btn-outline:hover {
  border-color: var(--auxiliary-deep-sea-blue);
  background: rgba(48, 78, 96, 0.08);
}

.action-btn-danger-text {
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--state-error);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s;
  text-align: center;
  margin-top: 4px;
}

.action-btn-danger-text:hover {
  opacity: 1;
}

/* -- Chapter Tree -- */
.chapter-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.chapter-tree-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.chapter-empty {
  text-align: center;
  padding: 36px 0;
}

.chapter-empty p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.chapter-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chapter-accordion {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.chapter-acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: background 0.15s;
  gap: 8px;
  user-select: none;
}

.chapter-acc-header:hover {
  background: var(--bg-surface-2);
}

.chapter-acc-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.drag-handle {
  color: var(--text-muted);
  font-size: 12px;
  cursor: grab;
  user-select: none;
  letter-spacing: 1px;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.15s;
  font-weight: 700;
}

.chapter-acc-header:hover .drag-handle,
.lesson-acc-item:hover .drag-handle {
  opacity: 0.7;
}

.drag-handle-sm {
  font-size: 10px;
}

.chapter-acc-arrow {
  transition: transform 0.2s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}

.chapter-acc-arrow.expanded {
  transform: rotate(90deg);
}

.chapter-acc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chapter-lesson-count {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: 500;
}

.chapter-acc-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}

.icon-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.icon-btn.icon-btn-danger:hover {
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444;
}

/* -- Chapter Accordion Body (Lessons) -- */
.chapter-acc-body {
  background: var(--bg-card);
  padding: 2px 6px 6px;
}

.lesson-acc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px 22px;
  border-radius: 10px;
  transition: background 0.12s;
  gap: 8px;
}

.lesson-acc-item:hover {
  background: var(--bg-surface);
}

.lesson-acc-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.lesson-type-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.lesson-acc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-acc-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.lesson-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}

.lesson-tag-free {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.lesson-tag-success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.lesson-tag-warn {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.lesson-hover-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
}

.lesson-acc-item:hover .lesson-hover-actions {
  opacity: 1;
}

.icon-btn-sm {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  padding: 0;
}

.icon-btn-sm:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.icon-btn-sm.icon-btn-danger:hover {
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444;
}

.lesson-empty {
  text-align: center;
  padding: 14px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.lesson-empty b {
  color: var(--text-secondary);
}

/* ======== Question Management ======== */
.questions-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 题库与作业：Tab 已提升到 GlobalPageHeader，内容区内部的 el-tabs 仅负责 pane 切换 */
.questions-page .questions-page-content-tabs > .el-tabs__header {
  display: none !important;
}

.questions-page .questions-page-content-tabs,
.questions-page .questions-page-content-tabs > .el-tabs__content,
.questions-page .questions-page-content-tabs .el-tab-pane {
  min-height: 0;
  flex: 1;
}

.questions-page .questions-page-content-tabs,
.questions-page .questions-page-content-tabs > .el-tabs__content,
.questions-page .questions-page-content-tabs .el-tab-pane {
  display: flex;
  flex-direction: column;
}

.questions-page .manage-container {
  height: auto;
  flex: 1;
  min-height: 0;
}

.question-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.question-sidebar {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.question-sidebar h3 {
  font-size: 16px;
  font-weight: 700;
}

.nav-sector {
  background: var(--bg-surface);
  border: none;
  border-radius: 14px;
  overflow: hidden;
}

.nav-sector-row {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.2s;
}

.nav-sector-row:hover {
  background: var(--accent-light);
}

.nav-subject {
  margin: 4px 8px;
  padding: 10px 14px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.nav-subject:hover {
  background: var(--accent-light);
}

.nav-subject.active {
  background: var(--accent-light);
  color: var(--accent-hover);
  font-weight: 600;
}

.nav-type {
  margin: 2px 8px 2px 24px;
  padding: 8px 14px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-hover);
  transition: all 0.2s;
}

.nav-type:hover {
  background: var(--accent-light);
}

.nav-type.active {
  background: rgba(191, 0, 0, 0.10);
  color: var(--accent-hover);
}

.question-list-item {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.15s;
}

.question-list-item:last-child {
  border-bottom: none;
}

.question-list-item:hover {
  background: var(--accent-light);
}

.question-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  min-width: 0;
}

.question-detail-card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.question-detail-card h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 14px;
}

.option-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: none;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 13px;
}

.option-label {
  font-weight: 700;
  color: var(--accent-hover);
  flex-shrink: 0;
}

.answer-row {
  padding: 14px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
  margin-top: 10px;
}

/* ======== Teacher Dashboard ======== */
.teacher-hero {
  background: var(--bg-dark-card);
  border: none;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-xl);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.teacher-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(191, 0, 0, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.teacher-hero .chip {
  display: inline-block;
  font-size: 12px;
  color: var(--accent);
  background: rgba(191, 0, 0, 0.08);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
  font-weight: 600;
}

.teacher-hero h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.teacher-hero .meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.teacher-panel {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
}

.teacher-panel h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.teacher-panel .sub {
  color: var(--text-secondary);
  font-size: 12px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.overview-item {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 18px;
  border: none;
}

.overview-item .value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.overview-item .label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.insight-item {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 18px;
  border: none;
  text-align: center;
}

.insight-item .value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.insight-item .label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 6px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: var(--radius-pill);
  transition: width 0.6s ease;
}

/* ---- Teacher Loading Skeleton ---- */
.teacher-loading {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.skeleton-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px !important;
}

.skeleton-line {
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-2) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-line.w40 { width: 40%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w80 { width: 80%; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.teacher-error-state {
  margin-top: 28px;
}

/* ---- Teacher Card Items ---- */
.live-card,
.course-card-item,
.task-card-item {
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: none;
  margin-bottom: 10px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.live-card:hover,
.course-card-item:hover,
.task-card-item:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.panel-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* ---- Teacher Overview Alert ---- */
.overview-item.has-alert {
  outline: 2px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.06);
}

.overview-item.has-alert .value {
  color: var(--warning);
}

/* ---- Teacher Insights 5-Column Grid ---- */
.insight-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
  .insight-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .insight-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Teacher Insight Progress Bar ---- */
.insight-progress-section {
  margin-top: 4px;
}

.insight-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.insight-progress-pct {
  font-weight: 700;
  color: var(--accent-hover);
}

/* ---- Teacher Score Distribution ---- */
.score-distribution {
  margin-top: 10px;
  padding: 20px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: none;
}

.dist-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dist-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dist-label {
  font-size: 12px;
  color: var(--text-secondary);
  width: 100px;
  flex-shrink: 0;
  text-align: right;
}

.dist-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.dist-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.6s ease;
  min-width: 2px;
}

.dist-count {
  font-size: 12px;
  color: var(--text-muted);
  width: 50px;
  flex-shrink: 0;
}

/* ---- Teacher Live Result Dialog ---- */
.live-result-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.live-result-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.live-result-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.live-result-value {
  font-size: 14px;
  color: var(--text-primary);
}

.live-result-tip {
  margin-top: 6px;
  padding: 14px 18px;
  background: var(--accent-light);
  border: none;
  border-radius: 14px;
  font-size: 12px;
  color: var(--accent-hover);
  line-height: 1.7;
}

/* ---- Teacher Report Dialog ---- */
.teacher-report-result {
  margin-top: 20px;
  padding: 24px;
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-sm);
}

.teacher-report-result h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

.teacher-report-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.teacher-report-stat {
  background: var(--bg-card);
  border: none;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.teacher-report-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.teacher-report-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.teacher-report-download {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--accent-light);
  border: none;
  border-radius: 14px;
}

.teacher-report-download .el-link {
  font-weight: 600;
}

.teacher-report-hint {
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .teacher-report-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Teacher Clickable Task Card ---- */
.task-card-item.is-clickable {
  cursor: pointer;
}

.task-card-item.is-clickable:hover {
  background: var(--accent-light);
}

/* ---- Teacher Grading Dialog ---- */
.grading-dialog .el-dialog__body {
  padding: 0 !important;
  height: calc(100vh - 55px);
  overflow: hidden;
}

.grading-loading,
.grading-error {
  padding: 40px 24px;
}

.grading-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grading-info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 18px 28px;
  background: var(--bg-surface);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.grading-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.grading-info-label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
}

.grading-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  flex: 1;
  min-height: 0;
}

.grading-questions {
  padding: 24px 28px;
  overflow-y: auto;
}

.grading-question-card {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-sm);
  padding: 24px;
  margin-bottom: 18px;
}

.grading-q-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.grading-q-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-hover);
}

.grading-q-score {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.grading-q-title {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.grading-q-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.grading-q-option {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: none;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}

.grading-q-option-label {
  font-weight: 700;
  color: var(--accent-hover);
  flex-shrink: 0;
}

.grading-student-answer {
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(245, 158, 11, 0.06);
  border: none;
  border-radius: 14px;
}

.grading-sa-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--warning);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.grading-sa-content {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.grading-ref-answer {
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(34, 197, 94, 0.06);
  border: none;
  border-radius: 14px;
}

.grading-ra-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.grading-ra-content {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.grading-ra-analysis {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(34, 197, 94, 0.2);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

.grading-form-panel {
  padding: 24px 28px;
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  background: var(--bg-card);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.grading-form-panel h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 18px;
}

.grading-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

@media (max-width: 900px) {
  .grading-layout {
    grid-template-columns: 1fr;
  }

  .grading-form-panel {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }
}

/* ======== Content Card (used by users/orders/moderation pages) ======== */
.content-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  min-width: 0;
  border: none;
}

.content-card table {
  min-width: 600px;
}

/* ======== General page-level overflow containment ======== */
.users-page,
.orders-page,
.moderation-page {
  min-width: 0;
  overflow-x: hidden;
}

.summary-card {
  flex: 1;
  min-width: 0;
}

.summary-card > div {
  min-width: 120px;
}

/* Responsive: summary cards wrap on narrow screens */
@media (max-width: 900px) {
  .orders-page > div:nth-child(2),
  .moderation-page > div:nth-child(2) {
    flex-wrap: wrap;
  }
}

/* ======== Common Card / Empty ======== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  border: none;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-inset);
}

.empty-state .icon {
  font-size: 48px;
  margin-bottom: 14px;
  opacity: 0.4;
}

/* ======== Unified Admin List Kit ======== */
.users-page,
.orders-page,
.moderation-page,
.messages-page,
.analytics-page,
.questions-page {
  min-width: 0;
}

.admin-list-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.admin-list-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-list-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-list-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.admin-list-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-list-header-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* 把 AdminListPageHeader 的字号也同步到 GPH token，保证未迁移页面也跟着统一 */
.admin-list-subtitle {
  font-size: var(--gph-desc-size);
  color: var(--gph-desc-color);
  line-height: var(--gph-desc-line-height);
}

/* ======================================================
   Global Page Header（统一页面头部组件）
   —— 与 .admin-list-header 共存；新页面优先使用本组件。
   ====================================================== */
.global-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--gph-block-gap);
  margin-bottom: var(--gph-bottom-spacing);
}

.global-page-header.is-bordered {
  padding-bottom: 0;
}

.global-page-header__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gph-section-gap);
  flex-wrap: wrap;
}

.global-page-header__main--actions-only {
  justify-content: flex-end;
}

.global-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gph-action-gap);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.global-page-header__actions .el-button + .el-button {
  margin-left: 0;
}

.global-page-header__tabs {
  width: 100%;
  margin-top: 4px;
}

/* —— Tab 栏样式：与“直播管理”页面看齐（居中、底边描线、品牌色下划线） —— */
.global-page-header__tabs .global-page-header__el-tabs.el-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.global-page-header__tabs .global-page-header__el-tabs > .el-tabs__header {
  margin: 0 0 6px;
  order: -1;
  flex-shrink: 0;
}

.global-page-header.is-tab-align-center .global-page-header__el-tabs .el-tabs__nav-wrap {
  display: flex;
  justify-content: center;
}

.global-page-header.is-tab-align-left .global-page-header__el-tabs .el-tabs__nav-wrap {
  display: flex;
  justify-content: flex-start;
}

.global-page-header__el-tabs .el-tabs__nav-scroll {
  flex: 0 1 auto;
  min-width: 0;
}

.global-page-header__el-tabs .el-tabs__nav {
  float: none;
  display: flex;
}

.global-page-header__el-tabs .el-tabs__item {
  padding: 0 var(--gph-tab-padding-x);
  height: var(--gph-tab-height);
  line-height: var(--gph-tab-height);
  font-size: var(--gph-tab-size);
  color: var(--gph-tab-color) !important;
  font-weight: 500 !important;
  transition: color 0.2s ease;
}

.global-page-header__el-tabs .el-tabs__item:hover {
  color: var(--gph-tab-color-hover) !important;
}

.global-page-header__el-tabs .el-tabs__item.is-active {
  color: var(--gph-tab-color-active) !important;
  font-weight: 700 !important;
}

.global-page-header__el-tabs .el-tabs__active-bar {
  height: var(--gph-tab-active-bar-height) !important;
  border-radius: 2px;
  background-color: var(--gph-tab-active-bar) !important;
}

.global-page-header__el-tabs .el-tabs__nav-wrap::after {
  background-color: var(--gph-tab-divider) !important;
  height: 1px !important;
}

/* card / border-card 类型的备用样式（保持留白一致） */
.global-page-header__el-tabs.el-tabs--card .el-tabs__item,
.global-page-header__el-tabs.el-tabs--border-card .el-tabs__item {
  padding: 0 18px;
  height: 38px;
  line-height: 38px;
  font-size: var(--gph-tab-size);
}

@media (max-width: 768px) {
  .global-page-header__main {
    flex-direction: column;
  }
  .global-page-header__actions {
    width: 100%;
    justify-content: flex-end;
  }
  .global-page-header__el-tabs .el-tabs__item {
    padding: 0 16px;
  }
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.admin-kpi-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.98) 100%);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  border: none;
  min-height: 148px;
}

.admin-kpi-card.is-clickable {
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-kpi-card.is-clickable:hover {
  border-color: rgba(191, 0, 0, 0.22);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.admin-kpi-card.is-clickable:focus-visible {
  box-shadow: 0 0 0 2px rgba(191, 0, 0, 0.35);
}

.admin-kpi-card.is-active {
  border-color: rgba(191, 0, 0, 0.28);
  box-shadow: 0 14px 32px rgba(191, 0, 0, 0.12);
}

.admin-kpi-card.is-active::before,
.admin-kpi-card.is-emphasis::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(191, 0, 0, 0.92) 0%, rgba(255, 122, 89, 0.7) 100%);
}

.admin-kpi-card.is-emphasis {
  background: linear-gradient(180deg, rgba(255, 250, 250, 0.98) 0%, rgba(255, 244, 244, 0.98) 100%);
  border-color: rgba(191, 0, 0, 0.16);
}

/* 讲师入驻审核：5 列 KPI 自适应 */
.admin-kpi-grid.teacher-review-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1400px) {
  .admin-kpi-grid.teacher-review-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-kpi-grid.teacher-review-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 讲师审核详情抽屉：双栏工作台 */
.teacher-review-detail-drawer.el-drawer {
  --el-drawer-padding-primary: 0;
}

.teacher-review-detail-drawer .el-drawer__header {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
}

.teacher-review-detail-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: calc(100vh - 120px);
  max-height: calc(100vh - 80px);
}

.teacher-review-detail-main {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 20px 22px 24px;
}

.teacher-review-detail-side {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
  background: linear-gradient(180deg, rgba(250, 250, 252, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
  overflow: auto;
  padding: 18px 18px 24px;
}

@media (max-width: 1100px) {
  .teacher-review-detail-body {
    flex-direction: column;
    max-height: none;
  }
  .teacher-review-detail-side {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
  }
}

.teacher-review-preview-block {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--bg-card-module, #fff);
  overflow: hidden;
}

.teacher-review-copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-kpi-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 74px;
  height: 74px;
  background: radial-gradient(circle, rgba(191, 0, 0, 0.12) 0%, transparent 72%);
  pointer-events: none;
}

.admin-kpi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-kpi-card-title {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.admin-kpi-card-badge {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--accent-hover);
  background: rgba(191, 0, 0, 0.08);
}

.admin-kpi-card-value {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.admin-kpi-card-foot {
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.admin-kpi-card-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.admin-kpi-card-trend.is-up {
  color: var(--state-success);
}

.admin-kpi-card-trend.is-down {
  color: var(--state-error);
}

.admin-kpi-card-trend.is-neutral {
  color: var(--text-muted);
}

.admin-kpi-card-trend-icon {
  font-size: 11px;
}

.admin-kpi-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 54px;
  min-width: 92px;
}

.admin-kpi-sparkline-bar {
  width: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(191, 0, 0, 0.88) 0%, rgba(191, 0, 0, 0.2) 100%);
}

.admin-list-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.admin-list-toolbar-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-list-toolbar-left,
.admin-list-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-list-toolbar-search {
  width: 280px;
}

.admin-list-toolbar-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.admin-list-toolbar-tags-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

.admin-list-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(191, 0, 0, 0.12);
  background: rgba(191, 0, 0, 0.04);
}

.admin-list-batch-bar-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-hover);
}

.admin-list-batch-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-table-card {
  position: relative;
  background: var(--bg-card);
  border-radius: 18px;
  padding: 16px 16px 4px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.admin-table-card-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.admin-table-column-btn {
  min-width: 110px;
}

.admin-table-column-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-table-column-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.admin-data-table .el-table__header-wrapper th.el-table__cell {
  position: relative;
}

.admin-data-table .cell {
  font-size: 13px;
}

.admin-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.messages-page .admin-table-actions {
  flex-wrap: nowrap;
}

.messages-page .admin-data-table .el-table__body td.el-table__cell .cell {
  overflow: hidden;
}

.messages-page .admin-data-table .el-table__body td.el-table__cell .admin-table-actions {
  overflow: visible;
}

.messages-page .admin-data-table .el-table__fixed-right,
.messages-page .admin-data-table .el-table__fixed-right-patch {
  background: #fff;
  z-index: 3;
}

.messages-page .admin-data-table .el-table__fixed-right th.el-table__cell,
.messages-page .admin-data-table .el-table__fixed-right td.el-table__cell {
  background: #fff;
}

.messages-page .admin-data-table .el-table__fixed-right .admin-table-row-warning > td.el-table__cell {
  background: rgba(255, 247, 237, 0.78);
}

.messages-page .admin-data-table .el-table__fixed-right .admin-table-row-alert > td.el-table__cell {
  background: rgba(255, 241, 242, 0.92);
}

.admin-data-table .admin-table-row-warning > td.el-table__cell,
.admin-data-table .admin-table-row-alert > td.el-table__cell {
  background: rgba(255, 247, 237, 0.78);
}

.admin-data-table .admin-table-row-alert > td.el-table__cell {
  background: rgba(255, 241, 242, 0.92);
}

.admin-table-tags-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-table-cell-muted {
  color: var(--text-muted);
}

.admin-list-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 14px 0 8px;
}

.admin-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 28px 20px;
  color: var(--text-secondary);
  text-align: center;
}

.admin-list-empty.is-compact {
  min-height: 120px;
  padding: 24px 12px;
}

.admin-list-empty-illustration {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-hover);
  background: rgba(191, 0, 0, 0.08);
}

.admin-list-empty.is-compact .admin-list-empty-illustration {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.admin-list-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-list-empty-description {
  max-width: 420px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.admin-list-empty-actions {
  margin-top: 4px;
}

.admin-filter-drawer .el-drawer__header {
  margin-bottom: 0;
}

.admin-filter-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 10px;
}

.admin-filter-drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.admin-filter-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-filter-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-filter-grid .full-span {
  grid-column: 1 / -1;
}

.admin-list-toast-note {
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-kpi-grid--six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.admin-kpi-grid--six .admin-kpi-card {
  padding: 12px 14px 10px;
  border-radius: 14px;
}

.admin-kpi-grid--six .admin-kpi-card::after {
  width: 50px;
  height: 50px;
}

.admin-kpi-grid--six .admin-kpi-card-head {
  margin-bottom: 6px;
}

.admin-kpi-grid--six .admin-kpi-card-title {
  font-size: 12px;
}

.admin-kpi-grid--six .admin-kpi-card-value {
  font-size: 24px;
}

.admin-kpi-grid--six .admin-kpi-card-foot {
  margin-top: 8px;
}

.admin-kpi-grid--six .admin-kpi-card-trend {
  font-size: 11px;
}

.admin-kpi-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-kpi-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 课程审核工作台顶部三张 KPI */
.admin-kpi-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1440px) {
  .admin-kpi-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-kpi-grid--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-kpi-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-kpi-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-kpi-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-kpi-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-kpi-grid--three {
    grid-template-columns: 1fr;
  }
}

.admin-overview-split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.admin-overview-split--single {
  grid-template-columns: minmax(0, 1fr);
}

/* 用户反馈：右侧类型分布卡片 */
.admin-overview-split.admin-overview-split--feedback {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.52fr);
  gap: 16px;
}

/* 用户反馈：左侧主栏纵向排 KPI + 筛选条（位于饼图左侧） */
.admin-overview-split-main--feedback {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.admin-overview-split--feedback .admin-feedback-filters-below-kpi {
  min-width: 0;
}

.admin-overview-split--feedback .admin-feedback-filters-below-kpi .admin-list-toolbar {
  margin-bottom: 0;
}

.admin-overview-split--feedback .admin-insight-card--pie {
  padding: 20px 18px 22px;
  background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%);
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.admin-overview-split--feedback .admin-insight-head {
  margin-bottom: 14px;
}

.admin-overview-split--feedback .admin-insight-title {
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-overview-split--feedback .admin-insight-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #BF0000, #FFA000);
}

.admin-overview-split--feedback .admin-insight-subtitle {
  font-size: 11px;
  line-height: 1.5;
  margin-left: 9px;
}

.admin-overview-split-main,
.admin-overview-split-side {
  min-width: 0;
}

@media (max-width: 1280px) {
  .admin-overview-split {
    grid-template-columns: 1fr;
  }
}

.admin-kpi-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.admin-kpi-skeleton-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-kpi-skeleton-card {
  min-height: 148px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(241, 245, 249, 0.9) 25%, rgba(226, 232, 240, 0.95) 37%, rgba(241, 245, 249, 0.9) 63%);
  background-size: 400% 100%;
  animation: adminSkeletonShimmer 1.6s ease infinite;
}

@keyframes adminSkeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.admin-insight-card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.admin-insight-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-insight-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-insight-subtitle {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.admin-insight-skeleton {
  min-height: 260px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(241, 245, 249, 0.9) 25%, rgba(226, 232, 240, 0.95) 37%, rgba(241, 245, 249, 0.9) 63%);
  background-size: 400% 100%;
  animation: adminSkeletonShimmer 1.6s ease infinite;
}

.admin-insight-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-insight-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-insight-bar-head,
.admin-insight-bar-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-insight-bar-head strong {
  color: var(--text-primary);
}

.admin-insight-bar-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.16);
}

.admin-insight-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(191, 0, 0, 0.82) 0%, rgba(255, 122, 89, 0.78) 100%);
}

.admin-insight-skeleton--pie {
  min-height: 260px;
}

.feedback-type-pie-chart {
  width: 100%;
  min-height: 260px;
  height: 260px;
}

.feedback-detail-split {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.feedback-detail-col--left {
  flex: 1 1 320px;
  min-width: 0;
}

.feedback-detail-col--right {
  flex: 1 1 280px;
  min-width: 260px;
}

.feedback-detail-drawer-wide .el-drawer__body {
  padding-bottom: 24px;
}

.messages-page .admin-table-user-cell--clickable {
  cursor: pointer;
}

.messages-page .admin-table-user-cell--clickable:hover .admin-table-user-name {
  color: #bf0000;
}

.feedback-copy-id-btn {
  margin-left: 4px;
  padding-left: 4px;
  padding-right: 4px;
}

.admin-toolbar-inline-field {
  width: 140px;
}

.admin-toolbar-date {
  width: 250px;
}

.admin-list-summary-note {
  margin: -2px 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-section-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.admin-table-id-cell,
.admin-table-user-cell,
.admin-table-summary-cell,
.admin-table-status-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.admin-table-summary-cell {
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.admin-table-id-cell {
  align-items: center;
}

.admin-table-id-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.admin-table-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.admin-table-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.92);
  color: #fde68a;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-table-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-table-user-meta,
.admin-table-summary-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-table-summary-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-table-summary-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-table-status-cell {
  flex-direction: column;
  gap: 6px;
}

.admin-table-status-cell--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.admin-table-inline-cell {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.admin-table-inline-primary,
.admin-table-inline-secondary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table-inline-primary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-table-inline-secondary {
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-table-inline-text {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-table-warning-text {
  font-size: 12px;
  color: #dc2626;
  font-weight: 600;
}

.admin-detail-drawer.el-drawer {
  --el-drawer-padding-primary: 0;
}

.admin-detail-drawer .el-drawer__header {
  margin-bottom: 0;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
}

.admin-detail-hero {
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 252, 252, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  border: 1px solid rgba(191, 0, 0, 0.08);
}

.admin-detail-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.admin-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.admin-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.admin-detail-meta-grid span {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-detail-meta-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-primary);
}

@media (max-width: 640px) {
  .admin-detail-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-detail-section {
  border-radius: 18px;
  padding: 18px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.admin-detail-section-title {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-detail-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-detail-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-detail-message-role,
.admin-detail-message-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-detail-message-bubble {
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.7;
  background: rgba(248, 250, 252, 0.95);
  color: var(--text-primary);
}

.admin-detail-message.is-student .admin-detail-message-bubble {
  background: rgba(255, 244, 244, 0.96);
}

.admin-detail-message.is-teacher .admin-detail-message-bubble {
  background: rgba(240, 249, 255, 0.96);
}

.admin-detail-message.is-admin .admin-detail-message-bubble {
  background: rgba(241, 245, 249, 0.96);
}

.admin-detail-rich-text {
  border-radius: 14px;
  padding: 14px;
  white-space: pre-line;
  line-height: 1.8;
  background: rgba(248, 250, 252, 0.95);
  color: var(--text-primary);
}

.admin-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-detail-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-detail-media-item {
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.95);
  cursor: pointer;
}

.admin-detail-media-item img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  display: block;
}

.admin-detail-timeline {
  margin-top: 6px;
}

.admin-soft-note {
  margin-top: 12px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
  background: rgba(248, 250, 252, 0.92);
  border: 1px dashed rgba(148, 163, 184, 0.24);
}

.admin-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1080px) {
  .admin-featured-grid {
    grid-template-columns: 1fr;
  }
}

.admin-featured-grid .content-card {
  min-width: 0;
}

.admin-featured-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}

.admin-featured-item-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.admin-featured-content {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
}

.admin-featured-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.admin-featured-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.messages-page .summary-card,
.analytics-page .summary-card {
  border-radius: 18px;
  overflow: hidden;
}

.messages-page .el-card,
.analytics-page .el-card,
.questions-page .el-card,
.teacher-management-page .el-card,
.teacher-dashboard-page .el-card {
  border: none !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
}

.messages-page .el-card:hover,
.analytics-page .el-card:hover,
.teacher-management-page .el-card:hover {
  box-shadow: var(--shadow-lg) !important;
}

.messages-page .feedback-table,
.analytics-page .el-table,
.questions-page .el-table {
  border-radius: 16px;
  overflow: hidden;
}

.analytics-page,
.questions-page,
.teacher-management-page {
  min-width: 0;
}

.analytics-page .el-pagination,
.messages-page .el-pagination,
.questions-page .el-pagination {
  margin-top: 14px;
  justify-content: flex-end;
}

.teacher-management-page table.min-w-full,
.teacher-dashboard-page table.min-w-full {
  width: 100%;
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
}

/* ======== Unified Remaining List Pages Polish ======== */
.messages-page .el-card,
.questions-page .question-sidebar,
.questions-page .question-detail-card,
.questions-page .admin-list-toolbar,
.questions-page .admin-table-card,
.questions-page .admin-list-pagination,
.teacher-management-page .admin-list-toolbar,
.teacher-management-page .admin-table-card,
.teacher-management-page .admin-list-pagination {
  border: 1px solid rgba(15, 23, 42, 0.04) !important;
}

.messages-page .el-card,
.questions-page .question-sidebar,
.questions-page .question-detail-card,
.teacher-management-page .admin-list-toolbar,
.teacher-management-page .admin-table-card,
.teacher-management-page .admin-list-pagination {
  box-shadow: var(--shadow-sm) !important;
}

.messages-page .el-card:hover,
.questions-page .question-detail-card:hover,
.teacher-management-page .admin-table-card:hover {
  box-shadow: var(--shadow) !important;
}

.analytics-page > .grid > div,
.analytics-page > .mt-6.bg-cream {
  background: var(--bg-card-module) !important;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition), transform var(--transition);
}

.analytics-page > .grid > div:hover,
.analytics-page > .mt-6.bg-cream:hover {
  box-shadow: var(--shadow) !important;
}

.questions-page .admin-list-toolbar,
.questions-page .admin-table-card,
.questions-page .admin-list-pagination,
.teacher-management-page .admin-list-toolbar,
.teacher-management-page .admin-table-card,
.teacher-management-page .admin-list-pagination {
  background: var(--bg-card-module);
  border-radius: var(--radius);
}

.questions-page .admin-list-pagination,
.teacher-management-page .admin-list-pagination {
  padding: 14px 18px;
}

.questions-page .question-detail-card {
  padding: 24px;
}

.questions-page .question-detail-card .admin-table-card {
  margin-top: 12px;
  box-shadow: none !important;
}

.messages-page .messages-tabs > .el-tabs__header {
  margin-bottom: 18px;
}

.messages-page .messages-tabs > .el-tabs__header .el-tabs__nav-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 24px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-inset);
}

.messages-page .messages-tabs > .el-tabs__header .el-tabs__nav-wrap::after {
  display: none;
}

.messages-page .messages-tabs > .el-tabs__header .el-tabs__nav {
  border: none;
}

.messages-page .messages-tabs > .el-tabs__header .el-tabs__item {
  height: 36px;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 20px;
  color: var(--text-secondary) !important;
  font-weight: 500;
}

.messages-page .messages-tabs > .el-tabs__header .el-tabs__item.is-active {
  background: var(--brand-attila-red);
  color: #ffffff !important;
  box-shadow: var(--shadow-sm);
}

.questions-page .questions-primary-btn,
.teacher-management-page .bg-yellow-400,
.teacher-management-page .hover\:bg-yellow-500:hover,
.analytics-page .bg-yellow-400,
.analytics-page .hover\:bg-yellow-500:hover {
  box-shadow: 0 8px 20px rgba(191, 0, 0, 0.18) !important;
}

.messages-page .summary-card,
.analytics-page .admin-kpi-card,
.questions-page .admin-kpi-card,
.teacher-management-page .admin-kpi-card {
  position: relative;
  overflow: hidden;
}

.messages-page .summary-card::after,
.analytics-page .admin-kpi-card::after,
.questions-page .admin-kpi-card::after,
.teacher-management-page .admin-kpi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(191, 0, 0, 0.04), transparent 52%);
  pointer-events: none;
}

@media (max-width: 1200px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .admin-kpi-grid,
  .admin-filter-grid {
    grid-template-columns: 1fr;
  }

  .admin-list-toolbar-search {
    width: 100%;
  }

  .admin-list-pagination {
    justify-content: center;
  }
}

/* ======== Element Plus Overrides - Soft UI ======== */

.el-dialog {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xl) !important;
}

.el-dialog__header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 20px 28px !important;
}

.el-dialog__title {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 16px;
}

.el-dialog__body {
  padding: 28px !important;
  color: var(--text-primary) !important;
}

.el-dialog__footer {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 16px 28px !important;
}

.el-form-item__label {
  color: var(--text-secondary) !important;
}

.el-input__wrapper,
.el-textarea__inner {
  background: var(--bg-surface) !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-inset) !important;
  border-radius: var(--radius-sm) !important;
}

.el-input__wrapper:hover,
.el-textarea__inner:hover {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04) !important;
}

.el-input__wrapper.is-focus,
.el-textarea__inner:focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

.el-input__inner {
  color: var(--text-primary) !important;
}

.el-select .el-input__wrapper {
  background: var(--bg-surface) !important;
}

.el-select-dropdown {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-xl) !important;
}

.el-select-dropdown__item {
  color: var(--text-primary) !important;
  border-radius: 10px;
  margin: 2px 6px;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: var(--accent-light) !important;
}

.el-tag {
  border-radius: var(--radius-pill);
  border: none;
}

.el-button--primary {
  --el-button-bg-color: var(--brand-attila-red);
  --el-button-border-color: var(--brand-attila-red);
  --el-button-hover-bg-color: var(--accent-hover);
  --el-button-hover-border-color: var(--accent-hover);
  --el-button-text-color: var(--text-on-dark-bg);
  border-radius: 14px;
  font-weight: 600;
  border: none !important;
}

.el-button--danger {
  --el-button-bg-color: var(--state-error);
  --el-button-border-color: var(--state-error);
  --el-button-hover-bg-color: #b92b39;
  --el-button-hover-border-color: #b92b39;
  --el-button-text-color: #ffffff;
  border-radius: 14px;
  border: none !important;
}

.el-button--success {
  --el-button-bg-color: var(--state-success);
  --el-button-border-color: var(--state-success);
  --el-button-hover-bg-color: #218838;
  --el-button-hover-border-color: #218838;
  --el-button-text-color: #ffffff;
  border-radius: 14px;
  border: none !important;
}

.el-button--warning {
  --el-button-bg-color: var(--state-warning);
  --el-button-border-color: var(--state-warning);
  --el-button-hover-bg-color: #e08d00;
  --el-button-hover-border-color: #e08d00;
  --el-button-text-color: #ffffff;
  border-radius: 14px;
  border: none !important;
}

.el-button {
  border-radius: 14px;
}

.el-button--default {
  border: none !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-sm);
  color: var(--auxiliary-deep-sea-blue) !important;
}

.el-button--default:hover {
  border-color: var(--auxiliary-deep-sea-blue) !important;
  color: var(--auxiliary-deep-sea-blue) !important;
  background: rgba(48, 78, 96, 0.08) !important;
}

.el-switch.is-checked .el-switch__core {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--accent);
  border-color: var(--accent);
}

.el-tabs__item {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

.el-tabs__item.is-active {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.el-tabs__active-bar {
  background-color: var(--accent) !important;
  height: 3px !important;
  border-radius: 2px;
}

.el-message-box {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xl) !important;
}

.el-message-box__title {
  color: var(--text-primary) !important;
}

.el-message-box__message {
  color: var(--text-secondary) !important;
}

.el-popper {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
}

.el-dropdown-menu {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-xl) !important;
  border: none !important;
  padding: 6px !important;
}

.el-dropdown-menu__item {
  border-radius: 10px !important;
  padding: 8px 14px !important;
}

.el-dropdown-menu__item:hover {
  background: var(--accent-light) !important;
  color: var(--text-primary) !important;
}

/* ---- Theme Color Overrides ---- */
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-dark-bg) !important;
  box-shadow: -1px 0 0 0 var(--accent) !important;
  font-weight: 600;
}

.el-radio-button__inner:hover {
  color: var(--accent-hover) !important;
}

.el-radio-button__inner {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.el-link--primary {
  --el-link-text-color: var(--accent-hover) !important;
  color: var(--accent-hover) !important;
}

.el-link--primary:hover {
  color: var(--accent) !important;
}

.el-link--primary .el-link__inner {
  color: inherit !important;
}

.el-button--primary.is-text,
.el-button--primary.is-link {
  color: var(--brand-attila-red) !important;
}

.el-button--primary.is-text:hover,
.el-button--primary.is-link:hover {
  color: var(--accent) !important;
  background: var(--accent-light) !important;
}

.el-pagination .el-pager li.is-active {
  background: var(--accent) !important;
  color: var(--text-on-dark-bg) !important;
  border-radius: 10px;
}

.el-pagination .el-pager li {
  border-radius: 10px;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--accent-hover) !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.el-radio__input.is-checked + .el-radio__label {
  color: var(--accent-hover) !important;
}

.el-loading-spinner .path {
  stroke: var(--accent) !important;
}

.el-tag--info {
  --el-tag-bg-color: var(--bg-surface);
  --el-tag-border-color: transparent;
  --el-tag-text-color: var(--text-secondary);
}

.app-header .el-button.is-text,
.app-header .el-button--text,
.app-header .el-button.is-circle {
  color: var(--text-on-dark-bg) !important;
}

.app-header .el-button.is-text:hover,
.app-header .el-button--text:hover,
.app-header .el-button.is-circle:hover {
  background: rgba(240, 240, 240, 0.10) !important;
}

.app-header .header-user-btn:hover {
  background: rgba(240, 240, 240, 0.10);
}

.header-user-name {
  color: var(--text-on-dark-bg);
}

.app-header .el-tag--info {
  --el-tag-bg-color: var(--brand-attila-red);
  --el-tag-border-color: transparent;
  --el-tag-text-color: var(--text-on-dark-bg);
}

.el-date-picker .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
  background-color: var(--accent) !important;
  color: var(--text-on-dark-bg) !important;
}

.el-input-number__decrease:hover,
.el-input-number__increase:hover {
  color: var(--accent) !important;
}

.el-select-dropdown__item.is-selected {
  color: var(--accent-hover) !important;
  font-weight: 700;
}

.el-table {
  --el-table-border-color: rgba(174, 164, 140, 0.08);
  --el-table-header-bg-color: var(--bg-surface);
  --el-table-bg-color: var(--bg-card);
  --el-table-tr-bg-color: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100% !important;
}

.el-table th.el-table__cell {
  background: var(--bg-surface) !important;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: none !important;
}

.el-table td.el-table__cell {
  border-bottom-color: rgba(200, 180, 140, 0.08) !important;
}

.el-table__row:hover > td.el-table__cell {
  background: var(--accent-light) !important;
}

/* ======== Responsive ======== */
@media (max-width: 1200px) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .teacher-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .manage-container,
  .question-container {
    grid-template-columns: 1fr;
    height: auto;
  }

  .stats-mini-grid {
    grid-template-columns: 1fr;
  }

  .module-grid {
    grid-template-columns: 1fr;
  }
}

/* ======== Scrollbar ======== */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(180, 160, 120, 0.15);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 160, 120, 0.30);
}

/* ======== Login Page Animations ======== */
@keyframes loginFadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes loginSlideInRight {
  from { opacity: 0; transform: translateX(48px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes loginOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(14px, -20px) scale(1.04); }
  66%      { transform: translate(-10px, 12px) scale(0.97); }
}

@keyframes loginOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-18px, 16px) scale(1.06); }
  70%      { transform: translate(8px, -14px) scale(0.95); }
}

@keyframes loginGridReveal {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}

@keyframes loginPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.25); }
}

@keyframes loginShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes loginBadgeSlideIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes loginLogoGlow {
  0%, 100% { box-shadow: 0 18px 40px rgba(191, 0, 0, 0.16), 0 12px 28px rgba(48, 78, 96, 0.12); }
  50%      { box-shadow: 0 18px 50px rgba(191, 0, 0, 0.28), 0 12px 34px rgba(48, 78, 96, 0.18), 0 0 24px rgba(191, 0, 0, 0.10); }
}

/* ======== Login Page ======== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 14% 18%, rgba(191, 0, 0, 0.12) 0%, rgba(191, 0, 0, 0) 30%),
    radial-gradient(circle at 82% 12%, rgba(48, 78, 96, 0.16) 0%, rgba(48, 78, 96, 0) 32%),
    linear-gradient(135deg, #F8FAFC 0%, #EEF3F8 45%, #F7F2F2 100%);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.9), transparent 85%);
  opacity: 0;
  pointer-events: none;
  animation: loginGridReveal 1.8s 0.3s ease-out forwards;
}

.login-page::after {
  content: '';
  position: absolute;
  top: -16%;
  right: -8%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(48, 78, 96, 0.14) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  animation: loginOrbFloat 12s ease-in-out infinite;
}

.login-page--enhanced::before {
  animation: loginGridReveal 1.8s 0.3s ease-out forwards;
}

.login-page--enhanced .login-orb-1,
.login-page--enhanced .login-orb-2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.login-page--enhanced .login-orb-1 {
  bottom: -12%;
  left: -6%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(191, 0, 0, 0.08) 0%, transparent 70%);
  animation: loginOrbFloat2 14s ease-in-out infinite;
}

.login-page--enhanced .login-orb-2 {
  top: 30%;
  right: 20%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(48, 78, 96, 0.06) 0%, transparent 70%);
  animation: loginOrbFloat 10s 2s ease-in-out infinite;
}

.login-stage {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 460px);
  gap: 24px;
  align-items: center;
}

.login-brand-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
  padding: 0 4px 0 0;
  justify-self: end;
  opacity: 0;
  animation: loginFadeInUp 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.login-brand-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(191, 0, 0, 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0;
  animation: loginBadgeSlideIn 0.6s 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.login-brand-badge:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(191, 0, 0, 0.28);
  transform: translateY(-1px);
}

.login-brand-lockup {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.login-brand-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 24px;
  box-shadow:
    0 18px 40px rgba(191, 0, 0, 0.16),
    0 12px 28px rgba(48, 78, 96, 0.12);
  animation: loginLogoGlow 4s 1.2s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.login-brand-logo:hover {
  transform: scale(1.06) rotate(-2deg);
  box-shadow:
    0 22px 52px rgba(191, 0, 0, 0.22),
    0 14px 32px rgba(48, 78, 96, 0.16),
    0 0 30px rgba(191, 0, 0, 0.12);
}

.login-brand-copy {
  max-width: 480px;
}

.login-brand-eyebrow {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}

.login-brand-copy h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.12;
  color: #18212F;
  letter-spacing: -0.04em;
  margin: 0;
  opacity: 0;
  animation: loginFadeInUp 0.7s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.login-brand-copy p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(24, 33, 47, 0.78);
  max-width: 500px;
  opacity: 0;
  animation: loginFadeInUp 0.7s 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.login-brand-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.login-highlight-card {
  min-height: 176px;
  padding: 22px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  opacity: 0;
  animation: loginFadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.login-highlight-card:nth-child(1) { animation-delay: 0.8s; }
.login-highlight-card:nth-child(2) { animation-delay: 0.95s; }
.login-highlight-card:nth-child(3) { animation-delay: 1.1s; }

.login-highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
  border-color: rgba(191, 0, 0, 0.12);
}

.login-highlight-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.login-highlight-card h3 {
  font-size: 18px;
  line-height: 1.45;
  color: #18212F;
  margin: 0 0 10px;
}

.login-highlight-card p {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(51, 51, 51, 0.82);
  margin: 0;
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 32px;
  padding: 32px;
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.14),
    0 10px 24px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(22px);
  opacity: 0;
  animation: loginSlideInRight 0.75s 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.login-card:hover {
  box-shadow:
    0 32px 80px rgba(15, 23, 42, 0.17),
    0 12px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.login-card--compact {
  max-width: 460px;
}

.login-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.login-status-chip {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-secondary);
}

.login-status-chip {
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.login-status-chip.online {
  background: rgba(40, 167, 69, 0.12);
  color: #1F7A39;
}

.login-status-chip.online::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28a745;
  margin-right: 6px;
  animation: loginPulse 2s ease-in-out infinite;
}

.login-status-chip.offline {
  background: rgba(220, 53, 69, 0.12);
  color: #AF2431;
}

.login-logo {
  margin-bottom: 0;
}

.login-logo--compact {
  text-align: left;
  margin-bottom: 0;
}

.login-logo-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
  margin: 0 auto 16px;
}

.login-logo-icon--prominent {
  width: 84px;
  height: 84px;
  margin: 0 0 16px;
  box-shadow: 0 18px 40px rgba(191, 0, 0, 0.14);
}

.login-logo h1,
.login-logo h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.login-logo p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 8px 0 0;
  line-height: 1.7;
}

.login-alert-stack {
  margin-bottom: 18px;
}

.login-mode-switcher {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  padding: 6px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.04);
}

.login-mode-switcher__item {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 14px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.login-mode-switcher__item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
}

.login-mode-switcher__item.active {
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.login-form .el-form-item__label {
  color: var(--text-secondary) !important;
  font-size: 13px;
}

.login-form .el-form-item {
  margin-bottom: 20px;
}

.login-form .el-input__wrapper,
.login-form .el-textarea__inner {
  border-radius: 16px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.login-form .el-input__wrapper:focus-within {
  box-shadow: 0 0 0 3px rgba(191, 0, 0, 0.08), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px);
}

.login-captcha-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 72px;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}

.login-captcha-button {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  border-radius: 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.login-captcha-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.login-captcha-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.login-captcha-image {
  width: 100%;
  height: 44px;
  object-fit: cover;
  display: block;
}

.login-captcha-refresh.el-button {
  border-radius: 16px;
}

.login-inline-hint {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 2px;
}

.login-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -2px;
}

.login-link-button {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.25s ease, transform 0.25s ease;
}

.login-link-button:hover {
  color: var(--accent-hover);
  transform: translateX(2px);
}

.login-privacy-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.login-btn {
  width: 100%;
  margin-top: 18px;
  height: 50px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.login-btn:not(.is-disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(191, 0, 0, 0.28), 0 4px 12px rgba(191, 0, 0, 0.12);
}

.login-btn:not(.is-disabled):active {
  transform: translateY(0) scale(0.985);
}

.login-btn:not(.is-disabled)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.25) 55%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: loginShimmer 3s 1.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

.login-footer {
  margin-top: 32px;
  text-align: left;
}

.cloud-status-login {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  line-height: 1.7;
}

.cloud-status-login::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}

.cloud-status-login.online::before {
  background: var(--success);
  animation: loginPulse 2.5s ease-in-out infinite;
}

.dev-hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

.dev-hint b {
  color: var(--text-secondary);
  font-weight: 500;
}

.login-reset-dialog {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.password-strength-card {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.password-strength-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.password-strength-card__meta strong.level-empty,
.password-strength-card__meta strong.level-weak {
  color: var(--danger);
}

.password-strength-card__meta strong.level-medium {
  color: #D48806;
}

.password-strength-card__meta strong.level-good {
  color: #1F7A39;
}

.password-strength-card__meta strong.level-strong {
  color: #0F766E;
}

.password-strength-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.password-strength-bars__item {
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  transition: background .2s ease, transform .2s ease;
}

.password-strength-bars__item.active {
  background: linear-gradient(90deg, rgba(191, 0, 0, 0.85), rgba(48, 78, 96, 0.85));
  transform: translateY(-1px);
}

.password-strength-tip {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 1080px) {
  .login-stage {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .login-brand-panel {
    padding: 0;
  }

  .login-brand-highlights {
    grid-template-columns: 1fr;
  }

  .login-card {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .login-page {
    padding: 16px;
  }

  .login-brand-lockup {
    flex-direction: column;
  }

  .login-brand-logo {
    width: 76px;
    height: 76px;
  }

  .login-card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .login-card-header,
  .login-form-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .login-captcha-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-brand-panel,
  .login-brand-badge,
  .login-brand-copy h1,
  .login-brand-copy p,
  .login-card,
  .login-highlight-card,
  .login-page::before {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  .login-page::after,
  .login-page--enhanced .login-orb-1,
  .login-page--enhanced .login-orb-2 {
    animation: none !important;
  }

  .login-brand-logo {
    animation: none !important;
  }

  .login-btn:not(.is-disabled)::after {
    animation: none !important;
  }

  .cloud-status-login.online::before,
  .login-status-chip.online::before {
    animation: none !important;
  }
}

/* ======== Header User Button ======== */
.header-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  transition: background 0.2s;
}

.header-user-btn:hover {
  background: var(--bg-surface);
}

.header-user-name {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ======== Analytics Page ======== */
.analytics-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.an-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.an-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

.an-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.an-range-group {
  display: flex;
  background: var(--bg-card);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: var(--shadow-inset);
  border: none;
}

.an-range-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 20px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
}

.an-range-btn:hover {
  color: var(--text-primary);
}

.an-range-btn.active {
  background: var(--accent);
  color: var(--text-on-dark-bg);
  box-shadow: 0 2px 10px var(--accent-glow);
}

/* KPI Cards */
.an-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.an-kpi-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.25s cubic-bezier(.22, .61, .36, 1), box-shadow 0.25s;
  border: none;
}

.an-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.an-kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.an-kpi-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.an-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

.an-kpi-trend.is-up {
  color: var(--success);
}

.an-kpi-trend.is-down {
  color: var(--danger);
}

.an-trend-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Charts Layout */
.an-charts-row {
  display: flex;
  gap: 24px;
}

.an-chart-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  border: none;
}

.an-chart-wide {
  flex: 3;
  min-width: 0;
}

.an-chart-narrow {
  flex: 2;
  min-width: 0;
}

.an-chart-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.an-chart-box {
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Analytics Responsive */
@media (max-width: 1100px) {
  .an-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .an-charts-row {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .an-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ======== Global Transitions ======== */
.el-message {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
}

.el-notification {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  box-shadow: var(--shadow-xl) !important;
}

.el-overlay-dialog .el-dialog {
  margin-top: 8vh !important;
}

.el-tooltip__popper {
  border-radius: 10px !important;
}

/* ======== 数据看板 BI 报表 ======== */
.analytics-page {
  --an-gap: 2rem;
}

.funnel-wrap .funnel-tier {
  transition: transform 0.2s ease;
}

.funnel-wrap .funnel-tier:hover {
  transform: scale(1.02);
}

/* ======================================== */
/* ======== 讨论区模块样式 ======== */
/* ======================================== */

/* 进入讨论区按钮（课程标题右侧） */
.discussion-enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.discussion-enter-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--accent-light);
}

/* 讨论区头部栏 */
.discussion-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.discussion-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 返回按钮 */
.discussion-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.discussion-back-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--accent-light);
}

/* 讨论区课时进入按钮 */
.discussion-lesson-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.discussion-lesson-enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  opacity: 0.7;
}
.discussion-lesson-enter-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--accent-light);
  opacity: 1;
}

/* 讨论区顶部栏 */
.discussion-top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-card);
  flex-shrink: 0;
}
.discussion-top-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.discussion-sort-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.discussion-sort-btn {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.discussion-sort-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.discussion-sort-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark-bg);
  font-weight: 600;
}

/* 评论列表滚动区域 */
.discussion-comment-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
}

/* 评论卡片 */
.comment-card {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.comment-card:last-child {
  border-bottom: none;
}

/* 评论主体 */
.comment-main {
  display: flex;
  gap: 10px;
}

/* 头像 */
.comment-avatar-wrap {
  flex-shrink: 0;
}
.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-avatar-sm {
  width: 28px;
  height: 28px;
}
.comment-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-2);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.reply-avatar-wrap {
  padding-top: 2px;
}

/* 评论内容区 */
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.comment-nickname {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.comment-role-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
}
.comment-role-tag.tag-teacher {
  background: var(--accent-light);
  color: var(--brand-attila-red);
  border: 1px solid rgba(191, 0, 0, 0.24);
}
.comment-role-tag.tag-pinned {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.comment-reply-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.comment-content {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  word-break: break-word;
  margin-bottom: 6px;
}
.comment-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.comment-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.comment-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.comment-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition);
}
.comment-action-btn:hover {
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.comment-action-btn.liked {
  color: var(--accent-2);
}
.comment-action-btn.liked:hover {
  background: rgba(232, 115, 74, 0.08);
}
.comment-action-danger:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.06);
}
.comment-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 回复展开按钮 */
.comment-reply-toggle {
  margin-top: 6px;
}
.comment-reply-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.comment-reply-toggle-btn:hover {
  color: #1d4ed8;
}

/* 回复列表 */
.reply-list {
  margin-top: 10px;
  padding: 10px 0 6px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.reply-item {
  padding: 8px 0;
}

/* 加载更多按钮 */
.load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.load-more-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--accent-light);
}
.load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 评论输入区域 */
.comment-input-area {
  padding: 12px 18px;
  border-top: 1px solid var(--border-strong);
  background: var(--bg-card);
  flex-shrink: 0;
}
.comment-reply-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--accent-light);
  font-size: 12px;
  color: #b8860b;
}
.comment-reply-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: var(--transition);
}
.comment-reply-cancel:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary);
}
.comment-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.comment-input-row .el-textarea {
  flex: 1;
}
.comment-input-row .el-textarea__inner {
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
}
.comment-input-row .el-textarea__inner:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-light) !important;
}
.comment-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--text-on-dark-bg);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.comment-send-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}
.comment-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ======== Access Module Pages ======== */
/* ======================================================
   用户与权限模块共享容器与角色配置样式
   ====================================================== */
.access-module-page,
.role-permissions-page {
  min-width: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
}

/* --- 角色卡片与新增卡片统一品牌色 --- */
.role-card-selector-root {
  background: var(--bg-card-module) !important;
  border: 1px solid rgba(48, 78, 96, 0.08) !important;
  box-shadow: var(--shadow-sm) !important;
}

.role-card-selector-root .text-gray-900 {
  color: var(--text-primary) !important;
}

.role-card-selector-root .text-gray-600,
.role-card-selector-root .text-gray-500 {
  color: var(--text-secondary) !important;
}

.role-card-selector-root .border-yellow-400,
.role-card-selector-root .hover\:border-yellow-400:hover {
  border-color: var(--brand-attila-red) !important;
}

.role-card-selector-root .hover\:border-yellow-300:hover {
  border-color: rgba(191, 0, 0, 0.45) !important;
}

.role-card-selector-root .bg-yellow-50 {
  background-color: rgba(191, 0, 0, 0.08) !important;
}

.role-card-selector-root .hover\:text-yellow-700:hover {
  color: var(--brand-attila-red) !important;
}

.role-card-selector-root .bg-gray-900 {
  background-color: var(--auxiliary-deep-sea-blue) !important;
  color: var(--text-on-dark-bg) !important;
}

.role-card-default {
  border-color: var(--border-divider) !important;
  background-color: var(--bg-card-module) !important;
}

.role-card-default:hover {
  border-color: rgba(191, 0, 0, 0.45) !important;
}

.role-card-selected {
  border-color: var(--brand-attila-red) !important;
  background-color: rgba(191, 0, 0, 0.08) !important;
}

.role-card-add-tile:hover {
  border-color: var(--brand-attila-red) !important;
  color: var(--brand-attila-red) !important;
}

.access-module-page .text-amber-600,
.role-permissions-page .text-amber-600 {
  color: var(--state-warning) !important;
}

.access-module-page .save-button-warning-text,
.role-permissions-page .save-button-warning-text {
  color: var(--state-warning) !important;
}

.access-module-page .border-gray-200,
.role-permissions-page .border-gray-200 {
  border-color: var(--border-divider) !important;
}

.access-module-page .bg-white\/95,
.role-permissions-page .bg-white\/95 {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

.rp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.rp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.rp-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* Loading skeleton */
.rp-skeleton-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rp-tabs-skeleton {
  display: flex;
  gap: 10px;
}

.rp-panel-skeleton {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

/* ─── Tab Bar ─── */
.rp-tabs-bar {
  background: var(--bg-card);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-sm);
  padding: 0;
  overflow: hidden;
}

.rp-tabs-scroll {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-surface-2) transparent;
  -webkit-overflow-scrolling: touch;
}

.rp-tabs-scroll::-webkit-scrollbar {
  height: 3px;
}

.rp-tabs-scroll::-webkit-scrollbar-thumb {
  background: var(--bg-surface-2);
  border-radius: 3px;
}

.rp-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
  user-select: none;
}

.rp-tab:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.02);
}

.rp-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  background: rgba(191, 0, 0, 0.04);
  font-weight: 700;
}

.rp-tab.is-disabled {
  opacity: 0.55;
}

.rp-tab.is-disabled:hover {
  opacity: 0.7;
}

.rp-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-tab-name {
  font-size: 14px;
}

.rp-tab-badge {
  transform: scale(0.85);
  transform-origin: center;
}

.rp-tab-add {
  color: var(--accent-hover);
  font-weight: 600;
  gap: 4px;
  border-bottom-color: transparent !important;
}

.rp-tab-add:hover {
  color: var(--accent);
  background: var(--accent-light);
}

/* ─── Config Panel ─── */
.rp-config-panel {
  background: var(--bg-card);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* Super admin notice */
.rp-super-notice {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 40px 32px;
}

.rp-super-notice-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(239, 68, 68, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #dc2626;
}

.rp-super-notice-body {
  flex: 1;
}

.rp-super-notice-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.rp-super-notice-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Panel header */
.rp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
  gap: 12px;
}

.rp-panel-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rp-panel-role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.rp-panel-role-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.rp-panel-role-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.rp-panel-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toolbar: search + expand/collapse */
.rp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.rp-search-input {
  max-width: 360px;
  flex: 1;
}

.rp-search-input .el-input__wrapper {
  border-radius: 12px !important;
}

.rp-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

/* Modules area */
.rp-modules-area {
  padding: 12px 24px;
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 380px);
  min-height: 200px;
}

/* Module block */
.rp-module {
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.rp-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}

.rp-module-header:hover {
  background: var(--bg-surface-2);
}

.rp-module-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rp-module-arrow {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(.22, .61, .36, 1);
  flex-shrink: 0;
}

.rp-module-arrow.is-open {
  transform: rotate(90deg);
}

.rp-module-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.rp-module-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  padding: 1px 8px;
  background: var(--bg-card);
  border-radius: var(--radius-pill);
}

/* Module body (permission items) */
.rp-module-body {
  background: var(--bg-card);
  padding: 4px 6px;
}

.rp-perm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 8px 38px;
  border-radius: 8px;
  transition: background 0.12s;
}

.rp-perm-item:hover {
  background: var(--bg-surface);
}

.rp-perm-item-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.rp-perm-name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-perm-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  cursor: help;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
}

.rp-perm-item:hover .rp-perm-info-icon {
  opacity: 1;
  color: var(--text-secondary);
}

/* Slide transition for module body */
.rp-slide-enter-active,
.rp-slide-leave-active {
  transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
  max-height: 800px;
  opacity: 1;
  overflow: hidden;
}

.rp-slide-enter-from,
.rp-slide-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

/* Empty search */
.rp-empty-search {
  text-align: center;
  padding: 48px 0;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Empty state (no role selected) */
.rp-empty-state {
  background: var(--bg-card);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
}

/* ─── Sticky Save Bar ─── */
.rp-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  background: var(--bg-surface);
  position: sticky;
  bottom: 0;
  z-index: 10;
  transition: background 0.25s, box-shadow 0.25s;
}

.rp-save-bar.has-changes {
  background: var(--bg-card);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.rp-save-bar-left {
  display: flex;
  align-items: center;
}

.rp-save-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rp-unsaved-hint {
  font-size: 13px;
  color: var(--warning);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rp-unsaved-hint::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
  animation: pulse 1.5s infinite;
}

/* Checkbox in module header - compact */
.rp-module-header .el-checkbox {
  margin-right: 0;
}

.rp-module-header .el-checkbox__label {
  display: none;
}

/* Responsive */
@media (max-width: 900px) {
  .rp-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .rp-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .rp-search-input {
    max-width: none;
  }

  .rp-toolbar-actions {
    margin-left: 0;
    justify-content: flex-end;
  }

  .rp-modules-area {
    padding: 12px 16px;
  }
}

@media (max-width: 640px) {
  .rp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .rp-tab {
    padding: 12px 14px;
    font-size: 13px;
  }

  .rp-save-bar {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .rp-save-bar-right {
    justify-content: flex-end;
  }
}

/* ======================================================
   全局设置 (Global Settings) — Soft UI / Neumorphism
   ====================================================== */

.global-settings-page {
  --gs-page-bg: var(--bg-global);
  --gs-card-bg: var(--bg-card);
  --gs-surface: var(--bg-surface);
  --gs-surface-2: var(--bg-surface-2);
  --gs-accent: var(--accent);
  --gs-accent-hover: var(--accent-hover);
  --gs-accent-light: var(--accent-light);
  --gs-accent-glow: var(--accent-glow);
  --gs-text-1: var(--text-primary);
  --gs-text-2: var(--text-secondary);
  --gs-text-3: var(--text-muted);
  --gs-danger: var(--danger);
  --gs-success: var(--success);
  --gs-warning: var(--warning);
  --gs-radius: var(--radius);
  --gs-radius-sm: var(--radius-sm);
  --gs-radius-pill: var(--radius-pill);
  --gs-shadow: var(--shadow);
  --gs-shadow-sm: var(--shadow-sm);
  --gs-shadow-inset: var(--shadow-inset);
  --gs-transition: var(--transition);
}

.gs-tab-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: gsFadeIn 0.35s ease;
}

@keyframes gsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Cards ── */
.gs-card {
  background: var(--gs-card-bg);
  border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow);
  border: none;
  overflow: hidden;
  transition: box-shadow var(--gs-transition);
}

.gs-card:hover {
  box-shadow: var(--shadow-lg);
}

.gs-card-warning {
  background: linear-gradient(135deg, var(--gs-card-bg) 0%, rgba(245,158,11,0.06) 100%);
}

.gs-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.gs-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gs-text-1);
  letter-spacing: -0.01em;
}

.gs-card-body {
  padding: 22px 26px;
}

/* ── Form Grid ── */
.gs-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.gs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gs-field-full {
  grid-column: 1 / -1;
}

.gs-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gs-text-2);
}

/* ── Inputs (Neumorphic Inset) ── */
.gs-input-wrap {
  position: relative;
}

.gs-input,
.gs-textarea,
.gs-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--gs-text-1);
  background: var(--gs-surface);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: var(--gs-shadow-inset);
  outline: none;
  transition: box-shadow 0.25s, border-color 0.25s;
  font-family: inherit;
}

.gs-input:hover,
.gs-textarea:hover,
.gs-select:hover {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}

.gs-input:focus,
.gs-textarea:focus,
.gs-select:focus {
  box-shadow: 0 0 0 2px var(--gs-accent-glow);
  border-color: transparent;
}

.gs-input::placeholder,
.gs-textarea::placeholder {
  color: var(--gs-text-3);
}

.gs-input-xs {
  width: 80px;
  padding: 6px 10px;
  font-size: 13px;
  text-align: center;
}

.gs-input-table {
  width: 100px;
  padding: 6px 10px;
  font-size: 13px;
  text-align: center;
}

.gs-textarea {
  resize: vertical;
  line-height: 1.65;
}

.gs-textarea-lg {
  min-height: 130px;
}

.gs-textarea-code {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
}

.gs-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

.gs-input-readonly {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gs-input-readonly .gs-input {
  flex: 1;
}

/* ── Field Error ── */
.gs-field-error {
  font-size: 12px;
  color: var(--gs-danger);
  margin: 2px 0 0;
}

/* ── Buttons ── */
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.22,.61,.36,1);
  white-space: nowrap;
  font-family: inherit;
}

.gs-btn-primary {
  background: var(--gs-accent);
  color: var(--gs-text-1);
  box-shadow: 0 4px 14px var(--gs-accent-glow);
}

.gs-btn-primary:hover:not(:disabled) {
  background: var(--gs-accent-hover);
  box-shadow: 0 6px 22px rgba(255,209,42,0.35);
  transform: translateY(-1px);
}

.gs-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.gs-btn-primary.is-loading {
  pointer-events: none;
}

.gs-btn-secondary {
  background: var(--gs-card-bg);
  color: var(--gs-text-2);
  box-shadow: var(--gs-shadow-sm);
}

.gs-btn-secondary:hover:not(:disabled) {
  background: var(--gs-accent-light);
  color: var(--gs-text-1);
  box-shadow: var(--gs-shadow);
}

.gs-btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gs-btn-danger {
  background: var(--gs-danger);
  color: #fff;
  box-shadow: 0 4px 14px rgba(239,68,68,0.25);
}

.gs-btn-danger:hover:not(:disabled) {
  background: #dc2626;
  box-shadow: 0 6px 22px rgba(239,68,68,0.35);
  transform: translateY(-1px);
}

.gs-btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.gs-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: var(--gs-card-bg);
  color: var(--gs-text-2);
  box-shadow: var(--gs-shadow-sm);
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

.gs-btn-sm:hover {
  background: var(--gs-accent-light);
  color: var(--gs-text-1);
  box-shadow: var(--gs-shadow);
  transform: translateY(-1px);
}

.gs-btn-sm-danger {
  color: var(--gs-danger);
}

.gs-btn-sm-danger:hover {
  background: rgba(239,68,68,0.08);
  color: #dc2626;
}

.gs-inline-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: var(--gs-accent-light);
  color: var(--gs-accent-hover);
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.gs-inline-btn:hover {
  background: var(--gs-accent);
  color: var(--gs-text-1);
}

.gs-btn-link {
  background: none;
  border: none;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gs-accent-hover);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  border-radius: 6px;
  font-family: inherit;
}

.gs-btn-link:hover {
  background: var(--gs-accent-light);
  color: var(--gs-text-1);
}

.gs-btn-link-danger {
  color: var(--gs-danger);
}

.gs-btn-link-danger:hover {
  background: rgba(239,68,68,0.06);
  color: #dc2626;
}

.gs-btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--gs-text-3);
  cursor: pointer;
  transition: all 0.15s;
}

.gs-btn-copy:hover {
  background: var(--gs-surface);
  color: var(--gs-text-1);
}

.gs-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Actions Bar (bottom sticky) ── */
.gs-actions-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(0,0,0,0.04);
  margin-top: 4px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg-global) 60%, transparent);
  z-index: 5;
}

/* ── Spinner ── */
.gs-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: var(--gs-text-1);
  border-radius: 50%;
  animation: gsSpin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes gsSpin {
  to { transform: rotate(360deg); }
}

/* ── Toggle Switch (custom, neumorphic) ── */
.gs-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.gs-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.gs-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: var(--gs-surface-2);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1), inset -1px -1px 3px rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
}

.gs-switch-slider::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
}

.gs-switch input:checked + .gs-switch-slider {
  background: var(--gs-accent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.gs-switch input:checked + .gs-switch-slider::after {
  transform: translateX(22px);
}

.gs-switch-warning input:checked + .gs-switch-slider {
  background: var(--gs-warning);
}

/* ── Toggle Row ── */
.gs-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

.gs-toggle-row:last-child {
  border-bottom: none;
}

.gs-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gs-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gs-text-1);
}

.gs-toggle-desc {
  font-size: 12px;
  color: var(--gs-text-3);
}

.gs-toggles-group {
  display: flex;
  flex-direction: column;
}

/* ── Lockout Inline ── */
.gs-lockout-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 0;
  font-size: 14px;
  color: var(--gs-text-2);
  flex-wrap: wrap;
}

/* ── Radio Group ── */
.gs-radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.gs-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--gs-text-1);
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}

.gs-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gs-radio-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gs-surface);
  box-shadow: var(--gs-shadow-inset);
  position: relative;
  flex-shrink: 0;
  transition: box-shadow 0.25s;
}

.gs-radio-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gs-accent);
  transform: translate(-50%,-50%) scale(0);
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
}

.gs-radio input:checked ~ .gs-radio-dot::after {
  transform: translate(-50%,-50%) scale(1);
}

.gs-radio input:checked ~ .gs-radio-dot {
  box-shadow: 0 0 0 2px var(--gs-accent-glow);
}

/* ── Upload Zone ── */
.gs-upload-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.gs-upload-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gs-upload-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gs-upload-rule {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--gs-text-3);
  line-height: 1.4;
}

.gs-upload-zone {
  width: 160px;
  height: 160px;
  border-radius: 16px;
  background: var(--gs-surface);
  box-shadow: var(--gs-shadow-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
  overflow: hidden;
}

.gs-upload-zone:hover {
  box-shadow: 0 0 0 2px var(--gs-accent-glow);
}

.gs-upload-zone-sm {
  width: 100px;
  height: 100px;
  border-radius: 12px;
}

.gs-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gs-text-3);
  font-size: 12px;
  font-weight: 500;
}

.gs-upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-preview-circle {
  border-radius: 50%;
}

.gs-preview-square-sm {
  border-radius: 8px;
}

.gs-upload-actions {
  display: flex;
  gap: 8px;
}

/* ── OAuth List ── */
.gs-oauth-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gs-oauth-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--gs-surface);
  border-radius: 14px;
  transition: box-shadow 0.2s;
}

.gs-oauth-item:hover {
  box-shadow: var(--gs-shadow-sm);
}

.gs-oauth-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gs-oauth-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-oauth-wechat { background: rgba(7,193,96,0.1); color: #07c160; }
.gs-oauth-github { background: rgba(36,41,47,0.08); color: #24292f; }
.gs-oauth-qq     { background: rgba(18,183,245,0.1); color: #12b7f5; }

.gs-oauth-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gs-text-1);
}

.gs-oauth-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Payment List ── */
.gs-payment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gs-payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--gs-surface);
  border-radius: 14px;
  transition: box-shadow 0.2s;
}

.gs-payment-item:hover {
  box-shadow: var(--gs-shadow-sm);
}

.gs-payment-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gs-payment-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-pay-wechat { background: rgba(7,193,96,0.1); color: #07c160; }
.gs-pay-alipay { background: rgba(0,166,226,0.1); color: #00a6e2; }
.gs-pay-bank   { background: rgba(99,102,241,0.08); color: #6366f1; }

.gs-payment-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--gs-text-1);
}

.gs-payment-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Tables ── */
.gs-table-wrap {
  overflow-x: auto;
}

.gs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.gs-table th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gs-text-2);
  text-align: left;
  background: var(--gs-surface);
  border-bottom: none;
  white-space: nowrap;
}

.gs-table th:first-child { border-radius: 12px 0 0 12px; }
.gs-table th:last-child  { border-radius: 0 12px 12px 0; }

.gs-table td {
  padding: 12px 14px;
  color: var(--gs-text-1);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  vertical-align: middle;
}

.gs-table tbody tr:hover td {
  background: var(--gs-accent-light);
}

.gs-table tbody tr:last-child td {
  border-bottom: none;
}

.gs-url-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gs-text-2);
  font-size: 12px;
}

.gs-key-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gs-code-mask {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  color: var(--gs-text-2);
  background: var(--gs-surface);
  padding: 3px 8px;
  border-radius: 6px;
}

.gs-empty-cell {
  text-align: center;
  color: var(--gs-text-3);
  padding: 24px 0 !important;
}

/* ── Tags ── */
.gs-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--gs-radius-pill);
  white-space: nowrap;
}

.gs-tag-blue  { background: rgba(99,102,241,0.1);  color: #6366f1; }
.gs-tag-green { background: rgba(34,197,94,0.1);   color: #16a34a; }
.gs-tag-gray  { background: rgba(156,163,175,0.15); color: #6b7280; }

/* ── Divider ── */
.gs-divider {
  height: 1px;
  background: rgba(0,0,0,0.04);
  margin: 18px 0;
}

/* ── Sub Title ── */
.gs-sub-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gs-text-1);
  margin: 0 0 12px;
}

/* ── Description Text ── */
.gs-desc-text {
  font-size: 14px;
  color: var(--gs-text-2);
  line-height: 1.7;
  margin: 0 0 16px;
}

/* ── Test Row ── */
.gs-test-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gs-test-result {
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.gs-test-safe {
  background: rgba(34,197,94,0.08);
  color: #16a34a;
}

.gs-test-danger {
  background: rgba(239,68,68,0.08);
  color: #dc2626;
}

/* ── Backup ── */
.gs-backup-top {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.gs-backup-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gs-backup-label {
  font-size: 12px;
  color: var(--gs-text-3);
  font-weight: 600;
}

.gs-backup-value {
  font-size: 14px;
  color: var(--gs-text-1);
  font-weight: 500;
}

/* ── Version ── */
.gs-version-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.gs-version-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gs-version-label {
  font-size: 12px;
  color: var(--gs-text-3);
  font-weight: 600;
}

.gs-version-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--gs-text-1);
  letter-spacing: -0.02em;
}

.gs-version-value small {
  font-size: 12px;
  font-weight: 500;
  color: var(--gs-text-3);
}

.gs-version-new {
  color: var(--gs-success);
}

/* ── Warning Text ── */
.gs-warning-text {
  font-size: 14px;
  color: var(--gs-text-2);
  line-height: 1.7;
  margin: 0 0 16px;
}

.gs-warning-text b {
  color: var(--gs-danger);
  font-weight: 700;
}

/* ── Dialog (Neumorphic Modal) ── */
.gs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: gsOverlayIn 0.2s ease;
}

@keyframes gsOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gs-dialog {
  width: 480px;
  max-width: 92vw;
  max-height: 85vh;
  background: var(--gs-card-bg);
  border-radius: var(--gs-radius);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  animation: gsDialogIn 0.3s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
}

.gs-dialog-sm {
  width: 400px;
}

@keyframes gsDialogIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.gs-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 16px;
  font-weight: 700;
  color: var(--gs-text-1);
}

.gs-dialog-header-danger {
  background: rgba(239,68,68,0.04);
  color: var(--gs-danger);
}

.gs-dialog-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--gs-text-3);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.gs-dialog-close:hover {
  background: var(--gs-surface);
  color: var(--gs-text-1);
}

.gs-dialog-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
}

.gs-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* ── Preview Content ── */
.gs-preview-content {
  font-size: 14px;
  color: var(--gs-text-1);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .gs-form-grid {
    grid-template-columns: 1fr;
  }

  .gs-upload-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .gs-upload-row {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .gs-card-body {
    padding: 16px 18px;
  }

  .gs-card-header {
    padding: 14px 18px;
  }

  .gs-upload-row-3 {
    grid-template-columns: 1fr;
  }

  .gs-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .gs-radio-group {
    flex-direction: column;
    gap: 8px;
  }

  .gs-lockout-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .gs-backup-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════
   Global Settings V2 — Single-page layout with Scrollspy
   ══════════════════════════════════════════════════════════ */

.gs-v2 {
  position: relative;
}

/* ── Loading Mask ── */
.gs-loading-mask {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 16px;
  min-height: 300px;
}

.gs-loading-spinner {
  animation: gs-spin 1.2s linear infinite;
  color: var(--gs-accent);
}

@keyframes gs-spin {
  to { transform: rotate(360deg); }
}

.gs-loading-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--gs-text-3);
  letter-spacing: 0.02em;
}

/* ── Fade transition ── */
.gs-fade-enter-active,
.gs-fade-leave-active {
  transition: opacity 0.3s ease;
}
.gs-fade-enter-from,
.gs-fade-leave-to {
  opacity: 0;
}

/* ── Layout: Scrollspy + Content ── */
.gs-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.gs-scrollspy {
  width: 164px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
  align-self: flex-start;
}

.gs-spy-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding: 0;
  background: transparent;
}

.gs-spy-track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0,0,0,0.06);
  border-radius: 1px;
}

.gs-spy-slider {
  position: absolute;
  left: -0.5px;
  width: 3px;
  background: var(--gs-text-1, #1a1a1a);
  border-radius: 2px;
  transition: top 0.35s cubic-bezier(.4,0,.2,1), height 0.35s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}

.gs-spy-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 14px 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gs-text-3);
  cursor: pointer;
  border-radius: 0;
  transition: color 0.22s ease, padding-left 0.22s ease;
  text-decoration: none;
  user-select: none;
  position: relative;
  letter-spacing: 0.01em;
}

.gs-spy-item:hover {
  color: var(--gs-text-1);
}

.gs-spy-item.is-active {
  color: var(--gs-text-1);
  font-weight: 600;
  padding-left: 22px;
}

.gs-spy-dot {
  display: none;
}

.gs-main {
  flex: 1;
  min-width: 0;
}

/* ── Section Entry Animation ── */
.gs-section-enter {
  animation: gs-section-in 0.45s ease-out both;
}

@keyframes gs-section-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gs-section-enter:nth-child(2) { animation-delay: 0.06s; }
.gs-section-enter:nth-child(3) { animation-delay: 0.12s; }
.gs-section-enter:nth-child(4) { animation-delay: 0.18s; }

/* ── Sections ── */
.gs-section {
  padding-bottom: 36px;
  margin-bottom: 12px;
  scroll-margin-top: 20px;
}

.gs-section + .gs-section {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 32px;
}

/* ── Section Title with accent bar ── */
.gs-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gs-text-1);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.gs-title-bar {
  display: inline-block;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--gs-accent);
  flex-shrink: 0;
}

.gs-sub-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--gs-text-1);
  margin: 0 0 16px;
  padding-left: 2px;
}

.gs-sub-heading-sm {
  font-size: 13px;
  font-weight: 600;
  color: var(--gs-text-2);
  margin: 0 0 10px;
  padding-left: 2px;
}

/* ── Light Divider ── */
.gs-divider-light {
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.02) 100%);
  margin: 28px 0;
}

/* ── Horizontal Form Layout ── */
.gs-h-field {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.gs-h-label {
  width: 120px;
  min-width: 120px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--gs-text-2);
  line-height: 38px;
  flex-shrink: 0;
}

.gs-h-control {
  flex: 1;
  max-width: 400px;
}

.gs-h-control-wide {
  max-width: 600px;
}

.gs-h-control-switch {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
}

.gs-h-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 400px;
}

.gs-h-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 40px;
}

/* ── Input Group ── */
.gs-input-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.gs-input-group .gs-input {
  border-radius: 12px 0 0 12px;
  border-right: none;
}

.gs-input-addon {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gs-accent);
  background: var(--gs-surface);
  border: 1px solid transparent;
  border-left: 1px solid rgba(0,0,0,0.06);
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.gs-input-addon:hover {
  background: var(--gs-accent-light);
}

/* ── Input error state ── */
.gs-input-error {
  border-color: var(--gs-danger, #ef4444) !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.1) !important;
}

/* ── Short Input ── */
.gs-input-short {
  width: 100px;
  max-width: 100px;
  text-align: center;
}

/* ── Unit text ── */
.gs-unit {
  font-size: 13px;
  color: var(--gs-text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Field Hint ── */
.gs-field-hint {
  font-size: 12px;
  color: var(--gs-text-3);
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gs-field-hint-nowrap {
  white-space: nowrap;
}

.gs-hint-ok {
  color: var(--gs-success, #22c55e);
}

/* ── Field Error ── */
.gs-field-error {
  font-size: 12px;
  color: var(--gs-danger, #ef4444);
  margin: 4px 0 0;
}

/* ── Hint Box ── */
.gs-hint-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,209,42,0.08);
  border: 1px solid rgba(255,209,42,0.15);
  color: var(--gs-text-2);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 8px;
  max-width: 600px;
}

.gs-hint-icon {
  flex-shrink: 0;
  color: var(--gs-accent);
  margin-top: 1px;
}

/* ── Switch Inline Rows ── */
.gs-switch-row-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-bottom: 16px;
  padding-left: 136px;
}

.gs-switch-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gs-text-1);
  font-weight: 500;
}

/* ── Lockout Inline ── */
.gs-lockout-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gs-text-1);
  padding-left: 136px;
  margin-top: -6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* ── Conditional blocks (expanding sub-forms) ── */
.gs-conditional-block {
  margin-top: 16px;
  padding: 16px 0 0;
  border-top: 1px dashed rgba(0,0,0,0.05);
  animation: gs-section-in 0.3s ease-out;
}

/* ── Compact Thumbnail Upload ── */
.gs-thumb-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-left: 136px;
  margin-bottom: 8px;
}

.gs-thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gs-thumb-zone {
  width: 160px;
  height: 90px;
  border-radius: 12px;
  border: 2px dashed rgba(0,0,0,0.1);
  background: var(--gs-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s ease;
  position: relative;
}

.gs-thumb-zone:hover {
  border-color: var(--gs-accent);
  box-shadow: 0 0 0 3px var(--gs-accent-glow);
  transform: translateY(-1px);
}

.gs-thumb-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 10px;
  pointer-events: none;
}

.gs-thumb-zone:hover .gs-thumb-hover {
  opacity: 1;
}

.gs-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gs-text-3);
  transition: color 0.2s;
}

.gs-thumb-zone:hover .gs-thumb-placeholder {
  color: var(--gs-accent);
}

.gs-thumb-label {
  font-size: 12px;
  color: var(--gs-text-3);
  font-weight: 500;
}

/* ── Toolbar Tag Selector ── */
.gs-toolbar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-tag-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gs-text-2);
  background: var(--gs-surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}

.gs-tag-btn:hover {
  border-color: var(--gs-accent);
  color: var(--gs-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.gs-tag-btn.is-on {
  background: var(--gs-accent);
  color: #fff;
  border-color: var(--gs-accent);
  box-shadow: 0 2px 8px rgba(255,180,0,0.2);
}

.gs-tag-btn.is-on:hover {
  background: var(--gs-accent-hover);
  border-color: var(--gs-accent-hover);
  color: #fff;
}

/* ── Sensitive Words Block ── */
.gs-sensitive-block {
  padding-left: 136px;
}

.gs-sensitive-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.gs-sensitive-actions {
  display: flex;
  gap: 4px;
}

.gs-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--gs-surface);
  color: var(--gs-text-3);
  cursor: pointer;
  transition: all 0.18s;
}

.gs-icon-btn:hover {
  background: var(--gs-accent-light);
  color: var(--gs-accent);
  transform: translateY(-1px);
}

/* ── Notification Matrix ── */
.gs-matrix-wrap {
  max-width: 460px;
  padding-left: 136px;
}

.gs-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.gs-matrix th {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gs-text-2);
  text-align: center;
  background: var(--gs-surface);
  border-bottom: none;
  white-space: nowrap;
}

.gs-matrix th:first-child {
  text-align: left;
  border-radius: 10px 0 0 10px;
}

.gs-matrix th:last-child {
  border-radius: 0 10px 10px 0;
}

.gs-matrix td {
  padding: 10px 16px;
  color: var(--gs-text-1);
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  vertical-align: middle;
}

.gs-matrix td:first-child {
  text-align: left;
  font-weight: 500;
}

.gs-matrix tbody tr:last-child td {
  border-bottom: none;
}

.gs-matrix tbody tr {
  transition: background 0.15s;
}

.gs-matrix tbody tr:hover {
  background: rgba(0,0,0,0.015);
}

.gs-matrix-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gs-matrix-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gs-accent);
  cursor: pointer;
}

.gs-matrix-check span {
  display: none;
}

/* ── Sticky Footer ── */
.gs-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 100;
  margin: 0 -20px;
  padding: 0 20px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.gs-footer-dirty {
  border-top-color: var(--gs-accent);
  box-shadow: 0 -4px 24px rgba(255,180,0,0.1);
}

.gs-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  max-width: 100%;
}

.gs-sticky-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-sticky-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-dirty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gs-warning, #d97706);
  background: rgba(245,158,11,0.1);
  border-radius: 20px;
  animation: gs-pulse-badge 2s ease-in-out infinite;
}

.gs-readonly-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: rgba(148, 163, 184, 0.16);
  border-radius: 20px;
}

.gs-form-shell {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.gs-thumb-row--compact {
  gap: 16px;
}

@keyframes gs-pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── Policy card in dialog ── */
.gs-policy-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  transition: box-shadow 0.2s;
}

.gs-policy-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.gs-policy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}

/* ── Button enhancements for V2 ── */
.gs-v2 .gs-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.gs-v2 .gs-btn-sm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gs-v2 .gs-btn-sm:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.gs-v2 .gs-btn-sm-danger {
  color: var(--gs-danger);
}

.gs-v2 .gs-btn-sm-danger:hover {
  background: rgba(239,68,68,0.08);
}

/* ── Radio Group ── */
.gs-v2 .gs-radio-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding-left: 136px;
}

/* ── V2 Responsive ── */
@media (max-width: 1100px) {
  .gs-h-row-2 {
    grid-template-columns: 1fr;
  }

  .gs-scrollspy {
    display: none;
  }

  .gs-layout {
    gap: 0;
  }
}

@media (max-width: 768px) {
  .gs-h-field {
    flex-direction: column;
    gap: 4px;
  }

  .gs-h-label {
    width: auto;
    text-align: left;
    line-height: 1.4;
  }

  .gs-h-control,
  .gs-h-control-wide {
    max-width: 100%;
  }

  .gs-switch-row-group,
  .gs-thumb-row,
  .gs-sensitive-block,
  .gs-matrix-wrap,
  .gs-lockout-inline,
  .gs-v2 .gs-radio-group {
    padding-left: 0;
  }

  .gs-sticky-footer {
    margin: 0 -12px;
    padding: 0 12px;
  }

  .gs-thumb-zone {
    width: 120px;
    height: 68px;
  }
}

/* ======== Live Console Page ======== */
.live-console-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.live-layout {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
  height: calc(100vh - 200px);
}

.live-preview-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
}

/* --- Stats Bar --- */
.live-stats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--cream-dark, #F1ECDF);
  box-shadow: var(--shadow-neu-sm, 3px 3px 8px rgba(174,164,140,0.18), -3px -3px 8px rgba(255,255,250,0.70));
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
}

.live-stats-bar .stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,0.04);
  transition: background 0.2s;
}

.live-stats-bar .stat-chip:hover {
  background: rgba(255,255,255,0.8);
}

.live-stats-bar .stat-chip b {
  color: #2A2C32;
  font-weight: 700;
}

/* --- Video Area --- */
.live-video-wrap {
  position: relative;
  flex: 1;
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  background: #111827;
  box-shadow: var(--shadow-neu, 5px 5px 14px rgba(174,164,140,0.18), -5px -5px 14px rgba(255,255,250,0.70));
}

.live-local-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.live-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #6B7280;
  font-size: 14px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(30,30,50,0.6) 0%, rgba(17,24,39,0.95) 100%);
}

.live-preview-placeholder p {
  color: #9CA3AF;
  font-size: 13px;
}

/* --- Whiteboard --- */
.live-whiteboard-container {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 5;
}

.live-whiteboard-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

.live-wb-toolbar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(17, 24, 39, 0.88);
  backdrop-filter: blur(12px);
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 20;
  flex-wrap: wrap;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.live-wb-color-picker {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.15);
  background: none;
  cursor: pointer;
  border-radius: 8px;
  padding: 0;
  transition: border-color 0.2s;
}

.live-wb-color-picker:hover {
  border-color: rgba(255,255,255,0.4);
}

.live-wb-size-slider {
  width: 60px;
  accent-color: #e94560;
}

/* --- PiP Window --- */
.live-pip-window {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 180px;
  height: 135px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.15);
  background: #000;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.live-pip-window:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 32px rgba(0,0,0,0.5);
}

.live-pip-window video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Controls Bar --- */
.live-controls-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--cream-dark, #F1ECDF);
  box-shadow: var(--shadow-neu-sm, 3px 3px 8px rgba(174,164,140,0.18), -3px -3px 8px rgba(255,255,250,0.70));
  flex-shrink: 0;
  flex-wrap: wrap;
}

.live-controls-bar .el-button {
  border-radius: 10px !important;
  font-weight: 500;
}

.live-controls-bar .el-select {
  --el-border-radius-base: 10px;
}

/* --- URL Bar --- */
.live-url-bar {
  padding: 10px 14px;
  font-size: 11px;
  border-radius: 12px;
  background: var(--cream-dark, #F1ECDF);
  flex-shrink: 0;
}

.live-url-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.live-url-label {
  font-weight: 600;
  color: #666;
  white-space: nowrap;
  font-size: 11px;
}

.live-url-value {
  color: #888;
  word-break: break-all;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  background: rgba(0,0,0,0.03);
  padding: 2px 8px;
  border-radius: 6px;
}

/* --- Right Panel --- */
.live-panel-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
  overflow-y: auto;
}

/* --- Info Card --- */
.live-info-card {
  border-radius: 16px !important;
  background: var(--cream, #F8F4EA) !important;
  box-shadow: var(--shadow-neu-sm, 3px 3px 8px rgba(174,164,140,0.18), -3px -3px 8px rgba(255,255,250,0.70)) !important;
  border: none !important;
  transition: box-shadow 0.25s;
}

.live-info-card .el-card__header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.live-info-card .el-card__body {
  padding: 12px 16px 14px;
}

.live-info-card .live-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.live-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-info-label {
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 500;
}

.live-info-value {
  font-size: 13px;
  color: #374151;
  font-weight: 600;
}

.live-info-value.online-count {
  color: #059669;
  font-size: 18px;
  font-weight: 700;
}

/* --- Interact Card --- */
.live-interact-card {
  border-radius: 16px !important;
  background: var(--cream, #F8F4EA) !important;
  box-shadow: var(--shadow-neu-sm, 3px 3px 8px rgba(174,164,140,0.18), -3px -3px 8px rgba(255,255,250,0.70)) !important;
  border: none !important;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.live-interact-card .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Tabs --- */
.live-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.live-tabs .el-tabs__header {
  margin-bottom: 0;
  background: rgba(0,0,0,0.02);
  border-radius: 0;
  padding: 0 4px;
}

.live-tabs .el-tabs__nav-wrap::after {
  height: 1px;
  background: rgba(0,0,0,0.06);
}

.live-tabs .el-tabs__item {
  font-size: 13px;
  font-weight: 500;
  padding: 0 16px;
  height: 42px;
  line-height: 42px;
  transition: color 0.2s;
}

.live-tabs .el-tabs__active-bar {
  height: 2.5px;
  border-radius: 2px;
}

.live-tabs .el-tabs__content {
  flex: 1;
  overflow: hidden;
}

.live-tabs .el-tab-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Messages --- */
.live-msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  min-height: 120px;
  max-height: 320px;
  scroll-behavior: smooth;
}

.live-msg-list::-webkit-scrollbar {
  width: 4px;
}

.live-msg-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

.live-msg-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  font-size: 13px;
  transition: background 0.15s;
  animation: live-msg-fadein 0.25s ease-out;
}

.live-msg-item:hover {
  background: rgba(0,0,0,0.03);
}

@keyframes live-msg-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.live-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.live-msg-avatar.teacher {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.live-msg-body {
  flex: 1;
  min-width: 0;
}

.live-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.live-msg-name {
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  font-size: 12px;
}

.live-msg-name.teacher {
  color: #DC2626;
}

.live-msg-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  height: 16px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: linear-gradient(135deg, #f5576c, #ff6b6b);
  color: #fff;
  line-height: 16px;
}

.live-msg-time {
  color: #C0C0C0;
  font-size: 10px;
  white-space: nowrap;
  margin-left: auto;
}

.live-msg-text {
  color: #555;
  word-break: break-word;
  line-height: 1.5;
  font-size: 13px;
}

.live-msg-input {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
  background: rgba(255,255,255,0.3);
}

.live-msg-input .el-input-group__append {
  border-radius: 0 10px 10px 0 !important;
}

.live-msg-input .el-input__wrapper {
  border-radius: 10px 0 0 10px !important;
}

/* --- Hands --- */
.live-hand-list,
.live-qa-list {
  padding: 10px 14px;
  overflow-y: auto;
  max-height: 380px;
}

.live-hand-list::-webkit-scrollbar,
.live-qa-list::-webkit-scrollbar {
  width: 4px;
}

.live-hand-list::-webkit-scrollbar-thumb,
.live-qa-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

.live-hand-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(0,0,0,0.04);
  transition: background 0.15s, box-shadow 0.15s;
  animation: live-msg-fadein 0.25s ease-out;
}

.live-hand-item:hover {
  background: rgba(255,255,255,0.65);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.live-hand-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.live-hand-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #c44d34;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.live-hand-detail {
  flex: 1;
  min-width: 0;
}

.live-hand-name {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.live-hand-time {
  font-size: 11px;
  color: #9CA3AF;
}

.live-hand-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* --- Q&A --- */
.live-qa-item {
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(0,0,0,0.04);
  transition: background 0.15s, box-shadow 0.15s;
  animation: live-msg-fadein 0.25s ease-out;
}

.live-qa-item:hover {
  background: rgba(255,255,255,0.65);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.live-qa-item.pinned {
  background: linear-gradient(135deg, rgba(255,236,180,0.3) 0%, rgba(255,209,42,0.12) 100%);
  border: 1px solid rgba(255,209,42,0.25);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}

.live-qa-question {
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid #6366F1;
}

.live-qa-answer {
  font-size: 12px;
  color: #059669;
  padding: 8px 10px;
  background: rgba(5,150,105,0.06);
  border-radius: 8px;
  margin-top: 6px;
  line-height: 1.5;
}

.live-qa-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* --- Empty State --- */
.live-empty-tip {
  text-align: center;
  color: #C0C0C0;
  font-size: 13px;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.live-empty-icon {
  font-size: 36px;
  opacity: 0.3;
}

/* --- Event Log Card --- */
.live-log-card {
  border-radius: 16px !important;
  background: var(--cream, #F8F4EA) !important;
  box-shadow: var(--shadow-neu-sm, 3px 3px 8px rgba(174,164,140,0.18), -3px -3px 8px rgba(255,255,250,0.70)) !important;
  border: none !important;
}

.live-log-card .el-card__header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.live-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.live-log-list {
  max-height: 160px;
  overflow-y: auto;
  font-size: 12px;
  font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
  padding: 4px 0;
}

.live-log-list::-webkit-scrollbar {
  width: 4px;
}

.live-log-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.08);
  border-radius: 4px;
}

.live-log-item {
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.6;
  display: flex;
  align-items: baseline;
  gap: 6px;
  transition: background 0.12s;
}

.live-log-item:hover {
  background: rgba(0,0,0,0.025);
}

.live-log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D1D5DB;
  flex-shrink: 0;
  margin-top: 5px;
}

.live-log-item.error .live-log-dot { background: #EF4444; }
.live-log-item.success .live-log-dot { background: #10B981; }
.live-log-item.warn .live-log-dot { background: #F59E0B; }
.live-log-item.info .live-log-dot { background: #6366F1; }

.live-log-time {
  color: #9CA3AF;
  margin-right: 4px;
  font-size: 11px;
  flex-shrink: 0;
}

.live-log-msg {
  flex: 1;
  color: #555;
  word-break: break-all;
}

.live-log-item.error .live-log-msg { color: #EF4444; }
.live-log-item.success .live-log-msg { color: #059669; }
.live-log-item.warn .live-log-msg { color: #D97706; }

/* --- Status Dot --- */
.live-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.live-status-dot.idle { background: #9CA3AF; }
.live-status-dot.connecting { background: #ffc107; animation: live-pulse 1s infinite; }
.live-status-dot.pushing { background: #10B981; animation: live-pulse 2s infinite; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.live-status-dot.error { background: #EF4444; }

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Stream Check --- */
.live-stream-check {
  margin-top: 12px;
}

.live-stream-check-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: white;
  padding: 8px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

.live-stream-check-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}

.live-stream-check-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.live-stream-result {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  animation: live-msg-fadein 0.3s ease-out;
}

.live-stream-result.ok {
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  color: #065F46;
}

.live-stream-result.fail {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  color: #991B1B;
}

/* --- Cloud Offline --- */
.live-cloud-offline {
  background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.08));
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
  color: #92400E;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-cloud-offline-btn {
  margin-left: auto;
  background: #F59E0B;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s;
}

.live-cloud-offline-btn:hover {
  background: #D97706;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .live-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .live-video-wrap {
    min-height: 280px;
  }
  .live-pip-window {
    width: 120px;
    height: 90px;
  }
  .live-controls-bar {
    padding: 8px 10px;
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .live-stats-bar .stat-chip {
    padding: 2px 6px;
    font-size: 11px;
  }
  .live-msg-item {
    padding: 6px 8px;
  }
  .live-hand-item {
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .live-hand-actions {
    align-self: flex-end;
  }
}

/* ======== Playback Dialog Dark Theme ======== */
.playback-dialog .el-dialog {
  background: #1a1a2e !important;
  border-radius: 16px;
  overflow: hidden;
}

.playback-dialog .el-dialog__header {
  background: #1a1a2e;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 16px 20px 12px;
}

.playback-dialog .el-dialog__title {
  color: #E5E7EB !important;
  font-weight: 600;
}

.playback-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #9CA3AF;
}

.playback-dialog .el-dialog__headerbtn:hover .el-dialog__close {
  color: #fff;
}

.playback-dialog .el-dialog__body {
  background: #1a1a2e;
  padding: 12px 20px 20px;
}

.playback-dialog .el-button-group .el-button {
  border-color: rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #9CA3AF !important;
}

.playback-dialog .el-button-group .el-button:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #E5E7EB !important;
}

.playback-dialog .el-button-group .el-button--primary {
  background: rgba(99,102,241,0.8) !important;
  border-color: rgba(99,102,241,0.6) !important;
  color: #fff !important;
}

/* ======== My Profile Page ======== */
.profile-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.profile-hero-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-avatar-wrapper {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform var(--transition);
}

.profile-avatar-wrapper:hover {
  transform: scale(1.04);
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.profile-avatar-wrapper:hover .profile-avatar-overlay {
  opacity: 1;
}

.profile-hero-avatar {
  background: var(--brand-attila-red) !important;
  color: var(--text-on-dark-bg) !important;
  font-weight: 700;
  font-size: 28px;
  flex-shrink: 0;
}

.profile-hero-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-hero-name-row {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.profile-hero-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.profile-hero-name:hover {
  color: var(--brand-attila-red);
}

.profile-name-edit-icon {
  font-size: 16px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.profile-hero-name:hover .profile-name-edit-icon {
  opacity: 1;
}

.profile-name-editor {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}

.profile-hero-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-tabs {
  background: transparent;
}

.profile-tabs .el-tabs__header {
  background: var(--bg-card);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 0 24px;
  box-shadow: var(--shadow-neu-sm);
  margin-bottom: 0;
}

.profile-tabs .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

.profile-tabs .el-tabs__nav-wrap::after {
  height: 1px;
  background: var(--border-divider);
}

.profile-tabs .el-tabs__item {
  height: 50px;
  font-size: 14px;
  font-weight: 600;
}

.profile-tabs .el-tabs__item.is-active {
  color: var(--brand-attila-red);
}

.profile-tabs .el-tabs__active-bar {
  background-color: var(--brand-attila-red);
}

.profile-tabs .el-tabs__content {
  padding: 0;
}

.profile-section-card {
  background: var(--bg-card);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 28px 32px;
  box-shadow: var(--shadow-neu-sm);
}

.profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-section-header h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.profile-form {
  max-width: 100%;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 24px;
}

.profile-form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.profile-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.profile-perm-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(191, 0, 0, 0.04);
  color: var(--text-secondary);
  font-size: 14px;
}

.profile-perm-notice .el-icon {
  color: var(--brand-attila-red);
  font-size: 18px;
}

.profile-perm-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-perm-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-perm-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-perm-tag {
  display: inline-flex;
  align-items: center;
}

.profile-perm-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 768px) {
  .profile-hero-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .profile-hero-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .profile-section-card {
    padding: 20px 16px;
  }

  .profile-tabs .el-tabs__header {
    padding: 0 16px;
  }

  .profile-form-grid {
    grid-template-columns: 1fr;
  }
}