/* ==========================================================================
   Matbox AI 网关 · 控制台主题（注入式覆盖 one-api 自带 semantic-ui 样式）
   由 nginx 在 index.html 里追加 <link>，不修改 one-api 二进制。
   设计语言：纸面浅灰 + 深色导航板 + 单一琥珀强调色；数字一律等宽字体。
   ========================================================================== */

:root {
  --paper: #ECEFF3;
  --surface: #FFFFFF;
  --ink: #0C141D;
  --ink-2: #55636F;
  --ink-3: #8B97A3;
  --rule: #D6DEE6;
  --rule-2: #C2CCD6;
  --board: #121B26;
  --board-2: #18232F;
  --board-rule: #243040;
  --board-ink: #E9EFF5;
  --board-ink-2: #94A3B2;
  --amber: #FFB020;
  --amber-soft: #FFD27A;
  --amber-ink: #14202B;
  --link: #8A5A00;
  --radius: 12px;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
          'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── 基础排版 ───────────────────────────────────────────────────────────── */
html, body { background: var(--paper) !important; }
body, .ui, .ui *:not(i):not(.icon):not(code):not(pre):not(kbd) { font-family: var(--sans); }
body { color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
code, pre, kbd, samp, .ui.table .tabular, .ui.header .sub.header code { font-family: var(--mono); }
.ui.table td, .ui.table th { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, .ui.header { letter-spacing: -.01em; }
.ui.header { color: var(--ink); }
a { color: var(--link); }
a:hover { color: var(--ink); }

/* ── 顶部导航条（横向 menu） ───────────────────────────────────────────── */
.ui.menu:not(.vertical) {
  background: var(--surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ui.menu:not(.vertical) > .item { color: var(--ink-2) !important; font-size: 14px; }
.ui.menu:not(.vertical) > .item:before { background: none !important; }
.ui.menu:not(.vertical) > .item:hover, .ui.menu:not(.vertical) > .item.active { color: var(--ink) !important; }
.ui.menu:not(.vertical) img { border-radius: 6px; }

/* ── 侧边栏（纵向 menu）= 深色导航板 ──────────────────────────────────── */
.ui.vertical.menu {
  background: var(--board) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-bottom: 8px;
}
.ui.vertical.menu .item {
  color: #C6D1DC !important;
  font-size: 14px;
  padding: 11px 16px !important;
  transition: background .15s, color .15s;
}
.ui.vertical.menu .item:hover { background: #1B2733 !important; color: #FFFFFF !important; }
.ui.vertical.menu .item.active {
  background: var(--board-2) !important;
  color: var(--amber) !important;
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--amber);
}
.ui.vertical.menu .item > i.icon { color: inherit !important; opacity: .85; }
.ui.vertical.menu .item .menu .item { color: #A9B6C4 !important; font-size: 13px; }
.ui.vertical.menu .header.item, .ui.vertical.menu .item.header { color: var(--board-ink-2) !important; }
.ui.vertical.menu .divider { border-color: var(--board-rule) !important; }

/* ── 卡片 / 分段 ───────────────────────────────────────────────────────── */
.ui.card, .ui.cards > .card, .ui.segment {
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.ui.segments { border: 1px solid var(--rule) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
.ui.raised.card, .ui.raised.segment { box-shadow: 0 18px 34px -28px rgba(12,20,29,.6) !important; }
.main-content { background: var(--paper) !important; }

/* ── 表格 ─────────────────────────────────────────────────────────────── */
.ui.table {
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  font-size: 13.5px;
  background: var(--surface) !important;
}
.ui.table thead th {
  background: #F6F8FB !important;
  color: var(--ink-2) !important;
  font-size: 12px;
  font-weight: 500;
  border-color: var(--rule) !important;
}
.ui.table td, .ui.table th { border-color: var(--rule) !important; }
.ui.table tbody tr:hover, .ui.selectable.table tbody tr:hover { background: #F5F8FB !important; }
.ui.sortable.table thead th:hover { background: #EEF2F6 !important; }
.ui.table .positive, .ui.table td.positive { color: #1F7A4D !important; }
.ui.table .negative, .ui.table td.negative { color: #B3261E !important; }

/* ── 按钮 ─────────────────────────────────────────────────────────────── */
.ui.button {
  border-radius: 8px !important;
  font-weight: 500;
  box-shadow: none !important;
  transition: background .15s, color .15s, border-color .15s;
}
.ui.primary.button, .ui.primary.buttons .button, .ui.blue.button, .ui.blue.buttons .button {
  background: var(--amber) !important;
  color: var(--amber-ink) !important;
}
.ui.primary.button:hover, .ui.blue.button:hover { background: var(--amber-soft) !important; color: var(--amber-ink) !important; }
.ui.button:not(.primary):not(.blue):not(.red):not(.green):not(.teal):not(.orange) {
  background: var(--surface) !important;
  border: 1px solid var(--rule-2) !important;
  color: var(--ink) !important;
}
.ui.button:not(.primary):not(.blue):not(.red):not(.green):not(.teal):not(.orange):hover {
  border-color: var(--ink-3) !important;
}
.ui.red.button { background: #C0392B !important; }

/* ── 表单控件 ─────────────────────────────────────────────────────────── */
.ui.input > input, .ui.form input:not([type="checkbox"]), .ui.form textarea, textarea, select {
  border: 1px solid var(--rule-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.ui.input > input:focus, .ui.form input:focus, textarea:focus, select:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(255,176,32,.18) !important;
  outline: none !important;
}
.ui.form label, .ui.form .field > label { color: var(--ink-2) !important; font-weight: 500; }
.ui.checkbox label, .ui.radio.checkbox label { color: var(--ink) !important; }
.ui.checkbox input:checked ~ label:before, .ui.radio.checkbox input:checked ~ label:before {
  background: var(--amber) !important; border-color: var(--amber) !important;
}
.ui.dropdown, .ui.selection.dropdown {
  border: 1px solid var(--rule-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.ui.dropdown .menu {
  border: 1px solid var(--rule) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 30px -22px rgba(12,20,29,.55) !important;
  overflow: hidden;
}
.ui.dropdown .menu > .item.active, .ui.dropdown .menu > .item:hover { background: #F6F8FB !important; }

/* ── 提示条 / 标签 / 弹窗 / 分页 ──────────────────────────────────────── */
.ui.message {
  background: #F6F8FB !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.ui.label { border-radius: 6px !important; }
.ui.attached.label { border-radius: 6px 6px 0 0 !important; }
.ui.modal {
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -34px rgba(12,20,29,.6) !important;
}
.ui.modal > .header { border-bottom: 1px solid var(--rule) !important; font-size: 16px !important; }
.ui.pagination.menu { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.ui.pagination.menu .item {
  border-radius: 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  margin-right: 4px;
  color: var(--ink-2) !important;
}
.ui.pagination.menu .active.item {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: var(--amber-ink) !important;
  font-weight: 600;
}
.ui.accordion .title, .ui.styled.accordion .title { color: var(--ink) !important; }

/* ── 页脚（保留 one-api 的版权标识） ──────────────────────────────────── */
.custom-footer {
  padding: 18px 0 26px;
  color: var(--ink-3) !important;
  font-size: 12px;
  line-height: 1.8;
}
.custom-footer a { color: var(--ink-3); }
.custom-footer a:hover { color: var(--ink-2); }

/* ── 可访问性 / 动效 / 滚动条 ─────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #B7C2CE transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #B7C2CE; border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 移动端 ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ui.card, .ui.segment, .ui.table { border-radius: 10px !important; }
  .ui.table { font-size: 12.5px; }
}

/* ── 页面主体最小高度（内容少时也把版面撑开）──────────────────────────── */
.ui.segment:first-child { min-height: 80vh; }
/* 弹窗里的 segment 不跟着撑高，否则小弹窗会变成整屏 */
.ui.modal .ui.segment:first-child, .ui.dimmer .ui.segment:first-child { min-height: 0; }