/**
 * HY Console × TDesign tokens
 * Progressive adoption: map TDesign design tokens onto existing console classes.
 * Spec: https://tdesign.tencent.com/
 */
:root {
  /* —— TDesign color palette —— */
  --td-brand-color-1: #f2f3ff;
  --td-brand-color-2: #d9e1ff;
  --td-brand-color-3: #b5c7ff;
  --td-brand-color-4: #8eabff;
  --td-brand-color-5: #618dff;
  --td-brand-color-6: #366ef4;
  --td-brand-color-7: #0052d9;
  --td-brand-color-8: #003cab;
  --td-brand-color-9: #002a7c;
  --td-brand-color-10: #001a57;

  --td-warning-color-1: #fff1e9;
  --td-warning-color-5: #e37318;
  --td-error-color-1: #fff0ed;
  --td-error-color-6: #d54941;
  --td-success-color-1: #e3f9e9;
  --td-success-color-5: #2ba471;

  --td-gray-color-1: #f3f3f3;
  --td-gray-color-2: #eeeeee;
  --td-gray-color-3: #e8e8e8;
  --td-gray-color-4: #dddddd;
  --td-gray-color-5: #c6c6c6;
  --td-gray-color-6: #a6a6a6;
  --td-gray-color-7: #8b8b8b;
  --td-gray-color-8: #777777;
  --td-gray-color-10: #4b4b4b;
  --td-gray-color-12: #2c2c2c;
  --td-gray-color-13: #242424;

  --td-brand-color: var(--td-brand-color-7);
  --td-brand-color-hover: var(--td-brand-color-6);
  --td-brand-color-active: var(--td-brand-color-8);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-warning-color: var(--td-warning-color-5);
  --td-error-color: var(--td-error-color-6);
  --td-success-color: var(--td-success-color-5);

  --td-font-gray-1: rgba(0, 0, 0, 0.9);
  --td-font-gray-2: rgba(0, 0, 0, 0.6);
  --td-font-gray-3: rgba(0, 0, 0, 0.4);
  --td-font-gray-4: rgba(0, 0, 0, 0.26);
  --td-font-white-1: #ffffff;
  --td-font-white-2: rgba(255, 255, 255, 0.55);
  --td-font-white-3: rgba(255, 255, 255, 0.35);

  --td-radius-small: 3px;
  --td-radius-default: 3px;
  --td-radius-medium: 6px;
  --td-radius-large: 9px;
  --td-radius-circle: 50%;

  --td-comp-size-xs: 24px;
  --td-comp-size-s: 28px;
  --td-comp-size-m: 32px;
  --td-comp-size-l: 40px;
  --td-comp-paddingLR-s: 8px;
  --td-comp-paddingLR-m: 16px;
  --td-comp-margin-s: 8px;
  --td-comp-margin-m: 16px;
  --td-comp-margin-l: 24px;

  --td-font-size-body-small: 12px;
  --td-font-size-body-medium: 14px;
  --td-font-size-title-small: 14px;
  --td-font-size-title-medium: 16px;
  --td-font-size-title-large: 20px;
  --td-font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;

  --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
  --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);

  /* —— Map to existing console variables —— */
  --side: #1b1e26;
  --side-2: #242833;
  --side-text: rgba(255, 255, 255, 0.55);
  --side-active: #ffffff;
  --top: #ffffff;
  --bg: var(--td-gray-color-1);
  --panel: #ffffff;
  --ink: var(--td-font-gray-1);
  --muted: var(--td-font-gray-2);
  --line: var(--td-gray-color-3);
  --accent: var(--td-brand-color);
  --accent-hover: var(--td-brand-color-active);
  --accent-soft: var(--td-brand-color-light);
  --ok: var(--td-success-color);
  --warn: var(--td-warning-color);
  --err: var(--td-error-color);
  --side-w: 232px;
  --top-h: 56px;
  --r: var(--td-radius-medium);
  --r-sm: var(--td-radius-default);
  --shadow: var(--td-shadow-1);
  --tip-bg: var(--td-brand-color-1);
  --tip-ink: var(--td-brand-color-6);
  --font: var(--td-font-family);
  --font-num: var(--td-font-family);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* —— Shell: TDesign Menu / Layout —— */
.side {
  background: var(--side) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}
