/* ==========================================================================
   CSS Custom Properties (CITIC Elite Red Design Tokens)
   ========================================================================== */
:root {
  /* Colors - Primary / CITIC Brand Red */
  --c-primary: #C8102E;
  --c-primary-hover: #A80D26;
  --c-primary-active: #8C0B20;
  --c-primary-light: #FEF2F2;
  --c-primary-border: #FECDD3;
  --c-primary-glow: rgba(200, 16, 46, 0.16);
  --c-accent: #C8102E;
  --c-accent-hover: #A80D26;
  
  /* Colors - UI Backgrounds */
  --c-bg-body: #F4F6F9;
  --c-bg-surface: #FFFFFF;
  --c-bg-surface-hover: #F8FAFC;
  
  /* Colors - Sidebar (Obsidian Executive Navy Charcoal) */
  --c-navy-900: #0B0F19;
  --c-navy-800: #111827;
  --c-navy-700: #1E293B;
  --c-sidebar-bg: #0F172A;
  --c-sidebar-hover: #1E293B;
  --c-sidebar-active: #C8102E;
  --c-sidebar-text: #94A3B8;
  --c-sidebar-text-active: #FFFFFF;
  
  /* Colors - Text (Harmonious High Legibility Slate) */
  --c-text-primary: #0F172A;
  --c-text-secondary: #334155;
  --c-text-tertiary: #64748B;
  --c-text-inverse: #FFFFFF;
  
  /* Colors - Status/Semantic */
  --c-success: #059669;
  --c-success-light: #ECFDF5;
  --c-success-text: #065F46;
  --c-warning: #D97706;
  --c-warning-light: #FFFBEB;
  --c-warning-text: #92400E;
  --c-danger: #DC2626;
  --c-danger-hover: #B91C1C;
  --c-danger-light: #FEF2F2;
  --c-danger-text: #991B1B;
  --c-info: #0284C7;
  
  /* Typography - Unified Standard Font Stack */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.85rem;     /* 13.6px */
  --text-base: 0.95rem;   /* 15.2px */
  --text-lg: 1.1rem;      /* 17.6px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.45rem;    /* 23.2px */
  
  --line-height-tight: 1.3;
  --line-height-normal: 1.6;
  --line-height-loose: 1.75;
  
  /* Spacing */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  
  /* Layout */
  --sidebar-width: 250px;
  --header-height: 54px;
  --bottom-nav-height: 56px;
  --content-max-width: 1260px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  
  /* Borders */
  --c-border: #E2E8F0;
  --c-border-light: #F1F5F9;
  --c-border-dark: #CBD5E1;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 30px -6px rgba(15, 23, 42, 0.1), 0 8px 12px -4px rgba(15, 23, 42, 0.05);
  
  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: var(--line-height-normal);
  color: var(--c-text-primary);
  background-color: var(--c-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--c-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--c-primary-hover);
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
}

button {
  cursor: pointer;
  user-select: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.font-mono {
  font-family: 'Consolas', 'Menlo', 'Monaco', monospace !important;
}

/* ==========================================================================
   Custom Scrollbar - Ultra Lightweight & Non-Intrusive
   ========================================================================== */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.45);
}

/* ==========================================================================
   Layout Structure
   ========================================================================== */
.app-container {
  display: flex;
  min-height: 100vh;
  background-color: var(--c-bg-body);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  padding: 0.75rem 1.25rem 1.25rem 1.25rem;
  box-sizing: border-box;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, #0F172A 0%, #080D1A 100%);
  color: var(--c-sidebar-text);
  z-index: 40;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 35;
}

/* ==========================================================================
   Sidebar Components
   ========================================================================== */
.logo-img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50% !important;
  object-fit: contain !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.sidebar-brand {
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.22) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-logo-wrap {
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.brand-sub {
  font-size: 0.65rem;
  color: #94A3B8;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nav-group-label {
  font-size: 0.675rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  padding: 0.75rem 0.75rem 0.35rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  color: #94A3B8;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.nav-item svg {
  flex-shrink: 0;
  opacity: 0.8;
  transition: all var(--transition-fast);
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #F8FAFC;
}

.nav-item:hover svg {
  opacity: 1;
  color: #FDA4AF;
}

.nav-item.active {
  background: linear-gradient(90deg, #C8102E 0%, #9F1239 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.35);
}

.nav-item.active svg {
  opacity: 1;
  color: #FFFFFF;
}


/* Sidebar Producer & Subtle Compliance Disclaimer */
.sidebar-producer-line {
  font-size: 0.7rem;
  font-weight: 700;
  color: #CBD5E1;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

.sidebar-compliance-note {
  font-size: 0.625rem;
  line-height: 1.45;
  color: #64748B;
  opacity: 0.85;
  margin-top: 0.15rem;
  text-align: justify;
  letter-spacing: -0.01em;
}

.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}

.system-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94A3B8;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94A3B8;
}

.status-dot.online {
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.status-text {
  font-size: 0.75rem;
  color: #94A3B8;
}

/* ==========================================================================
   Mobile Header
   ========================================================================== */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: #FFFFFF;
  border-bottom: 1px solid var(--c-border);
  align-items: center;
  justify-content: space-between;
  padding: 0 0.85rem;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--c-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  position: relative;
  z-index: 1001;
  transition: background-color var(--transition-fast);
}

.sidebar-toggle:hover,
.sidebar-toggle:active {
  background: #F1F5F9;
  color: var(--c-primary);
}

.sidebar-toggle svg {
  pointer-events: none;
}

.mobile-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-brand-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.logo-text {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-text-primary);
  letter-spacing: 0.3px;
}

.mobile-sub-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--c-primary);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* ==========================================================================
   Pages Management
   ========================================================================== */
.page {
  display: none;
  width: 100%;
  animation: fadeIn 0.2s ease-out;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Buttons & UI Actions (Refined Harmonious Visual Weight)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(135deg, #D31118 0%, #BA0C12 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(186, 12, 18, 0.25);
  border: 1px solid rgba(186, 12, 18, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #BA0C12 0%, #980A20 100%);
  box-shadow: 0 4px 10px rgba(186, 12, 18, 0.35);
  transform: translateY(-1px);
}

/* Soft, Low-Distraction Secondary & Ghost Button */
.btn-ghost {
  background: #FFFFFF;
  color: #475569;
  font-weight: 600;
  border: 1px solid #CBD5E1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-ghost:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Subtle, Muted Danger Button */
.btn-danger {
  background: #FFFFFF;
  color: #DC2626;
  border: 1px solid #FECDD3;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-danger:hover {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #F87171;
}

.btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-primary);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-text:hover {
  background: var(--c-primary-light);
}

/* Refined Subtle Icon Button - Light, Elegant & Soft */
.btn-icon-subtle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  transition: all var(--transition-fast);
}

.btn-icon-subtle:hover {
  background: #FEF2F2;
  color: #C8102E;
  border-color: #FECDD3;
  box-shadow: 0 1px 3px rgba(200, 16, 46, 0.1);
}

/* ==========================================================================
   Forms, Selects & Inputs
   ========================================================================== */
.form-input {
  width: 100%;
  padding: 0.5rem 0.8rem;
  font-size: var(--text-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--c-text-primary);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}

.filter-select {
  padding: 0.4rem 1.8rem 0.4rem 0.75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: #334155;
  font-size: var(--text-sm);
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.1em;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}

.filter-select.mini {
  height: 32px;
  font-size: var(--text-xs);
  padding: 0.3rem 1.7rem 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box svg {
  position: absolute;
  left: 0.75rem;
  color: var(--c-text-tertiary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 0.45rem 0.85rem 0.45rem 2.2rem;
  font-size: var(--text-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--c-text-primary);
  transition: all var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}

.search-box.mini {
  width: 200px;
  flex: none;
}

.search-box.mini .search-input {
  height: 32px;
  font-size: var(--text-xs);
  padding: 0.3rem 0.65rem 0.3rem 1.8rem;
  border-radius: var(--radius-sm);
}

.search-box.mini svg {
  left: 0.6rem;
  width: 13px;
  height: 13px;
}

/* ==========================================================================
   PAGE 1: SPOTLIGHT HEADER, SEARCH & CHIPS
   ========================================================================== */
.spotlight-header-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.spotlight-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.spotlight-search-box {
  position: relative;
  flex: 1;
  min-width: 280px;
}

.spotlight-search-box .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748B;
  pointer-events: none;
}

.spotlight-search-box .btn-search-clear {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E2E8F0;
  border: none;
  cursor: pointer;
  color: #64748B;
  padding: 0;
  transition: all 0.2s ease;
  z-index: 2;
}

.spotlight-search-box .btn-search-clear:hover {
  background: #CBD5E1;
  color: #0F172A;
}

.spotlight-input {
  width: 100%;
  padding: 0.7rem 2.4rem 0.7rem 2.6rem;
  font-size: 0.9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #F8FAFC;
  color: var(--c-text-primary);
  outline: none;
  transition: all var(--transition-fast);
}

.spotlight-input:focus {
  background: #FFFFFF;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}

/* ==========================================================================
   FUZZY SEARCH SUGGESTIONS DROPDOWN
   ========================================================================== */
.search-suggest-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 360px;
  overflow-y: auto;
  display: none;
}

.search-suggest-dropdown.active {
  display: block;
}

.suggest-section-title {
  padding: 0.45rem 0.85rem;
  font-size: 0.725rem;
  font-weight: 700;
  color: #64748B;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid #F1F5F9;
  transition: all 0.15s ease;
}

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

.suggest-item:hover,
.suggest-item.selected {
  background: #FEF2F2;
}

.suggest-item-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.suggest-item-badge.local {
  background: #FEF2F2;
  color: #C8102E;
  border: 1px solid #FECDD3;
}

.suggest-item-badge.public {
  background: #F0F9FF;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}

.suggest-item-badge.public-stock {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FDE68A;
}

.suggest-item-badge.public-us {
  background: #F5F3FF;
  color: #7C3AED;
  border: 1px solid #DDD6FE;
}

.suggest-item-badge.public-hk {
  background: #ECFEFF;
  color: #0E7490;
  border: 1px solid #A5F3FC;
}

.suggest-item-code {
  font-family: 'Consolas', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: #0F172A;
}

.suggest-item-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggest-item-name mark {
  background: #FEF08A;
  color: #854D0E;
  padding: 0 1px;
  border-radius: 2px;
}

.suggest-item-type {
  font-size: 0.725rem;
  color: #64748B;
  white-space: nowrap;
}

.suggest-item-action-tag {
  font-size: 0.7rem;
  color: #059669;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.btn-suggest-add-watchlist {
  margin-left: 0.4rem;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 12px;
  background: #FFF1F2;
  color: #C8102E;
  border: 1px solid #FECDD3;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.btn-suggest-add-watchlist:hover {
  background: #C8102E;
  color: #FFFFFF;
  border-color: #C8102E;
  transform: translateY(-1px);
}

.suggest-loading,
.suggest-empty {
  padding: 1rem;
  text-align: center;
  color: #64748B;
  font-size: 0.85rem;
}

.spotlight-actions-mobile-row {
  display: flex;
  gap: 0.5rem;
}

.quick-product-chips {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--c-border-light);
}

.quick-chips-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}

.risk-filters-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.risk-filter-label {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 600;
  margin-right: 2px;
}

.chips-expand-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 0.725rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chips-expand-toggle-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #94A3B8;
}

.quick-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
  transition: all 0.25s ease-out;
}

.quick-chips-wrapper.collapsed {
  max-height: 58px;
  overflow: hidden;
}

.quick-chips-wrapper.expanded {
  max-height: 1200px;
  overflow: visible;
}

.product-quick-chip {
  background: #F1F5F9;
  border: 1px solid var(--c-border);
  color: #334155;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.product-quick-chip:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.product-quick-chip.active {
  background: var(--c-primary);
  color: #FFFFFF;
  border-color: var(--c-primary);
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.25);
}

/* ==========================================================================
   VIEW MODE SWITCHER (产品看板 vs 产品对比)
   ========================================================================== */
.product-mode-tabs-bar {
  display: inline-flex;
  background: #E2E8F0;
  border: 1px solid #CBD5E1;
  padding: 3px;
  border-radius: var(--radius-md);
  gap: 3px;
  margin-bottom: 0.55rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.product-mode-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 20px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.product-mode-tab-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.product-mode-tab-btn.active {
  background: linear-gradient(135deg, #C8102E 0%, #991B1B 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.35);
}

/* ==========================================================================
   SINGLE PRODUCT SPOTLIGHT DASHBOARD (HIGH CONTRAST HERO & KPIS)
   ========================================================================== */
.chart-view-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Product Hero Card - High Contrast CITIC Styling */
.chart-product-hero {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  box-shadow: var(--shadow-sm);
}

.hero-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.hero-product-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}

.hero-badges-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.hero-badge-category {
  background: #F0F9FF;
  color: #0369A1;
  border: 1px solid #BAE6FD;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.hero-badge-code {
  background: #F1F5F9;
  color: #0F172A;
  border: 1px solid #CBD5E1;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: 'Consolas', monospace;
}

.hero-badge-nav {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.hero-actions-group {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.hero-desc-wrapper {
  margin-top: 0.35rem;
}

.hero-desc-text {
  font-size: 0.785rem;
  color: #334155;
  line-height: 1.45;
}

.hero-tags-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--c-border-light);
}

.hero-tag-pill {
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #E2E8F0;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: var(--radius-full);
}

/* 6 KPI Metrics Grid */
.kpi-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
}

.kpi-metric-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 58px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  overflow: hidden;
}

.kpi-metric-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: #CBD5E1;
}

.kpi-label {
  font-size: 0.685rem;
  color: var(--c-text-tertiary);
  font-weight: 600;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.05rem;
  line-height: 1.2;
  font-feature-settings: "tnum";
  word-break: break-word;
}

.kpi-value.compact-bm {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value.positive {
  color: var(--c-primary);
}

.kpi-value.steady {
  color: var(--c-success);
}

.kpi-sub {
  font-size: 0.625rem;
  color: var(--c-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chart Main & Bottom Grids */
.charts-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.55rem;
}

.charts-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.chart-panel-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.chart-trend-panel,
.chart-radar-panel,
.chart-donut-panel,
.chart-strategy-panel {
  display: flex;
  flex-direction: column;
}

.chart-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chart-panel-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
}

.data-source-pill {
  font-size: 0.685rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
}

.data-source-pill.real {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.chart-timeframe-selector {
  display: inline-flex;
  background: #F1F5F9;
  padding: 2px;
  border-radius: var(--radius-sm);
  gap: 2px;
}

.timeframe-btn {
  padding: 3px 8px;
  font-size: 0.725rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  color: #475569;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all var(--transition-fast);
}

.timeframe-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.timeframe-btn.active {
  background: #C8102E;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.35);
}

.chart-canvas-container {
  position: relative;
  width: 100%;
  min-height: 185px;
  height: 195px;
}

.chart-no-data-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.no-data-icon {
  margin-bottom: 0.75rem;
}

.no-data-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.35rem;
}

.no-data-desc {
  font-size: 0.825rem;
  color: #475569;
  max-width: 480px;
  margin-bottom: 1rem;
}

.no-data-tip-box {
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: #334155;
  text-align: left;
  max-width: 520px;
}

.chart-legend-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--c-border-light);
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.dot-primary { background: var(--c-primary); }
.legend-dot.dot-benchmark { background: #94A3B8; }

/* Donut Split Row Layout */
.donut-chart-split-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.donut-canvas-wrap {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  position: relative;
}

.donut-details-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.donut-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.785rem;
  color: #334155;
  font-weight: 500;
  background: #F8FAFC;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #E2E8F0;
}

.donut-label-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.donut-color-square {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.donut-pct-val {
  font-weight: 700;
  color: #0F172A;
  font-family: 'Consolas', monospace;
}

/* Strategy & Core Pitch Box */
.strategy-content-box {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.strategy-points-container {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.strategy-point-box {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem;
}

.strategy-point-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #475569;
  color: #FFFFFF;
  font-size: 0.675rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.strategy-point-text {
  font-size: 0.825rem;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

.strategy-client-suitability-box {
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem;
  margin-top: 0.25rem;
}

.suitability-label-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0369A1;
  margin-bottom: 2px;
}

.suitability-text {
  font-size: 0.775rem;
  color: #0C4A6E;
  line-height: 1.5;
  margin: 0;
}

.strategy-action-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

/* ==========================================================================
   HOLDINGS SECTION (TOP 10 INDUSTRIES & CARDIFIED STRIP STOCKS)
   ========================================================================== */
.product-holdings-section {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.holdings-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.raw-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.raw-source-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: #FEF2F2;
  color: var(--c-primary);
  border: 1px solid var(--c-primary-border);
}

.holdings-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.holdings-card {
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.holdings-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border);
}

.holdings-sub-badge {
  font-size: 0.7rem;
  font-weight: 500;
  color: #64748B;
}

.top-industries-list, .top-stocks-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.industry-item-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.industry-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 500;
  color: #334155;
}

.industry-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.industry-rank-num {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #E2E8F0;
  color: #475569;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.industry-rank-num.top-3 {
  background: #C8102E;
  color: #FFFFFF;
}

.industry-progress-track {
  height: 6px;
  background: #E2E8F0;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.industry-progress-fill {
  height: 100%;
  background: #94A3B8;
  border-radius: var(--radius-full);
}

.industry-progress-fill.primary {
  background: linear-gradient(90deg, #D31118, #E11D48);
}

/* Cardified Heavyweight Stocks Strip Cards */
.top-stock-strip-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.top-stock-strip-card:hover {
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.stock-strip-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.stock-rank-badge {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.675rem;
  font-weight: 700;
  color: #FFFFFF;
}

.stock-rank-badge.rank-1 { background: linear-gradient(135deg, #D97706, #B45309); }
.stock-rank-badge.rank-2 { background: linear-gradient(135deg, #C8102E, #991B1B); }
.stock-rank-badge.rank-3 { background: linear-gradient(135deg, #0284C7, #0369A1); }
.stock-rank-badge.rank-def { background: #64748B; }

.stock-strip-title-box {
  display: flex;
  flex-direction: column;
}

.stock-name-text {
  font-size: 0.825rem;
  font-weight: 700;
  color: #0F172A;
}

.stock-code-text {
  font-size: 0.7rem;
  color: #64748B;
  font-family: 'Consolas', monospace;
}

.stock-strip-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stock-industry-pill {
  font-size: 0.675rem;
  color: #475569;
  background: #F1F5F9;
  padding: 1px 6px;
  border-radius: 4px;
}

.stock-pct-val {
  font-size: 0.825rem;
  font-weight: 700;
  color: #C8102E;
  font-family: 'Consolas', monospace;
}

/* Raw Material Section & Chart Raw Panel */
.product-raw-section, .chart-raw-panel {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.chart-raw-panel {
  padding: 1.25rem;
  min-height: 240px;
}

.raw-section-header, .chart-raw-panel .chart-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.raw-actions {
  display: flex;
  gap: 0.5rem;
}

.raw-content-wrapper {
  transition: all 0.3s ease-out;
  overflow: hidden;
  flex: 1;
}

.raw-content-wrapper.collapsed {
  max-height: 185px;
  overflow: hidden;
}

.raw-content-wrapper.expanded {
  max-height: 1200px;
  overflow: visible;
}

.raw-text-styled-container {
  width: 100%;
}

/* ==========================================================================
   PRODUCT DOSSIER & FACTSHEET COMPONENT (EXECUTIVE GRADE UI)
   ========================================================================== */
.product-dossier-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.dossier-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  width: 100%;
}

.dossier-fact-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: all var(--transition-fast);
}

.dossier-fact-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dossier-fact-full {
  grid-column: span 2;
  background: #FFFBFB;
  border-color: #FECDD3;
}

.dossier-fact-label {
  font-size: 0.685rem;
  color: #64748B;
  font-weight: 600;
}

.dossier-fact-val-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.dossier-val-bold {
  font-size: 0.825rem;
  font-weight: 700;
  color: #0F172A;
}

.dossier-fact-val {
  font-size: 0.775rem;
  color: #334155;
  line-height: 1.4;
}

.dossier-code-pill {
  background: #F1F5F9;
  color: #0F172A;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #CBD5E1;
}

.dossier-badge-cat {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-full);
}

.dossier-badge-risk {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-full);
}

.dossier-badge-risk.risk-r1 { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.dossier-badge-risk.risk-r2 { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.dossier-badge-risk.risk-r3 { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.dossier-badge-risk.risk-r4 { background: #FFF1F2; color: #BE123C; border: 1px solid #FECDD3; }
.dossier-badge-risk.risk-r5 { background: #450A0A; color: #FECDD3; border: 1px solid #991B1B; }

.dossier-tags-section {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

.dossier-section-mini-label {
  font-size: 0.685rem;
  font-weight: 600;
  color: #64748B;
  flex-shrink: 0;
}

.dossier-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.dossier-tag-pill {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.dossier-highlights-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 3px solid #C8102E;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dossier-highlights-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dossier-highlights-badge {
  font-size: 0.725rem;
  font-weight: 700;
  color: #C8102E;
}

.dossier-highlights-content {
  font-size: 0.765rem;
  color: #334155;
  line-height: 1.5;
}

.dossier-raw-drawer {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  margin-top: 0.35rem;
}

.dossier-raw-header {
  margin-bottom: 0.25rem;
}

.dossier-raw-badge {
  font-size: 0.725rem;
  font-weight: 700;
  color: #0F172A;
}

.dossier-raw-body {
  font-size: 0.745rem;
  color: #475569;
  line-height: 1.55;
}

/* ==========================================================================
   PAGE 1: DUAL PRODUCT COMPARISON ARENA
   ========================================================================== */
.product-compare-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.compare-selector-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.compare-selector-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.25rem;
  align-items: center;
}

.compare-product-select-box {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
}

.prod-a-box { border-left: 4px solid var(--c-primary); }
.prod-b-box { border-left: 4px solid var(--c-info); }

.compare-box-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

.compare-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.compare-dot.dot-a { background: var(--c-primary); }
.compare-dot.dot-b { background: var(--c-info); }

.compare-input-wrap {
  width: 100%;
}

.compare-swap-btn {
  font-size: var(--text-xs);
}

.compare-header-actions {
  display: flex;
  gap: 0.5rem;
}

.compare-vs-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.compare-vs-badge {
  font-size: 0.785rem;
  font-weight: 700;
  color: #FFFFFF;
  background: #1E293B;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.compare-timeframe-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--c-border-light);
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Spread Hero Card */
.compare-spread-hero-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}

.compare-hero-prod {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.compare-hero-metric-val {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.compare-hero-metric-val.color-a { color: var(--c-primary); }
.compare-hero-metric-val.color-b { color: var(--c-info); }

.compare-hero-spread-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 1.25rem;
}

.compare-spread-label {
  font-size: 0.7rem;
  color: var(--c-text-tertiary);
  font-weight: 600;
}

.compare-spread-diff {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-primary);
  margin: 2px 0;
}

.compare-spread-winner {
  font-size: 0.725rem;
  color: var(--c-success);
  font-weight: 600;
}

.compare-chart-legend {
  display: flex;
  gap: 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.legend-item-a { color: var(--c-primary); display: flex; align-items: center; gap: 5px; }
.legend-item-b { color: var(--c-info); display: flex; align-items: center; gap: 5px; }

/* Diagnosis Content */
.compare-diagnosis-content {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.6;
}

.diag-summary-box {
  background: #F8FAFC;
  border-left: 3px solid var(--c-info);
  padding: 0.65rem 0.85rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.825rem;
}

.diag-advice-item {
  display: flex;
  gap: 6px;
}

.diag-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  height: fit-content;
  white-space: nowrap;
}
.diag-badge.badge-a { background: #FFE4E6; color: var(--c-primary); }
.diag-badge.badge-b { background: #E0F2FE; color: #0369A1; }

/* Comparison Table */
.compare-table-wrapper {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.825rem;
  text-align: left;
}

.compare-table th, .compare-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--c-border);
}

.compare-table thead th {
  background: #F8FAFC;
  color: #334155;
  font-weight: 600;
  font-size: 0.775rem;
}

.compare-table .col-dim {
  width: 22%;
  font-weight: 500;
  color: var(--c-text-tertiary);
}

.compare-table .col-a, .compare-table .col-b {
  width: 39%;
  font-weight: 500;
  color: var(--c-text-primary);
}

.compare-table .section-header-row td {
  background: var(--c-border-light);
  font-weight: 600;
  font-size: 0.775rem;
  color: var(--c-text-primary);
}

.compare-winner-cell {
  background: #FFF1F2;
  font-weight: 600;
}

.compare-winner-cell-b {
  background: #F0F9FF;
  font-weight: 600;
}

/* ==========================================================================
   PAGE 1: PRODUCT DIRECTORY ARCHIVE (WITH DETAILS EXPAND/COLLAPSE)
   ========================================================================== */
.product-directory-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
}

.directory-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.directory-title-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.directory-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text-primary);
}

.directory-count-badge {
  background: #F1F5F9;
  color: var(--c-text-secondary);
  font-size: 0.725rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid #E2E8F0;
}

.directory-filters-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.product-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all var(--transition-fast);
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #CBD5E1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.card-category {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #0284C7;
  background: #F0F9FF;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.card-expand-toggle-btn {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-primary);
  background: #FEF2F2;
  border: 1px solid #FECDD3;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.card-expand-toggle-btn:hover {
  background: var(--c-primary);
  color: #FFFFFF;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text-primary);
  line-height: 1.3;
}

.card-code {
  font-size: 0.75rem;
  color: #64748B;
  font-family: 'Consolas', monospace;
}

.card-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.775rem;
  font-weight: 500;
  color: #334155;
  background: #F8FAFC;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
}

.product-card-details-box {
  transition: all 0.25s ease;
  overflow: hidden;
}

.product-card-details-box.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.product-card-details-box.expanded {
  max-height: 300px;
  opacity: 1;
  padding: 0.65rem;
  margin-top: 0.5rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  background: #FFFFFF;
  border: 1px dashed var(--c-border-dark);
  border-radius: var(--radius-lg);
  color: var(--c-text-secondary);
}

.empty-state h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--c-text-primary);
}

.empty-state p {
  font-size: 0.85rem;
  color: var(--c-text-tertiary);
}

/* ==========================================================================
   PAGE 2: ADVISORY WORKBENCH (CARDIFIED 3-COLUMN WITH UNIFIED COLUMN SCROLL)
   ========================================================================== */
.advisory-flow-container {
  display: grid;
  grid-template-columns: 260px 330px minmax(380px, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  height: calc(100vh - 78px);
  min-height: 500px;
  width: 100%;
}

.advisory-col {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.85rem;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

.advisory-col-client,
.advisory-col-matches,
.advisory-col-output {
  min-width: 0;
}

.advisory-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.col-title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  min-width: max-content;
  white-space: nowrap;
}

.step-num-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D31118 0%, #BA0C12 100%);
  color: #FFFFFF;
  font-size: 0.725rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(200, 16, 46, 0.2);
  flex-shrink: 0;
}

.col-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-text-primary);
  margin: 0;
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1.25;
}

.col-subtitle {
  font-size: 0.7rem;
  color: var(--c-text-tertiary);
  font-weight: 400;
  white-space: nowrap;
  display: block;
  line-height: 1.2;
}

.col-header-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}

/* Unified Column Scrollable Body */
.advisory-col-scrollable-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}

.advisory-sub-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--c-text-secondary);
  margin: 0.45rem 0 0.2rem;
  flex-shrink: 0;
}

.sub-badge {
  background: #F1F5F9;
  color: #475569;
  font-size: 0.685rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid #E2E8F0;
}

/* --- Column 1: Client Card & KYC Profile --- */
.advisory-client-picker-bar {
  margin-bottom: 0.2rem;
  flex-shrink: 0;
}

.client-select {
  font-weight: 600;
  height: 34px;
  border-radius: 6px;
}

.advisory-client-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
}

.client-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.client-name-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.client-profile-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
}

.client-occupation-pill {
  font-size: 0.725rem;
  color: #334155;
  font-weight: 600;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.client-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
}

.client-meta-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.meta-label {
  font-size: 0.65rem;
  color: #64748B;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.meta-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0F172A;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.client-notes-card {
  background: #FFF8F8;
  border-left: 3px solid #C8102E;
  border-radius: 0 8px 8px 0;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid #FFE4E6;
  border-right: 1px solid #FFE4E6;
  border-bottom: 1px solid #FFE4E6;
}

.client-notes-header-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.675rem;
  font-weight: 700;
  color: #BE123C;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.client-notes-text {
  font-size: 0.775rem;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

.advisory-customer-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: none;
  overflow: visible;
}

.client-stack-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.client-stack-item:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.client-stack-item.active {
  border-left: 4px solid #C8102E;
  border-color: #C8102E;
  background: #FFF5F5;
}

.client-stack-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.client-item-name-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.client-stack-item-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
}

