/**
 * 羊皮纸手稿风 — CSS Lab 设计语言（教学门户方言）
 * 活标本：https://jou2327a.aisbest.eu.cc/parchment.css
 * 在 design-tokens 之后、本地 styles.css 之前引入；关键视觉用 !important 压过蓝/绿渐变、大圆角与 Inter。边缘：内边距、圆角≤6px、焦点环、窄屏按钮、浮动钮让路。
 */

:root {
    --bg: #F0E6CF !important;
    --card: #F7EFDA !important;
    --ink: #3A2E20 !important;
    --ink-secondary: #6E5B41 !important;
    --line: #D3C4A0 !important;
    --accent: #A2402F !important;
    --accent-hover: #7C2F22 !important;
    --accent-light: rgba(162, 64, 47, 0.08) !important;
    --font-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif !important;
    --font-serif: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", "Songti SC", "SimSun", serif !important;
    --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace !important;
    --radius-sm: 4px !important;
    --radius-md: 6px !important;
    --radius-pill: 4px !important;
    --shadow-card: 0 2px 14px rgba(107, 90, 68, 0.16) !important;
    --shadow-hover: 0 10px 26px rgba(107, 90, 68, 0.24) !important;
    --kai: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", "Songti SC", "SimSun", serif;
    --hei: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
    --latin: "EB Garamond", Georgia, "Times New Roman", serif;
    --cinnabar: #A2402F;
    --gold: #8C6A2F;
    --paper-hi: #F7EFDA;
    --paper-3: #EFE4C6;
    --ink-panel: #241B11;
}

:root[data-theme="dark"] {
    --bg: #241B11 !important;
    --card: #2F2618 !important;
    --ink: #F7EFDA !important;
    --ink-secondary: #E4D3B0 !important;
    --line: #5C4A32 !important;
    --accent: #E2A89A !important;
    --accent-hover: #F0C4B8 !important;
    --accent-light: rgba(226, 168, 154, 0.14) !important;
    --paper-hi: #2F2618 !important;
    --paper-3: #2A2216 !important;
    --cinnabar: #E2A89A !important;
    --gold: #E4C98A !important;
    /* 悬停底：亮纸上的深字，避免墨底配暗色字 */
    --ink-panel: #E7D7B4 !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #241B11 !important;
        --card: #2F2618 !important;
        --ink: #F7EFDA !important;
        --ink-secondary: #E4D3B0 !important;
        --line: #5C4A32 !important;
        --accent: #E2A89A !important;
        --accent-hover: #F0C4B8 !important;
        --accent-light: rgba(226, 168, 154, 0.14) !important;
        --paper-hi: #2F2618 !important;
        --paper-3: #2A2216 !important;
        --cinnabar: #E2A89A !important;
        --gold: #E4C98A !important;
        --ink-panel: #E7D7B4 !important;
    }
}

/* 页面留白：四边 + 底部给浮动按钮让路 */
html {
    overflow-x: clip;
}

body {
    background: var(--bg) !important;
    color: var(--ink) !important;
    font-family: var(--hei) !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    padding: 16px 16px 112px !important;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: clip;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 700px at 16% 6%, rgba(255, 250, 235, 0.55), transparent 60%),
        radial-gradient(900px 620px at 86% 92%, rgba(156, 137, 100, 0.14), transparent 62%),
        radial-gradient(6px 5px at 12% 22%, rgba(140, 106, 47, 0.1), transparent 70%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.45;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.29 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
}

main, .app, .wrap, .container {
    position: relative;
    z-index: 1;
    overflow: visible !important;
    max-width: 100%;
    box-sizing: border-box;
}

main, .app {
    padding-top: 48px;
    padding-bottom: 24px;
}

