/*
 * KONGBAOBAO V4 — Signature Command Studio
 * A distinct horizontal-control layout shared by the client and admin console.
 */

:root {
  --v4-ink: #111b2e;
  --v4-ink-2: #1a2943;
  --v4-paper: #f3f6fb;
  --v4-surface: #ffffff;
  --v4-surface-2: #f7f9fd;
  --v4-line: rgba(31, 62, 112, .105);
  --v4-muted: #6f7e94;
  --v4-blue: #276cf2;
  --v4-blue-hover: #1758d6;
  --v4-blue-soft: #eaf2ff;
  --v4-purple: #6558e8;
  --v4-purple-soft: #efedff;
  --v4-teal: #159b78;
  --v4-teal-soft: #e8f7f2;
  --v4-danger: #d95162;
  --v4-shadow: 0 16px 42px rgba(24, 53, 94, .07);
  --v4-shadow-hover: 0 22px 55px rgba(24, 53, 94, .115);
}

html,
body {
  background:
    radial-gradient(circle at 13% 8%, rgba(39, 108, 242, .07), transparent 24%),
    radial-gradient(circle at 90% 90%, rgba(101, 88, 232, .045), transparent 25%),
    var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* ---------- Shared precision controls ---------- */
.el-button {
  min-height: 36px;
  border-color: rgba(31, 62, 112, .14) !important;
  border-radius: 11px !important;
  color: #43516a !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 2px 7px rgba(24, 53, 94, .035) !important;
  font-weight: 680 !important;
  letter-spacing: .05px;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease !important;
}

.el-button:hover,
.el-button:focus {
  border-color: rgba(39, 108, 242, .34) !important;
  color: var(--v4-blue) !important;
  background: #fff !important;
  transform: translateY(-1px);
}

.el-button--primary,
.el-button--primary:hover,
.el-button--primary:focus {
  border-color: #276cf2 !important;
  color: #fff !important;
  background: linear-gradient(118deg, #2377f4 0%, #3568e9 58%, #6256e8 120%) !important;
  box-shadow: 0 10px 24px rgba(39, 108, 242, .2) !important;
}

.el-button--danger,
.el-button--danger:hover,
.el-button--danger:focus {
  border-color: rgba(215, 84, 96, .18) !important;
  color: #fff !important;
  background: var(--v4-danger) !important;
}

.el-button--success,
.el-button--success:hover,
.el-button--success:focus {
  border-color: var(--v4-teal) !important;
  color: #fff !important;
  background: var(--v4-teal) !important;
}

.el-input__inner,
.el-textarea__inner,
textarea.code-export {
  border: 1px solid rgba(31, 62, 112, .12) !important;
  border-radius: 11px !important;
  color: var(--v4-ink) !important;
  background: #f8faff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: rgba(39, 108, 242, .62) !important;
  box-shadow: 0 0 0 4px rgba(39, 108, 242, .09) !important;
}

.el-switch.is-checked .el-switch__core { border-color: var(--v4-blue) !important; background: var(--v4-blue) !important; }
.el-tag { border-radius: 999px !important; font-weight: 680 !important; }
.el-tag--success { border-color: rgba(10,156,145,.18) !important; color: #087e76 !important; background: var(--v4-teal-soft) !important; }
.el-tag--primary { border-color: rgba(98,86,232,.16) !important; color: #5548d6 !important; background: var(--v4-purple-soft) !important; }
.el-dialog,
.el-message-box {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 24px !important;
  background: var(--v4-surface) !important;
  box-shadow: 0 35px 100px rgba(18,18,22,.28) !important;
}
.el-dialog__header { padding: 23px 26px 18px !important; border-bottom: 1px solid var(--v4-line) !important; }
.el-dialog__title { color: var(--v4-ink) !important; font-size: 18px !important; font-weight: 760 !important; }
.el-table { overflow: hidden; border-radius: 14px !important; color: #3d3f48 !important; background: transparent !important; }
.el-table::before,
.el-table--border::after { background-color: var(--v4-line) !important; }
.el-table th { color: #65748d !important; background: #f2f6fc !important; font-size: 12px !important; font-weight: 720 !important; }
.el-table td,
.el-table th.is-leaf { border-color: rgba(27,28,34,.075) !important; }
.el-table--enable-row-hover .el-table__body tr:hover > td { background: #f2f7ff !important; }

/* ---------- Client: dark masthead ---------- */
#app,
.app-shell {
  height: 100vh !important;
  min-width: 980px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.app-header,
.el-header.app-header {
  height: 76px !important;
  padding: 0 !important;
  border: 0 !important;
  background: #081426 !important;
  box-shadow: none !important;
}

.app-header > .app-header {
  width: 100% !important;
  height: 76px !important;
  padding: 0 25px 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background:
    radial-gradient(circle at 22% -120%, rgba(52,126,255,.6), transparent 34%),
    linear-gradient(100deg, #071322, #0b1c32 58%, #101c38) !important;
}

.app-header .brand { gap: 13px !important; }
.app-header .brand-logo {
  width: 43px !important;
  height: 43px !important;
  padding: 2px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 13px !important;
  background: #080a10 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
}
.app-header .brand-logo img { width: 100%; height: 100%; border-radius: 10px !important; object-fit: cover; }
.brand-copy-main { display: flex; flex-direction: column; gap: 3px; }
.app-header .brand-title { color: #fff !important; font-size: 19px !important; font-weight: 780 !important; letter-spacing: .6px !important; }
.app-header .brand-title::after { display: none !important; }
.brand-subtitle { color: rgba(226,225,245,.52); font-size: 8px; font-weight: 760; letter-spacing: 2.15px; }

.app-header .user-actions { gap: 9px !important; }
.app-header .user-actions > .el-button,
.app-header .notice-btn,
.app-header .feedback-btn {
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.8) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
}
.app-header .user-actions > .el-button:hover,
.app-header .notice-btn:hover,
.app-header .feedback-btn:hover { border-color: rgba(255,255,255,.28) !important; color: #fff !important; background: rgba(255,255,255,.1) !important; }
.app-header .recharge-btn {
  border-color: rgba(91,164,255,.28) !important;
  color: #a9d3ff !important;
  background: rgba(55,132,235,.12) !important;
}
.app-header .recharge-diamond { color: #63b8ff !important; }

/* Client navigation is a horizontal task control band, not a sidebar. */
.app-shell > .el-container {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 72px minmax(0, 1fr) !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.app-aside,
.el-aside.app-aside {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: auto !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 10px 28px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v4-line) !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(22px) !important;
  box-shadow: 0 7px 24px rgba(24,53,94,.04) !important;
  z-index: 8;
}

.app-menu,
.app-menu.el-menu {
  min-width: 0;
  flex: 1;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
}

.app-menu .el-menu-item {
  height: 48px !important;
  min-width: 150px;
  margin: 0 !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  color: #66758d !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  line-height: 48px !important;
}

.app-menu .el-menu-item i { margin-right: 9px !important; color: #8090a9 !important; font-size: 17px !important; }
.app-menu .el-menu-item:hover { color: var(--v4-ink) !important; background: #edf3fb !important; }
.app-menu .el-menu-item.is-active {
  border-color: #17305a !important;
  color: #fff !important;
  background: linear-gradient(120deg,#102849,#173866) !important;
  box-shadow: 0 9px 22px rgba(16,43,79,.18) !important;
}
.app-menu .el-menu-item.is-active i { color: #78b9ff !important; }
.app-menu .el-menu-item:nth-child(1).is-active,
.app-menu .el-menu-item:nth-child(2).is-active,
.app-menu .el-menu-item:nth-child(3).is-active { border-color: #17305a !important; background: linear-gradient(120deg,#102849,#173866) !important; }
.app-menu .dynamic-tag { margin-left: 8px !important; border: 0 !important; font-size: 9px !important; }

.aside-user-card {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 244px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 0 0 auto !important;
  padding: 6px 12px 6px 7px !important;
  flex: 0 0 244px;
  border: 1px solid rgba(31,62,112,.1) !important;
  border-radius: 14px !important;
  background: #f4f7fc !important;
  box-shadow: none !important;
}
.aside-user-card::before { display: none !important; }
.aside-user-avatar { width: 38px !important; height: 38px !important; line-height: 38px !important; background: linear-gradient(145deg,#347cf4,#5c57df) !important; }
.aside-user-name { color: var(--v4-ink) !important; font-size: 13px !important; font-weight: 740 !important; }
.aside-user-expire { margin-top: 2px !important; color: #8c8e96 !important; font-size: 10px !important; }

.app-main,
.el-main.app-main {
  grid-row: 2 !important;
  grid-column: 1 !important;
  min-height: 0 !important;
  padding: 28px 34px 40px !important;
  overflow-y: auto !important;
  background: transparent !important;
}
.workspace-section { max-width: 1500px; margin: 0 auto; }

.page-hero,
.workspace-section .page-hero {
  position: relative !important;
  min-height: 126px !important;
  margin-bottom: 21px !important;
  padding: 26px 30px 25px 34px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 25px 25px 25px 7px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 83% 12%, rgba(55,142,255,.42), transparent 24%),
    radial-gradient(circle at 100% 130%, rgba(101,88,232,.26), transparent 28%),
    linear-gradient(117deg, #081426 0%, #102748 56%, #1c3267 100%) !important;
  box-shadow: 0 21px 48px rgba(15,43,82,.16) !important;
}
.page-hero::before,
.workspace-section .page-hero::before {
  content: "01" !important;
  position: absolute !important;
  top: -25px !important;
  right: 178px !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  color: rgba(255,255,255,.055) !important;
  background: none !important;
  font-size: 128px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -10px;
}
.reply-section .page-hero::before { content: "02" !important; }
.accounts-section .page-hero::before { content: "03" !important; }
.page-hero::after { content: "" !important; display: block !important; position: absolute !important; right: 24px !important; bottom: 18px !important; width: 85px !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5)) !important; }
.page-hero h2 { margin: 0 0 8px !important; color: #fff !important; font-size: 27px !important; font-weight: 780 !important; letter-spacing: -.7px !important; }
.page-hero p { margin: 0 !important; max-width: 730px !important; color: rgba(239,239,247,.67) !important; font-size: 13px !important; line-height: 1.75 !important; }
.hero-badge {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 999px !important;
  color: #c9e4ff !important;
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(10px);
  font-size: 11px !important;
  letter-spacing: .3px;
}

.page-card,
.group-card,
.live-list,
.interaction-content-card,
.reply-workspace {
  border: 1px solid var(--v4-line) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--v4-shadow) !important;
  backdrop-filter: blur(18px) !important;
}
.page-card:hover,
.group-card:hover { box-shadow: var(--v4-shadow-hover) !important; }
.group-card { border-radius: 22px 22px 8px 22px !important; }
.interaction-content-card { border-radius: 22px 22px 22px 8px !important; }
.interaction-layout { grid-template-columns: 286px minmax(0, 1fr) !important; gap: 20px !important; }
.group-card-header { padding-bottom: 14px !important; border-bottom: 1px solid var(--v4-line) !important; }
.group-item { border: 1px solid transparent !important; border-radius: 13px !important; }
.group-item:hover { background: #f2f6fc !important; }
.group-item.active { border-color: rgba(39,108,242,.14) !important; color: #1f5dcc !important; background: var(--v4-blue-soft) !important; box-shadow: inset 3px 0 0 var(--v4-blue) !important; }
.phrase-editor-box { border-radius: 16px !important; background: #f3f7fc !important; }
.fixed-phrase-textarea .el-textarea__inner { background: #f9fbff !important; }
.ai-polish-btn { color: #574bd2 !important; background: #efedff !important; border-color: rgba(98,86,232,.15) !important; }

.ai-runtime-strip,
.account-health-strip {
  border: 1px solid var(--v4-line) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 9px 25px rgba(35,32,29,.05) !important;
}
.reply-card-heading h3 { color: var(--v4-ink) !important; font-size: 20px !important; }
.section-kicker { color: var(--v4-purple) !important; letter-spacing: 2px !important; }
.switch-line { border-color: var(--v4-line) !important; background: #f2f6fc !important; }

.live-list .el-card__body { display: flex !important; align-items: center !important; gap: 16px !important; }
.streamer-picker { flex: 1 !important; width: auto !important; margin: 0 !important; }
.streamer-current-avatar { background: linear-gradient(145deg,var(--v4-purple),#25262d) !important; box-shadow: 0 7px 17px rgba(71,64,160,.2) !important; }
.account-health-strip { background: linear-gradient(90deg,#f7faff,#f1f5fc) !important; }
.health-metric { border-right-color: var(--v4-line) !important; }
.trumpet-item,
.account-item { border-radius: 16px !important; background: #f8faff !important; }

/* ---------- Admin: horizontal operations ribbon ---------- */
.topbar {
  height: 76px !important;
  padding: 0 28px !important;
  border: 0 !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 30% -160%, rgba(52,126,255,.68), transparent 34%),
    linear-gradient(105deg,#071322,#0d1d35) !important;
  box-shadow: none !important;
}
.topbar .brand { color: #fff !important; }
.topbar .brand-logo { width: 43px !important; height: 43px !important; padding: 2px; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 13px !important; background: #080a10 !important; }
.topbar .brand-copy strong { color: #fff !important; font-size: 18px !important; letter-spacing: .5px; }
.topbar .brand-copy small { color: rgba(231,229,245,.48) !important; letter-spacing: 1.2px !important; }
.topbar-actions { gap: 10px !important; }
.topbar-actions .el-button { border-color: rgba(255,255,255,.13) !important; color: rgba(255,255,255,.8) !important; background: rgba(255,255,255,.055) !important; }
.service-pill { border-color: rgba(85,215,187,.2) !important; color: #9ee5d3 !important; background: rgba(27,130,110,.13) !important; }
.admin-profile { color: rgba(255,255,255,.76) !important; }
.profile-avatar { color: #fff !important; background: linear-gradient(145deg,#347cf4,#6258df) !important; }

.layout {
  min-height: 0 !important;
  padding: 14px 18px 18px !important;
  display: grid !important;
  grid-template-rows: 66px minmax(0, 1fr) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  background: transparent !important;
}
.sidebar {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: auto !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 30px rgba(24,53,94,.05) !important;
  backdrop-filter: blur(18px) !important;
}
.sidebar .nav {
  width: 100%;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.nav-section-title { display: none !important; }
.sidebar .nav-item {
  min-width: max-content;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #6d7b91 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}
.sidebar .nav-item i { width: auto !important; color: #8493a9 !important; font-size: 15px !important; }
.sidebar .nav-item:hover { color: var(--v4-ink) !important; background: #edf3fb !important; }
.sidebar .nav-item.active {
  border-color: #17305a !important;
  color: #fff !important;
  background: linear-gradient(120deg,#102849,#173866) !important;
  box-shadow: 0 8px 18px rgba(16,43,79,.16) !important;
}
.sidebar .nav-item.active i { color: #78b9ff !important; }
.sidebar-foot { display: none !important; }
.main {
  grid-row: 2 !important;
  grid-column: 1 !important;
  min-height: 0 !important;
  padding: 8px 10px 28px !important;
  overflow-y: auto !important;
  background: transparent !important;
}

.admin-hero {
  min-height: 132px !important;
  margin-bottom: 19px !important;
  padding: 27px 31px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 25px 25px 25px 7px !important;
  background:
    radial-gradient(circle at 82% 0%,rgba(55,142,255,.42),transparent 25%),
    radial-gradient(circle at 100% 130%,rgba(101,88,232,.26),transparent 28%),
    linear-gradient(118deg,#081426,#102748 60%,#1c3267) !important;
  box-shadow: 0 21px 48px rgba(15,43,82,.16) !important;
}
.admin-hero::before {
  content: "KB" !important;
  top: -34px !important;
  right: 185px !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  color: rgba(255,255,255,.05) !important;
  background: none !important;
  font-size: 140px !important;
  font-weight: 880 !important;
  letter-spacing: -12px;
}
.admin-hero h2 { color: #fff !important; font-size: 27px !important; }
.admin-hero p { color: rgba(239,239,247,.65) !important; }
.hero-kicker { color: #bdb7ff !important; letter-spacing: 2.1px !important; }
.hero-system { border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.8) !important; background: rgba(255,255,255,.06) !important; }
.hero-system strong { color: #fff !important; }
.hero-system small { color: rgba(255,255,255,.47) !important; }

.stats-grid { grid-template-columns: repeat(4,minmax(150px,1fr)) !important; gap: 14px !important; }
.stat-card {
  min-height: 112px !important;
  padding: 18px !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 18px 18px 18px 6px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--v4-shadow) !important;
}
.stat-card:hover { transform: translateY(-2px) !important; box-shadow: var(--v4-shadow-hover) !important; }
.stat-card::before { content: ""; position: absolute; right: 15px; top: 14px; width: 28px; height: 2px; border-radius: 2px; background: var(--stat-accent,var(--v4-purple)); opacity: .75; }
.stat-card .stat-icon { border-radius: 11px !important; color: var(--stat-accent,var(--v4-purple)) !important; background: var(--stat-soft,var(--v4-purple-soft)) !important; }
.stat-card .num { color: var(--v4-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-size: 29px !important; }
.stat-card .label { color: #718099 !important; }
.stat-card small { color: #9aa7ba !important; }

.widget {
  padding: 22px !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 20px 20px 20px 7px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--v4-shadow) !important;
}
.widget-title { padding-bottom: 14px !important; border-bottom: 1px solid var(--v4-line) !important; color: var(--v4-ink) !important; font-size: 16px !important; }
.admin-health-strip { border-color: var(--v4-line) !important; background: linear-gradient(90deg,#f7faff,#f1f5fc) !important; }
.ai-metric { border-color: var(--v4-line) !important; border-radius: 16px 16px 16px 5px !important; background: var(--v4-surface) !important; box-shadow: 0 8px 24px rgba(35,32,29,.05) !important; }

.login-screen {
  background:
    radial-gradient(circle at 16% 18%,rgba(53,126,255,.32),transparent 26%),
    radial-gradient(circle at 86% 85%,rgba(101,88,232,.22),transparent 27%),
    linear-gradient(135deg,#071322,#0d213d 58%,#182b58) !important;
}
.admin-login-card {
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 28px 28px 28px 9px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 35px 100px rgba(9,9,12,.38) !important;
}

/* ---------- V4.1 palette discipline: brand colors only ---------- */
.interaction-section {
  --section-accent: #276cf2 !important;
  --section-accent-hover: #1758d6 !important;
  --section-soft: #eaf2ff !important;
  --section-line: #c5dafe !important;
}
.reply-section {
  --section-accent: #6558e8 !important;
  --section-accent-hover: #5144d4 !important;
  --section-soft: #efedff !important;
  --section-line: #d8d3ff !important;
}
.accounts-section {
  --section-accent: #337bea !important;
  --section-accent-hover: #2466ce !important;
  --section-soft: #eaf2ff !important;
  --section-line: #c5dafe !important;
}
.workspace-section .el-button--primary,
.workspace-section .el-button--primary:hover,
.workspace-section .el-button--primary:focus {
  border-color: var(--section-accent) !important;
  background: linear-gradient(120deg,var(--section-accent),var(--section-accent-hover)) !important;
  box-shadow: 0 9px 20px color-mix(in srgb,var(--section-accent) 24%,transparent) !important;
}
.app-menu .el-menu-item:nth-child(1) i,
.app-menu .el-menu-item:nth-child(2) i,
.app-menu .el-menu-item:nth-child(3) i { color: #7c8da8 !important; }
.app-menu .el-menu-item:nth-child(1).is-active i,
.app-menu .el-menu-item:nth-child(2).is-active i,
.app-menu .el-menu-item:nth-child(3).is-active i { color: #79bbff !important; }
.app-menu .el-menu-item:nth-child(1).is-active,
.app-menu .el-menu-item:nth-child(2).is-active,
.app-menu .el-menu-item:nth-child(3).is-active { color: #fff !important; }
.app-menu .cloud-tag { color: #2367d6 !important; background: #e8f2ff !important; }
.app-menu .local-tag { color: #594bd7 !important; background: #efedff !important; }
.streamer-current-avatar { background: linear-gradient(145deg,#287cf4,#6558e8) !important; box-shadow: 0 7px 17px rgba(39,108,242,.2) !important; }
.interaction-section .ai-polish-btn { color: #2764cf !important; border-color: #d6e5ff !important; background: #edf4ff !important; }
.section-kicker { color: #4d6fd6 !important; }

.stat-card:nth-child(1) { --stat-accent: #276cf2 !important; --stat-soft: #eaf2ff !important; }
.stat-card:nth-child(2) { --stat-accent: #6558e8 !important; --stat-soft: #efedff !important; }
.stat-card:nth-child(3) { --stat-accent: #159b78 !important; --stat-soft: #e8f7f2 !important; }
.stat-card:nth-child(4) { --stat-accent: #268fd2 !important; --stat-soft: #e9f6fd !important; }
.stat-card:nth-child(5) { --stat-accent: #7562dc !important; --stat-soft: #f0edff !important; }
.stat-card:nth-child(6) { --stat-accent: #337bea !important; --stat-soft: #eaf2ff !important; }
.stat-card:nth-child(7) { --stat-accent: #536edc !important; --stat-soft: #edf1ff !important; }
.stat-card:nth-child(8) { --stat-accent: #bf872b !important; --stat-soft: #fff7e8 !important; }

@media (max-width: 1180px) {
  .app-aside,
  .el-aside.app-aside { padding-left: 18px !important; padding-right: 18px !important; gap: 10px !important; }
  .app-menu .el-menu-item { min-width: 136px; padding: 0 13px !important; }
  .aside-user-card { width: 220px !important; flex-basis: 220px; }
  .app-main,
  .el-main.app-main { padding: 24px !important; }
  .sidebar .nav-item { padding: 0 9px !important; font-size: 11px !important; }
}

@media (max-width: 1040px) {
  .brand-subtitle { display: none; }
  .app-menu .el-menu-item { min-width: 126px; }
  .aside-user-card { width: 196px !important; flex-basis: 196px; }
  .aside-user-expire { display: none; }
  .sidebar .nav-item { gap: 5px !important; padding: 0 8px !important; }
  .sidebar .nav-item i { display: none; }
  .stats-grid { grid-template-columns: repeat(3,minmax(150px,1fr)) !important; }
}

/* ---------- V4.2 visual harmony: one focal surface, one control language ---------- */
.app-header,
.el-header.app-header,
.app-header > .app-header,
.topbar {
  height: 66px !important;
  color: var(--v4-ink) !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid rgba(31,62,112,.09) !important;
  box-shadow: 0 5px 18px rgba(24,53,94,.035) !important;
}
.app-header > .app-header { padding: 0 25px 0 28px !important; }
.app-header .brand-logo,
.topbar .brand-logo {
  width: 40px !important;
  height: 40px !important;
  border-color: rgba(31,62,112,.12) !important;
  box-shadow: 0 7px 18px rgba(24,53,94,.10) !important;
}
.app-header .brand-title,
.topbar .brand,
.topbar .brand-copy strong { color: #101b2e !important; }
.brand-subtitle,
.topbar .brand-copy small { color: #8290a6 !important; }

.app-header .user-actions > .el-button,
.app-header .notice-btn,
.app-header .feedback-btn,
.topbar-actions .el-button {
  border-color: rgba(31,62,112,.11) !important;
  color: #5e6c82 !important;
  background: #f7f9fd !important;
  box-shadow: none !important;
}
.app-header .user-actions > .el-button:hover,
.app-header .notice-btn:hover,
.app-header .feedback-btn:hover,
.topbar-actions .el-button:hover {
  border-color: #c8dcff !important;
  color: #2464d3 !important;
  background: #eef4ff !important;
}
.app-header .recharge-btn {
  border-color: #cfe0ff !important;
  color: #2464d3 !important;
  background: #edf4ff !important;
}
.app-header .recharge-diamond { color: #3a7fea !important; }
.admin-profile { color: #536178 !important; }
.profile-avatar { color: #fff !important; background: linear-gradient(145deg,#357bf1,#5d62db) !important; }
.service-pill { border-color: #ccecdf !important; color: #148163 !important; background: #edf9f4 !important; }

.app-shell > .el-container { grid-template-rows: 64px minmax(0,1fr) !important; }
.app-aside,
.el-aside.app-aside {
  height: 64px !important;
  min-height: 64px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
}
.app-menu .el-menu-item {
  height: 44px !important;
  line-height: 44px !important;
  border-radius: 12px !important;
}
.app-menu .el-menu-item.is-active,
.app-menu .el-menu-item:nth-child(1).is-active,
.app-menu .el-menu-item:nth-child(2).is-active,
.app-menu .el-menu-item:nth-child(3).is-active {
  border-color: #cfe0ff !important;
  color: #225fca !important;
  background: #edf4ff !important;
  box-shadow: none !important;
}
.app-menu .el-menu-item.is-active i,
.app-menu .el-menu-item:nth-child(1).is-active i,
.app-menu .el-menu-item:nth-child(2).is-active i,
.app-menu .el-menu-item:nth-child(3).is-active i { color: #3477e5 !important; }
.app-menu .el-menu-item:hover { background: #f3f6fb !important; }
.aside-user-card {
  height: 48px !important;
  min-height: 48px !important;
  border-color: rgba(31,62,112,.09) !important;
  background: #f7f9fd !important;
}
.aside-user-avatar { width: 34px !important; height: 34px !important; line-height: 34px !important; }

.app-main,
.el-main.app-main { padding: 24px 34px 36px !important; }
.page-hero,
.workspace-section .page-hero,
.admin-hero {
  min-height: 114px !important;
  border-color: rgba(255,255,255,.16) !important;
  border-radius: 22px 22px 22px 8px !important;
  background:
    radial-gradient(circle at 84% 6%,rgba(141,198,255,.35),transparent 25%),
    radial-gradient(circle at 100% 130%,rgba(117,105,236,.28),transparent 29%),
    linear-gradient(118deg,#1857bf 0%,#2d6ad7 57%,#545ed4 100%) !important;
  box-shadow: 0 14px 34px rgba(30,78,155,.14) !important;
}
.page-hero,
.workspace-section .page-hero { padding-top: 23px !important; padding-bottom: 22px !important; }
.page-hero::before,
.workspace-section .page-hero::before,
.admin-hero::before { color: rgba(255,255,255,.07) !important; }
.page-hero p,
.admin-hero p { color: rgba(244,248,255,.76) !important; }
.hero-badge,
.workspace-section .hero-badge,
.hero-system {
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
  background: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
.hero-system strong { color: #fff !important; }
.hero-system small { color: rgba(255,255,255,.67) !important; }
.hero-kicker { color: #dceaff !important; }

.interaction-section,
.reply-section,
.accounts-section {
  --section-accent: #2e70e5 !important;
  --section-accent-hover: #235fc7 !important;
  --section-soft: #edf4ff !important;
  --section-line: #cfe0ff !important;
}
.workspace-section .el-button--primary,
.workspace-section .el-button--primary:hover,
.workspace-section .el-button--primary:focus,
.el-button--primary,
.el-button--primary:hover,
.el-button--primary:focus {
  border-color: #2e70e5 !important;
  background: #2e70e5 !important;
  box-shadow: 0 6px 15px rgba(46,112,229,.14) !important;
}
.page-card,
.group-card,
.live-list,
.interaction-content-card,
.reply-workspace,
.widget,
.stat-card {
  border-color: rgba(31,62,112,.09) !important;
  background: #fff !important;
  box-shadow: 0 9px 26px rgba(24,53,94,.055) !important;
}
.page-card:hover,
.group-card:hover,
.stat-card:hover { box-shadow: 0 13px 32px rgba(24,53,94,.085) !important; }
.ai-runtime-strip,
.account-health-strip,
.admin-health-strip { box-shadow: none !important; }

.layout {
  padding-top: 10px !important;
  grid-template-rows: 62px minmax(0,1fr) !important;
  gap: 12px !important;
}
.sidebar {
  height: 62px !important;
  min-height: 62px !important;
  border-color: rgba(31,62,112,.09) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(24,53,94,.04) !important;
}
.sidebar .nav-item { height: 44px !important; }
.sidebar .nav-item.active {
  border-color: #cfe0ff !important;
  color: #225fca !important;
  background: #edf4ff !important;
  box-shadow: none !important;
}
.sidebar .nav-item.active i { color: #3477e5 !important; }
.sidebar .nav-item:hover { background: #f3f6fb !important; }
.main { padding-top: 6px !important; }
.stat-card::before { opacity: .56; }
.stat-card .num { color: #17243a !important; }

/* ---------- Phrase groups: preserve the complete group name ---------- */
.interaction-layout { grid-template-columns: 320px minmax(0,1fr) !important; }
.group-item {
  min-height: 72px !important;
  padding: 10px 11px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 6px !important;
}
.group-item > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.group-item > .el-input {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
.group-item > .el-tag {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
.group-actions {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}
.group-actions .el-button {
  min-height: 24px !important;
  padding: 3px 7px !important;
  box-shadow: none !important;
}

/* Center the group name and treat every item as a complete option card. */
.group-item {
  min-height: 84px !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  row-gap: 8px !important;
}
.group-item > span:not(.el-tag) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  color: #263a59 !important;
  font-size: 15px !important;
  font-weight: 730 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  letter-spacing: .15px !important;
}
.group-item.active > span:not(.el-tag) { color: #1d5fc9 !important; }
.group-item > .el-input {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
}
.group-meta-actions {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.group-meta-actions .group-actions {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}