.client-stack-item-desc {
  font-size: 0.725rem;
  color: #64748B;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Column 2: Portfolio Plan & Recommended Match Cards (UNIFIED FLOW) --- */
.segmented-control {
  display: inline-flex;
  background: #F1F5F9;
  border: 1px solid var(--c-border);
  padding: 2px;
  border-radius: var(--radius-sm);
  gap: 2px;
}

.seg-btn {
  padding: 3px 9px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 3px;
  color: #475569;
  transition: all var(--transition-fast);
}

.seg-btn.active {
  background: #FFFFFF;
  color: var(--c-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.advisory-portfolio-plan-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.portfolio-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.portfolio-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.portfolio-plan-title {
  font-size: 0.925rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.portfolio-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}

.portfolio-metric-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 3.5px 8px;
  border-radius: 6px;
  font-size: 0.715rem;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.portfolio-metric-chip.return-chip {
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  color: #9F1239;
}

.portfolio-metric-chip.drawdown-chip {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}

.portfolio-metric-chip.sharpe-chip {
  background: #FAF5FF;
  border: 1px solid #E9D5FF;
  color: #6B21A8;
}

.portfolio-metric-chip.duration-chip {
  background: #FFFBEB;
  border: 1px solid #FEF3C7;
  color: #92400E;
}

.metric-chip-label {
  font-size: 0.675rem;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}

.metric-chip-val {
  font-weight: 800;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-Asset Dynamic Structure Bar */
.portfolio-structure-section {
  display: flex;
  flex-direction: column;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin: 0.45rem 0;
}

.structure-bar-container {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: #E2E8F0;
  margin: 3px 0 5px 0;
  gap: 2px;
}

.bar-seg {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.bar-seg.seg-def { background: #0284C7; }
.bar-seg.seg-core { background: #C8102E; }
.bar-seg.seg-sat { background: #8B5CF6; }

.structure-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.685rem;
  color: #64748B;
  flex-wrap: wrap;
  gap: 4px;
}

.structure-legend-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.structure-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.structure-dot.def { background: #0284C7; }
.structure-dot.core { background: #C8102E; }
.structure-dot.sat { background: #8B5CF6; }

/* Quant Expert Rule Inference Box */
.portfolio-quant-rules-container {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 3.5px solid #C8102E;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  margin: 0.5rem 0;
}

.quant-rules-header {
  font-size: 0.735rem;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0.35rem;
}

.quant-rule-item {
  font-size: 0.715rem;
  color: #334155;
  line-height: 1.45;
  margin-bottom: 0.25rem;
  padding-left: 0.75rem;
  position: relative;
}

.quant-rule-item:last-child {
  margin-bottom: 0;
}

.quant-rule-item::before {
  content: '•';
  position: absolute;
  left: 0;
  top: -1px;
  color: #C8102E;
  font-weight: bold;
  font-size: 0.9rem;
}

.portfolio-import-btn {
  font-size: 0.725rem;
  padding: 2px 8px;
  height: 24px;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.portfolio-import-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.portfolio-donut-section {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
}

.portfolio-donut-canvas-box {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}

.portfolio-donut-legend-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.portfolio-legend-title {
  font-size: 0.685rem;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.portfolio-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.725rem;
  color: #334155;
  padding: 1px 0;
  border-bottom: 1px dashed #E2E8F0;
  min-height: 18px;
}

.portfolio-legend-label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.portfolio-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.portfolio-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.725rem;
  color: #1E293B;
  font-weight: 600;
}

.portfolio-legend-num {
  font-weight: 800;
  color: #0F172A;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', monospace;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.portfolio-archetype-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #C8102E;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Cardified Sub-Asset Breakdown inside Portfolio Plan (FULL DISPLAY, NO INNER SCROLL) */
.portfolio-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: none;
  overflow: visible;
}

.portfolio-list-section-title {
  font-size: 0.725rem;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 0.2rem;
  letter-spacing: 0.2px;
}

.portfolio-asset-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: all 0.15s ease;
}

.portfolio-asset-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.portfolio-asset-card.active {
  background: #FFF8F8;
  border-color: #C8102E;
  box-shadow: 0 0 0 1px #C8102E, 0 2px 8px rgba(200, 16, 46, 0.1);
}

.asset-card-action-hint {
  display: flex;
  justify-content: flex-end;
  font-size: 0.685rem;
  font-weight: 600;
  color: #C8102E;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px dashed #F1F5F9;
}

.asset-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.asset-weight-pill {
  color: #FFFFFF;
  font-size: 0.725rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.asset-name-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.asset-name-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-code-text {
  font-size: 0.7rem;
  color: #64748B;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', monospace;
  flex-shrink: 0;
}

.asset-role-line {
  display: flex;
  align-items: center;
}

.asset-role-badge {
  font-size: 0.675rem;
  font-weight: 600;
  color: #0284C7;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  padding: 1px 6px;
  border-radius: 4px;
}

.asset-reason-text {
  font-size: 0.75rem;
  color: #334155;
  line-height: 1.45;
  margin: 0;
}

/* Cardified Recommendation Matches */
.advisory-matches-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: none;
  overflow: visible;
}

.rec-match-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.8rem 0.85rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rec-match-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-color: #CBD5E1;
}

.rec-match-card.active {
  border-left: 4px solid #C8102E;
  border-color: #C8102E;
  background: #FFFBFB;
  box-shadow: 0 0 0 1px #C8102E, 0 2px 8px rgba(200, 16, 46, 0.08);
}

.rec-card-header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rec-rank-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rec-rank-tag {
  font-size: 0.675rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  background: #64748B;
}

.rec-rank-tag.top-1 { background: linear-gradient(135deg, #D97706, #B45309); }
.rec-rank-tag.top-2 { background: linear-gradient(135deg, #C8102E, #991B1B); }
.rec-rank-tag.top-3 { background: linear-gradient(135deg, #0284C7, #0369A1); }

.match-role-badge {
  font-size: 0.675rem;
  font-weight: 600;
  color: #059669;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 1px 6px;
  border-radius: 4px;
}

.rec-score-pill {
  font-size: 0.725rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.rec-score-pill.high {
  background: #FEF2F2;
  color: #C8102E;
  border: 1px solid #FECDD3;
}

.rec-score-pill.medium {
  background: #F0FDF4;
  color: #059669;
  border: 1px solid #BBF7D0;
}

.rec-prod-title {
  font-size: 0.925rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
}

.rec-meta-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.rec-meta-chip {
  background: #F1F5F9;
  color: #334155;
  font-size: 0.725rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.rec-rationale-box {
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rec-rationale-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.75rem;
  color: #334155;
  line-height: 1.45;
}

.rationale-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C8102E;
  margin-top: 5px;
  flex-shrink: 0;
}

.rec-card-footer-action {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--c-border);
}

.rec-action-hint {
  font-size: 0.725rem;
  font-weight: 600;
  color: #C8102E;
}

/* --- Column 3: Copilot Script Generator & Compliance --- */
.advisory-script-toolbar {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.advisory-script-toolbar::-webkit-scrollbar {
  display: none;
}

.advisory-script-toolbar .filter-select {
  height: 28px;
  font-size: 0.75rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background-color: #FFFFFF;
  color: var(--c-text-primary);
  min-width: 118px;
  max-width: 140px;
  font-weight: 600;
  flex: 1 1 auto;
}

.advisory-script-toolbar .btn {
  height: 28px;
  font-size: 0.75rem;
  padding: 0 0.45rem;
  gap: 0.25rem;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.advisory-col-output .advisory-output-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  min-height: 0;
}

.live-compliance-card {
  background: #FEF2F2;
  border: 1px solid #FECDD3;
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  flex-shrink: 0;
}

.live-script-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.script-rendered-box {
  padding: 1.15rem 1.35rem;
  font-size: 0.85rem;
  line-height: 1.75;
  color: #0F172A;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.script-editable-content h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #F1F5F9;
  letter-spacing: -0.01em;
}

.script-editable-content h4 {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  margin: 1.1rem 0 0.45rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.script-editable-content blockquote {
  border-left: 3.5px solid #C8102E;
  background: #F8FAFC;
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 0.95rem;
  margin: 0.65rem 0;
  font-size: 0.825rem;
  line-height: 1.65;
  color: #1E293B;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.script-editable-content hr {
  border: none;
  border-top: 1px solid #E2E8F0;
  margin: 0.85rem 0;
}

.script-editable-content ul,
.script-editable-content ol {
  padding-left: 1.25rem;
  margin: 0.45rem 0;
}

.script-editable-content li {
  margin: 0.25rem 0;
  line-height: 1.65;
  color: #334155;
  font-size: 0.825rem;
}

.script-editable-content strong {
  color: #0F172A;
  font-weight: 700;
}

.empty-hint-card {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: #F8FAFC;
  border: 1px dashed var(--c-border-dark);
  border-radius: var(--radius-lg);
  font-size: 0.825rem;
  color: #64748B;
  line-height: 1.6;
}

/* ==========================================================================
   PAGE 3: SETTINGS
   ========================================================================== */
.settings-clean-wrap {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.settings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-border);
}

.settings-section-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.settings-title-group h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text-primary);
}

.api-status-pill-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #059669;
  background: #ECFDF5;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.access-code-box {
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.access-code-input-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.775rem;
  font-weight: 600;
  color: #334155;
}

.input-with-mask-btn {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-toggle-mask {
  position: absolute;
  right: 0.65rem;
  font-size: 0.85rem;
  color: var(--c-text-tertiary);
}

.api-save-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--c-border);
}

.settings-data-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   TAGS & HIGH CONTRAST RISK BADGES
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.3;
}

.tag-r1, .tag-c1 { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.tag-r2, .tag-c2 { background: #F0F9FF; color: #0369A1; border: 1px solid #BAE6FD; }
.tag-r3, .tag-c3 { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.tag-r4, .tag-c4 { background: #FFF7ED; color: #C2410C; border: 1px solid #FFEDD5; }
.tag-r5, .tag-c5 { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECDD3; }

.risk-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.tag-profile {
  background: #F1F5F9;
  border: 1px solid var(--c-border);
  color: #334155;
  font-size: 0.725rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

/* ==========================================================================
   MODAL & TOASTS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--c-border);
}

.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text-primary);
}

.modal-close-btn {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text-tertiary);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
}

.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 3500;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: #0F172A;
  color: #FFFFFF;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  z-index: 3500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 800px;
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 0.75rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #334155;
}

.api-key-field {
  font-family: 'Consolas', monospace;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (2 CLEAN MEDIA QUERIES)
   ========================================================================== */

/* Tablet & Desktop */
@media (min-width: 769px) {
  .app-container {
    flex-direction: row;
  }
  
  .main-content {
    margin-left: var(--sidebar-width);
  }
  
  .mobile-bottom-nav {
    display: none !important;
  }

  .advisory-mobile-stepper {
    display: none !important;
  }

  .map-mobile-view-switcher {
    display: none !important;
  }

  .roleplay-mobile-tabs {
    display: none !important;
  }

  .advisory-mobile-next-row {
    display: none !important;
  }

  .charts-main-grid {
    grid-template-columns: 2fr 1fr;
  }
  
  .charts-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }

  .holdings-content-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .advisory-flow-container {
    grid-template-columns: 280px 360px minmax(420px, 1fr);
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  .advisory-flow-container {
    grid-template-columns: 250px 320px minmax(360px, 1fr);
    gap: 0.75rem;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE OVERHAUL (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Mobile Header */
  .mobile-header {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--header-height) + var(--safe-area-top)) !important;
    padding-top: var(--safe-area-top) !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    z-index: 1100 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .mobile-header-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #475569;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    text-decoration: none;
    transition: all 0.15s ease;
  }
  .mobile-header-btn:active {
    background: #E2E8F0;
    transform: scale(0.95);
  }

  /* 2. Off-canvas Sidebar & Overlay */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(290px, 82vw) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2000 !important;
    box-shadow: none;
  }
  
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.6) !important;
  }
  
  .sidebar-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1990 !important;
  }

  .sidebar-overlay.show {
    display: block !important;
  }
  
  /* 3. Main Content Viewport & Safe Area */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: calc(var(--header-height) + var(--safe-area-top) + 0.65rem) 0.65rem calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 1.25rem) 0.65rem !important;
  }
  
  /* 4. Financial App Quality Mobile Bottom Navigation Bar */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--bottom-nav-height) + var(--safe-area-bottom)) !important;
    padding-bottom: var(--safe-area-bottom) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.05) !important;
    z-index: 1500 !important;
    align-items: center !important;
    justify-content: space-around !important;
  }
  
  .bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    text-decoration: none !important;
    color: #64748B !important;
    padding: 3px 0 !important;
    position: relative !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .bottom-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    transition: transform 0.18s ease !important;
  }
  
  .bottom-nav-label {
    font-size: 0.675rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
    margin-top: 1px !important;
    transition: all 0.18s ease !important;
  }
  
  .bottom-nav-item.active {
    color: #C8102E !important;
  }
  
  .bottom-nav-item.active .bottom-nav-icon {
    transform: translateY(-1px) scale(1.06) !important;
  }
  
  .bottom-nav-item.active .bottom-nav-label {
    font-weight: 700 !important;
    color: #C8102E !important;
  }
  
  .bottom-nav-item.active::after {
    content: '';
    position: absolute;
    top: 2px;
    width: 18px;
    height: 2.5px;
    background: #C8102E;
    border-radius: 2px;
  }

  /* 5. Products Mobile Optimization */
  .spotlight-header-card {
    padding: 0.75rem !important;
  }
  .spotlight-search-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .spotlight-search-box {
    width: 100% !important;
  }
  .spotlight-actions-mobile-row {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .spotlight-actions-mobile-row .btn {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
  }
  .quick-product-chips {
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 3px !important;
  }
  .quick-product-chips::-webkit-scrollbar {
    display: none !important;
  }
  
  .kpi-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .kpi-metric-card {
    padding: 0.75rem 0.85rem !important;
    min-height: 76px !important;
  }
  .kpi-value {
    font-size: 1.15rem !important;
  }
  .kpi-title {
    font-size: 0.72rem !important;
  }

  .charts-main-grid, .charts-bottom-grid, .holdings-content-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .chart-panel-card {
    padding: 0.85rem !important;
  }
  .chart-panel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .chart-timeframe-selector {
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding-bottom: 2px !important;
  }
  .chart-timeframe-selector::-webkit-scrollbar {
    display: none !important;
  }
  .timeframe-btn {
    flex-shrink: 0 !important;
    padding: 3px 8px !important;
    font-size: 0.725rem !important;
  }

  .compare-selector-grid,
  .compare-spread-hero-card {
    grid-template-columns: 1fr !important;
  }
  
  .compare-metrics-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* 6. Advisory Workshop Mobile Optimization */
  .advisory-mobile-stepper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 5px 8px !important;
    margin-bottom: 0.75rem !important;
    box-shadow: var(--shadow-sm) !important;
    position: sticky !important;
    top: calc(var(--header-height) + var(--safe-area-top) + 2px) !important;
    z-index: 100 !important;
    backdrop-filter: blur(8px) !important;
  }
  .advisory-step-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 4px !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }
  .advisory-step-btn .step-badge {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.685rem !important;
    font-weight: 700 !important;
  }
  .advisory-step-btn.active {
    background: #C8102E !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.35) !important;
  }
  .advisory-step-btn.active .step-badge {
    background: #FFFFFF !important;
    color: #C8102E !important;
  }
  .step-divider {
    width: 10px !important;
    height: 2px !important;
    background: #E2E8F0 !important;
    border-radius: 1px !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
  }
  .advisory-flow-container {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0.85rem !important;
  }
  .advisory-col {
    height: auto !important;
    max-height: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .advisory-col-scrollable-body {
    max-height: none !important;
    overflow-y: visible !important;
  }
  .advisory-customer-scroll,
  .advisory-matches-scroll {
    max-height: 380px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .advisory-mobile-next-row {
    display: block !important;
    margin-top: 0.85rem !important;
    padding-top: 0.65rem !important;
    border-top: 1px dashed var(--c-border) !important;
  }
  .advisory-mob-jump-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    height: 38px !important;
    font-size: 0.825rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
  }
  .advisory-script-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    padding-bottom: 2px !important;
  }
  .advisory-script-toolbar .filter-select {
    max-width: 130px !important;
    min-width: 105px !important;
    flex-shrink: 0 !important;
  }

  /* 7. Care & Calendar Mobile Optimization */
  .care-workbench-container {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
  .care-card {
    padding: 0.85rem !important;
  }
  .calendar-header-top-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .calendar-title-group {
    justify-content: space-between !important;
    width: 100% !important;
  }
  .calendar-controls-row {
    justify-content: space-between !important;
    width: 100% !important;
  }
  .calendar-filter-bar {
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 3px !important;
    width: 100% !important;
  }
  .cal-filter-btn {
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }
  .calendar-days-grid {
    grid-auto-rows: 56px !important;
  }
  .calendar-day-cell {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 3px 4px !important;
  }
  .day-cell-top {
    font-size: 0.685rem !important;
    height: 14px !important;
    margin-bottom: 1px !important;
  }
  .day-events-container {
    max-height: 34px !important;
    gap: 1px !important;
  }
  .cal-event-pill {
    font-size: 0.585rem !important;
    padding: 1px 3px !important;
    line-height: 1.2 !important;
  }
  .care-customer-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  /* 8. Prospecting Map Mobile Optimization */
  .map-workbench-container {
    gap: 0.75rem !important;
  }
  .map-stats-header-card {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }
  .map-stat-col {
    padding: 0.35rem !important;
  }
  .map-stat-num {
    font-size: 1.15rem !important;
  }
  .map-stat-label {
    font-size: 0.675rem !important;
  }
  .location-top-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }
  .map-hubs-pill-row {
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }
  .map-hubs-pill-row::-webkit-scrollbar {
    display: none !important;
  }
  .map-hub-pill {
    flex-shrink: 0 !important;
    padding: 3px 8px !important;
    font-size: 0.725rem !important;
  }
  .map-search-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .map-search-box {
    width: 100% !important;
  }
  .map-mobile-view-switcher {
    display: flex !important;
    background: #FFFFFF !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 4px !important;
    gap: 4px !important;
    margin-bottom: 0.5rem !important;
    box-shadow: var(--shadow-sm) !important;
    position: sticky !important;
    top: calc(var(--header-height) + var(--safe-area-top) + 2px) !important;
    z-index: 100 !important;
  }
  .map-view-tab-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }
  .map-view-tab-btn.active {
    background: #C8102E !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.35) !important;
  }
  .map-level-arena-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .map-level-arena-grid.mobile-view-list .map-canvas-pane {
    display: none !important;
  }
  .map-level-arena-grid.mobile-view-list .map-sites-list-pane {
    display: flex !important;
    height: calc(100vh - 160px) !important;
    min-height: 480px !important;
    max-height: calc(100dvh - 140px) !important;
    overflow-y: auto !important;
  }
  .map-level-arena-grid.mobile-view-map .map-sites-list-pane {
    display: none !important;
  }
  .map-level-arena-grid.mobile-view-map .map-canvas-pane {
    display: flex !important;
    height: calc(100vh - 160px) !important;
    min-height: 480px !important;
    max-height: calc(100dvh - 140px) !important;
  }
  .map-canvas-pane {
    height: calc(100vh - 160px) !important;
    min-height: 480px !important;
    border-radius: var(--radius-lg) !important;
  }
  #prospectRadarLeafletMap {
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 8px !important;
  }
  .map-sites-scroll-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* 9. AI Roleplay Mobile Optimization */
  .roleplay-mobile-tabs {
    display: flex !important;
    background: #FFFFFF !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 4px !important;
    gap: 4px !important;
    margin-bottom: 0.75rem !important;
    box-shadow: var(--shadow-sm) !important;
    position: sticky !important;
    top: calc(var(--header-height) + var(--safe-area-top) + 2px) !important;
    z-index: 100 !important;
  }
  .rp-mob-tab-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 4px !important;
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    cursor: pointer !important;
  }
  .rp-mob-tab-btn .tab-step-num {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.685rem !important;
    font-weight: 700 !important;
  }
  .rp-mob-tab-btn.active {
    background: #C8102E !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.35) !important;
  }
  .rp-mob-tab-btn.active .tab-step-num {
    background: #FFFFFF !important;
    color: #C8102E !important;
  }
  .roleplay-workbench-container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .roleplay-grid-arena {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .roleplay-col {
    display: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .roleplay-col.mob-active {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .roleplay-chat-card {
    height: calc(100vh - 150px) !important;
    min-height: 520px !important;
    max-height: calc(100dvh - 130px) !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .roleplay-chat-header {
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    padding: 0.5rem 0.75rem !important;
    flex-shrink: 0 !important;
  }
  .chat-header-center-info {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .roleplay-messages-body {
    flex: 1 1 auto !important;
    min-height: 240px !important;
    padding: 0.65rem 0.5rem !important;
    overflow-y: auto !important;
  }
  .rp-msg-wrap {
    max-width: 96% !important;
  }
  .rp-msg-bubble {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    padding: 0.55rem 0.75rem !important;
    word-break: break-word !important;
  }
  .rp-coach-hint-strip {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    max-height: 56px !important;
    overflow-y: auto !important;
  }
  .rp-reply-suggestions {
    padding: 4px 6px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  .rp-interactive-input-area {
    padding: 6px 8px !important;
    flex-shrink: 0 !important;
  }

  /* 10. Mobile Video Call Sparring Stage */
  .rp-video-call-viewport {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .rp-local-video-pip {
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 110px !important;
    height: 80px !important;
  }
  .rp-video-controls-dock {
    gap: 0.35rem !important;
    height: 68px !important;
    padding: 0 0.4rem !important;
  }
  .btn-dock-control {
    min-width: 48px !important;
    padding: 4px !important;
  }
  .btn-dock-hangup {
    min-width: 68px !important;
    padding: 4px 8px !important;
  }

  /* 11. Modern Bottom Sheet Modals on Mobile */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-card {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    animation: slideUpModalMobile 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  @keyframes slideUpModalMobile {
    from {
      transform: translateY(100%);
      opacity: 0.5;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .modal-header {
    padding: 0.85rem 1rem !important;
  }
  .modal-body {
    padding: 0.85rem 1rem !important;
    max-height: calc(88vh - 125px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .modal-footer {
    padding: 0.75rem 1rem !important;
    padding-bottom: calc(0.75rem + var(--safe-area-bottom)) !important;
  }

  /* 12. Floating Toast Center */
  .toast-container {
    top: calc(var(--header-height) + var(--safe-area-top) + 8px) !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    max-width: 380px !important;
  }
  
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  
  .directory-filters-row {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .search-box.mini, .filter-select.mini, .directory-filters-row .btn {
    width: 100% !important;
  }

  /* Prevent iOS Safari auto-zoom on inputs */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  select,
  textarea,
  .form-input,
  .spotlight-input,
  .map-search-input,
  .rp-chat-textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .map-stats-header-card {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .roleplay-chat-card {
    height: 480px !important;
  }
  .rp-msg-wrap {
    max-width: 94% !important;
  }
  .rp-persona-portrait-frame {
    width: 120px !important;
    height: 120px !important;
  }
}


/* ==========================================================================
   PAGE 4: CARE WORKBENCH & MEMO CALENDAR
   ========================================================================== */
.care-workbench-container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
  height: calc(100vh - 78px);
  min-height: 500px;
  width: 100%;
  box-sizing: border-box;
}

.care-calendar-column, .care-script-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

.care-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.95rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.calendar-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}

.calendar-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-title-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.calendar-current-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F172A;
  font-family: 'Consolas', monospace;
  letter-spacing: -0.01em;
}

.calendar-controls-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.calendar-filter-bar {
  display: flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid var(--c-border);
  padding: 3px 4px;
  border-radius: var(--radius-full);
  gap: 3px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.calendar-filter-bar::-webkit-scrollbar {
  display: none;
}

.cal-filter-btn {
  padding: 3px 10px;
  font-size: 0.725rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  color: #475569;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.cal-filter-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.cal-filter-btn.active {
  background: #C8102E;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.35);
}

.calendar-nav-btn-group {
  display: flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 1px;
}

.calendar-nav-btn-group .btn-icon {
  padding: 3px 6px;
  border: none;
  background: transparent;
  color: #475569;
  border-radius: 3px;
}

.calendar-nav-btn-group .btn-icon:hover {
  background: #FFFFFF;
  color: #0F172A;
}

/* Calendar Grid - Symmetrical & Leveled with Right Column */
.calendar-grid-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.calendar-weekday-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.725rem;
  font-weight: 700;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  padding: 5px 0;
  flex-shrink: 0;
}

.calendar-weekday-header span:first-child,
.calendar-weekday-header span:last-child {
  color: #94A3B8;
}

.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  background: #E2E8F0;
  border: 1px solid #E2E8F0;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.calendar-day-cell {
  background: #FFFFFF;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all 0.15s ease;
}

.calendar-day-cell:hover {
  background: #F8FAFC;
  box-shadow: inset 0 0 0 1px #CBD5E1;
}

.calendar-day-cell.other-month {
  background: #FAFAFA;
  opacity: 0.45;
}

.calendar-day-cell.is-today {
  background: #FFFDFD;
  box-shadow: inset 0 0 0 1.5px #FECDD3;
}

.day-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 2px;
  height: 16px;
  flex-shrink: 0;
}

.day-cell-top .day-num {
  font-family: 'Consolas', monospace;
}

.today-tag {
  font-size: 0.585rem;
  font-weight: 700;
  color: #FFFFFF;
  background: #C8102E;
  padding: 0 4px;
  border-radius: 3px;
  line-height: 1.3;
}

.cal-more-events {
  font-size: 0.585rem;
  font-weight: 700;
  color: #475569;
  background: #E2E8F0;
  padding: 0 3px;
  border-radius: 3px;
  line-height: 1.3;
}

.day-events-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.cal-event-pill {
  font-size: 0.665rem;
  font-weight: 600;
  padding: 1.5px 5px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.cal-event-pill:hover {
  transform: scale(1.02);
}

.cal-badge-birthday { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; border-left: 2.5px solid #D97706; }
.cal-badge-expiry { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECDD3; border-left: 2.5px solid #DC2626; }
.cal-badge-holiday { background: #FFF1F2; color: #BE123C; border: 1px solid #FECDD3; border-left: 2.5px solid #E11D48; }
.cal-badge-anniversary { background: #FDF4FF; color: #A21CAF; border: 1px solid #F5D0FE; border-left: 2.5px solid #C026D3; }
.cal-badge-org { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; border-left: 2.5px solid #16A34A; font-weight: 700; }
.cal-badge-event { background: #FAF5FF; color: #6B21A8; border: 1px solid #E9D5FF; border-left: 2.5px solid #7E22CE; font-weight: 700; }
.cal-badge-visit { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; border-left: 2.5px solid #2563EB; }
.cal-badge-call { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; border-left: 2.5px solid #16A34A; }
.cal-badge-review { background: #F8FAFC; color: #334155; border: 1px solid #CBD5E1; border-left: 2.5px solid #64748B; }

/* Upcoming Events Stream */
.upcoming-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.upcoming-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.upcoming-title-group h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-text-primary);
}

.upcoming-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
}

.upcoming-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.85rem;
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  gap: 0.75rem;
  min-width: 0;
}

.upcoming-item-card:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.upcoming-item-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}

.upcoming-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.upcoming-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: #0F172A;
  flex-wrap: wrap;
}

.upcoming-date-pill {
  font-size: 0.7rem;
  color: #64748B;
  background: #F1F5F9;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: 'Consolas', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.cal-badge-today {
  font-size: 0.65rem;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--c-primary);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cal-badge-urgent {
  font-size: 0.65rem;
  font-weight: 700;
  color: #B91C1C;
  background: #FEE2E2;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cal-badge-soon {
  font-size: 0.65rem;
  font-weight: 600;
  color: #0369A1;
  background: #E0F2FE;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.upcoming-detail-text {
  font-size: 0.725rem;
  color: #475569;
  margin-top: 1px;
}

/* Care Script Generator */
.care-generator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--c-border);
}

.generator-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.generator-title-group h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-text-primary);
}

.care-engine-tag {
  font-size: 0.675rem;
  font-weight: 600;
  color: #0369A1;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.care-customer-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.care-persona-summary-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
}

.persona-chips-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}

.persona-pill {
  font-size: 0.725rem;
  font-weight: 600;
  color: #334155;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.persona-pill.gender-female {
  background: #FFF1F2;
  color: #BE123C;
  border-color: #FECDD3;
}

.persona-pill.gender-male {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.persona-pill.occ-pill {
  background: #F8FAFC;
  color: #1E293B;
  border-color: #CBD5E1;
}

.persona-pill.risk-pill {
  font-weight: 700;
}

.persona-pill.risk-c1 { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.persona-pill.risk-c2 { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
.persona-pill.risk-c3 { background: #FEF3C7; color: #B45309; border-color: #FDE68A; }
.persona-pill.risk-c4 { background: #FFF1F2; color: #BE123C; border-color: #FECDD3; }
.persona-pill.risk-c5 { background: #450A0A; color: #FECDD3; border-color: #991B1B; }

.persona-dates-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}

.care-date-badge {
  font-size: 0.725rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.care-date-badge.birthday { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.care-date-badge.expiry { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECDD3; }
.care-date-badge.anniversary { background: #FDF4FF; color: #A21CAF; border: 1px solid #F5D0FE; }
.care-date-badge.memo { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }

.care-scenario-section {
  margin-bottom: 0.75rem;
}

.care-scenario-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.care-scenario-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  min-height: 48px;
  gap: 3px;
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.care-scenario-btn:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.care-scenario-btn.active {
  background: #FFF5F5;
  border-color: var(--c-primary);
  color: var(--c-primary);
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.15);
}

.scenario-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.scenario-text {
  font-size: 0.725rem;
  font-weight: 600;
}

.care-sub-selector-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
}

.care-script-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.care-tone-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.care-tone-group .filter-select {
  height: 28px;
  font-size: 0.75rem;
  padding: 0 0.5rem;
}

.care-actions-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.care-actions-right .btn {
  height: 28px;
  font-size: 0.75rem;
  padding: 0 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.care-output-card {
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.care-output-content {
  padding: 1rem 1.2rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #0F172A;
  flex: 1;
  overflow-y: auto;
  max-height: 480px;
}

.care-output-content h1, .care-output-content h2, .care-output-content h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0.85rem 0 0.4rem;
}

.care-output-content p {
  margin-bottom: 0.75rem;
  color: #334155;
}

.care-output-content blockquote {
  border-left: 3px solid var(--c-primary);
  padding: 0.5rem 0.75rem;
  margin: 0.75rem 0;
  color: #1E293B;
  background: #FFF1F2;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.8rem;
}

/* Care Responsive */
@media (max-width: 900px) {
  .care-workbench-container {
    grid-template-columns: 1fr !important;
  }
}

.care-calendar-card,
.care-generator-card {
  display: flex;
  flex-direction: column;
}

/* Schedule Scope Toggle */
.schedule-scope-toggle {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid var(--c-border);
  padding: 2px;
  border-radius: var(--radius-sm);
  gap: 2px;
}

.schedule-scope-toggle .scope-btn {
  padding: 3px 10px;
  font-size: 0.725rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  color: #475569;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all var(--transition-fast);
}

.schedule-scope-toggle .scope-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.schedule-scope-toggle .scope-btn.active {
  background: #C8102E;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.35);
}

.cust-schedules-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 270px);
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 0.75rem;
}

.cust-interactions-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 270px);
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 0.75rem;
}


/* Modal Footer */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--c-border);
  background: #F8FAFC;
}

/* Enriched Client Profile Card & Quick Client Stack */
.client-gender-pill, .client-lifestage-pill {
  font-size: 0.675rem;
  font-weight: 600;
  color: #475569;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.client-care-tags-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.care-mini-tag {
  font-size: 0.685rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.care-mini-tag.birthday { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.care-mini-tag.expiry { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECDD3; }
.care-mini-tag.anniversary { background: #FDF4FF; color: #A21CAF; border: 1px solid #F5D0FE; }

.client-card-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #E2E8F0;
}

.client-item-name-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.client-meta-tiny-pill {
  font-size: 0.65rem;
  color: #64748B;
  background: #F1F5F9;
  padding: 1px 5px;
  border-radius: 3px;
}

.client-item-dates-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 2px;
}

.client-date-chip {
  font-size: 0.675rem;
  font-weight: 600;
  color: #C8102E;
  background: #FFF5F5;
  border: 1px solid #FECDD3;
  padding: 1px 6px;
  border-radius: 3px;
}

.client-item-action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed #E2E8F0;
}

.client-item-btn-care, .client-item-btn-edit {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.client-item-btn-care {
  color: #0369A1;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
}

.client-item-btn-care:hover {
  background: #E0F2FE;
  color: #0284C7;
}

.client-item-btn-edit {
  color: #C8102E;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
}

.client-item-btn-edit:hover {
  background: #FFE4E6;
  color: #9F1239;
}

/* ==========================================
   Care & Calendar: Schedules & Interactions
   ========================================== */

/* 3-Way Mode Switcher Tab Bar (Matching Single/Multi Product Toggle UI) */
.care-view-tab-bar {
  display: flex;
  background: #E2E8F0;
  border: 1px solid #CBD5E1;
  padding: 4px;
  border-radius: var(--radius-lg);
  gap: 4px;
  margin-bottom: 1rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.care-view-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  user-select: none;
}

.care-view-tab-btn .tab-icon {
  stroke: #64748B;
  transition: stroke var(--transition-fast), transform var(--transition-fast);
}

.care-view-tab-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.care-view-tab-btn:hover .tab-icon {
  stroke: #0F172A;
}

.care-view-tab-btn.active {
  background: linear-gradient(135deg, #C8102E 0%, #991B1B 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.35);
}

.care-view-tab-btn.active .tab-icon {
  stroke: #FFFFFF;
  transform: scale(1.05);
}

.care-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
}

/* Panel Action Header Bar */
.panel-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.825rem;
  color: #0F172A;
}

.panel-action-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-action-right {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

/* Calendar Event Pills for Visits & Calls */
.cal-badge-visit {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.cal-badge-call {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

.cal-badge-review {
  background: #F5F3FF;
  color: #6D28E8;
  border-color: #DDD6FE;
}

.cal-badge-care {
  background: #FFFBEB;
  color: #B45309;
  border-color: #FDE68A;
}

/* Schedule Item Card (待办日程卡片) */

.schedule-item-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  box-sizing: border-box;
}

.schedule-item-card:hover {
  border-color: #CBD5E1;
  box-shadow: var(--shadow-md);
}

.schedule-item-card.completed {
  opacity: 0.65;
  background: #F8FAFC;
}

.schedule-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.schedule-type-badge {
  font-size: 0.685rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}

.schedule-type-badge.visit { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.schedule-type-badge.call { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.schedule-type-badge.review { background: #F5F3FF; color: #6D28E8; border: 1px solid #DDD6FE; }
.schedule-type-badge.care { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }

.schedule-date-time {
  font-size: 0.725rem;
  color: #64748B;
  font-family: 'Consolas', monospace;
  font-weight: 600;
}

.schedule-title-text {
  font-size: 0.825rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0.2rem 0 0.15rem;
}

.schedule-purpose-text {
  font-size: 0.75rem;
  color: #475569;
  line-height: 1.45;
  background: #F8FAFC;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  border: 1px solid #F1F5F9;
  box-sizing: border-box;
}

.schedule-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.25rem;
  padding-top: 0.35rem;
  border-top: 1px dashed #E2E8F0;
  flex-wrap: wrap;
  gap: 4px;
}

.schedule-location-info {
  font-size: 0.7rem;
  color: #64748B;
}

.schedule-actions-btns {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

/* Historical Communication Timeline (历史沟通记录时间轴) */
.cust-interactions-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
  position: relative;
  margin-left: 0.5rem;
}

.cust-interactions-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #E2E8F0;
}

.interaction-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  position: relative;
}

.timeline-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #C8102E;
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-dot.visit { border-color: #1D4ED8; }
.timeline-dot.call { border-color: #047857; }
.timeline-dot.wechat { border-color: #059669; }
.timeline-dot.review { border-color: #6D28D9; }

.timeline-card-body {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline-topic-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
}

.timeline-meta-date {
  font-size: 0.725rem;
  color: #64748B;
  font-family: 'Consolas', monospace;
}

.timeline-content-block {
  font-size: 0.785rem;
  color: #334155;
  line-height: 1.55;
}

.timeline-content-label {
  font-weight: 600;
  color: #0F172A;
}

.timeline-feedback-box {
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: #166534;
}

.timeline-action-box {
  background: #FFF1F2;
  border: 1px solid #FFE4E6;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: #9F1239;
}

.upcoming-actions-group {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

/* ==========================================
   Advisory to Schedule & Interaction KYC Sync
   ========================================== */

.client-latest-interaction-box {
  margin-top: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  border-radius: var(--radius-sm);
  font-size: 0.775rem;
  line-height: 1.5;
}

.client-latest-interaction-box .interaction-header-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.client-latest-interaction-box .interaction-date-text {
  font-size: 0.72rem;
  color: #166534;
  font-weight: 700;
}

.client-latest-interaction-box .interaction-summary-text {
  color: #14532D;
  margin-bottom: 2px;
}

.client-latest-interaction-box .interaction-followup-text {
  font-size: 0.72rem;
  color: #991B1B;
  background: #FFF1F2;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 4px;
  display: inline-block;
}

.portfolio-header-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}


/* ==========================================
   Multi-Product Comparison Arena (Up to 5 Products)
   ========================================== */
.compare-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.compare-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.compare-count-badge {
  font-size: 0.725rem;
  font-weight: 700;
  color: #C8102E;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.compare-multi-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.compare-slot-card {
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  transition: all var(--transition-fast);
}

.compare-slot-card:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: var(--shadow-sm);
}

.compare-slot-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compare-slot-badge-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
}

.compare-slot-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.compare-slot-btn-remove {
  border: none;
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.85rem;
  line-height: 1;
  transition: all var(--transition-fast);
}

.compare-slot-btn-remove:hover {
  background: #FEE2E2;
  color: #DC2626;
}

.compare-slot-select {
  width: 100%;
  font-size: 0.775rem;
  padding: 0.35rem 0.5rem;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: #0F172A;
  font-weight: 600;
}

.compare-slot-add-placeholder {
  border: 1px dashed #CBD5E1;
  background: #F8FAFC;
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: #64748B;
  transition: all var(--transition-fast);
  min-height: 76px;
}

.compare-slot-add-placeholder:hover {
  background: #F0F9FF;
  border-color: #0284C7;
  color: #0284C7;
}

.add-compare-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 280px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  padding: 4px 0;
}

.add-compare-item {
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-bottom: 1px solid #F1F5F9;
}

.add-compare-item:last-child {
  border-bottom: none;
}

.add-compare-item:hover {
  background: #F8FAFC;
}

.add-compare-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #F1F5F9;
}

.add-compare-item-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F172A;
}

.add-compare-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #64748B;
}

/* Spread Hero Multi Cards */
.compare-spread-hero-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.compare-hero-item-box {
  background: #F8FAFC;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-left-width: 4px;
}

.compare-hero-item-title {
  font-size: 0.825rem;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-hero-item-ret {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: 'Consolas', monospace;
  line-height: 1.2;
}

.compare-hero-item-sub {
  font-size: 0.7rem;
  color: #64748B;
}

.compare-chart-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  font-weight: 600;
}

.compare-legend-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: #F8FAFC;
  border: 1px solid var(--c-border);
}

@keyframes highlightPulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.4);
    outline: 2px solid rgba(200, 16, 46, 0.6);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(200, 16, 46, 0.15);
    outline: 2px solid rgba(200, 16, 46, 0.9);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0);
    outline: 2px solid transparent;
  }
}

.highlight-pulse {
  animation: highlightPulseGlow 1.4s ease-out;
  border-radius: var(--radius-md);
}


/* ==========================================================================
   PAGE 4: PROSPECTING MAP (展业地图 - 全响应式视口自适应缩放)
   ========================================================================== */
#page-map {
  min-height: calc(100vh - 4.5rem);
  display: flex;
  flex-direction: column;
}

.map-workbench-container {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.map-stats-header-card {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.map-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.15rem 0.4rem;
  border-right: 1px dashed #E2E8F0;
}

.map-stat-col:last-child {
  border-right: none;
}

.map-stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--c-text-primary);
  font-family: var(--font-sans);
  line-height: 1.2;
}

.map-stat-label {
  font-size: 0.725rem;
  color: #64748B;
  margin-top: 0.2rem;
  font-weight: 500;
}

.text-success { color: #059669 !important; }
.text-primary { color: #C8102E !important; }
.text-warning { color: #D97706 !important; }
.text-info { color: #0284C7 !important; }
.text-purple { color: #7C3AED !important; }

/* Top Filter Toolbar */
.map-top-filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

.map-location-card, .map-filters-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-sm);
}

.location-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
}

.location-title-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #C8102E;
  font-weight: 700;
  font-size: 0.9rem;
}

.location-current-name {
  color: var(--c-text-primary);
  font-weight: 700;
  font-size: 0.925rem;
}

.radar-location-status {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #64748B;
  overflow-wrap: anywhere;
}

.radar-location-status[data-state="error"],
.radar-location-status[data-state="warning"] {
  color: #B45309;
}

.radar-location-status[data-state="success"] {
  color: #047857;
}

.radar-location-status[data-state="pending"] {
  color: #0369A1;
}

.btn-gps-trigger:disabled {
  opacity: 0.6;
  cursor: wait;
}

.btn-gps-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  padding: 2px 7px;
  color: #0284C7;
  border-color: #BAE6FD;
  background: #F0F9FF;
}

.map-hubs-pill-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.map-hub-pill {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  cursor: pointer;
  transition: all 0.18s;
  font-weight: 500;
}

.map-hub-pill:hover {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.map-hub-pill.active {
  background: #C8102E;
  color: #FFFFFF;
  border-color: #C8102E;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.25);
}

.map-search-row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.45rem;
}

.map-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
}

.map-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.8rem;
  color: var(--c-text-primary);
  outline: none;
}

