/* ==========================================================================
   AcademicHub 2.0 — Monochrome Luxury
   纯黑白 · 高级编辑感 · 衬线展示字体 · 微纹理与辉光
   ========================================================================== */

:root {
    --bg-base: #000000;
    --bg-surface: #0a0a0a;
    --bg-elevated: #111111;

    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-muted: #525252;

    --border-subtle: #232323;
    --border-strong: #3d3d3d;

    --accent: #ffffff;
    --accent-hover: #cccccc;

    --font-body: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);

    --tray-w: 350px;
    --report-w: min(46vw, 720px);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
}

/* —— 奢华底层：极弱辉光 + 细噪点 —— */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 60% 40% at 85% 110%, rgba(255, 255, 255, 0.025), transparent 65%);
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* —— 衬线展示字体：标题、Hero、Logo —— */
.font-display,
main h1, main h2,
article h3, article h3 a {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
}

main h1 {
    letter-spacing: 0.02em;
}

/* Logo */
.lux-logo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    transition: opacity 0.3s var(--ease-lux);
}
.lux-logo::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--accent);
    transform: rotate(45deg) translateY(-2px);
    display: inline-block;
}
.lux-logo:hover { opacity: 0.65; }

/* 顶部导航玻璃质感 */
.lux-header {
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 导航链接细线动画 */
.lux-nav-link {
    position: relative;
    padding-bottom: 2px;
}
.lux-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-lux);
}
.lux-nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* —— Hero 区 —— */
.lux-hero {
    position: relative;
    overflow: hidden;
}
.lux-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(255,255,255,0.05), transparent 60%);
    pointer-events: none;
}
.lux-hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #8a8a8a 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lux-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* 菱形装饰分隔线 */
.lux-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}
.lux-divider::before,
.lux-divider::after {
    content: '';
    height: 1px;
    width: 72px;
    background: linear-gradient(90deg, transparent, var(--border-strong));
}
.lux-divider::after {
    background: linear-gradient(90deg, var(--border-strong), transparent);
}
.lux-divider span {
    width: 5px;
    height: 5px;
    background: var(--text-secondary);
    transform: rotate(45deg);
    display: block;
}

/* Base utilities */
.mono-bg-base { background-color: var(--bg-base); }
.mono-bg-surface { background-color: var(--bg-surface); }
.mono-bg-elevated { background-color: var(--bg-elevated); }

.mono-text-primary { color: var(--text-primary); }
.mono-text-secondary { color: var(--text-secondary); }
.mono-text-muted { color: var(--text-muted); }

.mono-border { border-color: var(--border-subtle); }
.mono-border-strong { border-color: var(--border-strong); }

/* Minimalist Card — 细边框 + 悬停辉光 */
.mono-card {
    background-color: rgba(10, 10, 10, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    transition: border-color 0.4s var(--ease-lux), background-color 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), transform 0.4s var(--ease-lux);
}

.mono-card:hover {
    border-color: var(--border-strong);
    background-color: var(--bg-elevated);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 48px -24px rgba(0,0,0,0.9);
    transform: translateY(-1px);
}

/* 文章条目：左侧细线浮现 */
article {
    position: relative;
    transition: background-color 0.4s var(--ease-lux);
}
article::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.6), transparent);
    opacity: 0;
    transition: opacity 0.5s var(--ease-lux);
    pointer-events: none;
}
article:hover::before { opacity: 1; }

article h3 a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 96%;
    transition: background-size 0.5s var(--ease-lux);
}
article h3 a:hover { background-size: 100% 1px; }

/* Inputs */
.mono-input {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 0;
    transition: border-color 0.35s var(--ease-lux), box-shadow 0.35s var(--ease-lux);
}

.mono-input:focus {
    border-color: rgba(255, 255, 255, 0.7);
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 24px -8px rgba(255,255,255,0.15);
}

.mono-input::placeholder {
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Buttons */
.mono-btn-primary {
    background-color: var(--accent);
    color: var(--bg-base);
    border: 1px solid var(--accent);
    font-weight: 600;
    letter-spacing: 0.12em;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    transition: background-color 0.35s var(--ease-lux), color 0.35s var(--ease-lux), box-shadow 0.35s var(--ease-lux);
}

.mono-btn-primary:hover {
    background-color: transparent;
    color: var(--accent);
    box-shadow: 0 0 28px -6px rgba(255, 255, 255, 0.25);
}

.mono-btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    letter-spacing: 0.12em;
    border-radius: 0;
    transition: border-color 0.35s var(--ease-lux), box-shadow 0.35s var(--ease-lux), background-color 0.35s var(--ease-lux);
}

