/* ============================================================
 * 全站主题层（theme.css）
 * ------------------------------------------------------------
 * 设计要点：
 * 1) 变量本体写在各个页面自己的 <style> 里，这里只负责「切换机制」
 *    和「控件样式」。原因：每个页面的变量集合不同（docs 有 --code-bg，
 *    控制台有 --warn），集中到一处反而要为每个页面写例外。
 * 2) 页面内的浅色变量用两条选择器表达：
 *      :root[data-theme="light"]            → 用户显式选了浅色
 *      @media(prefers-color-scheme:light)
 *        :root:not([data-theme="dark"])     → 跟随系统且系统是浅色
 *    这样 auto 模式不需要任何 JS 介入，系统切换主题时页面立即跟随。
 * 3) 颜色过渡只在切换瞬间需要，所以只对常用容器加 transition，
 *    不用通配选择器 —— 那会让表格滚动、列表刷新时整页重绘。
 * ============================================================ */

:root {
    --theme-transition: 180ms;
    --theme-btn-size: 40px;
}

body,
header,
nav,
main,
aside,
footer,
.card,
.stat,
.box,
.wrap,
table,
th,
td,
input,
select,
textarea,
button,
a,
code,
pre,
.tab,
.tag {
    transition: background-color var(--theme-transition) ease,
                border-color var(--theme-transition) ease,
                color var(--theme-transition) ease;
}

/* ---------- 悬浮切换按钮 ----------
 * 固定右下角而不是塞进 header：6 个页面的 header 结构各不相同
 * （docs 根本没有 header，login 是居中卡片），塞进 header 要为每个页面
 * 单独改布局。悬浮按钮一处定义，全站一致，也不会挡住主内容。
 * z-index 取 90：高于页面内容，低于模态/下拉（那些通常是 999+）。 */
.unai-theme-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    width: var(--theme-btn-size);
    height: var(--theme-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border, #262D38);
    background: var(--bg-elevated, #1C222B);
    color: var(--text-primary, #D6DCE5);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    font-family: system-ui, -apple-system, "Segoe UI Symbol", sans-serif;
    padding: 0;
    transition: transform 140ms ease, opacity 140ms ease,
                background-color var(--theme-transition) ease,
                border-color var(--theme-transition) ease,
                color var(--theme-transition) ease;
}

.unai-theme-btn:hover {
    transform: translateY(-2px);
    opacity: .95;
}

.unai-theme-btn:active {
    transform: translateY(0) scale(.96);
}

.unai-theme-btn:focus-visible {
    outline: 2px solid var(--brand, #FFFFFF);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    :root { --theme-btn-size: 36px; }
    .unai-theme-btn { right: 12px; bottom: 12px; }
}

/* 尊重系统的「减少动态效果」设置。
   前庭功能障碍用户对大面积颜色渐变会不适，这里直接关掉过渡。 */
@media (prefers-reduced-motion: reduce) {
    :root { --theme-transition: 0ms; }
    .unai-theme-btn { transition: none; }
    .unai-theme-btn:hover { transform: none; }
}

/* 打印时隐藏切换按钮：纸面上没有「深色模式」这个概念 */
@media print {
    .unai-theme-btn { display: none !important; }
}

/* ============================================================
 * 风格层：夸张极简（Exaggerated Minimalism）
 * ------------------------------------------------------------
 * 为什么不写回 9 个页面的 <style>：每页的 <style> 都是一份独立的设计令牌
 * 副本，改 9 处就等于维护 9 份副本。theme.css 在各页 <style> 之后加载，
 * 同优先级规则天然覆盖，正好用来放「跨页面一致的结构特征」。
 *
 * 只做三件事，不做装饰：
 *   1) 圆角全部归零（border-radius:0 是这套风格最容易被认出的特征）
 *   2) 所有边框统一 2px 实线，黑白承担全部秩序
 *   3) 标题用 900 字重 + 负字距，把字本身当视觉主角
 * 颜色一律不在这里写，全部走各页的 --brand / --bg-* 令牌，
 * 这样深浅两态都不用改这一层。
 * ============================================================ */

/* ---------- 1. 标题：900 字重 + 负字距 ----------
 * 原样式是 650/600 的「克制的现代感」，这里推到 900。
 * 只写 h1/h2/h3 与 .hero h1 等少量选择器，不动组件内部标题
 * （.card h3 之类已有自己的字号，加了会互相打架）。 */
/* 特异性说明（实测踩到过）：
 * 首页写的是 `.hero h1{font-weight:650}`、pricing/rankings/wallet 写的是
 * `.head h1{font-weight:600}`，特异性都是 0,1,1；而 `h1` 只有 0,0,1。
 * 只写 `h1{font-weight:900}` 的话，这三页的标题会保持 600/650，
 * 用 CDP 读 computedStyle 能直接看到（index 650 / pricing 600 / docs 900）。
 * 所以这里必须用 0,1,1 或更高的选择器把这两类写法都盖住。
 * 不用 !important：那会把字号、行高一起锁死，媒体查询里的
 * `.hero h1{font-size:27px}` 就再也调不动了。 */
h1, h2, h3,
.hero h1,
.head h1,
.section-head h2,
.cta h2,
.page-title h1 {
    font-weight: 900;
    letter-spacing: -0.04em;
}
.hero h1,
.head h1,
.section-head h2,
.cta h2 {
    letter-spacing: -0.05em;
    text-transform: none;
}

/* ---------- 2. 按钮：直角 + 2px 黑边 + 大写 ----------
 * 模板 47 的按钮是「边框就是颜色，没有阴影、没有渐变」。
 * 原样式的 border:1px solid transparent 在深色底上几乎看不见边界，
 * 这里统一改成实边框，让按钮自己站住。 */
.btn {
    border-radius: 0;
    border-width: 2px;
    border-style: solid;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.btn-primary {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--bg-base);
}
.btn-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #000;
}
.btn-secondary {
    background: transparent;
    border-color: var(--border-light);
    color: var(--text-primary);
}
.btn-secondary:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-base);
}
/* 按下位移：模板里的 .btn:active{transform:translate(2px,2px)}。
 * 位移而不是缩放，是因为位移不触发合成层，表格里密集按钮不卡。 */