.map-filter-tags-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
  padding: 2px 0;
}

.filter-row-label {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 600;
  width: 44px;
  min-width: 44px;
  flex-shrink: 0;
  text-align: left;
  letter-spacing: 0.5px;
}

.filter-buttons-group {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.map-filter-btn {
  font-size: 0.725rem;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}

.map-filter-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.map-filter-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
  font-weight: 600;
}

.map-filter-btn.status-my.active { background: #C8102E; border-color: #C8102E; color: #FFFFFF; }
.map-filter-btn.status-colleague.active { background: #D97706; border-color: #D97706; color: #FFFFFF; }
.map-filter-btn.status-partnered.active { background: #059669; border-color: #059669; color: #FFFFFF; }
.map-filter-btn.status-unassigned.active { background: #0284C7; border-color: #0284C7; color: #FFFFFF; }

/* Dynamic Responsive Level Arena below Filters */
.map-level-arena-grid {
  display: grid;
  grid-template-columns: minmax(360px, 400px) 1fr;
  gap: 0.75rem;
  align-items: stretch;
  height: calc(100vh - 215px) !important;
  min-height: 420px !important;
  max-height: 540px !important;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 0.25rem;
}

@media (max-width: 1024px) {
  .map-level-arena-grid {
    grid-template-columns: 1fr;
    height: auto !important;
    min-height: 700px !important;
    max-height: none !important;
  }
}

/* Scrollable Sites List - Strictly Leveled and Fixed */
.map-sites-list-pane {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 215px) !important;
  min-height: 420px !important;
  max-height: 540px !important;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sites-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F1F5F9;
  background: #FAFAFA;
  flex-shrink: 0;
  height: 46px;
  box-sizing: border-box;
}

.sites-list-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-text-primary);
}

.sites-count-badge {
  font-size: 0.725rem;
  font-weight: 600;
  color: #475569;
  background: #E2E8F0;
  padding: 1px 6px;
  border-radius: 10px;
}

.map-sites-scroll-list {
  padding: 0.6rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  height: calc(600px - 46px);
  box-sizing: border-box;
}

/* Map Canvas Pane - Strictly Leveled and Fixed */
.map-canvas-pane {
  position: relative;
  background: #0B132B;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 600px !important;
  min-height: 600px !important;
  max-height: 600px !important;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

.map-canvas-viewport {
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#prospectUnifiedMapContainer,
.real-open-map-layer {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Site Card */
.map-site-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.map-site-card:hover {
  border-color: #94A3B8;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.map-site-card.active {
  border-color: #C8102E !important;
  background: #FFFBFB;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.12);
}

.site-card-top-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.site-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.site-name-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
}

.site-distance-pill {
  font-size: 0.725rem;
  font-weight: 700;
  color: #0284C7;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
}

.site-status-badge {
  font-size: 0.685rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.site-status-badge.status-my { background: #FFF1F2; color: #BE123C; border: 1px solid #FECDD3; }
.site-status-badge.status-colleague { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.site-status-badge.status-partnered { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.site-status-badge.status-unassigned { background: #F0F9FF; color: #0369A1; border: 1px solid #BAE6FD; }

.site-card-meta-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #64748B;
  margin-bottom: 0.3rem;
}

.site-custody-pill {
  font-size: 0.685rem;
  font-weight: 700;
  color: #047857;
  background: #D1FAE5;
  padding: 1px 5px;
  border-radius: 3px;
}

.site-progress-bar-wrap {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed #F1F5F9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.725rem;
}

.site-progress-text {
  color: #334155;
  font-weight: 600;
}

.site-advisor-text {
  color: #64748B;
}

/* Right Map Canvas Pane */
.map-canvas-pane {
  position: relative;
  background: #0B132B;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

.map-canvas-top-bar {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.map-mode-indicator {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F8FAFC;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.radar-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulseRadarDot 1.6s infinite;
}

@keyframes pulseRadarDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #10B981; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.map-zoom-actions {
  pointer-events: auto;
  display: flex;
  gap: 0.3rem;
}

.map-tool-btn {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.15s;
}

.map-tool-btn:hover {
  background: rgba(200, 16, 46, 0.85);
  border-color: #C8102E;
}

.map-canvas-viewport {
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#prospectMapCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.map-floating-legend {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  color: #E2E8F0;
  z-index: 10;
  pointer-events: auto;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.status-my { background: #EF4444; box-shadow: 0 0 6px #EF4444; }
.legend-dot.status-colleague { background: #F59E0B; box-shadow: 0 0 6px #F59E0B; }
.legend-dot.status-partnered { background: #10B981; box-shadow: 0 0 6px #10B981; }
.legend-dot.status-unassigned { background: #0EA5E9; box-shadow: 0 0 6px #0EA5E9; }
.legend-dot.user-anchor { background: #A855F7; box-shadow: 0 0 8px #A855F7; }

/* Detail Drawer */
.map-detail-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(390px, 92%);
  background: #FFFFFF;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.35);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: slideInDrawer 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInDrawer {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #E2E8F0;
  background: #F8FAFC;
  flex-shrink: 0;
}

.drawer-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.drawer-type-badge {
  align-self: flex-start;
  font-size: 0.685rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #E2E8F0;
  color: #334155;
}

.drawer-site-name {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
}

.drawer-close-btn {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
}

.drawer-close-btn:hover {
  background: #E2E8F0;
  color: #C8102E;
  border-color: #CBD5E1;
}

.drawer-body {
  padding: 1rem 1.15rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
}

.drawer-section-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
}

.drawer-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px dashed #E2E8F0;
}

.drawer-contact-item:last-child {
  border-bottom: none;
}

.drawer-contact-name {
  font-weight: 600;
  color: #0F172A;
  font-size: 0.775rem;
}

.drawer-contact-role {
  font-size: 0.7rem;
  color: #64748B;
}

.drawer-contact-phone {
  font-size: 0.75rem;
  color: #0284C7;
  font-weight: 600;
  cursor: pointer;
  background: #EFF6FF;
  padding: 2px 6px;
  border-radius: 4px;
}

.drawer-contact-phone:hover {
  background: #DBEAFE;
}

.drawer-actions-bar {
  padding: 0.75rem 1.15rem;
  border-top: 1px solid #E2E8F0;
  background: #FFFFFF;
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Real Open Map Layer & Leaflet Overrides */
.real-open-map-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #E5E7EB;
}

.leaflet-control-attribution {
  display: none !important;
}

.map-layer-switcher {
  position: static;
  display: flex;
  gap: 0.25rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  padding: 3px 5px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 10;
  pointer-events: auto;
}

.map-layer-btn {
  font-size: 0.725rem;
  padding: 2px 8px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #CBD5E1;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.map-layer-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.map-layer-btn.active {
  background: linear-gradient(135deg, #C8102E 0%, #9B0D23 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.4);
}

/* Custom Marker Pins on Real Map */
.custom-map-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  cursor: pointer;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-map-pin:hover {
  transform: translate(-50%, -108%) scale(1.08);
  z-index: 1000 !important;
}

.pin-head-bubble {
  padding: 3px 7px;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 2px solid #FFFFFF;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.pin-head-bubble.status-my { background: #EF4444; }
.pin-head-bubble.status-colleague { background: #F59E0B; }
.pin-head-bubble.status-partnered { background: #10B981; }
.pin-head-bubble.status-unassigned { background: #0EA5E9; }

.pin-tip-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #FFFFFF;
  margin-top: -1px;
}

/* Custom Leaflet Popup */
.leaflet-popup-content-wrapper {
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.leaflet-popup-content {
  margin: 0;
  line-height: 1.4;
}

.map-popup-card {
  padding: 0.75rem 0.9rem;
  min-width: 250px;
  font-size: 0.775rem;
}

.map-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.map-popup-title {
  font-weight: 800;
  color: #0F172A;
  font-size: 0.85rem;
}

.map-popup-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px dashed #E2E8F0;
}


/* ==========================================================================
   Data Credibility & Transparency Badges (真实依据 vs 展示数据 标注体系)
   ========================================================================== */
.map-data-credibility-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 0.45rem 0.85rem;
  font-size: 0.725rem;
  color: #475569;
  line-height: 1.4;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.credibility-tag-real {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 0.685rem;
}

.credibility-tag-demo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FDE68A;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.685rem;
}

.data-origin-pill {
  font-size: 0.685rem;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}
.data-origin-pill.real { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; font-weight: 700; }
.data-origin-pill.demo { background: #F8FAFC; color: #94A3B8; border: 1px solid #E2E8F0; font-weight: normal; }


/* ==========================================================================
   DAILY ITINERARY & ROUTE OPTIMIZATION MATRIX (当日行程全景与智能路径规划看板)
   ========================================================================== */
.modal-itinerary-card {
  max-width: 1040px !important;
  width: 95vw !important;
  max-height: 90vh !important;
  height: 860px !important;
}

.itinerary-modal-container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.25rem;
  height: calc(860px - 140px);
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .modal-itinerary-card {
    height: auto !important;
    max-height: 88vh !important;
    width: 100vw !important;
  }
  .itinerary-modal-container {
    grid-template-columns: 1fr;
    height: auto;
    max-height: calc(88vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .itinerary-map-pane {
    min-height: 280px !important;
    height: 280px !important;
  }
}

/* Left Column: Route Map Pane */
.itinerary-map-pane {
  display: flex;
  flex-direction: column;
  background: #0F172A;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  overflow: hidden;
  position: relative;
  height: 100%;
  min-height: 380px;
}

.itinerary-map-header {
  padding: 0.65rem 0.9rem;
  background: rgba(15, 23, 42, 0.95);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
  flex-shrink: 0;
}

.itinerary-map-title-box {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #F8FAFC;
  font-size: 0.8rem;
  font-weight: 700;
}

.itinerary-map-view-canvas {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  background: #E2E8F0;
}

.itinerary-map-floating-kpis {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #E2E8F0;
  font-size: 0.75rem;
  z-index: 1000;
  pointer-events: auto;
}

.itinerary-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.itinerary-kpi-label {
  font-size: 0.65rem;
  color: #94A3B8;
}

.itinerary-kpi-val {
  font-size: 0.9rem;
  font-weight: 800;
  color: #38BDF8;
  font-family: var(--font-sans);
}

.itinerary-kpi-val.highlight {
  color: #34D399;
}

/* Right Column: Timeline & Route Manager Pane */
.itinerary-timeline-pane {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.itinerary-actions-header {
  padding: 0.75rem 1rem;
  background: #F8FAFC;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.itinerary-opt-status-badge {
  font-size: 0.725rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.itinerary-opt-status-badge.optimized {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

.itinerary-opt-status-badge.unoptimized {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FDE68A;
}

.itinerary-timeline-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

/* Stop Card */
.itinerary-stop-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: all 0.18s;
}

.itinerary-stop-card:hover {
  border-color: #94A3B8;
  box-shadow: var(--shadow-sm);
}

.itinerary-stop-card.locked {
  border-left: 4px solid #C8102E;
  background: #FFFDFD;
}

.itinerary-stop-card.unlocked {
  border-left: 4px solid #0284C7;
}

.stop-top-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.stop-seq-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0F172A;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itinerary-stop-card.locked .stop-seq-badge {
  background: #C8102E;
}

.stop-time-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F172A;
  font-family: 'Consolas', monospace;
}

.stop-duration-pill {
  font-size: 0.685rem;
  color: #64748B;
  background: #F1F5F9;
  padding: 1px 5px;
  border-radius: 3px;
}

.stop-title-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.35;
}

.stop-venue-line {
  font-size: 0.75rem;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stop-purpose-line {
  font-size: 0.725rem;
  color: #64748B;
  background: #F8FAFC;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  border: 1px dashed #E2E8F0;
  line-height: 1.4;
}

.stop-commute-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.7rem;
  color: #0369A1;
  font-weight: 600;
  margin-top: 2px;
}

.stop-footer-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  border-top: 1px dashed #F1F5F9;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.btn-vip-lock {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}

.btn-vip-lock.locked {
  background: #FFF1F2;
  color: #C8102E;
  border: 1px solid #FECDD3;
}

.btn-vip-lock.locked:hover {
  background: #FFE4E6;
}

.btn-vip-lock.unlocked {
  background: #F8FAFC;
  color: #64748B;
  border: 1px solid #E2E8F0;
}

.btn-vip-lock.unlocked:hover {
  background: #F1F5F9;
  color: #0F172A;
}

/* Custom Marker Pins for Itinerary Map */
.itinerary-map-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  cursor: pointer;
}

.itinerary-pin-bubble {
  padding: 3px 8px;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 0.725rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  white-space: nowrap;
}

.itinerary-pin-bubble.locked {
  background: #C8102E;
}

.itinerary-pin-bubble.unlocked {
  background: #0284C7;
}

.itinerary-pin-tip {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #FFFFFF;
  margin-top: -1px;
}

/* Smart Slot Recommendation Options */
.smart-slot-recommend-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.smart-slot-option-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.18s;
}

.smart-slot-option-card:hover {
  border-color: #0284C7;
  background: #F0F9FF;
  transform: translateY(-1px);
}

.smart-slot-option-card.best {
  border-color: #10B981;
  background: #F0FDF4;
}

.smart-slot-option-card.selected {
  border-color: #C8102E !important;
  background: #FFF5F5 !important;
  box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.2);
}

.slot-time-range {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
  font-family: 'Consolas', monospace;
}

.slot-saving-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #047857;
  background: #D1FAE5;
  padding: 2px 6px;
  border-radius: 4px;
}


/* Entry Compliance & AI Competition Modal */
.entry-compliance-overlay {
  z-index: 5000 !important;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
}

.entry-compliance-card {
  max-width: 520px !important;
  width: 92vw !important;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #FFFFFF;
}

.entry-compliance-header {
  padding: 1.5rem 1.5rem 1rem;
  background: #0F172A;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.entry-brand-badge-box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.entry-title-text {
  font-size: 1.05rem;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.01em;
}

.entry-producer-tag {
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  color: #FDA4AF;
  background: rgba(200, 16, 46, 0.25);
  border: 1px solid rgba(253, 164, 175, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

.entry-compliance-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.entry-competition-banner {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: #1E40AF;
  font-size: 0.825rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.competition-tag {
  background: #2563EB;
  color: #FFFFFF;
  font-size: 0.675rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.entry-statement-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 1rem;
}

.statement-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.4rem;
}

.statement-para {
  font-size: 0.8rem;
  line-height: 1.6;
  color: #475569;
}

.entry-compliance-footer {
  padding: 1rem 1.5rem 1.5rem;
  background: #FFFFFF;
  border-top: 1px solid #F1F5F9;
  display: flex;
  justify-content: flex-end;
}

.btn-entry-agree {
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-md);
}


/* Global Subtle App Footer (Low Visual Prominence) */
.app-global-footer {
  margin-top: 3rem;
  padding: 1.5rem 1rem 2.5rem;
  border-top: 1px solid #F1F5F9;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Hide global footer in all full-screen workbench views so it never obstructs, clips, or creates trailing blank space */
body[data-active-page="roleplay"] .app-global-footer,
body[data-active-page="care"] .app-global-footer,
body[data-active-page="advisory"] .app-global-footer,
body[data-active-page="events"] .app-global-footer,
.main-content:has(#page-roleplay.active) .app-global-footer,
.main-content:has(#page-care.active) .app-global-footer,
.main-content:has(#page-advisory.active) .app-global-footer,
.main-content:has(#page-events.active) .app-global-footer,
#page-roleplay.active ~ .app-global-footer,
#page-care.active ~ .app-global-footer,
#page-advisory.active ~ .app-global-footer,
#page-events.active ~ .app-global-footer {
  display: none !important;
}

.footer-producer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.725rem;
  color: #94A3B8;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.footer-producer-text {
  font-weight: 600;
  color: #64748B;
}

.footer-divider {
  color: #CBD5E1;
  font-size: 0.7rem;
}

.footer-compliance-text {
  color: #94A3B8;
  font-weight: 400;
}


/* Activity Export Modal & Stats Styles */
.modal-activity-export-card {
  max-width: 780px !important;
  width: 95vw !important;
}

.activity-export-timeframe-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #F1F5F9;
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
}

.activity-tf-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.825rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.activity-tf-btn:hover {
  color: #0F172A;
}

.activity-tf-btn.active {
  background: #FFFFFF;
  color: var(--c-primary);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.activity-stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
  .activity-stats-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.activity-stat-kpi-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.activity-stat-kpi-card.primary {
  background: #FFF1F2;
  border-color: #FECDD3;
}

.stat-kpi-label {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 600;
}

.stat-kpi-num {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
}

.activity-stat-kpi-card.primary .stat-kpi-num {
  color: #C8102E;
}

.stat-kpi-sub {
  font-size: 0.7rem;
  color: #94A3B8;
}

.activity-export-table-container {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.activity-export-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.775rem;
  text-align: left;
}

.activity-export-table th {
  background: #F8FAFC;
  padding: 8px 10px;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #E2E8F0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.activity-export-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #F1F5F9;
  color: #334155;
}

.activity-export-table tr:hover td {
  background: #F8FAFC;
}


/* ==========================================
   Unified Prospect Radar Mode Tabs (High Contrast CITIC Red)
   ========================================== */
.prospect-mode-tabs-bar {
  display: none !important;
}

.prospect-mode-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.825rem;
  font-weight: 700;
  color: #334155;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.prospect-mode-tab-btn:hover:not(.active) {
  background: #E2E8F0;
  color: #0F172A;
}

.prospect-mode-tab-btn.active {
  background: linear-gradient(135deg, #C8102E 0%, #9B0D23 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.prospect-mode-tab-btn.active svg {
  stroke: #FFFFFF !important;
}

.prospect-tab-badge {
  font-size: 0.685rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}

.prospect-mode-tab-btn.active .prospect-tab-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* ==========================================================================
   ENHANCED RADAR PINS & POPUPS (高质感金融网点与活动地标气泡体系)
   ========================================================================== */
.radar-pin-container {
  background: transparent !important;
  border: none !important;
}

.radar-map-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(0, 0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.radar-map-pin:hover {
  transform: translateY(-3px) scale(1.15);
  z-index: 1000 !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.38)) brightness(1.06);
}

.radar-pin-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 0.725rem;
  font-weight: 800;
  border: 2px solid #FFFFFF;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

/* Status & Type Gradient Themes */
.radar-pin-bubble.type-bank {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
}

.radar-pin-bubble.type-event-finance {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #FFFFFF;
}

.radar-pin-bubble.type-event-chamber {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
}

.radar-pin-bubble.type-event-study {
  background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
  color: #FFFFFF;
}

.radar-pin-bubble.type-event-alumni {
  background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
  color: #FFFFFF;
}

.radar-pin-bubble.type-enterprise {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #FFFFFF;
}

.radar-pin-bubble.type-park {
  background: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%);
  color: #FFFFFF;
}

.radar-pin-bubble.status-my {
  background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
  color: #FFFFFF;
}

.radar-pin-bubble.status-colleague {
  background: linear-gradient(135deg, #F97316 0%, #C2410C 100%);
  color: #FFFFFF;
}

.radar-pin-tip {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #FFFFFF;
  margin-top: -1px;
}

/* Central Anchor Radar Beacon */
.radar-anchor-marker-wrapper {
  background: transparent !important;
  border: none !important;
}

.radar-anchor-beacon {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-beacon-core {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C8102E 0%, #8B0014 100%);
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 0 14px rgba(200, 16, 46, 0.85), 0 2px 6px rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.radar-beacon-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(200, 16, 46, 0.25);
  border: 1.5px solid rgba(200, 16, 46, 0.6);
  transform: translate(-50%, -50%);
  animation: radarBeaconPulse 2s infinite ease-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes radarBeaconPulse {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Modern Apple / Financial Leaflet Popup Card */
.leaflet-popup-content-wrapper {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 32px -4px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.leaflet-popup-tip {
  background: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

.leaflet-popup-close-button {
  top: 8px !important;
  right: 8px !important;
  color: #94A3B8 !important;
  font-size: 16px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 20px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.leaflet-popup-close-button:hover {
  color: #0F172A !important;
  background: #F1F5F9 !important;
}

.radar-popup-card {
  padding: 0.85rem 1rem;
  min-width: 260px;
  max-width: 300px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.radar-popup-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  padding-right: 14px;
}

.radar-popup-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.685rem;
  font-weight: 700;
  line-height: 1.2;
}

.radar-popup-type-pill.bank {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

.radar-popup-type-pill.event {
  background: #F3E8FF;
  color: #6B21A8;
  border: 1px solid #DDD6FE;
}

.radar-popup-type-pill.enterprise {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.radar-popup-type-pill.park {
  background: #F0FDFA;
  color: #0F766E;
  border: 1px solid #99F6E4;
}

.radar-popup-dist-badge {
  font-size: 0.685rem;
  font-weight: 700;
  color: #C8102E;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.radar-popup-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: #0F172A;
  margin: 0 0 0.4rem 0;
  line-height: 1.35;
  letter-spacing: -0.2px;
}

.radar-popup-info-line {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 0.735rem;
  color: #64748B;
  margin-bottom: 0.35rem;
  line-height: 1.4;
}

.radar-popup-info-line svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.radar-popup-meta-box {
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.7rem;
  color: #334155;
  line-height: 1.4;
}

.radar-popup-meta-label {
  font-weight: 700;
  color: #475569;
}

.radar-popup-actions {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #F1F5F9;
}

.radar-popup-btn-primary {
  flex: 1.2;
  background: linear-gradient(135deg, #C8102E 0%, #9B0014 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 0.775rem !important;
  font-weight: 700 !important;
  padding: 0.45rem 0.65rem !important;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.3) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.radar-popup-btn-primary:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 4px 10px rgba(200, 16, 46, 0.45) !important;
  transform: translateY(-1px) !important;
}

.radar-popup-btn-secondary {
  flex: 1;
  background: #F8FAFC !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.65rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.radar-popup-btn-secondary:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   AI Roleplay & Scenario Sparring Workbench Styles
   ========================================================================== */

/* Roleplay Page Full-Height Viewport Container Rules */
body[data-active-page="roleplay"] .main-content,
.main-content:has(#page-roleplay.active) {
  padding: 0.5rem 1.25rem 0.5rem 1.25rem !important;
  height: calc(100vh - var(--header-height, 60px)) !important;
  max-height: calc(100vh - var(--header-height, 60px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

#page-roleplay.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.roleplay-workbench-container {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100%;
  width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  box-sizing: border-box;
  overflow: hidden !important;
}

/* Top Hero Banner (Removed as requested) */
.roleplay-hero-banner {
  display: none !important;
}

/* 3-Column Fluid Adaptive Arena Grid - Sized Perfectly to Visible Screen */
.roleplay-grid-arena {
  display: grid;
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 0.75rem;
  align-items: stretch;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden !important;
  transition: grid-template-columns 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.roleplay-col {
  min-width: 0;
  max-width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

/* Left Column: Setup */
.roleplay-col-setup {
  min-width: 220px;
  flex-shrink: 0;
}

/* Middle Column: Chat (Core Arena) */
.roleplay-col-chat {
  flex: 1 1 auto;
  min-width: 300px;
}

/* Right Column: Report */
.roleplay-col-report {
  min-width: 240px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

/* Collapsible Right Panel State (When user toggles report) */
.roleplay-grid-arena.report-collapsed {
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) 0px !important;
}
.roleplay-grid-arena.report-collapsed .roleplay-col-report {
  display: none !important;
}

/* Tablet / Mid-screen adaptive layout (961px - 1200px) */
@media (min-width: 961px) and (max-width: 1200px) {
  .roleplay-grid-arena {
    grid-template-columns: 225px minmax(0, 1fr) 245px;
    gap: 0.5rem;
  }
}

/* Compact Desktop / Tablet Landscape (769px - 960px) */
@media (min-width: 769px) and (max-width: 960px) {
  .roleplay-grid-arena {
    grid-template-columns: 225px minmax(0, 1fr);
    gap: 0.5rem;
  }
  .roleplay-col-report {
    display: none;
  }
  .roleplay-grid-arena.report-open {
    grid-template-columns: 0px minmax(0, 1fr) 280px;
  }
  .roleplay-grid-arena.report-open .roleplay-col-setup {
    display: none !important;
  }
  .roleplay-grid-arena.report-open .roleplay-col-report {
    display: flex !important;
  }
}


/* Left Column Setup Panel */
.roleplay-panel-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.roleplay-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 0.4rem;
  gap: 8px;
}

.panel-title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.panel-title-group .step-num-circle {
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.panel-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-text-primary);
  margin: 0;
  line-height: 1.2;
}

.panel-subtitle {
  font-size: 0.68rem;
  color: var(--c-text-tertiary);
  display: block;
  line-height: 1.2;
}

.roleplay-panel-header .btn-icon-subtle {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.roleplay-setup-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.roleplay-setup-body::-webkit-scrollbar {
  width: 4px;
}

.roleplay-setup-body::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}


.rp-customer-profile-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.rp-cust-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rp-cust-name-badge {
  font-weight: 700;
  color: #0F172A;
  font-size: 0.925rem;
}

.rp-cust-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.rp-cust-meta-chip {
  padding: 2.5px 6px;
  border-radius: 4px;
  font-size: 0.685rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.rp-cust-meta-chip.chip-asset { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.rp-cust-meta-chip.chip-goal { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.rp-cust-meta-chip.chip-period { background: #FAF5FF; color: #7E22CE; border: 1px solid #E9D5FF; }
.rp-cust-meta-chip.chip-exp { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }

.rp-cust-painpoint-box {
  font-size: 0.725rem;
  color: #334155;
  background: #FFF8F8;
  border: 1px solid #FECDD3;
  border-left: 3.5px solid #C8102E;
  padding: 5px 8px;
  border-radius: 4px;
  line-height: 1.45;
  word-break: break-word;
}

/* Scenario Mode Cards */
.rp-scenario-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.rp-scenario-card {
  border: 1px solid #E2E8F0;
  border-left: 3.5px solid transparent;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.rp-scenario-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
  transform: translateY(-1px);
}

.rp-scenario-card.active {
  border-color: #FECDD3;
  border-left-color: #C8102E;
  background: #FFF8F8;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.08);
}

.rp-scenario-icon {
  font-size: 0.875rem;
  line-height: 1;
  flex-shrink: 0;
}

.rp-scenario-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.rp-scenario-name {
  font-size: 0.775rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.3;
}

.rp-scenario-card.active .rp-scenario-name {
  color: #C8102E;
}

.rp-scenario-desc {
  font-size: 0.675rem;
  color: #64748B;
  line-height: 1.3;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Difficulty Selector */
.rp-difficulty-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.rp-diff-btn {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 5px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.15s ease;
  min-width: 0;
  box-sizing: border-box;
}

.rp-diff-btn:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.rp-diff-btn.active {
  background: #C8102E;
  border-color: #C8102E;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.35);
}

.rp-diff-btn.active .diff-icon,
.rp-diff-btn.active .diff-name {
  color: #FFFFFF;
}

.rp-diff-btn .diff-icon {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Consolas', monospace;
  color: #475569;
}

.rp-diff-btn .diff-name {
  font-size: 0.685rem;
  font-weight: 600;
  color: #64748B;
  text-align: center;
  white-space: nowrap;
}

/* Middle Column: Chat Card */
.roleplay-chat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.roleplay-chat-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFBFD;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}

.chat-header-persona-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 200px;
}

.chat-persona-avatar-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.chat-persona-avatar-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.chat-status-pulse {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #10B981;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
}

.chat-persona-text-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.chat-persona-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chat-persona-name {
  font-size: 0.925rem;
  font-weight: 700;
  color: #0F172A;
}

.rp-mood-badge {
  font-size: 0.7rem;
  background: #F1F5F9;
  color: #475569;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.chat-scenario-sub {
  font-size: 0.725rem;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

.chat-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rp-round-indicator {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.rp-round-indicator .round-label {
  font-size: 0.65rem;
  color: #94A3B8;
}

.rp-round-indicator .round-counter {
  font-size: 0.8rem;
  font-weight: 700;
  color: #C8102E;
  white-space: nowrap;
}

.btn-rp-end {
  border-color: #FECDD3 !important;
  color: #C8102E !important;
  background: #FFF1F2 !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.btn-rp-end:hover {
  background: #FFE4E6 !important;
}

/* Coach Whisper Hint Strip */
.rp-coach-hint-strip {
  background: #FFFBEB;
  border-bottom: 1px solid #FEF3C7;
  padding: 0.35rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #92400E;
  transition: all 0.3s;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
}

.rp-coach-hint-strip .coach-hint-label {
  font-weight: 700;
  color: #B45309;
  flex-shrink: 0;
}

.rp-coach-hint-strip .coach-hint-text {
  flex: 1;
  line-height: 1.3;
  min-width: 0;
  word-break: break-word;
}

/* Message Stream */
.roleplay-messages-body {
  flex: 1 1 auto !important;
  min-height: 220px !important;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: linear-gradient(180deg, #FAFBFD 0%, #F1F5F9 100%);
  box-sizing: border-box;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.roleplay-messages-body::-webkit-scrollbar {
  width: 6px;
}

.roleplay-messages-body::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}


.roleplay-messages-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 50% 10%, rgba(200, 16, 46, 0.025) 0%, transparent 60%),
                    linear-gradient(to right, rgba(15, 23, 42, 0.015) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(15, 23, 42, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.roleplay-messages-body > * {
  position: relative;
  z-index: 1;
}

.rp-msg-wrap {
  display: flex;
  gap: 8px;
  max-width: 88%;
  animation: fadeInMsg 0.25s ease-out;
}

@keyframes fadeInMsg {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.rp-msg-wrap.customer {
  align-self: flex-start;
}

.rp-msg-wrap.advisor {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.rp-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.725rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.rp-msg-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rp-msg-wrap.customer .rp-msg-avatar {
  background: transparent;
}

.rp-msg-wrap.advisor .rp-msg-avatar {
  background: #C8102E;
  color: #FFFFFF;
}

.rp-msg-content-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rp-msg-wrap.advisor .rp-msg-content-box {
  align-items: flex-end;
}

.rp-msg-sender-name {
  font-size: 0.7rem;
  color: #94A3B8;
  padding: 0 4px;
}

.rp-msg-bubble {
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  font-size: 0.825rem;
  line-height: 1.45;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.rp-msg-wrap.customer .rp-msg-bubble {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #1E293B;
  border-top-left-radius: 2px;
}

.rp-msg-wrap.advisor .rp-msg-bubble {
  background: #C8102E;
  color: #FFFFFF;
  border-top-right-radius: 2px;
}

.rp-msg-bubble p {
  margin: 0;
}

.rp-msg-bubble p + p {
  margin-top: 0.35rem;
}

.btn-msg-tts {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.btn-msg-tts:hover {
  background: #FFF1F2;
  color: #C8102E;
  border-color: #FECDD3;
}

.rp-msg-time {
  font-size: 0.625rem;
  color: #94A3B8;
  padding: 0 4px;
}

/* Quick Inspiration Chips */
.rp-inspiration-bar {
  background: #FFFFFF;
  border-top: 1px solid #F1F5F9;
  padding: 0.35rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.725rem;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}

.rp-inspiration-bar .insp-title {
  color: #64748B;
  font-weight: 600;
  flex-shrink: 0;
}

.insp-chips-scroll {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
  min-width: 0;
  flex: 1;
}

.rp-insp-chip {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 2px 8px;
  font-size: 0.7rem;
  color: #334155;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.rp-insp-chip:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #CBD5E1;
}

/* Input Area */
.roleplay-input-box {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  padding: 0.45rem 0.85rem 0.6rem 0.85rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
}

.input-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-tool-mini {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  font-size: 0.725rem;
  color: #475569;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-tool-mini:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.input-shortcut-hint {
  font-size: 0.68rem;
  color: #94A3B8;
}

.input-textarea-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.rp-chat-textarea {
  flex: 1;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.825rem;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  outline: none;
  min-height: 38px;
  max-height: 55px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rp-chat-textarea:focus {
  border-color: #C8102E;
  box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.1);
}

.rp-send-btn {
  height: 38px;
  padding: 0 1rem !important;
  font-size: 0.825rem !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Right Column: AI Scoring & Diagnostics */
.roleplay-report-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Pending View */
.rp-report-in-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.5rem;
  gap: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  flex: 1;
}

.pending-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFF1F2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.15rem;
}

.pending-icon-circle svg {
  width: 24px;
  height: 24px;
}

.rp-report-in-progress h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.rp-report-in-progress p {
  font-size: 0.725rem;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

.rp-live-dimension-guide {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  box-sizing: border-box;
  min-width: 0;
}

.live-dim-item {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 0.725rem;
}

.dim-bullet {
  font-size: 0.75rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.dim-bullet.red { color: #C8102E; }
.dim-bullet.blue { color: #0284C7; }
.dim-bullet.green { color: #059669; }
.dim-bullet.purple { color: #7C3AED; }

.dim-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.dim-text-wrap strong {
  font-size: 0.78rem;
  color: #1E293B;
}

.dim-text-wrap span {
  font-size: 0.7rem;
  color: #64748B;
  word-break: break-word;
}

/* Completed Evaluated View */
.rp-report-evaluated {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  animation: fadeInMsg 0.3s ease-out;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  flex: 1;
}

.rp-score-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.rp-score-circle-dial {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #10B981;
  background: rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
}

.rp-score-circle-dial .score-number {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
}

.rp-score-circle-dial .score-unit {
  font-size: 0.6rem;
  color: #10B981;
  font-weight: 600;
}

.rp-grade-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.rp-grade-badge {
  font-size: 0.825rem;
  font-weight: 700;
  display: inline-block;
}

.rp-grade-badge.grade-s { color: #10B981; }
.rp-grade-badge.grade-a { color: #38BDF8; }
.rp-grade-badge.grade-b { color: #FBBF24; }
.rp-grade-badge.grade-c { color: #F87171; }

.rp-grade-meta {
  font-size: 0.725rem;
  color: #94A3B8;
  line-height: 1.35;
  word-break: break-word;
}

/* Radar Container */
.rp-radar-container {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.radar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
  gap: 4px;
}

.radar-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1E293B;
}

.radar-legend-tag {
  font-size: 0.68rem;
  color: #64748B;
}

/* Progress Bars */
.rp-dim-bars-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.rp-dim-bar-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rp-dim-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.725rem;
  color: #475569;
}

.rp-dim-bar-track {
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}

.rp-dim-bar-fill {
  height: 100%;
  background: #C8102E;
  border-radius: 3px;
  transition: width 0.6s ease-out;
}

/* Diagnosis Cards */
.rp-diagnosis-sections {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.diagnosis-card {
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  word-break: break-word;
}

.diagnosis-card.highlight-card {
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  color: #166534;
}

.diagnosis-card.improvement-card {
  background: #FEFCE8;
  border: 1px solid #FEF08A;
  color: #854D0E;
}

.diagnosis-card.golden-card {
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  color: #1E40AF;
}

.diagnosis-card.compliance-card {
  background: #FAF5FF;
  border: 1px solid #F3E8FF;
  color: #6B21A8;
}

.diagnosis-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
}

.diagnosis-list {
  margin: 0;
  padding-left: 1.1rem;
}

.diagnosis-list li {
  margin-bottom: 0.2rem;
}

.golden-script-content {
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed #BFDBFE;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-style: italic;
  color: #1E3A8A;
  word-break: break-word;
}

.compliance-verdict-text {
  font-size: 0.76rem;
}

.rp-report-actions {
  display: flex;
  gap: 6px;
  margin-top: 0.35rem;
  box-sizing: border-box;
  width: 100%;
  flex-wrap: wrap;
}

.rp-report-actions button {
  flex: 1 1 120px;
}

/* History Modal Item Card */
.rp-history-item-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: all 0.15s;
}

.rp-history-item-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.rp-hist-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rp-hist-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
}

.rp-hist-sub {
  font-size: 0.75rem;
  color: #64748B;
}

.rp-hist-score {
  font-size: 1.25rem;
  font-weight: 800;
  color: #C8102E;
}

/* ==========================================================================
   AI Video Call Arena & Persona Stage Styles
   ========================================================================== */

.rp-video-call-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #090D16;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInModal 0.3s ease-out;
}

.rp-video-call-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Top Header Bar */
.rp-video-top-bar {
  height: 64px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
  z-index: 20;
}

.rp-video-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rp-video-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.75rem;
  color: #F1F5F9;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.rp-video-timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.8rem;
  color: #EF4444;
  font-weight: 700;
}

.rp-recording-dot {
  width: 8px;
  height: 8px;
  background: #EF4444;
  border-radius: 50%;
  animation: pulseDot 1.2s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

.rp-video-top-center {
  display: flex;
  align-items: center;
}

.rp-video-client-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.8);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.rp-video-client-pill .client-name {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
}

.rp-video-client-pill .client-role {
  color: #94A3B8;
  font-size: 0.75rem;
}

.rp-video-mood-pill {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 1px 7px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}

.rp-video-top-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rp-video-network-quality {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.rp-video-network-quality .net-bar {
  width: 3px;
  background: #10B981;
  border-radius: 1px;
}

.rp-video-network-quality .bar-1 { height: 4px; }
.rp-video-network-quality .bar-2 { height: 8px; }
.rp-video-network-quality .bar-3 { height: 12px; }
.rp-video-network-quality .bar-4 { height: 16px; }

.rp-video-network-quality .net-text {
  font-size: 0.68rem;
  color: #94A3B8;
  margin-left: 4px;
  font-weight: 600;
}

.btn-video-top-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-video-top-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

/* Main Video Stage */
.rp-video-main-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #080D1A;
}

.rp-customer-room-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.citic-stage-watermark {
  position: absolute;
  bottom: 1.5rem;
  right: 1.75rem;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.725rem;
  color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 5;
  letter-spacing: 0.02em;
}

.watermark-emblem {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C8102E;
  display: inline-block;
  box-shadow: 0 0 8px #C8102E;
}

/* AI Persona Dynamic Avatar Stage */
.rp-ai-persona-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  gap: 1.25rem;
}

.rp-speaking-aura-ring,
.rp-speaking-aura-ring-outer {
  display: none !important;
}

.rp-persona-portrait-frame {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.rp-ai-persona-container.speaking .rp-persona-portrait-frame {
  transform: scale(1.03);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 24px rgba(255, 255, 255, 0.2);
}

.rp-persona-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.rp-persona-avatar-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Equalizer Bars on Avatar */
.rp-persona-speech-eq {
  position: absolute;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.rp-persona-speech-eq span {
  width: 3px;
  background: #FFFFFF;
  border-radius: 2px;
  animation: eqJump 0.8s infinite ease-in-out;
}

.rp-persona-speech-eq span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.rp-persona-speech-eq span:nth-child(2) { height: 14px; animation-delay: 0.3s; }
.rp-persona-speech-eq span:nth-child(3) { height: 18px; animation-delay: 0.2s; }
.rp-persona-speech-eq span:nth-child(4) { height: 10px; animation-delay: 0.4s; }
.rp-persona-speech-eq span:nth-child(5) { height: 8px; animation-delay: 0.15s; }

@keyframes eqJump {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.rp-persona-status-box {
  text-align: center;
}

.rp-persona-screen-name {
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.01em;
}

.rp-persona-screen-scenario {
  color: #94A3B8;
  font-size: 0.825rem;
  margin: 0;
  background: rgba(15, 23, 42, 0.6);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Picture-in-Picture Local Camera View */
.rp-local-video-pip {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 220px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background: #0F172A;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 15;
  transition: all 0.2s ease;
}

.rp-local-video-pip:hover {
  border-color: #C8102E;
  transform: scale(1.02);
}

.rp-local-video-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Mirror view */
}

.rp-local-video-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}

.pip-avatar-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #C8102E;
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.35);
}

.pip-avatar-label {
  font-size: 0.725rem;
  color: #94A3B8;
}

.rp-pip-overlay-meta {
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* Floating Teleprompter HUD */
.rp-teleprompter-hud {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 320px;
  max-height: 280px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 15;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

.prompter-hud-header {
  padding: 0.6rem 0.85rem;
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prompter-hud-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #F59E0B;
}

.btn-prompter-toggle {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
}

.prompter-hud-body {
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow-y: auto;
}

.prompter-tip-section .tip-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #F59E0B;
}

.prompter-tip-section .tip-text {
  font-size: 0.775rem;
  color: #E2E8F0;
  line-height: 1.4;
  margin: 3px 0 0 0;
}

.prompter-script-section .tip-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #38BDF8;
}

.prompter-gold-box {
  margin-top: 3px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.75rem;
  color: #E0F2FE;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.15s;
}

.prompter-gold-box:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38BDF8;
}

/* Live Two-Way Subtitles Bar */
.rp-live-subtitles-bar {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 860px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 15;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: fadeInUpSub 0.3s ease-out;
}

@keyframes fadeInUpSub {
  from { opacity: 0; transform: translate(-50%, 15px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.subtitles-speaker-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(200, 16, 46, 0.2);
  border: 1px solid rgba(200, 16, 46, 0.4);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #FECDD3;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.speaker-dot {
  width: 6px;
  height: 6px;
  background: #C8102E;
  border-radius: 50%;
}

.subtitles-content-box {
  flex: 1;
}

.subtitles-text {
  color: #FFFFFF;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Quick Text Drawer */
.rp-video-text-drawer {
  position: absolute;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 860px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(200, 16, 46, 0.4);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  z-index: 16;
}

.video-text-input-wrap {
  display: flex;
  gap: 8px;
}

.video-text-input-wrap input {
  background: rgba(0, 0, 0, 0.4) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Bottom Floating Call Controls Dock */
.rp-video-controls-dock {
  height: 80px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  z-index: 20;
  padding: 0 1rem;
}

/* Primary Push to Talk / Speak Button in Video Dock */
.btn-dock-speak-primary {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  border: 2px solid rgba(254, 202, 202, 0.5);
  border-radius: 14px;
  padding: 6px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #FFFFFF;
  cursor: pointer;
  min-width: 108px;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-dock-speak-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(220, 38, 38, 0.65);
}

/* When customer is speaking, the primary speak button becomes passive listening */
.btn-dock-speak-primary.customer-speaking {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
}

/* When user is actively recording speech */
.btn-dock-speak-primary.recording {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  border-color: #FECDD3 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.85) !important;
  animation: primarySpeakPulse 0.9s infinite alternate;
}

@keyframes primarySpeakPulse {
  from { transform: scale(1); box-shadow: 0 0 12px rgba(239, 68, 68, 0.5); }
  to { transform: scale(1.05); box-shadow: 0 0 24px rgba(239, 68, 68, 0.9); }
}

.speak-primary-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.speak-primary-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.btn-dock-control {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #94A3B8;
  cursor: pointer;
  min-width: 68px;
  transition: all 0.2s;
}

.btn-dock-control:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}

.btn-dock-control.active {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-dock-control.muted {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #F87171;
}

.btn-dock-control.live-audio-speaking {
  background: rgba(220, 38, 38, 0.3) !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.7) !important;
  animation: micPulseLive 0.8s infinite alternate !important;
}

@keyframes micPulseLive {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.dock-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dock-label {
  font-size: 0.68rem;
  font-weight: 600;
}

.btn-dock-hangup {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: none;
  border-radius: 12px;
  padding: 6px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #FFFFFF;
  cursor: pointer;
  min-width: 90px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
  transition: all 0.2s;
}

.btn-dock-hangup:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.55);
}

.hangup-label {
  font-size: 0.68rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .rp-video-top-bar {
    padding: 0 0.85rem;
  }
  .rp-video-client-pill .client-role {
    display: none;
  }
  .rp-local-video-pip {
    top: 0.75rem;
    right: 0.75rem;
    width: 130px;
    height: 90px;
  }
  .rp-teleprompter-hud {
    display: none; /* Hide floating HUD on mobile screen to prevent clutter */
  }
  .rp-live-subtitles-bar {
    width: 94%;
    bottom: 86px;
    padding: 0.5rem 0.75rem;
  }
  .subtitles-text {
    font-size: 0.825rem;
  }
  .rp-video-controls-dock {
    gap: 0.4rem;
    height: 72px;
    padding: 0 0.5rem;
  }
  .btn-dock-control {
    min-width: 50px;
    padding: 4px 6px;
  }
  .btn-dock-hangup {
    min-width: 72px;
    padding: 4px 10px;
  }

  /* Roleplay Mobile Adaptations */
  .roleplay-grid-arena {
    display: flex;
    flex-direction: column;
    height: auto !important;
    max-height: none !important;
    gap: 1rem;
  }
  .roleplay-col {
    width: 100% !important;
  }
  .roleplay-chat-card {
    height: 540px;
  }
  .roleplay-chat-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }
  .chat-header-center-info {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Advisory Workbench Mobile Adaptations */
  .advisory-workbench-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .advisory-script-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
  }
  .advisory-script-toolbar .filter-select {
    max-width: 140px !important;
    min-width: 110px !important;
    flex-shrink: 0 !important;
  }

  /* Map Filter Mobile Adaptations */
  .map-filter-tags-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.25rem;
  }
  .filter-row-label {
    text-align: left !important;
  }

  /* Calendar Mobile Adaptations */
  .upcoming-item-card {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  .upcoming-item-card > div:last-child {
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .roleplay-chat-card {
    height: calc(100vh - 140px) !important;
    min-height: 480px !important;
  }
  .rp-msg-wrap {
    max-width: 98% !important;
  }
  .rp-persona-portrait-frame {
    width: 120px !important;
    height: 120px !important;
  }
}

/* ==========================================================================
   GAME: 客户经理晋升之路 · 展业抉择模拟器 (Career Game Styles)
   ========================================================================== */
#page-game {
  padding: 1.25rem;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - 60px);
}

.game-header-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #312E81 100%);
  color: #FFFFFF;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25), 0 8px 10px -6px rgba(15, 23, 42, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-header-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.25) 0%, rgba(200, 16, 46, 0) 70%);
  pointer-events: none;
}

.game-title-group {
  position: relative;
  z-index: 2;
}

.game-title-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.game-title-tag {
  background: #C8102E;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.game-mode-pill {
  background: rgba(255, 255, 255, 0.15);
  color: #E2E8F0;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.game-main-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.game-sub-title {
  font-size: 0.85rem;
  color: #94A3B8;
  margin: 0.35rem 0 0 0;
  max-width: 650px;
  line-height: 1.4;
}

.game-actions-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.game-btn-toolbar {
  background: rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.game-btn-toolbar:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.game-btn-toolbar.btn-danger-outline {
  border-color: rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
}
.game-btn-toolbar.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #FFFFFF;
}

/* Dashboard Status Board */
.game-dashboard-card {
  background: #FFFFFF;
  border-radius: 14px;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.game-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  align-items: stretch;
}

.player-rank-cell {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 82px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.player-rank-cell:hover {
  border-color: #CBD5E1;
  background: #F1F5F9;
}

.player-rank-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border: 2px solid #FECDD3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 3px 6px rgba(200, 16, 46, 0.08);
  flex-shrink: 0;
}

.player-rank-meta {
  flex: 1;
  min-width: 0;
}

.player-rank-label {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 500;
  white-space: nowrap;
}

.player-rank-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0F172A;
  margin: 2px 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-rank-progress-wrap {
  width: 100%;
  height: 6px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}

.player-rank-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #C8102E, #EF4444);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.game-stat-cell {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 82px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.game-stat-cell:hover {
  border-color: #CBD5E1;
}

.game-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 500;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.game-stat-header > span:first-child {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.game-stat-header .game-stat-sub {
  white-space: nowrap;
  font-size: 0.72rem;
  color: #64748B;
  flex-shrink: 0;
}

.game-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
  line-height: 1.2;
}

.game-stat-value .game-stat-sub {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: normal;
  white-space: nowrap;
}

.game-rest-pill {
  cursor: pointer;
  color: #C8102E !important;
  font-weight: 600 !important;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  padding: 1px 7px;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.game-rest-pill:hover {
  background: #FFE4E6;
  border-color: #FDA4AF;
  transform: translateY(-1px);
}

/* Compliance Risk Meter Custom Style */
.game-stat-cell.risk-cell {
  background: #FFFBEB;
  border-color: #FDE68A;
  transition: all 0.3s ease;
}

.game-stat-cell.risk-cell.danger-level {
  background: #FEF2F2;
  border-color: #FECDD3;
  animation: pulseRisk 1.5s infinite;
}

@keyframes pulseRisk {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.15); }
}

.risk-stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.risk-status-tag {
  white-space: nowrap;
}

.risk-progress-track {
  width: 100%;
  height: 6px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.risk-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease, background 0.4s ease;
}

/* Main Arena Grid */
.game-main-arena {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.25rem;
}

.game-story-stage {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.game-scene-banner {
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  color: #FFFFFF;
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scene-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.scene-turn-tag {
  color: #CBD5E1;
  font-weight: 500;
}

.game-scene-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 700;
  font-size: 0.775rem;
  border: 1px solid #CBD5E1;
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
  user-select: none;
}

.game-scene-back-btn:hover {
  background: #FFF8F8;
  color: #C8102E;
  border-color: #FECDD3;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(200, 16, 46, 0.18);
}

.game-scene-back-btn svg {
  color: #475569;
  transition: color 0.2s ease;
}

.game-scene-back-btn:hover svg {
  color: #C8102E;
}

.game-story-content {
  padding: 1.5rem;
  flex: 1;
}

.game-scenario-title-box {
  margin-bottom: 1.25rem;
}

.scenario-chapter-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #C8102E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.scenario-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  line-height: 1.35;
}

.game-npc-dialogue-wrap {
  display: flex;
  gap: 1rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.npc-avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 72px;
  flex-shrink: 0;
}

.npc-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.npc-name-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
  text-align: center;
  white-space: nowrap;
}

.npc-role-tag {
  font-size: 0.65rem;
  color: #64748B;
  text-align: center;
}

.npc-dialogue-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.npc-dialogue-bubble {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  color: #1E293B;
  line-height: 1.6;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.npc-dialogue-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #E2E8F0;
}

.npc-dialogue-bubble::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #FFFFFF;
}

.scenario-context-text {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  background: #FFF;
  border-left: 3px solid #C8102E;
  padding: 0.65rem 1rem;
  border-radius: 0 8px 8px 0;
}

/* Choices Grid */
.game-choices-section {
  margin-top: 1rem;
}

.game-choices-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.game-choices-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.game-choice-btn {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.game-choice-btn:hover {
  border-color: #C8102E;
  background: #FFF8F8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(200, 16, 46, 0.08);
}

.choice-key-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #334155;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.game-choice-btn:hover .choice-key-badge {
  background: #C8102E;
  color: #FFFFFF;
}

.choice-main-content {
  flex: 1;
}

.choice-tag-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.choice-style-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
}

.tag-compliance {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.tag-grey {
  background: #FFFBEB;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.tag-illegal {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECDD3;
}

.tag-passive {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #E2E8F0;
}

.choice-desc-text {
  font-size: 0.92rem;
  color: #1E293B;
  line-height: 1.45;
  font-weight: 500;
}

.choice-consequence-preview {
  font-size: 0.75rem;
  color: #64748B;
  margin-top: 0.35rem;
}

/* Feedback Box (After Choice) */
.game-feedback-container {
  margin-top: 1.25rem;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  padding: 1.25rem;
  animation: slideFadeUp 0.3s ease-out;
}

@keyframes slideFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.feedback-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.feedback-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.feedback-narrative {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.feedback-deltas-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.stat-delta-chip {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.delta-pos {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.delta-neg {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECDD3;
}

.delta-warn {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FDE68A;
}

.delta-info {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.feedback-next-btn {
  background: #C8102E;
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 10px rgba(200, 16, 46, 0.25);
  transition: all 0.2s ease;
}

.feedback-next-btn:hover {
  background: #A80D26;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(200, 16, 46, 0.35);
}

/* Sidebar History & Log */
.game-history-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.game-panel-card {
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  padding: 1.25rem;
}

.game-panel-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 0.5rem;
}

.game-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.game-timeline-item {
  display: flex;
  gap: 0.65rem;
  position: relative;
}

.game-timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: -10px;
  width: 2px;
  background: #E2E8F0;
}

.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 2px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  flex-shrink: 0;
  z-index: 2;
}

.timeline-dot.active {
  background: #C8102E;
  border-color: #FECDD3;
  color: #FFFFFF;
}

.timeline-content {
  flex: 1;
}

.timeline-step-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 2px;
}

.timeline-step-desc {
  font-size: 0.72rem;
  color: #64748B;
  line-height: 1.35;
}

/* Modals & Endings Screens */
.ending-modal-body {
  text-align: center;
  padding: 1.5rem 1rem;
}

.ending-badge-large {
  font-size: 4.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.ending-title-main {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.ending-title-main.chief-win {
  background: linear-gradient(135deg, #B45309 0%, #D97706 50%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ending-title-main.jail-loss {
  color: #DC2626;
  text-shadow: 0 2px 10px rgba(220, 38, 38, 0.2);
}

.ending-subtitle {
  font-size: 0.95rem;
  color: #475569;
  max-width: 520px;
  margin: 0 auto 1.5rem auto;
  line-height: 1.6;
}

.ending-stats-summary-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.ending-stat-item-label {
  font-size: 0.72rem;
  color: #64748B;
  margin-bottom: 2px;
}

.ending-stat-item-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F172A;
}

/* Police siren glow for jail ending */
.jail-siren-alert {
  background: linear-gradient(90deg, #DC2626, #1D4ED8, #DC2626);
  background-size: 200% 200%;
  animation: sirenFlash 1.5s ease infinite;
  color: #FFFFFF;
  padding: 0.5rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

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

/* Chief crown celebration box */
.chief-coronation-alert {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid #F59E0B;
  color: #92400E;
  padding: 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Achievements & Gallery Grid */
.achievements-modal-grid, .endings-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  max-height: 480px;
  overflow-y: auto;
  padding: 0.5rem;
}

.achievement-card-item, .gallery-ending-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  transition: all 0.2s ease;
}

.achievement-card-item.unlocked, .gallery-ending-card.unlocked {
  border-color: #FCD34D;
  background: #FFFDF5;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.08);
}

.achievement-card-item.locked, .gallery-ending-card.locked {
  opacity: 0.6;
  background: #F8FAFC;
}

.ach-icon-frame {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.achievement-card-item.unlocked .ach-icon-frame {
  background: #FEF3C7;
}

.ach-meta-box {
  flex: 1;
}

.ach-title-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
}

.ach-desc-text {
  font-size: 0.72rem;
  color: #64748B;
  line-height: 1.35;
  margin-top: 2px;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .game-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .game-main-arena {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #page-game {
    padding: 0.75rem;
  }
  .game-header-banner {
    padding: 1.1rem 1.25rem;
  }
  .game-main-title {
    font-size: 1.25rem;
  }
  .game-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .game-npc-dialogue-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .npc-avatar-box {
    flex-direction: row;
    width: auto;
  }
  .npc-dialogue-bubble::before, .npc-dialogue-bubble::after {
    display: none;
  }
  .ending-stats-summary-card {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   GAME V2: Knowledge Hub, Stamina, and Follow-up Question Styles
   ========================================================================== */
/* Knowledge Hub Modal Styles */
.study-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  max-height: 520px;
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
}

.study-course-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.study-course-card:hover {
  border-color: #F59E0B;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12);
  transform: translateY(-2px);
}

.study-course-card.studied {
  border-color: #10B981;
  background: #F0FDF4;
}

.course-card-top {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.course-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.study-course-card.studied .course-icon-badge {
  background: #D1FAE5;
  border-color: #A7F3D0;
}

.course-title-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.35;
}

.course-category-tag {
  font-size: 0.68rem;
  color: #D97706;
  font-weight: 600;
  margin-top: 2px;
}

.course-summary-text {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 0.85rem;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #F1F5F9;
}

.course-keypoints-box {
  background: #FFFFFF;
  border: 1px dashed #CBD5E1;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-size: 0.75rem;
  color: #334155;
  margin-bottom: 0.85rem;
  line-height: 1.45;
}

.course-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #F1F5F9;
  padding-top: 0.65rem;
}

.course-status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.pill-not-studied {
  background: #F1F5F9;
  color: #64748B;
}

.pill-studied {
  background: #D1FAE5;
  color: #065F46;
}

/* Follow-up Question Container */
.game-followup-stage-wrap {
  margin-top: 1.25rem;
  background: #FFFDF7;
  border: 2px solid #FDE68A;
  border-radius: 14px;
  padding: 1.25rem;
  animation: slideFadeUp 0.35s ease-out;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.08);
}

.followup-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed #FDE68A;
}

.followup-stage-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #FDE68A;
}

.followup-alert-chip {
  font-size: 0.72rem;
  color: #B45309;
  font-weight: 600;
}

.followup-npc-bubble {
  background: #FFFFFF;
  border: 1.5px solid #FDE68A;
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  color: #1E293B;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.followup-choices-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Stamina Energy Bar in Dashboard */
.stamina-progress-track {
  width: 100%;
  height: 7px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.stamina-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #10B981);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ==========================================================================
   GAME V3: 2D Pixel-Art RPG, KYC Due Diligence, Financial Math & Allocation
   ========================================================================== */
.pixel-view-toggle-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #0F172A;
  border: 2px solid #1E293B;
  border-radius: 10px;
  padding: 0.4rem;
  margin-bottom: 1rem;
}

.pixel-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #94A3B8;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pixel-toggle-btn.active {
  background: #C8102E;
  color: #FFFFFF;
  border-color: #EF4444;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.4);
}

/* 2D Pixel Map Container - Polished Retro Cyber-Console */
.pixel-map-card {
  background: linear-gradient(180deg, #090D16 0%, #030712 100%);
  border: 2.5px solid #334155;
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.pixel-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  color: #E2E8F0;
  font-family: monospace, sans-serif;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pixel-map-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: 0.5px;
}

.pixel-map-title-icon {
  font-size: 1.15rem;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}

.pixel-coord-chip {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #38BDF8;
  color: #38BDF8;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pixel-canvas-wrap {
  position: relative;
  width: 100%;
  height: 480px;
  background: #181116;
  border: 3px solid #3E2723;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.7);
}

#pixelMapCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
}

.pixel-map-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed #1E293B;
  gap: 1rem;
  flex-wrap: wrap;
}

.pixel-hud-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.pixel-keyboard-hint {
  font-size: 0.78rem;
  color: #94A3B8;
  font-family: monospace, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pixel-key-cap {
  background: #1E293B;
  border: 1px solid #475569;
  border-bottom: 2px solid #0F172A;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #F8FAFC;
}

.pixel-zone-shortcut-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.zone-shortcut-pill {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid #334155;
  border-radius: 6px;
  color: #CBD5E1;
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.zone-shortcut-pill:hover {
  background: #C8102E;
  border-color: #EF4444;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.pixel-controller-panel {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Virtual D-Pad Controller */
.pixel-dpad-wrap {
  display: grid;
  grid-template-columns: 36px 36px 36px;
  grid-template-rows: 36px 36px;
  gap: 3px;
  align-items: center;
  justify-content: center;
}

.dpad-btn {
  background: #1E293B;
  border: 1.5px solid #475569;
  border-bottom: 3px solid #0F172A;
  border-radius: 6px;
  color: #F8FAFC;
  font-size: 0.85rem;
  font-weight: 700;
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.1s;
}

.dpad-btn:active {
  background: #C8102E;
  border-color: #EF4444;
  border-bottom-width: 1px;
  transform: translateY(2px);
}

.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }

.pixel-action-btn {
  background: linear-gradient(135deg, #C8102E 0%, #991B1B 100%);
  border: 2px solid #EF4444;
  border-radius: 10px;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0 1.1rem;
  height: 75px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.4);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pixel-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(200, 16, 46, 0.6);
}

.pixel-action-btn:active {
  transform: translateY(1px);
}

/* Interactive KYC Due Diligence Box */
.pixel-kyc-box {
  background: #0F172A;
  border: 2px solid #0284C7;
  border-radius: 12px;
  padding: 1.1rem;
  margin-bottom: 1.25rem;
  color: #F8FAFC;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2);
}

.pixel-kyc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #334155;
}

.pixel-kyc-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #38BDF8;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.kyc-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.kyc-check-item {
  background: #1E293B;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kyc-check-item:hover {
  border-color: #38BDF8;
  background: #0B1A30;
}

.kyc-check-item.revealed {
  border-color: #10B981;
  background: #064E3B;
  color: #A7F3D0;
}

.kyc-check-label {
  font-weight: 700;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}

.kyc-check-desc {
  font-size: 0.72rem;
  color: #94A3B8;
}

.kyc-check-item.revealed .kyc-check-desc {
  color: #E2E8F0;
}

/* Financial Math & Quantitative Card */
.pixel-math-card {
  background: #1E1B4B;
  border: 2px solid #6366F1;
  border-radius: 12px;
  padding: 1.1rem;
  margin-bottom: 1.25rem;
  color: #EEF2FF;
}

.pixel-math-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #4F46E5;
}

.pixel-math-formula-box {
  background: #0F0E2A;
  border: 1px solid #4338CA;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: monospace, sans-serif;
  font-size: 0.85rem;
  color: #A5B4FC;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.math-calc-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.math-option-btn {
  background: #312E81;
  border: 1.5px solid #4F46E5;
  border-radius: 8px;
  padding: 0.75rem;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.math-option-btn:hover {
  background: #4338CA;
  border-color: #818CF8;
  transform: translateY(-1px);
}

/* Asset Allocation Workbench Card */
.pixel-alloc-card {
  background: #18181B;
  border: 2px solid #F59E0B;
  border-radius: 12px;
  padding: 1.1rem;
  margin-bottom: 1.25rem;
  color: #FAFAFA;
}

.pixel-alloc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #71717A;
}

.alloc-sliders-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.alloc-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
}

.alloc-slider-name {
  width: 140px;
  flex-shrink: 0;
  font-weight: 600;
  color: #E4E4E7;
}

.alloc-slider-input {
  flex: 1;
  accent-color: #F59E0B;
  height: 6px;
  cursor: pointer;
}

.alloc-slider-val {
  width: 50px;
  text-align: right;
  font-weight: 700;
  color: #FDE68A;
  font-family: monospace;
}

.alloc-metrics-dashboard {
  background: #09090B;
  border: 1px solid #27272A;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

.alloc-metric-item .label {
  font-size: 0.72rem;
  color: #A1A1AA;
}

.alloc-metric-item .val {
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 2px;
  font-family: monospace;
}

/* ==========================================================================
   AI Roleplay Device & Readiness Guidance Modal Styles (听筒与视频设备指引)
   ========================================================================== */
.rp-device-guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.rp-device-guide-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rpGuidePop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rpGuidePop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.rp-device-guide-header {
  padding: 1.25rem 1.5rem 1rem 1.5rem;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.rp-guide-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #C8102E;
  background: #FEF2F2;
  border: 1px solid #FECDD3;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}

.rp-guide-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 0.25rem 0;
}

.rp-guide-subtitle {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

.rp-guide-close-btn {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.rp-guide-close-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.rp-device-guide-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 3-Row Permission Guide List */
.rp-device-guide-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.rp-guide-perm-row {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  transition: all 0.2s ease;
}

.rp-guide-perm-row:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.rp-guide-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-guide-icon-wrap.icon-mic {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}

.rp-guide-icon-wrap.icon-audio {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
}

.rp-guide-icon-wrap.icon-video {
  background: #FEF2F2;
  border: 1px solid #FECDD3;
}

.rp-guide-perm-meta {
  flex: 1;
  min-width: 0;
}

.rp-guide-perm-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 3px;
}

.rp-guide-perm-tag-step {
  font-size: 0.68rem;
  color: #64748B;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rp-guide-perm-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
}

.rp-guide-perm-desc {
  font-size: 0.76rem;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

.rp-guide-perm-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.rp-perm-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

.rp-perm-tag.perm-pending {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #475569;
}

.rp-perm-tag.perm-granted {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #059669;
}

.rp-perm-tag.perm-denied {
  background: #FEF2F2;
  border: 1px solid #FECDD3;
  color: #DC2626;
}

.btn-sound-test-pill {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  color: #B45309;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-sound-test-pill:hover {
  background: #FEF3C7;
  transform: translateY(-1px);
}

@media (max-width: 540px) {
  .rp-guide-perm-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .rp-guide-perm-action {
    align-self: flex-end;
  }
}

.rp-guide-preview-card {
  background: #FFFDF7;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.rp-guide-cust-avatar {
  flex-shrink: 0;
}

.rp-guide-preview-meta {
  flex: 1;
  min-width: 0;
}

.rp-guide-cust-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2px;
}

.rp-guide-cust-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
}

.rp-guide-cust-tag {
  font-size: 0.72rem;
  color: #92400E;
  background: #FEF3C7;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.rp-guide-sc-text {
  font-size: 0.75rem;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-divider {
  margin: 0 4px;
  color: #CBD5E1;
}

.prod-inline-name {
  color: #C8102E;
  font-weight: 600;
}

.rp-device-guide-footer {
  padding: 1rem 1.5rem 1.25rem 1.5rem;
  background: #F8FAFC;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.btn-rp-skip-link {
  background: none;
  border: none;
  color: #64748B;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s;
}

.btn-rp-skip-link:hover {
  color: #0F172A;
  text-decoration: underline;
}

.btn-rp-start-comm {
  background: linear-gradient(135deg, #C8102E 0%, #991B1B 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 0.65rem 1.5rem !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.35) !important;
  transition: all 0.25s ease !important;
}

.btn-rp-start-comm:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(200, 16, 46, 0.5) !important;
}

/* Local File (file://) Protocol Tip Bar */
.rp-file-notice-bar {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
  color: #E2E8F0;
  padding: 9px 20px;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}
.rp-file-notice-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}
.rp-file-notice-text {
  flex: 1;
  color: #CBD5E1;
  line-height: 1.45;
}
.rp-file-notice-text strong {
  color: #38BDF8;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}
.btn-file-notice-dismiss {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-file-notice-dismiss:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}







/* Map workbench: compact controls, equal panels, responsive workspace. */
#page-events .map-workbench-container { gap: 12px; }
#page-events .map-stats-header-card {
  padding: 12px 16px;
  gap: 8px;
  box-shadow: none;
  border-radius: 12px;
}
#page-events .map-stat-num { font-size: 1.2rem; }
#page-events .map-stat-label { font-size: .72rem; }
#page-events .map-top-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.8fr);
  gap: 12px;
  align-items: stretch;
}
#page-events .map-location-card,
#page-events .map-filters-card { padding: 14px; border-radius: 12px; box-shadow: none; min-width: 0; }
#page-events .location-top-row { gap: 10px; align-items: center; margin: 0 0 12px; }
#page-events .location-title-group { min-width: 0; gap: 6px; }
#page-events .location-current-name { font-size: .85rem; line-height: 1.5; }
#page-events .btn-gps-trigger { padding: 7px 10px; white-space: nowrap; flex-shrink: 0; border-radius: 8px; }
#page-events .radar-location-status:empty { display: none; }
#page-events .radar-location-status { margin: 0 0 10px; }
#page-events .map-hubs-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
#page-events .map-hub-pill { font-size: .72rem; padding: 5px 8px; border-radius: 6px; }
#page-events .map-search-row { gap: 8px; margin-bottom: 8px; }
#page-events .map-search-box { min-width: 0; }
#page-events .map-filter-tags-row { gap: 8px; margin-top: 7px; }
#page-events .filter-row-label { font-size: .72rem; min-width: 34px; }
#page-events .filter-buttons-group { display: flex; flex-wrap: wrap; gap: 5px; }
#page-events .map-filter-btn { padding: 4px 8px; font-size: .72rem; line-height: 1.4; }
#page-events .map-level-arena-grid {
  grid-template-columns: minmax(285px, 340px) minmax(0, 1fr);
  gap: 12px;
  height: clamp(430px, calc(100dvh - 310px), 740px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0;
  overflow: hidden;
}
#page-events .map-sites-list-pane,
#page-events .map-canvas-pane {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 12px;
  box-shadow: none;
  min-width: 0;
}
#page-events .map-sites-scroll-list { height: auto; padding: 10px; gap: 10px; }
#page-events .site-card { margin-bottom: 0 !important; border: 1px solid #E2E8F0; border-left-width: 3px; border-radius: 8px; padding: 12px; }
#page-events .sites-list-header { height: 46px; padding: 12px; background: #FFFFFF; }
#page-events .map-canvas-top-bar { inset: 12px 12px auto auto; width: auto; justify-content: flex-end; }
#page-events .map-zoom-actions { gap: 0; border: 1px solid #E2E8F0; border-radius: 9px; background: #FFFFFF; box-shadow: 0 2px 12px #0F172A1A; overflow: hidden; }
#page-events .map-tool-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  justify-content: center;
  border: 0;
  border-right: 1px solid #E2E8F0;
  border-radius: 0;
  color: #334155;
  background: #FFFFFF;
  backdrop-filter: none;
  font-size: .82rem;
  white-space: nowrap;
}
#page-events .map-tool-btn:last-child { border-right: 0; }
#page-events .map-tool-btn:hover { background: #F1F5F9; color: #C8102E; }
#page-events .map-floating-legend {
  left: 12px; bottom: 12px; right: 12px;
  width: fit-content;
  max-width: calc(100% - 24px);
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px 10px;
  padding: 7px 9px;
  background: #FFFFFFF2;
  color: #475569;
  border: 1px solid #E2E8F0;
  box-shadow: none;
  font-size: .65rem;
}
@media (max-width: 1100px) {
  #page-events .map-top-filter-toolbar { grid-template-columns: 1fr; }
  #page-events .map-hubs-pill-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  #page-events .map-hub-pill { flex-shrink: 0; }
  #page-events .map-level-arena-grid { grid-template-columns: minmax(265px, 310px) minmax(0, 1fr); }
}
@media (max-width: 768px) {
  #page-events .map-stats-header-card { grid-template-columns: repeat(3, 1fr) !important; padding: 10px !important; }
  #page-events .location-top-row { flex-direction: row !important; align-items: center !important; }
  #page-events .map-location-card, #page-events .map-filters-card { padding: 12px; }
  #page-events .map-search-row { flex-direction: row !important; flex-wrap: wrap; }
  #page-events .map-search-box { flex: 1 1 100%; }
  #page-events .btn-sync-public { flex: 1; justify-content: center; }
  #page-events .map-level-arena-grid { grid-template-columns: 1fr !important; height: clamp(380px, 62dvh, 620px) !important; min-height: 0 !important; }
  #page-events .map-level-arena-grid.mobile-view-map .map-canvas-pane,
  #page-events .map-level-arena-grid.mobile-view-list .map-sites-list-pane { height: 100% !important; min-height: 0 !important; max-height: none !important; }
  #page-events .map-mobile-view-switcher { position: static !important; margin: 0 !important; box-shadow: none !important; }
}

#page-events .map-city-selector, #page-events .map-more-filters { font-size: .75rem; }
#page-events details > summary { cursor: pointer; color: #475569; padding: 5px 0; }
#page-events .map-more-filters summary span { margin-left: 8px; color: #94A3B8; font-size: .7rem; }
#page-events .map-city-selector .map-hubs-pill-row { margin-top: 8px; }
#page-events .map-location-card, #page-events .map-filters-card { align-self: start; }
#page-events .map-top-filter-toolbar { align-items: start; }
#page-events .map-level-arena-grid { height: clamp(430px, calc(100dvh - 240px), 820px) !important; }
@media (max-width: 768px) {
  #page-events .map-level-arena-grid { height: clamp(380px, 62dvh, 620px) !important; }
  #page-events .map-stat-col { padding: 2px !important; }
  #page-events .map-stat-num { font-size: 1.05rem !important; }
  #page-events .map-stats-header-card { gap: 6px !important; }
}

/* Compact location row; full names remain in the title and live announcement. */
#page-events .map-location-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-content: start; align-items: center; gap: 8px; padding: 12px; }
#page-events .location-top-row { display: contents; }
#page-events .location-title-group { min-width: 0; }
#page-events .location-current-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .85rem; }
#page-events .location-title-group svg { flex-shrink: 0; }
#page-events .btn-gps-trigger { padding: 5px 8px; }
#page-events .map-city-selector summary { white-space: nowrap; cursor: pointer; color: #64748b; }
#page-events .map-city-selector[open] .map-hubs-pill-row { position: absolute; top: calc(100% - 4px); left: 0; right: 0; z-index: 30; padding: 12px; margin: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 6px 18px #0f172a18; }
#page-events .radar-location-status { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: .75rem; overflow-wrap: anywhere; }
#page-events .radar-location-status[data-state="success"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Primary resource categories, keyboard accessible and horizontally scrollable on phones. */
#page-events .radar-category-nav { display:flex;gap:8px;overflow-x:auto;padding:8px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-shrink:0; }
#page-events .radar-category-btn { flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border:0;border-radius:8px;background:transparent;color:#475569;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap; }
#page-events .radar-category-btn:hover { background:#f8fafc;color:#c8102e; }
#page-events .radar-category-btn.active { background:#fff1f2;color:#b80b29; }
#page-events .radar-category-btn:focus-visible { outline:2px solid #c8102e;outline-offset:-2px; }
#page-events .radar-category-count { min-width:22px;padding:2px 6px;border-radius:12px;background:#f1f5f9;color:#64748b;font-size:.72rem; }
#page-events .radar-category-btn.active .radar-category-count { background:#ffe4e6;color:#b80b29; }
@media(max-width:768px){#page-events .radar-category-nav{gap:4px;}#page-events .radar-category-btn{flex:0 0 auto;padding:10px 12px;font-size:.8rem;}}

/* Compact map result tools. */
.radar-compact-toolbar{display:none !important}
.radar-more-menu{position:relative;flex-shrink:0}
.radar-more-menu summary{cursor:pointer;list-style:none;padding:3px 8px;font-size:0.75rem;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;transition:all 0.15s ease}
.radar-more-menu summary:hover{background:#f1f5f9;color:#1e293b}
.radar-more-menu summary::-webkit-details-marker{display:none}
.radar-more-menu[open]>div{position:absolute;right:0;top:calc(100% + 4px);z-index:30;width:142px;padding:4px;background:white;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 14px #0f172a15}
.radar-more-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;font-size:0.78rem;color:#334155;font:inherit;cursor:pointer;border-radius:4px}
.radar-more-menu button:hover{background:#f1f5f9}
.radar-map-credit{font-size:10px;color:#94a3b8;padding:3px 12px;align-self:flex-end}
.city-public-events>summary{display:flex;align-items:center;gap:6px;cursor:pointer;flex-wrap:wrap;flex-shrink:0}
#page-events .city-public-events[open]{display:flex;flex-direction:column;flex:1 0 auto;min-height:0}
#page-events .city-public-events[open]:only-child{flex:1 1 auto;margin-bottom:0 !important}
#page-events .city-public-events[open]>div{flex:1 1 auto;min-height:0}
#page-events .city-public-events[open]:only-child>div{max-height:none !important}

/* Location belongs to the map, alongside its controls. */
#page-events .map-top-filter-toolbar{grid-template-columns:minmax(0,1fr)}
#page-events .map-canvas-pane{position:relative;isolation:isolate;z-index:1}
#page-events .map-location-overlay{position:absolute;top:12px;left:12px;z-index:20;width:min(410px,calc(100% - 144px));padding:8px 10px;border-radius:9px;box-shadow:0 2px 8px #0f172a12;background:#fff;gap:6px}
#page-events .map-location-overlay .location-current-name{font-size:.78rem}
#page-events .map-location-overlay .btn-gps-trigger{font-size:.72rem;padding:4px 6px}
#page-events .map-location-overlay .map-city-selector{font-size:.72rem}
#page-events .map-location-overlay .map-city-selector[open] .map-hubs-pill-row{max-height:220px;overflow:auto;flex-wrap:wrap}
@media(max-width:768px){
 #page-events .map-location-overlay{top:8px;left:8px;width:calc(100% - 82px);padding:7px 8px;grid-template-columns:minmax(0,1fr) auto auto}
 #page-events .map-location-overlay .location-title-group svg{width:13px;height:13px}
 #page-events .map-location-overlay .location-current-name{font-size:.72rem}
 #page-events .map-canvas-top-bar{top:60px;right:8px}
}

/* ==========================================================================
   3D Cube Spinner (From Uiverse.io by bociKond) - Radar Loading Animation
   ========================================================================== */
.radar-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1rem 3rem;
  perspective: 800px;
}

.radar-loading-text {
  margin-top: 2.2rem;
  font-size: 0.85rem;
  color: #64748B;
  letter-spacing: 0.5px;
  text-align: center;
}

.spinner {
  position: relative;
  width: 70.4px;
  height: 70.4px;
  --clr: var(--radar-spinner-clr, rgb(247, 197, 159));
  --clr-alpha: var(--radar-spinner-clr-alpha, rgba(247, 197, 159, 0.15));
  animation: spinner 1.6s infinite ease;
  transform-style: preserve-3d;
}

.spinner > div {
  background-color: var(--clr-alpha);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 3.5px solid var(--clr);
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(247, 197, 159, 0.2);
}

.spinner div:nth-of-type(1) {
  transform: translateZ(-35.2px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
  transform: translateZ(35.2px);
}

@keyframes spinner {
  0% {
    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }

  50% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }

  100% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
}

/* Career game: compact task flow and responsive controls. */
#page-game .game-header-banner { padding: 20px 24px; gap: 16px; align-items: center; }
#page-game .game-main-title { font-size: 1.45rem; margin: 0; }
#page-game .game-sub-title { margin: 6px 0 0; max-width: none; }
#page-game .game-actions-bar { flex-wrap: nowrap; align-items: center; }
.game-flow-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 4px; color:#475569; font-size:.85rem; }
.game-tools { position:relative; }
.game-tools summary { cursor:pointer; list-style:none; }
.game-tools-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:30; min-width:155px; padding:6px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; box-shadow:0 8px 24px #0f172a20; }
.game-tools-menu button { display:block; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:6px; background:none; color:#334155; cursor:pointer; }
.game-tools-menu button:hover { background:#f1f5f9; }
#page-game .game-dashboard-card { padding:16px; margin-bottom:16px; }
#page-game .game-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#page-game .game-stat-value { font-size:1.15rem; }
#page-game .game-main-arena { grid-template-columns:minmax(0,1fr); }
#page-game .game-history-sidebar { display:none; }
#page-game .game-story-content { padding:20px; }
#page-game .pixel-map-header { flex-wrap:wrap; gap:8px; }
#page-game .pixel-keyboard-hint { display:none; }
#page-game .pixel-zone-shortcut-bar { margin-top:0; }
#page-game .game-rest-pill { border:1px solid #e2e8f0; border-radius:6px; padding:3px 8px; background:#fff; }
#page-game .kyc-check-item { width:100%; text-align:left; color:inherit; font:inherit; }
#page-game .pixel-alloc-card summary { padding:12px 16px; cursor:pointer; color:#fde68a; font-weight:600; }
#page-game .pixel-alloc-header { display:none; }
#page-game .game-simulation-note { margin:0 16px 12px; color:#cbd5e1; font-size:.78rem; }
#page-game .game-choice-btn:focus-visible, #page-game button:focus-visible, #page-game summary:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
#page-game button:disabled { opacity:.5; cursor:default; }
@media(max-width:768px) {
  #page-game .game-header-banner { padding:16px; flex-direction:column; align-items:stretch; }
  #page-game .game-actions-bar { gap:8px; }
  #page-game .game-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-game .game-story-content { padding:14px; }
  #page-game .game-npc-dialogue-wrap { flex-direction:column; }
  #page-game .npc-avatar-box { width:auto; }
  #page-game .game-scene-banner { flex-wrap:wrap; gap:8px; }
  #page-game .pixel-map-controls-row { flex-direction:column; gap:12px; align-items:stretch; }
}

#page-game .player-rank-name { white-space:normal; overflow:visible; text-overflow:clip; font-size:.9rem; }
#page-game .player-rank-meta { min-width:0; }

#page-game .game-learning-point { margin:12px 0 0; padding:12px; border-left:3px solid #C8102E; background:#fff; color:#475569; font-size:.85rem; }
#page-game .pixel-zone-shortcut-bar .zone-shortcut-pill { padding:8px 12px; min-height:36px; }

/* Pixel room conversations share the exploration scene's visual language. */
#page-game .game-story-stage { background:#171E28; border:3px solid #425267; border-radius:14px; box-shadow:0 6px 0 #0b1018; }
#page-game .game-scene-banner { background:#0C131D; border-bottom:2px solid #425267; color:#E9DED0; }
#page-game .game-scene-back-btn { color:#FDE68A; background:#273443; border-color:#526277; }
#page-game .game-story-content { padding:18px; }
#page-game .scenario-heading { color:#F1E8D8; font-size:1.12rem; }
#page-game .scenario-chapter-label { color:#AFC1D2; }
#page-game .game-scenario-title-box { margin-bottom:12px; }
#page-game .pixel-room-dialogue { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:24px; align-items:center; padding:16px; background:#885444; border:3px solid #B87D64; border-radius:4px; margin-bottom:16px; }
#page-game .pixel-room-speaker { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; color:#F9E5BE; }
#page-game #gameNpcName { font-size:1rem; font-weight:700; }
#page-game #gameNpcRole { font-size:.78rem; color:#ECD8C7; }
#page-game .pixel-room-dialogue .npc-dialogue-bubble { min-height:110px; padding:18px; background:#F9EFDE; border:3px solid #543A35; border-radius:3px; color:#302D33; line-height:1.7; box-shadow:4px 4px 0 #4f352d; font-size:1rem; }
#page-game .pixel-room-dialogue .npc-dialogue-bubble::before { display:none; }
#page-game .pixel-room-dialogue .npc-dialogue-bubble::after { content:''; display:block; position:absolute; top:35px; left:auto; right:-14px; width:20px; height:20px; background:#F9EFDE; border:0; border-top:3px solid #543A35; border-right:3px solid #543A35; transform:rotate(45deg); }
#page-game .pixel-room-npc { min-width:0; background:#C9B29B; border:3px solid #543A35; box-shadow:4px 4px 0 #4f352d; }
#page-game #gameRoomCanvas { display:block; width:100%; height:auto; image-rendering:pixelated; }
#page-game .pixel-room-step { font-size:.78rem; margin-top:12px; color:#F5DBAB; }
#page-game .game-choices-title, #page-game .followup-header-bar { color:#E8D9C3; }
#page-game .game-choice-btn { background:#253340; border:2px solid #64768A; border-radius:4px; color:#F1E8D8; padding:13px 15px; min-height:56px; box-shadow:0 3px 0 #0c131d; }
#page-game .game-choice-btn:hover { background:#35495B; border-color:#FDE68A; transform:none; }
#page-game .choice-desc-text { color:#F1E8D8; line-height:1.6; }
#page-game .choice-key-badge { background:#815344; color:#FDE68A; border-radius:2px; }
#page-game .game-choices-grid, #page-game .followup-choices-grid { gap:10px; }
#page-game .game-followup-stage-wrap { background:none; border:0; padding:0; box-shadow:none; margin:0; }
#page-game #gameFollowUpSpeech { display:none; }
#page-game .followup-header-bar { display:none; }
#page-game .game-feedback-container { background:#EDE2CF; border:3px solid #8D6A4A; border-radius:4px; padding:16px; margin-top:12px; }
#page-game .pixel-room-clues { margin-top:18px; border-top:1px solid #526277; padding-top:14px; }
#page-game .pixel-room-clues > summary { color:#AFC1D2; cursor:pointer; font-size:.85rem; }
#page-game .pixel-room-clues .scenario-context-text { color:#D7E1EA; background:#253340; border-left-color:#B87D64; margin-top:14px; }
#page-game .pixel-room-clues .scenario-context-text strong { color:#FDE68A; }
@media(max-width:768px) {
  #page-game .game-story-content { padding:12px; }
  #page-game .pixel-room-dialogue { grid-template-columns:minmax(0,1fr) 110px; gap:12px; padding:10px; }
  #page-game .pixel-room-dialogue .npc-dialogue-bubble { padding:10px; font-size:.86rem; min-height:100px; }
  #page-game .pixel-room-dialogue .npc-dialogue-bubble::after { width:12px; height:12px; right:-10px; }
  #page-game .game-choice-btn { padding:10px; }
}
/* ==========================================================================
   AI Roleplay Workbench (#page-roleplay): Unified 3-Column CITIC Design System
   ========================================================================== */
#page-roleplay .roleplay-grid-arena {
  grid-template-columns: 272px minmax(0, 1fr) 320px;
  gap: 14px;
}
#page-roleplay .roleplay-grid-arena.report-collapsed {
  grid-template-columns: 272px minmax(0, 1fr) 0px !important;
  gap: 14px;
}
@media (min-width: 769px) and (max-width: 1180px) {
  #page-roleplay .roleplay-grid-arena {
    grid-template-columns: 236px minmax(0, 1fr) 280px;
    gap: 10px;
  }
  #page-roleplay .roleplay-grid-arena.report-collapsed {
    grid-template-columns: 236px minmax(0, 1fr) 0px !important;
    gap: 10px;
  }
  #page-roleplay .roleplay-grid-arena.report-open {
    grid-template-columns: 0px minmax(0, 1fr) 288px;
    gap: 10px;
  }
}

/* Unified 3-Column Card Shells */
#page-roleplay .roleplay-panel-card,
#page-roleplay .roleplay-chat-card,
#page-roleplay .roleplay-report-card {
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #E5E9F0;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.035);
  padding: 0;
  gap: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Unified 3-Column Headers */
#page-roleplay .roleplay-panel-header {
  padding: 12px 16px;
  min-height: 60px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF6F7 100%);
  border-bottom: 1px solid #EEF0F4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
}
#page-roleplay .panel-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
#page-roleplay .step-num-circle {
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  background: #FFF0F2;
  color: #B51232;
  border: 1px solid #FECDD3;
  box-shadow: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-roleplay .panel-title-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#page-roleplay .panel-title {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: 0;
}
#page-roleplay .panel-subtitle {
  font-size: 11px;
  color: #64748B;
  line-height: 1.2;
  display: block;
}
#page-roleplay .col-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#page-roleplay .roleplay-panel-header .btn-icon-subtle {
  width: 30px;
  height: 30px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  border-radius: 8px;
  transition: all 0.15s ease;
}
#page-roleplay .roleplay-panel-header .btn-icon-subtle:hover {
  border-color: #FECDD3;
  background: #FFF1F2;
  color: #C8102E;
}

/* Column 1: Setup Body & Controls (Compact Default Fit) */
#page-roleplay .roleplay-col-setup {
  min-width: 0;
}
#page-roleplay .roleplay-col-setup .roleplay-panel-header {
  padding: 9px 14px;
  min-height: 50px;
}
#page-roleplay .roleplay-setup-body {
  padding: 10px 12px;
  gap: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
#page-roleplay .roleplay-setup-body > * {
  flex-shrink: 0;
}
#page-roleplay .roleplay-setup-body .form-group {
  margin: 0 0 9px !important;
}
#page-roleplay .roleplay-setup-body .form-group:last-child {
  margin-bottom: 0 !important;
}
#page-roleplay .roleplay-setup-body .form-label {
  display: block;
  margin: 0 0 4px !important;
  color: #475569;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Custom Multiline Wrapped Selects */
#page-roleplay .rp-wrapped-select {
  position: relative;
  min-width: 0;
  width: 100%;
  border: 1px solid #DCE5F1;
  border-radius: 9px;
  background: #F8FAFC;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
  transition: all 0.16s ease;
}
#page-roleplay .rp-wrapped-select:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
}
#page-roleplay .rp-wrapped-select:focus-within {
  background: #FFFFFF;
  border-color: #C8102E;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
  outline: none;
}
#page-roleplay .rp-wrapped-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
#page-roleplay .rp-select-full-label {
  padding: 6px 28px 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.32;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
#page-roleplay .rp-choice-name {
  font-size: 12.5px;
  color: #0F172A;
  font-weight: 700;
  line-height: 1.28;
}
#page-roleplay .rp-choice-meta {
  font-size: 10.5px;
  color: #64748B;
  font-weight: 500;
  line-height: 1.28;
}
#page-roleplay .rp-wrapped-select::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background-color: #F1F5F9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transition: all 0.15s ease;
}
#page-roleplay .rp-wrapped-select:hover::after {
  background-color: #FFF1F2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Collapsible Customer Profile Card */
#page-roleplay .rp-profile-extra {
  margin: -4px 0 9px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  transition: border-color 0.15s ease;
}
#page-roleplay .rp-profile-extra[open] {
  background: #FFFFFF;
  border-color: #DCE5F1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}
#page-roleplay .rp-profile-extra > summary {
  cursor: pointer;
  padding: 5px 9px;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
#page-roleplay .rp-profile-extra > summary::-webkit-details-marker {
  display: none;
}
#page-roleplay .rp-profile-extra > summary::after {
  content: '展开画像';
  font-size: 10px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 1px 6px;
  border-radius: 999px;
}
#page-roleplay .rp-profile-extra[open] > summary {
  border-bottom: 1px solid #F1F5F9;
  background: #F8FAFC;
  color: #0F172A;
}
#page-roleplay .rp-profile-extra[open] > summary::after {
  content: '收起';
  color: #C8102E;
  border-color: #FECDD3;
  background: #FFF1F2;
}
#page-roleplay .rp-customer-profile-card {
  padding: 8px 9px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#page-roleplay .rp-cust-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
#page-roleplay .rp-cust-name-badge {
  font-size: 12.5px;
  font-weight: 800;
  color: #0F172A;
}
#page-roleplay .rp-cust-risk-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FED7AA;
}
#page-roleplay .rp-cust-occ-row {
  font-size: 10.5px;
  color: #475569;
  background: #F1F5F9;
  padding: 2px 7px;
  border-radius: 5px;
  align-self: flex-start;
  font-weight: 600;
}
#page-roleplay .rp-cust-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
#page-roleplay .rp-cust-meta-item {
  background: #F8FAFC;
  border: 1px solid #EEF2F6;
  border-radius: 6px;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#page-roleplay .rp-cust-meta-item span {
  font-size: 9.5px;
  color: #64748B;
}
#page-roleplay .rp-cust-meta-item strong {
  font-size: 10.5px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}
