:root {
  --portal-accent: #6366f1;
  --portal-accent-hover: #5457e5;
  --portal-accent-bg: #eeedfe;
  --portal-accent-text: #3c3489;
  --portal-bg: #fafbfc;
  --portal-surface: #ffffff;
  --portal-surface-muted: #f5f6f8;
  --portal-border: #ececf0;
  --portal-border-strong: #dcdce3;
  --portal-text: #1a1a2e;
  --portal-text-secondary: #5d6b7a;
  --portal-text-muted: #9096a3;
  --portal-success-text: #27500a;
  --portal-success-bg: #eaf3de;
  --portal-warning-text: #854f0b;
  --portal-warning-bg: #faeeda;
  --portal-danger-text: #a32d2d;
  --portal-danger-bg: #f9e3e3;
  --portal-radius-card: 12px;
  --portal-radius-control: 8px;
  --portal-chart-input: #ef9f27;
  --portal-chart-output: #6366f1;
  --portal-chart-cache: #97c459;
  --portal-banner-warning: #f0b429;
}

:root[data-theme="dark"] {
  --portal-accent: #7f77dd;
  --portal-accent-hover: #8f88e6;
  --portal-accent-bg: #26215c;
  --portal-accent-text: #cecbf6;
  --portal-bg: #14141b;
  --portal-surface: #1c1c26;
  --portal-surface-muted: #23232f;
  --portal-border: #2e2e3a;
  --portal-border-strong: #3a3a48;
  --portal-text: #ededf2;
  --portal-text-secondary: #a6adba;
  --portal-text-muted: #7a7f8c;
  --portal-success-text: #c0dd97;
  --portal-success-bg: #27500a;
  --portal-warning-text: #fac775;
  --portal-warning-bg: #633806;
  --portal-danger-text: #f09595;
  --portal-danger-bg: #5c1f1f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--portal-text);
  background: var(--portal-bg);
}

a { color: var(--portal-accent); text-decoration: none; }

.portal-btn-primary {
  background: var(--portal-accent);
  color: #fff;
  border: none;
  border-radius: var(--portal-radius-control);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.portal-btn-primary:hover { background: var(--portal-accent-hover); }

.portal-btn-secondary {
  background: transparent;
  color: var(--portal-text);
  border: 0.5px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-control);
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
}

.portal-card {
  background: var(--portal-surface);
  border: 0.5px solid var(--portal-border);
  border-radius: var(--portal-radius-card);
  padding: 16px;
}

.portal-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0.5px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-control);
  background: var(--portal-surface);
  color: var(--portal-text);
  font-size: 14px;
}
.portal-input:focus { outline: 2px solid var(--portal-accent); outline-offset: -1px; }

.portal-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.portal-login__card { width: 100%; max-width: 380px; }
.portal-login__title { font-size: 22px; font-weight: 500; margin: 0 0 4px; }
.portal-login__subtitle { font-size: 13px; color: var(--portal-text-secondary); margin: 0 0 20px; }
.portal-login__field { margin-bottom: 14px; }
.portal-login__password { display: flex; gap: 8px; align-items: stretch; }
.portal-login__password .portal-input { flex: 1; }
.portal-login__password-toggle { flex: none; border: 1px solid var(--portal-border-strong); background: transparent; color: var(--portal-text-secondary); border-radius: var(--portal-radius-control); padding: 0 12px; font-size: 13px; cursor: pointer; }
.portal-login__hint { font-size: 12px; color: var(--portal-text-muted); margin: 6px 0 0; }
.portal-login__label { display: block; font-size: 13px; color: var(--portal-text-secondary); margin-bottom: 6px; }
.portal-login__error { color: var(--portal-danger-text); font-size: 13px; margin: 8px 0 0; min-height: 18px; }
.portal-login__switch { font-size: 13px; color: var(--portal-text-secondary); margin: 16px 0 0; text-align: center; }

.portal-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.portal-shell__side {
  border-right: 0.5px solid var(--portal-border);
  background: var(--portal-surface);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.portal-orgswitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: 0.5px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-control);
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  background: var(--portal-surface);
  color: var(--portal-text);
  cursor: pointer;
}
.portal-nav__item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--portal-radius-control);
  color: var(--portal-text-secondary);
  font-size: 13px;
}
.portal-nav__item:hover { background: var(--portal-surface-muted); }
.portal-nav__item--active { background: var(--portal-accent-bg); color: var(--portal-accent-text); }
.portal-nav__group { font-size: 11px; color: var(--portal-text-muted); padding: 14px 12px 4px; letter-spacing: 0.04em; }
.portal-nav__support { margin-top: auto; }

