/* ========== 基础重置 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 确保 hidden 属性始终生效，避免被 class 的 display 覆盖 */
[hidden] {
    display: none !important;
}

/* ========== CSS 变量定义 ========== */
:root {
    --bg: #faf9f7;
    --surface: #ffffff;
    --text: #1f2328;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e8e6e1;
    --accent: #c2410c;
    --accent-dark: #9a3412;
    --accent-soft: #fff1e6;
    --card-bg: #fff7ed;
    --card-border: #fed7aa;
    --nav-bg: #fdf6ee;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --serif: Georgia, 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.05);
    --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.06), 0 1px 4px rgba(17, 24, 39, 0.04);
    --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.10), 0 2px 8px rgba(17, 24, 39, 0.06);
    --ring: 0 0 0 3px var(--accent-soft);
    --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --header-width: 760px;
}

/* ========== 页面基础样式 ========== */
body {
    font-family: var(--sans);
    background: var(--bg);
    min-height: 100vh;
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ========== 全局细节 ========== */
html {
    scroll-behavior: smooth;
}

::selection {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 自定义滚动条 */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: #d8d4cd;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #c4bfb7;
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== 站点头部 ========== */
.site-header {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    flex-direction: column;
}

.brand .site-title {
    font-family: var(--sans);
    font-size: 1.7rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.brand .site-title:hover {
    color: var(--accent);
}

.nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all var(--transition);
}

.nav a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.nav a.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    border-radius: 999px;
    font-weight: 600;
}

.nav-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    order: 99;
    margin-left: 4px;
}

.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border);
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s, color 0.15s;
}

.nav-avatar:hover,
.nav-avatar[aria-expanded="true"] {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--text-secondary);
}

.nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nav-avatar svg {
    width: 58%;
    height: 58%;
    fill: currentColor;
    display: block;
}

.nav-avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 152px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-avatar-menu a,
.nav-avatar-menu .nav-avatar-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    transition: background 0.15s, color 0.15s;
}

.nav-avatar-menu .nav-avatar-menu-item {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.nav-avatar-menu a:hover,
.nav-avatar-menu .nav-avatar-menu-item:hover {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.nav .nav-create-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition);
}

.nav .nav-create-toggle:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.nav .nav-create-toggle.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.nav-dropdown {
    position: relative;
}

/* 「创作」下拉菜单向左对齐按钮（头像/个性化菜单默认右对齐） */
.nav-create .nav-dropdown-menu {
    left: 0;
    right: auto;
}

.nav-dropdown-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.15s;
}

.nav-dropdown.open .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 140px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 300;
}

.nav-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    transition: background var(--transition), color var(--transition);
}

.nav-dropdown-item:hover {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.bg-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.9rem;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.bg-toast.error {
    background: var(--danger);
}

/* ========== 主题更换弹窗 ========== */
.theme-modal {
    max-width: 360px;
}

.theme-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.theme-preset {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.theme-preset:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.theme-preset.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.theme-swatch {
    display: flex;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.theme-swatch span {
    flex: 1;
}

.theme-name {
    font-size: 0.85rem;
    color: var(--text);
    text-align: center;
}

/* ========== 容器 ========== */
.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 24px 64px;
}

/* ========== 首页布局：顶部双层筛选条 + 文章列表 ========== */
.container-home {
    max-width: 1060px;
}

.home-main {
    min-width: 0;
}

/* ========== 顶部双层筛选条（第一层专栏 / 第二层主题） ========== */
.filter-bar {
    margin: -8px 0 24px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.filter-row[hidden] {
    display: none;
}

.filter-row + .filter-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.filter-row[hidden] + .filter-row {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.filter-label {
    flex-shrink: 0;
    width: 40px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-family: var(--sans);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: color var(--transition), border-color var(--transition),
                background var(--transition);
}

.filter-tab:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.filter-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* 第二层主题：视觉层级更轻，弱化边框 */
.filter-row-theme .filter-tab {
    padding: 4px 12px;
    font-size: 0.82rem;
    background: transparent;
    border-color: transparent;
}

.filter-row-theme .filter-tab.active {
    background: var(--accent);
    border-color: var(--accent);
}

.filter-tab-add {
    border-style: dashed;
}

.filter-tab-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.filter-tab:hover .filter-tab-del {
    opacity: 1;
}

.filter-tab-del:hover {
    color: #fff;
    background: var(--danger);
}

@media (max-width: 640px) {
    .filter-label {
        width: auto;
        margin-right: 2px;
    }
    .filter-tab {
        padding: 5px 12px;
        font-size: 0.82rem;
    }
}

/* ========== 首页标题 ========== */
.page-title {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--accent);
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 28px;
}

/* 添加专栏行 */
.topic-add {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 24px;
}

.topic-add[hidden] {
    display: none;
}

.topic-add input {
    flex: 1;
    max-width: 260px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
}

.topic-add input:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.topic-add .btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 20px;
}

/* ========== 文章列表 ========== */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-card {
    position: relative;
    padding: 26px 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    animation: cardIn 0.35s ease-out backwards;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 悬停时左侧出现强调色竖条，营造克制而有层次的交互反馈 */
.post-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity var(--transition), transform var(--transition);
}

.post-card:hover {
    border-color: var(--card-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.post-card:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

.post-card .post-title {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    color: var(--text);
    transition: color var(--transition);
}

.post-card .post-title a {
    transition: color var(--transition);
}

.post-card:hover .post-title a,
.post-card .post-title a:hover {
    color: var(--accent);
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.post-meta .sep {
    color: var(--border);
}

.post-topic {
    display: inline-block;
    padding: 1px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 10px;
}

.post-theme {
    display: inline-block;
    padding: 1px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: #475569;
    background: #f1f5f9;
    border-radius: 10px;
}

.post-draft {
    display: inline-block;
    padding: 1px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: #b7791f;
    background: #fef3c7;
    border-radius: 10px;
}

.post-hidden {
    display: inline-block;
    padding: 1px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: 10px;
}

.hidden-section-title {
    margin-top: 40px;
    margin-bottom: 4px;
    font-size: 1.2rem;
    font-weight: 700;
}

.post-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}

.post-stat svg {
    display: block;
    flex-shrink: 0;
}

.post-stat-like svg {
    color: #e0566b;
}

.post-stat-comment svg {
    color: var(--accent);
}

.post-excerpt {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 12px;
    word-break: break-word;
}

.read-more {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    transition: color var(--transition), transform var(--transition);
}

.read-more:hover {
    color: var(--accent-dark);
    transform: translateX(3px);
}

/* 鼠标跟随的悬停提示框：显示标题与简介 */
.post-card-tooltip {
    position: fixed;
    z-index: 300;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.post-card-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

.post-card-tooltip-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--accent);
    margin-bottom: 6px;
}

.post-card-tooltip-summary {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    word-break: break-word;
}

/* ========== 文章详情页 ========== */
.post-full {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 36px;
    box-shadow: var(--shadow);
}

.post-full .post-title {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
    color: var(--text);
}

.post-full .post-meta {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}

.post-content {
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.9;
    color: #2b2f36;
    word-break: break-word;
}

.post-hidden-banner {
    margin-bottom: 20px;
    padding: 10px 14px;
    border: 1px solid var(--danger-soft);
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.9rem;
}

.post-actions {
    display: flex;
    gap: 10px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ========== 空状态 / 加载 ========== */
.empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.empty-state svg {
    margin-bottom: 16px;
    opacity: 0.5;
    color: var(--accent);
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 60px;
    color: var(--text-muted);
}

.loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== 表单（编辑器） ========== */
.editor-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 30px;
    box-shadow: var(--shadow);
}

.editor-card h1 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.editor-meta {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.editor-meta-left,
.editor-meta-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.editor-meta-right .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.editor-meta-right textarea {
    flex: 1;
    resize: vertical;
}

.editor-meta-row {
    display: flex;
    gap: 16px;
}

.editor-meta-half {
    flex: 1;
    min-width: 0;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 7px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group textarea {
    resize: vertical;
    min-height: 260px;
    font-family: var(--serif);
    line-height: 1.8;
}

#summary {
    min-height: 76px;
    font-family: var(--sans);
    line-height: 1.7;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 20px;
    padding: 12px 16px;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 20;
}

.editor-footer .form-actions {
    margin-top: 0;
}

.editor-stats {
    font-size: 0.85rem;
    font-family: var(--sans);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ========== 按钮 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition);
    font-family: inherit;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-secondary);
    border-color: var(--border);
}

.btn-secondary:hover {
    color: var(--text);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger-soft);
}

.btn-danger:hover {
    background: var(--danger-soft);
}

.btn:active {
    transform: scale(0.98);
}

/* ========== Toast 通知 ========== */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 13px 20px;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: var(--shadow-md);
    animation: toastIn 0.25s ease-out;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes toastIn {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.toast.success {
    background: #16a34a;
}

.toast.error {
    background: var(--danger);
}

/* ========== 插入图片弹窗 ========== */
.image-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    padding: 20px;
}

.image-modal-overlay[hidden] {
    display: none;
}

.image-modal {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
}

.image-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.image-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--sans);
}

.image-modal-close {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}

.image-modal-close:hover {
    color: var(--text);
}

.image-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-block {
    width: 100%;
}

.image-modal-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.image-modal-divider::before,
.image-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.image-url-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.92rem;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.image-url-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: #fff;
}

/* ========== Markdown 编辑器（左右分栏） ========== */
.container-editor {
    max-width: none;
    padding: 20px 20px 48px;
}

.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #f6f5f2;
}

.md-btn {
    padding: 5px 11px;
    font-size: 0.85rem;
    font-family: var(--sans);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.md-btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.md-btn:active {
    background: var(--accent-soft);
}

.md-btn-bold {
    font-weight: 700;
}

.md-btn-italic {
    font-style: italic;
    font-family: var(--serif);
}

.md-btn-strike {
    text-decoration: line-through;
}

.md-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
}

.md-btn-icon svg {
    display: block;
}

.md-dropdown {
    position: relative;
    display: inline-block;
}

.md-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
    transition: transform 0.15s;
}

.md-dropdown.open .md-caret {
    transform: rotate(180deg);
}

.md-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 130px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 300;
}

.md-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.12s;
}

.md-dropdown-item:hover {
    background: var(--accent-soft);
}

.md-dropdown-menu-wide {
    min-width: 220px;
    max-width: 340px;
}

