/* 盈倍云统一产品视觉层：明亮、克制、清晰的信息层级。 */
:root {
  --bg: #f7f8fa;
  --panel: #fff;
  --text: #172033;
  --muted: #667085;
  --line: #e6e8ee;
  --primary: #315efb;
  --primary-2: #2549ca;
  --soft: #edf2ff;
  --shadow: 0 10px 30px rgba(23, 32, 51, .07);
  --sidebar: #111827;
  --sidebar-muted: #aeb7c7;
}

html, body { background: var(--bg); }
body { color: var(--text); font-family: Inter, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
html[data-portal-mode="admin"] #login {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: #f7f8fa;
}
html[data-portal-mode="admin"] #login > * { display: none !important; }
html[data-portal-mode="admin"] #login #adminLoginForm {
  position: static;
  display: grid !important;
  width: min(390px, calc(100vw - 32px));
  padding: 28px;
  border-color: #dfe4ee;
  box-shadow: 0 18px 48px rgba(23, 32, 51, .12);
}
html[data-portal-mode="admin"] #login #hideAdminLogin { display: none; }
button, input, select, textarea { border-radius: 8px; }
button { min-height: 36px; padding: 8px 14px; background: var(--primary); font-size: 14px; font-weight: 600; box-shadow: none; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
button:hover { background: var(--primary-2); }
button.secondary { color: #344054; background: #fff; border: 1px solid #dfe3eb; }
button.secondary:hover { color: var(--primary); background: #f8faff; border-color: #bfcafa; }
input, select, textarea { border-color: #dfe3eb; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 3px solid rgba(49, 94, 251, .11); }

/* Public pages */
.login { background: #fff; }
.topnav { min-height: 68px; padding: 0 max(28px, calc((100vw - 1280px) / 2)); border-bottom: 1px solid #eef0f4; background: rgba(255,255,255,.96); box-shadow: none; }
.topnav-brand { color: #172033; }
.topnav-brand img { width: 29px; height: 29px; border-radius: 7px; }
.topnav-link, .topnav .customer-nav, .topnav .nav { min-height: 34px; padding: 6px 10px; color: #475467; background: transparent; border: 0; border-radius: 6px; font-size: 14px; font-weight: 500; }
.topnav-link:hover, .topnav .customer-nav:hover, .topnav .nav:hover { color: var(--primary); background: #f5f7ff; }
.topnav .customer-nav.active, .topnav .nav.active { color: var(--primary); background: #edf2ff; border-color: transparent; }
.topnav-btn { min-height: 34px; padding: 6px 13px; color: #344054; background: #fff; border: 1px solid #dfe3eb; border-radius: 7px; font-size: 13px; }
.topnav-btn-primary { color: #fff !important; background: var(--primary) !important; border-color: var(--primary) !important; }
.topnav-btn-ghost { background: transparent; border-color: transparent; color: #667085; }
.topnav[data-topnav="landing"] #enterConsoleBtn { display: none; }
.topnav[data-topnav="landing"] #showAdminLogin { min-height: 32px; padding: 5px 4px; color: #98a2b3; font-size: 12px; }
.topnav[data-topnav="landing"] #showAdminLogin:hover { color: #475467; background: transparent; }
.topnav[data-topnav="landing"], .topnav[data-topnav="landing"].scrolled { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.97); box-shadow: 0 1px 0 rgba(23,32,51,.06); }
.topnav[data-topnav="landing"] .topnav-brand, .topnav[data-topnav="landing"] .topnav-brand strong { color: #172033; }
.topnav[data-topnav="landing"] .topnav-link { color: #475467; }
.topnav[data-topnav="landing"] .topnav-link:hover { color: var(--primary); background: #f5f7ff; }
.topnav[data-topnav="landing"] .topnav-links { align-items: center; }
.topnav[data-topnav="landing"] .topnav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  box-sizing: border-box;
  color: #475467;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  appearance: none;
  cursor: pointer;
}

.landing-hero { min-height: 540px; display: grid; place-items: center; background: #fbfcff; border-bottom: 1px solid #edf0f6; }
.landing-hero::before, .landing-hero::after, .hero-fx { display: none; }
.landing-hero-inner { max-width: 900px; padding: 104px 28px 56px; text-align: center; }
.landing-hero .eyebrow, .marketing-hero .eyebrow { display: inline-flex; padding: 5px 10px; color: var(--primary); background: #edf2ff; border: 1px solid #dce5ff; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: none; }
.landing-hero .hero-title, .marketing-hero .hero-title { max-width: 860px; margin: 18px auto 15px; color: #172033; background: none; -webkit-text-fill-color: currentColor; font-size: clamp(38px, 5vw, 60px); line-height: 1.16; letter-spacing: 0; text-shadow: none; animation: none; }
.landing-hero .landing-sub { max-width: 700px; margin: 0 auto; color: #667085; font-size: 16px; line-height: 1.8; }
.landing-hero .landing-cta { margin-top: 28px; }
.landing-hero .landing-cta button, .hero-actions button { min-height: 42px; padding: 10px 19px; border-radius: 8px; }
.landing-hero .landing-cta button#heroRegisterBtn, .hero-actions button:not(.secondary) { background: var(--primary); box-shadow: 0 6px 16px rgba(49,94,251,.17); }
.landing-hero .landing-cta button.secondary, .hero-actions button.secondary { color: #344054; background: #fff; border: 1px solid #dfe3eb; box-shadow: none; }
.landing-vendors { width: min(1120px, calc(100% - 56px)); margin: 0 auto 36px; padding: 15px 0; overflow: hidden; border-top: 1px solid #edf0f6; border-bottom: 1px solid #edf0f6; mask-image: none; -webkit-mask-image: none; }
.landing-hero .vendors-track, .marketing-hero-fx .vendors-track { gap: 26px; padding: 0 8px; animation: vendor-marquee 38s linear infinite; }
.landing-hero .landing-vendors span, .marketing-hero-fx .vendors-track span { color: #475467 !important; text-shadow: none; font-size: 13px; font-weight: 600; }
.landing-hero .landing-vendors img, .marketing-hero-fx .vendors-track img { width: 20px; height: 20px; border-radius: 5px; }
.landing-cards, .landing-adv, .landing-scenes { max-width: 1280px; margin: 0 auto; padding: 82px 28px; }
.landing-cards h2, .landing-adv h2, .landing-scenes h2 { margin: 0 0 28px; color: #172033; font-size: 28px; text-align: center; }
.landing-card-grid, .landing-adv-grid { gap: 16px; }
.landing-card, .landing-adv-grid article { min-height: 218px; padding: 24px; background: #fff; border: 1px solid #e7eaf0; border-radius: 10px; box-shadow: none; }
.landing-card:hover, .landing-adv-grid article:hover { border-color: #cbd6ff; box-shadow: 0 10px 22px rgba(23,32,51,.06); transform: translateY(-2px); }
.landing-card-deco { display: none; }
.landing-card-icon { width: 38px; height: 38px; color: var(--primary); background: #edf2ff; border: 1px solid #dce5ff; border-radius: 8px; }
.landing-card h3, .landing-adv-k { color: #172033; }
.landing-card p, .landing-adv-grid p { color: #667085; line-height: 1.75; }
.landing-scene-strip span { color: #475467; background: #fff; border: 1px solid #e5e7eb; border-radius: 7px; }
.landing-footer { max-width: none; padding: 38px max(28px, calc((100vw - 1224px) / 2)); background: #fafbfc; border-top: 1px solid #eaecf0; }
.login .landing-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  color: #7b8495;
  font-size: 13px;
  line-height: 1.6;
}
.login .landing-footer-meta p { margin: 0; }
.login .landing-footer-meta a {
  color: #667085;
  text-decoration: none;
  transition: color .18s ease;
}
.login .landing-footer-meta a:hover { color: #6136e8; text-decoration: underline; text-underline-offset: 3px; }
.auth-modal { width: min(430px, calc(100vw - 32px)); border: 1px solid #e7eaf0; border-radius: 12px; box-shadow: 0 24px 64px rgba(16,24,40,.18); }
.modal-overlay { background: rgba(23,32,51,.42); backdrop-filter: blur(3px); }

/* Customer console */
.portal { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; background: #f7f8fa; }
.portal > .topnav[data-topnav="customer"] { grid-row: 1 / -1; grid-column: 1; position: sticky; top: 0; flex-direction: column; align-items: stretch; gap: 14px; height: 100vh; min-height: 0; padding: 20px 12px; overflow-y: auto; background: var(--sidebar); border: 0; box-shadow: none; }
.portal > .topnav[data-topnav="customer"] .topnav-brand { padding: 2px 9px 16px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.09); }
.portal > .topnav[data-topnav="customer"] .topnav-brand strong { color: #fff; }
.portal > .topnav[data-topnav="customer"] .topnav-links { display: grid; gap: 3px; margin: 2px 0 auto; }
.portal > .topnav[data-topnav="customer"] .customer-nav { width: 100%; min-height: 40px; padding: 10px 12px; color: var(--sidebar-muted); text-align: left; background: transparent; border-radius: 7px; }
.portal > .topnav[data-topnav="customer"] .customer-nav:hover { color: #fff; background: rgba(255,255,255,.08); }
.portal > .topnav[data-topnav="customer"] .customer-nav.active { color: #fff; background: var(--primary); }
.portal > .topnav[data-topnav="customer"] .customer-nav.recharge-nav { color: #bcd0ff; background: rgba(49,94,251,.14); border: 1px solid rgba(115,145,255,.2); }
.portal > .topnav[data-topnav="customer"] .topnav-actions { display: grid; gap: 10px; margin: 0; }
.balance-group { display: grid; gap: 8px; }
.balance-chip { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 4px; padding: 10px; color: #d4dbe8; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; }
.balance-chip span, .balance-chip small { color: #95a1b5; font-size: 11px; }
.balance-chip strong { color: #fff; font-size: 14px; }
.tutorial-entry-btn, .portal > .topnav[data-topnav="customer"] .logoutBtn { width: 100%; min-height: 34px; color: #c1c9d7; background: transparent; border-color: rgba(255,255,255,.12); font-size: 12px; }
.portal-main { min-width: 0; padding: 0 28px 36px; overflow: visible; }
.portal-topbar { display: flex; align-items: end; min-height: 104px; padding: 26px 0 20px; border-bottom: 1px solid #e8ebf0; }
.portal-topbar .eyebrow { display: none; }
.portal-topbar h2 { margin: 0; color: #172033; font-size: 24px; letter-spacing: 0; }
.portal-topbar p { margin: 7px 0 0; color: #667085; font-size: 13px; }
.customer-view { max-width: 1320px; margin: 26px auto 0; }
.portal .marketing-hero, #customerApp .marketing-hero { position: relative; min-height: 284px; padding: 34px; overflow: hidden; color: #fff; background: #172b71; border: 0; border-radius: 10px; }
.portal .marketing-hero::before, #customerApp .marketing-hero::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 38px 38px; }
.portal .marketing-hero::after, #customerApp .marketing-hero::after { display: none; }
.marketing-hero-fx .marketing-hero-inner { max-width: 700px; }
.marketing-hero-fx .eyebrow { color: #dbe5ff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.marketing-hero-fx .hero-title { margin: 14px 0 10px; color: #fff; font-size: 34px; }
.marketing-hero-fx p { color: rgba(255,255,255,.76); max-width: 660px; line-height: 1.75; }
.marketing-hero-fx .hero-actions { display: flex; gap: 10px; margin-top: 22px; }
.marketing-hero-fx .hero-actions button { min-height: 38px; color: #2549ca; background: #fff; border: 1px solid #fff; box-shadow: none; animation: none; }
.marketing-hero-fx .hero-actions button.secondary { color: #fff; background: transparent; border-color: rgba(255,255,255,.35); }
.marketing-hero-fx .landing-vendors { width: 100%; margin: 26px 0 0; border-color: rgba(255,255,255,.16); }
.marketing-hero-fx .vendors-track span { color: rgba(255,255,255,.85) !important; }
.metrics, .customer-metrics { gap: 14px; }
.portal .metrics article, #customerApp .metrics article, .app .metrics article, .ud-cards article, .profile-grid article { padding: 17px; background: #fff; border: 1px solid #e7eaf0; border-radius: 9px; box-shadow: none; }
.portal .metrics article:hover, #customerApp .metrics article:hover, .app .metrics article:hover { transform: none; border-color: #ced7ee; box-shadow: 0 7px 16px rgba(23,32,51,.04); }
.portal .metrics article strong, #customerApp .metrics article strong, .app .metrics article strong, .ud-cards strong { color: #172033; background: none; -webkit-text-fill-color: currentColor; }
.panel, .portal .panel, .app .panel, .portal .vendor-section, #customerApp .panel { padding: 20px; background: #fff; border: 1px solid #e7eaf0; border-radius: 10px; box-shadow: none; }
.panel-head { min-height: 30px; padding-bottom: 14px; border-bottom: 1px solid #eef0f4; }
.panel h3 { color: #172033; font-size: 16px; }
.quick-grid { gap: 12px; }
.quick-card { min-height: 106px; padding: 18px; color: #172033; background: #fff; border: 1px solid #e3e7ef; border-radius: 8px; text-align: left; }
.quick-card:hover { color: var(--primary); background: #f9faff; border-color: #bfcafa; }
.quick-card span { margin-top: 8px; color: #667085; font-size: 12px; }
.vendor-section { margin-top: 16px; }
.vendor-card, .ms-card, .channel-card, .customer-plan-card { border-color: #e5e8ef !important; border-radius: 9px !important; box-shadow: none !important; }
.vendor-card:hover, .ms-card:hover, .channel-card:hover, .customer-plan-card:hover { border-color: #c4cff5 !important; box-shadow: 0 8px 18px rgba(23,32,51,.05) !important; }
.yb-tabs { gap: 4px; padding: 4px; width: fit-content; background: #edf0f5; border-radius: 8px; }
.yb-tab { min-height: 32px; padding: 6px 12px; color: #667085; background: transparent; border-radius: 6px; font-size: 13px; }
.yb-tab.active { color: #172033; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.11); }
.ms-search, .search-input { max-width: 280px; background: #fafbfc; }
.table-wrap { border: 1px solid #e8ebf0; border-radius: 8px; }
table { background: #fff; }
th { color: #667085; background: #fafbfc; font-weight: 600; }
th, td { border-color: #edf0f4; }
td { color: #344054; }
tr:hover td { background: #fafbff; }
.key-box { color: #2549ca; background: #f4f6ff; border-color: #dce5ff; }

/* Conversation workspace */
.chat-panel { height: min(720px, calc(100vh - 158px)); min-height: 560px; padding: 0 !important; overflow: hidden; }
.chat-sidebar { width: 214px; padding: 14px; background: #fafbfc; border-right: 1px solid #e8ebf0; }
.conv-new { width: 100%; min-height: 36px; color: var(--primary); background: #fff; border: 1px solid #cbd7ff; }
.conv-new:hover { color: #fff; background: var(--primary); }
.conv-item { border-radius: 6px; }
.conv-item:hover, .conv-item.active { background: #edf2ff; }
.chat-main, .chat-box { background: #fff; }
.chat-topbar { min-height: 66px; padding: 12px 18px; border-bottom: 1px solid #edf0f4; }
.chat-vendor-btn, .chat-model-btn { color: #172033; background: #fff; border: 1px solid #e0e5ee; box-shadow: none; }
.chat-vendor-btn:hover, .chat-model-btn:hover { color: var(--primary); background: #f8faff; border-color: #bfccfa; }
.chat-box { padding: 22px 26px; }
.chat-empty { color: #667085; background: #fafbfc; border: 1px dashed #dce1ea; border-radius: 8px; }
.message-row { margin-bottom: 14px; }
.message-bubble { border-radius: 9px !important; box-shadow: none !important; }
.message-row.user .message-bubble { color: #172e78 !important; background: #edf2ff !important; border: 1px solid #dce5ff !important; }
.message-row.assistant .message-bubble { color: #172033 !important; background: #fff !important; border: 1px solid #e7eaf0 !important; }
.chat-input { margin: 0 18px 18px; padding: 8px; background: #fff; border: 1px solid #cfd6e3; border-radius: 10px; box-shadow: 0 4px 14px rgba(16,24,40,.05); }
.chat-input:focus-within { border-color: #8fa8ff; box-shadow: 0 0 0 3px rgba(49,94,251,.10); }
.chat-input textarea { min-height: 38px; background: transparent; border: 0; outline: 0; box-shadow: none !important; }
.chat-input .attachment-button { color: #667085; background: #f7f8fa; border: 1px solid #e3e7ef; }
.chat-input .attachment-button:hover { color: var(--primary); background: #edf2ff; border-color: #cfdaff; }
.chat-input .chat-send { min-width: 62px; color: #fff; background: var(--primary); }

/* Admin console */
#adminApp.app { min-height: 100vh; background: #f7f8fa; }
#adminApp .topnav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); }
#adminApp .main { max-width: 1380px; margin: 0 auto; padding: 28px; }
#adminApp .topbar { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #e8ebf0; }
#adminApp .topbar h2 { color: #172033; font-size: 24px; }

@media (max-width: 920px) {
  .portal { display: block; }
  .portal > .topnav[data-topnav="customer"] { position: sticky; top: 0; display: flex; flex-direction: row; align-items: center; width: 100%; height: auto; min-height: 58px; padding: 9px 16px; overflow-x: auto; }
  .portal > .topnav[data-topnav="customer"] .topnav-brand { padding: 0 13px 0 0; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
  .portal > .topnav[data-topnav="customer"] .topnav-links { display: flex; margin: 0; }
  .portal > .topnav[data-topnav="customer"] .customer-nav { width: auto; white-space: nowrap; }
  .portal > .topnav[data-topnav="customer"] .topnav-actions { display: none; }
  .portal-main { padding: 0 18px 28px; }
  .chat-panel { height: calc(100vh - 150px); }
  .chat-sidebar { width: 180px; }
  .agent-preview-panel { flex: 0 0 380px; }
}
@media (max-width: 640px) {
  .topnav[data-topnav="landing"] { padding: 0 16px; }
  .topnav[data-topnav="landing"] .topnav-links, .topnav[data-topnav="landing"] #enterConsoleBtn, .topnav[data-topnav="landing"] #showAdminLogin { display: none; }
  .landing-hero { min-height: 470px; }
  .landing-hero-inner { padding: 74px 20px 36px; }
  .landing-hero .hero-title { font-size: 36px; }
  .landing-cards, .landing-adv, .landing-scenes { padding: 54px 18px; }
  .landing-card-grid, .landing-adv-grid { grid-template-columns: 1fr; }
  .portal-main { padding: 0 12px 22px; }
  .customer-view { margin-top: 14px; }
  .portal .marketing-hero, #customerApp .marketing-hero { min-height: 254px; padding: 24px; }
  .marketing-hero-fx .hero-title { font-size: 29px; }
  .chat-panel { height: calc(100vh - 126px); min-height: 510px; }
  .chat-sidebar { display: none; }
  .agent-preview-panel { display: none; }
  .chat-box { padding: 16px; }
  .chat-input { margin: 0 10px 10px; }
  .panel, .portal .panel, #customerApp .panel { padding: 15px; }
  .ms-search { max-width: 160px; }
}

/* Public hero: continuous light lavender-blue field. */
.login { background: #f4f1ff; }
.topnav[data-topnav="landing"],
.topnav[data-topnav="landing"].scrolled {
  background: rgba(239, 233, 255, .88) !important;
  border-bottom-color: rgba(91, 57, 213, .08);
  box-shadow: none;
  backdrop-filter: blur(18px);
}
.topnav[data-topnav="landing"] .topnav-brand,
.topnav[data-topnav="landing"] .topnav-brand strong,
.topnav[data-topnav="landing"] .topnav-link { color: #23263a; }
.topnav[data-topnav="landing"] .topnav-link:hover { color: #6136e8; background: rgba(255,255,255,.36); }
.topnav[data-topnav="landing"] .topnav-btn {
  min-width: 82px;
  color: #fff;
  background: #6136e8;
  border-color: #6136e8;
  border-radius: 999px;
  box-shadow: 0 7px 16px rgba(97, 54, 232, .19);
}
.topnav[data-topnav="landing"] .topnav-btn:hover { background: #4e28ce; border-color: #4e28ce; }
.landing-hero {
  position: relative;
  display: block;
  min-height: calc(100vh - 68px);
  overflow: hidden;
  background: linear-gradient(118deg, #f0eaff 0%, #eae5ff 38%, #dcecff 70%, #ebf8ff 100%) !important;
  background-size: 180% 180%;
  border: 0 !important;
  animation: yb-hero-flow 18s ease-in-out infinite alternate;
}
.landing-hero::before,
.landing-hero::after {
  display: block !important;
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: none;
  border-radius: 0;
}
.landing-hero::before {
  top: 106px;
  left: 0;
  width: min(50vw, 940px);
  height: min(34vw, 520px);
  background: rgba(145, 106, 235, .28);
  clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
  animation: yb-hero-panel-left 15s ease-in-out infinite alternate;
}
.landing-hero::after {
  right: 0;
  bottom: -4px;
  width: min(44vw, 760px);
  height: min(28vw, 430px);
  background: rgba(112, 181, 255, .24);
  clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 100%);
  animation: yb-hero-panel-right 17s ease-in-out infinite alternate;
}
.hero-fx { display: none !important; }
.landing-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1280px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: clamp(104px, 13vw, 172px) clamp(28px, 6.3vw, 128px) 92px;
  text-align: left;
}
.landing-hero .eyebrow { display: none; }
.landing-hero .hero-title {
  max-width: 980px;
  margin: 0 0 24px;
  color: #222b42;
  font-size: clamp(44px, 5.2vw, 74px);
  font-weight: 760;
  line-height: 1.16;
}
.landing-hero .landing-sub {
  max-width: 820px;
  margin: 0;
  color: #303b58;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.7;
}
.landing-hero .landing-cta { margin-top: 38px; }
.landing-hero .landing-cta button,
.landing-hero .landing-cta button#heroRegisterBtn {
  min-height: 54px;
  padding: 13px 26px;
  color: #fff;
  background: #6136e8;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(62, 34, 154, .24);
  animation: none;
}
.landing-hero .landing-cta button:hover,
.landing-hero .landing-cta button#heroRegisterBtn:hover { background: #4e28ce; transform: translateY(-1px); }
.landing-hero .landing-vendors {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 28px;
  left: 0;
  width: min(1040px, calc(100% - 56px));
  margin: 0 auto;
  padding: 14px 0;
  border-color: rgba(56, 54, 92, .10);
}
.landing-hero .landing-vendors span { color: #555571 !important; }
@keyframes yb-hero-flow {
  from { background-position: 0% 45%; }
  to { background-position: 100% 58%; }
}
@keyframes yb-hero-panel-left {
  from { transform: translateX(-3%) translateY(0); opacity: .83; }
  to { transform: translateX(4%) translateY(20px); opacity: 1; }
}
@keyframes yb-hero-panel-right {
  from { transform: translateX(4%) translateY(8px); opacity: .76; }
  to { transform: translateX(-4%) translateY(-14px); opacity: 1; }
}
@media (max-width: 640px) {
  .landing-hero { min-height: calc(100vh - 60px); }
  .landing-hero-inner { padding: 96px 24px 124px; }
  .landing-hero .hero-title { font-size: 42px; }
  .landing-hero .landing-sub { font-size: 16px; }
  .landing-hero::before { top: 74px; width: 88vw; height: 280px; }
  .landing-hero::after { width: 75vw; height: 250px; }
  .landing-hero .landing-vendors { bottom: 18px; width: calc(100% - 30px); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero,
  .landing-hero::before,
  .landing-hero::after { animation: none; }
}

/* Public product matrix: a quiet white canvas with one continuous lavender-blue hero. */
.login { background: #fff; }
.login .landing-cards,
.login .landing-adv,
.login .landing-scenes {
  max-width: none;
  margin: 0;
  padding-right: max(28px, calc((100vw - 1640px) / 2));
  padding-left: max(28px, calc((100vw - 1640px) / 2));
  background: #fff;
}
.login .landing-cards {
  padding-top: 126px;
  padding-bottom: 118px;
}
.login .landing-cards::before { display: none; }
.landing-section-heading {
  max-width: 1320px;
  margin: 0 auto 70px;
  text-align: center;
}
.landing-section-heading h2,
.login .landing-cards .landing-section-heading h2 {
  max-width: 1220px;
  margin: 0 auto 22px;
  color: #202638;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(36px, 4.15vw, 64px);
  font-weight: 760;
  line-height: 1.18;
}
.landing-section-heading p {
  margin: 0;
  color: #535b70;
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.65;
}
.login .landing-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(248px, auto);
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  gap: 28px;
}
.login .landing-card {
  --cap-rgb: 118, 91, 224;
  --cap-art: none;
  --cap-surface:
    radial-gradient(circle at 88% 10%, rgba(var(--cap-rgb), .14), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(var(--cap-rgb), .055));
  display: flex;
  flex-direction: column;
  min-height: 248px;
  padding: 52px 52px 42px;
  overflow: hidden;
  color: #202638;
  background: var(--cap-surface);
  border: 1px solid rgba(var(--cap-rgb), .12);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .92) inset,
    0 18px 48px rgba(52, 46, 92, .065);
  transform: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.login .landing-card-deco { display: none; }
.login .landing-card:hover {
  border-color: rgba(var(--cap-rgb), .2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .96) inset,
    0 24px 54px rgba(46, 38, 83, .11);
  transform: translateY(-4px);
}
.login .landing-card[data-target-view="square"] {
  --cap-rgb: 139, 107, 232;
  --cap-art: url("/assets/capability-model-generated.webp");
  grid-column: span 2;
  min-height: 388px;
}
.login .landing-card[data-target-view="chat"] {
  --cap-rgb: 92, 124, 232;
  --cap-art: url("/assets/capability-chat-generated.webp");
  grid-column: span 2;
  min-height: 388px;
}
.login .landing-card[data-target-view="account"] {
  --cap-rgb: 56, 169, 195;
  --cap-art: url("/assets/capability-api-generated.webp");
  grid-column: span 2;
  min-height: 310px;
}
.login .landing-card[data-target-view="agents"] {
  --cap-rgb: 193, 92, 196;
  --cap-art: url("/assets/capability-agents-generated.webp");
  grid-column: span 2;
  min-height: 310px;
}
.login .landing-card[data-target-view="recharge"] {
  --cap-rgb: 232, 130, 62;
  --cap-surface:
    radial-gradient(circle at 82% 18%, rgba(251, 191, 36, .2), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(249, 115, 22, .06));
}
.login .landing-card[data-target-view="usage"] {
  --cap-rgb: 43, 168, 128;
  --cap-art: url("/assets/landing-api-analytics.png");
  grid-column: span 1;
}
.login .landing-card-icon {
  display: none;
}
.login .landing-card h3 {
  position: relative;
  z-index: 1;
  margin: auto 0 14px;
  color: inherit;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  font-size: clamp(23px, 2.1vw, 34px);
  font-weight: 720;
  line-height: 1.22;
}
.login .landing-card p {
  position: relative;
  z-index: 1;
  max-width: min(56%, 520px);
  margin: 0;
  color: #555d70;
  font-size: 17px;
  line-height: 1.7;
}
.login .landing-adv { padding-top: 104px; padding-bottom: 104px; background: #fafafe; }
.login .landing-scenes { padding-top: 104px; padding-bottom: 104px; background: #fff; }
.login .landing-adv h2,
.login .landing-scenes h2 {
  color: #202638;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(30px, 3vw, 46px);
}
.login .landing-adv-grid { max-width: 1420px; gap: 20px; }
.login .landing-adv article {
  min-height: 196px;
  background: #fff;
  border: 1px solid #e8e8f2;
  border-radius: 8px;
  box-shadow: none;
  transform: none !important;
}
.login .landing-adv article::before { display: none; }
.login .landing-adv article:hover { border-color: #d2cbfa; box-shadow: 0 12px 26px rgba(39, 44, 69, .06); }
@media (max-width: 900px) {
  .login .landing-cards { padding-top: 82px; padding-bottom: 78px; }
  .landing-section-heading { margin-bottom: 42px; }
  .login .landing-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .login .landing-card,
  .login .landing-card:nth-child(n) { grid-column: span 1; min-height: 260px; padding: 34px 30px; }
  .login .landing-card:nth-child(1),
  .login .landing-card:nth-child(2) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .login .landing-cards,
  .login .landing-adv,
  .login .landing-scenes { padding-right: 18px; padding-left: 18px; }
  .login .landing-cards { padding-top: 66px; padding-bottom: 64px; }
  .landing-section-heading h2,
  .login .landing-cards .landing-section-heading h2 { font-size: 32px; }
  .landing-section-heading p { font-size: 16px; }
  .login .landing-card-grid { grid-template-columns: 1fr; }
  .login .landing-card,
  .login .landing-card:nth-child(n) { grid-column: span 1; min-height: 236px; padding: 30px 26px; }
  .login .landing-card h3 { margin-top: 28px; font-size: 25px; }
  .login .landing-card p { max-width: 82%; font-size: 15px; }
}

/* Customer navigation uses the same light product canvas as the public pages. */
.portal > .topnav[data-topnav="customer"] {
  background: #fff;
  border-right: 1px solid #e8eaf0;
  box-shadow: none;
}
.portal > .topnav[data-topnav="customer"] .topnav-brand {
  color: #172033;
  border-bottom-color: #e8eaf0;
}
.portal > .topnav[data-topnav="customer"] .topnav-brand strong { color: #172033; }
.portal > .topnav[data-topnav="customer"] .customer-nav { color: #475467; }
.portal > .topnav[data-topnav="customer"] .customer-nav:hover { color: #4e2dcc; background: #f4f1ff; }
.portal > .topnav[data-topnav="customer"] .customer-nav.active { color: #fff; background: #6136e8; }
.portal > .topnav[data-topnav="customer"] .customer-nav.recharge-nav {
  color: #475467;
  background: transparent;
  border: 0;
}
.portal > .topnav[data-topnav="customer"] .customer-nav.recharge-nav:hover { color: #4e2dcc; background: #f4f1ff; }
.portal > .topnav[data-topnav="customer"] .customer-nav.recharge-nav.active { color: #fff; background: #6136e8; }

/* A live routing vignette gives the public hero a useful product focal point. */
.landing-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, .78fr);
  column-gap: clamp(46px, 6vw, 100px);
  align-items: center;
}
.landing-hero .hero-title,
.landing-hero .landing-sub,
.landing-hero .landing-cta { grid-column: 1; }
.hero-live {
  grid-column: 2;
  grid-row: 1 / span 4;
  width: 100%;
  padding: 18px;
  color: #28304a;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 18px;
  box-shadow: 0 28px 72px rgba(73, 54, 145, .18), inset 0 1px rgba(255,255,255,.86);
  backdrop-filter: blur(20px);
  animation: yb-live-float 6s ease-in-out infinite;
}
.hero-live-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 15px; font-size: 13px; font-weight: 650; }
.hero-live-head > div { display: flex; align-items: center; gap: 8px; }
.hero-live-dot { width: 8px; height: 8px; background: #18a875; border-radius: 50%; box-shadow: 0 0 0 5px rgba(24,168,117,.12); animation: yb-live-pulse 2s ease-out infinite; }
.hero-live-latency { color: #6e7290; font-weight: 500; }
.hero-live-flow { display: grid; grid-template-columns: minmax(0, .9fr) 42px minmax(0, 1.1fr); align-items: center; min-height: 202px; padding: 18px; background: rgba(246, 245, 255, .82); border: 1px solid rgba(104,78,200,.09); border-radius: 12px; }
.hero-live-request { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #fff; border: 1px solid #e7e2fb; border-radius: 10px; box-shadow: 0 8px 20px rgba(56,45,105,.07); }
.hero-live-request strong { font-size: 14px; line-height: 1.45; }
.hero-live-request > span:last-child { color: #85899d; font-size: 11px; }
.hero-live-label { align-self: flex-start; padding: 3px 7px; color: #6136e8; background: #eee9ff; border-radius: 4px; font-size: 10px; font-weight: 700; }
.hero-live-route { position: relative; height: 2px; overflow: hidden; background: #d7cff7; }
.hero-live-route i { position: absolute; top: -2px; left: -7px; width: 6px; height: 6px; background: #7246ee; border-radius: 50%; animation: yb-route 2.1s linear infinite; }
.hero-live-route i:nth-child(2) { animation-delay: .7s; }
.hero-live-route i:nth-child(3) { animation-delay: 1.4s; }
.hero-live-models { display: grid; gap: 7px; }
.hero-live-models > div { display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: center; padding: 9px 10px; color: #6d7185; background: rgba(255,255,255,.66); border: 1px solid transparent; border-radius: 8px; font-size: 12px; }
.hero-live-models img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.hero-live-models small { color: #999caf; }
.hero-live-models .is-active { color: #33285d; background: #fff; border-color: #cabdf8; box-shadow: 0 7px 17px rgba(75,51,159,.1); animation: yb-model-choice 4.2s ease-in-out infinite; }
.hero-live-models .is-active small { color: #6136e8; }
.hero-live-result { display: flex; align-items: center; gap: 5px; min-height: 35px; padding: 12px 5px 0; color: #73788e; font-size: 11px; }
.hero-live-result span { width: 5px; height: 5px; background: #7448ed; border-radius: 50%; animation: yb-typing 1.2s ease-in-out infinite; }
.hero-live-result span:nth-child(2) { animation-delay: .16s; }
.hero-live-result span:nth-child(3) { animation-delay: .32s; }
.hero-live-result em { margin-left: 5px; font-style: normal; }
.login .landing-card { transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.login .landing-card:hover { transform: translateY(-6px); }
@keyframes yb-live-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes yb-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(24,168,117,.28); } 70%, 100% { box-shadow: 0 0 0 8px rgba(24,168,117,0); } }
@keyframes yb-route { from { transform: translateX(0); } to { transform: translateX(49px); } }
@keyframes yb-model-choice { 0%, 100% { border-color: #cabdf8; } 50% { border-color: #8c6ef0; box-shadow: 0 8px 23px rgba(75,51,159,.16); } }
@keyframes yb-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (max-width: 1050px) {
  .landing-hero-inner { grid-template-columns: minmax(0, 1fr) 370px; column-gap: 34px; padding-right: 34px; padding-left: 34px; }
  .landing-hero .hero-title { font-size: clamp(42px, 5vw, 60px); }
}
@media (max-width: 820px) {
  .landing-hero { min-height: auto; }
  .landing-hero-inner { display: block; padding: 82px 22px 138px; text-align: center; }
  .landing-hero .hero-title { margin-right: auto; margin-left: auto; font-size: 42px; }
  .landing-hero .landing-sub { margin-right: auto; margin-left: auto; }
  .hero-live { width: min(540px, 100%); margin: 48px auto 0; text-align: left; animation-duration: 7s; }
}
@media (max-width: 520px) {
  .landing-hero-inner { padding-top: 66px; }
  .landing-hero .hero-title { font-size: 36px; }
  .hero-live { padding: 12px; border-radius: 14px; }
  .hero-live-flow { grid-template-columns: 1fr; gap: 12px; padding: 13px; }
  .hero-live-route { width: 2px; height: 22px; margin: -2px auto; }
  .hero-live-route i { top: -5px; left: -2px; animation-name: yb-route-mobile; }
  .hero-live-latency { display: none; }
}
@keyframes yb-route-mobile { from { transform: translateY(0); } to { transform: translateY(29px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-live, .hero-live-dot, .hero-live-route i, .hero-live-models .is-active, .hero-live-result span { animation: none; }
}

/* Public landing motion: richer feedback without turning the page into a light show. */
.login .landing-cards {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(111, 70, 237, .07), transparent 24%),
    radial-gradient(circle at 88% 76%, rgba(75, 170, 255, .07), transparent 25%),
    #fff;
}
.login .landing-card {
  --mx: 50%;
  --my: 50%;
  isolation: isolate;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateY(0);
  transition: transform .52s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .45s ease;
}
.login .landing-cards .landing-card::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  transform: none;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.62) 0, rgba(255,255,255,.18) 22%, transparent 48%),
    linear-gradient(120deg, rgba(255,255,255,.32), transparent 38%);
  opacity: .26;
  transition: opacity .35s ease;
}
.login .landing-cards .landing-card::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 0;
  bottom: 10px;
  left: auto;
  width: 72%;
  height: auto;
  border-radius: 0 23px 23px 0;
  pointer-events: none;
  background-image: var(--cap-art);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .44) 22%, #000 46%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .44) 22%, #000 46%, #000 100%);
  mix-blend-mode: multiply;
  filter: saturate(.9) contrast(1.02) brightness(.99);
  opacity: .88;
  transform: translateX(0) scale(1);
  transform-origin: right center;
  transition: opacity .45s ease, filter .45s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.login .landing-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .96) inset,
    0 26px 58px rgba(46,38,83,.12),
    0 2px 8px rgba(46,38,83,.05);
  will-change: transform;
}
.login .landing-card:hover::after {
  opacity: .96;
  filter: saturate(.98) contrast(1.04) brightness(.985);
  transform: translateX(5px) scale(1.025);
}
.login .landing-card:hover::before { opacity: .72; }
.login .landing-cards .landing-card h3,
.login .landing-cards .landing-card p {
  position: relative;
  z-index: 3;
  filter: none;
  transform: none !important;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  backface-visibility: visible;
  transition: color .25s ease;
}
.login .landing-cards .landing-card h3,
.login .landing-cards .landing-card:hover h3 {
  color: #202638;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
.login .landing-cards .landing-card p,
.login .landing-cards .landing-card:hover p {
  color: #343c50;
  font-weight: 500;
  text-shadow: none;
}
.login .landing-card h3::before {
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 10px 4px 0;
  background: #7650ea;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(118,80,234,.12);
  animation: yb-capability-pulse 2.8s ease-out infinite;
}
.login .landing-card:nth-child(1) h3::before { background: #9a78ff; box-shadow: 0 0 0 7px rgba(154,120,255,.18); }
.login .landing-card:nth-child(2) h3::before { background: #5d7cf5; box-shadow: 0 0 0 7px rgba(93,124,245,.12); animation-delay: .5s; }
.login .landing-card:nth-child(3) h3::before { background: #39a9c8; box-shadow: 0 0 0 7px rgba(57,169,200,.12); animation-delay: 1s; }
.login .landing-card:nth-child(4) h3::before { background: #ca5acf; box-shadow: 0 0 0 7px rgba(202,90,207,.12); animation-delay: 1.5s; }
@media (hover: none), (pointer: coarse) {
  .login .landing-card:hover {
    transform: none;
    box-shadow: 0 10px 28px rgba(46,38,83,.09);
  }
  .login .landing-card:hover::after { opacity: .88; filter: saturate(.9) contrast(1.02) brightness(.99); transform: none; }
  .login .landing-card:hover::before { opacity: .26; }
  .login .landing-card:hover h3,
  .login .landing-card:hover p { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login .landing-card,
  .login .landing-card::before,
  .login .landing-card::after,
  .login .landing-card h3,
  .login .landing-card p { transition: none !important; }
  .login .landing-card:hover { transform: none; box-shadow: 0 10px 28px rgba(46,38,83,.09); }
  .login .landing-card:hover::after { opacity: .88; filter: saturate(.9) contrast(1.02) brightness(.99); transform: none; }
  .login .landing-card:hover::before { opacity: .26; }
  .login .landing-card h3::before { animation: none; }
}
.login #adv {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fafafe 0%, #f5f3ff 100%);
}
.login #adv .landing-adv-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.login #adv .landing-adv-grid article { position: relative; overflow: hidden; padding-right: 80px; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.login #adv .landing-adv-grid article::after {
  display: block;
  content: "";
  position: absolute;
  right: 24px;
  top: 24px;
  width: 38px;
  height: 38px;
  background: center / contain no-repeat;
  filter: saturate(.9);
  opacity: .82;
  transition: transform .35s ease, opacity .35s ease;
}
.login #adv .landing-adv-grid article:nth-child(1)::after { background-image: url("/assets/vendor-qwen-official-static.png"); }
.login #adv .landing-adv-grid article:nth-child(2)::after { background-image: url("/assets/vendor-deepseek.ico"); }
.login #adv .landing-adv-grid article:nth-child(3)::after { background-image: url("/assets/vendor-glm-official.svg"); }
.login #adv .landing-adv-grid article:nth-child(4)::after { background-image: url("/assets/vendor-kimi.ico"); }
.login #adv .landing-adv-grid article:nth-child(5)::after { background-image: url("/assets/vendor-minimax.ico"); }
.login #adv .landing-adv-grid article:nth-child(6)::after { background-image: url("/assets/vendor-doubao.png"); }
.login #adv .landing-adv-grid article:hover { transform: translateY(-7px) !important; box-shadow: 0 20px 42px rgba(65,50,125,.11); }
.login #adv .landing-adv-grid article:hover::after { transform: translateY(-4px) rotate(5deg) scale(1.1); opacity: 1; }
.login .landing-scenes { background: linear-gradient(180deg, #fff, #fbfaff); }
.login .landing-scene-strip span { position: relative; overflow: hidden; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; }
.login .landing-scene-strip span:hover { color: #fff; background: #6136e8; border-color: #6136e8; transform: translateY(-4px); }
@keyframes yb-capability-pulse { 0% { transform: scale(.82); } 45% { transform: scale(1); } 100% { transform: scale(.82); } }
@media (max-width: 640px) {
  .login .landing-card { border-radius: 18px; }
  .login .landing-card::after {
    top: 8px;
    bottom: 8px;
    width: 82%;
    border-radius: 0 17px 17px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 28%, #000 72%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 28%, #000 72%, #000 100%);
    opacity: .58;
  }
  .login .landing-card p { max-width: 78%; padding-bottom: 0; }
  .login #adv .landing-adv-grid { grid-template-columns: 1fr; }
  .login #adv .landing-adv-grid article { padding-right: 66px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .login #adv .landing-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .login .landing-card h3::before { animation: none; }
  .login .landing-card:hover { transform: translateY(-4px); }
}

/* Geometric capability matrix: alternating graphite and lavender surfaces. */
.login .landing-card-grid .landing-card {
  --cap-pattern: none;
  background: var(--cap-surface);
  border-color: var(--cap-border, rgba(112, 92, 196, .14));
  box-shadow: 0 18px 44px rgba(39, 39, 62, .09);
}
.login .landing-card-grid .landing-card:nth-child(1),
.login .landing-card-grid .landing-card:nth-child(4) {
  --cap-rgb: 151, 116, 255;
  --cap-surface:
    radial-gradient(circle at 12% 8%, rgba(158, 129, 255, .1), transparent 34%),
    linear-gradient(145deg, #3b3c4e 0%, #343546 100%);
  --cap-border: rgba(255, 255, 255, .08);
  --cap-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 360'%3E%3Cg fill='none' stroke='%239b78ff' stroke-width='5' stroke-linejoin='round'%3E%3Crect x='326' y='38' width='112' height='112' rx='18' transform='rotate(45 382 94)'/%3E%3Crect x='218' y='170' width='104' height='104' rx='17' transform='rotate(45 270 222)'/%3E%3Cpath d='M434 172l78 78-78 78-78-78z'/%3E%3C/g%3E%3C/svg%3E");
}
.login .landing-card-grid .landing-card:nth-child(2),
.login .landing-card-grid .landing-card:nth-child(3) {
  --cap-rgb: 119, 91, 224;
  --cap-surface:
    radial-gradient(circle at 8% 4%, rgba(255, 255, 255, .94), transparent 38%),
    linear-gradient(145deg, #f7f6ff 0%, #efeffb 100%);
  --cap-border: #e6e5f3;
  --cap-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 360'%3E%3Cg fill='%23ffffff' fill-opacity='.78' stroke='%23d9daeb' stroke-width='4'%3E%3Crect x='326' y='28' width='106' height='106' rx='18'/%3E%3Crect x='238' y='116' width='106' height='106' rx='18'/%3E%3Crect x='414' y='116' width='106' height='106' rx='18'/%3E%3Crect x='326' y='204' width='106' height='106' rx='18'/%3E%3C/g%3E%3C/svg%3E");
}
.login .landing-card-grid .landing-card::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 54%;
  border-radius: 0 23px 23px 0;
  background-image: var(--cap-pattern);
  background-position: right bottom;
  background-size: contain;
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  filter: none;
  opacity: .9;
}
.login .landing-card-grid .landing-card:hover::after {
  filter: none;
  opacity: 1;
  transform: translateX(5px) scale(1.018);
}
.login .landing-card-grid .landing-card h3 {
  margin: 0 0 14px;
}
.login .landing-card-grid .landing-card:nth-child(1) h3,
.login .landing-card-grid .landing-card:nth-child(1) p,
.login .landing-card-grid .landing-card:nth-child(1):hover h3,
.login .landing-card-grid .landing-card:nth-child(1):hover p,
.login .landing-card-grid .landing-card:nth-child(4) h3,
.login .landing-card-grid .landing-card:nth-child(4) p,
.login .landing-card-grid .landing-card:nth-child(4):hover h3,
.login .landing-card-grid .landing-card:nth-child(4):hover p {
  color: #fff;
}
.login .landing-card-grid .landing-card:nth-child(1) p,
.login .landing-card-grid .landing-card:nth-child(4) p {
  color: rgba(255, 255, 255, .78);
}
.login .landing-card-grid .landing-card:nth-child(1):hover,
.login .landing-card-grid .landing-card:nth-child(4):hover {
  border-color: rgba(155, 120, 255, .42);
  box-shadow: 0 24px 58px rgba(28, 28, 46, .22);
}
@media (max-width: 640px) {
  .login .landing-card-grid .landing-card::after {
    top: 0;
    right: 0;
    bottom: 0;
    width: 68%;
    border-radius: 0 17px 17px 0;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: .52;
  }
  .login .landing-card-grid .landing-card p { max-width: 84%; }
}
/* Model vendor shelf: compact cards with clear capabilities and a direct next step. */
.login #adv .landing-model-heading {
  max-width: 860px;
  margin: 0 auto 38px;
}

/* Kling media workbench */
.media-hub { display:grid; gap:18px; }
.media-hub-hero { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:28px 30px; border-radius:20px; background:linear-gradient(125deg,#14152a,#272055 54%,#4b2a71); color:#fff; box-shadow:0 16px 42px rgba(31,25,79,.18); }
.media-hub-hero .eyebrow { color:#c4b5fd; margin:0 0 8px; }
.media-hub-hero h2 { margin:0 0 8px; font-size:clamp(26px,3vw,36px); }
.media-hub-hero p:not(.eyebrow) { margin:0; color:#d8d7ee; line-height:1.7; }
.media-upstream-badge,.media-pill { border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); padding:8px 12px; border-radius:999px; font-size:12px; white-space:nowrap; }
.media-tabs { display:flex; gap:8px; padding:5px; background:#f3f2fb; border-radius:14px; width:max-content; }
.media-tab { border:0; background:transparent; color:#5f6174; padding:10px 20px; border-radius:10px; cursor:pointer; font-weight:700; }
.media-tab.active { color:#4338ca; background:#fff; box-shadow:0 4px 12px rgba(67,56,202,.12); }
.media-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px); gap:18px; align-items:start; }
.media-form { padding:22px; border:1px solid #e6e5f0; border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(35,34,80,.06); }
.media-form-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.media-form-head h3 { margin:0 0 6px; font-size:20px; color:#1d1d31; }
.media-form-head p { margin:0; color:#75778c; font-size:13px; }
.media-form-head .media-pill { color:#4f46e5; border-color:#d8d5ff; background:#f5f3ff; }
.media-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.media-form-grid label { display:grid; gap:7px; color:#55576b; font-size:13px; font-weight:700; }
.media-form-grid label.wide { grid-column:1 / -1; }
.media-video-model-meta { grid-column:1 / -1; display:grid; gap:6px; padding:12px 14px; border:1px solid #e3e0f5; border-radius:12px; background:linear-gradient(120deg,#faf9ff,#f4f8ff); }
.media-video-model-meta p { margin:0; color:#666a80; font-size:12px; line-height:1.55; }
.media-video-model-meta strong { color:#4c3fb4; font-size:12px; line-height:1.55; }
.media-form-grid select,.media-form-grid textarea,.media-form-grid input[type=file] { width:100%; border:1px solid #deddeb; border-radius:10px; background:#fafaff; color:#27283b; padding:10px 12px; font:inherit; font-weight:400; box-sizing:border-box; }
.media-form-grid textarea { resize:vertical; line-height:1.6; }
.media-file-field small { color:#8a8ba0; font-size:12px; font-weight:400; }
.media-form-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.media-form-actions button { border:0; border-radius:10px; padding:11px 22px; background:linear-gradient(110deg,#5b4be8,#7c3aed); color:#fff; cursor:pointer; font-weight:800; }
.media-form-actions button:disabled { opacity:.55; cursor:wait; }
.media-status { min-height:20px; color:#7a7b8d; font-size:13px; }
.media-status[data-tone="error"] { color:#c2410c; }.media-status[data-tone="success"] { color:#15803d; }.media-status[data-tone="pending"] { color:#4f46e5; }
.media-result { min-height:320px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px dashed #d7d5e9; border-radius:18px; background:linear-gradient(140deg,#f9f8ff,#f1f4ff); color:#8b8da4; text-align:center; }
.media-result img,.media-result video { display:block; width:100%; height:auto; max-height:560px; object-fit:contain; background:#171724; }
@media (max-width: 900px) { .media-panel { grid-template-columns:1fr; } .media-result { min-height:220px; } }
@media (max-width: 600px) { .media-hub-hero { padding:22px; flex-direction:column; align-items:flex-start; } .media-form-grid { grid-template-columns:1fr; } .media-form-grid label.wide { grid-column:auto; } .media-tabs { width:100%; } .media-tab { flex:1; } }
.login #adv .landing-section-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: #7458df;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}
.login #adv .landing-model-heading h2 {
  margin-bottom: 12px;
  font-size: clamp(32px, 3.2vw, 46px);
}
.login #adv .landing-model-heading p {
  max-width: 680px;
  margin: 0 auto;
  color: #747b91;
  font-size: 16px;
  line-height: 1.7;
}
.login #adv .landing-adv-grid {
  max-width: 1200px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.login #adv .landing-vendor-card {
  --vendor-accent: #7661e9;
  min-height: 184px !important;
  padding: 22px 88px 20px 24px !important;
  border-top: 3px solid var(--vendor-accent) !important;
  border-radius: 18px;
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.login #adv .landing-vendor-card:nth-child(2) { --vendor-accent: #5f72e8; }
.login #adv .landing-vendor-card:nth-child(3) { --vendor-accent: #59606c; }
.login #adv .landing-vendor-card:nth-child(4) { --vendor-accent: #405474; }
.login #adv .landing-vendor-card:nth-child(5) { --vendor-accent: #dc7088; }
.login #adv .landing-vendor-card:nth-child(6) { --vendor-accent: #6e8be2; }
.login #adv .landing-vendor-card:focus-visible {
  outline: 3px solid rgba(116, 88, 223, .26);
  outline-offset: 3px;
}
.login #adv .landing-vendor-card:hover {
  transform: translateY(-5px) !important;
  border-color: color-mix(in srgb, var(--vendor-accent) 38%, #e8e8f2) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--vendor-accent) 14%, transparent);
}
.login #adv .landing-vendor-card::after {
  top: 21px;
  right: 22px;
  width: 48px;
  height: 48px;
  background-color: #f7f8ff;
  background-size: 28px;
  border: 1px solid #e3e5f1;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(57, 61, 94, .08);
  opacity: .96;
  transition: transform .28s ease, box-shadow .28s ease;
}
.login #adv .landing-vendor-card:hover::after {
  opacity: 1;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--vendor-accent) 18%, transparent);
}
.login #adv .landing-vendor-card .landing-adv-k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #202638;
  font-size: 21px;
  line-height: 1.25;
}
.login #adv .landing-vendor-count {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  color: var(--vendor-accent);
  background: color-mix(in srgb, var(--vendor-accent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--vendor-accent) 18%, #fff);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.login #adv .landing-vendor-card > p {
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: #72798d;
  font-size: 14px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login #adv .landing-vendor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.login #adv .landing-vendor-tags span {
  padding: 4px 8px;
  color: #65708a;
  background: #f4f5fa;
  border: 1px solid #e6e8f1;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
}
.login #adv .landing-vendor-cta {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: var(--vendor-accent);
  font-size: 12px;
  font-weight: 700;
  opacity: .82;
  transition: opacity .25s ease, transform .25s ease;
}
.login #adv .landing-vendor-cta b {
  display: inline-block;
  margin-left: 3px;
  font-size: 16px;
  line-height: .7;
  transition: transform .25s ease;
}
.login #adv .landing-vendor-card:hover .landing-vendor-cta { opacity: 1; }
.login #adv .landing-vendor-card:hover .landing-vendor-cta b { transform: translateX(3px); }
@media (max-width: 900px) {
  .login #adv .landing-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .login #adv .landing-model-heading { margin-bottom: 28px; }
  .login #adv .landing-model-heading p { font-size: 14px; }
  .login #adv .landing-adv-grid { grid-template-columns: 1fr; }
  .login #adv .landing-vendor-card {
    min-height: 170px !important;
    padding: 20px 76px 18px 20px !important;
  }
  .login #adv .landing-vendor-card::after {
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    background-size: 24px;
    border-radius: 12px;
  }
  .login #adv .landing-vendor-card .landing-adv-k { font-size: 19px; }
  .login #adv .landing-vendor-card > p { font-size: 13px; }
  .login #adv .landing-vendor-cta { right: 20px; bottom: 16px; }
}
.balance-chip {
  color: #475467;
  background: #fafbfc;
  border-color: #e2e6ee;
}
.balance-chip span,
.balance-chip small { color: #667085; }
.balance-chip strong { color: #172033; }
.tutorial-entry-btn,
.portal > .topnav[data-topnav="customer"] .logoutBtn {
  color: #475467;
  background: #fff;
  border-color: #dde2eb;
}
.tutorial-entry-btn:hover,
.portal > .topnav[data-topnav="customer"] .logoutBtn:hover { color: #4e2dcc; background: #f7f5ff; border-color: #d2c9ff; }
@media (max-width: 920px) {
  .portal > .topnav[data-topnav="customer"] .topnav-brand { border-right-color: #e8eaf0; }
}

/* Expanding showcase for the public "Why Yingbei" section. */
.login #adv2 { padding-top: 120px; padding-bottom: 126px; background: #fff; }
.login #adv2 > h2 {
  max-width: 1060px;
  margin: 0 auto 62px;
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.2;
}
.login #adv2 .landing-adv-grid {
  display: flex;
  height: 500px;
  max-width: 1420px;
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(24, 20, 54, .14);
}
.login #adv2 .landing-adv-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 500px;
  padding: 54px 34px 48px;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
  background-position: center;
  background-size: cover;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.34);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: flex .62s cubic-bezier(.2,.75,.24,1), filter .45s ease;
}
.login #adv2 .landing-adv-grid article:nth-child(1) { flex: 4 1 0; background-image: linear-gradient(180deg, rgba(16,15,39,.16), rgba(50,27,126,.78)), url("/assets/why-fast-response.webp"); }
.login #adv2 .landing-adv-grid article:nth-child(2) { background-image: linear-gradient(180deg, rgba(16,15,39,.22), rgba(50,27,126,.82)), url("/assets/why-precise-billing.webp"); }
.login #adv2 .landing-adv-grid article:nth-child(3) { background-image: linear-gradient(180deg, rgba(16,15,39,.22), rgba(50,27,126,.82)), url("/assets/why-stable-reliable.webp"); }
.login #adv2 .landing-adv-grid article:nth-child(4) { background-image: linear-gradient(180deg, rgba(16,15,39,.24), rgba(50,27,126,.84)), url("/assets/why-security-compliance.webp"); }
.login #adv2 .landing-adv-grid:hover article { flex: 1 1 0; filter: saturate(.76) brightness(.78); }
.login #adv2 .landing-adv-grid article:hover { flex: 4 1 0; filter: saturate(1) brightness(1); transform: none !important; }
.login #adv2 .landing-adv-grid article::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(27,18,76,.18), transparent 62%);
  opacity: 0;
  transition: opacity .4s ease;
}
.login #adv2 .landing-adv-grid article:hover::before,
.login #adv2 .landing-adv-grid article:nth-child(1)::before { opacity: 1; }
.login #adv2 .landing-adv-icon {
  position: absolute;
  top: 38px;
  left: 34px;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
}
.login #adv2 .landing-adv-k,
.login #adv2 .landing-adv-grid p { position: relative; z-index: 2; }
.login #adv2 .landing-adv-k {
  color: #fff;
  font-size: clamp(24px, 2.2vw, 34px);
  white-space: nowrap;
}
.login #adv2 .landing-adv-grid p {
  width: min(520px, 72vw);
  max-height: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(255,255,255,.84);
  font-size: 16px;
  line-height: 1.75;
  opacity: 0;
  transform: translateY(12px);
  transition: max-height .5s ease, opacity .4s ease .1s, transform .4s ease .1s, margin .4s ease;
}
.login #adv2 .landing-adv-grid article:nth-child(1) p,
.login #adv2 .landing-adv-grid article:hover p { max-height: 90px; margin-top: 14px; opacity: 1; transform: translateY(0); }
.login #adv2 .landing-adv-grid:hover article:nth-child(1):not(:hover) p { max-height: 0; margin-top: 0; opacity: 0; }
@media (max-width: 900px) {
  .login #adv2 { padding-top: 80px; padding-bottom: 84px; }
  .login #adv2 > h2 { margin-bottom: 38px; }
  .login #adv2 .landing-adv-grid { display: grid; height: auto; gap: 12px; overflow: visible; box-shadow: none; }
  .login #adv2 .landing-adv-grid article,
  .login #adv2 .landing-adv-grid article:nth-child(n),
  .login #adv2 .landing-adv-grid:hover article,
  .login #adv2 .landing-adv-grid article:hover { min-height: 250px; padding: 36px 26px 30px; filter: none; border: 0; border-radius: 8px; }
  .login #adv2 .landing-adv-icon { top: 26px; left: 26px; }
  .login #adv2 .landing-adv-grid article p,
  .login #adv2 .landing-adv-grid article:nth-child(n) p { width: auto; max-height: 90px; margin-top: 12px; opacity: 1; transform: none; }
}

/* Why Yingbei: richer value copy with an editorial showcase hierarchy. */
.login #adv2 .landing-why-heading {
  max-width: 820px;
  margin: 0 auto 52px;
}
.login #adv2 .landing-why-heading .landing-section-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: #7458df;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}
.login #adv2 .landing-why-heading h2 {
  max-width: none;
  margin: 0 auto 14px;
  font-size: clamp(34px, 3.8vw, 58px);
}
.login #adv2 .landing-why-heading p {
  max-width: 720px;
  margin: 0 auto;
  color: #747b91;
  font-size: 16px;
  line-height: 1.75;
}
.login #adv2 .landing-adv-grid {
  height: 520px;
}
.login #adv2 .landing-adv-grid article {
  min-height: 520px;
  padding: 54px 38px 50px;
}
.login #adv2 .landing-adv-grid p {
  width: min(560px, 72vw);
  max-height: 0;
  font-size: 16px;
  line-height: 1.85;
}
.login #adv2 .landing-adv-grid article:nth-child(1) p,
.login #adv2 .landing-adv-grid article:hover p {
  max-height: 150px;
}
@media (max-width: 900px) {
  .login #adv2 .landing-why-heading { margin-bottom: 34px; }
  .login #adv2 .landing-why-heading p { font-size: 15px; }
  .login #adv2 .landing-adv-grid article,
  .login #adv2 .landing-adv-grid article:nth-child(n),
  .login #adv2 .landing-adv-grid:hover article,
  .login #adv2 .landing-adv-grid article:hover {
    min-height: 270px;
    padding: 36px 28px 30px;
  }
  .login #adv2 .landing-adv-grid article p,
  .login #adv2 .landing-adv-grid article:nth-child(n) p {
    max-height: 150px;
  }
}
@media (max-width: 560px) {
  .login #adv2 .landing-why-heading h2 { font-size: 34px; }
  .login #adv2 .landing-why-heading p { font-size: 14px; line-height: 1.65; }
  .login #adv2 .landing-adv-grid article,
  .login #adv2 .landing-adv-grid article:nth-child(n),
  .login #adv2 .landing-adv-grid:hover article,
  .login #adv2 .landing-adv-grid article:hover {
    min-height: 260px;
  }
}

/* Yingbei visual refresh: lively, consistent customer workspace. */
#customerApp {
  --yb-ink: #172033;
  --yb-muted: #667085;
  --yb-violet: #6239e8;
  --yb-blue: #3f6ff3;
  --yb-cyan: #1597a8;
  --yb-green: #1f9a72;
  --yb-coral: #dc6659;
  --yb-line: #e4e8f1;
  --yb-surface: #ffffff;
  --yb-canvas: #f6f8fc;
}

#customerApp.portal {
  grid-template-columns: 232px minmax(0, 1fr);
  transition: grid-template-columns .22s ease;
  background:
    linear-gradient(120deg, rgba(98,57,232,.035), transparent 26%),
    linear-gradient(300deg, rgba(21,151,168,.035), transparent 30%),
    var(--yb-canvas);
}
#customerApp.nav-collapsed.portal { grid-template-columns: 0 minmax(0, 1fr); }
#customerApp.nav-collapsed > .topnav[data-topnav="customer"] {
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-right: 0;
  box-shadow: none;
}

/* 后台：智能客服管理 */
#adminApp .topnav-links {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#adminApp .topnav-links::-webkit-scrollbar {
  display: none;
}

#adminApp .support-admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

#adminApp .support-admin-metrics article {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 16px 18px;
  background: linear-gradient(145deg, #fff, #f7faff);
  border: 1px solid #e3eaf3;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(38, 72, 112, .06);
}

#adminApp .support-admin-metrics article::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -28px;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(103, 170, 232, .17), transparent 68%);
}

#adminApp .support-admin-metrics small,
#adminApp .support-admin-metrics span {
  display: block;
  color: #7b8798;
  font-size: 12px;
}

#adminApp .support-admin-metrics strong {
  display: block;
  margin: 7px 0 4px;
  color: #1d3150;
  font-size: 27px;
  line-height: 1;
}

#adminApp .support-admin-panel,
#adminApp .support-admin-lower .panel {
  border-color: #e1e8f1;
  box-shadow: 0 9px 28px rgba(42, 70, 105, .055);
}

#adminApp .support-admin-panel {
  padding: 18px;
}

#adminApp .support-admin-head {
  align-items: center;
  gap: 16px;
}

#adminApp .support-admin-head h3,
#adminApp .support-admin-lower h3 {
  margin: 0;
  color: #1d3150;
}

#adminApp .support-admin-head p,
#adminApp .support-admin-lower .panel-head p {
  margin: 5px 0 0;
  color: #8490a1;
  font-size: 12px;
}

#adminApp .support-admin-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

#adminApp .support-admin-tools input {
  width: 210px;
}

#adminApp .support-admin-tools select {
  width: 130px;
}

#adminApp .support-admin-tools input,
#adminApp .support-admin-tools select,
#adminApp .support-request-status {
  min-height: 36px;
  padding: 7px 10px;
  color: #40516a;
  background: #f8fbfe;
  border: 1px solid #dce6f0;
  border-radius: 9px;
}

#adminApp #supportKbNewBtn {
  min-height: 36px;
  padding: 7px 14px;
  color: #fff;
  background: linear-gradient(135deg, #438bd2, #5878df);
  border-radius: 9px;
  box-shadow: 0 7px 16px rgba(65, 125, 200, .2);
}

#adminApp .support-kb-table {
  width: 100%;
  min-width: 1080px;
  height: auto !important;
  table-layout: fixed;
}

#adminApp .support-admin-panel > .table-wrap {
  max-height: 560px;
  min-height: 0;
  overflow: auto;
  border-color: #e4eaf2;
  background: #fff;
}

#adminApp .support-kb-table tbody,
#adminApp .support-kb-table tr,
#adminApp .support-kb-table td {
  height: auto !important;
  min-height: 0 !important;
}

#adminApp .support-kb-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 9px;
  background: #f8fafc;
}

#adminApp .support-kb-table td {
  padding: 12px 9px;
  vertical-align: middle;
}

#adminApp .support-kb-table td:first-child {
  width: 27%;
}

#adminApp .support-kb-table th:nth-child(2),
#adminApp .support-kb-table td:nth-child(2) { width: 8%; }
#adminApp .support-kb-table th:nth-child(3),
#adminApp .support-kb-table td:nth-child(3) { width: 7%; }
#adminApp .support-kb-table th:nth-child(4),
#adminApp .support-kb-table td:nth-child(4) { width: 18%; }
#adminApp .support-kb-table th:nth-child(5),
#adminApp .support-kb-table td:nth-child(5) { width: 6%; text-align: center; }
#adminApp .support-kb-table th:nth-child(6),
#adminApp .support-kb-table td:nth-child(6) { width: 9%; }
#adminApp .support-kb-table th:nth-child(7),
#adminApp .support-kb-table td:nth-child(7) { width: 10%; }
#adminApp .support-kb-table th:nth-child(8),
#adminApp .support-kb-table td:nth-child(8) { width: 15%; }

#adminApp .support-kb-table tbody tr:hover td {
  background: #f8fbff;
}

#adminApp .support-answer-preview,
#adminApp #supportFeedbackRows small,
#adminApp #supportRequestRows small {
  display: block;
  margin-top: 5px;
  color: #8a95a5;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
}

#adminApp .support-answer-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 340px;
}

#adminApp .support-category-pill,
#adminApp .support-status,
#adminApp .support-quick-flag,
#adminApp .support-feedback-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#adminApp .support-category-pill {
  color: #4778a8;
  background: #edf6ff;
  border: 1px solid #d5e9fb;
}

#adminApp .support-visibility-pill {
  display: inline-flex;
  align-items: center;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 1;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
  color: #2366a8;
  background: rgba(222, 239, 255, .72);
  border: 1px solid rgba(120, 180, 232, .45);
  white-space: nowrap;
}

#adminApp .support-visibility-pill.internal {
  color: #815a28;
  background: rgba(255, 244, 219, .88);
  border-color: rgba(218, 173, 96, .5);
}

#adminApp .support-status.active {
  color: #158266;
  background: #eaf8f3;
  border: 1px solid #ccecdf;
}

#adminApp .support-status.inactive {
  color: #7d8795;
  background: #f2f4f7;
  border: 1px solid #e1e5eb;
}

#adminApp .support-status.pending {
  color: #a66a17;
  background: #fff7e9;
  border: 1px solid #f5dfb6;
}

#adminApp .support-quick-flag {
  margin-left: 5px;
  color: #5868bd;
  background: #f0f1ff;
  border: 1px solid #dfe1fa;
}

#adminApp .support-keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 210px;
}

#adminApp .support-keyword-list span {
  padding: 2px 6px;
  color: #66768b;
  background: #f5f7fa;
  border-radius: 5px;
  font-size: 10px;
}

#adminApp .support-keyword-list em {
  color: #a0a8b4;
  font-size: 11px;
  font-style: normal;
}

#adminApp .support-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#adminApp .support-kb-table .support-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(54px, 1fr));
  width: 132px;
}

#adminApp .support-row-actions .mini {
  min-height: 28px;
  padding: 4px 8px;
  color: #49617d;
  background: #f7f9fc;
  border: 1px solid #e1e7ef;
  border-radius: 7px;
  white-space: nowrap;
}

#adminApp .support-row-actions .mini:hover {
  color: #2e66b0;
  background: #eef5ff;
  border-color: #cfe0f5;
}

#adminApp .support-row-actions .danger {
  color: #c25a67;
  background: #fff5f6;
  border-color: #f1dadd;
}

#adminApp .support-admin-empty,
#adminApp .support-table-empty {
  padding: 28px;
  color: #93a0b0;
  text-align: center;
}

#adminApp .support-admin-lower {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

#adminApp .support-admin-lower > .panel:nth-child(3) {
  grid-column: 1 / -1;
}

#adminApp .support-admin-lower .table-wrap {
  max-height: 360px;
}

#adminApp .support-feedback-mark.up {
  color: #2c78b7;
  background: rgba(216, 237, 255, .72);
  border: 1px solid #c3e1f8;
}

#adminApp .support-feedback-mark.down {
  color: #7b719c;
  background: #f1eff8;
  border: 1px solid #dfdbea;
}

#adminApp .support-request-message {
  display: -webkit-box;
  min-width: 180px;
  max-width: 300px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #46556b;
  font-size: 12px;
  line-height: 1.45;
}

#adminApp .support-version-list,
#adminApp .support-ticket-history { display:flex; flex-direction:column; gap:10px; }
#adminApp .support-version-card { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid #e5eaf3; border-radius:12px; background:#fbfdff; }
#adminApp .support-version-card span,
#adminApp .support-version-card p { display:block; margin:5px 0 0; color:#71809a; font-size:12px; line-height:1.6; }
#adminApp .support-ticket-history-item { padding:10px 12px; border:1px solid #e5eaf3; border-radius:10px; background:#fbfdff; }
#adminApp .support-ticket-history-item > span { margin-left:8px; color:#5267d8; font-size:12px; }
#adminApp .support-ticket-history-item small,
#adminApp .support-ticket-history-item p { display:block; margin:5px 0 0; color:#71809a; font-size:12px; }
.support-ticket-history { display:flex; flex-direction:column; gap:8px; margin:0 12px 10px; }
.support-ticket-history-item { padding:9px 11px; border:1px solid #e2e8f4; border-radius:10px; background:#fbfdff; font-size:12px; }
.support-ticket-history-item > span { margin-left:8px; color:#5267d8; }
.support-ticket-history-item small, .support-ticket-history-item p { display:block; margin:4px 0 0; color:#71809a; line-height:1.5; }

#adminApp .support-request-status {
  min-width: 92px;
  font-size: 12px;
}

#adminApp .support-kb-modal {
  width: min(720px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
}

#adminApp .support-kb-modal-title {
  margin-bottom: 20px;
  padding-right: 34px;
}

#adminApp .support-kb-modal-title p {
  margin: 0 0 4px;
  color: #4c86c3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#adminApp .support-kb-modal-title h3 {
  margin: 0;
  color: #1c2f4a;
  font-size: 22px;
}

#adminApp .support-kb-modal-title span {
  display: block;
  margin-top: 6px;
  color: #8490a0;
  font-size: 12px;
}

#adminApp .support-admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: #52627a;
  font-size: 12px;
}

#adminApp .support-admin-check input {
  width: 16px;
  height: 16px;
}

@media (max-width: 1100px) {
  #adminApp .support-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #adminApp .support-admin-head {
    align-items: stretch;
    flex-direction: column;
  }

  #adminApp .support-admin-tools {
    margin-left: 0;
  }
}

/* 盈倍云智能客服 MVP */
#customerApp .support-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 260;
  pointer-events: none;
  transition: left .24s cubic-bezier(.2,.75,.25,1), top .24s cubic-bezier(.2,.75,.25,1);
}

#customerApp.customer-chat-active .support-widget {
  bottom: 104px;
}

#customerApp .support-widget.dragging {
  transition: none;
}

#customerApp .support-launcher {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 6px 11px 6px 6px;
  color: #202946;
  background:
    linear-gradient(120deg, rgba(255,255,255,.98), rgba(247,248,255,.94)) padding-box,
    linear-gradient(135deg, rgba(107,78,255,.52), rgba(44,180,196,.28)) border-box;
  border: 1px solid transparent;
  border-radius: 17px;
  box-shadow: 0 13px 36px rgba(35,43,91,.16), 0 3px 10px rgba(78,67,195,.08);
  backdrop-filter: blur(14px);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease;
}

#customerApp .support-launcher:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(35,43,91,.2), 0 5px 14px rgba(78,67,195,.1);
}

#customerApp .support-launcher:active,
#customerApp .support-widget.dragging .support-launcher {
  cursor: grabbing;
  transform: scale(.98);
  box-shadow: 0 9px 24px rgba(35,43,91,.16);
}

#customerApp .support-launcher-mark,
#customerApp .support-agent-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border-radius: 50%;
}

#customerApp .support-launcher-mark {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 3px;
  background: linear-gradient(145deg, #7555ff, #416df1 58%, #19aeb2);
  box-shadow: 0 6px 16px rgba(76,76,199,.24);
}

#customerApp .support-launcher-mark img,
#customerApp .support-agent-avatar img {
  width: 78%;
  height: 78%;
}

#customerApp .support-launcher-mark img {
  width: 100%;
  height: 100%;
  padding: 5px;
  background: #fff;
  border-radius: 50%;
}

#customerApp .support-launcher-copy {
  display: flex;
  align-items: center;
  min-width: 60px;
  white-space: nowrap;
  text-align: left;
}

#customerApp .support-launcher-copy strong {
  color: #202946;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .01em;
}

#customerApp .support-unread-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  color: #fff;
  background: #e5484d;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

#customerApp .support-widget.open .support-launcher {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

#customerApp .support-panel {
  pointer-events: auto;
  position: fixed;
  left: var(--support-panel-left, calc(100vw - 412px));
  top: var(--support-panel-top, calc(100vh - 642px));
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 120px));
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(23,32,51,.22);
  transform-origin: right bottom;
  animation: support-panel-in .2s ease-out;
}

@keyframes support-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#customerApp .support-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(135deg, #5630d7, #426ff0);
}

#customerApp .support-agent-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}

#customerApp .support-agent-title {
  display: grid;
  min-width: 0;
  margin-right: auto;
}

#customerApp .support-agent-title strong {
  font-size: 15px;
}

#customerApp .support-head-btn {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
}

#customerApp .support-head-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.2);
}

#customerApp .support-chat-view,
#customerApp .support-ticket-view {
  min-height: 0;
  flex: 1;
}

#customerApp .support-chat-view {
  display: flex;
  flex-direction: column;
}

#customerApp .support-messages {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 14px;
  overflow-y: auto;
  background: #f7f8fc;
}

#customerApp .support-message {
  display: flex;
  max-width: 88%;
}

#customerApp .support-message.user {
  align-self: flex-end;
}

#customerApp .support-message.assistant {
  align-self: flex-start;
}

#customerApp .support-message-bubble {
  padding: 9px 11px;
  white-space: pre-wrap;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.62;
}

#customerApp .support-message.user .support-message-bubble {
  color: #fff;
  background: linear-gradient(135deg, #6239e8, #4f67ec);
  border-bottom-right-radius: 4px;
}

#customerApp .support-message.assistant .support-message-bubble {
  color: #273247;
  background: #fff;
  border: 1px solid #e2e6ee;
  border-bottom-left-radius: 4px;
  box-shadow: 0 3px 10px rgba(23,32,51,.04);
}

#customerApp .support-message-actions {
  display: flex;
  gap: 7px;
  margin-top: 7px;
}

#customerApp .support-message-actions button {
  display: grid;
  place-items: center;
  width: 31px;
  min-width: 31px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: #5c88bd;
  background: rgba(222, 239, 255, .58);
  border: 1px solid rgba(157, 203, 241, .48);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

#customerApp .support-message-actions button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#customerApp .support-message-actions button:hover {
  color: #3474ba;
  background: rgba(207, 231, 253, .78);
  border-color: rgba(109, 174, 228, .62);
  transform: translateY(-1px);
}

#customerApp .support-message-actions button.active {
  color: #2469ae;
  background: rgba(190, 222, 250, .88);
  border-color: rgba(82, 155, 216, .68);
  box-shadow: 0 4px 12px rgba(60, 132, 194, .13), inset 0 1px 0 rgba(255,255,255,.8);
}

#customerApp .support-message-ticket {
  margin-top: 7px;
  color: #5236c5;
  background: #f4f1ff;
  border: 1px solid #ddd5fb;
}

#customerApp .support-quick-wrap {
  padding: 10px 12px 8px;
  background: #fff;
  border-top: 1px solid #edf0f5;
}

#customerApp .support-quick-wrap > span {
  display: block;
  margin-bottom: 7px;
  color: #8b94a5;
  font-size: 11px;
  font-weight: 700;
}

#customerApp .support-quick-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

#customerApp .support-quick-list::-webkit-scrollbar {
  display: none;
}

#customerApp .support-quick-list button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 9px;
  color: #4c5870;
  background: #f7f8fb;
  border: 1px solid #e3e7ef;
  border-radius: 999px;
  font-size: 11px;
}

#customerApp .support-quick-list button:hover {
  color: #5135bb;
  background: #f1eeff;
  border-color: #dad2fa;
}

#customerApp .support-secondary-actions {
  padding: 0 12px 8px;
  background: #fff;
}

#customerApp .support-secondary-actions button {
  min-height: 28px;
  padding: 3px 0;
  color: #6d5ac7;
  background: transparent;
  border: 0;
  font-size: 11px;
}

#customerApp .support-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 9px 11px;
  background: #fff;
  border-top: 1px solid #e8ebf1;
}

#customerApp .support-input-row textarea {
  min-height: 42px;
  max-height: 96px;
  padding: 10px 11px;
  resize: none;
  border: 1px solid #dce1ea;
  border-radius: 11px;
  line-height: 1.45;
}

#customerApp .support-input-row textarea:focus {
  border-color: #8f7bea;
  box-shadow: 0 0 0 3px rgba(98,57,232,.08);
}

#customerApp .support-input-row button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  background: linear-gradient(135deg, #6239e8, #3f6ff3);
  border-radius: 11px;
}

#customerApp .support-mode-note {
  margin: 0;
  padding: 0 10px 8px;
  color: #a0a8b7;
  background: #fff;
  text-align: center;
  font-size: 10px;
}

#customerApp .support-ticket-view {
  padding: 14px;
  overflow-y: auto;
  background: #fafbfe;
}

#customerApp .support-ticket-heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
}

#customerApp .support-ticket-heading > button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  color: #4e596f;
  background: #fff;
  border: 1px solid #e0e4ec;
}

#customerApp .support-ticket-heading div {
  display: grid;
  gap: 3px;
}

#customerApp .support-ticket-heading strong {
  color: #202a3c;
  font-size: 15px;
}

#customerApp .support-ticket-heading small,
#customerApp .support-ticket-view form > p {
  color: #7d8799;
  font-size: 11px;
  line-height: 1.5;
}

#customerApp .support-ticket-view form {
  display: grid;
  gap: 12px;
}