.portal-shell__main { min-width: 0; display: flex; flex-direction: column; }
.portal-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 0.5px solid var(--portal-border);
}
.portal-topbar__brand { font-size: 14px; font-weight: 500; }
.portal-topbar__spacer { flex: 1; }
.portal-topbar__icon-btn {
  background: transparent;
  border: none;
  color: var(--portal-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}
.portal-topbar__user { position: relative; }
.portal-topbar__avatar {
  width: 28px; height: 28px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--portal-accent-bg); color: var(--portal-accent-text);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}

/* 头像下拉菜单:修改密码(弹窗)/退出登录 */
.portal-avatarmenu {
  position: absolute; right: 0; top: 34px; z-index: 20; min-width: 112px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border: 0.5px solid var(--portal-border); border-radius: var(--portal-radius-control);
  background: var(--portal-surface); box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
.portal-avatarmenu__item {
  text-align: left; padding: 7px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--portal-text); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.portal-avatarmenu__item:hover { background: var(--portal-surface-muted); }

/* 修改密码弹窗:颜色全走 --portal-* 令牌,明暗双主题成立 */
.portal-modal-backdrop {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgb(20 20 27 / 40%);
}
.portal-modal {
  width: min(360px, calc(100% - 48px));
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  border: 0.5px solid var(--portal-border); border-radius: var(--portal-radius-card);
  background: var(--portal-surface); outline: none;
}
.portal-modal__msg { margin: 0; min-height: 14px; font-size: 12px; color: var(--portal-accent-text); }
.portal-modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
.portal-page { padding: 22px 24px; }
.portal-page__title { font-size: 22px; font-weight: 500; margin: 0 0 4px; }
.portal-page__subtitle { font-size: 13px; color: var(--portal-text-secondary); margin: 0 0 20px; }
.portal-page__placeholder {
  color: var(--portal-text-muted);
  font-size: 14px;
  padding: 48px 0;
  text-align: center;
}

.portal-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.portal-month-select { width: auto; min-width: 120px; height: 36px; }

.portal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 0.5px solid var(--portal-warning-text);
  background: var(--portal-warning-bg);
  color: var(--portal-warning-text);
  border-radius: var(--portal-radius-control);
  font-size: 13px;
}
.portal-banner__btn { padding: 6px 12px; }
.portal-banner--danger {
  border-color: var(--portal-danger-text);
  background: var(--portal-danger-bg);
  color: var(--portal-danger-text);
}
.portal-banner__actions { display: flex; gap: 8px; align-items: center; }

.portal-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.portal-kpi {
  background: var(--portal-surface);
  border: 0.5px solid var(--portal-border);
  border-radius: var(--portal-radius-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-kpi__label { font-size: 12px; color: var(--portal-text-muted); }
.portal-kpi__value { font-size: 22px; font-weight: 500; color: var(--portal-text); }

.portal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.portal-card__title { font-size: 14px; font-weight: 500; margin: 0 0 14px; }

.portal-chart-bars { max-width: 100%; height: 140px; display: block; }
.portal-chart-empty {
  color: var(--portal-text-muted);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
}
.portal-donut-wrap { display: flex; align-items: center; gap: 20px; }
.portal-chart-donut { width: 140px; height: 140px; flex-shrink: 0; }
.portal-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.portal-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--portal-text-secondary);
}
.portal-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.portal-legend__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-legend__pct { color: var(--portal-text); }

.portal-table-wrap { overflow-x: auto; }
.portal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.portal-table th {
  text-align: left;
  font-weight: 500;
  color: var(--portal-text-muted);
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--portal-border);
  white-space: nowrap;
}
.portal-table td {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--portal-border);
  color: var(--portal-text);
}
.portal-table .portal-num { text-align: right; font-variant-numeric: tabular-nums; }
.portal-table__empty { text-align: center; color: var(--portal-text-muted); padding: 24px 0; }

@media (max-width: 900px) {
  .portal-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .portal-grid-2 { grid-template-columns: 1fr; }
}

.portal-page__actions { display: flex; align-items: center; gap: 10px; }

.portal-kpi-row--4 { grid-template-columns: repeat(4, 1fr); }

.portal-detail { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.portal-modellist { display: flex; flex-direction: column; gap: 4px; }
.portal-modellist__title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--portal-text-muted);
}
.portal-modellist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 0.5px solid var(--portal-border);
  border-radius: var(--portal-radius-control);
  background: var(--portal-surface);
  color: var(--portal-text-secondary);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.portal-modellist__item:hover { background: var(--portal-surface-muted); }