#page-roleplay .rp-cust-painpoint-box {
  font-size: 10.5px;
  color: #334155;
  background: #FFF8F9;
  border: 1px solid #FECDD3;
  border-left: 3px solid #C8102E;
  padding: 5px 7px;
  border-radius: 5px;
  line-height: 1.4;
}

/* Scenario Mode Cards (Compact list, description shown on active card) */
#page-roleplay .rp-scenario-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#page-roleplay .rp-scenario-card {
  position: relative;
  padding: 6px 9px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: none;
  transition: all 0.15s ease;
}
#page-roleplay .rp-scenario-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
  transform: none;
}
#page-roleplay .rp-scenario-card.active {
  padding: 8px 9px;
  align-items: flex-start;
  border: 1px solid #F4A8B5;
  background: linear-gradient(135deg, #FFF5F6 0%, #FFFFFF 100%);
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.06);
}
#page-roleplay .rp-scenario-card.active::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 9px;
  width: 6px;
  height: 6px;
  background: #C8102E;
  border-radius: 50%;
}
#page-roleplay .rp-scenario-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #F1F5F9;
  color: #64748B;
  font-size: 9.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-roleplay .rp-scenario-card.active .rp-scenario-icon {
  margin-top: 1px;
  background: #FFF0F2;
  color: #C8102E;
  border: 1px solid #FECDD3;
}
#page-roleplay .rp-scenario-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#page-roleplay .rp-scenario-name {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  padding-right: 12px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
#page-roleplay .rp-scenario-card.active .rp-scenario-name {
  color: #B51232;
}
#page-roleplay .rp-scenario-desc {
  display: none;
  margin-top: 1px;
  font-size: 10.5px;
  line-height: 1.35;
  color: #64748B;
  white-space: normal;
  overflow-wrap: anywhere;
}
#page-roleplay .rp-scenario-card.active .rp-scenario-desc {
  display: block;
  color: #7A4B53;
}