#customerApp .support-ticket-view label {
  display: grid;
  gap: 6px;
  color: #4b566c;
  font-size: 12px;
  font-weight: 700;
}

#customerApp .support-ticket-view select,
#customerApp .support-ticket-view textarea {
  width: 100%;
  padding: 10px;
  color: #263146;
  background: #fff;
  border: 1px solid #dce1ea;
  border-radius: 10px;
}

#customerApp .support-ticket-view textarea {
  resize: vertical;
  line-height: 1.55;
}

#customerApp .support-ticket-submit {
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, #6239e8, #3f6ff3);
  border-radius: 10px;
}

@media (max-width: 768px) {
  #customerApp .support-widget {
    right: 12px;
    bottom: calc(var(--mobile-bottom-nav-h) + 76px + env(safe-area-inset-bottom));
  }

  #customerApp.customer-chat-active .support-widget {
    bottom: calc(var(--mobile-bottom-nav-h) + 112px + env(safe-area-inset-bottom));
  }

  #customerApp .support-launcher {
    min-height: 50px;
    padding: 5px;
    border-radius: 50%;
  }

  #customerApp .support-launcher-mark {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  #customerApp .support-launcher-copy {
    display: none;
  }

  #customerApp .support-panel {
    position: fixed;
    inset: calc(var(--mobile-topbar-h) + 8px) 8px calc(var(--mobile-bottom-nav-h) + 8px + env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 16px;
    transform-origin: right bottom;
  }

  #customerApp .support-panel-head {
    min-height: 60px;
    padding: 8px 10px;
  }

  #customerApp .support-agent-avatar {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  #customerApp .support-messages {
    padding: 13px 11px;
  }

  #customerApp .support-message {
    max-width: 92%;
  }

  #customerApp .support-message-bubble {
    font-size: 13px;
  }

  #customerApp .support-quick-wrap {
    padding: 8px 10px 7px;
  }

  #customerApp .support-input-row {
    padding: 8px 9px;
  }
}