.md-dropdown-empty {
    padding: 10px 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* 下拉菜单内的分组分隔线（如代码块语言列表末尾的 Mermaid） */
.md-dropdown-sep {
    display: block;
    height: 1px;
    margin: 5px 8px;
    background: var(--border);
}

.md-divider {
    width: 1px;
    background: var(--border);
    margin: 2px 4px;
    align-self: stretch;
}

.markdown-editor {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    height: 82vh;
    min-height: 520px;
}

.markdown-editor-pane {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.markdown-editor-input {
    flex: 0 0 50%;
}

.markdown-editor-toc {
    flex: 0 0 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #faf9f7;
    border-right: 1px solid var(--border);
}

.toc-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
}

.toc-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.12s, background 0.12s;
}

.toc-item:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.toc-empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 0.82rem;
    font-family: var(--sans);
    color: var(--text-muted);
}

.markdown-editor-resizer {
    flex: 0 0 6px;
    cursor: col-resize;
    background: var(--border);
    transition: background 0.15s;
}

.markdown-editor-resizer:hover,
.markdown-editor-resizer.dragging {
    background: var(--accent);
}

.pane-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: #f6f5f2;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.code-editor {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.code-editor-highlight,
.markdown-editor-input textarea {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    font-family: 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.92rem;
    line-height: 1.7;
    padding: 16px 18px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 4;
}

.code-editor-highlight {
    overflow: hidden;
    pointer-events: none;
    color: #24292f;
    background: #fff;
}

.code-editor-highlight code {
    display: block;
    font: inherit;
    padding: 0;
    margin: 0;
    white-space: pre-wrap;
    background: transparent;
    color: inherit;
}

.markdown-editor-input textarea {
    overflow: auto;
    resize: none;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: #24292f;
    z-index: 2;
    /* 隐藏滚动条：避免滚动条占位导致 textarea 与叠加层的可视区域不一致 */
    scrollbar-width: none;
}

.markdown-editor-input textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.markdown-editor-input textarea::placeholder {
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
    opacity: 1;
}

.markdown-editor-input textarea::selection {
    background: rgba(59, 130, 246, 0.22);
}

.markdown-editor-input textarea:focus {
    box-shadow: none;
    background: transparent;
}

/* 编辑器浅色语法高亮主题（叠加层专用） */
.code-editor-highlight .hljs { color: #24292f; background: transparent; }
.code-editor-highlight .hljs-doctag,
.code-editor-highlight .hljs-keyword,
.code-editor-highlight .hljs-formula { color: #d73a49; }
.code-editor-highlight .hljs-comment,
.code-editor-highlight .hljs-quote { color: #6a737d; font-style: italic; }
.code-editor-highlight .hljs-name,
.code-editor-highlight .hljs-section,
.code-editor-highlight .hljs-selector-tag,
.code-editor-highlight .hljs-deletion,
.code-editor-highlight .hljs-subst { color: #d73a49; }
.code-editor-highlight .hljs-literal,
.code-editor-highlight .hljs-number { color: #005cc5; }
.code-editor-highlight .hljs-string,
.code-editor-highlight .hljs-regexp,
.code-editor-highlight .hljs-addition,
.code-editor-highlight .hljs-attribute,
.code-editor-highlight .hljs-meta .hljs-string { color: #032f62; }
.code-editor-highlight .hljs-attr,
.code-editor-highlight .hljs-variable,
.code-editor-highlight .hljs-template-variable,
.code-editor-highlight .hljs-type,
.code-editor-highlight .hljs-selector-class,
.code-editor-highlight .hljs-selector-attr,
.code-editor-highlight .hljs-selector-pseudo { color: #e36209; }
.code-editor-highlight .hljs-symbol,
.code-editor-highlight .hljs-bullet,
.code-editor-highlight .hljs-link,
.code-editor-highlight .hljs-meta,
.code-editor-highlight .hljs-selector-id,
.code-editor-highlight .hljs-title { color: #005cc5; }
.code-editor-highlight .hljs-built_in,
.code-editor-highlight .hljs-class .hljs-title,
.code-editor-highlight .hljs-title.class_ { color: #e36209; }
.code-editor-highlight .hljs-emphasis { font-style: italic; }
.code-editor-highlight .hljs-strong { font-weight: 700; }
.code-editor-highlight .hljs-code-block { background: rgba(27, 31, 35, 0.04); }

.markdown-editor-preview {
    flex: 1 1 0;
    background: #fff;
}

.markdown-editor-preview .markdown-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px;
}

.empty-preview {
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: 0.9rem;
}

/* ========== Markdown 渲染排版 ========== */
.markdown-body {
    font-family: var(--sans);
    font-size: 1.02rem;
    line-height: 1.85;
    color: #2b2f36;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-family: var(--sans);
    font-weight: 700;
    line-height: 1.35;
    margin: 1.6em 0 0.7em;
    color: var(--text);
}

.markdown-body h1 {
    font-size: 1.7rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4em;
}

.markdown-body h2 {
    font-size: 1.45rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35em;
}

.markdown-body h3 { font-size: 1.25rem; }
.markdown-body h4 { font-size: 1.1rem; }
.markdown-body h5 { font-size: 1rem; }
.markdown-body h6 { font-size: 0.9rem; color: var(--text-secondary); }

/* 文章详情页锚点跳转时避开吸顶头部（编辑器预览无需此间距） */
body.post-page .markdown-body h1,
body.post-page .markdown-body h2,
body.post-page .markdown-body h3,
body.post-page .markdown-body h4,
body.post-page .markdown-body h5,
body.post-page .markdown-body h6 {
    scroll-margin-top: 88px;
}

.markdown-body p { margin: 0.8em 0; }

.markdown-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    transition: color var(--transition), text-decoration-color var(--transition);
}

.markdown-body a:hover {
    color: var(--accent-dark);
    text-decoration-color: var(--accent-dark);
}

.markdown-body ul,
.markdown-body ol {
    margin: 0.8em 0;
    padding-left: 1.6em;
}

.markdown-body li { margin: 0.35em 0; }
.markdown-body li > ul,
.markdown-body li > ol { margin: 0.2em 0; }

.markdown-body blockquote {
    margin: 1em 0;
    padding: 0.4em 1.2em;
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
    color: var(--text-secondary);
    border-radius: 0 6px 6px 0;
}

.markdown-body blockquote p { margin: 0.4em 0; }

.markdown-body code {
    font-family: 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.88em;
    background: #f3f4f6;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    color: #c2410c;
}

.markdown-body pre {
    background: #1f2328;
    color: #e5e7eb;
    padding: 16px 18px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
    line-height: 1.6;
}

.markdown-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 0.88em;
}

/* 语法高亮：去掉 highlight 主题自带的背景与内边距，保持代码块整体深色风格 */
.markdown-body pre code.hljs {
    background: transparent;
    padding: 0;
    color: #e5e7eb;
    overflow-x: visible;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1em 0;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2em 0;
}

.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    font-size: 0.92rem;
    font-family: var(--sans);
    display: block;
    overflow-x: auto;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}

.markdown-body th { background: #f6f5f2; font-weight: 600; }
.markdown-body tr:nth-child(even) td { background: #faf9f7; }

.markdown-body input[type="checkbox"] { margin-right: 0.4em; }

/* ========== 响应式适配 ========== */
@media (max-width: 800px) {
    .markdown-editor {
        flex-direction: column;
        height: auto;
    }
    .markdown-editor-input {
        flex: none;
        border-bottom: 1px solid var(--border);
    }
    .markdown-editor-toc {
        display: none;
    }
    .markdown-editor-preview {
        flex: none;
    }
    .markdown-editor-resizer {
        display: none;
    }
    .code-editor {
        height: 320px;
    }
    .markdown-editor-preview .markdown-body {
        min-height: 200px;
    }
}

@media (max-width: 640px) {
    .header-inner {
        padding: 16px 16px;
    }
    /* 窄屏：灵动岛胶囊允许换行并收紧间距，避免导航溢出。
       选择器需覆盖靠后的 .site-header-pill .* 规则，故用 .site-header 提升优先级 */
    .site-header.site-header-pill .header-inner {
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .site-header.site-header-pill .nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 2px;
    }
    .site-header.site-header-pill .nav a,
    .site-header.site-header-pill .nav .nav-create-toggle {
        padding: 5px 9px;
        font-size: 0.85rem;
    }
    .profile-card {
        padding: 24px 20px;
    }
    .profile-avatar-picker {
        width: 76px;
        height: 76px;
    }
    .brand .site-title {
        font-size: 1.35rem;
    }
    .container {
        padding: 24px 16px 48px;
    }
    .post-full {
        padding: 28px 20px;
    }
    .post-full .post-title {
        font-size: 1.5rem;
    }
    .editor-card {
        padding: 24px 20px;
    }
    .editor-meta {
        flex-direction: column;
        gap: 18px;
    }
    .editor-meta-left,
    .editor-meta-right {
        flex: none;
    }
    .editor-meta-right .form-group {
        flex: none;
        display: block;
        margin-bottom: 18px;
    }
    .editor-meta-right textarea {
        flex: none;
    }
    .editor-meta-row {
        flex-direction: column;
        gap: 0;
    }
    .editor-meta-half {
        flex: none;
    }
}

/* ========== 登录页 ========== */
.container-login {
    max-width: 440px;
    padding-top: 64px;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 32px;
    box-shadow: var(--shadow);
}

.login-card + .login-card {
    margin-top: 24px;
}

.login-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

.login-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 28px;
}

.login-error {
    color: var(--danger);
    font-size: 0.88rem;
    margin-top: 14px;
    text-align: center;
}

/* ========== 管理员管理页（双栏：左表单 / 右列表） ========== */
.container-admin {
    max-width: 940px;
    padding-top: 56px;
}

.admin-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 20px;
    align-items: start;
}

.admin-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: var(--shadow);
}

.admin-title {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.admin-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition);
}

.admin-toggle:hover {
    color: var(--text);
}

.admin-toggle-caret {
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--transition);
}

.admin-toggle[aria-expanded="true"] .admin-toggle-caret {
    transform: rotate(180deg);
}

.admin-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
}

/* 双栏下面板内列表默认折叠，展开时与按钮留出间距 */
.admin-panel .admin-list {
    margin-top: 14px;
    border-top: none;
    padding-top: 0;
}

.admin-list[hidden] {
    display: none;
}

@media (max-width: 820px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }
    .container-admin {
        padding-top: 40px;
    }
}

.admin-loading,
.admin-empty {
    font-size: 0.88rem;
    color: var(--text-muted);
    padding: 18px 0;
    text-align: center;
}

