/* ============================================================
 * 悠悠AI 视觉皮肤（skin.css）
 * ------------------------------------------------------------
 * 这一层只做「视觉」，不改任何布局属性（display / position / grid /
 * width / padding 一律不碰）。理由：现有 9 个页面的布局已经验证过
 * 在各种屏幕下不塌，改布局就等于重做适配。而配色、圆角、渐变、
 * 阴影这些是纯外观，改错了最多是难看，不会让功能坏掉。
 *
 * 与 tokens.css 的分工：
 *   tokens.css  → 定义「值」（--brand 是多少、--r-sm 是多少）
 *   skin.css    → 定义「怎么用」（按钮用渐变、卡片用大圆角 + 阴影）
 *
 * 加载顺序：页面 <style> → tokens.css → theme.css → skin.css
 * 必须放最后，才能盖住页面里写死的直角和旧 hover 色。
 *
 * 深浅色自动跟随：这里所有颜色都走 var(--x)，不写任何 hex，
 * 所以切主题时本文件不需要任何 @media 分支。
 * ============================================================ */

/* ---------- 1. 按钮：品牌渐变 + 圆角 + 微阴影 ----------
 * 设计稿里主按钮是蓝紫渐变，不是纯色块。渐变用 --brand-grad，
 * 它在浅色主题下会自动换成压暗一档的同色相渐变（tokens.css 里定义）。
 */
.btn-primary,
.btn-gradient {
    background: var(--brand-grad);
    border-color: transparent;
    /* 不能写死 #fff：暗色下渐变偏亮，白字对比度只有 3.64，
     * 不达小字 4.5 线。用 --brand-on，它按主题自适应。 */
    color: var(--brand-on);
    box-shadow: var(--shadow-brand);
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease),
                filter var(--t-fast) var(--ease);
}

.btn-primary:hover:not(:disabled),
.btn-gradient:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 10px 32px rgba(91, 124, 255, .38);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled),
.btn-gradient:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(.96);
}

/* 次级按钮：浮起面板 + 描边，悬停时提亮一档，不用纯色块抢主按钮的视觉 */
.btn-secondary {
    /* 不能写 transparent：console 有 35 个次级按钮，原本是
     * var(--bg-elevated) 的浮起面板。改成透明会让它们陷进背景，
     * 与主按钮的层次关系完全消失。 */
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* 幽灵按钮：透明底 + 淡描边，悬停只给底色 */
.btn-ghost {
    background: transparent;
    /* gate 的幽灵按钮原本带 1px 描边，写成 transparent 会让它们
     * 变成纯文字，与主按钮并列时边界消失。 */
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ---------- 2. 卡片：大圆角 + 描边 + 悬停微浮 ----------
 * 设计稿的卡片是「1px 描边 + 16px 圆角 + 极淡阴影」，
 * 靠描边而不是阴影分隔层次（暗色下阴影几乎不可见）。
 */
.card,
.panel,
.box,
.stat,
.feature,
.step,
.faq-item,
.plan,
.ticket,
.key-item {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--bg-panel);
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}

/* 只有「可点的卡片」才在悬停时浮起。表格容器、静态面板浮起会让人
 * 误以为能点，反而造成困扰。 */
.feature:hover,
.plan:hover,
.card-hover:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ---------- 3. 徽章：胶囊形 ----------
 * 旧版是直角（theme.css 风格层强制 border-radius:0），
 * 这里改回胶囊，与设计稿的圆角语言一致。
 */
.badge,
.tag,
.chip {
    border-radius: var(--r-full);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- 4. 表单控件：圆角 + 聚焦光晕 ---------- */
.input,
.select,
.textarea,
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: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-primary);
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.input:focus,
.select:focus,
.textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    /* 光晕用 --brand-soft（14% 透明度），比实线描边柔和，
     * 也不会在密集表单里把界面切碎 */
    box-shadow: 0 0 0 3px var(--brand-soft);
    background: var(--bg-elevated);
}

.input::placeholder,
.textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* ---------- 5. 表格：圆角容器 + 悬停行高亮 ---------- */
.table-wrap,
.table-scroll,
.price-wrap {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    /* 不能用 overflow:hidden：页面自己的 .table-wrap 是 overflow-x:auto，
     * 这里一旦写 hidden 就把横向滚动整个废掉，用户管理列表列多时无法滑动。
     * 圆角裁剪交给 border-radius + 内部表格自身背景即可。 */
    overflow-x: auto;
    overflow-y: visible;
}

thead th,
table.price th {
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border);
}

tbody tr {
    transition: background-color var(--t-fast) var(--ease);
}

tbody tr:hover,
table.price tbody tr:hover {
    background: var(--bg-hover);
}

/* ---------- 6. 顶栏/侧栏：玻璃感 + 细分割线 ---------- */
.nav,
.topbar,
header.nav {
    background: var(--bg-shell);
    border-bottom: 1px solid var(--border);
    /* backdrop-filter 只在支持时生效；不支持则退回纯色，
     * 不会出现「半透明糊在内容上」的问题 */
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}

.sidebar,
aside.sidebar {
    background: var(--bg-shell);
    border-right: 1px solid var(--border);
}

/* 侧栏选中项：左侧品牌色竖条 + 淡背景。
 * 用 ::before 画竖条而不是 border-left：border 会参与盒模型，
 * 折叠态（只有图标）时会让图标偏移 3px。 */
.nav-item,
.snav-item {
    border-radius: var(--r-sm);
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
    position: relative;
}

.nav-item:hover,
.snav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active,
.nav-item.on,
.snav-item.on {
    background: var(--brand-soft);
    color: var(--brand-fg);
}