/* Media entry points: keep creation actions visible without competing with
   the active model picker, and give the standalone dialogs a focused studio
   surface that still feels native to the portal. */
#customerApp .section-hint { margin: 4px 0 0; color: #7a8090; font-size: 12px; line-height: 1.5; }
#customerApp .chat-media-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
#customerApp .chat-media-action {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 11px;
  border: 1px solid #e0def5; border-radius: 9px; background: #faf9ff; color: #5143b8;
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#customerApp .chat-media-action.video { border-color: #d9e8ef; background: #f5fbfc; color: #147181; }
#customerApp .chat-media-action:hover { transform: translateY(-1px); border-color: #b9b1f0; box-shadow: 0 6px 14px rgba(71,58,177,.12); }
#customerApp .chat-media-action.video:hover { border-color: #a3d5de; box-shadow: 0 6px 14px rgba(20,113,129,.12); }

#customerApp .ms-card-media { display: flex; flex-direction: column; gap: 8px; width: 100%; height: auto; min-height: 190px; align-self: stretch; box-sizing: border-box; }
#customerApp .ms-card-media-image::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
#customerApp .ms-card-media-video::before { background: linear-gradient(90deg, #0ea5a4, #2563eb); }
#customerApp .ms-media-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #858b99; font-size: 11px; }
#customerApp .ms-media-price-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#customerApp .ms-media-price { color: #5143b8; font-weight: 800; }
#customerApp .ms-media-pro { color: #147181; font-size: 10.5px; font-weight: 800; line-height: 1.35; }
#customerApp .ms-media-desc-full-media { display: none; position: absolute; inset: 0; padding: 16px; background: #fff; border-radius: 8px; z-index: 8; flex-direction: column; gap: 9px; overflow: auto; }
#customerApp .ms-card-media:hover .ms-media-desc-full-media,
#customerApp .ms-card-media:focus .ms-media-desc-full-media { display: flex; }
#customerApp .ms-card-media:focus { outline: 2px solid rgba(81,67,184,.35); outline-offset: 2px; }
/* 发布时间紧跟模型名(与普通模型卡片对齐),不再 margin-top:auto 推到底部 */
#customerApp .ms-card-media .ms-media-date { margin-top: 0; white-space: nowrap; }
#customerApp .ms-card-media .ms-media-meta { margin-top: 0; padding-top: 10px; border-top: 1px dashed var(--line); }
#customerApp .ms-media-hover-date { color: #858b99; font-size: 11px; }
#customerApp .ms-media-hover-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #858b99; font-size: 11px; }
#customerApp .ms-media-hover-reference { color: #5143b8; font-weight: 800; }
#customerApp .ms-media-desc-full-media .ms-media-features { display: flex; flex-wrap: wrap; gap: 6px; }
#customerApp .ms-media-features .ms-feat-chip { padding: 4px 7px; border-color: #e2e0f2; background: #faf9ff; font-size: 10px; }
#customerApp .ms-media-hover-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-top: 7px; border-top: 1px dashed #e6e4ef; color: #30334a; font-size: 11px; }
#customerApp .ms-media-hover-price strong { color: #5143b8; font-size: 14px; }
#customerApp .ms-card-media-video .ms-media-hover-price strong { color: #147181; }

