/* ============================================================
   ui.css — 统一组件覆盖层
   ------------------------------------------------------------
   定位：在各页面所有样式之后加载，把各页平行实现的控件
   （按钮 / 标签页 / 加载指示器）收敛到同一视觉基线。
   原则：
   1. 只动颜色、圆角、字体、焦点态、过渡，不改盒模型尺寸；
   2. 选择器用双类名提高优先级，避免被页面后加载样式覆盖；
   3. 全部取值来自 tokens.css 与 design-system.css 的令牌。
   ============================================================ */

/* ---------- 控件基线：字体与过渡 ---------- */
.sidebar-action-btn.sidebar-action-btn,
.search-button.search-button,
.chart-control.chart-control,
.sidebar-tab.sidebar-tab,
.buy-pattern-tab.buy-pattern-tab,
.market-overview-tab.market-overview-tab,
.trade-memo-kind-option.trade-memo-kind-option,
.history-more-link.history-more-link,
.admin-button.admin-button {
    font-family: var(--font-family-sans);
    transition: color var(--motion-fast),
        background-color var(--motion-fast),
        border-color var(--motion-fast),
        box-shadow var(--motion-base),
        opacity var(--motion-fast),
        transform var(--motion-fast);
}

/* ---------- 焦点态统一 ----------
   键盘可达性：全站控件同一焦点环（信息蓝），不再各写各的。 */
.sidebar-action-btn:focus-visible,
.search-button:focus-visible,
.chart-control:focus-visible,
.sidebar-tab:focus-visible,
.buy-pattern-tab:focus-visible,
.market-overview-tab:focus-visible,
.trade-memo-kind-option:focus-visible,
.history-more-link:focus-visible,
.admin-button:focus-visible,
.themes-days-selector:focus-visible,
.select:focus-visible {
    outline: 2px solid var(--info-500);
    outline-offset: 2px;
}

/* ---------- 加载指示器统一 ----------
   全站只保留一种 spinner：单环 + 主色顶弧。
   覆盖 style.css 的双环实现与 index-inline.css 的旧实现；
   尺寸仍允许上下文覆盖（如 reasons-rotation 的 40px）。 */
.loading-spinner.loading-spinner,
.loading-spinner.loading-spinner::before,
.loading-spinner.loading-spinner::after {
    content: none;
    animation: none;
}

.loading-spinner.loading-spinner {
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    position: relative;
    border: 3px solid var(--neutral-200);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* 遗留紫色双环（题材轮动加载层）改用主色单环 */
#reasons-rotation-loading .loading-spinner::before,
#reasons-rotation-loading .loading-spinner::after {
    content: none;
}

#reasons-rotation-loading .loading-spinner {
    border-color: var(--neutral-200);
    border-top-color: var(--primary-500);
}

/* ---------- 页脚统一 ----------
   所有页面同一基线：居中、弱化、上描边。 */
.site-footer.site-footer {
    margin-top: 32px;
    padding: 16px 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-light);
}

/* ---------- 卡片家族对齐 ----------
   管理后台卡片并入首页图表卡同族：同圆角、同阴影、同描边。
   只改外观，不动盒模型尺寸。 */
.admin-card.admin-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    border-color: rgba(0, 122, 255, 0.08);
}

/* ---------- 深色骨架面 ----------
   index-inline.css 的 [data-theme="dark"] 规则未覆盖的骨架层：
   页面底色、左侧工作台导航、品牌块、页眉玻璃底。取值与
   style.css 深色变量保持同一色阶（#0f172a / #1e293b）。 */
[data-theme="dark"] body {
    background: #0f172a;
}

[data-theme="dark"] .workspace-nav {
    background: rgba(15, 23, 42, 0.96);
    border-right-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-theme="dark"] .workspace-nav-brand {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .page-header {
    background: rgba(15, 23, 42, 0.75);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}