/* 输入框内嵌固定后缀 */
.input-affix {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input-affix:focus-within {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.input-affix input {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.input-affix input:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.input-affix-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--surface);
    border-left: 1px solid var(--border);
    white-space: nowrap;
    user-select: none;
}

.admin-list {
    margin-top: 28px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--bg);
}

.admin-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-item-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface);
}

.admin-item-avatar-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
}

.admin-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-item-nickname {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 600;
    word-break: break-all;
}

.admin-item-email {
    font-size: 0.82rem;
    color: var(--text-secondary);
    word-break: break-all;
}

.admin-item-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    margin-left: 8px;
    white-space: nowrap;
}

.admin-item-del {
    padding: 5px 12px;
    font-size: 0.82rem;
    border-radius: 6px;
    border: 1px solid var(--danger-soft);
    background: var(--surface);
    color: var(--danger);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.admin-item-del:hover {
    background: var(--danger-soft);
}

/* ========== 个人资料页 ========== */
/* 顶部头像：悬停/聚焦时浮出「更改头像」 */
.profile-avatar-block {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.profile-avatar-picker {
    position: relative;
    width: 88px;
    height: 88px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.profile-avatar-picker:hover,
.profile-avatar-picker:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.profile-avatar-picker.is-uploading {
    cursor: progress;
}

.profile-avatar-lg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.profile-avatar-placeholder[hidden] {
    display: none;
}

.profile-avatar-placeholder svg {
    width: 52%;
    height: 52%;
    fill: currentColor;
    display: block;
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 17, 17, 0.45);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    opacity: 0;
    transition: opacity var(--transition);
}

.profile-avatar-picker:hover .profile-avatar-overlay,
.profile-avatar-picker:focus .profile-avatar-overlay,
.profile-avatar-picker.is-uploading .profile-avatar-overlay {
    opacity: 1;
}

/* ========== 个人资料页（单卡片 + 分区） ========== */
.profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
}

.profile-heading {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.profile-section + .profile-section {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.profile-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-error {
    color: var(--danger);
    font-size: 0.88rem;
    margin-top: 12px;
}

.form-group input:disabled {
    background: var(--surface);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* 修改密码弹窗（复用站内弹窗样式） */
.password-modal {
    max-width: 380px;
}

.password-modal .image-modal-body {
    gap: 0;
}

.password-modal .form-group:last-of-type {
    margin-bottom: 0;
}

.password-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* 编辑器只读作者字段的视觉提示 */
input[readonly] {
    cursor: default;
    background: var(--surface);
}

/* ========== 文章互动（点赞 / 打赏） ========== */
.post-engagement {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.like-btn.liked {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* ========== 评论区 ========== */
.comments {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.comments-title {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.comment-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}

.comment-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}

.comment-nickname {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.comment-time {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.comment-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.comments-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 20px 0;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.comment-form textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.7;
}

.comment-form .btn {
    align-self: flex-end;
}

/* ========== 评论回复 / 管理 ========== */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comment-replies {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 28px;
    padding-left: 16px;
    border-left: 2px solid var(--border);
}

.comment-actions {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.comment-reply-btn,
.comment-action {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s;
    font-family: inherit;
}

.comment-reply-btn:hover {
    color: var(--accent);
}

.comment-action:hover {
    color: var(--text);
}

.comment-action-danger:hover {
    color: var(--danger);
}

.comment-hidden {
    opacity: 0.6;
}

.comment-hidden-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
    color: #b7791f;
    background: #fef3c7;
    border-radius: 8px;
    vertical-align: middle;
}

.comment-reply-form {
    margin-top: 12px;
}

.comment-reply-form-inner {
    padding: 12px;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.comment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ========== 底部浮动互动栏 ========== */
.floating-actions {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    z-index: 90;
}

.floating-actions[hidden] {
    display: none;
}

.fab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.fab-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.fab-btn:active {
    transform: scale(0.97);
}

.fab-btn svg {
    flex-shrink: 0;
}

.fab-like-icon {
    color: #e0566b;
}

.fab-comment-icon {
    color: var(--accent);
}

.fab-donate-icon {
    color: #d97706;
}

.fab-btn.liked {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.fab-btn.liked .fab-like-icon {
    color: var(--accent);
}

.fab-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

/* ========== 右侧评论抽屉 ========== */
.comment-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: flex-end;
    z-index: 1500;
}

.comment-drawer-overlay[hidden] {
    display: none;
}

.comment-drawer {
    width: 420px;
    max-width: 92vw;
    height: 100%;
    background: var(--surface);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    padding: 20px 20px 16px;
    animation: drawerIn 0.22s ease-out;
}

@keyframes drawerIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.comment-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.comment-drawer-header .comments-title {
    margin-bottom: 0;
}

.comment-drawer .comments-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 16px;
}

/* 文章页底部为浮动栏预留空间 */
.post-page .container {
    padding-bottom: 128px;
}

/* ========== 打赏弹窗 ========== */
.donate-modal {
    max-width: 360px;
}

.donate-body {
    align-items: center;
    text-align: center;
}

.donate-tip {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.donate-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.donate-tab {
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

.donate-tab.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.donate-qr-pane {
    display: flex;
    justify-content: center;
}

.donate-qr-pane[hidden] {
    display: none;
}

.donate-qr {
    width: 220px;
    height: 220px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.donate-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.donate-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 24px 8px;
}

/* ========== 灵动岛式悬浮头部（全站） ========== */
.site-header-pill {
    top: 16px;
    width: calc(100% - 32px);
    max-width: var(--header-width);
    margin: 16px auto 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 18px;
    box-shadow: none;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        border-radius 0.4s ease;
}

.site-header-pill .header-inner {
    max-width: none;
    margin: 0;
    padding: 6px 8px 6px 20px;
    gap: 12px;
}

.site-header-pill .site-title {
    font-size: 1.2rem;
}

.site-header-pill .nav {
    gap: 4px;
}

.site-header-pill.scrolled {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08), 0 2px 8px rgba(17, 24, 39, 0.05);
}

/* 首页双栏布局较宽，导航胶囊随内容宽度对齐 */
.dash-page {
    --header-width: 1060px;
}

.site-header-pill .pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: none;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.7;
    transition: all 0.15s;
}

.site-footer {
    text-align: center;
    padding: 24px 16px 32px;
    font-size: 13px;
    color: var(--text-muted);
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--text-secondary);
}

/* ===== Mermaid 图表（```mermaid 代码块渲染后的容器） ===== */
.mermaid-block {
    margin: 18px 0;
    padding: 16px 12px;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    text-align: center;
    line-height: 1;
}

.mermaid-block svg {
    max-width: 100%;
    height: auto;
}

/* 语法错误时：保留源码，避免内容丢失 */
.mermaid-block-error {
    text-align: left;
    border-color: var(--danger);
}

.mermaid-error-tip {
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--danger);
}

.mermaid-source {
    margin: 0;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Mermaid 连接箭头的高亮（highlight.js 无此语言，编辑器内自定义着色） */
.hljs-operator {
    color: var(--accent-dark);
}

/* ========== 文章详情页：左侧目录 + 加宽正文 ========== */
.post-page {
    --header-width: 1180px;   /* 导航胶囊跟随正文宽度对齐 */
}

.container-post {
    max-width: 1180px;
}

/* 无目录时正文居中单列；有目录时 JS 给 .post-layout 加 has-toc 变双列 */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 860px);
    justify-content: center;
    align-items: start;
}

.post-layout.has-toc {
    grid-template-columns: 236px minmax(0, 860px);
    gap: 32px;
}

.post-main {
    min-width: 0;
}

.post-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 18px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.post-toc[hidden] {
    display: none;
}

.post-toc-title {
    padding: 0 8px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.post-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-toc-link {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    border-left: 2px solid transparent;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--transition), color var(--transition);
}

.post-toc-link:hover {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.post-toc-link.active {
    background: var(--accent-soft);
    border-left-color: var(--accent);
    color: var(--accent-dark);
    font-weight: 600;
}

.post-toc-level-2 {
    padding-left: 22px;
}

.post-toc-level-3 {
    padding-left: 34px;
    font-size: 0.84rem;
}

/* 正文适度放大 */
.post-page .post-full {
    padding: 48px 44px;
}

.post-page .post-full .post-title {
    font-size: 2.2rem;
}

.post-page .post-content {
    font-size: 1.12rem;
}

/* 窄屏：收起目录，正文回到单列并收紧内边距 */
@media (max-width: 1080px) {
    .post-layout,
    .post-layout.has-toc {
        grid-template-columns: minmax(0, 860px);
        gap: 0;
    }

    .post-toc {
        display: none;
    }
}

@media (max-width: 640px) {
    .post-page .post-full {
        padding: 28px 20px;
    }

    .post-page .post-full .post-title {
        font-size: 1.6rem;
    }

    .post-page .post-content {
        font-size: 1.02rem;
    }
}

/* ========== 每日一题 ========== */

body.daily-page {
    --header-width: 1420px;
}

.container-daily {
    max-width: 1420px;
}

/* 出题 / 改题页（/daily/question）：单列表单，收窄更利于阅读 */
body.daily-question-page {
    --header-width: 900px;
}

.container-question {
    max-width: 900px;
}

/* 三栏：左=历史题目，中=今日题目+题库，右=我的打卡/题库分布/题目管理。
   用 grid-template-areas 驱动回流：窄屏只要改 areas 即可重排，无需动 DOM。 */
.daily-layout {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr) 300px;
    grid-template-areas: "history main side";
    gap: 28px;
    align-items: start;
    margin-top: 28px;
}

/* 左栏容器：装两张卡片（历史题目 + 仅站长可见的题目管理），共用同一个吸顶滚动容器。
   与文章页 .post-toc 同一套「吸顶」做法，保持全站一致。 */
.daily-rail {
    grid-area: history;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.daily-rail-history,
.daily-rail-admin {
    padding: 18px 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.daily-rail-title {
    font-family: var(--serif);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 12px;
}

.daily-main {
    grid-area: main;
    min-width: 0;
}

.daily-aside {
    grid-area: side;
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.daily-side-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 18px 20px;
}

.daily-side-title {
    font-family: var(--serif);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 12px;
}

/* 我的打卡：大数字 + 今日状态 + 近 7 天格子 */
.streak-figure {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.streak-num {
    font-family: var(--serif);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.streak-unit {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.streak-status {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 4px 0 12px;
}

.streak-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.streak-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.streak-dot {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    transition: background var(--transition), border-color var(--transition);
}

.streak-day.on .streak-dot {
    background: var(--accent);
    border-color: var(--accent);
}

/* 今天：无论答没答都给一个描边焦点，方便定位 */
.streak-day.today .streak-dot {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.streak-day.today.on .streak-dot {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.streak-day-label {
    font-size: 0.64rem;
    line-height: 1;
    color: var(--text-muted);
}

.streak-day.today .streak-day-label {
    color: var(--accent-dark);
    font-weight: 600;
}

/* 题库分布：一行一个分类（名称 + 题量 + 占比条），点击即筛选题库 */
.cat-dist {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cat-dist-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 8px;
    width: 100%;
    padding: 6px 8px;
    margin: 0 -8px;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}

.cat-dist-row:hover {
    background: var(--accent-soft);
}

.cat-dist-name {
    font-size: 0.82rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-dist-count {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cat-dist-bar {
    grid-column: 1 / -1;
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.cat-dist-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.cat-dist-row.active {
    background: var(--accent-soft);
}

.cat-dist-row.active .cat-dist-name {
    color: var(--accent-dark);
    font-weight: 600;
}

.cat-dist-row.active .cat-dist-count {
    color: var(--accent-dark);
}

.cat-dist-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 题目卡片（今日题目 / 随机一题共用） */
.daily-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 24px 26px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
}

.daily-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.daily-badge {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent-dark);
    background: var(--accent-soft);
    border: 1px solid var(--card-border);
    padding: 3px 10px;
    border-radius: 999px;
}

.daily-date,
.daily-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.daily-meta {
    margin-left: auto;
    color: var(--accent-dark);
}

.daily-question {
    font-family: var(--serif);
    font-size: 1.18rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 10px;
    white-space: pre-wrap;
}

.daily-tags {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.daily-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.daily-streak {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--accent-dark);
}

/* 答案区：默认收起，点「查看答案」才展开 */
.daily-answer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--card-border);
}

.daily-answer[hidden] {
    display: none;
}

.daily-answer-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.daily-empty-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* 分区标题 */
.daily-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 36px 0 14px;
}

.daily-section-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.daily-section-note {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 题库列表 */
.daily-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.daily-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.daily-item:hover {
    border-color: var(--card-border);
    box-shadow: var(--shadow-md);
}

.daily-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.daily-item-cat {
    font-size: 0.72rem;
    color: var(--accent-dark);
    background: var(--accent-soft);
    border-radius: 4px;
    padding: 2px 8px;
}

.daily-item-diff {
    font-size: 0.72rem;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 7px;
}

.daily-item-draft {
    font-size: 0.72rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 1px 7px;
}

.daily-item-id {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.daily-item-question {
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0 0 10px;
    white-space: pre-wrap;
}

/* 题干本身即详情页入口（<a> 而非 <p>）：去掉下划线，hover 用强调色提示可点。
   操作区现在只有站长见得到，所以访客看到的就是「题干可点、整条没有按钮」。 */
.daily-item-link {
    display: block;
    text-decoration: none;
    color: var(--text);
    transition: color var(--transition);
}

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

/* 操作区是「有才出现」的（访客没有按钮），题干下边距只在后面还跟着东西时才留 */
.daily-item-question:last-child {
    margin-bottom: 0;
}

.daily-item-actions {
    display: flex;
    gap: 14px;
}

.daily-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.82rem;
    color: var(--accent);
    cursor: pointer;
    transition: color var(--transition);
}

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

.daily-link-danger {
    color: var(--text-muted);
}

.daily-link-danger:hover {
    color: var(--danger);
}

.daily-more {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

/* 历史题目：在左侧栏出现，按窄栏排版（日期一行、题干一行、分类做小标签） */
.daily-history {
    display: block;
}

.daily-history-row {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

/* 历史题目整行可点进详情页（/daily/q/<id>）；题面本身是纯文本，所以链接挂在整行上 */
a.daily-history-row {
    text-decoration: none;
    color: inherit;
}

a.daily-history-row .daily-history-q {
    transition: color var(--transition);
}

a.daily-history-row:hover .daily-history-q {
    color: var(--accent);
}

.daily-history-row:first-child {
    padding-top: 0;
}

.daily-history-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.daily-history-date {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.daily-history-q {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.daily-history-cat {
    display: inline-block;
    margin-top: 7px;
    font-size: 0.72rem;
    color: var(--accent-dark);
    background: var(--accent-soft);
    border-radius: 4px;
    padding: 1px 7px;
}

/* 两栏回落：历史题目移到主栏下方，改为格子排布；侧栏跨两行继续吸顶 */
@media (max-width: 1280px) {
    .daily-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas:
            "main side"
            "history side";
    }

    .daily-rail {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .daily-history {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 0 22px;
    }
}

/* 单栏：主栏 → 侧栏 → 历史题目（历史最长，放最后不挡主内容） */
@media (max-width: 880px) {
    .daily-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "side"
            "history";
        gap: 20px;
    }

    .daily-aside {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ===== 出题 / 改题页（/daily/question） ===== */

.question-editor-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* 表单里「标签 + 行内按钮」的对齐：label 靠左、操作靠右 */
.question-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.question-preview {
    margin-top: 12px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px dashed var(--card-border);
    border-radius: var(--radius);
    max-height: 460px;
    overflow-y: auto;
}

.question-preview[hidden] {
    display: none;
}

.question-form-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
}

.question-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.question-form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 首页「每日一题」卡片 */
.home-daily {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.home-daily[hidden] {
    display: none;
}

.home-daily-question {
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 14px;
    white-space: pre-wrap;
}

.home-daily-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .daily-card {
        padding: 20px 18px;
    }

    .daily-question {
        font-size: 1.05rem;
    }

    .daily-meta {
        margin-left: 0;
    }

    .question-form-row {
        grid-template-columns: 1fr;
    }

    .daily-side-card {
        padding: 14px 14px 16px;
    }
}

/* ===== 题目详情页（/daily/q/<id>） ===== */

body.daily-q-page {
    --header-width: 1180px;
}

.container-q {
    max-width: 1180px;
}

/* 双列：主栏读题 + 右栏同分类相关题。与文章页 .post-layout.has-toc 同一套语言；
   没有相关题时 JS 撤掉 .has-related ⇒ 回到居中单列，主栏始终是 860px 的舒适阅读宽度。 */
.qdetail-layout {
    display: grid;
    grid-template-columns: minmax(0, 860px);
    justify-content: center;
    align-items: start;
}

.qdetail-layout.has-related {
    grid-template-columns: minmax(0, 860px) 280px;
    gap: 32px;
}

.qdetail-main {
    min-width: 0;
}

.qdetail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.qdetail-card {
    margin-bottom: 26px;
}

/* 右栏相关题：沿用文章页 .post-toc / 每日一题右栏同一套「吸顶卡片」做法 */
.qdetail-aside {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 18px 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.qdetail-aside[hidden] {
    display: none;
}

/* 题干即页面的 h1：详情页的主体就是这道题本身，不再另设页面标题 */
.qdetail-question {
    font-family: var(--serif);
    font-size: 1.42rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text);
    margin: 0 0 10px;
    white-space: pre-wrap;
    text-wrap: pretty;
}

/* 题干与答案之间的分隔：用虚线而非实线，和卡片内部的 .daily-answer 分隔同一套语言 */
.qdetail-rule {
    margin: 20px 0 18px;
    border-top: 1px dashed var(--card-border);
}

/* .daily-item-id 全局是 margin-left:auto（列表里用来把编号推到行尾）。
   详情页头部已经有 .daily-meta 承担推挤，id 再 auto 会把剩余空隙切成两半、看着发散。 */
.qdetail-card .daily-item-id {
    margin-left: 10px;
}

.qdetail-related-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 相关题：整行可点，hover 用强调色底 + 文字加深，靠左溢出 12px 让高亮块比文字更宽一点。
   280px 窄栏里题干与难度改上下排 —— 并排会把题干挤成窄条。 */
.qdetail-related-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition);
}

.qdetail-related-item:hover {
    background: var(--accent-soft);
}

.qdetail-related-q {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    transition: color var(--transition);
}

.qdetail-related-item:hover .qdetail-related-q {
    color: var(--accent-dark);
}

.qdetail-related-diff {
    flex: none;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* 窄屏：相关题落回主栏下方（整宽卡片），不退化成隐藏 —— 它是页面上唯一的「继续读」入口。
   断点与文章页目录一致（1080px），全站同一套。 */
@media (max-width: 1080px) {
    .qdetail-layout,
    .qdetail-layout.has-related {
        grid-template-columns: minmax(0, 860px);
        gap: 0;
    }

    .qdetail-aside {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* 详情页的小屏收尾：字号降一档，避免题干与答案的层级被压平 */
@media (max-width: 640px) {
    .qdetail-question {
        font-size: 1.2rem;
    }

    .qdetail-related-item {
        margin: 0 -6px;
        padding: 10px 6px;
    }
}

/* ========== 练习闯关（/practice） ========== */
body.practice-page {
    --header-width: 1180px;
}

.container-practice {
    max-width: 1180px;
}

/* 两栏：左=章节列表（吸顶），右=题目 + 编辑器 + 反馈 */
.practice-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 28px;
}

.practice-side {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 18px 14px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.practice-side-title {
    margin-bottom: 12px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* 学期分组头：整组折叠开关（▾ 展开 / ▸ 折叠）。
   原为 <div>，改 <button> 后必须显式 font-family: inherit，否则会退回浏览器默认按钮字体 */
.practice-semester {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 10px 0 4px;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.practice-semester:hover {
    background: var(--bg);
    color: var(--text-secondary);
}

.practice-semester:first-child {
    margin-top: 0;
}

.practice-semester-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.practice-semester-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* 折叠箭头（学期头与章节行共用；已折叠时旋转 90° 指向右） */
.practice-caret {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    color: currentColor;
    transition: transform 0.15s ease;
}

.practice-semester.is-collapsed .practice-caret {
    transform: rotate(-90deg);
}

/* 章节行：折叠箭头 + 章节按钮（箭头与选中解耦 ⇒ 可单独折叠而不改当前题） */
.practice-chapter-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 12px;   /* 相对学期缩进一级，体现层级 */
}

.practice-chapter-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.practice-chapter-toggle:hover {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

/* 无题目的章节：箭头占位但不可点 */
.practice-chapter-toggle.is-leaf {
    visibility: hidden;
    cursor: default;
}

.practice-chapter-row .practice-chapter {
    flex: 1;
    min-width: 0;
}

/* 章节标题：与题目列表同一套视觉语言——占满剩余宽度、最多两行（224px 栏内可完整显示
   「移动语义与完美转发」这类 9 字标题，之前单行会被截成「移动语义与完…」） */
.practice-chapter-title {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.practice-chapter {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.practice-chapter:hover {
    background: var(--accent-soft);
}

.practice-chapter.active {
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 600;
}

.practice-chapter-num {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.practice-chapter.active .practice-chapter-num {
    color: var(--accent);
}

.practice-chapter.is-empty {
    opacity: 0.55;
}

.practice-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.practice-card {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.practice-question-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.practice-question-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.practice-question-prompt {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text);
}

.practice-question-prompt code {
    padding: 1px 6px;
    background: var(--accent-soft);
    border-radius: 5px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    color: var(--accent-dark);
}

.practice-question-prompt ol {
    margin: 8px 0 8px 22px;
}

.practice-empty-hint {
    color: var(--text-muted);
    font-size: 14px;
}

/* 难度档位切换 */
.practice-tier-bar {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.practice-tier {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}

.practice-tier:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.practice-tier.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* 编辑器（编辑器卡表头已删除：文件条 + 状态栏已有 C++20 信息，不再重复；
   旧纯 textarea 类 .practice-editor 亦无元素引用，暂留） */
.practice-editor {
    width: 100%;
    min-height: 340px;
    padding: 16px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    resize: vertical;
    tab-size: 4;
    white-space: pre;
}

.practice-editor:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

/* 判定结果 */
.practice-result-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
}

.practice-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 13px;
    color: #fff;
}

.practice-result-pass {
    color: #16a34a;
}

.practice-result-pass .practice-result-icon {
    background: #16a34a;
}

.practice-result-fail {
    color: var(--danger);
}

.practice-result-fail .practice-result-icon {
    background: var(--danger);
}

.practice-result-note {
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.practice-result-msg {
    margin-top: 10px;
    font-size: 14px;
    color: var(--danger);
}

.practice-result-output {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--code-bg, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow-y: auto;
    color: var(--text);
}

.practice-result-failed {
    margin: 12px 0 0 20px;
    font-size: 14px;
    color: var(--danger);
}

.practice-result-failed li {
    margin: 4px 0;
}

/* 题目列表（点章节后、点题目前的中间态） */
.practice-exercise-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.practice-exercise-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.practice-exercise-item:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.practice-exercise-title {
    flex: 1;
    min-width: 0;
}

/* 题干走 markdown 渲染（markdown-body 提供正文排版） */
.practice-question-prompt.markdown-body {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
}

/* 客观题：选择题选项 */
.practice-choice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.practice-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: var(--transition);
}

.practice-choice:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.practice-choice input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--accent);
}

.practice-choice-label {
    font-weight: 600;
    color: var(--accent);
    min-width: 20px;
}

.practice-choice-text {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
}

/* 客观题：填空题代码骨架 + 内嵌输入框 */
.practice-blank-code {
    margin: 16px 0 0;
    padding: 16px;
    background: var(--code-bg, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 14px;
    line-height: 2;
}

.practice-blank-code code {
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
    color: var(--text);
    white-space: pre;
}

/* 填空题：从代码框里抽出来的"任务说明"（正文，不在代码框中） */
.practice-blank-note {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

.practice-blank-input {
    display: inline-block;
    width: 150px;
    margin: 0 2px;
    padding: 2px 8px;
    border: 1px dashed var(--accent);
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.4;
    vertical-align: baseline;
}

.practice-blank-input:focus {
    outline: none;
    border-style: solid;
    background: var(--surface);
}

/* 小屏：单栏，章节列表不再吸顶、落到顶部横排 */
@media (max-width: 900px) {
    .practice-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .practice-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ============================================================
   练习闯关 · v2 工作台布局（整页平铺、面板独立滚动）
   说明：本段后写，覆盖上方旧两栏布局规则（同特异性时后写胜出）。
   旧类名 .practice-main / .practice-question-head / .practice-exercise-list
   等已无元素引用，暂留未删以最小化改动。
   ============================================================ */

body.practice-page {
    --header-width: 100%;
    --ok: #16a34a;
    --ok-soft: #f0fdf4;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.practice-page .site-header {
    flex-shrink: 0;
}

/* 整页不滚 → 头部的 .scrolled 永不触发，常驻胶囊背景，避免导航浮在内容上 */
body.practice-page .site-header-pill {
    background: var(--nav-bg);
    border-color: var(--card-border);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
}

/* 头部三栏：左品牌 / 中答题操作 / 右导航
   （答题操作居中，对齐 LeetCode 答题页；导航让到右侧）
   用显式 grid-column 摆放而**不重排 DOM** —— 保留「品牌→导航→操作」的
   阅读与 Tab 焦点顺序，只改视觉位置，避免为好看牺牲可访问性。
   ⚠ 必须同时显式写 grid-row:1：否则自动排布会按 DOM 顺序推进「游标」，
   处理完 nav(第3列) 后游标停在第 3 列，其后的 actions(第2列) 因列号更小
   被迫换行 —— 表现为「按钮掉到第二行」。三列各自显式定位即可锁死单行。 */
body.practice-page .site-header-pill .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 6px 20px;
}

body.practice-page .site-header-pill .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

body.practice-page .site-header-pill .nav {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

/* 答题操作区：「提交运行 / 重置代码」（写代码题）或「提交答案」（客观题），
   由 practice.js syncActions() 按题型切换 */
.practice-top-actions {
    display: flex;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    gap: 8px;
}

.practice-top-actions .btn {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.7;
    white-space: nowrap;
}

body.practice-page .site-footer {
    flex-shrink: 0;
    padding: 8px 16px 10px;
}

/* 主体容器：全宽铺满、撑满剩余高度（内边距收紧，纵向让给两个工作面板） */
.container-practice {
    width: 100%;
    max-width: none;
    margin: 0;
    flex: 1;
    min-height: 0;
    padding: 6px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 进度：并入左栏栏头（原 .practice-bar 标题条已删除，纵向空间让给描述与编辑器） */
.practice-progress {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* 工作区：左栏收窄（220→200），右栏吃满 */
.practice-layout {
    flex: 1;
    min-height: 0;
    margin: 0;
    display: grid;
    /* 侧栏 224px：题目标题需要宽度（最长 24 字两行可放下）；≤1200 窄屏回落 200px */
    grid-template-columns: 224px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* 左栏：章节 + 题目两级树（自身滚动） */
.practice-side {
    position: static;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 14px 12px 16px;
}

.practice-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 4px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.practice-chapters .practice-semester:first-child {
    margin-top: 2px;
}

.practice-chapter-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* 已完成过的章节：计数显示「已完成/总数」并染成功色（激活态的 accent 优先，见下条特异性更高） */
.practice-chapter-count.has-done {
    color: var(--ok);
}

.practice-chapter.active .practice-chapter-count {
    color: var(--accent);
}

/* 左栏题目列表（当前章展开）：相对章节再缩进一级，并加左侧引导线
   注：侧栏 224px，缩进过大会把题目标题挤没，这里收窄到 20px 保留层级感即可；
   引导线用 1px 淡色，只做视觉从属提示，不与标题抢注意力 */
.practice-ex-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 8px 20px;
    padding-left: 8px;
    border-left: 1px solid var(--border);
}

.practice-ex-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 10px 7px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.practice-ex-item:hover {
    background: var(--bg);
    color: var(--text);
}

.practice-ex-item.current {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text);
    font-weight: 600;
}

.practice-ex-dot {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.6;
}

.practice-ex-item.done .practice-ex-dot {
    color: var(--ok);
    opacity: 1;
}

.practice-ex-item.current .practice-ex-dot {
    color: var(--accent);
    opacity: 1;
}

/* 题目标题占满剩余宽度（题型徽章已移除，不再挤压标题）
   200px 侧栏放不下整行长标题（最长 32 字）⇒ 最多两行 + 省略号，悬停 title 看全称 */
.practice-ex-title {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* 右栏工作台 */
.practice-work {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.practice-work-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 2px;
    min-height: 28px;
}

/* 上一题 / 下一题：题目头最左侧的切题按钮（LeetCode 式） */
.practice-nav {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.practice-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.practice-nav-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.practice-nav-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.practice-nav-btn:disabled {
    opacity: 0.38;
    cursor: default;
}

/* 题目头与切题按钮之间留一条细分隔，视觉上分组 */
.practice-nav + .practice-badge {
    margin-left: 2px;
}

.practice-badge {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 600;
}

.practice-work-title {
    min-width: 0;                   /* 允许在 flex 头里收缩，避免长标题把右侧定位挤出视野 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.practice-work-pos {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 并排主体：题干 | 编辑器·作答（等高、各自滚动） */
.practice-work-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 14px;
    align-items: stretch;
}

.practice-work-body.single {
    grid-template-columns: minmax(0, 1fr);
}

/* 卡片：改为内部滚动容器（去掉通用内边距） */
.practice-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.practice-pane-title {
    flex-shrink: 0;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

/* 题干滚动区 */
.practice-prompt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 20px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text);
    scrollbar-width: thin;
}

.practice-prompt.practice-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

/* 难度档位：固定题干卡底部 */
.practice-tier-bar {
    flex-shrink: 0;
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

.practice-editor {
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
    resize: none;
    outline: none;
    overflow-y: auto;
    scrollbar-width: thin;
}

.practice-editor:focus {
    background: #fffdfb;
    box-shadow: none;
}

/* 客观题作答区 */
.practice-answer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 20px;
    scrollbar-width: thin;
}

/* 结果条（固定在工作台底部） */
.practice-result {
    flex-shrink: 0;
    max-height: 42%;
    overflow-y: auto;
    padding: 12px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    scrollbar-width: thin;
}

.practice-result.is-pass {
    background: var(--ok-soft);
    border-color: #bbf7d0;
}

.practice-result.is-fail {
    background: var(--danger-soft);
    border-color: #fecaca;
}

.practice-result .loading {
    padding: 16px;
}

.practice-result-output {
    max-height: 220px;
}

/* 面板内滚动条收细 */
.practice-side::-webkit-scrollbar,
.practice-prompt::-webkit-scrollbar,
.practice-editor::-webkit-scrollbar,
.practice-answer-body::-webkit-scrollbar,
.practice-result::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 窄屏回落：整页滚动 + 上下折列 */
@media (max-width: 1200px) {
    body.practice-page {
        display: block;
        height: auto;
        overflow: auto;
    }

    .container-practice {
        display: block;
        padding: 12px 18px 24px;
    }

    .practice-layout {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-rows: none;
    }

    .practice-side {
        overflow: visible;
    }

    .practice-work,
    .practice-card {
        overflow: visible;
    }

    .practice-work-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .practice-prompt,
    .practice-answer-body {
        min-height: 240px;
        overflow: visible;
    }

    .practice-editor {
        flex: none;
        min-height: 260px;
        overflow: visible;
    }

    .practice-result {
        max-height: none;
    }
}

@media (max-width: 900px) {
    /* 头部常驻「单行」：宽度不足时只逐级压缩尺寸，绝不换行
       —— 品牌 +「提交运行/重置代码」+ 导航 三栏压缩后 ~450px 也放得下。
       注意 .header-inner 是 display:grid（grid 不会换行）；
       这里同时把 .nav 的 flex-wrap 强制为 nowrap，避免导航自身被通用窄屏规则拆行 */
    body.practice-page .site-header-pill .header-inner {
        gap: 8px;
        padding: 6px 12px 6px 14px;
    }

    body.practice-page .site-header-pill .site-title {
        font-size: 1.05rem;
    }

    body.practice-page .site-header-pill .nav {
        gap: 4px;
        flex-wrap: nowrap;
    }

    body.practice-page .site-header-pill .nav a {
        padding: 5px 9px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .practice-top-actions {
        gap: 6px;
    }

    .practice-top-actions .btn {
        padding: 5px 12px;
        font-size: 12.5px;
    }

    .practice-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .practice-work-pos {
        display: none;
    }
}

/* 极窄（手机 <480px）才回落两行：品牌 + 操作一行、导航居中另起一行。
   （选择器带 body 提升优先级，覆盖通用胶囊头部的 flex-wrap 规则） */
@media (max-width: 480px) {
    body.practice-page .site-header-pill .header-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 6px;
    }

    body.practice-page .site-header-pill .nav {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 2px;
    }
}

/* ===== 题目描述 + 题解 + 测试结果（描述卡三段式） ===== */
/* 描述卡内部：题目描述 + 题解 共用一个滚动区 */
.practice-desc-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* 滚动区内的题干不再自己滚动，随描述区一起滚 */
.practice-desc-scroll .practice-prompt {
    flex: none;
    min-height: 0;
    overflow: visible;
    padding-bottom: 4px;
}

.practice-desc-scroll .practice-prompt.practice-empty {
    min-height: 220px;
}

/* 难度档位条：现位于描述滚动区内（题干与题解之间） */
.practice-desc-scroll .practice-tier-bar {
    margin-top: 10px;
}

/* 描述卡标签栏：题目描述 | 题解（共用一栏，点击切换，默认题目描述） */
.practice-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
}

.practice-tab {
    appearance: none;
    border: none;
    background: none;
    padding: 13px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.practice-tab:hover {
    color: var(--text-secondary);
}

.practice-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
    border-radius: var(--radius-sm);
}

.practice-tab.is-active {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
}

/* 题解面板：内容随面板滚动（面板复用 .practice-desc-scroll） */
.practice-solution-host {
    padding: 16px 20px 20px;
}

.practice-solution-body {
    font-size: 14px;
    line-height: 1.85;
    color: var(--text);
}

.practice-solution-body p {
    margin: 10px 0;
}

.practice-solution-body ul,
.practice-solution-body ol {
    margin: 10px 0;
    padding-left: 22px;
}

.practice-solution-body li {
    margin: 4px 0;
}

.practice-solution-body h1,
.practice-solution-body h2,
.practice-solution-body h3,
.practice-solution-body h4 {
    margin: 16px 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

/* 代码块沿用站点深色基调：highlight.css 的 token 色板（Atom One Dark）是为深底设计的，
   若铺在浅底上，字符串/数字/内置类型等「着重显示的符号」会严重掉对比度甚至看不见 */
.practice-solution-body pre {
    margin: 12px 0;
    padding: 12px 14px;
    background: #1f2328;
    border: 1px solid #2d323b;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
    color: #e5e7eb;
}

.practice-solution-body pre code,
.practice-solution-body pre code.hljs {
    background: transparent;
    color: #e5e7eb;
    padding: 0;
    font-size: 13px;
}

/* 行内代码（浅底卡片上）：暖橙小胶囊，与正文区分 */
.practice-solution-body :not(pre) > code {
    font-size: 12.5px;
    background: #f3f4f6;
    color: #c2410c;
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

/* 深色代码块内的选区：浅底 + 深字，保证反选后依然可读 */
.practice-solution-body pre ::selection {
    background: #fff1e6;
    color: #7c2d12;
}

/* 测试结果：紧邻题解、固定在描述卡底部，运行/提交后出现 */
.practice-result {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);
    max-height: 40%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.practice-result-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-secondary);
}

.practice-result.is-pass .practice-result-title {
    color: var(--ok);
}

.practice-result.is-fail .practice-result-title {
    color: var(--danger, #dc2626);
}

.practice-result-body {
    padding: 0 20px 14px;
}

.practice-result-body .practice-result-head {
    margin-top: 0;
}

/* 窄屏回落：描述卡整体展开、不再内部滚动 */
@media (max-width: 1200px) {
    .practice-desc-scroll {
        overflow: visible;
    }

    .practice-desc-scroll .practice-prompt {
        min-height: 200px;
    }

    .practice-result {
        max-height: none;
    }
}

/* ===== 写代码题：IDE 观感代码编辑器（行号槽 + 高亮叠加层 + 状态栏） ===== */
/* 配色沿用站点代码块（.markdown-body pre）的深色基调，保持视觉连续 */
.practice-code {
    /* 默认主题 = Dark+（VS Code Dark+）；其余主题由 #codeShell[data-editor-theme=...] 覆盖。
       所有颜色走变量，便于一套结构切换多套配色。 */
    --c-bg: #1f2328;
    --c-bar: #171a1f;
    --c-border: #2d323b;
    --c-gutter-bg: #1b1f24;
    --c-gutter-fg: #4b5563;
    --c-text: #d4d4d4;
    --c-caret: #e8e8e8;
    --c-current: rgba(255, 255, 255, 0.045);
    --c-sel: rgba(38, 79, 120, 0.55);
    --c-placeholder: #5c6370;
    --c-tip: #6b7480;
    --c-file: #c9cfd8;
    --c-scroll: #3a4048;
    --c-focus: rgba(194, 65, 12, 0.55);
    --c-tok-comment: #6a9955;
    --c-tok-keyword: #569cd6;
    --c-tok-type: #4ec9b0;
    --c-tok-number: #b5cea8;
    --c-tok-string: #ce9178;
    --c-tok-function: #dcdcaa;
    --c-tok-variable: #9cdcfe;
    /* 代码字体度量：字号可由顶栏 A− / A+ 调整（JS 把 --c-fs 内联写到 #codeShell）。
       高亮层、行号槽、输入框三者共用这两个变量 ⇒ 改一处三者同步，不会错位。 */
    --c-fs: 13px;
    --c-lh: 1.6;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 12px 20px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    overflow: hidden;
}

/* 主题切换：Light+ / Solarized Dark / Monokai（仅覆盖颜色变量，结构不变） */
#codeShell[data-editor-theme="light"] {
    --c-bg: #ffffff;
    --c-bar: #f3f3f3;
    --c-border: #e1e4e8;
    --c-gutter-bg: #f3f3f3;
    --c-gutter-fg: #c0c4cc;
    --c-text: #24292e;
    --c-caret: #1e1e1e;
    --c-current: rgba(0, 0, 0, 0.04);
    --c-sel: rgba(173, 214, 255, 0.6);
    --c-placeholder: #a0a6ad;
    --c-tip: #6a737d;
    --c-file: #24292e;
    --c-scroll: #d0d7de;
    --c-focus: rgba(31, 136, 61, 0.55);
    --c-tok-comment: #6a737d;
    --c-tok-keyword: #d73a49;
    --c-tok-type: #e36209;
    --c-tok-number: #005cc5;
    --c-tok-string: #032f62;
    --c-tok-function: #6f42c1;
    --c-tok-variable: #e36209;
}

#codeShell[data-editor-theme="solarized"] {
    --c-bg: #002b36;
    --c-bar: #073642;
    --c-border: #073642;
    --c-gutter-bg: #073642;
    --c-gutter-fg: #586e75;
    --c-text: #93a1a1;
    --c-caret: #eee8d5;
    --c-current: rgba(147, 161, 161, 0.10);
    --c-sel: rgba(38, 139, 210, 0.35);
    --c-placeholder: #586e75;
    --c-tip: #586e75;
    --c-file: #93a1a1;
    --c-scroll: #073642;
    --c-focus: rgba(38, 139, 210, 0.6);
    --c-tok-comment: #586e75;
    --c-tok-keyword: #859900;
    --c-tok-type: #b58900;
    --c-tok-number: #2aa198;
    --c-tok-string: #2aa198;
    --c-tok-function: #268bd2;
    --c-tok-variable: #b58900;
}

#codeShell[data-editor-theme="monokai"] {
    --c-bg: #272822;
    --c-bar: #1e1f1b;
    --c-border: #3e3d32;
    --c-gutter-bg: #1e1f1b;
    --c-gutter-fg: #75715e;
    --c-text: #f8f8f2;
    --c-caret: #f8f8f2;
    --c-current: rgba(255, 255, 255, 0.06);
    --c-sel: rgba(73, 72, 62, 0.99);
    --c-placeholder: #75715e;
    --c-tip: #75715e;
    --c-file: #f8f8f2;
    --c-scroll: #3e3d32;
    --c-focus: rgba(249, 38, 114, 0.5);
    --c-tok-comment: #75715e;
    --c-tok-keyword: #f92672;
    --c-tok-type: #66d9ef;
    --c-tok-number: #ae81ff;
    --c-tok-string: #e6db74;
    --c-tok-function: #a6e22e;
    --c-tok-variable: #f8f8f2;
}

/* 顶部标签条：文件名 + 运行快捷键提示 */
.practice-code-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: var(--c-bar);
    border-bottom: 1px solid var(--c-border);
    font-size: 12px;
    color: var(--c-tip);
}

.practice-code-bar-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.practice-code-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--c-file);
}

.practice-code-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.practice-code-tip {
    color: var(--c-tip);
}

/* 顶栏右侧：编辑器主题 + 代码字号（VS Code 状态栏两个迷你控件的合体） */
.practice-code-tools {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.practice-code-theme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.practice-code-theme-label {
    color: var(--c-tip);
    font-size: 11px;
    user-select: none;
}

.practice-code-theme-select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    padding: 3px 22px 3px 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-gutter-bg);
    color: var(--c-file);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    /* 下拉箭头（用内联 SVG，跟随当前前景色） */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238b94a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 7px center;
}

.practice-code-theme-select:hover {
    border-color: var(--accent);
}

.practice-code-theme-select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--c-focus);
}

/* 字号步进器：A− 13 A+（值用等宽数字，调的时候不抖动） */
.practice-code-font {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.practice-code-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--c-file);
    background: var(--c-gutter-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.practice-code-font-sign {
    font-size: 12.5px;
    line-height: 1;
}

.practice-code-font-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.practice-code-font-btn:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--c-focus);
}

.practice-code-font-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.practice-code-font-val {
    min-width: 20px;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--c-file);
    user-select: none;
    -webkit-user-select: none;
}

/* 编辑区：左行号槽 + 右（高亮层叠 textarea） */
.practice-code-main {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.practice-code-gutter {
    flex-shrink: 0;
    min-width: 46px;
    padding: 12px 10px;
    text-align: right;
    font-family: 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--c-fs);
    line-height: var(--c-lh);
    color: var(--c-gutter-fg);
    background: var(--c-gutter-bg);
    border-right: 1px solid var(--c-border);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    font-variant-numeric: tabular-nums;
}

.practice-code-body {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* 当前行高亮条：随光标移动、随滚动平移（VS Code 的「着重显示」） */
.practice-code-currentline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--c-fs) * var(--c-lh));   /* 与行高同源，随字号缩放（JS 另会内联写精确值） */
    background: var(--c-current);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

/* 高亮层与输入框必须逐像素对齐：字体 / 行高 / 内边距 / 制表符宽度全部一致 */
.practice-code-hl,
.practice-code-input {
    position: absolute;
    inset: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--c-fs);
    line-height: var(--c-lh);
    tab-size: 4;
    white-space: pre;
}

/* 高亮层在下、输入框在上：原生光标始终可见（不会被上层元素盖住）。
   反选时由输入框把选区字形重新填成白色（见下方 ::selection），
   从而得到「白字 + 蓝底」，不再被下层高亮层冲淡 */
.practice-code-hl {
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    color: var(--c-text);
}

.practice-code-hl code {
    display: block;
    margin: 0;
    padding: 0;
    font: inherit;
    white-space: pre;
    background: transparent;
    color: inherit;
    /* 高亮层不做二次滚动，靠 JS 用 transform 跟随输入框的 scrollTop/scrollLeft 平移。
       原因见 syncCodeScroll()：输入框自带滚动条各占 10px，高亮层没有，
       若靠 scrollTop 同步会在滚动极限处被 clamp ⇒ 文字与光标错位。 */
    will-change: transform;
}

/* 行号槽内层：与高亮层同理，用 transform 跟随滚动 */
.practice-code-gutter-inner {
    will-change: transform;
}

.practice-code-input {
    z-index: 2;
    resize: none;
    outline: none;
    overflow: auto;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--c-caret);
    scrollbar-width: thin;
    scrollbar-color: var(--c-scroll) transparent;
}

.practice-code-input::placeholder {
    color: var(--c-placeholder);
    -webkit-text-fill-color: var(--c-placeholder);
    opacity: 1;
}

/* 选区配色对齐 VS Code Dark+（#264F78）。
   输入框自身的字是「透明」的，字形由下层高亮层提供。
   ⚠ 若把 ::selection 的文字填成不透明白色，会把下层高亮层的语法配色（含注释的
     绿色斜体）整片盖掉 —— 选中注释时会「突然变正体、变白」。这是历史 bug。
   正解：选区底色用半透明蓝，让下层语法色透出来；文字保持透明，交给高亮层显色。 */
.practice-code-input::selection {
    background: var(--c-sel);
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.practice-code-input::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.practice-code-input::-webkit-scrollbar-thumb {
    background: var(--c-scroll);
    border-radius: 5px;
}

.practice-code-input::-webkit-scrollbar-track {
    background: transparent;
}

.practice-code-body:focus-within {
    box-shadow: inset 0 0 0 1px var(--c-focus);
}

/* 底部状态栏：光标位置 + 语言信息 */
.practice-code-status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 14px;
    background: var(--c-bar);
    border-top: 1px solid var(--c-border);
    font-size: 11.5px;
    color: var(--c-tip);
    font-variant-numeric: tabular-nums;
}

/* 高亮层内的 C++ token 配色：随主题切换（变量见 .practice-code 与各 data-editor-theme） */
.practice-code-hl .hljs-comment,
.practice-code-hl .hljs-quote { color: var(--c-tok-comment); font-style: italic; }

/* 关键字 / 字面量 / 预处理：蓝 */
.practice-code-hl .hljs-keyword,
.practice-code-hl .hljs-literal,
.practice-code-hl .hljs-name,
.practice-code-hl .hljs-symbol,
.practice-code-hl .hljs-meta { color: var(--c-tok-keyword); }

/* 类型 / 内置：青绿 */
.practice-code-hl .hljs-type,
.practice-code-hl .hljs-built_in,
.practice-code-hl .hljs-class,
.practice-code-hl .hljs-title.class_ { color: var(--c-tok-type); }

/* 数字：浅绿 */
.practice-code-hl .hljs-number,
.practice-code-hl .hljs-bullet { color: var(--c-tok-number); }

/* 字符串 / 正则 / 属性：橙棕 */
.practice-code-hl .hljs-string,
.practice-code-hl .hljs-meta .hljs-string,
.practice-code-hl .hljs-regexp,
.practice-code-hl .hljs-attribute,
.practice-code-hl .hljs-addition,
.practice-code-hl .hljs-selector-attr,
.practice-code-hl .hljs-selector-pseudo { color: var(--c-tok-string); }

/* 函数名：黄 */
.practice-code-hl .hljs-title,
.practice-code-hl .hljs-title.function_,
.practice-code-hl .hljs-function .hljs-title,
.practice-code-hl .hljs-section { color: var(--c-tok-function); }

/* 变量 / 参数 / 其它辅助 token：浅蓝 */
.practice-code-hl .hljs-variable,
.practice-code-hl .hljs-template-variable,
.practice-code-hl .hljs-params,
.practice-code-hl .hljs-attr,
.practice-code-hl .hljs-property,
.practice-code-hl .hljs-selector-tag,
.practice-code-hl .hljs-selector-id,
.practice-code-hl .hljs-selector-class,
.practice-code-hl .hljs-link,
.practice-code-hl .hljs-doctag,
.practice-code-hl .hljs-formula,
.practice-code-hl .hljs-subst,
.practice-code-hl .hljs-deletion { color: var(--c-tok-variable); }

/* 窄屏回落：编辑器不再撑满高度，改固定高度（行号与高亮仍同步滚动） */
@media (max-width: 1200px) {
    .practice-code {
        flex: none;
    }

    .practice-code-main {
        min-height: 340px;
    }
}

/* 小屏（手机上编辑器顶栏放不下「文件名 + 运行提示 + 主题 + 字号」一行）：
   顶栏折成两行 —— 第一行文件名与运行提示，第二行主题与字号，避免提示被压成竖排。
   ⚠ 必须排在上方 .practice-code-bar 等规则之后（同特异性「后写胜出」）。 */
@media (max-width: 640px) {
    .practice-code-bar {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 8px 10px;
    }

    .practice-code-bar-left,
    .practice-code-tools {
        flex: 1 1 100%;
    }

    .practice-code-tools {
        justify-content: space-between;
        gap: 8px;
    }
}

/* ===== 测试结果面板（描述卡第三个标签页） ===== */
/* 结果不再是独立底栏：并入标签面板，随面板滚动 */
#resultPane {
    padding: 16px 20px 20px;
}

#resultPane .practice-result {
    flex: none;
    margin: 0;
    padding: 0;
    border: none;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    max-height: none;
    overflow: visible;
}

#resultPane .practice-result-body {
    padding: 0;
}

/* 结果空态：本题还没有运行结果（面板不空白，给一句提示） */
.practice-result-empty {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

/* 「测试结果」标签上的状态点：有结果才点亮（通过=绿 / 未过=红） */
.practice-tab-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease;
    vertical-align: middle;
}

.practice-tab.has-result-pass .practice-tab-dot {
    opacity: 1;
    background: var(--ok);
}

.practice-tab.has-result-fail .practice-tab-dot {
    opacity: 1;
    background: var(--danger, #dc2626);
}

/* ============================================================
   首页 Dashboard：深空科技感 · 一屏三岛
   作用域限定 body.dash-page，其余页面保持原浅色；
   文章列表页 /posts 只需对齐导航宽度。
   三岛配色：文章=天青 / 每日一题=紫罗兰 / 练习闯关=薄荷
   ============================================================ */
body.list-page {
    --header-width: 1060px;
}

body.dash-page {
    --bg: #05070d;
    --surface: #0b0f19;
    --text: #e8edf7;
    --text-secondary: #9aa8c0;
    --text-muted: #7e8fa8;
    --border: rgba(120, 165, 220, 0.14);
    --accent: #38bdf8;
    --accent-dark: #7dd3fc;
    --accent-soft: rgba(56, 189, 248, 0.14);
    --card-bg: rgba(11, 15, 25, 0.62);
    --card-border: rgba(120, 165, 220, 0.14);
    --nav-bg: rgba(9, 13, 22, 0.55);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    /* 铺满屏幕：导航胶囊与内容同宽 */
    --header-width: min(1840px, calc(100vw - 44px));
    position: relative;
    overflow-x: hidden;
    /* 强制深空底色：覆盖 background.js 可能设置的背景图 */
    background: var(--bg) !important;
    color: var(--text);
}

/* ---------- 背景：三团极光 + 网格 ---------- */
body.dash-page::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42% 44% at 12% 4%, rgba(56, 189, 248, 0.34), transparent 68%),
        radial-gradient(38% 40% at 88% 0%, rgba(167, 139, 250, 0.30), transparent 68%),
        radial-gradient(46% 48% at 86% 96%, rgba(52, 211, 153, 0.24), transparent 68%),
        linear-gradient(180deg, #060a14 0%, #04060b 55%, #060a14 100%);
    animation: homeAurora 38s ease-in-out infinite alternate;
}

body.dash-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(120, 170, 230, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 170, 230, 0.075) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(130% 85% at 50% 0%, #000 12%, transparent 78%);
    mask-image: radial-gradient(130% 85% at 50% 0%, #000 12%, transparent 78%);
}

@keyframes homeAurora {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

/* 内容层压在背景之上（不能笼统写 > *，否则会把 sticky 导航改成 relative） */
body.dash-page > main,
body.dash-page > footer {
    position: relative;
    z-index: 1;
}

/* 深色滚动条与选区 */
body.dash-page ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body.dash-page ::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 220, 0.22);
    border-radius: 999px;
}
body.dash-page ::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 165, 220, 0.36);
}
body.dash-page ::selection {
    background: rgba(56, 189, 248, 0.32);
    color: #ffffff;
}

/* ---------- 导航：常驻玻璃胶囊 ---------- */
body.dash-page .site-header {
    background: transparent;
    border-bottom-color: transparent;
}

body.dash-page .site-header-pill {
    background: rgba(9, 13, 22, 0.55);
    border-color: rgba(120, 170, 230, 0.14);
    border-radius: 999px;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 32px -20px rgba(0, 0, 0, 0.9);
}

body.dash-page .site-header-pill.scrolled {
    background: rgba(9, 13, 22, 0.80);
    border-color: rgba(120, 170, 230, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 42px -22px rgba(0, 0, 0, 0.95);
}

body.dash-page .site-header-pill .site-title {
    color: #eaf2ff;
    letter-spacing: 0.01em;
}

body.dash-page .nav a,
body.dash-page .nav .nav-create-toggle {
    color: var(--text-secondary);
}

body.dash-page .nav a:hover,
body.dash-page .nav .nav-create-toggle:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
}

body.dash-page .nav a.active {
    color: #04121c;
    background: linear-gradient(180deg, #7dd3fc, #38bdf8);
    border-color: transparent;
    box-shadow: 0 6px 18px -8px rgba(56, 189, 248, 0.9);
}

/* ---------- 布局：铺满一屏 ---------- */
body.dash-page .container-home {
    width: min(1840px, calc(100vw - 44px));
    max-width: none;
    margin: 0 auto;
    padding: 12px 0 20px;
}

.home-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: stretch;
    min-height: calc(100vh - 196px);
    min-height: calc(100dvh - 196px);
}

.dash-col-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.dash-col-side > .dash-card {
    flex: 1 1 0;
}

/* ---------- 岛屿卡片 ---------- */
.dash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 26px 28px;
    border-radius: 26px;
    border: 1px solid rgba(var(--island-rgb), 0.18);
    background:
        radial-gradient(125% 95% at 0% 0%, rgba(var(--island-rgb), 0.15), transparent 66%),
        linear-gradient(158deg, rgba(var(--island-rgb), 0.07), rgba(11, 16, 28, 0.78) 44%, rgba(10, 14, 24, 0.92));
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 70px rgba(var(--island-rgb), 0.05),
        0 24px 56px -30px rgba(0, 0, 0, 0.95);
    max-width: 100%;
    overflow: hidden;
}

/* 顶边一线光：岛屿的"高光边缘" */
.dash-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 2%,
        rgba(var(--island-rgb), 0.55) 24%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(var(--island-rgb), 0.45) 76%,
        transparent 98%
    );
    opacity: 0.55;
    transition: opacity var(--transition);
}