#customerApp .chat-media-dialog { z-index: 1100; padding: 18px; }
#customerApp .chat-media-modal {
  position: relative; width: min(700px, 96vw); max-height: min(760px, 92vh); overflow: auto; padding: 28px;
  border: 1px solid rgba(255,255,255,.72); border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #fbfaff 62%, #f1f9fa 100%);
  box-shadow: 0 28px 80px rgba(26, 27, 65, .28); transform: translateY(18px) scale(.98);
  transition: transform .24s ease;
}
#customerApp .chat-media-dialog.open .chat-media-modal { transform: translateY(0) scale(1); }
#customerApp .chat-media-modal-head { padding-right: 42px; margin-bottom: 18px; }
#customerApp .chat-media-kicker { display: inline-flex; margin-bottom: 8px; color: #6254d8; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
#customerApp .chat-media-modal-head h3 { margin: 0 0 6px; color: #202238; font-size: 25px; letter-spacing: -.02em; }
#customerApp .chat-media-modal-head p { margin: 0; color: #777b90; font-size: 13px; line-height: 1.6; }
#customerApp .chat-media-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
#customerApp .chat-media-form label { display: grid; gap: 7px; color: #55586d; font-size: 12px; font-weight: 800; }
#customerApp .chat-media-form label.wide { grid-column: 1 / -1; }
#customerApp .chat-media-form select,
#customerApp .chat-media-form input,
#customerApp .chat-media-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #deddec; border-radius: 10px; background: rgba(255,255,255,.82); color: #27283b; padding: 10px 11px; font: inherit; font-weight: 400; outline: none; }
#customerApp .chat-media-form textarea { resize: vertical; line-height: 1.6; }
#customerApp .chat-media-form select:focus,
#customerApp .chat-media-form input:focus,
#customerApp .chat-media-form textarea:focus { border-color: #9d8df0; box-shadow: 0 0 0 3px rgba(104, 86, 216, .1); }
#customerApp .chat-media-form small { color: #8b8fa0; font-size: 11px; font-weight: 400; line-height: 1.45; }
#customerApp .chat-media-modal-result { display: flex; grid-column: 1 / -1; min-height: 180px; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed #d7d5e9; border-radius: 14px; background: linear-gradient(140deg,#fbfaff,#f1f7fb); color: #8b8da1; text-align: center; }
#customerApp .chat-media-modal-result img,
#customerApp .chat-media-modal-result video { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #1b1d2d; }
#customerApp .chat-media-modal-foot { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
#customerApp .chat-media-modal-foot [aria-live] { min-height: 20px; color: #74798d; font-size: 12px; }
#customerApp .chat-media-modal-foot [data-tone="error"] { color: #c2410c; }
#customerApp .chat-media-modal-foot [data-tone="success"] { color: #15803d; }
#customerApp .chat-media-modal-foot [data-tone="pending"] { color: #5143b8; }
#customerApp .chat-media-modal-foot button { border: 0; border-radius: 10px; padding: 10px 18px; background: linear-gradient(110deg,#5b4be8,#227d8c); color: #fff; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; box-shadow: 0 8px 18px rgba(73, 64, 184, .18); }
#customerApp .chat-media-modal-foot button:disabled { opacity: .58; cursor: wait; }