/* Difficulty Segmented Control */
#page-roleplay .rp-difficulty-row {
  padding: 3px;
  gap: 3px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 9px;
}
#page-roleplay .rp-diff-btn {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 5px 3px;
  gap: 1px;
  color: #64748B;
  box-shadow: none;
  transform: none;
}
#page-roleplay .rp-diff-btn:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.65);
}
#page-roleplay .rp-diff-btn.active {
  background: #FFFFFF;
  color: #B51232;
  border-color: #FECDD3;
  box-shadow: 0 2px 5px rgba(200, 16, 46, 0.08);
}
#page-roleplay .diff-icon {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
#page-roleplay .diff-name {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
}
#page-roleplay .rp-diff-btn.active .diff-icon,
#page-roleplay .rp-diff-btn.active .diff-name {
  color: #B51232;
}

/* Column 2: Chat Header, Coach Hint, Messages, and Input Box */
#page-roleplay .roleplay-chat-header {
  padding: 10px 16px;
  min-height: 60px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF6F7 100%);
  border-bottom: 1px solid #EEF0F4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
#page-roleplay .chat-header-persona-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  flex: 1 1 auto;
}
#page-roleplay .chat-persona-name {
  font-size: 14px;
  font-weight: 800;
  color: #0F172A;
}
#page-roleplay .rp-engine-mode-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid #CBD5E1;
  background: #F1F5F9;
  color: #0F172A;
  transition: all 0.15s ease;
}
#page-roleplay .chat-header-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748B;
}
#page-roleplay .rp-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
  flex-shrink: 0;
}
#page-roleplay .rp-mood-badge {
  font-size: 10px;
  font-weight: 600;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
  padding: 1px 7px;
  border-radius: 999px;
}
#page-roleplay .chat-header-center-info {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#page-roleplay .rp-round-indicator {
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#page-roleplay .rp-round-indicator .round-counter {
  font-size: 11px;
  font-weight: 700;
  color: #B51232;
  white-space: nowrap;
}
#page-roleplay .chat-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
@media (min-width: 961px) {
  #page-roleplay .roleplay-grid-arena:not(.report-collapsed) .chat-header-controls {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed #E2E8F0;
  }
}
#page-roleplay .chat-header-controls .btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
#page-roleplay .btn-rp-speaker,
#page-roleplay .btn-rp-toggle-report,
#page-roleplay .btn-rp-exit {
  background: #FFFFFF;
  border: 1px solid #DCE5F1;
  color: #475569;
}
#page-roleplay .btn-rp-speaker:hover,
#page-roleplay .btn-rp-toggle-report:hover,
#page-roleplay .btn-rp-exit:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}
#page-roleplay .rp-speaker-svg-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#page-roleplay .btn-rp-video {
  background: linear-gradient(135deg, #C8102E 0%, #A90D26 100%);
  color: #FFFFFF;
  border: 1px solid #B51232;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.2);
}
#page-roleplay .btn-rp-video:hover {
  background: linear-gradient(135deg, #B51232 0%, #920B20 100%);
}
#page-roleplay .btn-rp-end {
  border: 1px solid #FECDD3 !important;
  color: #C8102E !important;
  background: #FFF1F2 !important;
}
#page-roleplay .btn-rp-end:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Coach Whisper Strip */
#page-roleplay .rp-coach-hint-strip {
  background: linear-gradient(90deg, #FFFDF7 0%, #FFF7F8 100%);
  border-bottom: 1px solid #FDE68A;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #78350F;
}
#page-roleplay .coach-icon-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #FFF0F2;
  border: 1px solid #FECDD3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-roleplay .coach-hint-content {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}
