/* ============================================================
   星枢 ASTRA GATE · Brand UI Override for one-api (Semantic UI React)
   Injected after main.*.css by nginx sub_filter.
   Theme is token-driven: change :root variables to reskin.
   ============================================================ */

:root {
  /* 深空基底 */
  --bg:          #080B14;
  --bg-grad-1:   rgba(91, 140, 255, .13);
  --bg-grad-2:   rgba(34, 211, 238, .07);
  --surface:     #101728;
  --surface-2:   #16203A;
  --surface-3:   #1B2745;
  --border:      #23304F;
  --border-soft: #1A2440;

  /* 文本 */
  --text:        #EAF0FF;
  --text-2:      #9AAACB;
  --text-3:      #6B7CA3;

  /* 品牌 */
  --primary:     #5B8CFF;
  --primary-2:   #22D3EE;
  --accent:      #A78BFA;
  --grad:        linear-gradient(120deg, #5B8CFF 0%, #22D3EE 55%, #A78BFA 100%);

  /* 语义 */
  --success:     #34D399;
  --warning:     #FBBF24;
  --danger:      #FB7185;
  --info:        #38BDF8;

  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 8px 30px rgba(0, 0, 0, .38);
  --shadow-glow: 0 0 0 1px rgba(91, 140, 255, .18), 0 12px 40px rgba(0, 0, 0, .45);
  --font:        "Inter", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono:        ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ---------- 全局 ---------- */
html, body, #root {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-variant-numeric: tabular-nums;
  min-height: 100%;
}
body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, var(--bg-grad-1), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, var(--bg-grad-2), transparent 60%) !important;
  background-attachment: fixed !important;
}
h1, h2, h3, h4, h5, .ui.header,
.ui.header .sub.header { color: var(--text) !important; font-family: var(--font) !important; }
a, a:visited { color: var(--primary) !important; }
a:hover { color: var(--primary-2) !important; }
::selection { background: rgba(91, 140, 255, .38); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2A3A60; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3C5290; }

/* ---------- 顶部导航 ---------- */
.ui.menu,
.ui.menu:not(.vertical) {
  background: rgba(13, 19, 34, .82) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: none !important;
  border-bottom: 1px solid var(--border-soft) !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .35) !important;
  border-radius: 0 !important;
  min-height: 62px;
}
.ui.menu .item,
.ui.menu .item > *,
.ui.menu .item .icon,
.ui.dropdown .text {
  color: var(--text-2) !important;
  font-weight: 500 !important;
}
.ui.menu .item:hover,
.ui.menu .item.active,
.ui.menu .active.item { color: var(--text) !important; background: rgba(91, 140, 255, .12) !important; }
.ui.menu .item::before { background: var(--border-soft) !important; }
/* 顶栏只显示图形标记，文字由 SystemName 承担，避免品牌名重复 */
.ui.menu .item img[alt="logo"],
.ui.menu .header.item img {
  height: 38px !important;
  width: 38px !important;
  object-fit: cover;
  object-position: left center;
  margin-right: .8em !important;
}
.ui.menu .item > div { color: var(--text) !important; font-weight: 700 !important; letter-spacing: .5px !important; }
.ui.container { max-width: 1280px !important; }

/* ---------- 下拉 / 弹层 ---------- */
.ui.dropdown .menu,
.ui.selection.dropdown .menu,
.ui.menu .ui.dropdown .menu,
.ui.popup,
.ui.upward.dropdown > .menu {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius-sm) !important;
}
.ui.dropdown .menu > .item,
.ui.dropdown .menu > .item > * { color: var(--text-2) !important; }
.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > .selected.item { background: rgba(91, 140, 255, .16) !important; color: var(--text) !important; }
.ui.dropdown .menu > .divider { border-top: 1px solid var(--border) !important; }

