/* ============================================================
   基础层：变量 / 重置 / 通用控件
   本页是整屏应用（左侧栏 + 右侧视口），所以 body 不设内边距、不滚动；
   滚动交给具体的卡片与 iframe。
   ============================================================ */

:root {
    --primary-color: #2563eb;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-sub: #475569;
    --border-color: #e2e8f0;
    --radius: 12px;
    --shadow: 0 2px 4px rgba(0, 0, 0, .02);

    --modal-bg: rgba(255, 255, 255, .55);
    --modal-border: rgba(255, 255, 255, .72);
    --modal-mask: rgba(15, 23, 42, .22);
    --modal-shadow: 0 24px 64px rgba(15, 23, 42, .22);
    --modal-sub-bg: rgba(100, 116, 139, .10);

    --toast-bg: rgba(30, 41, 59, .42);
    --toast-border: rgba(255, 255, 255, .16);

    --ok-color: #10b981;
    --warn-color: #f59e0b;
    --bad-color: #ef4444;

    --accent: #f59e0b;

    /* 侧栏宽度：比原稿收窄一档，右侧内容区更宽敞 */
    --rail-w: 196px;
    --rail-pad: 14px 12px;
    --rail-item-h: 40px;
}

html[data-theme="dark"] {
    --primary-color: #3b82f6;
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --text-main: #f1f5f9;
    --text-sub: #94a3b8;
    --border-color: #334155;
    --shadow: 0 4px 8px rgba(0, 0, 0, .15);

    --modal-bg: rgba(30, 41, 59, .62);
    --modal-border: rgba(255, 255, 255, .1);
    --modal-mask: rgba(2, 6, 23, .42);
    --modal-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    --modal-sub-bg: rgba(148, 163, 184, .16);

    --toast-bg: rgba(15, 23, 42, .55);
    --toast-border: rgba(255, 255, 255, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text-main);
    font-size: .9rem;
    line-height: 1.5;
    overflow: hidden;
}

/* 片段占位不占布局空间（里面是 <aside> / <main> 这类主结构） */
[data-partial] { display: contents; }

/* ---------- 滚动条 ---------- */
.rail-nav, .ann-list, .doc-body, .modal-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .4) transparent;
}
.rail-nav::-webkit-scrollbar, .ann-list::-webkit-scrollbar,
.doc-body::-webkit-scrollbar { width: 6px; height: 6px; }
.rail-nav::-webkit-scrollbar-thumb, .ann-list::-webkit-scrollbar-thumb,
.doc-body::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .4); border-radius: 20px; }
.rail-nav::-webkit-scrollbar-track, .ann-list::-webkit-scrollbar-track,
.doc-body::-webkit-scrollbar-track { background: transparent; }

/* ---------- 通用按钮 ---------- */
.mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    min-width: 30px;
    padding: 0 9px;
    border-radius: 9px;
    border: 1px solid var(--glass-line, var(--border-color));
    background: var(--glass-bg-soft, var(--bg-color));
    color: var(--text-sub);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s, background .2s, color .2s, border-color .2s;
}
.mini-btn:active { transform: scale(.94); }
.mini-btn:hover { color: var(--primary-color); }

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 11px;
    border: 1px solid var(--glass-border, var(--border-color));
    background: var(--glass-bg-soft, var(--bg-color));
    color: var(--text-sub);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s, background .2s, color .2s;
}
.theme-btn:hover { background: var(--glass-bg-hover, var(--bg-color)); color: var(--primary-color); }
.theme-btn:active { transform: scale(.96); }

/* ---------- 加载 ---------- */
.spinner {
    width: 26px; height: 26px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- toast ---------- */
#customToast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%) translateY(22px) scale(.95);
    max-width: 84vw;
    padding: 11px 20px;
    border-radius: 15px;
    background: var(--toast-bg);
    backdrop-filter: blur(34px) saturate(220%);
    -webkit-backdrop-filter: blur(34px) saturate(220%);
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--toast-border);
    box-shadow: 0 20px 56px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .14);
    z-index: 100002;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .26s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility .26s;
}
#customToast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); }

/* ---------- 弹窗 ---------- */
.modal-mask {
    position: fixed; inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--modal-mask);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.modal-mask.show { opacity: 1; visibility: visible; }

.modal-box {
    width: 100%;
    max-width: 620px;
    max-height: 84vh;
    overflow-y: auto;
    padding: 18px;
    border-radius: 18px;
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    backdrop-filter: blur(30px) saturate(190%);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    box-shadow: var(--modal-shadow), inset 0 1px 0 rgba(255, 255, 255, .32);
    transform: scale(.95) translateY(10px);
    transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
.modal-mask.show .modal-box { transform: scale(1) translateY(0); }

.doc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.doc-head h3 { flex: 1; font-size: 1rem; font-weight: 800; }
.doc-lead { font-size: .82rem; color: var(--text-sub); margin-bottom: 12px; }
.doc-body h4 { font-size: .78rem; font-weight: 800; margin: 14px 0 6px; color: var(--text-main); }
.doc-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.doc-list li { font-size: .78rem; color: var(--text-sub); padding-left: 12px; position: relative; }
.doc-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--primary-color); }
.doc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--modal-sub-bg);
    border: 1px solid var(--glass-line, var(--border-color));
    color: var(--text-main);
    word-break: break-all;
}
.doc-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--modal-sub-bg);
}
.doc-note {
    margin-top: 14px;
    font-size: .74rem;
    color: var(--text-sub);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--glass-line, var(--border-color));
}

/* ---------- 不支持毛玻璃时退回不透明 ---------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .rail, .card, .modal-box, .mini-btn, .theme-btn { background: var(--card-bg); }
}