h1, h2, h3, .hero h1 {
    font-family: var(--kai) !important;
    font-weight: 700;
    letter-spacing: 0.06em !important;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.hero h1 .em,
h1 .em {
    color: var(--cinnabar) !important;
}

a {
    color: var(--cinnabar) !important;
    text-decoration: none;
}
a:not(.btn):not(.map-link):not(.open-btn):not(.chip):not(.pill):not(.gnav-item) {
    text-decoration-line: underline !important;
    text-decoration-style: dotted !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a:hover {
    color: var(--accent-hover) !important;
}
a::after {
    content: none !important;
}
@media print {
    a[href^="http"]::after {
        content: " (" attr(href) ")" !important;
        font-size: 0.85em;
        word-break: break-all;
    }
}

/* 扉页框 */
.hero {
    background: linear-gradient(160deg, var(--paper-hi), var(--paper-3)) !important;
    border: 1px solid rgba(162, 64, 47, 0.4) !important;
    outline: 1px solid rgba(199, 177, 137, 0.8);
    outline-offset: 5px;
    border-radius: 3px !important;
    box-shadow: var(--shadow-card) !important;
    padding: 28px 24px !important;
    margin-bottom: 22px !important;
    position: relative;
    overflow: visible !important;
}

.hero::before {
    content: none !important;
}

/* 卡片 — 只打真实卡片；overflow 可见以免裁切焦点环 / hover 上移 */
.card, .panel, .teach-card, .mission-card, .module-card, .stat-card, article.panel,
.drop-zone, .gps-map-card {
    background: var(--paper-3) !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    box-shadow: var(--shadow-card) !important;
    overflow: visible !important;
    padding: 16px 18px !important;
    box-sizing: border-box;
}

.card:hover, .panel:hover, .mission-card:hover, .module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--gold) !important;
}

.card::before, .panel::before {
    content: none !important;
}

.teach-card {
    border-left: 3px solid var(--cinnabar) !important;
}

.teach-card summary {
    color: var(--cinnabar) !important;
    font-family: var(--kai);
}