/* ---------- 容器 / 卡片 / 区块 ---------- */
.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.statistic,
.ui.message,
.ui.stacked.segment,
.ui.piled.segment {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}
.ui.segment.vertical { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
.ui.card > .content > .header,
.ui.card > .content > .description,
.ui.cards > .card > .content > .header { color: var(--text) !important; }
.ui.card .meta, .ui.card .meta * { color: var(--text-3) !important; }
.ui.statistic > .value,
.ui.statistic > .label,
.ui.statistic .value { color: var(--text) !important; font-family: var(--mono) !important; }
.ui.message .header { color: var(--text) !important; }
.ui.info.message { background: rgba(56, 189, 248, .10) !important; border-color: rgba(56, 189, 248, .35) !important; }
.ui.success.message { background: rgba(52, 211, 153, .10) !important; border-color: rgba(52, 211, 153, .35) !important; }
.ui.warning.message { background: rgba(251, 191, 36, .10) !important; border-color: rgba(251, 191, 36, .35) !important; }
.ui.error.message { background: rgba(251, 113, 133, .10) !important; border-color: rgba(251, 113, 133, .35) !important; }

/* ---------- 按钮 ---------- */
.ui.button,
.ui.buttons .button {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: all .18s ease;
}
.ui.button:hover,
.ui.buttons .button:hover { background: var(--surface-3) !important; border-color: var(--primary) !important; transform: translateY(-1px); }
.ui.primary.button,
.ui.buttons .primary.button,
.ui.blue.button,
.ui.primary.buttons .button {
  background: var(--grad) !important;
  color: #06101F !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: 0 6px 20px rgba(91, 140, 255, .28) !important;
}
.ui.primary.button:hover { filter: brightness(1.12); box-shadow: 0 8px 26px rgba(34, 211, 238, .34) !important; }
.ui.basic.button,
.ui.basic.buttons .button { background: transparent !important; color: var(--text-2) !important; box-shadow: none !important; }
.ui.basic.primary.button { color: var(--primary-2) !important; border-color: rgba(34, 211, 238, .5) !important; }
.ui.negative.button, .ui.red.button { background: rgba(251, 113, 133, .16) !important; color: #FFB3BF !important; border-color: rgba(251, 113, 133, .4) !important; }
.ui.positive.button, .ui.green.button { background: rgba(52, 211, 153, .16) !important; color: #8FF0C8 !important; border-color: rgba(52, 211, 153, .4) !important; }
.ui.button .icon, .ui.button > .icon { color: inherit !important; }

/* ---------- 表单 ---------- */
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.form select,
.ui.input > input,
.ui.selection.dropdown,
.ui.form .field > .selection.dropdown {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.ui.form input:focus,
.ui.input > input:focus,
.ui.selection.dropdown:focus,
.ui.selection.active.dropdown { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(91, 140, 255, .16) !important; }
.ui.form input::placeholder, .ui.input > input::placeholder { color: var(--text-3) !important; }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
}
.ui.form .field > label,
.ui.form label,
.ui.checkbox label, .ui.checkbox + label { color: var(--text-2) !important; }
.ui.selection.dropdown > .text,
.ui.selection.dropdown > .default.text { color: var(--text) !important; }
.ui.selection.dropdown .menu > .item { color: var(--text-2) !important; }
.ui.form .field .ui.input .icon { color: var(--text-3) !important; }

/* ---------- 表格 ---------- */
.ui.table {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}
.ui.table thead th,
.ui.table th {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
}
.ui.table td { color: var(--text) !important; border-top: 1px solid var(--border-soft) !important; }
.ui.table tr:hover td, .ui.selectable.table tbody tr:hover td { background: rgba(91, 140, 255, .08) !important; }
.ui.striped.table tbody tr:nth-child(2n) td { background: rgba(255, 255, 255, .018) !important; }
.ui.table a { color: var(--primary-2) !important; }
.ui.table .ui.label { color: #06101F !important; }

/* ---------- 标签 / 徽章 ---------- */
.ui.label {
  background: rgba(91, 140, 255, .16) !important;
  color: #B9CDFF !important;
  border: 1px solid rgba(91, 140, 255, .3) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.ui.green.label { background: rgba(52, 211, 153, .16) !important; color: #8FF0C8 !important; border-color: rgba(52, 211, 153, .3) !important; }
.ui.red.label   { background: rgba(251, 113, 133, .16) !important; color: #FFB3BF !important; border-color: rgba(251, 113, 133, .3) !important; }
.ui.yellow.label{ background: rgba(251, 191, 36, .16) !important; color: #FFDD8A !important; border-color: rgba(251, 191, 36, .3) !important; }

/* ---------- 模态框 / 遮罩 ---------- */
.ui.dimmer { background: rgba(4, 7, 14, .82) !important; }
.ui.modal, .ui.modal > .header, .ui.modal > .content, .ui.modal > .actions {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.ui.modal > .header { border-bottom: 1px solid var(--border) !important; border-radius: var(--radius) var(--radius) 0 0 !important; }
.ui.modal > .actions { border-top: 1px solid var(--border) !important; }
.ui.modal { border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-glow) !important; }

/* ---------- 分页 / 选项卡 / 分割线 ---------- */
.ui.pagination.menu, .ui.tabular.menu, .ui.secondary.menu, .ui.vertical.menu {
  background: transparent !important; border-color: var(--border) !important;
}
.ui.tabular.menu .item, .ui.secondary.menu .item, .ui.vertical.menu .item { color: var(--text-2) !important; }
.ui.tabular.menu .active.item, .ui.secondary.menu .active.item { background: rgba(91, 140, 255, .14) !important; color: var(--text) !important; border-color: var(--primary) !important; }
.ui.divider { border-top: 1px solid var(--border) !important; }

/* ---------- 首页 / 关于 / 页脚 ---------- */
.custom-footer, .custom-footer * { color: var(--text-3) !important; }
.custom-footer a { color: var(--primary-2) !important; text-decoration: none; }
.ui.segment.vertical:last-of-type { background: transparent !important; border-top: 1px solid var(--border-soft) !important; }

/* 品牌首页内容（HomePageContent / About 注入的 HTML） */
.astra-hero {
  padding: 46px 40px 40px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(91,140,255,.16), rgba(34,211,238,.07) 48%, rgba(167,139,250,.12));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}
.astra-hero::after {
  content: ""; position: absolute; right: -70px; top: -90px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(34,211,238,.22), transparent 65%); pointer-events: none;
}
.astra-hero h1 { margin: 0 0 12px; font-size: 34px; letter-spacing: 2px; color: #F2F6FF !important; }
.astra-hero h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.astra-hero p { color: var(--text-2); font-size: 15px; line-height: 1.9; margin: 0 0 22px; max-width: 680px; }
.astra-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(34,211,238,.12); color: #8BE9F7 !important; border: 1px solid rgba(34,211,238,.3); margin-bottom: 18px;
}
.astra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }
.astra-card {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 22px; box-shadow: var(--shadow);
}
.astra-card h3 { margin: 0 0 10px; font-size: 16px; color: var(--text) !important; }
.astra-card p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--text-2) !important; }
.astra-card .k { font-family: var(--mono); font-size: 11px; color: var(--primary-2) !important; letter-spacing: 1.5px; }

/* ---------- 登录页 ---------- */
.ui.centered.grid > .column, .ui.grid > .column { color: var(--text) !important; }

/* ---------- 动效 ---------- */
.ui.card, .ui.segment, .ui.button { transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
@keyframes astraFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#root { animation: astraFade .35s ease-out; }

/* ---------- 移动端 ---------- */
@media (max-width: 767px) {
  .ui.menu .item img[alt="logo"] { height: 32px !important; }
  .astra-hero { padding: 28px 22px; }
  .astra-hero h1 { font-size: 26px; }
  .ui.container { padding-left: 12px !important; padding-right: 12px !important; }
}