#page-roleplay .rp-coach-hint-strip .coach-hint-label {
  font-size: 11px;
  font-weight: 700;
  color: #B51232;
  background: #FFF0F2;
  border: 1px solid #FECDD3;
  padding: 1px 7px;
  border-radius: 999px;
}
#page-roleplay .rp-coach-hint-strip .coach-hint-text {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
  line-height: 1.4;
}

/* Dialogue Message Stream */
#page-roleplay .roleplay-messages-body {
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  padding: 14px 16px;
  gap: 12px;
}
#page-roleplay .roleplay-messages-body::before {
  background-image: radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.03) 0%, transparent 65%);
  background-size: 100% 100%;
}
#page-roleplay .rp-msg-wrap {
  max-width: 84%;
  gap: 10px;
}
#page-roleplay .rp-msg-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
#page-roleplay .rp-msg-bubble {
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.65;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.035);
}
#page-roleplay .rp-msg-wrap.customer .rp-msg-bubble {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  border-top-left-radius: 4px;
}
#page-roleplay .rp-msg-wrap.advisor .rp-msg-bubble {
  background: linear-gradient(135deg, #C8102E 0%, #A90D26 100%);
  color: #FFFFFF;
  border-top-right-radius: 4px;
  box-shadow: 0 3px 10px rgba(200, 16, 46, 0.18);
}
#page-roleplay .rp-msg-bubble p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Inspiration Chips & Input Box */
#page-roleplay .rp-inspiration-bar {
  background: #FAFBFD;
  border-top: 1px solid #EEF2F6;
  padding: 7px 16px;
  gap: 8px;
}
#page-roleplay .rp-insp-chip {
  background: #FFFFFF;
  border: 1px solid #DCE5F1;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
#page-roleplay .rp-insp-chip:hover {
  background: #FFF1F2;
  color: #C8102E;
  border-color: #FECDD3;
}
#page-roleplay .roleplay-input-box {
  padding: 8px 16px 12px !important;
  gap: 6px !important;
  border-top: 1px solid #EEF2F6 !important;
}
#page-roleplay .input-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#page-roleplay .input-actions-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
#page-roleplay .btn-tool-mini {
  height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid #DCE5F1;
  background: #F8FAFC;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}
#page-roleplay .btn-tool-mini:hover {
  background: #FFF1F2;
  border-color: #FECDD3;
  color: #C8102E;
}
#page-roleplay .rp-chat-textarea {
  border: 1px solid #DCE5F1;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  min-height: 42px;
  background: #F8FAFC;
}
#page-roleplay .rp-chat-textarea:focus {
  background: #FFFFFF;
  border-color: #C8102E;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}
#page-roleplay .rp-send-btn {
  height: 42px;
  border-radius: 10px !important;
  padding: 0 16px !important;
  font-weight: 700 !important;
}

/* Column 3: Evaluation & Supervisory Report Card */
#page-roleplay .roleplay-report-card {
  overflow: hidden;
}
#page-roleplay .rp-report-in-progress,
#page-roleplay .rp-report-evaluated {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
#page-roleplay .rp-report-in-progress {
  align-items: center;
  gap: 8px;
}
#page-roleplay .pending-icon-circle {
  width: 44px;
  height: 44px;
  background: #FFF0F2;
  border: 1px solid #FECDD3;
  margin-bottom: 2px;
}
#page-roleplay .rp-live-dimension-guide {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 7px;
  margin-top: 6px;
}
#page-roleplay .live-dim-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 3px solid #C8102E;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#page-roleplay .live-dim-item.dim-blue { border-left-color: #0284C7; }
#page-roleplay .live-dim-item.dim-green { border-left-color: #059669; }
#page-roleplay .live-dim-item.dim-purple { border-left-color: #7C3AED; }
#page-roleplay .dim-bullet {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
#page-roleplay .dim-bullet.red { background: #FFF0F2; color: #C8102E; }
#page-roleplay .dim-bullet.blue { background: #F0F9FF; color: #0284C7; }
#page-roleplay .dim-bullet.green { background: #ECFDF5; color: #059669; }
#page-roleplay .dim-bullet.purple { background: #F5F3FF; color: #7C3AED; }
#page-roleplay .dim-text-wrap strong {
  font-size: 12px;
  font-weight: 700;
  color: #0F172A;
}
#page-roleplay .dim-text-wrap span {
  font-size: 11px;
  color: #64748B;
  line-height: 1.4;
}
#page-roleplay .rp-btn-early-score {
  margin-top: auto;
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #FECDD3;
  background: #FFF1F2;
  color: #C8102E;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
#page-roleplay .rp-btn-early-score:hover {
  background: #FFE4E6;
  border-color: #FDA4AF;
}

/* Evaluated Report View */
#page-roleplay .rp-report-evaluated {
  gap: 10px;
}
#page-roleplay .rp-report-evaluated > * {
  flex-shrink: 0;
}
#page-roleplay .rp-score-summary-header {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border-radius: 12px;
  padding: 12px 14px;
  gap: 12px;
  flex-wrap: nowrap;
}
#page-roleplay .rp-score-circle-dial {
  width: 50px;
  height: 50px;
}
#page-roleplay .rp-score-circle-dial.dial-grade-b {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.15);
}
#page-roleplay .rp-score-circle-dial.dial-grade-b .score-unit { color: #FBBF24; }
#page-roleplay .rp-score-circle-dial.dial-grade-c {
  border-color: #F87171;
  background: rgba(248, 113, 113, 0.15);
}
#page-roleplay .rp-score-circle-dial.dial-grade-c .score-unit { color: #F87171; }
#page-roleplay .rp-grade-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#page-roleplay .rp-grade-main {
  font-size: 13px;
  font-weight: 800;
}
#page-roleplay .rp-grade-source-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  white-space: nowrap;
}
#page-roleplay .rp-grade-meta {
  font-size: 11px;
  line-height: 1.45;
  color: #CBD5E1;
  margin-top: 2px;
}

/* Radar Chart Collapsible & 4-Dimension Bars */
#page-roleplay .rp-radar-container {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0;
}
#page-roleplay .rp-radar-container > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#page-roleplay .rp-radar-container > summary::-webkit-details-marker {
  display: none;
}
#page-roleplay .rp-radar-container > summary::after {
  content: '展开图表';
  font-size: 10px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 1px 7px;
  border-radius: 999px;
}
#page-roleplay .rp-radar-container[open] > summary {
  border-bottom: 1px solid #E2E8F0;
}
#page-roleplay .rp-radar-container[open] > summary::after {
  content: '收起图表';
  color: #C8102E;
  border-color: #FECDD3;
  background: #FFF1F2;
}
#page-roleplay .rp-report-extra .radar-title-row {
  display: none;
}
#page-roleplay .rp-radar-container .radar-canvas-box {
  padding: 8px;
  background: #FFFFFF;
}
#page-roleplay .rp-dim-bars-grid {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 12px;
  gap: 8px;
}
#page-roleplay .rp-dim-bar-header {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}
#page-roleplay .rp-dim-bar-header strong {
  color: #0F172A;
  font-weight: 800;
}

/* Unified Diagnosis Cards */
#page-roleplay .rp-diagnosis-sections {
  gap: 8px;
}
#page-roleplay .diagnosis-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 3.5px solid #CBD5E1 !important;
  border-radius: 10px;
  padding: 10px 12px;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
#page-roleplay .diagnosis-card.highlight-card { border-left-color: #10B981 !important; }
#page-roleplay .diagnosis-card.improvement-card { border-left-color: #F59E0B !important; }
#page-roleplay .diagnosis-card.golden-card { border-left-color: #C8102E !important; }
#page-roleplay .diagnosis-card.compliance-card { border-left-color: #0284C7 !important; }
#page-roleplay .diagnosis-header {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
  color: #0F172A;
}
#page-roleplay .diagnosis-card.highlight-card .diagnosis-header { color: #047857; }
#page-roleplay .diagnosis-card.improvement-card .diagnosis-header { color: #B45309; }
#page-roleplay .diagnosis-card.golden-card .diagnosis-header { color: #B51232; }
#page-roleplay .diagnosis-card.compliance-card .diagnosis-header { color: #0369A1; }
#page-roleplay .diagnosis-list {
  padding-left: 15px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #334155;
}
#page-roleplay .golden-script-content {
  background: #FFF8F9;
  border: 1px solid #FECDD3;
  border-radius: 8px;
  padding: 8px 10px;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.55;
  color: #1E293B;
}
#page-roleplay .compliance-verdict-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: #334155;
}
#page-roleplay .rp-report-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}
#page-roleplay .rp-report-actions .btn {
  height: 36px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
}

/* Mobile Responsive Layout (<= 768px) */
@media (max-width: 768px) {
  body[data-active-page="roleplay"] .main-content,
  .main-content:has(#page-roleplay.active) {
    padding-top: calc(var(--header-height, 60px) + 8px) !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  #page-roleplay .roleplay-mobile-tabs {
    position: relative !important;
    top: auto !important;
    flex: 0 0 44px !important;
    min-height: 44px !important;
    margin-bottom: 8px !important;
  }
  #page-roleplay .roleplay-grid-arena {
    height: auto !important;
    max-height: none !important;
    flex: 1 1 0 !important;
  }
  #page-roleplay .roleplay-col.mob-active {
    min-width: 0;
    min-height: 0 !important;
  }
  #page-roleplay .roleplay-report-card {
    min-height: 0;
  }
  #page-roleplay .roleplay-setup-body {
    padding: 14px;
  }
  #page-roleplay .rp-report-col-header .col-header-actions {
    display: none;
  }
}

#page-game .game-restart-btn { flex-shrink:0; padding:8px 12px; border:1px solid #48566a; border-radius:8px; background:#182231; color:#e2e8f0; font:inherit; font-size:12px; cursor:pointer; transition:background .15s,border-color .15s; }
#page-game .game-restart-btn:hover { background:#28364b; border-color:#8291a6; }
#page-game .game-restart-btn:focus-visible { outline:2px solid #38bdf8; outline-offset:3px; }
#page-game .pixel-map-header { flex-wrap:wrap; gap:10px; }
#page-game .pixel-map-header .pixel-map-title { margin-right:auto; }
@media(max-width:768px) { #page-game .pixel-coord-chip { flex-basis:100%; white-space:normal; } }
body[data-active-page="game"] #modalOverlay { z-index:2000; }

/* Advisory workbench: unified 3-column layout, calm CITIC red accents, and clear hierarchy. */
#page-advisory .advisory-flow-container {
  grid-template-columns: 268px minmax(370px, 1.08fr) minmax(395px, 1.05fr);
  gap: 14px;
  height: calc(100vh - 56px);
}
@media (min-width: 769px) and (max-width: 1280px) {
  #page-advisory .advisory-flow-container {
    grid-template-columns: 245px minmax(320px, 1.05fr) minmax(340px, 1fr);
    gap: 12px;
  }
}
#page-advisory .advisory-col {
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e9f0;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.035);
  padding: 0;
  overflow: hidden;
}
#page-advisory .advisory-col-header {
  padding: 15px 16px;
  margin-bottom: 0;
  background: linear-gradient(135deg, #ffffff 0%, #faf6f7 100%);
  border-bottom: 1px solid #eef0f4;
  min-height: 60px;
}
#page-advisory .step-num-circle {
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  background: #fff0f2;
  color: #b51232;
  border: 1px solid #fecdd3;
  box-shadow: none;
}
#page-advisory .col-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.01em;
}
#page-advisory .col-subtitle {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
#page-advisory .advisory-col-scrollable-body,
#page-advisory .advisory-col-output .advisory-output-body {
  padding: 14px 16px;
  gap: 12px;
}
#page-advisory .advisory-sub-title-row {
  margin: 4px 0 0;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}
#page-advisory .sub-badge {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* Column 1: Client selector, profile card, and quick list */
#page-advisory .client-select {
  height: 38px;
  border-radius: 10px;
  border: 1px solid #dce3ec;
  background-color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  padding: 0 12px;
  transition: border-color 0.16s, background-color 0.16s;
}
#page-advisory .client-select:hover,
#page-advisory .client-select:focus {
  background-color: #ffffff;
  border-color: #b8c3d2;
}
#page-advisory .advisory-client-card {
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  padding: 13px;
  gap: 10px;
  box-shadow: none;
}
#page-advisory .client-profile-name {
  font-size: 16px;
  font-weight: 750;
  color: #0f172a;
}
#page-advisory .client-occupation-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
}
#page-advisory .client-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  padding: 8px 4px;
}
#page-advisory .client-meta-chip {
  padding: 2px 3px;
  border-right: 1px solid #eef2f6;
}
#page-advisory .client-meta-chip:last-child {
  border-right: 0;
}
#page-advisory .meta-label {
  font-size: 10.5px;
  color: #64748b;
  margin-bottom: 3px;
}
#page-advisory .meta-val {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.35;
  text-align: center;
}
#page-advisory .client-notes-card {
  background: #fff7f8;
  border: 1px solid #fce4e8;
  border-left: 3px solid #c8102e;
  border-radius: 8px;
  padding: 9px 11px;
}
#page-advisory .client-notes-header-line {
  font-size: 11px;
  color: #b51232;
  margin-bottom: 4px;
}
#page-advisory .client-notes-text {
  font-size: 12px;
  color: #334155;
  line-height: 1.55;
}
#page-advisory .client-latest-interaction-box {
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 9px;
  padding: 10px 11px;
  margin-top: 2px;
}
#page-advisory .interaction-header-tag {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
#page-advisory .interaction-header-tag .schedule-type-badge {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}
#page-advisory .interaction-date-text {
  color: #475569;
  font-size: 11px;
  font-weight: 600;
}
#page-advisory .interaction-summary-text {
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
}
#page-advisory .interaction-followup-text {
  margin-top: 6px;
  padding: 6px 9px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 2.5px solid #c8102e;
  border-radius: 6px;
  color: #475569;
  font-size: 11.5px;
  line-height: 1.5;
}
#page-advisory .client-stack-item {
  border-radius: 10px;
  border: 1px solid #e9edf2;
  padding: 10px 12px;
  box-shadow: none;
  gap: 5px;
}
#page-advisory .client-stack-item:hover {
  border-color: #cbd5e1;
  background: #fafbfc;
  transform: none;
}
#page-advisory .client-stack-item.active {
  border: 1px solid #e8bdc6;
  border-left: 3.5px solid #c8102e;
  background: #fff6f8;
}

/* Column 2: Allocation controls, pool status, donut chart, buckets, and tools */
#page-advisory .allocation-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  padding: 13px 14px;
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  margin-bottom: 0;
}
#page-advisory .allocation-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  min-width: 0;
}
#page-advisory .allocation-controls select,
#page-advisory .allocation-controls input[type="number"],
#page-advisory .allocation-rebalance-grid input {
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color 0.16s;
}
#page-advisory .allocation-controls select:hover,
#page-advisory .allocation-controls input[type="number"]:hover,
#page-advisory .allocation-controls select:focus,
#page-advisory .allocation-controls input[type="number"]:focus {
  border-color: #b8c3d2;
  outline: none;
}
#page-advisory .allocation-controls label.allocation-risk-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 36px;
  margin-top: auto;
  padding: 0 11px;
  background: #ffffff;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.16s;
}
#page-advisory .allocation-controls label.allocation-risk-toggle:hover {
  border-color: #b8c3d2;
}
#page-advisory .allocation-controls label.allocation-risk-toggle:has(input:checked) {
  background: #fff6f8;
  border-color: #e8bdc6;
  color: #a91131;
}
#page-advisory .allocation-risk-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #c8102e;
}
#page-advisory .allocation-controls p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}
#page-advisory #allocationPoolStatus {
  margin: 0;
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-left: 3px solid #94a3b8;
  border-radius: 9px;
  color: #475569;
  font-size: 11.5px;
  line-height: 1.55;
}
#page-advisory .allocation-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 280px;
  width: 100%;
  padding: 24px 16px;
  border-radius: 12px;
  background: transparent;
  border: none;
}
#page-advisory .allocation-waiting[hidden] {
  display: none !important;
}
#page-advisory #col2ScrollableBody:has(#allocationWaiting:not([hidden])) > :not(#allocationWaiting),
#page-advisory #col2ScrollableBody.is-loading-allocation > :not(#allocationWaiting) {
  display: none !important;
}
#page-advisory .allocation-loader-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #eef2f6;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
#page-advisory .allocation-loader-ring {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #f1f5f9;
  border-top-color: #c8102e;
  border-right-color: #c8102e;
  animation: allocation-spin 0.42s linear infinite !important;
  will-change: transform;
}
#page-advisory .allocation-loader-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.04em;
}
@keyframes allocation-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#page-advisory .advisory-portfolio-plan-card {
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 15px;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
}
#page-advisory .allocation-draft-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
#page-advisory .allocation-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff0f2;
  color: #b51232;
  border: 1px solid #fecdd3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#page-advisory .allocation-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin: 0;
}
#page-advisory .allocation-status.is-ok {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
#page-advisory .allocation-status.is-warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
#page-advisory .allocation-draft-header h4 {
  font-size: 16px;
  font-weight: 750;
  margin: 2px 0 4px;
  color: #0f172a;
}
#page-advisory .allocation-draft-header p,
#page-advisory .allocation-details p {
  font-size: 12px;
  line-height: 1.65;
  color: #64748b;
  margin: 0;
}
#page-advisory .allocation-pie-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 14px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 12px;
}
#page-advisory .allocation-pie {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}
#page-advisory .allocation-pie::after {
  content: '100%';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}
#page-advisory .allocation-pie-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#page-advisory .allocation-pie-wrap p {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.35;
}
#page-advisory .allocation-pie-wrap small {
  color: #64748b;
  font-size: 11px;
  font-weight: 400;
}
#page-advisory .allocation-pie-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
#page-advisory .allocation-pie-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #475569;
  white-space: nowrap;
}
#page-advisory .allocation-pie-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
#page-advisory .allocation-pie-legend b {
  color: #0f172a;
  font-weight: 700;
  margin-left: auto;
}
#page-advisory .allocation-buckets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#page-advisory .allocation-buckets > div {
  position: relative;
  padding: 10px 12px 13px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid #e6eaf0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}
#page-advisory .allocation-buckets > div span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
#page-advisory .allocation-buckets > div em {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
#page-advisory .allocation-buckets > div strong {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
}
#page-advisory .allocation-buckets i {
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 0;
}
#page-advisory .allocation-note {
  color: #64748b;
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
}
#page-advisory .portfolio-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#page-advisory .allocation-tool {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  border: 1px solid #e6eaf0;
  background: #ffffff;
  padding: 11px 13px;
  border-radius: 10px;
  margin-bottom: 0;
  color: #334155;
  transition: border-color 0.16s, background-color 0.16s, box-shadow 0.16s;
}
#page-advisory .allocation-tool.is-selectable {
  cursor: pointer;
}
#page-advisory .allocation-tool.is-selectable:hover {
  background: #fafbfc;
  border-color: #cbd5e1;
}
#page-advisory .allocation-tool.active {
  border: 1px solid #e8bdc6;
  border-left: 3.5px solid #c8102e;
  background: #fff6f8;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.05);
}
#page-advisory .allocation-tool.is-gap {
  background: #f8fafc;
  border-style: dashed;
  border-color: #cbd5e1;
}
#page-advisory .allocation-tool > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
#page-advisory .allocation-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  background: #fff0f2;
  color: #b51232;
  border: 1px solid #fecdd3;
  font-size: 11px;
  font-weight: 600;
}
#page-advisory .allocation-risk {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 600;
}
#page-advisory .allocation-tool strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  overflow-wrap: anywhere;
}
#page-advisory .allocation-tool small {
  display: block;
  font-size: 11px;
  margin-top: 3px;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#page-advisory .allocation-tool p {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #475569;
}
#page-advisory .allocation-details {
  border-top: 1px solid #eef1f5;
  padding: 10px 0 2px;
  font-size: 12px;
}
#page-advisory .allocation-details summary {
  cursor: pointer;
  color: #334155;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 0;
  user-select: none;
}
#page-advisory .allocation-details summary:hover {
  color: #c8102e;
}
#page-advisory .allocation-details > p {
  margin-top: 8px;
}
#page-advisory .allocation-details a {
  color: #b51232;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#page-advisory .allocation-rebalance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
#page-advisory .allocation-rebalance-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}
#page-advisory #allocationRebalanceResult {
  padding-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
#page-advisory .allocation-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #eef1f5;
  color: #64748b;
  font-size: 11px;
}
#page-advisory #allocationPendingCatalog {
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  padding: 10px 13px;
}
#page-advisory .allocation-catalog-tools {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
#page-advisory .allocation-catalog-tools input {
  min-width: 0;
  flex: 1;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  background: #ffffff;
  font-size: 12px;
}
#page-advisory .allocation-catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 9px 0;
  border-top: 1px solid #e6eaf0;
}
#page-advisory .allocation-catalog-row strong {
  grid-column: 1;
  font-size: 12px;
  color: #1e293b;
  overflow-wrap: anywhere;
}
#page-advisory .allocation-catalog-row small {
  grid-column: 1;
  color: #64748b;
  font-size: 10.5px;
  margin-top: 2px;
}
#page-advisory .allocation-catalog-row button {
  grid-column: 2;
  grid-row: 1 / span 2;
}
#page-advisory .allocation-catalog-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Column 3: Script toolbar, context strip, ready card, and outline preview */
#page-advisory .advisory-script-toolbar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 12px;
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: visible;
}
#page-advisory .advisory-script-toolbar .filter-select {
  grid-column: 1 / 3;
  height: 34px;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  font-size: 12px;
  font-weight: 600;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #dce3ec;
  background: #ffffff;
  color: #1e293b;
}
#page-advisory .advisory-script-toolbar .btn {
  height: 32px;
  width: 100%;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 0 8px;
  border-radius: 8px;
  gap: 4px;
  justify-content: center;
}
#page-advisory #copyScriptBtn {
  grid-column: 3;
  height: 34px;
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  background: #ffffff;
  border: 1px solid #dce3ec;
  color: #334155;
}

#page-advisory #importScheduleBtn {
  background: #ffffff;
  border: 1px solid #dce3ec;
  color: #334155;
}
#page-advisory .btn-roleplay-soft {
  background: #fff0f2;
  color: #b51232;
  border: 1px solid #fecdd3;
}
#page-advisory .btn-roleplay-soft:hover {
  background: #ffe4e8;
}
#page-advisory .live-script-card {
  border-radius: 14px;
  border: 1px solid #e6eaf0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
}
#page-advisory .script-rendered-box {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#page-advisory .script-context-strip {
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 11px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#page-advisory .script-context-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#page-advisory .script-context-item {
  background: #ffffff;
  border: 1px solid #e9edf2;
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
#page-advisory .script-context-item .ctx-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 2px;
}
#page-advisory .script-context-item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-advisory .script-context-item small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-advisory .script-context-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
#page-advisory .script-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
#page-advisory .script-status-pill.is-pass {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
#page-advisory .script-status-pill.is-warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
#page-advisory .script-style-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff0f2;
  color: #b51232;
  border: 1px solid #fecdd3;
  font-size: 11px;
  font-weight: 600;
}
#page-advisory .script-ready-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  padding: 20px 18px;
  text-align: center;
}
#page-advisory .script-ready-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}
#page-advisory .script-ready-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 16px;
}
#page-advisory .script-ready-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#page-advisory .script-action-primary {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#page-advisory .script-action-secondary {
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 8px;
  background: #ffffff;
}
#page-advisory .script-outline-preview {
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  padding: 13px 14px;
}
#page-advisory .script-outline-header {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 10px;
}
#page-advisory .script-outline-steps {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#page-advisory .script-outline-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e9edf2;
  border-radius: 9px;
  padding: 10px 12px;
}
#page-advisory .outline-step-index {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff0f2;
  color: #b51232;
  border: 1px solid #fecdd3;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
#page-advisory .script-outline-step strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
#page-advisory .script-outline-step p {
  margin: 0;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.55;
}
#page-advisory .script-edit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6eaf0;
  font-size: 12px;
  color: #64748b;
}
#page-advisory .script-edit-bar-left,
#page-advisory .script-edit-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-advisory .script-source-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
}
#page-advisory .script-source-badge.is-ai {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
#page-advisory .script-source-badge.is-local {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
#page-advisory .script-editable-content {
  outline: none;
  min-height: 220px;
  padding: 4px 2px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #1e293b;
}

@media (max-width: 768px) {
  #page-advisory .advisory-flow-container {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  #page-advisory .advisory-col {
    display: none !important;
  }
  #page-advisory .advisory-col.mob-active {
    display: flex !important;
  }
  #page-advisory .allocation-pie-wrap {
    flex-direction: row;
    gap: 12px;
    padding: 12px;
  }
  #page-advisory .allocation-pie {
    width: 92px;
    height: 92px;
  }
  #page-advisory .allocation-pie::after {
    inset: 19px;
    font-size: 11px;
  }
  #page-advisory .script-context-pair {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Global CITIC Design System Unification (Products, Advisory, Care, Map, Settings)
   ========================================================================== */

/* 1. Unified Card Shells & Header Gradient Bar Across All Modules */
#page-products .spotlight-header-card,
#page-products .chart-product-hero,
#page-products .chart-panel-card,
#page-products .market-indicators-panel,
#page-products .product-holdings-section,
#page-products .compare-selector-card,
#page-products .product-directory-section,
#page-care .care-card,
#page-events .map-filters-card,
#page-events .map-sites-list-pane,
#page-events .map-canvas-pane,
#page-settings .settings-card {
  background: #FFFFFF;
  border: 1px solid #E5E9F0;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.035);
}

#page-products .chart-panel-card {
  padding: 14px 18px;
  min-width: 0;
}
#page-products .chart-canvas-container {
  min-width: 0;
}
#page-products .chart-canvas-container canvas {
  max-width: 100%;
}
#page-products .product-quick-chip {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

#page-products .chart-panel-header,
#page-products .holdings-section-header {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #EEF0F4;
}
#page-products .chart-panel-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0F172A;
  gap: 8px;
}
#page-products .chart-panel-title svg {
  color: #C8102E;
  stroke: #C8102E;
}

/* 2. Product Center: Separated Single-Product Timing & Macro Market Reference (#marketIndicators) */
.market-indicators-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 18px;
  box-shadow: none;
  min-width: 0;
  overflow: visible;
}
.market-scope-card {
  background: #FFFFFF;
  border: 1px solid #E5E9F0;
  border-radius: 16px;
  padding: 0 18px 18px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  overflow: hidden;
  min-width: 0;
}
.market-indicators-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 -18px 16px;
  padding: 13px 18px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF6F7 100%);
  border-bottom: 1px solid #EEF0F4;
}
.macro-scope-card .market-indicators-heading {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
}
.market-indicators-heading > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.market-indicators-heading h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: #0F172A;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.market-indicators-heading h3::before {
  content: '';
  width: 4px;
  height: 15px;
  border-radius: 999px;
  background: #C8102E;
  display: inline-block;
}
.scope-origin-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
}
.scope-origin-badge.scope-single {
  background: #FFF0F2;
  color: #B51232;
  border: 1px solid #FECDD3;
}
.scope-origin-badge.scope-macro {
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #CBD5E1;
}
.market-indicators-heading [role=status] {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 2px 9px;
  border-radius: 999px;
}
.market-indicators-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.market-indicators-controls button {
  border: 1px solid #DCE3EC;
  background: #FFFFFF;
  color: #334155;
  border-radius: 8px;
  padding: 5px 12px;
  height: 30px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.market-indicators-controls button:hover:not(:disabled) {
  border-color: #FECDD3;
  background: #FFF1F2;
  color: #C8102E;
}
.market-indicators-controls button.active {
  color: #FFFFFF;
  background: #C8102E;
  border-color: #C8102E;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.22);
}
.market-indicators-controls button:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}
.market-indicators-controls button:disabled {
  cursor: wait;
  opacity: 0.65;
}

