/* ══════════════════════════════════════════════════════════
   TAEONA 主题层 —— Hub / LiftOff 共用
   载入顺序在各页原有样式之后，用变量覆盖而不是重写规则。

   取自宣传站的：色板、JetBrains Mono、方角、细线分隔、
   金色只作强调而非填充。
   刻意不取的：噪点/扫描线/十字准星光标/标题全大写/开场动画——
   那些在一天要看八小时的工具里是负担，不是风格。
   ══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700;800&display=swap');

:root, body, body.light {
  --bg:        #0B0D0F;
  --panel:     #101214;
  --panel-2:   #15181D;
  --line:      rgba(241,240,232,.12);
  --line-strong: rgba(241,240,232,.22);
  --text:      #F1F0E8;
  --muted:     #8C9298;
  --hover:     rgba(241,240,232,.06);
  /* 品牌色从橙粉渐变换成 TAEONA 的暖金。单色，不做渐变——
     渐变按钮在密集界面里会把视线全吸过去。 */
  --brand:     #D8B36A;
  --brand-2:   #D8B36A;
  --sidebar-bg: #0B0D0F;
  --topbar-bg: rgba(11,13,15,.82);
  --ok:        #D5E6B5;
  --danger:    #C97C64;
  --taeona-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 白天模式一并压成深色：两套主题维护成本翻倍，而这是内部工具。 */
body.light { color-scheme: dark; }

html, body { background: var(--bg) !important; color: var(--text); }
body, button, input, select, textarea, .pb-title, h1, h2, h3, h4 {
  font-family: var(--taeona-mono) !important;
  letter-spacing: .01em;
}
body { -webkit-font-smoothing: antialiased; }

/* 方角。宣传站没有一处圆角，这里也不该有。 */
*, *::before, *::after { border-radius: 0 !important; }
/* 唯一例外：圆的东西本来就是圆的（头像、状态灯、封印）。 */
img[class*="logo"], img[class*="avatar"], .avatar, .dot,
.pb-status, [class*="status"]::before { border-radius: 50% !important; }

/* 渐变一律拍平——原版按钮是 orange→pink，在深色密集界面里过响。 */
[style*="gradient"], .btn-primary, button[class*="primary"],
.pb-cta, .cta, .tab.active, .seg.active {
  background-image: none !important;
}

/* 主按钮：描边 + 悬停反白，和宣传站的 .btn 同一套语法 */
button[class*="primary"], .btn-primary, .pb-cta, .cta {
  background: transparent !important;
  color: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 12px;
  font-weight: 500;
  transition: background .22s cubic-bezier(.22,.61,.36,1), color .22s cubic-bezier(.22,.61,.36,1);
}
button[class*="primary"]:hover, .btn-primary:hover, .pb-cta:hover, .cta:hover {
  background: var(--brand) !important;
  color: var(--bg) !important;
}

/* 面板与卡片：细线分隔，不用阴影堆叠 */
.card, .panel, .pblock, article, section[class*="card"], .box {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

/* 输入框 */
input, select, textarea {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(241,240,232,.45) !important;
  /* 边框变化是状态，outline 才是焦点指示器——两个都要，不能用前者顶替后者。 */
  outline: 2px solid var(--brand) !important;
  outline-offset: 1px;
}

/* 微标签用字距和大写，正文不用——全局大写会让长句难读 */
.pb-eyebrow, .stack-label, .eyebrow, .label, .tag {
  text-transform: uppercase !important;
  letter-spacing: .17em !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}

a { color: inherit; }
a:hover { color: var(--brand); }
::selection { background: var(--brand); color: var(--bg); }

/* 滚动条 */
* { scrollbar-color: rgba(241,240,232,.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(241,240,232,.18); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: .001ms !important; }
}

/* ── 主次:一个页面只允许一个「金色的东西」 ──────────────────
   原版把分段标签和提交按钮做成同一个渐变块，换成单色金之后两块
   实心金并排，视线不知道该落哪。标签是导航，不是操作。 */
.tabs button, .seg button, [role="tablist"] button {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
}
.tabs button.active, .seg button.active, [role="tablist"] button[aria-selected="true"] {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  /* 三个通道同时标记当前项：底色、文字亮度、下边一条金线。
     只靠颜色的状态，灰度截图里就消失了。 */
  border-bottom: 2px solid var(--brand) !important;
}

/* 提交按钮保持实心 —— 登录页的主操作应当好按，而不是好看。 */
button.submit, button[type="submit"] {
  background: var(--brand) !important;
  background-image: none !important;
  color: var(--bg) !important;
  border: 1px solid var(--brand) !important;
  font-weight: 500;
  letter-spacing: .11em;
}
button.submit:hover, button[type="submit"]:hover { filter: brightness(1.08); }

/* 语言/主题小切换：同样别用金色抢戏 */
.mini-btn.active { background: var(--panel-2) !important; color: var(--text) !important; }