.btn:active {
    transform: translate(2px, 2px);
}
.btn:disabled,
.btn[disabled] {
    opacity: 0.35;
    transform: none;
    cursor: not-allowed;
}

/* ---------- 3. 卡片/面板：2px 实边框 ----------
 * 原样式普遍是 1px var(--border)，在黑白高对比下太细，
 * 加上卡片本身没有阴影，会显得「飘」。统一加粗到 2px。 */
.card,
.panel,
.box,
.stat,
.modal,
.dropdown,
.table-wrap,
.feature,
.step,
.faq-item,
.ticket,
.key-item,
.announce,
.swatch,
.plan {
    border-width: 2px;
    border-style: solid;
    border-radius: 0;
}

/* ---------- 4. 表格：表头大写 + 分隔线加粗 ----------
 * 后台 17 个面板全是表格。模板 47 没表格，但它的语言很明确：
 * 用线分隔，不用底色分隔。所以只留上下边，去掉斑马纹的依赖。 */
thead th {
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom-width: 2px;
}
table {
    border-radius: 0;
}

/* ---------- 5. 输入框：只留下边线 ----------
 * 模板 47 的表单是「无框，只有一条底边」。
 * 这是整套风格里最显眼的一处，也最好用：
 * 输入区不会因为 2px 全边框在密集表单里显得拥挤。 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input:not([type]),
select,
textarea {
    border-radius: 0;
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color: var(--border-light);
    background: transparent;
}
input:hover, select:hover, textarea:hover {
    border-bottom-color: var(--brand-hover);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-bottom-color: var(--brand-hover);
}
/* 下拉需要保留完整边框，否则看不出是个可点的控件 */
select {
    border-width: 0 0 2px 0;
}

/* ---------- 6. 强调色只用在一个地方：焦点与当前项 ----------
 * 模板 47 反复强调「整站只允许一种彩色，且只落在最关键处」。
 * 这里把强调色收束到 :focus-visible 与 .on/.active，
 * 其余地方（链接、图标、徽章）一律用黑白。 */
:focus-visible {
    outline: 3px solid var(--brand-hover);
    outline-offset: 3px;
}
.tab.on,
.tab.active,
.nav-links a.on,
.key-item.on {
    color: var(--brand-hover);
}

/* ---------- 7. 徽章：直角 + 大写 ---------- */
.badge,
.tag,
.chip {
    border-radius: 0;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- 8. 悬浮主题按钮也跟随直角语言 ----------
 * 原本是圆形（border-radius:50%）。这是全站唯一一个圆东西，
 * 留着会跟「零圆角」打架，改成方块。 */
.unai-theme-btn {
    border-radius: 0;
    border-width: 2px;
    font-weight: 900;
}