@media (max-width: 640px) {
  #customerApp .section-hint { display: none; }
  #customerApp .vendor-section .panel-head { align-items: flex-start; }
  #customerApp .chat-media-actions { gap: 4px; }
  #customerApp .chat-media-action { min-height: 30px; padding: 6px 8px; font-size: 11px; }
  #customerApp .chat-media-form { grid-template-columns: 1fr; }
  #customerApp .chat-media-form label.wide { grid-column: auto; }
  #customerApp .chat-media-modal { padding: 22px 17px 18px; border-radius: 16px; }
  #customerApp .chat-media-modal-head h3 { font-size: 22px; }
  #customerApp .chat-media-modal-result { min-height: 140px; }
  #customerApp .chat-media-modal-foot { align-items: stretch; flex-direction: column; }
  #customerApp .chat-media-modal-foot button { width: 100%; }
}

#customerApp.nav-collapsed > .topnav[data-topnav="customer"] .topnav-brand {
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}
#customerApp.nav-collapsed > .topnav[data-topnav="customer"] .topnav-brand:hover {
  opacity: 1;
  filter: none;
}
#customerApp.nav-collapsed > .topnav[data-topnav="customer"] .topnav-brand strong,
#customerApp.nav-collapsed > .topnav[data-topnav="customer"] .topnav-brand img,
#customerApp.nav-collapsed > .topnav[data-topnav="customer"] .topnav-links,
#customerApp.nav-collapsed > .topnav[data-topnav="customer"] .topnav-actions {
  display: none;
}
#customerApp.nav-collapsed .portal-topbar > .nav-toggle-btn {
  position: static;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin: 0;
  color: #59657a;
  background: rgba(255,255,255,.94);
  border: 1px solid #dfe4ed;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(23,32,51,.1);
  backdrop-filter: blur(12px);
}
#customerApp.nav-collapsed .portal-topbar > .nav-toggle-btn:hover {
  color: var(--yb-violet);
  background: #fff;
  border-color: #cfc8f3;
  box-shadow: 0 8px 24px rgba(63,42,137,.15);
}
#customerApp.nav-collapsed .nav-toggle-btn svg { transform: none; }
#customerApp.nav-collapsed .portal-topbar {
  align-items: center;
  gap: 14px;
  padding-left: 24px;
}

