/* Old production site: visual-only premium theme for the cross-account dashboard. */
.app-shell:has(.cross-page) {
  --xl-navy-950: #04151d;
  --xl-navy-900: #071f2b;
  --xl-navy-800: #0c3442;
  --xl-gold: #d6a54b;
  --xl-gold-bright: #edc66f;
  --xl-gold-soft: #fff6df;
  --xl-surface: #ffffff;
  --xl-page: #f3f6f9;
  --xl-line: #d9e1e9;
  --xl-text: #10243a;
}

.app-shell:has(.cross-page) .sidebar,
.app-shell:has(.cross-page) .topbar {
  background: linear-gradient(118deg, #04151d 0%, #071f2b 48%, #0b3440 100%) !important;
}

.app-shell:has(.cross-page) .topbar {
  border-bottom: 1px solid rgba(214, 165, 75, .42) !important;
  box-shadow: 0 5px 18px rgba(3, 17, 31, .16);
}

.app-shell:has(.cross-page) .brand {
  border-bottom-color: rgba(214, 165, 75, .28) !important;
}

.app-shell:has(.cross-page) .brand-mark,
.app-shell:has(.cross-page) .brand b {
  color: var(--xl-gold-bright) !important;
}

.app-shell:has(.cross-page) .brand b {
  font-size: 0;
}

.app-shell:has(.cross-page) .brand b::after {
  content: "广告管理中心";
  font-size: 18px;
  letter-spacing: .02em;
}

.app-shell:has(.cross-page) .sidebar nav a {
  border: 1px solid transparent;
}

.app-shell:has(.cross-page) .sidebar nav a.router-link-active {
  color: #fff8e6 !important;
  border-color: rgba(237, 198, 111, .55) !important;
  background: linear-gradient(90deg, rgba(197, 137, 38, .9), rgba(222, 168, 72, .72)) !important;
  box-shadow: inset 3px 0 0 #ffe0a1, 0 7px 18px rgba(0, 0, 0, .16);
}

.app-shell:has(.cross-page) .global-context {
  border-color: rgba(214, 165, 75, .36) !important;
  background: rgba(255, 255, 255, .035) !important;
}

.app-shell:has(.cross-page) .route-content {
  background: var(--xl-page) !important;
}

.cross-page {
  --premium-gold: var(--xl-gold, #d6a54b);
  --premium-navy: var(--xl-navy-900, #06182b);
  color: var(--xl-text, #10243a);
  gap: 10px !important;
  padding: 16px 18px 20px !important;
}

.cross-page .hero {
  min-height: 42px;
  justify-content: flex-end !important;
  margin: 0 !important;
}

.cross-page .hero > div:first-child {
  display: none !important;
}

.cross-page .hero-actions {
  gap: 9px !important;
}

.cross-page .hero-actions .health-pill,
.cross-page .hero-actions .runtime,
.cross-page .hero-actions > .el-button {
  min-height: 42px;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(3, 17, 31, .08);
}

.cross-page .runtime {
  border: 1px solid #d3a24a !important;
  background: linear-gradient(180deg, #fffaf0, #fff3d5) !important;
  color: #7d5414 !important;
}

.cross-page .runtime i {
  background: #d3a24a !important;
  box-shadow: 0 0 0 4px rgba(211, 162, 74, .15) !important;
}

.cross-page .hero-actions > .el-button--primary {
  border-color: #0a2945 !important;
  background: linear-gradient(180deg, #0d3152, #061a2d) !important;
}

.cross-page .panel {
  border: 1px solid var(--xl-line, #d9e1e9) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 7px 22px rgba(16, 36, 58, .055);
}

.cross-page .board-bar {
  min-height: 60px;
  padding: 10px 14px !important;
  border-top: 2px solid rgba(214, 165, 75, .68) !important;
}

.cross-page .board-bar .el-button {
  border-color: #cbd6e2 !important;
  background: #fff !important;
  color: #17334f !important;
}

.cross-page .board-bar .el-button:nth-of-type(2) {
  border-color: #d5ab60 !important;
  background: var(--xl-gold-soft, #fff6df) !important;
  color: #845914 !important;
}

.cross-page .summary-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(118px, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid #18334e !important;
  border-radius: 10px !important;
  background: radial-gradient(circle at 50% 0%, #0b2d4a 0, #061a2d 58%, #03121f 100%) !important;
  box-shadow: 0 10px 26px rgba(3, 17, 31, .15);
}

.cross-page .summary-grid article {
  position: relative;
  min-width: 0;
  padding: 17px 20px !important;
  border: 0 !important;
  border-right: 1px solid rgba(214, 165, 75, .7) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cross-page .summary-grid article:last-child {
  border-right: 0 !important;
}

.cross-page .summary-grid article span,
.cross-page .summary-grid article small {
  color: #c6d1dc !important;
}

.cross-page .summary-grid article b {
  color: #f8fbff !important;
  font-size: clamp(24px, 1.6vw, 32px) !important;
  font-variant-numeric: tabular-nums;
}

.cross-page .summary-grid article:nth-child(4) {
  z-index: 1;
  outline: 1px solid rgba(237, 198, 111, .95);
  outline-offset: -5px;
  background: linear-gradient(180deg, rgba(214, 165, 75, .08), rgba(214, 165, 75, .01)) !important;
}

.cross-page .summary-grid article:nth-child(4) span,
.cross-page .summary-grid article:nth-child(4) b,
.cross-page .summary-grid article:nth-child(4) small {
  color: var(--xl-gold-bright, #edc66f) !important;
}

.cross-page .account-strip {
  border-color: #d4dee8 !important;
  background: #fbfcfe !important;
}

.cross-page .account-metric-card {
  border-color: #d9e2eb !important;
  background: #fff !important;
  box-shadow: 0 3px 11px rgba(16, 36, 58, .05);
}

.cross-page .workbench {
  overflow: hidden;
}

.cross-page .toolbar {
  gap: 9px !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid #dbe3eb !important;
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
}

.cross-page .tabs {
  overflow: hidden;
  border: 1px solid #c9d5e0 !important;
  border-radius: 7px !important;
  background: #fff !important;
}

.cross-page .tabs button {
  min-height: 38px;
  border-right: 1px solid #d7e0e8 !important;
  background: #fff !important;
  color: #183450 !important;
}

.cross-page .tabs button:last-child {
  border-right: 0 !important;
}

.cross-page .tabs button.active {
  background: linear-gradient(180deg, #0c3152, #071d32) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 var(--premium-gold) !important;
}

.cross-page .selection-bar {
  padding: 10px 14px !important;
  border-bottom: 1px solid #dde5ed !important;
  background: #f8fafc !important;
}

.cross-page .tone-filter,
.cross-page .quick-filter {
  min-height: 34px;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(16, 36, 58, .045);
  font-weight: 650;
}

.cross-page .tone-filter.green { color: #087a4a !important; border-color: #91d8b6 !important; }
.cross-page .tone-filter.blue { color: #0b5fae !important; border-color: #9fc8ef !important; }
.cross-page .tone-filter.orange { color: #9c5b00 !important; border-color: #e9bd75 !important; }
.cross-page .tone-filter.red { color: #ad2d2d !important; border-color: #e6a0a0 !important; }
.cross-page .tone-filter.none { color: #45596e !important; border-color: #cfd9e3 !important; }
.cross-page .tone-filter.black { color: #fff !important; border-color: #172435 !important; background: #172435 !important; }

.cross-page .table-wrap {
  border-top: 1px solid #d9e2eb !important;
  background: #fff !important;
}

.cross-page .table-wrap table {
  font-variant-numeric: tabular-nums;
}

.cross-page .table-wrap th {
  height: 46px;
  border-bottom: 1px solid #bdcbd8 !important;
  background: linear-gradient(180deg, #f8fafc, #eef3f7) !important;
  color: #29445f !important;
  font-weight: 750 !important;
}

.cross-page .table-wrap td {
  border-bottom-color: rgba(149, 164, 180, .34) !important;
}

.cross-page .smart-tone.tone-green,
.cross-page .smart-tone.tone-green td {
  background: #087344 !important;
  color: #fff !important;
}

.cross-page .smart-tone.tone-blue,
.cross-page .smart-tone.tone-blue td {
  background: #08477f !important;
  color: #fff !important;
}

.cross-page .smart-tone.tone-orange,
.cross-page .smart-tone.tone-orange td {
  background: #cf7200 !important;
  color: #fff !important;
}

.cross-page .smart-tone.tone-red,
.cross-page .smart-tone.tone-red td {
  background: #a9151d !important;
  color: #fff !important;
}

.cross-page .smart-tone.tone-green b,
.cross-page .smart-tone.tone-green small,
.cross-page .smart-tone.tone-blue b,
.cross-page .smart-tone.tone-blue small,
.cross-page .smart-tone.tone-orange b,
.cross-page .smart-tone.tone-orange small,
.cross-page .smart-tone.tone-red b,
.cross-page .smart-tone.tone-red small {
  color: inherit !important;
}

.cross-page .smart-tone.tone-none,
.cross-page .smart-tone.tone-none td {
  background: #fff !important;
  color: #10243a !important;
}

.cross-page .smart-tone.tone-black,
.cross-page .smart-tone.tone-black td,
.cross-page .table-wrap tr.paused,
.cross-page .table-wrap tr.paused td {
  background: #101923 !important;
  color: #f7fafc !important;
}

.cross-page .smart-tone.tone-green .row-switch,
.cross-page .smart-tone.tone-blue .row-switch,
.cross-page .smart-tone.tone-orange .row-switch,
.cross-page .smart-tone.tone-red .row-switch {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .36);
}

.cross-page .job-drawer {
  border: 1px solid rgba(214, 165, 75, .62) !important;
  background: linear-gradient(160deg, #071c30, #03121f) !important;
  color: #f8fbff !important;
  box-shadow: 0 14px 40px rgba(3, 17, 31, .32) !important;
}

.cross-page .job-drawer button {
  border-color: rgba(237, 198, 111, .72) !important;
  color: var(--xl-gold-bright, #edc66f) !important;
}

@media (max-width: 1150px) {
  .cross-page .summary-grid {
    grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
  }

  .cross-page .summary-grid article:nth-child(4) {
    border-right: 0 !important;
  }
}

@media (max-width: 980px) {
  .cross-page .summary-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  }

  .cross-page .hero-actions {
    flex-wrap: wrap;
  }
}


/* v3: preserve the reactive account row and keep the premium application chrome on every route. */
.app-shell .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 35 !important;
  background:
    radial-gradient(circle at 48% -120%, rgba(49, 129, 139, .28), transparent 54%),
    linear-gradient(118deg, #04151d 0%, #071f2b 48%, #0b3440 100%) !important;
  border-bottom-color: rgba(220, 176, 91, .58) !important;
}

.app-shell .sidebar {
  background: linear-gradient(180deg, #04151d 0%, #071f2b 56%, #092b35 100%) !important;
  border-right-color: rgba(220, 176, 91, .32) !important;
}

.app-shell .brand b {
  font-size: 0 !important;
}

.app-shell .brand b::after {
  content: "广告管理中心";
  color: #f8fbfc;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: .02em;
}

.app-shell .sidebar nav a.active {
  background: linear-gradient(115deg, #9f6d25 0%, #c7923d 56%, #d8aa5d 100%) !important;
  color: #fff !important;
  border-color: #e3bd78 !important;
  box-shadow: 0 8px 20px rgba(82, 53, 15, .24), inset 0 1px 0 rgba(255,255,255,.26) !important;
}

.app-shell .global-context {
  border-color: rgba(220, 176, 91, .46) !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.app-shell .global-context label {
  background: linear-gradient(180deg, rgba(17, 58, 70, .94), rgba(7, 35, 45, .96)) !important;
  border-color: rgba(143, 185, 191, .28) !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.app-shell .global-context label:focus-within {
  background: linear-gradient(180deg, rgba(24, 75, 85, .98), rgba(9, 43, 52, .98)) !important;
  border-color: rgba(220, 176, 91, .82) !important;
  box-shadow: inset 0 -2px 0 #dcb05b, 0 0 0 2px rgba(220, 176, 91, .10) !important;
}

.app-shell .global-context span {
  color: #a9c6cf !important;
}

.app-shell .global-context select {
  color: #f8fbfc !important;
}

.cross-page .hero {
  min-height: 50px !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.cross-page .hero > div:first-child {
  display: block !important;
  min-width: 0;
}

.cross-page .hero h1 {
  margin: 0 !important;
  color: #0b2835 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

.cross-page .hero p,
.cross-page .hero .eyebrow {
  display: none !important;
}