.nav-item.active::before,
.nav-item.on::before,
.snav-item.on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: var(--r-full);
    background: var(--brand);
}

/* ---------- 7. 标签页：下划线改为胶囊底 ---------- */
.tab {
    border-radius: var(--r-sm);
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tab.on,
.tab.active {
    background: var(--brand-soft);
    color: var(--brand-fg);
    font-weight: 500;
}

/* ---------- 8. 标题：字重回到 700，取消旧版的 900 + 全大写 ----------
 * theme.css 旧风格层把 h1/h2/h3 推到 900 字重 + 负字距，
 * 那是「夸张极简」的语言。新设计是克制的 SaaS 风，用 700。
 */
h1, h2, h3,
.hero h1,
.head h1,
.section-head h2,
.cta h2,
.page-title h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero h1 {
    letter-spacing: -0.03em;
    line-height: 1.18;
}

/* hero 主标题的品牌色关键词：用渐变文字，这是设计稿最显眼的特征 */
.hero h1 .accent {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand);
}

/* ---------- 9. 链接：品牌色 + 悬停下划线 ---------- */
a {
    color: var(--brand-fg);
    transition: color var(--t-fast) var(--ease);
}

a:hover {
    color: var(--brand-hover);
}

/* 导航里的链接不该被染成品牌色（会整排发蓝），保持正文色 */
.nav a,
.nav-inner a,
.sidebar a,
.nav-menu a {
    color: inherit;
}

.nav a:hover,
.nav-inner a:hover,
.nav-menu a:hover {
    color: var(--brand-fg);
}

/* ---------- 10. 滚动条：细 + 圆头 ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    background-clip: content-box;
}

/* ---------- 11. 主题切换按钮：跟随新圆角语言 ----------
 * theme.css 里的按钮是圆形，这里改成圆角方块 + 品牌色悬停，
 * 与新设计一致。不改尺寸和定位（那属于布局）。
 */
.unai-theme-btn {
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    box-shadow: var(--shadow-md);
}

.unai-theme-btn:hover {
    color: var(--brand-fg);
    border-color: var(--brand);
    background: var(--bg-elevated);
}

/* ---------- 12. 代码块：恒深底 + 圆角 ----------
 * 代码块背景在页面里已经换成 --bg-code-solid（恒深），
 * 这里只补圆角和内部间距的视觉一致性。
 */
.hero-code,
.code-block,
.codebox,
.code-box {
    border-radius: var(--r-lg);
    overflow: hidden;
}

pre,
.codebox .cb-pane pre {
    border-radius: var(--r-md);
}

/* ---------- 13. 弹窗：大圆角 + 毛玻璃遮罩 ---------- */
.modal {
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    background: var(--bg-panel);
    box-shadow: var(--shadow-lg);
}

.modal-mask {
    background: var(--bg-mask);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---------- 14. 空状态与提示 ---------- */
.note,
.msg,
.announce {
    border-radius: var(--r-md);
}

/* ---------- 15. 图表容器圆角 ---------- */
.chart-box,
.chart-wrap,
canvas {
    border-radius: var(--r-md);
}

/* ---------- 16. 输入框内联图标按钮（清空/查看密码等） ---------- */
.input-icon,
.input-group {
    border-radius: var(--r-sm);
}

/* ============================================================
 * 移动端：只在窄屏收一下圆角
 * ------------------------------------------------------------
 * 16px 圆角在 320px 宽的屏幕上会显得「圆过头」，
 * 而且卡片间距小的时候相邻圆角会视觉粘连。降到 12px。
 * ============================================================ */
@media (max-width: 480px) {
    .card,
    .panel,
    .box,
    .stat,
    .feature,
    .plan,
    .table-wrap,
    .price-wrap,
    .hero-code,
    .code-block,
    .codebox {
        border-radius: var(--r-md);
    }

    .modal {
        border-radius: var(--r-lg);
    }
}

/* ============================================================
 * 17. 真实命名对齐（第二阶段补充）
 * ------------------------------------------------------------
 * 上面 1~16 节是照设计系统的命名写的（.plan / .feature / .chip），
 * 但现有页面实际用的是另一套名字（裸 .btn / .tablewrap /
 * .modal-head）。两套名字交集很小，所以上面那些规则在真实页面
 * 里大部分是空转的。这一节专门补真实命名，不改上面的。
 *
 * 仍然只动视觉属性，不碰布局。
 * ============================================================ */

/* 裸 .btn（没有 btn-* 修饰类）在 gate 和 wallet 里就是主操作按钮，
 * 它们原本是 background:var(--brand) 的实色块。这里给它同样的
 * 渐变 + 阴影，但必须排除带 btn-* 的，否则会把 btn-ghost /
 * btn-secondary 也染成主色，那些是次级按钮，染了就没主次了。 */
.btn:not([class*="btn-"]) {
    background: var(--brand-grad);
    border-color: transparent;
    color: var(--brand-on);
    box-shadow: var(--shadow-brand);
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease),
                filter var(--t-fast) var(--ease);
}
.btn:not([class*="btn-"]):hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 10px 32px rgba(91, 124, 255, .38);
    transform: translateY(-1px);
}
.btn:not([class*="btn-"]):active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(.96);
}

/* console 的表单标签：给必填星号留一点间距，
 * 不然「用户名*」的星号会贴在文字上。 */
.field .req {
    margin-left: 2px;
}

/* 表格容器滚动时不要把圆角内子项截断得很生硬 */
.tablewrap,
.table-wrap {
    border-radius: var(--r-lg);
}