.portal-modellist__item--active {
  background: var(--portal-accent-bg);
  color: var(--portal-accent-text);
  border-color: var(--portal-accent);
}
.portal-modellist__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-modellist__meta { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.portal-detail__main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.portal-seg { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 3px; border: 0.5px solid var(--portal-border); border-radius: var(--portal-radius-control); background: var(--portal-surface); }
.portal-seg__btn {
  padding: 7px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--portal-text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.portal-seg__btn--active { background: var(--portal-accent-bg); color: var(--portal-accent-text); }

@media (max-width: 900px) {
  .portal-kpi-row--4 { grid-template-columns: repeat(2, 1fr); }
  .portal-detail { grid-template-columns: 1fr; }
}

.portal-search { width: auto; min-width: 220px; height: 36px; }

.portal-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 12px; white-space: nowrap; background: var(--portal-surface-muted); color: var(--portal-text-secondary); }
.portal-pill--ok { background: var(--portal-success-bg); color: var(--portal-success-text); }
.portal-pill--warn { background: var(--portal-warning-bg); color: var(--portal-warning-text); }

.portal-modelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.portal-modelcard { background: var(--portal-surface); border: 0.5px solid var(--portal-border); border-radius: var(--portal-radius-card); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.portal-modelcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.portal-modelcard__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portal-modelcard__code { font-size: 14px; font-weight: 600; color: var(--portal-text); word-break: break-all; }
.portal-modelcard__name { font-size: 12px; color: var(--portal-text-muted); }
.portal-modelsections { display: flex; flex-direction: column; gap: 22px; }
.portal-modelsection__head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px dashed var(--portal-border-strong); }
.portal-modelsection__name { font-size: 15px; font-weight: 600; color: var(--portal-text); }
.portal-modelsection__count { font-size: 12px; color: var(--portal-text-muted); background: var(--portal-surface-muted); border-radius: 20px; padding: 1px 9px; }
.portal-modeltable-wrap { border: 0.5px solid var(--portal-border); border-radius: var(--portal-radius-card); background: var(--portal-surface); }
.portal-modeltable { width: 100%; border-collapse: collapse; font-size: 13px; }
.portal-modeltable thead th { position: sticky; top: 0; z-index: 2; background: var(--portal-surface); text-align: left; font-weight: 500; color: var(--portal-text-muted); padding: 11px 16px; border-bottom: 1px solid var(--portal-border-strong); white-space: nowrap; }
.portal-modeltable thead th.portal-modeltable__num { text-align: right; }
.portal-modeltable__num { text-align: right; font-variant-numeric: tabular-nums; }
.portal-modeltable__group td { padding: 10px 16px 6px; background: var(--portal-surface-muted); border-bottom: 1px dashed var(--portal-border-strong); }
.portal-modeltable__groupname { font-weight: 600; color: var(--portal-text); }
.portal-modeltable__groupcount { margin-left: 8px; font-size: 12px; color: var(--portal-text-muted); }
.portal-modeltable__row td { padding: 11px 16px; border-bottom: 0.5px solid var(--portal-border); }
.portal-modeltable__row:hover td { background: var(--portal-surface-muted); }
.portal-modeltable__model code { font-weight: 600; color: var(--portal-text); }
.portal-modeltable__alias { display: block; font-size: 12px; color: var(--portal-text-muted); margin-top: 2px; }
.portal-modeltable__tags { white-space: nowrap; }
.portal-modeltable__tags .portal-pill { margin-right: 4px; }
.portal-modeltable__action { text-align: right; white-space: nowrap; }
.portal-modelcard__copy { padding: 4px 10px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.portal-modelcard__tags { display: flex; gap: 6px; }
.portal-modelcard__prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; margin: 0; }
.portal-modelcard__prices div { display: flex; justify-content: space-between; font-size: 13px; }
.portal-modelcard__prices dt { color: var(--portal-text-muted); }
.portal-modelcard__prices dd { margin: 0; font-variant-numeric: tabular-nums; }
.portal-modelcard__unit { font-size: 11px; color: var(--portal-text-muted); margin: 0; }

.portal-page__intro { font-size: 13px; color: var(--portal-text-secondary); line-height: 1.6; margin: -8px 0 20px; max-width: 860px; }
.portal-keylist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.portal-keytable__code { font-size: 13px; letter-spacing: 0.02em; }
.portal-keytable__actions { display: flex; gap: 6px; justify-content: flex-end; }
.portal-keytable__actions .portal-btn-secondary { padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.portal-keycard { background: var(--portal-surface); border: 0.5px solid var(--portal-border); border-radius: var(--portal-radius-card); padding: 14px; }
.portal-keycard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.portal-keycard__name { font-size: 14px; font-weight: 500; }
.portal-keycard__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.portal-keycard__row code { font-size: 13px; }
.portal-keycard__copy { padding: 4px 10px; font-size: 12px; }
.portal-keycard__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.portal-keycard__meta div { display: flex; flex-direction: column; gap: 2px; }
.portal-keycard__meta dt { font-size: 11px; color: var(--portal-text-muted); }
.portal-keycard__meta dd { margin: 0; font-size: 13px; }
.portal-keynew { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
/* display:flex 会压过 hidden 属性,显式关掉,否则「新建 Key」按钮看起来失效 */
.portal-keynew[hidden] { display: none; }
.portal-keynew .portal-input { width: auto; min-width: 200px; height: 36px; }
.portal-keynew__error { color: var(--portal-danger-text); font-size: 13px; margin: 0; width: 100%; }
.portal-keyresult { margin-bottom: 12px; padding: 12px 14px; border: 0.5px solid var(--portal-accent); border-radius: var(--portal-radius-control); background: var(--portal-accent-bg); }
.portal-keyresult__title { margin: 0 0 8px; font-size: 13px; color: var(--portal-accent-text); }
.portal-integration p { font-size: 13px; margin: 6px 0; }
.portal-integration code { background: var(--portal-surface-muted); padding: 2px 6px; border-radius: 4px; }
.portal-integration__example { margin-top: 26px; }
.portal-integration__example:first-of-type { margin-top: 18px; }
.portal-integration__label { font-weight: 600; margin: 0 0 8px; }
.portal-codewrap { position: relative; }
.portal-codewrap__copy { position: absolute; top: 8px; right: 8px; padding: 2px 10px; font-size: 12px; }
.portal-integration__block { background: var(--portal-surface-muted); border: 0.5px solid var(--portal-border); border-radius: 8px; padding: 10px 12px; margin: 0; overflow-x: auto; }
.portal-integration__block code { background: transparent; padding: 0; font-size: 12px; line-height: 1.6; white-space: pre; }

@media (max-width: 900px) {
  .portal-keycard__meta { grid-template-columns: 1fr; }
}

.portal-pill--error { background: var(--portal-danger-bg); color: var(--portal-danger-text); }

.portal-segment { display: inline-flex; border: 0.5px solid var(--portal-border-strong); border-radius: var(--portal-radius-control); overflow: hidden; }
.portal-segment__btn { border: none; background: transparent; color: var(--portal-text-secondary); font-size: 13px; padding: 7px 14px; cursor: pointer; }
.portal-segment__btn + .portal-segment__btn { border-left: 0.5px solid var(--portal-border); }
.portal-segment__btn[data-active="true"] { background: var(--portal-accent-bg); color: var(--portal-accent-text); }

.call-records__filters { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.call-records__filters .portal-input { width: auto; min-width: 180px; height: 36px; }
.call-records__row { cursor: pointer; }
.call-records__row:hover td { background: var(--portal-surface-muted); }
.call-records__pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 12px; }
.call-records__page-info { font-size: 13px; color: var(--portal-text-secondary); }

.portal-modal-overlay { position: fixed; inset: 0; background: rgba(10, 10, 20, 0.45); display: flex; align-items: center; justify-content: center; z-index: 60; }
.portal-modal { width: min(520px, calc(100vw - 40px)); max-height: min(640px, calc(100vh - 60px)); overflow-y: auto; background: var(--portal-surface); border: 0.5px solid var(--portal-border-strong); border-radius: var(--portal-radius-card); padding: 18px 20px; }
.portal-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.portal-modal__title { margin: 0; font-size: 15px; font-weight: 500; }
.portal-modal__close { border: none; background: transparent; color: var(--portal-text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.portal-modal__close:hover { color: var(--portal-text); }
.portal-modal__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 0.5px solid var(--portal-border); font-size: 13px; }
.portal-modal__row:last-child { border-bottom: none; }
.portal-modal__label { color: var(--portal-text-muted); flex-shrink: 0; }
.portal-modal__value { text-align: right; word-break: break-all; }
.portal-modal__value--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; }
.portal-modal__copy { padding: 2px 10px; font-size: 12px; }

.recharge__wallet { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.recharge__presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.recharge__preset { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 14px; border: 0.5px solid var(--portal-border-strong); border-radius: var(--portal-radius-control); background: var(--portal-surface); cursor: pointer; text-align: left; }
.recharge__preset[data-selected="true"] { border-color: var(--portal-accent); background: var(--portal-accent-bg); }
.recharge__preset-amount { font-size: 16px; font-weight: 500; color: var(--portal-text); }
.recharge__preset[data-selected="true"] .recharge__preset-amount { color: var(--portal-accent-text); }
.recharge__preset-credits { font-size: 12px; color: var(--portal-text-muted); }
.recharge__custom { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.recharge__custom-label { font-size: 13px; color: var(--portal-text-secondary); }
.recharge__custom .portal-input { width: 180px; height: 36px; }
/* 记录/兑换券与充值卡三分区并列,卡间距统一 14px(2026-07-18 QA) */
.recharge__voucher { margin-top: 14px; }
.recharge__voucher-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.recharge__voucher-row .portal-input { width: 240px; height: 36px; }
.recharge__voucher-history-title { margin-top: 18px; }
.recharge__rate { font-size: 12px; color: var(--portal-text-muted); margin: 0 0 10px; }
/* 支付处理费明细(2026-07-19):支付前明示 本金/处理费/合计 */
.recharge__fee { max-width: 360px; border: 1px solid var(--portal-border); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.recharge__fee-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--portal-text-muted); padding: 3px 0; }
.recharge__fee-row--total { border-top: 1px solid var(--portal-border); margin-top: 4px; padding-top: 7px; color: var(--portal-text); }
/* 说明小字不限宽(2026-07-23:360px 会把「最低充值」挤到第二行) */
.recharge__fee-caption { font-size: 12px; color: var(--portal-text-muted); margin: 6px 0 12px; white-space: nowrap; }
.recharge__methods { list-style: none; display: flex; gap: 14px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.recharge__method { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--portal-text-secondary); border: 0.5px solid var(--portal-border); border-radius: var(--portal-radius-control); padding: 7px 12px; }
.recharge__notice { font-size: 13px; padding: 9px 12px; border-radius: var(--portal-radius-control); margin-bottom: 12px; }
.recharge__notice--success { background: var(--portal-success-bg); color: var(--portal-success-text); }
.recharge__notice--error { background: var(--portal-danger-bg); color: var(--portal-danger-text); }
.recharge__submit { margin-bottom: 10px; }
.recharge__hint { font-size: 12px; color: var(--portal-text-muted); margin: 0; }
/* Auto Top-Up(2026-07-31):设置卡与「保存卡片」勾选,样式对齐 byok-plan-autorenew/profile__row 惯例 */
.autotopup__savecard { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--portal-text-secondary); margin: 10px 0; cursor: pointer; }
.autotopup__savecard input { accent-color: var(--portal-accent); }
.autotopup__card-value { display: inline-flex; align-items: center; gap: 10px; }
.autotopup .recharge__custom { margin-top: 10px; }
.autotopup .portal-btn-primary { margin-top: 12px; }
.autotopup__auth { margin-top: 10px; }
.recharge__bills { margin-top: 14px; }
/* 品牌 Logo(0.1.182/0.1.183):字标为纯黑透明 PNG,暗色主题整图反色成白;
   中国版蓝「简」图标彩色,不挂 invert(只反白字标)。 */
.portal-topbar__brandlink { display: inline-flex; align-items: center; }
.portal-topbar__logo { display: block; height: 18px; width: auto; }
.portal-login__logo { display: block; height: 24px; width: auto; margin-bottom: 14px; }
.portal-topbar__brandmark { display: inline-flex; align-items: center; gap: 8px; }
.portal-topbar__logo-icon { display: block; height: 20px; width: 20px; }
.portal-login__brandmark { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.portal-login__brandmark .portal-login__logo { margin-bottom: 0; }
.portal-login__logo-icon { display: block; height: 26px; width: 26px; }
:root[data-theme="dark"] .portal-topbar__logo,
:root[data-theme="dark"] .portal-login__logo { filter: invert(1); }

.recharge__pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 12px; }
.recharge__page-info { font-size: 13px; color: var(--portal-text-secondary); }
.recharge__bills-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
/* 交易记录表体高度跟随内容(2026-07-23 二改:固定 500px 让空标签下方大片留白);
   防跳页交给 render 的滚动位置保持;每页仍 10 条封顶,超出分页。 */
.recharge__bills-body { min-height: 0; }
.recharge__invoice-hint { font-size: 12px; color: var(--portal-text-muted); margin: 10px 0 0; }
.recharge__receipt-link { color: var(--portal-accent-text); text-decoration: none; }
.recharge__receipt-link:hover { text-decoration: underline; }
.recharge__receipt-muted { color: var(--portal-text-muted); font-size: 12px; }

.portal-vendorchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.portal-vendorchip { border: 0.5px solid var(--portal-border-strong); border-radius: 20px; background: var(--portal-surface); color: var(--portal-text-secondary); font-size: 13px; padding: 6px 14px; cursor: pointer; }
.portal-vendorchip[data-active="true"] { border-color: var(--portal-accent); background: var(--portal-accent-bg); color: var(--portal-accent-text); }

.profile__card { max-width: 640px; margin-bottom: 14px; }
.profile__identity { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 0.5px solid var(--portal-border); margin-bottom: 6px; }
.profile__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--portal-accent-bg); color: var(--portal-accent-text); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; }
.profile__name { font-size: 15px; font-weight: 500; }
.profile__email { font-size: 13px; color: var(--portal-text-secondary); }
.profile__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 0.5px solid var(--portal-border); font-size: 13px; }
.profile__row:last-child { border-bottom: none; }
.profile__label { color: var(--portal-text-muted); }
.profile__value { display: inline-flex; align-items: center; gap: 8px; }
.profile__actions { max-width: 640px; }
.profile__danger { margin: 0; padding: 0; border: 0; }
.profile__deletion { background: transparent; border: none; color: var(--portal-danger-text); font-size: 13px; padding: 0; cursor: pointer; }
.profile__danger-hint { font-size: 12px; color: var(--portal-text-muted); margin: 6px 0 0; }