/* Timing Signal Main Card */
.timing-signal {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  padding: 16px 18px;
  margin: 0 0 12px;
  border: 1px solid #E6EAF0;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFFDFD 0%, #F8FAFC 100%);
}
.timing-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #FFF0F2;
  color: #B51232;
  border: 1px solid #FECDD3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#fundTimingName {
  margin: 8px 0 4px;
  font-size: 15px;
  font-weight: 750;
  color: #0F172A;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.timing-score-line {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0 14px;
}
#timingScore {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: #0F172A;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
#timingBand {
  border: 1px solid #FECDD3;
  background: #FFF0F2;
  padding: 4px 11px;
  border-radius: 999px;
  color: #B51232;
  font-size: 12px;
  font-weight: 700;
}
.timing-scale {
  height: 8px;
  background: linear-gradient(90deg, #64748B 0%, #94A3B8 30%, #E2E8F0 50%, #F4A8B5 72%, #C8102E 100%);
  border-radius: 999px;
  position: relative;
  margin: 4px 6px;
}
#timingMarker {
  position: absolute;
  top: -5px;
  width: 6px;
  height: 18px;
  border: 2px solid #FFFFFF;
  border-radius: 4px;
  background: #0F172A;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}
.timing-scale-labels {
  display: flex;
  justify-content: space-between;
  color: #64748B;
  font-size: 11px;
  font-weight: 600;
  margin: 8px 0 12px;
  gap: 8px;
}
.timing-overview p {
  color: #475569;
  font-size: 11.5px;
  line-height: 1.6;
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.timing-overview .timing-disclaimer {
  color: #64748B;
  font-size: 11px;
  max-width: 440px;
}
.timing-contributions {
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E6EAF0;
  border-radius: 12px;
  padding: 13px 15px;
}
.timing-contributions h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #F1F5F9;
}
#timingFactors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 12px;
  color: #334155;
}
.timing-factor {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 4px 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.timing-factor::before {
  content: '';
  flex: 0 0 5px;
  height: 5px;
  margin-top: 6px;
  border-radius: 50%;
  background: #C8102E;
}

/* Single-Product Core Metrics Row (3 Technical Cards + 1-Year Annualized Card) */
.single-product-core-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.single-product-core-grid:has(#fundTimingPrimary:empty) {
  grid-template-columns: minmax(0, 1fr);
}
#fundTimingPrimary {
  display: contents;
  margin: 0;
}

/* Timing Fact Grid & Collapsible Details */
.timing-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.timing-fact {
  padding: 13px 15px;
  border: 1px solid #E6EAF0;
  border-radius: 12px;
  background: #FFFFFF;
  min-width: 0;
  transition: border-color 0.15s ease;
}
.timing-fact:hover {
  border-color: #CBD5E1;
}
.timing-fact-header {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  justify-content: space-between;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}
.timing-fact-header small {
  font-size: 10.5px;
  color: #64748B;
  font-weight: 500;
}
.timing-fact-header small.included {
  color: #B51232;
  background: #FFF0F2;
  border: 1px solid #FECDD3;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.timing-fact > strong {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: #0F172A;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}
.timing-fact p {
  font-size: 11px;
  line-height: 1.55;
  color: #64748B;
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.timing-fact > small {
  font-size: 10.5px;
  color: #94A3B8;
}
.timing-fact details {
  margin-top: 8px;
  font-size: 11px;
  color: #475569;
}
.timing-samples {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.timing-more {
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  background: #F8FAFC;
  margin: 10px 0 0;
  overflow: hidden;
}
.timing-more[open] {
  background: #FFFFFF;
  border-color: #DCE3EC;
}
.timing-more > summary {
  cursor: pointer;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 14px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.timing-more > summary::-webkit-details-marker {
  display: none;
}
.timing-more > summary::after {
  content: '展开';
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  padding: 1px 8px;
  border-radius: 999px;
}
.timing-more[open] > summary {
  background: #F8FAFC;
  border-bottom: 1px solid #EEF2F6;
  color: #0F172A;
}
.timing-more[open] > summary::after {
  content: '收起';
  color: #C8102E;
  border-color: #FECDD3;
  background: #FFF1F2;
}
.timing-more > .timing-fact-grid,
.timing-more > .timing-more {
  margin: 10px 12px;
}
.timing-market-context > summary::before,
.timing-market-context[open] > summary::before {
  content: none;
}
.macro-context-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
#marketContextScore {
  color: #B51232;
  background: #FFF0F2;
  border: 1px solid #FECDD3;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
#marketContextStatus {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 2px 9px;
  border-radius: 999px;
}
.timing-context-note {
  color: #64748B;
  font-size: 11.5px;
  line-height: 1.6;
  margin: 0 0 10px;
}

/* Style Relative Strength Toolbar & Cards */
.market-style-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 10px;
  padding-top: 12px;
  border-top: 1px solid #EEF2F6;
}
.market-style-toolbar .market-indicators-controls {
  align-items: center;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
}
.market-style-toolbar .market-indicator-caption {
  font-size: 12px;
  font-weight: 700;
  color: #0F172A;
  padding: 0 8px 0 6px;
}
.market-style-toolbar .market-indicators-controls button {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-size: 11.5px;
}
.market-style-toolbar .market-indicators-controls button:hover:not(.active):not(:disabled) {
  background: rgba(255, 255, 255, 0.7);
  color: #0F172A;
  border-color: transparent;
}
.market-style-toolbar .market-indicators-controls button.active {
  background: #C8102E;
  border-color: #C8102E;
  color: #FFFFFF;
}
#marketStyleWindowStatus {
  color: #64748B;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}
.market-indicator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.market-indicator-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid #E6EAF0;
  border-radius: 12px;
  background: #F8FAFC;
}
#marketFundCard {
  background: #FFFFFF;
}
.market-indicator-label {
  font-size: 12px;
  color: #475569;
  font-weight: 700;
}
.market-indicator-value {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.market-indicator-caption,
.market-indicator-note {
  font-size: 11px;
  color: #64748B;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#timingSignal[aria-busy="true"] .timing-eyebrow::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 2px solid #FECDD3;
  border-top-color: #C8102E;
  border-radius: 50%;
  margin-left: 8px;
  animation: timing-spin 0.8s linear infinite;
}
#timingSignal[aria-busy="true"] #timingScore {
  opacity: 0.35;
  animation: fund-timing-pulse 1s ease-in-out infinite alternate;
}
@keyframes timing-spin { to { transform: rotate(360deg); } }
@keyframes fund-timing-pulse { to { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) {
  #timingSignal[aria-busy="true"] .timing-eyebrow::after,
  #timingSignal[aria-busy="true"] #timingScore { animation: none; }
}
@media (max-width: 1100px) {
  .single-product-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .timing-signal { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 900px) {
  .market-indicator-grid { grid-template-columns: 1fr; }
  .market-indicators-heading { align-items: flex-start; flex-wrap: wrap; }
  .market-scope-card { padding: 0 14px 14px; }
  .market-indicators-heading { margin: 0 -14px 14px; padding: 12px 14px; }
}
@media (max-width: 600px) {
  .single-product-core-grid { grid-template-columns: 1fr; }
  .timing-signal { padding: 14px; }
  .timing-fact-grid { grid-template-columns: 1fr; }
  #timingScore { font-size: 30px; }
  .timing-score-line { flex-wrap: wrap; gap: 8px; }
  .timing-scale-labels { font-size: 10px; }
}

/* 3. Multi-Product Comparison Indicator Section (#compareIndicators) */
.compare-indicators {
  min-width: 0;
  margin-bottom: 16px;
}
.compare-indicators .chart-panel-title::before {
  content: '';
  width: 4px;
  height: 15px;
  border-radius: 999px;
  background: #C8102E;
  display: inline-block;
}
.compare-indicator-note {
  margin: 0 0 10px;
  color: #64748B;
  font-size: 12px;
  line-height: 1.55;
}
.compare-indicator-loading {
  padding: 16px;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  font-size: 12.5px;
}
.compare-indicator-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #E6EAF0;
  border-radius: 12px;
  background: #FFFFFF;
}
.compare-indicator-scroll:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}
.compare-indicator-table {
  table-layout: fixed;
  min-width: 100%;
  width: max-content;
  border-collapse: collapse;
}
.compare-indicator-table th,
.compare-indicator-table td {
  width: 220px;
  min-width: 220px;
  padding: 10px 14px;
  border-bottom: 1px solid #EEF2F6;
  border-right: 1px solid #F1F5F9;
  vertical-align: top;
  overflow-wrap: anywhere;
  text-align: left;
  font-size: 12px;
}
.compare-indicator-table thead th {
  background: #F8FAFC;
  color: #0F172A;
  font-weight: 700;
  border-bottom: 1px solid #E2E8F0;
}
.compare-indicator-table .col-dim {
  width: 155px;
  min-width: 155px;
  background: #F8FAFC;
  color: #334155;
  font-weight: 700;
}
.compare-indicator-table tr > .col-dim {
  position: sticky;
  left: 0;
  z-index: 1;
}
.compare-indicator-table strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.compare-indicator-table small {
  display: block;
  margin-top: 3px;
  color: #64748B;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.45;
}
.compare-indicator-table .compare-timing-row {
  background: #FFF8F9;
}
.compare-indicator-table .compare-timing-row .col-dim {
  background: #FFF0F2;
  color: #B51232;
}
.compare-indicator-table .compare-timing-row button {
  margin-top: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #FFFFFF;
  border: 1px solid #FECDD3;
  color: #B51232;
}
.compare-indicator-table .compare-timing-row button:hover {
  background: #FFF0F2;
}
.compare-indicators:not(.expanded) .compare-extra-metric {
  display: none;
}
.compare-market-context {
  margin-top: 12px;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  background: #F8FAFC;
  overflow: hidden;
}
.compare-market-context[open] {
  background: #FFFFFF;
  padding-bottom: 12px;
}
.compare-market-context > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  color: #334155;
  padding: 9px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.compare-market-context > summary::-webkit-details-marker {
  display: none;
}
.compare-market-context > summary::after {
  content: '展开';
  font-size: 10.5px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  padding: 1px 8px;
  border-radius: 999px;
}
.compare-market-context[open] > summary {
  background: #F8FAFC;
  border-bottom: 1px solid #EEF2F6;
  margin-bottom: 10px;
}
.compare-market-context[open] > summary::after {
  content: '收起';
  color: #C8102E;
  border-color: #FECDD3;
  background: #FFF1F2;
}
#compareMarketSummary {
  color: #64748B;
  font-size: 11.5px;
  font-weight: 500;
  margin-left: 8px;
  margin-right: auto;
}
.compare-market-context > .compare-indicator-note,
.compare-market-context > #compareMarketContext {
  padding: 0 14px;
}
.compare-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
@media (max-width: 600px) {
  .compare-indicator-table th, .compare-indicator-table td { width: 185px; min-width: 185px; }
  .compare-indicator-table .col-dim { width: 130px; min-width: 130px; }
  .compare-market-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 4. Advisory Workbench v143 Additions (#allocationQuestionnaire, Metrics, Buckets) */
#page-advisory .advisory-col-scrollable-body > * {
  flex-shrink: 0;
}
#page-advisory .allocation-questionnaire {
  flex-shrink: 0;
  border: 1px solid #E6EAF0;
  border-radius: 12px;
  background: #F8FAFC;
  padding: 0;
  margin-bottom: 0;
  transition: border-color 0.15s ease;
}
#page-advisory .allocation-questionnaire[open] {
  background: #FFFFFF;
  border-color: #DCE3EC;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  padding: 0 13px 12px;
}
#page-advisory .allocation-questionnaire > summary {
  cursor: pointer;
  font-weight: 700;
  color: #0F172A;
  font-size: 12.5px;
  padding: 10px 13px;
  border-radius: 11px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
#page-advisory .allocation-questionnaire > summary::-webkit-details-marker {
  display: none;
}
#page-advisory .allocation-questionnaire > summary::after {
  content: '展开问卷';
  font-size: 10.5px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  padding: 1px 8px;
  border-radius: 999px;
}
#page-advisory .allocation-questionnaire[open] > summary {
  margin: 0 -13px 10px;
  border-radius: 11px 11px 0 0;
  background: #F8FAFC;
  border-bottom: 1px solid #EEF2F6;
}
#page-advisory .allocation-questionnaire[open] > summary::after {
  content: '收起';
  color: #C8102E;
  border-color: #FECDD3;
  background: #FFF1F2;
}
#page-advisory .allocation-questionnaire p,
#page-advisory .allocation-question-actions span {
  color: #64748B;
  font-size: 11px;
  line-height: 1.55;
  margin: 7px 0;
}
#page-advisory .allocation-question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
#page-advisory .allocation-question-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  min-width: 0;
}
#page-advisory .allocation-question-grid label:last-child {
  grid-column: 1 / -1;
}
#page-advisory .allocation-question-grid input,
#page-advisory .allocation-question-grid select {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid #DCE3EC;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
}
#page-advisory .allocation-question-grid input:focus,
#page-advisory .allocation-question-grid select:focus {
  border-color: #B8C3D2;
  outline: none;
}
#page-advisory .allocation-style-options {
  border: 1px solid #EEF2F6;
  background: #F8FAFC;
  border-radius: 9px;
  padding: 8px 10px;
  margin: 10px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#page-advisory .allocation-style-options legend {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  padding: 0 4px;
}
#page-advisory .allocation-style-options label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#page-advisory .allocation-style-options label:hover {
  border-color: #CBD5E1;
}
#page-advisory .allocation-style-options label:has(input:checked) {
  background: #FFF0F2;
  border-color: #FECDD3;
  color: #B51232;
}
#page-advisory .allocation-style-options input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #C8102E;
}
#page-advisory .allocation-question-actions,
#page-advisory .allocation-metric-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
#page-advisory .allocation-metric-toolbar {
  margin: 0;
  padding: 8px 11px;
  background: #F8FAFC;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
}
#page-advisory #allocationMeasure {
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #DCE3EC;
  background: #FFFFFF;
  color: #334155;
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
}
#page-advisory #allocationMeasure:hover:not(:disabled) {
  background: #FFF0F2;
  border-color: #FECDD3;
  color: #B51232;
}
#page-advisory #allocationMetricStatus {
  font-size: 11px;
  color: #64748B;
  line-height: 1.5;
  flex: 1;
  min-width: 150px;
}
#page-advisory .allocation-profile-summary {
  color: #475569;
  font-size: 11.5px;
  line-height: 1.55;
  background: #FFF8F9;
  border: 1px solid #FECDD3;
  border-left: 3px solid #C8102E;
  border-radius: 7px;
  padding: 6px 9px;
  margin-top: 4px !important;
}
#page-advisory .allocation-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
#page-advisory .allocation-evidence span {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #334155;
  font-variant-numeric: tabular-nums;
}
#page-advisory .allocation-evidence small {
  width: 100%;
  font-size: 10.5px;
  color: #64748B;
  margin-top: 2px;
}
#page-advisory .allocation-buckets > button {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 6px;
  color: #334155;
  text-align: left;
  font: inherit;
  font-size: 12px;
  background: #FFFFFF;
  border: 1px solid #E6EAF0;
  border-radius: 9px;
  padding: 10px 12px 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#page-advisory .allocation-buckets > button span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
#page-advisory .allocation-buckets > button em {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
#page-advisory .allocation-buckets > button strong {
  font-size: 13px;
  font-weight: 750;
  color: #0F172A;
}
#page-advisory .allocation-buckets > button small {
  grid-column: 1 / -1;
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748B;
}
#page-advisory .allocation-buckets > button:hover {
  border-color: #E8BDC6;
  background: #FFF6F8;
}
#page-advisory .allocation-buckets > button:hover small {
  color: #B51232;
}
#page-advisory .allocation-buckets > button:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}
#page-advisory #advisoryTimingView {
  width: 100%;
  height: 34px;
  border-radius: 9px;
  border: 1px solid #DCE3EC;
  background: #F8FAFC;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
  flex-shrink: 0;
}
#page-advisory #advisoryTimingView:not(:disabled):hover {
  background: #FFF0F2;
  border-color: #FECDD3;
  color: #B51232;
}

/* 5. Product Directory Section (#productDirectorySection) */
#page-products .product-directory-section {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
#page-products .directory-section-header {
  padding: 14px 18px;
  margin-bottom: 0;
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF6F7 100%);
  border-bottom: 1px solid #EEF0F4;
  gap: 12px;
}
#page-products .directory-title {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#page-products .directory-title::before {
  content: '';
  width: 4px;
  height: 15px;
  border-radius: 999px;
  background: #C8102E;
  display: inline-block;
}
#page-products .directory-count-badge {
  background: #FFF0F2;
  color: #B51232;
  border: 1px solid #FECDD3;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
}
#page-products .directory-filters-row {
  gap: 8px;
}
#page-products .directory-filters-row .search-box.mini,
#page-products .directory-filters-row .filter-select.mini {
  height: 34px;
  border-radius: 8px;
  border: 1px solid #DCE3EC;
  background: #FFFFFF;
  font-size: 12px;
}
.allocation-directory-toolbar {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 10px 18px;
  background: #F8FAFC;
  border-bottom: 1px solid #EEF2F6;
}
#productDirectoryClearNeeds[hidden],
#btnToggleAllCardsExpand[hidden] {
  display: none !important;
}
#productDirectoryStatus {
  font-size: 12px;
  color: #475569;
  line-height: 1.55;
}
#page-products #productList.personalized-directory {
  padding: 14px 18px;
}
.allocation-directory-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #E6EAF0;
  border-radius: 12px;
  background: #FFFFFF;
}
.allocation-directory-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  font-size: 12.5px;
}
.allocation-directory-table th {
  padding: 11px 14px;
  background: #F8FAFC;
  color: #334155;
  font-weight: 700;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid #E2E8F0;
  white-space: nowrap;
}
.allocation-directory-table td {
  padding: 11px 14px;
  border-top: 1px solid #EEF2F6;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  color: #1E293B;
}
.allocation-directory-table tbody tr:hover {
  background: #FAFBFD;
}
.allocation-directory-table small {
  display: block;
  font-size: 11px;
  color: #64748B;
  margin-top: 3px;
  line-height: 1.45;
}
.allocation-directory-table td:first-child {
  min-width: 200px;
  max-width: 260px;
  overflow-wrap: anywhere;
}
.allocation-directory-table td:first-child strong {
  color: #0F172A;
  font-weight: 700;
  font-size: 13px;
}
.allocation-directory-table td:last-child {
  min-width: 165px;
  white-space: nowrap;
}
.allocation-directory-table td button {
  margin: 2px 5px 2px 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid #DCE3EC;
  background: #FFFFFF;
  color: #334155;
}
.allocation-directory-table td button[data-directory-view] {
  background: #FFF0F2;
  border-color: #FECDD3;
  color: #B51232;
}
.allocation-directory-table td button:hover:not(:disabled) {
  border-color: #FECDD3;
  background: #FFE4E8;
  color: #B51232;
}
.allocation-directory-pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #FAFBFD;
  border-top: 1px solid #EEF2F6;
}

/* 6. Care Calendar, Prospecting Map & Settings Harmonization */
#page-care .calendar-card-header,
#page-care .care-generator-header,
#page-events .sites-list-header,
#page-settings .settings-card-header {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF6F7 100%);
  border-bottom: 1px solid #EEF0F4;
}
#page-care .care-engine-tag {
  background: #FFF0F2 !important;
  color: #B51232 !important;
  border: 1px solid #FECDD3 !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
#page-events .btn-sync-public {
  color: #334155 !important;
  border: 1px solid #DCE3EC !important;
  background: #F8FAFC !important;
  border-radius: 8px !important;
}
#page-events .btn-sync-public:hover {
  color: #B51232 !important;
  border-color: #FECDD3 !important;
  background: #FFF0F2 !important;
}

@media (max-width: 600px) {
  #page-advisory .allocation-question-grid { grid-template-columns: minmax(0, 1fr); }
  .allocation-directory-toolbar { align-items: flex-start; flex-direction: column; padding: 10px 14px; }
  #page-products #productList.personalized-directory { padding: 10px 12px; }
  #page-products .directory-section-header { padding: 12px 14px; }
  .allocation-directory-pagination { padding: 10px 14px; }
  .allocation-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 7. Structured Quick Product Chips (Risk-Tier Grouped Rows) & Merged Macro Market Facts Grid */
#page-products .quick-chips-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
#page-products .quick-chips-wrapper.collapsed {
  max-height: none;
  overflow: visible;
}
#page-products .quick-chips-tier-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  background: #FAFBFD;
  border: 1px solid #EEF2F6;
  border-radius: 10px;
}
#page-products .quick-chips-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
#page-products .quick-chips-tier-badge em {
  font-style: normal;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
}
#page-products .quick-chips-tier-badge.tier-r1,
#page-products .quick-chips-tier-badge.tier-r2 {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
#page-products .quick-chips-tier-badge.tier-r3 {
  background: #F0F9FF;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}
#page-products .quick-chips-tier-badge.tier-r4 {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}
#page-products .quick-chips-tier-badge.tier-r5 {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
#page-products .quick-chips-tier-badge.tier-other {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #CBD5E1;
}
#page-products .quick-chips-tier-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
#page-products .product-quick-chip[data-id] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  line-height: 1.35;
}
#page-products .product-quick-chip[data-id]:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}
#page-products .product-quick-chip[data-id].active {
  background: #C8102E;
  border-color: #C8102E;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.22);
}
#page-products .chip-risk-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 4px;
  line-height: 1.4;
  flex-shrink: 0;
}
#page-products .chip-risk-r1,
#page-products .chip-risk-r2 {
  background: #D1FAE5;
  color: #065F46;
}
#page-products .chip-risk-r3 {
  background: #E0F2FE;
  color: #0369A1;
}
#page-products .chip-risk-r4 {
  background: #FEF3C7;
  color: #92400E;
}
#page-products .chip-risk-r5 {
  background: #FEE2E2;
  color: #991B1B;
}
#page-products .chip-risk-other {
  background: #E2E8F0;
  color: #475569;
}
#page-products .product-quick-chip[data-id].active .chip-risk-tag {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
#page-products .risk-filter-btn {
  padding: 2px 9px;
  font-size: 12px;
}
#page-products .risk-filter-btn.risk-filter-r2:not(.active) { border-color: #6EE7B7; color: #065F46; background: #ECFDF5; }
#page-products .risk-filter-btn.risk-filter-r3:not(.active) { border-color: #7DD3FC; color: #0369A1; background: #F0F9FF; }
#page-products .risk-filter-btn.risk-filter-r4:not(.active) { border-color: #FCD34D; color: #92400E; background: #FFFBEB; }
#page-products .risk-filter-btn.risk-filter-r5:not(.active) { border-color: #FCA5A5; color: #991B1B; background: #FEF2F2; }

#page-products .macro-merged-facts-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1280px) {
  #page-products .macro-merged-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #page-products .quick-chips-tier-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  #page-products .quick-chips-tier-badge {
    justify-self: start;
  }
  #page-products .macro-merged-facts-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 8. Product Center Semantic Polarity System (Red = 偏好 / tone-good, Green = 偏差 / tone-bad) */
#page-products .polarity-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}
#page-products .polarity-legend-pill .pol-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
#page-products .polarity-legend-pill .pol-dot.pol-good {
  background: #C8102E;
}
#page-products .polarity-legend-pill .pol-dot.pol-bad {
  background: #059669;
  margin-left: 4px;
}

#page-products .timing-fact-header small.included {
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}

#page-products .timing-fact.tone-good,
#page-products .market-indicator-card.tone-good,
#page-products .kpi-metric-card.tone-good {
  border-color: #F5D0D6;
  border-left: 3px solid #C8102E;
  background: linear-gradient(180deg, #FFFDFD 0%, #FFFFFF 100%);
}
#page-products .timing-fact.tone-bad,
#page-products .market-indicator-card.tone-bad,
#page-products .kpi-metric-card.tone-bad {
  border-color: #B6EAD4;
  border-left: 3px solid #059669;
  background: linear-gradient(180deg, #F8FEFB 0%, #FFFFFF 100%);
}
#page-products .timing-fact.tone-neutral,
#page-products .market-indicator-card.tone-neutral,
#page-products .kpi-metric-card.tone-neutral {
  border-left: 3px solid #CBD5E1;
}

#page-products .timing-fact > strong.tone-good,
#page-products .market-indicator-value.tone-good,
#page-products .kpi-value.tone-good,
#page-products .compare-hero-item-ret.tone-good,
#page-products #timingScore.tone-good {
  color: #C8102E !important;
}
#page-products .timing-fact > strong.tone-bad,
#page-products .market-indicator-value.tone-bad,
#page-products .kpi-value.tone-bad,
#page-products .compare-hero-item-ret.tone-bad,
#page-products #timingScore.tone-bad {
  color: #059669 !important;
}
#page-products .timing-fact > strong.tone-neutral,
#page-products .market-indicator-value.tone-neutral,
#page-products #timingScore.tone-neutral {
  color: #0F172A;
}

#page-products .timing-fact > strong.tone-good::after,
#page-products .market-indicator-value.tone-good::after,
#page-products .kpi-metric-card.tone-good .kpi-label::after,
#page-products .compare-indicator-table td strong.tone-good::after {
  content: '偏好';
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  vertical-align: middle;
  color: #C8102E;
  background: #FFF0F2;
  border: 1px solid #FECDD3;
  letter-spacing: 0;
}
#page-products .timing-fact > strong.tone-bad::after,
#page-products .market-indicator-value.tone-bad::after,
#page-products .kpi-metric-card.tone-bad .kpi-label::after,
#page-products .compare-indicator-table td strong.tone-bad::after {
  content: '偏差';
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  vertical-align: middle;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  letter-spacing: 0;
}

#page-products #marketContextScore.tone-good,
#page-products #timingBand.tone-good,
#page-products #compareMarketSummary.tone-good {
  color: #C8102E !important;
  background: #FFF0F2 !important;
  border: 1px solid #FECDD3 !important;
}
#page-products #marketContextScore.tone-good::after,
#page-products #timingBand.tone-good::after {
  content: ' · 偏好';
}
#page-products #marketContextScore.tone-bad,
#page-products #timingBand.tone-bad,
#page-products #compareMarketSummary.tone-bad {
  color: #047857 !important;
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
}
#page-products #marketContextScore.tone-bad::after,
#page-products #timingBand.tone-bad::after {
  content: ' · 偏差';
}
#page-products #marketContextScore.tone-neutral,
#page-products #timingBand.tone-neutral {
  color: #475569 !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}
#page-products #marketContextStatus.tone-good {
  color: #B51232;
  background: #FFF8F9;
  border-color: #FECDD3;
}
#page-products #marketContextStatus.tone-bad {
  color: #047857;
  background: #F2FDF8;
  border-color: #A7F3D0;
}

#page-products .timing-scale {
  background: linear-gradient(90deg, #059669 0%, #34D399 32%, #CBD5E1 50%, #FDA4AF 68%, #C8102E 100%);
}
#page-products .timing-factor {
  align-items: center;
}
#page-products .timing-factor.tone-good::before {
  background: #C8102E;
}
#page-products .timing-factor.tone-bad::before {
  background: #059669;
}
#page-products .timing-factor.tone-neutral::before {
  background: #94A3B8;
}
#page-products .timing-factor.tone-good::after {
  content: '偏好';
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #C8102E;
  background: #FFF0F2;
  border: 1px solid #FECDD3;
  flex-shrink: 0;
}
#page-products .timing-factor.tone-bad::after {
  content: '偏差';
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  flex-shrink: 0;
}

#page-products .timing-samples span.tone-good {
  color: #C8102E;
  font-weight: 600;
}
#page-products .timing-samples span.tone-bad {
  color: #059669;
  font-weight: 600;
}

#page-products .allocation-directory-table td.dir-metric-cell {
  white-space: nowrap;
}
#page-products .compare-indicator-table td strong.tone-good,
#page-products .compare-table td.tone-good,
#page-products .allocation-directory-table td.dir-metric-cell.tone-good {
  color: #C8102E !important;
  font-weight: 700;
}
#page-products .compare-indicator-table td strong.tone-bad,
#page-products .compare-table td.tone-bad,
#page-products .allocation-directory-table td.dir-metric-cell.tone-bad {
  color: #059669 !important;
  font-weight: 700;
}
#page-products .allocation-directory-table td.dir-metric-cell.tone-good::after {
  content: '偏好';
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #C8102E;
  background: #FFF0F2;
  border: 1px solid #FECDD3;
  vertical-align: middle;
}
#page-products .allocation-directory-table td.dir-metric-cell.tone-bad::after {
  content: '偏差';
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  vertical-align: middle;
}

/* ==========================================================================
   9. Unified Typographic Scale (统一文字层级规范：主标题 / 模块标题 / 子标题与表头 / 指标数值 / 正文 / 辅助小字)
   ========================================================================== */

/* Level 1: Hero Primary Title (主标的名称 - 18px) */
#page-products .hero-product-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #0F172A;
}

/* Level 2: Module & Section Headings (模块主标题 - 统一 15px) */
#page-products .market-indicators-heading h3,
#page-products .chart-panel-title,
#page-products .section-heading-text,
#page-products .holdings-section-header .raw-title-group > span:first-of-type,
#page-products .compare-header-title-wrap > span:first-of-type,
#page-products .directory-title,
#page-advisory .col-title,
#page-care .calendar-card-title,
#page-care .care-generator-title,
#page-events .sites-list-title,
#page-settings .settings-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #0F172A;
}

/* Level 3A: Sub-section Headings & Card Group Titles (子模块标题 - 统一 13.5px) */
#page-products #fundTimingName,
#page-products .timing-contributions h4,
#page-products .holdings-card-title,
#page-products .timing-more > summary,
#page-products .compare-market-context > summary,
#page-products .dossier-highlights-badge,
#page-products .dossier-raw-badge,
#page-advisory .allocation-questionnaire > summary,
#page-advisory .portfolio-plan-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #0F172A;
}

/* Level 3B: Metric Card Labels & Table Headers (卡片指标名称与表头 - 统一 13px) */
#page-products .kpi-label,
#page-products .timing-fact-header,
#page-products .market-indicator-label,
#page-products .dossier-fact-label,
#page-products .dossier-section-mini-label,
#page-products .compare-hero-item-title,
#page-products .compare-box-label,
#page-products .allocation-directory-table th,
#page-products .compare-indicator-table th,
#page-products .compare-indicator-table .col-dim,
#page-products .compare-table thead th,
#page-products .compare-table .section-header-row td,
#page-products .market-style-toolbar .market-indicator-caption,
#page-products .macro-context-summary {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #334155;
}
#page-products .allocation-directory-table th,
#page-products .compare-indicator-table thead th,
#page-products .compare-table thead th {
  font-weight: 700;
  color: #0F172A;
}

/* Level 4: Primary Metric Values (核心指标数值 - 统一 18px，择时总分 28px) */
#page-products #timingScore {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}
#page-products .kpi-metric-card {
  padding: 11px 14px;
  border-radius: 12px;
  gap: 4px;
  min-height: 76px;
}
#page-products .kpi-value,
#page-products .timing-fact > strong,
#page-products .market-indicator-value,
#page-products .compare-hero-item-ret {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
#page-products .kpi-value.compact-bm {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

/* Level 5: Body Copy, Factor Lists, Data Rows & Table Cells (正文内容与数据项 - 统一 13px) */
#page-products .hero-desc-text,
#page-products .timing-context-note,
#page-products .compare-indicator-note,
#page-products #productDirectoryStatus,
#page-products #timingFactors,
#page-products .timing-factor,
#page-products .donut-item-row,
#page-products .strategy-point-text,
#page-products .suitability-text,
#page-products .industry-label-row,
#page-products .stock-name-text,
#page-products .stock-pct-val,
#page-products .dossier-val-bold,
#page-products .dossier-fact-val,
#page-products .dossier-highlights-content,
#page-products .dossier-raw-body,
#page-products .compare-diagnosis-content,
#page-products .diag-summary-box,
#page-products .allocation-directory-table,
#page-products .allocation-directory-table td,
#page-products .allocation-directory-table td:first-child strong,
#page-products .compare-indicator-table td,
#page-products .compare-indicator-table strong,
#page-products .compare-table,
#page-products .compare-table td,
#page-products .spotlight-input,
#page-products .product-mode-tab-btn,
#page-advisory .client-notes-text,
#page-advisory .script-editable-content {
  font-size: 13px;
  line-height: 1.55;
}
#page-products .dossier-val-bold,
#page-products .stock-name-text,
#page-products .stock-pct-val,
#page-products .allocation-directory-table td:first-child strong,
#page-products .compare-indicator-table strong {
  font-weight: 700;
  color: #0F172A;
}