p, li, label, .hint, .empty-hint, td, th, summary {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 主按钮：填墨。排除页签 / 浮动控件 */
button:not(.tab):not(.gnav-fab):not(#darkToggleBtn):not([role="tab"]):not(.filter-btn):not(.example-btn):not(.btn-secondary):not(.ghost):not(.secondary):not(.modal-close):not(.diff-btn):not(.filter-chip),
.btn:not(.btn-secondary):not(.ghost),
[type="submit"],
.map-link {
    background: var(--ink) !important;
    background-image: none !important;
    color: var(--paper-hi) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 4px !important;
    box-shadow: var(--shadow-card) !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    min-height: 44px;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    animation: none !important;
}

button:not(.tab):not(.gnav-fab):not(#darkToggleBtn):not([role="tab"]):not(.filter-btn):not(.example-btn):not(.btn-secondary):not(.ghost):not(.secondary):not(.modal-close):not(.diff-btn):not(.filter-chip):hover,
.btn:not(.btn-secondary):not(.ghost):hover,
.map-link:hover {
    background: var(--ink-panel) !important;
    color: var(--paper-hi) !important;
    transform: translateY(-2px);
}

button.modal-close {
    background: var(--paper-hi) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
}
button.modal-close:hover {
    background: var(--cinnabar) !important;
    color: var(--paper-hi) !important;
    transform: none;
}
div:has(> button.diff-btn) {
    flex-wrap: wrap !important;
}
button.diff-btn {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px !important;
}

button.diff-btn[aria-pressed="true"],
button.diff-btn.active {
    background: var(--ink) !important;
    color: var(--paper-hi) !important;
    border-color: var(--ink) !important;
}


.btn-secondary, button.secondary, .ghost, .example-btn {
    background: transparent !important;
    background-image: none !important;
    color: var(--cinnabar) !important;
    border: 1px solid rgba(162, 64, 47, 0.55) !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    border-color: color-mix(in srgb, var(--cinnabar) 80%, transparent) !important;
    min-height: 44px;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    animation: none !important;
}

.btn-secondary:hover, button.secondary:hover, .ghost:hover, .example-btn:hover {
    background: rgba(162, 64, 47, 0.08) !important;
    color: var(--cinnabar) !important;
    border-color: var(--cinnabar) !important;
}

button::after, .btn::after {
    content: none !important;
}

/* 加载中的转圈在 ::after 上，不能被上面的 content:none 清掉 */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.btn-loading::after {
    content: "" !important;
    animation: spin 0.6s linear infinite !important;
}

/* 压掉本地 styles 的胶囊圆角 / 蓝绿渐变 */
button, .btn, [type="submit"], [type="button"], .map-link, .chip, .pill {
    border-radius: 4px !important;
}

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
textarea,
select {
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    background: var(--paper-hi) !important;
    color: var(--ink) !important;
    padding: 8px 12px !important;
    min-height: 44px;
    box-sizing: border-box;
    max-width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cinnabar);
}

input[type="range"] {
    accent-color: var(--cinnabar);
    padding: 0 !important;
    height: 28px;
    max-width: 100%;
}

summary {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* 使用说明：副标题跟在标题下面，不要被撑到卡片对侧 */
.flow-guide summary {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
}

.tab, [role="tab"] {
    flex: 0 0 auto;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--cinnabar) !important;
    box-shadow: 0 0 0 3px var(--accent-light) !important;
    outline: 2px solid var(--cinnabar) !important;
    outline-offset: 2px !important;
}

.badge, .tag {
    background: rgba(162, 64, 47, 0.07) !important;
    color: var(--cinnabar) !important;
    border: 1px solid rgba(162, 64, 47, 0.3);
    border-radius: 4px !important;
}

table {
    border-collapse: collapse;
    border: 1.5px solid var(--line);
    width: 100%;
    max-width: 100%;
}

th {
    font-family: var(--latin);
    letter-spacing: 0.08em;
    background: transparent !important;
    color: var(--ink-secondary) !important;
    font-weight: 600;
}

td, th {
    border-bottom: 1px solid var(--line);
    padding: 8px 10px !important;
}

tr:hover {
    background: rgba(44, 37, 23, 0.045);
}

pre, code {
    background: var(--paper-3) !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    font-family: var(--font-mono) !important;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

hr {
    border: none;
    height: 1px;
    background: var(--line);
}

img, video {
    border-radius: 4px;
    box-shadow: none;
    max-width: 100%;
}

.progress-fill, .mc-bar-fill {
    background: var(--cinnabar) !important;
    border-radius: 2px !important;
}

:focus-visible {
    outline: 2px solid var(--cinnabar) !important;
    outline-offset: 2px !important;
}

::selection {
    background: rgba(162, 64, 47, 0.18) !important;
    color: var(--ink) !important;
}

/* 浮动控件避开主内容 */
#darkToggleBtn,
button[aria-label*="暗色"],
button[aria-label*="导航"],
.gnav-fab,
[class*="dark-toggle"] {
    z-index: 40 !important;
    animation: none !important;
}

@keyframes inkIn {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}

.app, main {
    animation: inkIn 0.55s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .app, main, .card:hover, .panel:hover, .btn-loading::after {
        animation: none !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    body {
        padding: 12px 68px 120px 12px !important;
    }
    .hero {
        outline-offset: 3px;
        padding: 20px 16px !important;
    }
    .card, .panel, .teach-card, .drop-zone, .gps-map-card {
        padding: 14px 14px !important;
    }
    /* 窄屏按钮不要无故撑满整行；滑杆右边给浮动钮让路 */
    button:not(.tab):not(.gnav-fab):not(#darkToggleBtn):not([role="tab"]),
    .btn, [type="submit"], [type="button"] {
        width: auto !important;
        min-height: 44px;
        max-width: 100%;
    }
    input[type="range"] {
        width: calc(100% - 64px) !important;
    }
}

@media print {
    body { background: #fff !important; padding: 0 !important; }
    body::before, body::after { display: none !important; }
    .hero, .card, .panel {
        outline: none !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}