a.dash-card {
    color: inherit;
    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

a.dash-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--island-rgb), 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 0 70px rgba(var(--island-rgb), 0.08),
        0 30px 70px -34px rgba(var(--island-rgb), 0.7),
        0 24px 56px -30px rgba(0, 0, 0, 0.95);
}

a.dash-card:hover::before {
    opacity: 1;
}

a.dash-card:focus-visible {
    outline: 2px solid rgba(var(--island-rgb), 0.65);
    outline-offset: 4px;
}

/* 三岛配色 */
.dash-posts {
    --island: #38bdf8;
    --island-rgb: 56, 189, 248;
}

.dash-daily {
    --island: #a78bfa;
    --island-rgb: 167, 139, 250;
}

.dash-practice {
    --island: #34d399;
    --island-rgb: 52, 211, 153;
}

/* 三岛各自的科技装饰（低透明度，只做边缘点缀，不压文字） */
/* 文章：左侧光轨 */
.dash-posts::after {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, transparent, rgba(var(--island-rgb), 0.8), transparent);
    opacity: 0.7;
    pointer-events: none;
}

/* 每日一题：右上斜向掠光 */
.dash-daily::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        118deg,
        transparent 42%,
        rgba(255, 255, 255, 0.035) 48%,
        rgba(var(--island-rgb), 0.10) 52%,
        transparent 60%
    );
}