.mono-btn-secondary:hover {
    border-color: var(--accent);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 20px -8px rgba(255, 255, 255, 0.2);
}

/* Links */
.mono-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s var(--ease-lux);
}

.mono-link:hover {
    color: var(--accent);
}

/* —— 作者芯片：黑白细线徽章 —— */
.author-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-secondary, #a3a3a3);
    transition: border-color 0.3s var(--ease-lux), background 0.3s var(--ease-lux), color 0.3s var(--ease-lux);
}
.author-chip:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.author-chip a { color: inherit; text-decoration: none; }
.author-chip-scholar {
    font-size: 9px;
    color: var(--text-muted, #737373);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 0.3s var(--ease-lux), transform 0.3s var(--ease-lux), color 0.3s var(--ease-lux);
}
.author-chip:hover .author-chip-scholar {
    opacity: 1;
    transform: translateX(0);
}
.author-chip-scholar:hover { color: #fff; }

/* —— "换一批"按钮微旋转 —— */
.shuffle-icon { display: inline-block; transition: transform 0.5s var(--ease-lux); }
.shuffle-btn:hover .shuffle-icon { transform: rotate(180deg); }

/* ==========================================================================
   粒子背景画布 — 介于辉光底层与噪点之间，永不抢戏
   ========================================================================== */
#lux-particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   报告工作台 — 三栏丝滑平移布局
   浏览态：列表居中 → 选中≥1篇：清单滑入、版面左移 → 生成后：报告滑入、再左移
   ========================================================================== */
@media (min-width: 1024px) {
    /* 默认态显式写出与 mx-auto 等价的 margin（长度值才能丝滑过渡） */
    main.mx-auto {
        width: 100%;
        margin-left: max(0px, calc((100% - 1152px) / 2));
        margin-right: max(0px, calc((100% - 1152px) / 2));
        transition: width 0.7s var(--ease-lux), margin 0.7s var(--ease-lux);
    }

    /* 清单打开：版面整体左移，让出右侧 tray 区域 */
    body.tray-open main.mx-auto {
        width: calc(100% - var(--tray-w) - 24px);
        margin-left: max(0px, calc((100% - var(--tray-w) - 24px - 1152px) / 2));
        margin-right: calc(var(--tray-w) + 24px + max(0px, calc((100% - var(--tray-w) - 24px - 1152px) / 2)));
    }

    /* 报告打开：清单压缩并左移，报告占据最右，版面再次左移 */
    body.report-open main.mx-auto {
        width: calc(100% - 290px - var(--report-w) - 24px);
        margin-left: max(0px, calc((100% - 290px - var(--report-w) - 24px - 1152px) / 2));
        margin-right: calc(290px + var(--report-w) + 24px + max(0px, calc((100% - 290px - var(--report-w) - 24px - 1152px) / 2)));
    }

    body.report-open #report-tray {
        width: 290px;
        right: var(--report-w);
    }
}

/* —— 右侧悬浮清单（Tray）—— */
#report-tray {
    position: fixed;
    top: 68px;
    bottom: 0;
    right: 0;
    width: var(--tray-w);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: rgba(7, 7, 7, 0.88);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    backdrop-filter: blur(22px) saturate(1.1);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -32px 0 80px -40px rgba(0, 0, 0, 0.9);
    transform: translateX(105%);
    transition: transform 0.7s var(--ease-lux), width 0.7s var(--ease-lux), right 0.7s var(--ease-lux);
}
body.tray-open #report-tray { transform: translateX(0); }

.tray-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.tray-header-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}
.tray-header-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}
.tray-header-count b { color: #fff; font-weight: 600; }

#tray-clear {
    margin-left: auto;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s var(--ease-lux);
}
#tray-clear:hover { color: #fff; }

#tray-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.tray-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s var(--ease-lux), opacity 0.26s ease, transform 0.26s ease;
}
.tray-item:hover { background: rgba(255, 255, 255, 0.03); }
.tray-item-no {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    padding-top: 3px;
    flex-shrink: 0;
}
.tray-item-body { flex: 1; min-width: 0; }
.tray-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    transition: color 0.3s var(--ease-lux);
}
.tray-item-title:hover { color: #fff; }
.tray-item-meta {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tray-item-remove {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
    transition: color 0.3s var(--ease-lux), transform 0.3s var(--ease-lux);
}
.tray-item-remove:hover { color: #fff; transform: rotate(90deg); }

.tray-item-enter { animation: trayItemIn 0.5s var(--ease-lux); }
@keyframes trayItemIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.tray-item-leave { opacity: 0; transform: translateX(24px); }

#tray-empty {
    padding: 40px 24px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 2;
    color: var(--text-muted);
}

.tray-footer {
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 0, 0, 0.35);
}
.tray-busy #tray-list { opacity: 0.45; pointer-events: none; }

/* 生成按钮 loading 态：左侧旋转细环 */
#tray-generate { position: relative; }
#tray-generate:disabled { opacity: 0.4; cursor: not-allowed; }
#tray-generate.is-loading { color: transparent !important; }
#tray-generate.is-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: traySpin 0.7s linear infinite;
}
#tray-generate.is-loading:hover::after {
    border-color: rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
}
@keyframes traySpin { to { transform: rotate(360deg); } }