/* 组织切换下拉 */
.portal-orgmenu { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; padding: 6px; border: 0.5px solid var(--portal-border); border-radius: var(--portal-radius-control); background: var(--portal-surface); }
.portal-orgmenu[hidden] { display: none; }
.portal-orgmenu__item { text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--portal-text); font-size: 13px; cursor: pointer; }
.portal-orgmenu__item:hover { background: var(--portal-surface-muted); }
.portal-orgmenu__item.is-active { background: var(--portal-accent-bg); color: var(--portal-accent-text); }

/* 个人资料:手机号行内编辑与修改密码 */
.profile__phone { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile__phone-input { width: 160px; height: 32px; }
.profile__phone-msg { font-size: 12px; color: var(--portal-accent-text); }
.profile__emailverify { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile__verify-input { width: 120px; height: 32px; }

/* 工单对话气泡:颜色一律走 --portal-* 令牌,保证明暗双主题成立(此前内联 #eee 在暗色下浅底浅字) */
.portal-ticket-msg-row { display: flex; justify-content: flex-start; margin: 8px 0; }
.portal-ticket-msg-row--mine { justify-content: flex-end; }
.portal-ticket-msg { max-width: 70%; padding: 8px 12px; border-radius: 8px; background: var(--portal-surface-muted); color: var(--portal-text); }
.portal-ticket-msg--mine { background: var(--portal-accent); color: #fff; }
.portal-ticket-msg__meta { font-size: 12px; opacity: 0.7; }
.portal-ticket-msg__body { white-space: pre-wrap; }

/* 全局公告横幅 */
.portal-announcement { display: flex; align-items: flex-start; gap: 12px; margin: 16px 24px 0; padding: 10px 14px; border-radius: var(--portal-radius-control); border: 0.5px solid var(--portal-border); background: var(--portal-surface-muted); font-size: 13px; }
.portal-announcement__text { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.portal-announcement__text strong { color: var(--portal-text); }
.portal-announcement__text span { color: var(--portal-text-muted); white-space: pre-wrap; }
.portal-announcement__close { margin-left: auto; border: 0; background: transparent; color: var(--portal-text-muted); font-size: 16px; cursor: pointer; line-height: 1; }
.portal-announcement--warning, .portal-announcement--incident { border-color: var(--portal-banner-warning); background: rgba(240, 180, 41, 0.08); }
.portal-announcement--maintenance { border-color: var(--portal-accent); background: var(--portal-accent-bg); }


.portal-announcement__ack { margin-left: auto; flex-shrink: 0; border: 0.5px solid var(--portal-border); border-radius: 6px; background: var(--portal-surface); color: var(--portal-text); font-size: 12px; padding: 4px 12px; cursor: pointer; }
.portal-announcement__ack:hover { background: var(--portal-surface-muted); }

/* hidden 属性必须永远生效:display:grid/flex 等作者样式会压过 UA 的 hidden,已连坑三次(portal-keynew/sub-panel),全局兜底 */
[hidden] {
  display: none !important;
}

/* ── BYOK(自带密钥)客户页 ─────────────────────────────────────── */
.byok .portal-card + .portal-card,
.byok [data-role="usage"] + .portal-card,
.byok .portal-card { margin-top: 16px; }
.byok .portal-page__head .portal-page__title { margin-top: 8px; }

.byok-card__title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.byok-card__hint { font-size: 13px; color: var(--portal-text-secondary); margin: 0 0 14px; line-height: 1.5; }

/* provider 列表 */
.byok-provider-list { display: flex; flex-direction: column; }
.byok-provider {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: 0.5px solid var(--portal-border);
}
.byok-provider:first-child { border-top: none; }
.byok-provider__name { font-size: 14px; font-weight: 500; }
.byok-provider__meta { display: inline-flex; align-items: center; gap: 12px; }

/* 小号按钮 + 危险按钮 */
.byok-btn-sm { padding: 5px 12px; font-size: 12px; }
.byok-btn-danger { color: var(--portal-danger-text); border-color: var(--portal-danger-text); }
.byok-back { margin-bottom: 10px; }

/* key 行 */
.byok-key-list { display: flex; flex-direction: column; }
.byok-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 0.5px solid var(--portal-border);
}
.byok-key:first-child { border-top: none; }
.byok-key__main { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.byok-key__name { font-size: 14px; font-weight: 500; }
.byok-key__mask { font-size: 12px; color: var(--portal-text-secondary); font-family: ui-monospace, monospace; }
.byok-key__always { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--portal-text-secondary); cursor: pointer; }
.byok-key__always input { width: 16px; height: 16px; accent-color: var(--portal-accent); }
.byok-key__actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.byok-key__msg { font-size: 12px; color: var(--portal-text-secondary); }
.byok-empty-hint { font-size: 13px; color: var(--portal-text-muted); margin: 0; }

/* 添加密钥表单 */
.byok-field { display: block; margin-bottom: 12px; }
.byok-field__label { display: block; font-size: 13px; color: var(--portal-text-secondary); margin-bottom: 6px; }
.byok-add__actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

/* 用量卡 */
.byok-usage { display: block; }
.byok-usage__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.byok-usage__fee { display: flex; align-items: baseline; gap: 8px; }
.byok-usage__label { font-size: 13px; color: var(--portal-text-secondary); }
.byok-usage__value { font-size: 15px; font-weight: 600; white-space: nowrap; }
.byok-usage__meta { display: flex; gap: 18px; font-size: 13px; color: var(--portal-text-secondary); }
/* 2026-07-22 视觉走查:标签/数字/进度条/百分比/档位同一行 */
.byok-usage__row { display: flex; align-items: center; gap: 14px; }
.byok-usage__row .byok-meter { flex: 1; min-width: 120px; }
.byok-usage__label { font-size: 13px; color: var(--portal-text-secondary); white-space: nowrap; }

.byok-empty { color: var(--portal-text-secondary); font-size: 14px; line-height: 1.6; }

/* 调用记录:BYOK 标识 + 软件费 */
.call-records__byok {
  margin-left: 6px;
  background: var(--portal-accent-bg);
  color: var(--portal-accent-text);
  font-weight: 500;
}
.call-records__fee { display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end; }
.call-records__fee-tag {
  font-size: 11px;
  color: var(--portal-text-secondary);
  background: var(--portal-surface-muted);
  border-radius: 4px;
  padding: 1px 5px;
}

/* BYOK:服务商整行可点(#5) */
.byok-provider--clickable { cursor: pointer; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--portal-radius-control); }
.byok-provider--clickable:hover { background: var(--portal-surface-muted); }
.byok-provider__chevron { color: var(--portal-text-muted); font-size: 18px; margin-left: 2px; }

/* 调用记录范围说明(#8) */
.portal-page__note { font-size: 12px; color: var(--portal-text-muted); margin: 4px 0 0; }

/* BYOK:provider 级「不用平台兜底」开关(#7) */
.byok-toggle-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.byok-toggle-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--portal-accent); flex: none; }
.byok-toggle-row > span { display: flex; flex-direction: column; gap: 2px; }
.byok-toggle-row .byok-card__hint { margin: 0; }