@media (min-width: 769px) {
  #customerApp.nav-collapsed .portal-topbar > div {
    display: none;
  }
}

#customerApp > .topnav[data-topnav="customer"] {
  padding: 20px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fe 48%, #f1f6f8 100%);
  border-right: 1px solid #e0e5ef;
  box-shadow: 8px 0 28px rgba(23,32,51,.035);
}

#customerApp > .topnav[data-topnav="customer"] .topnav-brand {
  min-height: 64px;
  padding: 4px 10px 18px;
  color: var(--yb-ink);
  border-bottom: 1px solid #e7eaf1;
}

#customerApp > .topnav[data-topnav="customer"] .topnav-brand img {
  width: 38px;
  height: 38px;
  padding: 4px;
  background: linear-gradient(145deg, #f1ecff, #e7f6f5);
  border: 1px solid #dfe4ef;
  border-radius: 8px;
}

#customerApp > .topnav[data-topnav="customer"] .topnav-brand strong {
  color: var(--yb-ink);
  font-size: 20px;
}

#customerApp > .topnav[data-topnav="customer"] .topnav-links {
  gap: 5px;
  padding: 4px 0;
}

#customerApp > .topnav[data-topnav="customer"] .customer-nav {
  --nav-accent: var(--yb-violet);
  position: relative;
  min-height: 43px;
  padding: 10px 12px 10px 18px;
  overflow: hidden;
  color: #4f5c70;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

#customerApp > .topnav[data-topnav="customer"] .customer-nav[data-cview="home"] { --nav-accent: #6239e8; }
#customerApp > .topnav[data-topnav="customer"] .customer-nav[data-cview="square"] { --nav-accent: #1597a8; }
#customerApp > .topnav[data-topnav="customer"] .customer-nav[data-cview="agents"] { --nav-accent: #3f6ff3; }
#customerApp > .topnav[data-topnav="customer"] .customer-nav[data-cview="chat"] { --nav-accent: #1f9a72; }
#customerApp > .topnav[data-topnav="customer"] .customer-nav[data-cview="usage"] { --nav-accent: #dc6659; }
#customerApp > .topnav[data-topnav="customer"] .customer-nav[data-cview="account"] { --nav-accent: #d28a20; }
#customerApp > .topnav[data-topnav="customer"] .customer-nav[data-cview="recharge"] { --nav-accent: #c84da6; }

#customerApp > .topnav[data-topnav="customer"] .customer-nav::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 5px;
  width: 3px;
  background: var(--nav-accent);
  border-radius: 3px;
  opacity: 0;
  transform: scaleY(.35);
  transition: opacity .18s ease, transform .18s ease;
}

#customerApp > .topnav[data-topnav="customer"] .customer-nav:hover {
  color: var(--yb-ink);
  background: rgba(255,255,255,.8);
  border-color: #e0e5ef;
  transform: translateX(2px);
}

#customerApp > .topnav[data-topnav="customer"] .customer-nav.active,
#customerApp > .topnav[data-topnav="customer"] .customer-nav.recharge-nav.active {
  color: #38228f;
  background: linear-gradient(90deg, rgba(98,57,232,.115), rgba(63,111,243,.055));
  border-color: rgba(98,57,232,.14);
  box-shadow: 0 5px 14px rgba(63,42,137,.07);
}

#customerApp > .topnav[data-topnav="customer"] .customer-nav.active::before { opacity: 1; transform: scaleY(1); }

#customerApp > .topnav[data-topnav="customer"] .customer-nav.recharge-nav {
  color: #4f5c70;
  background: transparent;
  border-color: transparent;
}

#customerApp > .topnav[data-topnav="customer"] .customer-nav.recharge-nav:hover:not(.active) {
  color: var(--yb-ink);
  background: rgba(255,255,255,.8);
  border-color: #e0e5ef;
  transform: translateX(2px);
}

#customerApp > .topnav[data-topnav="customer"] .topnav-actions { gap: 8px; }
#customerApp .balance-group { display: grid; gap: 8px; }

#customerApp .balance-chip {
  position: relative;
  padding: 11px 10px 11px 14px;
  overflow: hidden;
  color: var(--yb-ink);
  background: rgba(255,255,255,.8);
  border: 1px solid #e0e5ef;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(23,32,51,.035);
}

#customerApp .balance-chip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--yb-cyan);
}

#customerApp .balance-chip:nth-child(2)::before { background: var(--yb-violet); }
#customerApp .balance-chip span,
#customerApp .balance-chip small { color: #758196; }
#customerApp .balance-chip strong { color: var(--yb-ink); font-size: 16px; }

#customerApp .tutorial-entry-btn,
#customerApp > .topnav[data-topnav="customer"] .logoutBtn {
  min-height: 40px;
  color: #536076;
  background: rgba(255,255,255,.68);
  border: 1px solid #dfe4ed;
  border-radius: 8px;
}

#customerApp .tutorial-entry-btn:hover,
#customerApp > .topnav[data-topnav="customer"] .logoutBtn:hover {
  color: #38228f;
  background: #fff;
  border-color: #cfc5f6;
}

#customerApp .portal-main { padding: 0 30px 40px; }

#customerApp .portal-topbar {
  min-height: 100px;
  padding: 24px 0 18px;
  border-bottom: 1px solid #e3e7ef;
}