/* 练习闯关：右下同心环纹 */
.dash-practice::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 320px;
    height: 320px;
    pointer-events: none;
    background: repeating-radial-gradient(
        circle at 50% 50%,
        rgba(var(--island-rgb), 0.30) 0 1px,
        transparent 1px 18px
    );
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 68%);
    mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 68%);
    opacity: 0.35;
}

/* ---------- 卡片头部 ---------- */
.dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.dash-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.dash-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--island);
    box-shadow: 0 0 10px 2px rgba(var(--island-rgb), 0.85);
}

.dash-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--island-rgb), 0.22);
    background: rgba(var(--island-rgb), 0.08);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--transition);
}

.dash-more:hover {
    color: #ffffff;
    border-color: rgba(var(--island-rgb), 0.5);
    background: rgba(var(--island-rgb), 0.16);
    box-shadow: 0 8px 22px -14px rgba(var(--island-rgb), 0.9);
}

/* ---------- 左栏：文章列表 ---------- */
.dash-post-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* 每行等分剩余高度，分隔线才会均匀 */
.dash-post-item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
}

.dash-post-item + .dash-post-item {
    border-top: 1px solid rgba(120, 165, 220, 0.10);
}

.dash-post-link {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 10px 8px 4px;
    border-radius: 14px;
    transition: padding-left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease;
}