/* BYOK:免费额度用量进度条(安全蓝 / ≥80% 警戒红) */
.byok-meter-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.byok-meter {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 120, 140, 0.18);
  overflow: hidden;
}
.byok-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: #3b82f6;
  transition: width 0.3s ease;
}
.byok-meter__fill--warn { background: #dc2626; }
.byok-meter__pct { font-size: 13px; color: var(--portal-text-secondary); white-space: nowrap; }
.byok-meter__pct--warn { color: #dc2626; font-weight: 600; }
/* 计费改版:套餐定价卡(2026-07-22 视觉走查重设计) */
.byok-usage__renewal-failed { color: #dc2626; margin-top: 10px; }
.byok-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  gap: 16px;
  align-items: stretch;
}
.byok-plan-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-card);
  padding: 16px;
  background: var(--portal-surface);
}
.byok-plan-card--current {
  border-color: var(--portal-accent);
  background: var(--portal-accent-bg);
}
.byok-plan-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.byok-plan-card__name { font-size: 14px; font-weight: 600; }
.byok-plan-card__price { font-size: 13px; color: var(--portal-text-secondary); white-space: nowrap; }
.byok-plan-card__quota { font-size: 20px; font-weight: 600; line-height: 1.2; }
.byok-plan-card__unit { font-size: 12px; color: var(--portal-text-muted); margin: 2px 0 12px; }
.byok-plan-card__perks {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--portal-text-secondary);
}
.byok-plan-card__perks li { padding-left: 16px; position: relative; }
.byok-plan-card__perks li::before { content: "✓"; position: absolute; left: 0; color: var(--portal-accent); }
.byok-plan-card__action { margin-top: auto; }
.byok-plan-autorenew-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.byok-plan-autorenew {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--portal-text-secondary);
}
.byok-plan-autorenew__msg { font-size: 13px; color: var(--portal-success-text); }
.byok-plan-autorenew__msg--error { color: var(--portal-danger-text); }
/* 计费改版:BYOK 转化组件 */
.byok-insurance__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.byok-convert-line { margin-top: 8px; }
.byok-platform-only .portal-vendorchips { margin: 10px 0; }
/* 统一发票:抬头卡表单 */
.recharge__invoice-profile { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.recharge__invoice-profile label { font-size: 13px; color: var(--portal-text-secondary); display: flex; flex-direction: column; gap: 6px; }
/* BYOK 产品说明页 */
.byok-guide .portal-card { margin-bottom: 16px; }
.byok-guide__body p { font-size: 14px; line-height: 1.7; color: var(--portal-text-secondary); margin: 0 0 8px; }
/* 常见问题问答分离(2026-07-23):问加粗正色,答退后并留段距 */
.byok-guide__body .byok-guide__q { font-weight: 600; color: var(--portal-text); margin: 14px 0 2px; }
.byok-guide__body .byok-guide__q:first-child { margin-top: 0; }
.byok-guide__body .byok-guide__a { margin: 0 0 10px; }
.byok-guide .portal-page__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
/* 充值页分区导航 + BYOK 套餐按钮统一主色 */
.recharge__nav { margin-bottom: 16px; flex-wrap: wrap; }
/* 充值卡内「在线充值/对公转账」标签(2026-07-23 改版) */
.recharge__topup-tabs { margin-bottom: 14px; flex-wrap: wrap; }
/* 对公转账 pane:Wise 式行版式(2026-08-16 用户走查改版)——标签小字在上/值加粗/适用范围灰注/右侧纯图标复制钮 */
.recharge__bank-pane { max-width: 640px; }
.recharge__bank-rows { margin: 8px 0 12px; }
.recharge__bank-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--portal-border); }
.recharge__bank-row:last-child { border-bottom: none; }
.recharge__bank-info { min-width: 0; }
.recharge__bank-label { display: block; color: var(--portal-text-muted); font-size: 12px; }
.recharge__bank-value { display: block; font-size: 14px; font-weight: 600; word-break: break-all; margin-top: 2px; }
.recharge__bank-note { display: block; color: var(--portal-text-muted); font-size: 12px; margin-top: 2px; }
.recharge__bank-copy { flex-shrink: 0; border: none; background: none; color: var(--portal-text-muted); cursor: pointer; padding: 6px; border-radius: 6px; line-height: 0; }
.recharge__bank-copy:hover { color: var(--portal-text); background: var(--portal-accent-bg); }
.recharge__bank-paylink { display: flex; align-items: flex-start; gap: 16px; margin: 4px 0 14px; padding: 12px; border: 0.5px solid var(--portal-border); border-radius: 10px; }
.recharge__bank-qr { flex-shrink: 0; border-radius: 6px; }
.recharge__bank-paylink-info { min-width: 0; }
.recharge__bank-paylink-text { color: var(--portal-text-secondary); font-size: 13px; margin: 4px 0 10px; }
.recharge__bank-pane .recharge__submit { width: 100%; }
/* 步骤标题:标准字体加粗、大一号,与上文空半行 */
.recharge__bank-step { font-size: 15px; font-weight: 600; margin: 16px 0 10px; }
/* 抬头表单同款单行:label：输入框 */
.recharge__bank-pane .recharge__invoice-profile { max-width: none; }
.recharge__bank-pane .recharge__invoice-profile label { flex-direction: row; align-items: center; gap: 10px; }
.recharge__bank-pane .recharge__invoice-profile label span { flex-shrink: 0; }
.recharge__bank-pane .recharge__invoice-profile label span::after { content: ": "; }
.recharge__bank-pane .recharge__invoice-profile input { flex: 1; }
.byok-plan-card__btn { width: 100%; }
.byok-plan-card__btn:disabled { opacity: 0.55; cursor: default; }
.byok-plan-card__btn:disabled:hover { background: var(--portal-accent); }