#customerApp .portal-topbar > div { position: relative; padding-left: 14px; }
#customerApp .portal-topbar > div::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 2px;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--yb-violet), var(--yb-cyan));
  border-radius: 4px;
}
#customerApp .portal-topbar h2 { color: var(--yb-ink); font-size: 25px; }
#customerApp .portal-topbar p { color: #758196; }

#customerApp .marketing-hero,
#customerApp .marketing-hero-fx {
  min-height: 294px;
  padding: 36px;
  background:
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(255,255,255,.045) 36px 37px),
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(255,255,255,.045) 36px 37px),
    linear-gradient(125deg, #16213f 0%, #2d3f8e 46%, #167f8f 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(29,45,92,.16);
}

#customerApp .marketing-hero::before,
#customerApp .marketing-hero-fx::before {
  content: "";
  position: absolute;
  inset: auto -8% -38% 52%;
  height: 78%;
  opacity: .7;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.015));
  transform: skewX(-18deg);
  pointer-events: none;
}

#customerApp .marketing-hero-fx .hero-title {
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  animation: none;
}

#customerApp .marketing-hero-fx .eyebrow { color: #b9f1ec; }
#customerApp .marketing-hero-fx p { color: rgba(255,255,255,.78); }

#customerApp .marketing-hero-fx .hero-actions button {
  min-height: 40px;
  color: #23326c;
  background: #fff;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 7px;
  box-shadow: 0 8px 20px rgba(9,18,48,.16);
  animation: none;
}

#customerApp .marketing-hero-fx .hero-actions button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(9,18,48,.22); }
#customerApp .marketing-hero-fx .hero-actions button.secondary { color: #fff; background: rgba(255,255,255,.08); }
#customerApp .marketing-hero-fx .landing-vendors { margin-top: 28px; border-color: rgba(255,255,255,.16); }
#customerApp .marketing-hero-fx .vendors-track span { padding: 5px 8px; background: rgba(255,255,255,.07); border-radius: 6px; text-shadow: none; }

#customerApp .metrics,
#customerApp .customer-metrics { gap: 12px; }

#customerApp .metrics article,
#customerApp .customer-metrics article,
#customerApp .ud-cards article,
#customerApp .profile-grid article {
  --card-accent: var(--yb-violet);
  position: relative;
  padding: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--yb-line);
  border-radius: 8px;
  box-shadow: 0 7px 20px rgba(23,32,51,.045);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#customerApp .metrics article:nth-child(4n+2),
#customerApp .profile-grid article:nth-child(3n+2) { --card-accent: var(--yb-cyan); }
#customerApp .metrics article:nth-child(4n+3),
#customerApp .profile-grid article:nth-child(3n+3) { --card-accent: var(--yb-green); }
#customerApp .metrics article:nth-child(4n+4) { --card-accent: var(--yb-coral); }

#customerApp .metrics article::before,
#customerApp .customer-metrics article::before,
#customerApp .ud-cards article::before,
#customerApp .profile-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--card-accent);
}

#customerApp .metrics article:hover,
#customerApp .customer-metrics article:hover,
#customerApp .profile-grid article:hover {
  transform: translateY(-3px);
  border-color: #d2d8e6;
  box-shadow: 0 12px 26px rgba(23,32,51,.075);
}

#customerApp .metrics article strong,
#customerApp .customer-metrics article strong,
#customerApp .ud-cards strong {
  color: var(--yb-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#customerApp .panel,
#customerApp .vendor-section {
  padding: 20px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--yb-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(23,32,51,.04);
}

#customerApp .panel-head { border-bottom-color: #edf0f5; }
#customerApp .panel-head h3 { color: var(--yb-ink); }

#customerApp .quick-grid { gap: 12px; }
#customerApp .quick-card {
  --quick-accent: var(--yb-violet);
  position: relative;
  min-height: 104px;
  padding: 18px 48px 18px 20px;
  color: var(--yb-ink);
  background: linear-gradient(120deg, #fff, #faf9ff);
  border: 1px solid #e3e7ef;
  border-left: 4px solid var(--quick-accent);
  border-radius: 8px;
}
#customerApp .quick-card:nth-child(2) { --quick-accent: var(--yb-cyan); background: linear-gradient(120deg, #fff, #f5fbfb); }
#customerApp .quick-card:nth-child(3) { --quick-accent: var(--yb-green); background: linear-gradient(120deg, #fff, #f5fbf8); }
#customerApp .quick-card::after { content: "→"; position: absolute; right: 20px; top: 50%; color: var(--quick-accent); font-size: 22px; transform: translateY(-50%); transition: transform .18s ease; }
#customerApp .quick-card:hover { color: var(--yb-ink); border-color: #d5dbe8; box-shadow: 0 9px 20px rgba(23,32,51,.06); transform: translateY(-2px); }
#customerApp .quick-card:hover::after { transform: translate(4px,-50%); }

#customerApp .vendor-card,
#customerApp .ms-card,
#customerApp .channel-card,
#customerApp .customer-plan-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3e7ef !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(23,32,51,.035) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#customerApp .vendor-card::before,
#customerApp .ms-card::before,
#customerApp .customer-plan-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--yb-violet), var(--yb-cyan));
}

#customerApp .vendor-card:hover,
#customerApp .ms-card:hover,
#customerApp .channel-card:hover,
#customerApp .customer-plan-card:hover {
  transform: translateY(-3px);
  border-color: #ccd5e8 !important;
  box-shadow: 0 12px 28px rgba(23,32,51,.075) !important;
}

#customerApp .vendor-card img {
  width: 42px;
  height: 42px;
  padding: 7px;
  object-fit: contain;
  background: linear-gradient(145deg, #f5f2ff, #edf8f7);
  border: 1px solid #e2e6ef;
  border-radius: 8px;
}

#customerApp .ms-hero {
  margin-bottom: 16px;
  padding: 38px 28px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.04) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.04) 38px 39px),
    linear-gradient(125deg, #17213d 0%, #303e83 52%, #157784 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  box-shadow: 0 15px 34px rgba(31,43,89,.14);
}

#customerApp .ms-hero-title {
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: 30px;
  letter-spacing: 0;
}
#customerApp .ms-hero-eyebrow { color: #b9f1ec; letter-spacing: 0; }
#customerApp .ms-hero-sub { color: rgba(255,255,255,.72); }
#customerApp .ms-hero-stat { min-width: 82px; padding: 9px 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 7px; }
#customerApp .ms-hero-stat small { color: rgba(255,255,255,.65); }
#customerApp .ms-desc-full { border-radius: 8px; }

#customerApp #c-agents > .ms-hero {
  margin-bottom: 16px !important;
  padding: 38px 28px !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.04) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.04) 38px 39px),
    linear-gradient(125deg, #17213d 0%, #3f347f 52%, #176f79 100%) !important;
  border-radius: 8px !important;
}
#customerApp #c-agents > .ms-hero > p:first-child { color: #b9f1ec !important; letter-spacing: 0 !important; }
#customerApp #c-agents > .ms-hero h2 { color: #fff !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-size: 30px !important; letter-spacing: 0 !important; }
#customerApp #c-agents > .ms-hero h2 + p { color: rgba(255,255,255,.72) !important; }

#customerApp .chat-panel {
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #dfe4ee;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(23,32,51,.075);
}

/* The chat workspace is a full-bleed view: keep the page heading, remove the
   surrounding card and consume the remaining viewport without outer gutters. */
#customerApp.customer-chat-active {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
#customerApp.customer-chat-active .portal-main {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* 标题栏保持和其他界面一致(不压缩),仅去掉下方 margin 让对话区贴紧 */
#customerApp.customer-chat-active .portal-main:has(#c-chat:not(.hidden)) { padding-top: 0; }
#customerApp.customer-chat-active .portal-main:has(#c-chat:not(.hidden)) .portal-topbar,
#customerApp.customer-chat-active .portal-topbar {
  flex-shrink: 0;
  margin-bottom: 0;
  padding-left: 24px;
  padding-right: 24px;
  border-bottom: 1px solid #dfe4ed;
}
#customerApp.nav-collapsed.customer-chat-active .portal-topbar { padding-left: 24px; }
#customerApp.customer-chat-active #c-chat.customer-view {
  max-width: none;
  margin: 0;
  animation: none;
  transform: none;
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 0;
}
#customerApp.customer-chat-active #c-chat .chat-panel {
  width: 100%;
  flex: 1;
  height: auto;
  min-height: 0;
  opacity: 1;
  transform: none;
  transition: none;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}
#customerApp.customer-chat-active #c-chat .chat-main,
#customerApp.customer-chat-active #c-chat .chat-shell {
  min-height: 0;
  overflow: hidden;
}
#customerApp.customer-chat-active #c-chat .chat-topbar { flex-shrink: 0; }
#customerApp.customer-chat-active #c-chat .chat-shell { padding: 0; }
#customerApp.customer-chat-active #c-chat .chat-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#customerApp.customer-chat-active #c-chat .chat-composer-dock {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 16px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), #fff 28%);
  border-top: 1px solid #e4e8f1;
  box-shadow: 0 -10px 28px rgba(23,32,51,.055);
}
#customerApp.customer-chat-active #c-chat .chat-task-strip,
#customerApp.customer-chat-active #c-chat .chat-input {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
#customerApp.customer-chat-active #c-chat .attachment-preview {
  max-height: 132px;
  overflow-y: auto;
}

#customerApp .chat-sidebar {
  background:
    linear-gradient(180deg, rgba(98,57,232,.035), rgba(21,151,168,.035)),
    #f8f9fc;
  border-right-color: #e2e6ef;
}

#customerApp .conv-new {
  width: calc(100% - 16px);
  margin: 14px 8px 10px;
  color: #4430a4;
  background: #fff;
  border: 1px solid #d7d0f5;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(63,42,137,.05);
}
#customerApp .conv-new:hover { color: #fff; background: var(--yb-violet); border-color: var(--yb-violet); }
#customerApp .conv-item { border-radius: 7px; }
#customerApp .conv-item:hover { background: #fff; }
#customerApp .conv-item.active { color: #38228f; background: #eeeafd; }
#customerApp .chat-topbar { background: rgba(255,255,255,.92); border-bottom-color: #e6e9f0; }

#customerApp .chat-box {
  position: relative;
  margin: 0;
  padding: 24px 28px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(56,73,115,.025) 31px 32px),
    linear-gradient(135deg, rgba(98,57,232,.025), transparent 42%),
    #fbfcfe;
}

#customerApp .chat-welcome {
  width: min(700px, 100%);
  min-height: 100%;
  margin: auto;
  padding: 48px 20px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

#customerApp .chat-welcome-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(145deg, #eee9ff, #e5f6f4);
  border: 1px solid #dddff0;
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(63,42,137,.1);
}
#customerApp .chat-welcome-mark img { width: 36px; height: 36px; }
#customerApp .chat-welcome h3 { margin: 0; color: var(--yb-ink); font-size: 24px; letter-spacing: 0; }
#customerApp .chat-welcome p { margin: 8px 0 22px; color: var(--yb-muted); }
#customerApp .chat-welcome-prompt-grid { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
#customerApp .chat-welcome-prompt {
  min-height: 56px;
  padding: 12px 14px;
  color: #40506a;
  text-align: left;
  background: rgba(255,255,255,.92);
  border: 1px solid #dfe4ee;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(23,32,51,.035);
}
#customerApp .chat-welcome-prompt:hover { color: #38228f; background: #f7f5ff; border-color: #cfc5f6; transform: translateY(-2px); }

#customerApp .chat-input {
  margin: 0 18px 18px;
  padding: 8px;
  background: #fff;
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  box-shadow: 0 9px 24px rgba(23,32,51,.08);
}
#customerApp .chat-input:focus-within { border-color: #8f7bea; box-shadow: 0 0 0 3px rgba(98,57,232,.09), 0 10px 26px rgba(23,32,51,.08); }
#customerApp .chat-input .attachment-button,
#customerApp .chat-input .chat-model-btn { border-radius: 7px; }
#customerApp .chat-input .chat-send { color: #fff; background: linear-gradient(135deg, var(--yb-violet), var(--yb-blue)); border-radius: 7px; box-shadow: none; }

/* 智能体右侧 Canvas 侧边栏 — 品牌风格 */
#customerApp .agent-preview-panel { background: #fff; border-left-color: #e2e6ef; box-shadow: -6px 0 18px rgba(23,32,51,.04); }
#customerApp .agent-preview-head { background: #fafbfc; border-bottom-color: #edf0f4; }
#customerApp .agent-preview-tab.active { color: #6239e8; border-bottom-color: #6239e8; }
#customerApp .agent-preview-icon-btn:hover { background: rgba(98,57,232,.08); color: #6239e8; }
#customerApp .agent-preview-code-run-btn { background: #6239e8; color: #fff; }
#customerApp .agent-preview-code-run-btn:hover { background: #7c4ff5; opacity: 1; }
#customerApp .msg-preview-btn { border-color: #d9deea; color: #6239e8; }
#customerApp .msg-preview-btn:hover { background: rgba(98,57,232,.06); border-color: #8f7bea; }
#customerApp .msg-artifact-btn { color: #4e2dcc; background: #f7f5ff; border-color: #d9d3f5; }
#customerApp .msg-artifact-btn:hover { background: #eeeaff; border-color: #aa99ed; }

#customerApp .yb-tabs { padding: 4px; background: #eceff5; border: 1px solid #e0e4ed; border-radius: 8px; }
#customerApp .yb-tab { border-radius: 6px; }
#customerApp .yb-tab.active { color: #38228f; box-shadow: 0 2px 7px rgba(23,32,51,.08); }

#customerApp .subscription-card,
#customerApp .redeem-form,
#customerApp .key-create {
  background: linear-gradient(120deg, #fff, #faf9ff);
  border-color: #e1e5ee;
  border-radius: 8px;
}

#customerApp .customer-plan-card {
  min-height: 220px;
  padding: 22px;
  align-content: start;
}
#customerApp .customer-plan-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--yb-cyan), var(--yb-green)); }
#customerApp .customer-plan-card:nth-child(3n+3)::before { background: linear-gradient(90deg, var(--yb-blue), var(--yb-coral)); }
#customerApp .customer-plan-card strong { color: var(--yb-ink); }
#customerApp .customer-plan-card button { margin-top: auto; background: #f1effb; color: #4430a4; border: 1px solid #dcd5f5; box-shadow: none; }
#customerApp .customer-plan-card button:hover { color: #fff; background: var(--yb-violet); border-color: var(--yb-violet); }

/* Recharge plans: subscription-style information hierarchy with balance checkout. */
#customerApp .customer-plan-panel {
  overflow: hidden;
  background-color: #fbfcff;
  background-image:
    linear-gradient(rgba(83, 112, 184, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 112, 184, .045) 1px, transparent 1px);
  background-size: 54px 54px;
}
#customerApp #cPlanCards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 22px;
}
#customerApp .customer-plan-card {
  min-height: 590px;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fff 76%, #fafbfe 100%);
  border: 1px solid #dfe3ea !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(31, 42, 68, .055) !important;
}
#customerApp .customer-plan-card::before {
  height: 4px;
  background: #e65b57;
}
#customerApp .customer-plan-card[data-plan-tier="lite"]::before { background: #5672eb; }
#customerApp .customer-plan-card[data-plan-tier="pro"]::before { background: #2f9b88; }
#customerApp .customer-plan-card[data-plan-tier="max"]::before { background: #7250d8; }
#customerApp .customer-plan-card:hover {
  transform: translateY(-4px);
  border-color: #cfd5e1 !important;
  box-shadow: 0 18px 38px rgba(31, 42, 68, .1) !important;
}
#customerApp .plan-promo-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 116px;
  padding: 10px 18px;
  color: #fff;
  background: #e65b57;
  border-radius: 0 17px 0 18px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
