/* theme-tokens.css - 主题层：白天 / 夜间 CSS 变量 + 主题切换开关
   结构：:root / html[data-theme='dark']  → 夜间变量（默认）
        html[data-theme='light']        → 白天变量
        .theme-toggle*                  → 主题切换开关组件 */
:root,
html[data-theme='dark'] {
  color-scheme: dark;

  --t-page-bg-color: #000000;
  --t-page-bg-image: url('../img/ui/bg.png');
  --t-page-bg-filter: none;
  --t-page-text: #ffffff;

  --t-panel-bg: #091128;
  --t-panel-border: #2f66f2;
  --t-panel-border-soft: rgba(47, 102, 242, 0.8);
  --t-block-bg: #11204a;
  --t-input-bg: #09152d;
  --t-input-bg-deep: #020d29;
  --t-input-bg-plain: #091128;
  --t-input-border: #384870;
  --t-input-text: #ffffff;
  --t-input-placeholder: rgba(212, 237, 253, 0.8);
  --t-media-bg: #081934;
  --t-media-border: #0e6cca;
  --t-overlay-bg: rgba(9, 17, 40, 0.7);
  --t-loading-bg: rgba(9, 17, 40, 0.6);
  --t-scrollbar-color: #3388ff;
  --t-hover-soft: rgba(255, 255, 255, 0.1);

  --t-text-1: #ffffff;
  --t-text-2: #d8f0ff;
  --t-text-3: #d4edfd;
  --t-text-4: #d4e5fb;
  --t-text-5: #e6f2ff;
  --t-text-muted: #a6b7d1;
  --t-text-legend: #85aad3;
  --t-text-legend-value: #d1e2ff;
  --t-text-tip: #999999;

  --t-table-head-bg: #092650;
  --t-table-head-color: #d4edfd;
  --t-table-row-color: #d8f0ff;
  --t-table-stripe-image: url('../img/ui/table_common_bg.svg');
  --t-table-stripe-2: rgba(41, 137, 255, 0.1);
  --t-table-row-hover: linear-gradient(270deg, #072358 0%, #2989ff 100%);
  --t-table-striped-bg: rgba(96, 178, 255, 0.2);
  --t-table-striped-hover: rgba(156, 207, 255, 0.1);
  --t-row-alt: rgba(41, 137, 255, 0.1);
  --t-row-odd: #023164;
  --t-legend-bg: rgba(108, 128, 151, 0.15);

  --t-accent: #0091ff;
  --t-accent-dark: #016ae0;
  --t-accent-2: #2989ff;
  --t-btn-cancel-bg: #11204a;
  --t-btn-primary-bg: #0d3f80;
  --t-btn-ok-bg: #0091ff;
  --t-btn-action-image: url('../img/ui/action-btn-bg.png');
  --t-btn-action-bg-color: #545454;
  --t-btn-action-color: #ffffff;
  --t-btn-action-opacity: 0.9;

  --t-title-image: url('../img/ui/title-bg.png');
  --t-title-image-medium: url('../img/ui/title-bg-medium.png');
  --t-title-image-long: url('../img/ui/title-bg-long.png');
  --t-title-color: #e6f2ff;

  --t-nav-image: url('../img/ui/btn-noselect-bg.png');
  --t-nav-image-active: url('../img/ui/btn-selected-bg.png');
  --t-nav-color: #d4e5fb;
  --t-nav-color-active: #d4e5fb;
  --t-nav-deco: linear-gradient(180deg, #0f63efc7, #1999ff0a);

  --t-header-grad: linear-gradient(
    90deg,
    rgba(0, 121, 255, 0.26) 0%,
    rgba(0, 121, 255, 0.26) 28.48%,
    rgba(0, 119, 255, 0.24) 36.94%,
    rgba(0, 118, 255, 0.16) 55.6%,
    rgba(0, 96, 208, 0) 100%
  );
  --t-header-border: rgba(41, 137, 255, 0.5);
  --t-header-border-image: linear-gradient(
      36deg,
      rgba(226, 236, 255, 0),
      rgba(234, 241, 255, 0.76),
      rgba(226, 236, 255, 0)
    )
    2 2;
  --t-header-text: #ffffff;
  --t-header-text-2: #d4e5fb;
  --t-header-shadow: 0 0 6px rgba(41, 137, 255, 0.6);

  --t-dropdown-bg: #091128;
  --t-dropdown-border: rgb(0, 158, 255);
  --t-dropdown-shadow: 0 4px 15px rgba(0, 158, 255, 0.4);
  --t-dropdown-item-color: #d4e5fb;
  --t-dropdown-item-hover-bg: rgb(0, 158, 255);
  --t-dropdown-item-hover-color: #ffffff;
  --t-dropdown-hover-bg: #767676;
  --t-dropdown-hover-color: #ffffff;

  --t-btn-color: #ffffff;

  --t-login-card-image: url('../img/ui/login-card-bg.svg');
  --t-login-card-filter: none;
  --t-login-card-bg: transparent;
  --t-login-card-border: transparent;
  --t-login-card-shadow: none;
  --t-login-header-image: url('../img/ui/login-header.png');
  --t-login-header-filter: none;
  --t-login-btn-image: url('../img/ui/btn.png');
  --t-login-title-grad: linear-gradient(to bottom, #fff 0% 30%, #77a6ff);
  --t-login-title-shadow: drop-shadow(0 4px 1px rgba(19, 80, 143, 0.66));
  --t-login-input-bg: rgba(0, 0, 0, 0.1);
  --t-login-tab-color: rgba(255, 255, 255, 0.6);
  --t-login-tab-hover: rgba(255, 255, 255, 0.9);
  --t-login-tab-active: #ffffff;
  --t-login-tab-border: #337ab7;
  --t-login-tab-line: rgba(255, 255, 255, 0.15);
  --t-login-input-placeholder: rgba(255, 255, 255, 0.6);
  --t-qrcode-bg-image: url('../img/ui/qrcode-bg.png');
  --t-qrcode-bg-color: transparent;
  --t-qrcode-filter: none;
  --t-qrcode-border: transparent;
  --t-qrcode-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  --t-qrcode-loading-bg: rgba(255, 255, 255, 0.1);
  --t-qrcode-loading-border: rgba(255, 255, 255, 0.2);

  --modal-bg-color: #091128;
  --modal-border-color: #009eff;
  --t-modal-grad: linear-gradient(
    0deg,
    rgba(4, 28, 46, 0) 0%,
    rgba(3, 28, 46, 0) 0.3%,
    rgba(2, 46, 82, 0.31) 18.4%,
    rgba(1, 61, 112, 0.56) 36.4%,
    rgba(1, 73, 135, 0.75) 53.9%,
    rgba(0, 82, 152, 0.89) 70.6%,
    rgba(0, 87, 162, 0.97) 86.3%,
    #0059a6 100%
  );
  --t-modal-grad-opacity: 0.5;
  --t-close-color: #ffffff;
  --t-modal-title-image: none;
  --t-modal-title-image-opacity: 1;
  --t-modal-title-image-filter: none;

  --t-chart-axis-label: #d8f0ff;
  --t-chart-title-bg: transparent;
  --t-chart-car-image: url('../img/ui/car.png') center center no-repeat;
  --t-chart-car-shadow: inset 0px 0 8px 0px rgba(43, 123, 241, 0.6);
  --t-chart-car-border: 1px solid rgba(42, 123, 241, 0.3);
  --t-chart-ring-track: rgba(150, 207, 255, 0.1);

  --t-carinfo-item-bg: rgba(3, 76, 106, 0.7);
  --t-carinfo-item-hover: rgba(3, 76, 106, 1);
  --t-carinfo-item-selected: #016ae0;
  --t-switch-bg: #032439;
  --t-switch-border: #016ae0;
  --t-gate-bg: #515151;
  --t-media-bar-bg: rgba(11, 21, 33, 0.3);
  --t-media-bar-color: #ffffff;
  --t-lineup-bg: #091128;
  --t-park-switch-bg: rgba(2, 49, 100, 0.3);
  --t-park-switch-item: linear-gradient(
    90deg,
    rgba(0, 146, 255, 0.24) 0%,
    rgba(0, 126, 231, 0.176) 35.5%,
    rgba(0, 84, 180, 0.032) 100%
  );
  --t-park-switch-item-hover: rgba(0, 145, 255, 0.8);
  --t-checkbox-bg: #020d29;
  --t-checkbox-border: #384870;
  --t-scroll-track: transparent;

  --t-status-info: #1296db;
  --t-status-error: #d81e06;
  --t-status-warning: #f4ea2a;

  --t-carinfo-text: #ffffff;

  --t-record-head-bg: linear-gradient(270deg, #072358 0%, #2989ff 100%);
  --t-record-head-color: #d4edfd;

  --t-coupon-bg: rgba(41, 137, 255, 0.06);
  --t-coupon-border: rgba(41, 137, 255, 0.22);
  --t-coupon-head-bg: rgba(41, 137, 255, 0.16);
  --t-coupon-head-color: #cfe6ff;
  --t-coupon-text: #d8f0ff;

  --t-fuzzy-border: rgba(14, 108, 202, 0.5);
  --t-fuzzy-border-active: rgba(14, 108, 202, 1);

  --t-icon-filter: none;
  --t-icon-tupian-filter: none;
  --t-icon-tab-filter: none;
  --t-icon-sycw-filter: none;
}

html[data-theme='light'] {
  color-scheme: light;

  --t-page-bg-color: #eef3fb;
  --t-page-bg-image: url('../img/ui/bg.png');
  --t-page-bg-filter: invert(1) hue-rotate(180deg) brightness(1.08)
    saturate(0.6);
  --t-page-text: #1f2f45;

  --t-panel-bg: #ffffff;
  --t-panel-border: #c9dcf5;
  --t-panel-border-soft: rgba(22, 119, 255, 0.35);
  --t-block-bg: #eef4fd;
  --t-input-bg: #ffffff;
  --t-input-bg-deep: #ffffff;
  --t-input-bg-plain: #ffffff;
  --t-input-border: #c9dcf5;
  --t-input-text: #1f2f45;
  --t-input-placeholder: #8ea4bf;

  --t-media-bg: #f7faff;
  --t-media-border: #c9dcf5;
  --t-overlay-bg: rgba(240, 245, 252, 0.85);
  --t-loading-bg: rgba(226, 236, 250, 0.7);
  --t-scrollbar-color: #9dc0ec;
  --t-hover-soft: rgba(22, 119, 255, 0.1);

  --t-text-1: #1f2f45;
  --t-text-2: #33475e;
  --t-text-3: #43597a;
  --t-text-4: #2b4b78;
  --t-text-5: #1e3a5f;
  --t-text-muted: #6b7f99;
  --t-text-legend: #52698a;
  --t-text-legend-value: #2b4160;
  --t-text-tip: #8ea4bf;

  --t-table-head-bg: #e4eefc;
  --t-table-head-color: #33475e;
  --t-table-row-color: #33475e;

  --t-table-stripe-image: linear-gradient(
    90deg,
    rgba(22, 119, 255, 0.26) 0%,
    rgba(22, 119, 255, 0.14) 100%
  );
  --t-table-stripe-2: rgba(22, 119, 255, 0.09);
  --t-table-row-hover: linear-gradient(270deg, #dbe9ff 0%, #a8ccff 100%);
  --t-table-striped-bg: rgba(22, 119, 255, 0.18);
  --t-table-striped-hover: rgba(22, 119, 255, 0.28);
  --t-row-alt: rgba(22, 119, 255, 0.14);
  --t-row-odd: #eef4fd;

  --t-map-row-odd: #f2f8ff;
  --t-map-row-even: #cfe3ff;
  --t-legend-bg: rgba(22, 119, 255, 0.08);

  --t-accent: #1677ff;
  --t-accent-dark: #0f5fd0;
  --t-accent-2: #1677ff;
  --t-btn-cancel-bg: #eef4fd;
  --t-btn-primary-bg: #1677ff;
  --t-btn-ok-bg: #1677ff;
  --t-btn-action-image: linear-gradient(180deg, #3d9bff 0%, #1677ff 100%);
  --t-btn-action-bg-color: #1677ff;
  --t-btn-action-color: #ffffff;
  --t-btn-action-opacity: 0.85;

  --t-title-color: #1e3a5f;

  --t-nav-image: radial-gradient(
      ellipse 72% 95% at 50% 100%,
      rgba(22, 119, 255, 0.3) 0%,
      rgba(22, 119, 255, 0.08) 55%,
      rgba(22, 119, 255, 0) 80%
    ),
    linear-gradient(90deg, rgba(22, 119, 255, 0.12) 0%, rgba(22, 119, 255, 0.03) 100%);
  --t-nav-image-active: radial-gradient(
      ellipse 72% 95% at 50% 100%,
      rgba(22, 119, 255, 0.44) 0%,
      rgba(22, 119, 255, 0.14) 55%,
      rgba(22, 119, 255, 0) 82%
    ),
    linear-gradient(180deg, rgba(22, 119, 255, 0.26) 0%, rgba(22, 119, 255, 0.14) 100%);
  --t-nav-border: rgba(22, 119, 255, 0.38);
  --t-nav-border-active: rgba(22, 119, 255, 0.6);
  --t-nav-color: #1e3a5f;
  --t-nav-color-active: #1677ff;
  --t-nav-deco: linear-gradient(180deg, rgba(22, 119, 255, 0.5), rgba(22, 119, 255, 0));

  --t-nav-mosaic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='77' height='17'%3E%3Cdefs%3E%3Cpattern id='c' width='8' height='8' patternUnits='userSpaceOnUse'%3E%3Crect width='4' height='4' fill='%231677ff' opacity='0.32'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%231677ff' opacity='0.32'/%3E%3C/pattern%3E%3CradialGradient id='f' cx='0.5' cy='1' r='0.75'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.85'/%3E%3Cstop offset='0.55' stop-color='%23ffffff' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='77' height='17' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='77' height='17' fill='url(%23c)' mask='url(%23m)'/%3E%3C/svg%3E");

  --t-header-grad: linear-gradient(
    90deg,
    rgba(22, 119, 255, 0.16) 0%,
    rgba(22, 119, 255, 0.12) 28.48%,
    rgba(22, 119, 255, 0.1) 36.94%,
    rgba(22, 119, 255, 0.05) 55.6%,
    rgba(22, 119, 255, 0) 100%
  );
  --t-header-border: rgba(22, 119, 255, 0.4);
  --t-header-border-image: none;
  --t-header-text: #1e3a5f;
  --t-header-text-2: #1e3a5f;
  --t-header-shadow: none;

  --t-dropdown-bg: #ffffff;
  --t-dropdown-border: #c9dcf5;
  --t-dropdown-shadow: 0 6px 18px rgba(22, 60, 120, 0.16);
  --t-dropdown-item-color: #2b4160;
  --t-dropdown-item-hover-bg: #e8f2ff;
  --t-dropdown-item-hover-color: #1677ff;
  --t-dropdown-hover-bg: #e8f2ff;
  --t-dropdown-hover-color: #1677ff;

  --t-btn-color: #ffffff;

  --t-login-card-image: none;
  --t-login-card-bg: rgba(255, 255, 255, 0.1);
  --t-login-card-border: 1px solid #d7e5f8;
  --t-login-card-shadow: 0 10px 30px rgba(23, 64, 132, 0.12);
  --t-login-card-filter: none;

  --t-login-header-image: url('../img/ui/login-header.png');
  --t-login-header-filter: none;
  --t-login-btn-image: linear-gradient(180deg, #3d9bff 0%, #1677ff 100%);

  --t-login-title-grad: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
  --t-login-title-shadow: drop-shadow(0 0 2px rgba(7, 42, 105, 0.9))
    drop-shadow(0 3px 6px rgba(7, 42, 105, 0.55));
  --t-login-input-bg: rgba(22, 60, 120, 0.06);
  --t-login-tab-color: #6b7f99;
  --t-login-tab-hover: #1677ff;
  --t-login-tab-active: #1677ff;
  --t-login-tab-border: #1677ff;
  --t-login-tab-line: rgba(22, 60, 120, 0.12);
  --t-login-input-placeholder: #8ea4bf;
  --t-qrcode-bg-image: none;
  --t-qrcode-bg-color: #ffffff;
  --t-qrcode-filter: none;
  --t-qrcode-border: 1px solid #d7e5f8;
  --t-qrcode-shadow: 0 4px 15px rgba(23, 64, 132, 0.14);
  --t-qrcode-loading-bg: rgba(22, 60, 120, 0.06);
  --t-qrcode-loading-border: rgba(22, 60, 120, 0.15);

  --modal-bg-color: #ffffff;
  --modal-border-color: #a9cdf7;
  --t-modal-grad: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(219, 233, 252, 0.5) 60%,
    rgba(198, 221, 250, 0.9) 100%
  );
  --t-modal-grad-opacity: 1;
  --t-close-color: #43597a;

  --t-modal-title-image: linear-gradient(
    180deg,
    rgba(22, 119, 255, 1) 0%,
    rgba(22, 119, 255, 0) 100%
  );
  --t-modal-title-image-opacity: 1;
  --t-modal-title-image-filter: none;

  --t-chart-axis-label: #33475e;
  --t-chart-title-bg: transparent;
  --t-chart-car-image: none;
  --t-chart-car-shadow: inset 0px 0 8px 0px rgba(22, 119, 255, 0.18);
  --t-chart-car-border: 1px solid rgba(22, 119, 255, 0.25);
  --t-chart-ring-track: rgba(22, 119, 255, 0.12);

  --t-carinfo-item-bg: #eef4fd;
  --t-carinfo-item-hover: #e0ecfd;
  --t-carinfo-item-selected: #1677ff;
  --t-switch-bg: #e4eefc;
  --t-switch-border: #a9cdf7;
  --t-gate-bg: #dfe8f5;
  --t-media-bar-bg: rgba(11, 21, 33, 0.55);
  --t-media-bar-color: #ffffff;
  --t-lineup-bg: #f4f8ff;
  --t-park-switch-bg: #eef4fd;
  --t-park-switch-item: linear-gradient(
    90deg,
    rgba(22, 119, 255, 0.16) 0%,
    rgba(22, 119, 255, 0.08) 35.5%,
    rgba(22, 119, 255, 0.02) 100%
  );
  --t-park-switch-item-hover: rgba(22, 119, 255, 0.85);
  --t-checkbox-bg: #ffffff;
  --t-checkbox-border: #b9cde6;
  --t-scroll-track: transparent;

  --t-status-info: #1677ff;
  --t-status-error: #d81e06;
  --t-status-warning: #d48806;

  --t-carinfo-text: #1f2f45;

  --t-record-head-bg: linear-gradient(270deg, #dbe9ff 0%, #a8ccff 100%);
  --t-record-head-color: #1e3a5f;

  --t-coupon-bg: #f5f9ff;
  --t-coupon-border: #c9dcf5;
  --t-coupon-head-bg: #e3eeff;
  --t-coupon-head-color: #1e3a5f;
  --t-coupon-text: #33475e;

  --t-fuzzy-border: #c9dcf5;
  --t-fuzzy-border-active: #1677ff;

  --t-icon-filter: invert(1) hue-rotate(180deg) brightness(0.85);

  --t-icon-tupian-filter: invert(1) hue-rotate(180deg) brightness(2.34);

  --t-icon-tab-filter: invert(0.56) sepia(0.9) saturate(2.6) hue-rotate(177deg)
    brightness(0.59) contrast(0.84);

  --t-icon-sycw-filter: invert(1) hue-rotate(180deg) brightness(1.8);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.theme-toggle__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 64px;
  height: 32px;
  padding: 0 9px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid var(--t-header-border);
  background: var(--t-header-grad);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}
html[data-theme='light'] .theme-toggle__track {
  box-shadow: inset 0 1px 3px rgba(22, 119, 255, 0.2);
}

.theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, #5fa8ff 0%, #1f7bff 48%, #0a54c8 100%);
  box-shadow: 0 2px 8px rgba(0, 84, 200, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: translateX(30px);
  transition: transform 0.4s cubic-bezier(0.34, 1.42, 0.64, 1),
    box-shadow 0.3s ease;
  pointer-events: none;
}
html[data-theme='light'] .theme-toggle__thumb {
  transform: translateX(0);
}
.theme-toggle__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: rgba(178, 210, 255, 0.45);
  transition: color 0.3s ease;
  pointer-events: none;
}
html[data-theme='light'] .theme-toggle__icon {

  color: rgba(70, 100, 140, 0.8);
}
.theme-toggle__icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

html[data-theme='dark'] .theme-toggle__icon--moon,
html[data-theme='light'] .theme-toggle__icon--sun {
  color: #ffffff;
}
.theme-toggle:hover .theme-toggle__track {
  border-color: var(--t-accent);
}
.theme-toggle:hover .theme-toggle__thumb {
  box-shadow: 0 3px 12px rgba(0, 130, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
html[data-theme='dark'] .theme-toggle:active .theme-toggle__thumb {
  transform: translateX(30px) scale(0.9);
}
html[data-theme='light'] .theme-toggle:active .theme-toggle__thumb {
  transform: translateX(0) scale(0.9);
}
.theme-toggle:focus-visible .theme-toggle__track {
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.45);
}

.theme-toggle-holder {
  display: inline-flex;
  align-items: center;
}
.theme-toggle-holder--fixed {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 2000;
}

.theme-toggle-holder--header {
  margin-right: 20px;
}