/*
 * 学术研究工作台 · 统一主题
 * 首页与 web/ 下所有子项目共用。页面自己的样式只引用这里的 --t-* 变量，
 * 不再各自定义品牌色、字体、圆角和按钮外观。
 */

:root {
    /* 底色与表面 */
    --t-bg: #f5f6fa;
    --t-bg-glow-1: rgba(99, 140, 255, 0.14);
    --t-bg-glow-2: rgba(255, 150, 190, 0.10);
    --t-surface: #ffffff;
    --t-surface-2: #f8f9fc;          /* 表头、侧栏、次级块 */
    --t-surface-hover: #f3f5fb;

    /* 文字 */
    --t-text: #172033;
    --t-text-2: #3d4759;             /* 正文次级 */
    --t-muted: #7a8496;
    --t-faint: #a3abb9;

    /* 线条 */
    --t-border: #e4e7ef;
    --t-border-strong: #cfd5e2;

    /* 品牌色：与首页 logo 渐变一致 */
    --t-primary: #4f6ef7;
    --t-primary-hover: #3f5be0;
    --t-primary-active: #344dc4;
    --t-primary-soft: #eef1ff;
    --t-primary-soft-2: #dfe5ff;
    --t-primary-line: #c3cdfd;
    --t-gradient: linear-gradient(135deg, #4f7cff 0%, #8b5cf6 100%);
    --t-focus-ring: 0 0 0 3px rgba(79, 110, 247, 0.18);

    /* 语义色（状态） */
    --t-success: #16a34a;
    --t-success-soft: #e8f7ee;
    --t-warning: #d97706;
    --t-warning-soft: #fff4e2;
    --t-danger: #dc2626;
    --t-danger-soft: #fdecec;

    /* 形状与阴影 */
    --t-radius-sm: 8px;              /* 标签、小按钮 */
    --t-radius: 12px;                /* 按钮、输入框 */
    --t-radius-lg: 18px;             /* 卡片、面板 */
    --t-radius-pill: 999px;
    --t-shadow-sm: 0 1px 3px rgba(23, 32, 51, 0.05);
    --t-shadow: 0 8px 24px rgba(23, 32, 51, 0.07);
    --t-shadow-lg: 0 18px 40px rgba(23, 32, 51, 0.10);

    /* 字体 */
    --t-font: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --t-font-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;

    /* 控件尺寸 */
    --t-control-h: 38px;
    --t-control-h-sm: 30px;
}

/* ───── 基础 ───── */

body {
    font-family: var(--t-font);
    color: var(--t-text);
    background:
        radial-gradient(900px 500px at 10% -10%, var(--t-bg-glow-1), transparent 70%),
        radial-gradient(800px 500px at 100% 110%, var(--t-bg-glow-2), transparent 70%),
        var(--t-bg);
    background-attachment: fixed;
}

:where(a) {
    color: var(--t-primary);
}

:where(a:hover) {
    color: var(--t-primary-hover);
}

::selection {
    background: var(--t-primary-soft-2);
}

/* 未加类名的原生控件，给一个统一的默认外观（零特异性，页面样式可覆盖） */
:where(button, select, input:not([type=checkbox], [type=radio], [type=range]), textarea) {
    font-family: inherit;
}

:where(input:not([type=checkbox], [type=radio], [type=range]), select, textarea):focus {
    outline: none;
    border-color: var(--t-primary);
    box-shadow: var(--t-focus-ring);
}

:where(input[type=checkbox], input[type=radio], input[type=range]) {
    accent-color: var(--t-primary);
}

/* ───── 按钮 ───── */

.t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--t-control-h);
    padding: 0 14px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    color: var(--t-text-2);
    font: 600 13px/1 var(--t-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.t-btn:hover {
    border-color: var(--t-primary-line);
    color: var(--t-primary);
    background: var(--t-surface);
}

.t-btn:focus-visible {
    outline: none;
    box-shadow: var(--t-focus-ring);
}

.t-btn:disabled,
.t-btn[aria-disabled=true] {
    opacity: 0.5;
    cursor: not-allowed;
}

.t-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.t-btn-primary {
    border-color: transparent;
    background: var(--t-primary);
    color: #fff;
}

.t-btn-primary:hover {
    border-color: transparent;
    background: var(--t-primary-hover);
    color: #fff;
}

.t-btn-soft {
    border-color: transparent;
    background: var(--t-primary-soft);
    color: var(--t-primary);
}

.t-btn-soft:hover {
    border-color: transparent;
    background: var(--t-primary-soft-2);
}

.t-btn-sm {
    height: var(--t-control-h-sm);
    padding: 0 10px;
    border-radius: var(--t-radius-sm);
    font-size: 12px;
}

/* ───── 输入 ───── */

.t-input {
    height: var(--t-control-h);
    padding: 0 12px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    color: var(--t-text);
    font: 14px var(--t-font);
}

/* ───── 卡片 / 面板 ───── */

.t-card {
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    background: var(--t-surface);
    box-shadow: var(--t-shadow-sm);
}

/* ───── 标签 ───── */

.t-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--t-radius-pill);
    background: var(--t-primary-soft);
    color: var(--t-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* ───── 图标：线性图标放在淡色圆角方块里（同首页卡片） ───── */

.t-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--t-primary-soft);
    color: var(--t-primary);
}

.t-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ───── 返回首页的品牌标识 ───── */

.t-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--t-muted);
    font: 600 13px var(--t-font);
    text-decoration: none;
}

.t-brand:hover {
    color: var(--t-primary);
}

.t-brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--t-gradient);
    box-shadow: 0 4px 10px rgba(91, 110, 245, 0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.t-brand-mark svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linejoin: round;
}

/* ───── 彩色图标：用 --hue 换色（与首页卡片同一套色相） ───── */

.t-icon[style*="--hue"],
.t-icon.t-hue {
    background: hsl(var(--hue) 90% 95%);
    color: hsl(var(--hue) 62% 46%);
}

/* ───── 页头横幅：品牌渐变 + 光斑 + 点阵 ───── */

:root {
    --t-hero-bg:
        radial-gradient(520px 260px at 88% -30%, rgba(255, 255, 255, 0.10), transparent 65%),
        radial-gradient(480px 300px at 6% 130%, rgba(56, 189, 248, 0.22), transparent 65%),
        linear-gradient(120deg, #1e2a6e 0%, #2f2f86 55%, #4a2a84 100%);
}

/* 页面自己的页头类若设了 background，需写 background: var(--t-hero-bg) 覆盖 */
.t-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: var(--t-hero-bg);
}

.t-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.2px);
    background-size: 18px 18px;
    mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
    -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
}

.t-hero .t-brand {
    color: rgba(255, 255, 255, 0.82);
}

.t-hero .t-brand:hover {
    color: #fff;
}

.t-hero .t-brand-mark {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* 横幅上的白色按钮 */
.t-btn-on-hero {
    border-color: transparent;
    background: #fff;
    color: var(--t-primary);
    box-shadow: 0 8px 20px rgba(30, 20, 90, 0.22);
}

.t-btn-on-hero:hover {
    border-color: transparent;
    background: #fff;
    color: var(--t-primary-hover);
    transform: translateY(-1px);
}

/* 横幅上的毛玻璃统计卡 */
.t-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: var(--t-radius-lg);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.t-stat .t-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.t-stat strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
}

.t-stat span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
}

/* 区块标题：左侧渐变竖条 */
.t-section-title {
    position: relative;
    padding-left: 12px;
}

.t-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 4px;
    border-radius: 4px;
    background: var(--t-gradient);
}