.side-brand {
  height: var(--top-h) !important;
  padding: 0 20px !important;
  gap: 10px !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
}
.side-brand span {
  color: var(--td-font-white-3) !important;
  font-size: 12px !important;
}
.side-nav { padding: 12px 0 20px !important; }
.side-group {
  font-size: 12px !important;
  color: var(--td-font-white-3) !important;
  padding: 12px 20px 8px !important;
  letter-spacing: 0.04em;
}
.side-items { padding: 0 12px !important; }
.side-item {
  border-radius: var(--td-radius-default) !important;
  padding: 9px 12px !important;
  margin-bottom: 2px;
  font-size: 14px !important;
  gap: 10px !important;
  color: var(--td-font-white-2) !important;
}
.side-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--td-font-white-1) !important;
}
.side-item.active {
  background: var(--td-brand-color) !important;
  color: var(--td-font-white-1) !important;
  font-weight: 500 !important;
}
.side-item.active::before { display: none !important; }
.side-item svg { width: 18px !important; height: 18px !important; opacity: 1 !important; }
.side-foot {
  padding: 14px 20px 18px !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
.side-foot a { color: var(--td-font-white-2) !important; }
.side-foot a:hover { color: var(--td-font-white-1) !important; }

.topbar {
  height: var(--top-h) !important;
  padding: 0 24px !important;
  box-shadow: 0 1px 0 var(--line);
}
.crumb { font-size: 14px !important; color: var(--td-font-gray-3) !important; }
.crumb b { color: var(--td-font-gray-1) !important; font-weight: 600 !important; }
.content { padding: 20px 24px 32px !important; }

/* —— Buttons (TDesign Button) —— */
.btn {
  height: var(--td-comp-size-m) !important;
  padding: 0 var(--td-comp-paddingLR-m) !important;
  border-radius: var(--td-radius-default) !important;
  font-size: var(--td-font-size-body-medium) !important;
  font-weight: 400 !important;
  transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) !important;
}
.btn-primary {
  background: var(--td-brand-color) !important;
  border-color: var(--td-brand-color) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--td-brand-color-hover) !important;
  border-color: var(--td-brand-color-hover) !important;
}
.btn-primary:active {
  background: var(--td-brand-color-active) !important;
  border-color: var(--td-brand-color-active) !important;
}
.btn-default {
  background: #fff !important;
  border-color: var(--td-gray-color-4) !important;
  color: var(--td-font-gray-1) !important;
}
.btn-default:hover {
  border-color: var(--td-brand-color-hover) !important;
  color: var(--td-brand-color-hover) !important;
  background: var(--td-brand-color-light) !important;
}
.btn-text {
  color: var(--td-brand-color) !important;
  border-radius: var(--td-radius-default) !important;
}
.btn-text:hover { background: var(--td-brand-color-light) !important; }
.btn-sm {
  height: var(--td-comp-size-s) !important;
  padding: 0 12px !important;
  font-size: var(--td-font-size-body-small) !important;
}

/* —— Inputs —— */
input:not([type=file]):not([type=checkbox]):not([type=radio]),
select,
textarea {
  height: var(--td-comp-size-m) !important;
  border-radius: var(--td-radius-default) !important;
  border-color: var(--td-gray-color-4) !important;
  font-size: var(--td-font-size-body-medium) !important;
  color: var(--td-font-gray-1) !important;
}
input:not([type=file]):hover,
select:hover,
textarea:hover {
  border-color: var(--td-brand-color-hover) !important;
}
input:not([type=file]):focus,
select:focus,
textarea:focus {
  border-color: var(--td-brand-color) !important;
  box-shadow: 0 0 0 2px var(--td-brand-color-focus) !important;
}
textarea { height: auto !important; min-height: 88px !important; }

/* —— Panel / Card —— */
.panel {
  border-radius: var(--td-radius-medium) !important;
  border-color: var(--td-gray-color-3) !important;
  box-shadow: none;
  margin-bottom: 16px !important;
}
.panel-hd {
  padding: 14px 20px !important;
  min-height: 48px !important;
  background: #fff !important;
}
.panel-hd h2 {
  font-size: var(--td-font-size-title-small) !important;
  font-weight: 600 !important;
  color: var(--td-font-gray-1) !important;
}
.panel-bd { padding: 20px !important; }
.panel-bd.tight,
.panel-bd.list { padding: 0 !important; }

.page-title { margin-bottom: 20px !important; }
.page-title h1 {
  font-size: var(--td-font-size-title-large) !important;
  font-weight: 600 !important;
  color: var(--td-font-gray-1) !important;
}