/* —— 报告展示面板 —— */
#report-panel {
    position: fixed;
    top: 68px;
    bottom: 0;
    right: 0;
    width: var(--report-w);
    z-index: 41;
    display: flex;
    flex-direction: column;
    background: rgba(5, 5, 5, 0.94);
    -webkit-backdrop-filter: blur(26px) saturate(1.1);
    backdrop-filter: blur(26px) saturate(1.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -40px 0 100px -40px rgba(0, 0, 0, 0.95);
    transform: translateX(108%);
    transition: transform 0.75s var(--ease-lux) 0.05s;
}
body.report-open #report-panel { transform: translateX(0); }

.report-panel-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 14px;
}
.report-panel-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin-right: auto;
}
.report-action {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 5px 10px;
    border: 1px solid transparent;
    transition: color 0.3s var(--ease-lux), border-color 0.3s var(--ease-lux);
}
.report-action:hover { color: #fff; border-color: var(--border-strong); }
.report-action:disabled { color: var(--text-muted); opacity: 0.6; cursor: default; }
#report-panel-close {
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    padding: 4px 8px;
    transition: color 0.3s var(--ease-lux), transform 0.3s var(--ease-lux);
}
#report-panel-close:hover { color: #fff; transform: rotate(90deg); }

#report-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 36px 48px;
}

/* —— 左侧卡片"加入报告"按钮 —— */
.add-to-tray {
    transition: color 0.3s var(--ease-lux);
}
.add-to-tray.is-added { color: #fff; }

/* —— 移动端：清单为底部抽屉，报告为全屏层 —— */
@media (max-width: 1023px) {
    #report-tray {
        top: auto;
        left: 0;
        width: 100%;
        max-height: 52vh;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        transform: translateY(105%);
    }
    body.tray-open #report-tray { transform: translateY(0); }
    #report-panel {
        top: 0;
        width: 100%;
        border-left: none;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* 文本选区 */
::selection {
    background: #ffffff;
    color: #000000;
}

/* Markdown and Math Content */
.markdown-body {
    color: var(--text-primary);
    font-size: 14.5px;
    line-height: 1.75;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.35em;
    margin-top: 1.6em;
    margin-bottom: 1em;
}
.markdown-body code {
    background-color: var(--bg-elevated);
    padding: 0.2em 0.45em;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.88em;
}
.markdown-body pre {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    padding: 1.1em 1.3em;
    overflow: auto;
    border-radius: 0;
}
.markdown-body pre code {
    border: none;
    background: transparent;
    padding: 0;
}
.markdown-body blockquote {
    border-left: 2px solid var(--border-strong);
    color: var(--text-secondary);
    padding-left: 1.1em;
    margin-left: 0;
    font-style: italic;
}
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
}
.markdown-body th, .markdown-body td {
    border: 1px solid var(--border-subtle);
    padding: 8px 14px;
}
.markdown-body th {
    background: var(--bg-elevated);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Comments Connector */
.comment-thread-line {
    border-left: 1px solid var(--border-subtle);
}

/* Toast */
.mono-toast {
    background-color: rgba(17, 17, 17, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255,255,255,0.05);
    border-radius: 0;
}

/* 模态层玻璃化 */
#ai-report-setup-modal > div,
#ai-report-result-modal > div {
    background: rgba(5, 5, 5, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.06);
}

/* 全局 Toast (header flash) */
#global-toast {
    background: rgba(13, 13, 13, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.85);
    animation: fadeInUp 0.5s var(--ease-lux) forwards;
    transition: opacity 0.3s ease;
}

/* 底部选择操作栏 */
#selection-bar {
    background: rgba(0, 0, 0, 0.82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 -20px 50px -20px rgba(0,0,0,0.9);
}

/* 表格行精修（dashboard / admin） */
tbody tr {
    transition: background-color 0.3s var(--ease-lux);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fadeInUp 0.7s var(--ease-lux) forwards;
    opacity: 0;
}

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

/* 页脚 */
.lux-footer {
    background:
        linear-gradient(180deg, transparent, rgba(255,255,255,0.02)),
        #000000;
}
.lux-footer-brand {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}