/* Interactive Controls & Filter Buttons (交互按钮与筛选控件 - 统一 12.5px) */
#page-products .product-quick-chip[data-id],
#page-products .risk-filter-btn,
#page-products .risk-filter-label,
#page-products .chips-expand-toggle-btn,
#page-products .timeframe-btn,
#page-products .market-indicators-controls button,
#page-products .market-style-toolbar .market-indicators-controls button,
#page-products .allocation-directory-table td button,
#page-products .directory-filters-row .search-box.mini,
#page-products .directory-filters-row .filter-select.mini,
#page-products .allocation-directory-pagination {
  font-size: 12.5px;
  line-height: 1.4;
}

/* Level 6A: Small Captions, Subtext & Explanatory Notes (辅助小字与注释说明 - 统一 12px) */
#page-products .kpi-sub,
#page-products .timing-fact p,
#page-products .timing-fact > small,
#page-products .timing-fact details,
#page-products .market-indicator-caption,
#page-products .market-indicator-note,
#page-products .timing-overview p,
#page-products .timing-overview .timing-disclaimer,
#page-products .timing-scale-labels,
#page-products #marketStyleWindowStatus,
#page-products #compareMarketSummary,
#page-products .allocation-directory-table small,
#page-products .compare-indicator-table small,
#page-products .stock-code-text,
#page-products .holdings-sub-badge,
#page-products .section-caption-note,
#page-products .compare-hero-item-sub,
#page-products .chart-legend-row,
#page-products .compare-chart-legend,
#page-advisory .col-subtitle,
#page-advisory .client-stack-item-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #64748B;
}

/* Level 6B: Pill Badges & Status Tags (状态胶囊与分类徽章 - 统一 11.5px) */
#page-products .scope-origin-badge,
#page-products .polarity-legend-pill,
#page-products .timing-eyebrow,
#page-products #timingBand,
#page-products #marketContextScore,
#page-products #marketContextStatus,
#page-products .market-indicators-heading [role=status],
#page-products .directory-count-badge,
#page-products .raw-source-badge,
#page-products .data-source-pill,
#page-products .hero-badge-category,
#page-products .hero-badge-code,
#page-products .hero-badge-nav,
#page-products .hero-tag-pill,
#page-products .dossier-code-pill,
#page-products .dossier-badge-cat,
#page-products .dossier-badge-risk,
#page-products .dossier-tag-pill,
#page-products .stock-industry-pill,
#page-products .quick-chips-tier-badge,
#page-products .timing-fact-header small,
#page-products .timing-fact-header small.included,
#page-products .timing-more > summary::after,
#page-products .compare-market-context > summary::after {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 640px) {
  #page-products .hero-product-name {
    font-size: 16px;
  }
  #page-products #timingScore {
    font-size: 24px;
  }
  #page-products .kpi-value,
  #page-products .timing-fact > strong,
  #page-products .market-indicator-value,
  #page-products .compare-hero-item-ret {
    font-size: 16px;
  }
}

/* ==========================================================================
   10. Historical Data Loading Wave Animation (From Uiverse.io by satyamchaudharydev)
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* From Uiverse.io by satyamchaudharydev */
.loading {
  --speed-of-animation: 0.9s;
  --gap: 6px;
  --first-color: #4c86f9;
  --second-color: #49a84c;
  --third-color: #f6bb02;
  --fourth-color: #f6bb02;
  --fifth-color: #2196f3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  gap: 6px;
  height: 100px;
}

.loading span {
  width: 4px;
  height: 50px;
  background: var(--first-color);
  animation: scale var(--speed-of-animation) ease-in-out infinite;
}

.loading span:nth-child(2) {
  background: var(--second-color);
  animation-delay: -0.8s;
}

.loading span:nth-child(3) {
  background: var(--third-color);
  animation-delay: -0.7s;
}

.loading span:nth-child(4) {
  background: var(--fourth-color);
  animation-delay: -0.6s;
}

.loading span:nth-child(5) {
  background: var(--fifth-color);
  animation-delay: -0.5s;
}

@keyframes scale {
  0%, 40%, 100% {
    transform: scaleY(0.05);
  }

  20% {
    transform: scaleY(1);
  }
}

.allocation-directory-table td .loading {
  width: 72px;
  height: 48px;
}

.allocation-directory-table td .loading span {
  height: 32px;
}

/* 11. Compact Timing Fact & Market Indicator Card Proportions */
#page-products .timing-fact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 10px;
}

#page-products .timing-fact-header {
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

#page-products .timing-fact-header > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pc-fs-label) !important;
  line-height: 1.35 !important;
}

#page-products .timing-fact-header > small {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px !important;
  line-height: 1.3 !important;
  padding: 1px 6px;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #64748B;
}

#page-products .timing-fact > strong {
  margin: 1px 0;
  font-size: 17.5px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-products .timing-fact > strong.tone-good::after,
#page-products .timing-fact > strong.tone-bad::after,
#page-products .market-indicator-value.tone-good::after,
#page-products .market-indicator-value.tone-bad::after {
  margin-left: 5px;
  padding: 0 5px;
  font-size: 10.5px;
  line-height: 1.35;
}

#page-products .timing-fact > p {
  margin: 0;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: #64748B;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-products .timing-fact-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px dashed #EEF2F6;
}

#page-products .timing-fact-footer > small {
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: #94A3B8;
  white-space: nowrap;
}

#page-products .timing-fact-footer > details {
  margin-top: 0;
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: #475569;
}

#page-products .timing-fact-footer > details > summary {
  cursor: pointer;
  color: #64748B;
  font-weight: 600;
  user-select: none;
  white-space: nowrap;
}

#page-products .timing-fact-footer > details > summary:hover {
  color: #0F172A;
}

#page-products .timing-fact-footer > details[open] {
  flex: 1 1 100%;
}

#page-products .timing-fact-footer > details[open] > summary {
  color: #C8102E;
}

#page-products .market-indicator-card {
  justify-content: space-between;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 10px;
}

#page-products .market-indicator-value {
  font-size: 17.5px !important;
  line-height: 1.25 !important;
  margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-products .market-indicator-note {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 12. Advisory Workbench Single-Glance Compact 3-Column Layout (#page-advisory) */
#page-advisory .advisory-flow-container {
  grid-template-columns: minmax(308px, 0.94fr) minmax(380px, 1.12fr) minmax(370px, 1.02fr);
  gap: 12px;
}

@media (min-width: 769px) and (max-width: 1280px) {
  #page-advisory .advisory-flow-container {
    grid-template-columns: minmax(275px, 0.9fr) minmax(320px, 1.08fr) minmax(320px, 1fr);
    gap: 10px;
  }
}

#page-advisory .advisory-col-header {
  padding: 10px 14px;
  min-height: 48px;
}

#page-advisory .advisory-col-scrollable-body,
#page-advisory .advisory-col-output .advisory-output-body {
  padding: 10px 12px;
  gap: 8px;
}

/* Column 1: Client Profile & Quick Client List */
#page-advisory .client-select {
  height: 32px;
  font-size: 12.5px;
  padding: 0 10px;
}

#page-advisory .advisory-client-card {
  padding: 10px 11px;
  gap: 7px;
  border-radius: 10px;
}

#page-advisory .client-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 0;
}

#page-advisory .client-name-box {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

#page-advisory .client-profile-name {
  font-size: 14.5px;
  white-space: nowrap;
}

#page-advisory .client-occupation-pill {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  padding: 1px 6px;
}

#page-advisory .client-profile-header .tag {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px;
  padding: 1px 7px;
}

#page-advisory .client-meta-grid {
  padding: 5px 4px;
  border-radius: 8px;
}

#page-advisory .client-meta-chip {
  padding: 1px 4px;
}

#page-advisory .meta-label {
  font-size: 10.5px;
  margin-bottom: 1px;
}

#page-advisory .meta-val {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory .client-notes-card {
  padding: 6px 9px;
  border-radius: 7px;
}

#page-advisory .client-notes-header-line {
  margin-bottom: 2px;
  font-size: 11px;
}

#page-advisory .client-notes-text {
  font-size: 11.5px;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory details.client-latest-interaction-box {
  padding: 0;
  margin-top: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

#page-advisory details.client-latest-interaction-box > summary.interaction-header-tag {
  margin: 0;
  padding: 6px 9px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  background: #f8fafc;
}

#page-advisory details.client-latest-interaction-box > summary.interaction-header-tag::-webkit-details-marker {
  display: none;
}

#page-advisory details.client-latest-interaction-box > summary.interaction-header-tag .interaction-date-text {
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: #475569;
}

#page-advisory details.client-latest-interaction-box > summary.interaction-header-tag::after {
  content: '展开';
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  background: #ffffff;
  border: 1px solid #dce3ec;
  padding: 1px 7px;
  border-radius: 999px;
}

#page-advisory details.client-latest-interaction-box[open] > summary.interaction-header-tag {
  border-bottom: 1px solid #eef2f6;
}

#page-advisory details.client-latest-interaction-box[open] > summary.interaction-header-tag::after {
  content: '收起';
  color: #c8102e;
  border-color: #fecdd3;
  background: #fff1f2;
}

#page-advisory details.client-latest-interaction-box .interaction-body-wrap {
  padding: 8px 10px;
}

#page-advisory details.client-latest-interaction-box .interaction-summary-text {
  font-size: 11.5px;
  line-height: 1.45;
}

#page-advisory details.client-latest-interaction-box .interaction-followup-text {
  margin-top: 5px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.4;
}

#page-advisory .advisory-sub-title-row {
  margin: 2px 0 0;
  padding-top: 2px;
}

#page-advisory .advisory-customer-scroll {
  gap: 5px;
}

#page-advisory .client-stack-item {
  padding: 7px 10px;
  gap: 3px;
  border-radius: 8px;
}

#page-advisory .client-stack-item-top {
  flex-wrap: nowrap;
  gap: 6px;
}

#page-advisory .client-item-name-group {
  flex-wrap: nowrap;
  min-width: 0;
  gap: 5px;
}

#page-advisory .client-stack-item-name {
  font-size: 12.5px;
  white-space: nowrap;
}

#page-advisory .client-stack-item-desc {
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column 2: Top Portfolio Plan Card with Animated Donut Chart & Collapsible 个性化配置 Drawer */
#page-advisory .allocation-questionnaire.allocation-custom-drawer {
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #f8fafc;
  padding: 0 !important;
  overflow: hidden;
}

#page-advisory .allocation-questionnaire.allocation-custom-drawer[open] {
  background: #ffffff;
  border-color: #cbd5e1;
  padding: 0 !important;
}

#page-advisory .allocation-questionnaire.allocation-custom-drawer > summary {
  margin: 0 !important;
  padding: 8px 12px;
  font-size: 12.5px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

#page-advisory .allocation-questionnaire.allocation-custom-drawer > summary .custom-drawer-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

#page-advisory .allocation-questionnaire.allocation-custom-drawer > summary .custom-drawer-sub {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  margin-right: auto;
}

#page-advisory .allocation-questionnaire.allocation-custom-drawer > summary::after {
  content: '展开配置';
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 1px 9px;
  border-radius: 999px;
}

#page-advisory .allocation-questionnaire.allocation-custom-drawer[open] > summary {
  background: #f8fafc;
  border-bottom: 1px solid #eef2f6;
}

#page-advisory .allocation-questionnaire.allocation-custom-drawer[open] > summary::after {
  content: '收起配置';
  color: #c8102e;
  border-color: #fecdd3;
  background: #fff1f2;
}

#page-advisory .allocation-custom-drawer-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#page-advisory .allocation-questionnaire-section {
  padding: 9px 10px;
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#page-advisory .allocation-q-heading {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}

#page-advisory .allocation-controls {
  padding: 8px 10px;
  gap: 6px 8px;
  border-radius: 9px;
}

#page-advisory .allocation-controls label {
  gap: 3px;
  font-size: 11px;
}

#page-advisory .allocation-controls select,
#page-advisory .allocation-controls input[type="number"] {
  height: 30px;
  font-size: 12px;
  padding: 0 8px;
}

#page-advisory .allocation-controls label.allocation-risk-toggle {
  height: 30px;
  padding: 0 9px;
  font-size: 11.5px;
}

#page-advisory .allocation-controls p {
  padding-top: 4px;
  font-size: 10.5px;
  line-height: 1.3;
  margin: 0;
}

#page-advisory .allocation-metric-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 8px;
}

#page-advisory #allocationMeasure {
  flex-shrink: 0;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

#page-advisory #allocationMetricStatus {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: #64748b;
}

#page-advisory #allocationPoolStatus {
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory .advisory-portfolio-plan-card {
  padding: 9px 12px;
  gap: 6px;
  border-radius: 13px;
}

#page-advisory .allocation-plan-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#page-advisory .allocation-draft-top {
  margin-bottom: 2px;
  gap: 6px;
}

#page-advisory .allocation-draft-header h4 {
  font-size: 14px;
  margin: 0;
}

#page-advisory .allocation-draft-header p {
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory .allocation-profile-summary {
  padding: 3px 8px !important;
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory .allocation-pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 8px 11px 9px;
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  position: relative;
}

#page-advisory .allocation-pie-headbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eef2f6;
}

#page-advisory .pie-headbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#page-advisory .pie-meta-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

#page-advisory .pie-meta-sub {
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory .pie-regen-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #dce3ec;
  background: #ffffff;
  color: #475569;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

#page-advisory .pie-regen-btn:hover {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #c8102e;
}

#page-advisory .allocation-pie-stage {
  display: flex;
  align-items: center;
  gap: 12px;
}

#page-advisory .allocation-pie {
  position: relative;
  width: 96px;
  height: 96px;
  padding: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #ffffff !important;
  border: 1px solid #e6eaf0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-advisory .allocation-pie::after {
  content: none !important;
  display: none !important;
}

#page-advisory .pie-canvas-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
}

#page-advisory #portfolioDonutSvg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center;
}

#page-advisory .allocation-pie-segment {
  cursor: pointer;
  pointer-events: stroke;
}

#page-advisory .allocation-pie-segment:hover,
#page-advisory .allocation-pie-segment:focus-visible {
  filter: brightness(1.12);
}

#page-advisory .allocation-pie-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  text-align: center;
}

#page-advisory .pie-center-eyebrow {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.1;
  white-space: nowrap;
}

#page-advisory .pie-center-num {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

#page-advisory .allocation-pie-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#page-advisory .allocation-buckets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#page-advisory .allocation-buckets > button.bucket-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e6eaf0;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#page-advisory .allocation-buckets > button.bucket-card:hover {
  border-color: #cbd5e1;
  background: #fafbfc;
}

#page-advisory .allocation-buckets > button.bucket-card.is-zero {
  opacity: 0.65;
  background: #f8fafc;
}

#page-advisory .bucket-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

#page-advisory .bucket-card-top span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

#page-advisory .bucket-card-top em {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

#page-advisory .bucket-card-top strong {
  font-size: 12.5px;
  font-weight: 750;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#page-advisory .bucket-bar-track {
  width: 100%;
  height: 4.5px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

#page-advisory .bucket-bar-track i {
  position: static !important;
  display: block;
  height: 100%;
  border-radius: 999px;
  transform-origin: left center;
}

#page-advisory .allocation-plan-body > .allocation-note {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
  line-height: 1.3;
}

#page-advisory .portfolio-items-list {
  gap: 5px;
}

#page-advisory .allocation-tool {
  padding: 6px 10px;
  border-radius: 8px;
}

#page-advisory .allocation-tool > div {
  margin-bottom: 2px;
}

#page-advisory .allocation-tool strong {
  display: inline;
  font-size: 12px;
  margin-right: 6px;
}

#page-advisory .allocation-tool small {
  display: inline;
  margin-top: 0;
  font-size: 10.5px;
}

#page-advisory .allocation-tool p {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory .allocation-details {
  padding: 4px 0 0;
}

#page-advisory .allocation-footer {
  padding-top: 5px;
  justify-content: flex-end;
}

/* Column 3: Compact Script Toolbar, Context Strip, Ready Card & Outline Steps */
#page-advisory .advisory-script-toolbar {
  padding: 8px 10px;
  gap: 6px;
  border-radius: 10px;
}

#page-advisory .advisory-script-toolbar .filter-select,
#page-advisory #copyScriptBtn {
  height: 30px;
}

#page-advisory .advisory-script-toolbar .btn {
  height: 28px;
  font-size: 11.5px;
}

#page-advisory .script-rendered-box {
  padding: 10px 12px;
  gap: 8px;
}

#page-advisory .script-context-strip {
  padding: 8px 10px;
  gap: 6px;
  border-radius: 10px;
}

#page-advisory .script-context-pair {
  gap: 8px;
}

#page-advisory .script-context-item {
  padding: 6px 9px;
}

#page-advisory .script-ready-card {
  padding: 10px 12px;
  border-radius: 10px;
}

#page-advisory .script-ready-title {
  font-size: 13.5px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory .script-ready-desc {
  font-size: 11.5px;
  line-height: 1.4;
  max-width: none;
  margin: 0 auto 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-advisory .script-action-primary,
#page-advisory .script-action-secondary {
  padding: 5px 12px;
  font-size: 12px;
}

#page-advisory .script-outline-preview {
  padding: 9px 11px;
  border-radius: 10px;
}

#page-advisory .script-outline-header {
  margin-bottom: 6px;
  font-size: 12px;
}

#page-advisory .script-outline-steps {
  gap: 6px;
}

#page-advisory .script-outline-step {
  padding: 7px 10px;
  gap: 8px;
  border-radius: 8px;
}

#page-advisory .script-outline-step strong {
  font-size: 12px;
  margin-bottom: 1px;
}

#page-advisory .script-outline-step p {
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Expanded outreach categories stay visible on desktop and scroll within the nav on phones. */
@media(min-width:769px){#page-events .radar-category-nav{flex-wrap:wrap;}#page-events .radar-category-btn{flex:1 0 auto;padding:10px 12px;}}

/* ==========================================================================
   Preline-Inspired Custom Dropdown System (hs-dropdown)
   ========================================================================== */
.hs-dropdown {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.hs-dropdown.hs-dropdown--block {
  display: flex;
  width: 100%;
}
.hs-dropdown > select.hs-native-select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.hs-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 118px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  color: #1E293B;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.hs-dropdown.hs-dropdown--mini > .hs-dropdown-toggle {
  height: 34px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
}
.hs-dropdown.hs-dropdown--accent > .hs-dropdown-toggle {
  color: #C8102E;
}
.hs-dropdown-toggle:hover:not(:disabled) {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}
.hs-dropdown.hs-dropdown--accent > .hs-dropdown-toggle:hover:not(:disabled) {
  color: #B80B29;
  border-color: #F4A8B5;
  background: #FFF8F9;
}
.hs-dropdown.hs-dropdown-open > .hs-dropdown-toggle,
.hs-dropdown-toggle:focus-visible {
  outline: none;
  background: #FFFFFF;
  border-color: #C8102E;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}
.hs-dropdown-toggle:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.hs-dropdown-toggle-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  flex: 1;
}
.hs-dropdown-caret {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #64748B;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
}
.hs-dropdown-toggle:hover .hs-dropdown-caret {
  color: #334155;
}
.hs-dropdown.hs-dropdown-open > .hs-dropdown-toggle .hs-dropdown-caret {
  transform: rotate(180deg);
  color: #C8102E;
}

/* Roleplay Wrapped Select as hs-dropdown */
#page-roleplay .rp-wrapped-select.hs-dropdown {
  display: block;
  width: 100%;
  cursor: pointer;
  user-select: none;
}
#page-roleplay .rp-wrapped-select.hs-dropdown select {
  pointer-events: none !important;
  z-index: -1 !important;
}
#page-roleplay .rp-wrapped-select.hs-dropdown.hs-dropdown-open {
  background: #FFFFFF;
  border-color: #C8102E;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}
#page-roleplay .rp-wrapped-select.hs-dropdown.hs-dropdown-open::after {
  transform: translateY(-50%) rotate(180deg);
  background-color: #FFF1F2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Floating Dropdown Menu */
.hs-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: max(100%, 200px);
  max-width: min(360px, 90vw);
  max-height: 280px;
  overflow-y: auto;
  z-index: 200;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.14), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(-5px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.16s;
}
.hs-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.hs-dropdown.hs-dropdown-open > .hs-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.hs-dropdown-menu.hs-align-right {
  left: auto;
  right: 0;
}
.hs-dropdown.hs-dropdown--block > .hs-dropdown-menu,
#page-roleplay .rp-wrapped-select.hs-dropdown > .hs-dropdown-menu {
  left: 0;
  right: 0;
  min-width: 100%;
  max-width: 100%;
}
.hs-dropdown-menu::-webkit-scrollbar {
  width: 5px;
}
.hs-dropdown-menu::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
}
.hs-dropdown-menu-inner {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hs-dropdown-group-label {
  padding: 6px 10px 3px;
  font-size: 11px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.03em;
  user-select: none;
}
.hs-dropdown-group-label:not(:first-child) {
  margin-top: 3px;
  border-top: 1px solid #F1F5F9;
  padding-top: 7px;
}
.hs-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334155;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.hs-dropdown-item:hover,
.hs-dropdown-item:focus-visible {
  outline: none;
  background: #F1F5F9;
  color: #0F172A;
}
.hs-dropdown-item.is-selected {
  background: #FFF1F2;
  color: #C8102E;
  font-weight: 600;
}
.hs-dropdown-item-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.hs-dropdown-item-title {
  font-size: 12.5px;
  font-weight: inherit;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-dropdown-item-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: #64748B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-dropdown-item.is-selected .hs-dropdown-item-sub {
  color: #B80B29;
  opacity: 0.85;
}
.hs-dropdown-item-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #C8102E;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.hs-dropdown-item.is-selected .hs-dropdown-item-check {
  opacity: 1;
}

/* Details-based Dropdown Menus (.radar-more-menu & .map-city-selector) */
#page-events .radar-more-menu summary,
#page-events .map-city-selector summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  list-style: none;
  transition: all 0.15s ease;
  user-select: none;
}
#page-events .radar-more-menu summary::-webkit-details-marker,
#page-events .map-city-selector summary::-webkit-details-marker {
  display: none;
}
#page-events .radar-more-menu summary::after,
#page-events .map-city-selector summary::after {
  content: '';
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-events .radar-more-menu summary:hover,
#page-events .map-city-selector summary:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}
#page-events .radar-more-menu[open] summary,
#page-events .map-city-selector[open] summary {
  border-color: #C8102E;
  color: #C8102E;
  background: #FFF8F9;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08);
}
#page-events .radar-more-menu[open] summary::after,
#page-events .map-city-selector[open] summary::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
#page-events .radar-more-menu[open] > div {
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.14), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#page-events .radar-more-menu button {
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  transition: background-color 0.12s ease, color 0.12s ease;
}
#page-events .radar-more-menu button:hover {
  background: #F1F5F9;
  color: #0F172A;
}

/* Append to the established local stylesheet; scoped to the new tool. */
.portfolio-history-panel{margin:14px 0;padding:18px;border:1px solid #e4e9f1;border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(20,35,61,.035);min-width:0}
.portfolio-history-panel [hidden]{display:none!important}
.portfolio-history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.portfolio-history-heading h3{margin:0;font-size:15px;color:#142238}.portfolio-history-heading p{font-size:12px;color:#71819a;margin:5px 0 0}
.portfolio-history-panel input,.portfolio-history-panel select{box-sizing:border-box;min-width:0;border:1px solid #dce4ef;border-radius:8px;background:#fff;padding:8px 9px;font:inherit;color:#24334a;min-height:36px}.portfolio-history-panel input:focus,.portfolio-history-panel select:focus{outline:2px solid #f3c3cd;outline-offset:1px}
.portfolio-history-search{position:relative;margin-bottom:12px}.portfolio-history-search-row{display:flex;gap:8px}.portfolio-history-search-row select{width:145px;flex:0 0 145px;font-size:12px}.portfolio-history-search-row input{flex:1;width:100%;font-size:13px}
.portfolio-history-search-results{position:absolute;z-index:8;top:calc(100% + 4px);left:0;right:0;max-height:240px;overflow-y:auto;border:1px solid #dce4ef;border-radius:10px;background:white;box-shadow:0 8px 24px #16284418}.portfolio-history-search-results button{display:block;width:100%;text-align:left;padding:10px 12px;background:white;border:0;border-bottom:1px solid #eff2f6;cursor:pointer}.portfolio-history-search-results button:hover{background:#fff3f5}.portfolio-history-search-results strong{display:block;font-size:13px;white-space:normal}.portfolio-history-search-results small{display:block;margin-top:3px;color:#71819a}.portfolio-history-search-results p{padding:8px 12px;color:#71819a;font-size:12px}
.portfolio-history-item{display:grid;grid-template-columns:minmax(0,1fr) 88px auto;gap:8px;align-items:center;border-bottom:1px solid #edf0f5;padding:10px 0}.portfolio-history-item strong{display:block;font-size:13px;line-height:1.5;overflow-wrap:anywhere}.portfolio-history-item small{display:block;font-size:12px;color:#7b8ca5;margin-top:2px}.portfolio-history-item label{display:flex;align-items:center;gap:4px}.portfolio-history-item input{width:70px;text-align:right}.portfolio-history-empty{font-size:12px;color:#71819a;padding:12px 0}
.portfolio-history-cash{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:12px 0;font-size:12px;color:#71819a}.portfolio-history-cash input{width:74px;text-align:right}.portfolio-history-cash strong{font-weight:600;color:#b93a52}.portfolio-history-cash strong.is-valid{color:#168267}
.portfolio-history-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:10px;border-top:1px dashed #e4e9f1}.portfolio-history-actions label{font-size:12px;color:#71819a;display:flex;gap:6px;align-items:center}.portfolio-history-custom{display:flex;gap:10px;margin-top:10px}.portfolio-history-custom label{flex:1;min-width:0;font-size:12px;color:#71819a}.portfolio-history-custom input{display:block;width:100%;margin-top:4px}
.portfolio-history-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0;color:#71819a;font-size:12px}.portfolio-history-status p{flex:1;min-width:120px;line-height:1.7;margin:0}.portfolio-history-spinner{display:none;width:16px;height:16px;flex:0 0 16px;border:2px solid #f5d3da;border-top-color:#c9082d;border-radius:50%;animation:portfolio-history-spin .8s linear infinite}.portfolio-history-panel[aria-busy=true] .portfolio-history-spinner{display:inline-block}@keyframes portfolio-history-spin{to{transform:rotate(360deg)}}
.portfolio-history-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.portfolio-history-stats>div{padding:13px;background:#f8fafc;border:1px solid #edf0f5;border-radius:10px}.portfolio-history-stats span{display:block;font-size:12px;color:#71819a}.portfolio-history-stats strong{display:block;font-size:22px;margin-top:6px;color:#18263d}.portfolio-history-stats strong.tone-good{color:#c9082d}.portfolio-history-stats strong.tone-bad{color:#159b78}
.portfolio-history-chart-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 6px}.portfolio-history-chart-heading small{font-size:11.5px;color:#71819a;line-height:1.6}.portfolio-history-chart-heading select{font-size:12px;flex:0 0 auto}.portfolio-history-chart{position:relative;width:100%;height:205px;min-width:0}
.portfolio-history-table-scroll{overflow-x:auto;margin-top:14px;max-width:100%;border:1px solid #edf0f5;border-radius:8px}.portfolio-history-table-scroll table{width:100%;min-width:560px;border-collapse:collapse;font-size:12px;text-align:left}.portfolio-history-table-scroll th{padding:9px;background:#f8fafc;color:#71819a;white-space:nowrap;font-weight:500}.portfolio-history-table-scroll td{padding:10px 9px;border-top:1px solid #edf0f5;white-space:nowrap}.portfolio-history-table-scroll td:first-child{white-space:normal;min-width:160px}.portfolio-history-table-scroll strong{display:block;font-size:12px;line-height:1.5}.portfolio-history-table-scroll small{display:block;color:#71819a;margin-top:3px;font-size:11px}.portfolio-history-note{font-size:11.5px!important;line-height:1.8;color:#71819a;margin:10px 0 0}
@media(max-width:600px){.portfolio-history-panel{padding:13px}.portfolio-history-heading{align-items:flex-start}.portfolio-history-search-row{flex-wrap:wrap}.portfolio-history-search-row select{width:100%;flex:1 1 100%}.portfolio-history-item{grid-template-columns:minmax(0,1fr) 80px auto;gap:4px}.portfolio-history-item .btn{padding:5px;font-size:11px}.portfolio-history-custom{flex-wrap:wrap}.portfolio-history-actions .btn{flex:1}.portfolio-history-stats strong{font-size:20px}.portfolio-history-chart-heading{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.portfolio-history-spinner{animation:none}}
#page-advisory #col2ScrollableBody.is-loading-allocation > #portfolioHistoryPanel, #page-advisory #col2ScrollableBody:has(#allocationWaiting:not([hidden])) > #portfolioHistoryPanel{display:block!important}

/* Direct recommended-plan history and independent manual selector. */
.portfolio-history-panel[hidden]{display:none!important}
.portfolio-history-panel.is-plan-history .portfolio-history-search,.portfolio-history-panel.is-plan-history .portfolio-history-cash,#portfolioPlanHistoryImport{display:none!important}
.portfolio-history-item.is-readonly{grid-template-columns:minmax(0,1fr) auto}.portfolio-history-item.is-readonly>strong{font-size:13px;color:#c9082d}
#portfolioHistoryProductSelect{width:100%;margin-top:8px;font-size:12px}.allocation-plan-history-action{margin:10px 0 12px}.allocation-plan-history-action .btn{width:100%}
#page-advisory #col2ScrollableBody.is-loading-allocation > #portfolioPlanHistoryPanel:not([hidden]),#page-advisory #col2ScrollableBody:has(#allocationWaiting:not([hidden])) > #portfolioPlanHistoryPanel:not([hidden]){display:block!important}

/* v174: one visible entry above the allocation chart, with an inline settings drawer. */
#page-advisory .allocation-configure-entry{margin:0 0 12px}
#page-advisory .allocation-configure-button{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px 14px;border:1px solid #b90829;border-radius:12px;background:linear-gradient(110deg,#d20b32,#ad102c);box-shadow:0 5px 14px rgba(200,16,46,.16);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:box-shadow .16s,background .16s}
#page-advisory .allocation-configure-button:hover{background:linear-gradient(110deg,#dc113b,#ba1131);box-shadow:0 6px 17px rgba(200,16,46,.23)}
#page-advisory .allocation-configure-button:focus-visible{outline:3px solid #f3aabb;outline-offset:3px}
#page-advisory .allocation-configure-label{font-size:15px;font-weight:700;white-space:nowrap}
#page-advisory .allocation-configure-button small{margin-left:auto;font-size:12px;font-weight:400;color:#ffe5eb}
#page-advisory .allocation-configure-icon,#page-advisory .allocation-configure-chevron{flex:0 0 auto}
#page-advisory .allocation-configure-chevron{transition:transform .16s}
#page-advisory .allocation-configure-button[aria-expanded=true] .allocation-configure-chevron{transform:rotate(180deg)}
#page-advisory #allocationQuestionnaire{margin:0 0 12px}
#page-advisory #allocationQuestionnaire:not([open]){display:none!important}
#page-advisory #col2ScrollableBody.is-loading-allocation > #allocationConfigureEntry,#page-advisory #col2ScrollableBody:has(#allocationWaiting:not([hidden])) > #allocationConfigureEntry,#page-advisory #col2ScrollableBody.is-loading-allocation > #allocationQuestionnaire[open],#page-advisory #col2ScrollableBody:has(#allocationWaiting:not([hidden])) > #allocationQuestionnaire[open]{display:block!important}
@media(max-width:400px){#page-advisory .allocation-configure-button{gap:8px;padding:11px 12px}#page-advisory .allocation-configure-button small{font-size:11px}}
@media(prefers-reduced-motion:reduce){#page-advisory .allocation-configure-button,#page-advisory .allocation-configure-chevron{transition:none}}