/* —— Table —— */
.table th {
  background: var(--td-gray-color-1) !important;
  color: var(--td-font-gray-2) !important;
  font-weight: 600 !important;
  font-size: var(--td-font-size-body-small) !important;
  padding: 12px 20px !important;
}
.table td {
  padding: 14px 20px !important;
  color: var(--td-font-gray-1) !important;
  border-bottom-color: var(--td-gray-color-3) !important;
}
.table tbody tr:hover td { background: var(--td-brand-color-1) !important; }

/* —— Tag / Badge —— */
.badge {
  border-radius: var(--td-radius-default) !important;
  font-size: 12px !important;
  line-height: 22px !important;
  padding: 0 8px !important;
  font-weight: 400 !important;
  border: 0 !important;
}
.badge-ok { color: var(--td-success-color) !important; background: var(--td-success-color-1) !important; }
.badge-warn { color: var(--td-warning-color) !important; background: var(--td-warning-color-1) !important; }
.badge-err { color: var(--td-error-color) !important; background: var(--td-error-color-1) !important; }
.badge-blue { color: var(--td-brand-color) !important; background: var(--td-brand-color-1) !important; }

/* —— Alert —— */
.alert,
.announce-strip {
  border-radius: var(--td-radius-medium) !important;
  background: var(--td-brand-color-1) !important;
  border: 1px solid var(--td-brand-color-2) !important;
  color: var(--td-font-gray-1) !important;
  padding: 12px 16px !important;
}
.announce-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.announce-strip .tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--td-radius-default);
  background: var(--td-brand-color);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.alert.warn {
  background: var(--td-warning-color-1) !important;
  border-color: #ffd9c2 !important;
}
.alert.err {
  background: var(--td-error-color-1) !important;
  border-color: #ffd8d2 !important;
  color: var(--td-error-color) !important;
}

/* —— Stats —— */
.stat-row {
  border-radius: var(--td-radius-medium) !important;
  overflow: hidden;
  border-color: var(--td-gray-color-3) !important;
}
.stat .value {
  font-size: 28px !important;
  color: var(--td-font-gray-1) !important;
}

/* —— Overview —— */
.ov-layout { gap: 16px !important; }
.ov-side { gap: 16px !important; top: calc(var(--top-h) + 20px) !important; }
.ov-search {
  height: 40px !important;
  border-radius: var(--td-radius-medium) !important;
  border-color: var(--td-gray-color-4) !important;
  box-shadow: none;
}
.ov-search:focus-within {
  border-color: var(--td-brand-color) !important;
  box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}
.recent-chip {
  background: var(--td-gray-color-1) !important;
  border-radius: var(--td-radius-default) !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  color: var(--td-font-gray-1) !important;
}
.recent-chip:hover {
  background: var(--td-brand-color-1) !important;
  color: var(--td-brand-color) !important;
}
.ov-promo {
  border-radius: var(--td-radius-medium) !important;
  background: linear-gradient(90deg, var(--td-brand-color-1), #f7f8ff) !important;
  border-color: var(--td-brand-color-2) !important;
}
.ov-res-tab.on {
  color: var(--td-brand-color) !important;
  border-bottom-color: var(--td-brand-color) !important;
}
.res-cell {
  border-radius: var(--td-radius-default) !important;
}
.res-cell:hover { background: var(--td-brand-color-1) !important; }
.res-cell .ico {
  border-radius: var(--td-radius-default) !important;
  background: var(--td-brand-color-1) !important;
  color: var(--td-brand-color) !important;
}
.ov-avatar {
  border-radius: var(--td-radius-circle) !important;
  background: var(--td-brand-color) !important;
}
.ov-fee .bal-num {
  color: var(--td-font-gray-1) !important;
  font-weight: 600 !important;
}

/* —— Upload —— */
.upload-zone {
  border-radius: var(--td-radius-medium) !important;
  border-color: var(--td-gray-color-5) !important;
  background: var(--td-gray-color-1) !important;
}
.upload-zone:hover,
.upload-zone.is-drag {
  border-color: var(--td-brand-color) !important;
  background: var(--td-brand-color-1) !important;
}
.upload-icon {
  background: var(--td-brand-color-1) !important;
  color: var(--td-brand-color) !important;
}

/* —— Tabs —— */
.page-tab.on,
.bill-tab.on {
  color: var(--td-brand-color) !important;
  border-bottom-color: var(--td-brand-color) !important;
  font-weight: 600 !important;
}

/* —— Filter / toolbar —— */
.filter-bar,
.toolbar {
  background: var(--td-gray-color-1) !important;
  border-bottom-color: var(--td-gray-color-3) !important;
  padding: 12px 20px !important;
}

/* —— Mobile bar —— */
.mobile-bar {
  background: var(--side) !important;
}