#customerApp .customer-plan-card[data-plan-tier="pro"] .plan-promo-badge { background: #3c9b87; }
#customerApp .customer-plan-card[data-plan-tier="lite"] .plan-promo-badge { background: #5672eb; }
#customerApp .customer-plan-card[data-plan-tier="max"] .plan-promo-badge { background: #7250d8; }
#customerApp .customer-plan-head {
  min-height: 118px;
  padding-right: 68px;
}
#customerApp .customer-plan-head h4 {
  margin: 14px 0 20px;
  color: #252a35;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.25;
}
#customerApp .customer-plan-head p {
  margin: 0;
  color: #686f7d;
  font-size: 14px;
  line-height: 1.65;
}
#customerApp .customer-plan-price {
  min-height: 106px;
  margin-top: 18px;
}
#customerApp .plan-original-price {
  display: block;
  margin-bottom: 6px;
  color: #b4b8c1;
  font-size: 15px;
  text-decoration: line-through;
}
#customerApp .plan-original-price.plan-price-caption {
  color: #8a909c;
  text-decoration: none;
}
#customerApp .plan-current-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #d95753;
  white-space: nowrap;
}
#customerApp .plan-current-price .plan-currency { font-size: 24px; }
#customerApp .plan-current-price > strong {
  color: #d95753;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}
#customerApp .plan-term {
  margin-right: 8px;
  color: #646a76;
  font-size: 16px;
}
#customerApp .plan-discount {
  padding: 3px 9px;
  color: #d95753;
  background: #fff6f5;
  border: 1px solid #f1aaa7;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}
#customerApp .plan-purchase-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  margin: 4px 0 20px;
  color: #78808f;
  font-size: 13px;
}
#customerApp .plan-purchase-note > span {
  width: 17px;
  height: 17px;
  display: inline-grid;
  flex: 0 0 17px;
  place-items: center;
  border: 1.5px solid #a4abb8;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}
#customerApp .customer-plan-card .buy-plan {
  width: 100%;
  min-height: 48px;
  margin: 0;
  color: #fff;
  background: #6040e7;
  border: 1px solid #6040e7;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#customerApp .customer-plan-card .buy-plan:hover:not(:disabled) {
  color: #fff;
  background: #4f31d4;
  border-color: #4f31d4;
  transform: translateY(-1px);
}
#customerApp .customer-plan-card .buy-plan:disabled {
  color: #a7a9ae;
  background: #ededee;
  border-color: #e1e1e3;
  cursor: not-allowed;
}
#customerApp .plan-agreement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  color: #8a909c;
  font-size: 12px;
  line-height: 1.55;
  cursor: pointer;
}
#customerApp .plan-agreement input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 1px 0 0;
  accent-color: #6040e7;
}
#customerApp .plan-agreement a {
  color: #6040e7;
  font-weight: 650;
  text-decoration: none;
  text-underline-offset: 3px;
}
#customerApp .plan-agreement a:hover { text-decoration: underline; }
#customerApp .plan-agreement a:focus-visible {
  outline: 2px solid rgba(96, 64, 231, .32);
  outline-offset: 2px;
  border-radius: 3px;
}
#customerApp .plan-feature-divider {
  height: 1px;
  margin: 22px 0 20px;
  background: repeating-linear-gradient(90deg, #e4e6eb 0 5px, transparent 5px 9px);
}
#customerApp .plan-feature-list {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  color: #353b47;
  font-size: 14px;
  line-height: 1.55;
  list-style: none;
}
#customerApp .plan-feature-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  column-gap: 10px;
}
#customerApp .plan-feature-list li > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #69717e;
  border: 1.5px solid #8c939e;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}
#customerApp .plan-feature-list li > p { margin: 0; }
#customerApp .plan-feature-list strong {
  color: #2d3340;
  font-size: inherit;
  font-weight: 700;
}
#customerApp .plan-quote-note {
  margin: 18px 0 0;
  padding: 12px 15px;
  color: #5e6280;
  background: rgba(98, 57, 232, .055);
  border: 1px solid rgba(98, 57, 232, .12);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.65;
}
#customerApp .enterprise-pricing {
  margin-top: 28px;
  padding: 24px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid #e0e4ed;
  border-radius: 12px;
}
#customerApp .enterprise-pricing-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
#customerApp .enterprise-pricing-head span {
  color: #6040e7;
  font-size: 12px;
  font-weight: 700;
}
#customerApp .enterprise-pricing-head h4 {
  margin: 4px 0 0;
  color: #252a35;
  font-size: 21px;
}
#customerApp .enterprise-pricing-head p {
  margin: 0;
  color: #7a8190;
  font-size: 12px;
}
#customerApp .enterprise-pricing table { min-width: 720px; }
#customerApp .enterprise-pricing .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
#customerApp .enterprise-pricing th,
#customerApp .enterprise-pricing td { padding: 13px 15px; text-align: right; }
#customerApp .enterprise-pricing th:first-child,
#customerApp .enterprise-pricing td:first-child { text-align: left; }
#customerApp .enterprise-pricing th { color: #5f6674; background: #f4f5f9; }
#customerApp .enterprise-pricing td { color: #303641; }
#customerApp .plan-unavailable { opacity: .72; }
#customerApp .plan-unavailable:hover { transform: none; box-shadow: 0 8px 24px rgba(31, 42, 68, .055) !important; }
@media (max-width: 1240px) {
  #customerApp #cPlanCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  #customerApp .customer-plan-card { min-height: 0; }
}
@media (max-width: 640px) {
  #customerApp .customer-plan-panel { width: 100%; max-width: 100%; min-width: 0; padding: 16px; }
  #customerApp .customer-plan-panel > .panel-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  #customerApp #cPlanCards { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  #customerApp .customer-plan-card { min-width: 0; padding: 28px 22px 24px; border-radius: 14px !important; }
  #customerApp .plan-promo-badge { min-width: 102px; padding: 8px 13px; border-radius: 0 13px 0 14px; }
  #customerApp .customer-plan-head { min-height: 105px; padding-right: 56px; }
  #customerApp .customer-plan-head h4 { margin-top: 10px; font-size: 24px; }
  #customerApp .plan-current-price > strong { font-size: 42px; }
  #customerApp .plan-current-price { flex-wrap: wrap; }
  #customerApp .plan-term { font-size: 14px; }
  #customerApp .plan-agreement span { overflow-wrap: anywhere; }
  #customerApp .enterprise-pricing { width: 100%; max-width: 100%; min-width: 0; margin-top: 20px; padding: 17px; }
  #customerApp .enterprise-pricing-head { align-items: start; flex-direction: column; gap: 6px; }
}

#customerApp .customer-nav:focus-visible,
#customerApp button:focus-visible,
#customerApp input:focus-visible,
#customerApp textarea:focus-visible,
#customerApp select:focus-visible {
  outline: 2px solid rgba(98,57,232,.5);
  outline-offset: 1px;
}

#customerApp .ms-id {
  font-size: 14px;
  word-break: normal;
  overflow-wrap: anywhere;
}

#customerApp #profileBaseUrl {
  font-size: 14px;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: anywhere;
}

#customerApp .chat-input textarea {
  overflow-y: hidden;
  resize: none;
}

#authOverlay.modal-overlay { background: rgba(18,25,45,.62); backdrop-filter: blur(8px); }
#authOverlay .auth-modal {
  position: relative;
  padding: 34px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(63,73,108,.025) 34px 35px),
    #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 12px;
  box-shadow: 0 28px 72px rgba(11,18,38,.28);
}
#authOverlay .auth-modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--yb-violet, #6239e8), var(--yb-blue, #3f6ff3), var(--yb-cyan, #1597a8)); }
#authOverlay .auth-modal > * { position: relative; z-index: 1; }
#authOverlay .login-copy h1 { color: #172033; letter-spacing: 0; }
#authOverlay .login-copy .eyebrow { color: #6239e8; }
#authOverlay input { min-height: 44px; background: #fbfcfe; border-color: #d9deea; border-radius: 7px; }
#authOverlay input:focus { border-color: #8f7bea; box-shadow: 0 0 0 3px rgba(98,57,232,.09); }
#authOverlay button[type="submit"] { min-height: 44px; background: linear-gradient(135deg, #6239e8, #3f6ff3); border-radius: 7px; box-shadow: 0 10px 22px rgba(71,57,183,.18); }

@media (max-width: 920px) {
  #customerApp > .topnav[data-topnav="customer"] { box-shadow: 0 8px 22px rgba(23,32,51,.05); }
  #customerApp > .topnav[data-topnav="customer"] .customer-nav:hover { transform: none; }
  #customerApp .portal-main { padding: 0 18px 30px; }
  #customerApp .marketing-hero, #customerApp .marketing-hero-fx { padding: 30px 24px; }
  #customerApp .chat-welcome-prompt-grid { grid-template-columns: 1fr; width: min(420px,100%); }
}

@media (max-width: 640px) {
  #customerApp .portal-main { padding: 0 12px 24px; }
  #customerApp .portal-topbar { min-height: 84px; padding: 18px 0 14px; }
  #customerApp .portal-topbar h2 { font-size: 22px; }
  #customerApp .marketing-hero, #customerApp .marketing-hero-fx { min-height: 260px; padding: 26px 20px; }
  #customerApp .marketing-hero-fx .hero-title, #customerApp .ms-hero-title, #customerApp #c-agents > .ms-hero h2 { font-size: 26px !important; }
  #customerApp .ms-hero-stats { gap: 8px; }
  #customerApp .ms-hero-stat { min-width: 0; padding: 8px; }
  #customerApp .panel, #customerApp .vendor-section { padding: 15px; }
  #customerApp .chat-panel { min-height: calc(100vh - 150px); }
  #customerApp .chat-box { padding: 18px 14px; }
  #customerApp .chat-welcome { padding: 30px 4px; }
  #customerApp .chat-welcome h3 { font-size: 21px; }
  #customerApp .chat-task-strip { margin: 0 10px 8px; }
  #customerApp .chat-input { margin: 0 10px 10px; }
  #authOverlay .auth-modal { padding: 30px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  #customerApp .customer-nav,
  #customerApp .quick-card,
  #customerApp .vendor-card,
  #customerApp .ms-card,
  #customerApp .chat-welcome-prompt,
  #customerApp .marketing-hero-fx .vendors-track { transition: none; animation: none; }
}

/* Mobile chat viewport correction: this file loads after styles.css, so this
   final rule keeps the composer above Safari's bottom controls and app nav. */
@media (max-width: 768px) {
  :root {
    --mobile-topbar-h: 50px;
    --mobile-bottom-nav-h: 56px;
  }

  #customerApp > .topnav[data-topnav="customer"] {
    height: var(--mobile-topbar-h);
    padding: 0 10px;
  }

  #customerApp > .topnav[data-topnav="customer"] .topnav-brand {
    padding-left: 0;
  }

  #customerApp > .topnav[data-topnav="customer"] .topnav-brand img {
    width: 28px;
    height: 28px;
  }

  #customerApp > .topnav[data-topnav="customer"] .mobile-view-label {
    max-width: 42vw;
    font-size: 12px;
  }

  #customerApp.customer-chat-active .portal-main {
    box-sizing: border-box;
    height: calc(100vh - var(--mobile-topbar-h));
    height: calc(100svh - var(--mobile-topbar-h));
    height: calc(100dvh - var(--mobile-topbar-h));
    min-height: 0;
    padding: 0 0 calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  #customerApp.customer-chat-active #c-chat.customer-view,
  #customerApp.customer-chat-active #c-chat .chat-panel,
  #customerApp.customer-chat-active #c-chat .chat-main,
  #customerApp.customer-chat-active #c-chat .chat-shell {
    height: 100%;
    min-height: 0;
  }

  #customerApp.customer-chat-active #c-chat .chat-panel {
    min-height: 0;
  }

  #customerApp.customer-chat-active #c-chat .chat-box {
    flex: 1 1 0;
    min-height: 0;
    padding: 10px 8px 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #customerApp.customer-chat-active #c-chat .chat-composer-dock {
    flex: 0 0 auto;
    padding: 5px 7px 7px;
    border-top-color: #edf0f5;
    box-shadow: 0 -5px 16px rgba(23,32,51,.035);
  }

  #customerApp #c-chat .chat-topbar {
    min-height: 48px;
    padding: 5px 8px;
    gap: 6px;
  }

  #customerApp #c-chat .mobile-conversation-btn {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 9px;
  }

  #customerApp #c-chat .chat-vendor-btn {
    min-height: 36px;
    max-width: 150px;
    padding: 4px 8px;
    border-radius: 9px;
  }

  #customerApp #c-chat .chat-vendor-icon {
    width: 26px;
    height: 26px;
  }

  #customerApp #c-chat .chat-vendor-label small,
  #customerApp #c-chat .chat-capability-bar {
    display: none;
  }

  #customerApp #c-chat .chat-vendor-label strong {
    max-width: 88px;
    font-size: 14px;
  }

  #customerApp #c-chat .agent-banner {
    min-height: 40px;
    margin: 0 4px 4px;
    padding: 5px 7px;
    gap: 5px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
  }

  #customerApp #c-chat .agent-banner-avatar {
    flex: 0 0 auto;
    font-size: 17px;
  }

  #customerApp #c-chat .agent-banner strong {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #customerApp #c-chat .agent-banner-description {
    display: none;
  }

  #customerApp #c-chat .agent-tools-badge {
    flex: 0 0 auto;
    padding: 1px 6px;
    font-size: 10px;
  }

  #customerApp #c-chat .agent-exit-btn {
    min-width: 38px;
    min-height: 28px;
    margin-left: auto;
    padding: 2px 7px;
    font-size: 0;
  }

  #customerApp #c-chat .agent-exit-btn::after {
    content: "退出";
    font-size: 10px;
  }

  #customerApp #c-chat .msg {
    max-width: 94%;
    gap: 6px;
  }

  #customerApp #c-chat .msg .avatar {
    width: 26px;
    height: 26px;
  }

  #customerApp #c-chat .msg .bubble {
    padding: 5px 6px;
    font-size: 14px;
    line-height: 1.6;
  }

  #customerApp #c-chat .msg.assistant .bubble {
    padding: 9px 11px;
    background: #fff;
    border: 1px solid #e5e9f1;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(23,32,51,.06);
  }

  #customerApp #c-chat .msg .bubble small {
    margin-bottom: 1px;
    font-size: 11px;
  }

  #customerApp #c-chat .msg-reading-btn,
  #customerApp #c-chat .msg-artifact-btn[data-artifact-type="docx"],
  #customerApp #c-chat .chat-task-result-badge {
    display: none !important;
  }

  #customerApp #c-chat .chat-task-strip {
    display: none;
  }

  #customerApp #c-chat .chat-panel .chat-input {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 5px;
    min-height: 0;
    padding: 5px;
    border-width: 1px;
    border-radius: 13px;
    box-shadow: 0 5px 16px rgba(58,48,145,.08);
  }

  #customerApp #c-chat .chat-input textarea {
    min-height: 38px;
    max-height: 88px;
    padding: 7px 6px;
  }

  #customerApp #c-chat .chat-input .attachment-button,
  #customerApp #c-chat .chat-input .chat-send,
  #customerApp #c-chat .chat-input .chat-send:not(.paused):not(.loading) {
    width: 40px;
    min-width: 40px;
    height: 38px;
  }

  #customerApp #c-chat .chat-input .chat-model-btn {
    height: 38px;
    border-radius: 9px;
  }

  #customerApp .mobile-bottom-nav {
    min-height: calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom));
    padding-top: 3px;
  }

  #customerApp .mobile-bottom-nav-btn {
    min-height: 46px;
    gap: 1px;
    border-radius: 10px;
  }

  #customerApp .mobile-bottom-nav-btn span {
    font-size: 18px;
  }

  #customerApp .mobile-bottom-nav-btn small {
    font-size: 10px;
  }
}