/* 左侧电流条：hover 时点亮 */
.dash-post-link::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 50%;
    width: 3px;
    height: 0;
    transform: translateY(-50%);
    border-radius: 0 999px 999px 0;
    background: var(--island);
    box-shadow: 0 0 14px 1px rgba(var(--island-rgb), 0.9);
    transition: height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dash-post-link:hover {
    padding-left: 14px;
    background: linear-gradient(90deg, rgba(var(--island-rgb), 0.10), transparent 72%);
}

.dash-post-link:hover::before {
    height: 62%;
}

.dash-post-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition);
}

.dash-post-link:hover .dash-post-title {
    color: #ffffff;
}

.dash-post-side {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.dash-tag {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(var(--island-rgb), 0.28);
    background: rgba(var(--island-rgb), 0.12);
    color: var(--island);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.dash-post-date {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.dash-empty,
.dash-loading {
    padding: 22px 4px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.dash-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(120, 165, 220, 0.16);
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* ---------- 右栏：每日一题 / 练习闯关 ---------- */
.dash-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

/* 药丸标签（灵动岛内的"状态岛"） */
.dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(var(--island-rgb), 0.28);
    background: rgba(var(--island-rgb), 0.12);
    color: var(--island);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dash-eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px 1px currentColor;
}

.dash-date,
.dash-meta {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.dash-daily-q {
    display: -webkit-box;
    margin: auto 0;
    overflow: hidden;
    color: var(--text);
    font-family: var(--sans);
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
    text-wrap: pretty;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

.dash-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

.dash-streak {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--island-rgb), 0.24);
    background: rgba(var(--island-rgb), 0.10);
    color: var(--island);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.dash-hint {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    transition: color var(--transition), transform var(--transition);
}

a.dash-card:hover .dash-hint {
    color: var(--island);
    transform: translateX(3px);
}

/* 练习进度：大数字 + 进度条 */
.dash-practice-body {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: auto 0 20px;
}

.dash-pct {
    color: #ffffff;
    font-family: var(--mono);
    font-size: clamp(2.4rem, 3.4vw, 3.2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.dash-pct small {
    margin-left: 3px;
    color: var(--island);
    font-size: 0.36em;
    font-weight: 500;
    letter-spacing: 0;
}

.dash-progress {
    margin-top: 0;
}

.dash-progress-bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(120, 165, 220, 0.10);
    box-shadow: inset 0 0 0 1px rgba(120, 165, 220, 0.12);
    overflow: hidden;
}

.dash-progress-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--island-rgb), 0.55), var(--island));
    box-shadow: 0 0 18px rgba(var(--island-rgb), 0.85);
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dash-progress-text {
    display: inline-block;
    margin-top: 10px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

/* ---------- 页脚 ---------- */
body.dash-page .site-footer,
body.dash-page .site-footer a {
    color: var(--text-muted);
}

body.dash-page .site-footer a:hover {
    color: var(--text-secondary);
}

/* ---------- 响应式（必须排在被覆盖规则之后） ---------- */
@media (max-width: 1080px) {
    .home-dashboard {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .dash-col-side {
        flex-direction: row;
    }

    .dash-card {
        height: auto;
        min-height: 260px;
    }

    .dash-post-list {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    body.dash-page {
        --header-width: calc(100vw - 24px);
    }

    body.dash-page .container-home {
        width: calc(100vw - 24px);
        padding-top: 8px;
    }

    /* 窄屏导航：收窄内距 + 可横向滑动，避免撑破视口 */
    body.dash-page .site-header-pill {
        width: calc(100vw - 24px);
    }

    body.dash-page .site-header-pill .header-inner {
        padding: 5px 6px 5px 14px;
        gap: 8px;
    }

    body.dash-page .site-header-pill .site-title {
        font-size: 1.02rem;
    }

    body.dash-page .nav {
        gap: 2px;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.dash-page .nav::-webkit-scrollbar {
        display: none;
    }

    body.dash-page .nav a,
    body.dash-page .nav .nav-create-toggle {
        padding: 6px 9px;
        font-size: 0.84rem;
    }

    .home-dashboard {
        gap: 14px;
    }

    .dash-col-side {
        flex-direction: column;
        gap: 14px;
    }

    /* 竖排时不能再按 flex:1 均分高度（父容器高度自适应 ⇒ 会被压成 0） */
    .dash-col-side > .dash-card {
        flex: 0 0 auto;
    }

    .dash-card {
        padding: 20px;
        border-radius: 20px;
        min-height: 0;
        height: auto;
    }

    .dash-daily-q {
        margin: 14px 0;
        font-size: 1.02rem;
    }

    .dash-practice-body {
        margin: 14px 0 16px;
    }

    .dash-post-link {
        gap: 10px;
        padding: 12px 6px 12px 2px;
    }

    .dash-post-link::before {
        display: none;
    }

    .dash-post-title {
        display: -webkit-box;
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.dash-page::before {
        animation: none;
    }

    a.dash-card,
    .dash-post-link,
    .dash-post-link::before,
    .dash-progress-bar > span {
        transition: none;
    }
}