/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Noto+Sans+SC:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== Design tokens ===== */
*, *::before, *::after { box-sizing: border-box; }
:root {
    /* Ink scale - warm dark, not cold blue */
    --ink: #1a1612;
    --ink-2: #2b241d;
    --text: #3d342b;
    --text-soft: #574a3d;
    --muted: #8a7d6d;
    --subtle: #b8ab9b;

    /* Surface - paper tones */
    --paper: #ffffff;
    --soft: #faf7f0;
    --soft-2: #f5f0e4;
    --tint: #efe9d9;
    --line: #e0d9c7;
    --line-soft: #ebe4d3;

    /* Brand - cinnabar red like an inkstamp / red pen */
    --brand: #c0392b;
    --brand-dark: #962b1f;
    --brand-soft: #fbeae6;

    /* Secondary accents */
    --ink-green: #2d4a3a;
    --ochre: #b08642;
    --navy: #1a1612;
    --blue: #2c5282;
    --indigo: #c0392b;
    --teal: #2d4a3a;
    --amber: #b08642;
    --rose: #c0392b;
    --success: #2d6a4f;
    --warning: #b08642;
    --danger: #962b1f;

    /* Radius - gentle, soft paper feel */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;

    /* Shadow - softer, warmer */
    --shadow-xs: 0 1px 2px rgba(26,22,18,0.04);
    --shadow-sm: 0 2px 12px rgba(26,22,18,0.05);
    --shadow-md: 0 10px 30px rgba(26,22,18,0.08);
    --shadow-lg: 0 28px 60px rgba(26,22,18,0.12);

    /* Type — unified single sans-serif family */
    --font-sans: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-display: var(--font-sans);
    --font-serif: var(--font-sans);
    --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
    --font: var(--font-sans);
}
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--soft);
    color: var(--text);
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
/* 全站稿纸纹理（2026-06-19 · 与首页呼应的轻量一致层；固定、极淡、顶部加重） */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(26,22,18,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,22,18,0.022) 1px, transparent 1px);
    background-size: 27px 27px;
    -webkit-mask-image: linear-gradient(#000, #000 32%, transparent 88%);
            mask-image: linear-gradient(#000, #000 32%, transparent 88%);
}
.display, .display-serif {
    font-family: var(--font-display);
}
a { text-decoration: none; color: inherit; }
button, input, textarea, select { font: inherit; }
::selection { background: rgba(192,57,43,0.16); color: var(--ink); }

/* ===== Layout ===== */
.page-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section-header {
    margin-bottom: 36px;
    padding-top: 38px;
    border-top: 1px solid var(--line);
    position: relative;
}
.section-header.compact { margin-bottom: 24px; }
.section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.section-header p {
    font-size: 14.5px;
    color: var(--muted);
    margin-top: 14px;
    line-height: 1.75;
    max-width: 560px;
}
.home-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 24px 96px;   /* 顶部 88→48：hero 已有 88 底距，收紧 hero→首区间距 */
    display: flex;
    flex-direction: column;
    gap: 96px;
    counter-reset: section;
}
/* 空公告占位不参与 flex gap，消除 hero 与首区之间的「幽灵间距」 */
#announcements-section:empty { display: none; }
.home-section {
    content-visibility: auto;
    contain-intrinsic-size: 520px;
    counter-increment: section;
    position: relative;
}
.home-section .section-header::before {
    content: counter(section, decimal-leading-zero);
    position: absolute;
    top: 16px; left: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: 0;
    padding-right: 12px;
    background: var(--soft);
}
.home-section .section-header::after {
    content: '';
    position: absolute;
    top: 22px; left: 28px;
    width: 18px; height: 1px;
    background: var(--brand);
    opacity: 0.4;
}
/* "查看全部" inline link inside section-header */
.section-header-row a[href] {
    font-size: 13px !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, gap 0.15s;
}
.section-header-row a[href]:hover {
    color: var(--brand) !important;
    gap: 10px;
}
@media(max-width:720px){
    .page-container { padding: 0 18px; }
    .home-main { padding: 48px 18px 72px; gap: 60px; }
    .section-header { margin-bottom: 24px; }
    .section-header-row { align-items: flex-start; flex-direction: column; }
    .section-header h2 { font-size: 1.4rem; }
}

/* ===== Header/Nav ===== */
.site-header { background: rgba(250,247,240,0.88); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.site-header-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-logo-icon {
    width: 38px; height: 38px;
    background: var(--brand);
    color: var(--soft);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
    letter-spacing: -0.02em;
    font-family: var(--font-display);
    position: relative;
    border-radius: var(--r-sm);
    box-shadow: 0 2px 6px rgba(150,43,31,0.22);
}
.site-logo-icon::after {
    content: ''; position: absolute; inset: 3px;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 4px;
    pointer-events: none;
}
.site-logo-text { line-height: 1.2; }
.site-logo-text strong {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--ink);
    display: block;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.site-logo-text span {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.site-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    color: var(--text-soft);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    font-weight: 500;
    position: relative;
}
.nav-button { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.nav-link:hover { color: var(--ink); background: var(--soft-2); }
.nav-link.active { color: var(--ink); background: var(--soft-2); font-weight: 600; }
.nav-link.active::before {
    content: ''; position: absolute;
    left: 50%; bottom: 2px;
    transform: translateX(-50%);
    width: 18px; height: 2px;
    background: var(--brand);
    border-radius: 1px;
}
.nav-link.admin-link { color: var(--brand); }
.nav-link.admin-link:hover { background: var(--brand-soft); }
.nav-group { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.nav-dropdown-trigger > i { font-size: 12px; transition: transform .18s; }
.nav-group.open .nav-dropdown-trigger > i,
.nav-group:hover .nav-dropdown-trigger > i,
.nav-group:focus-within .nav-dropdown-trigger > i { transform: rotate(180deg); }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    min-width: 236px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 18px 44px rgba(26,22,18,0.12), 0 2px 8px rgba(26,22,18,0.06);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .16s, transform .16s;
}
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.nav-group.open .nav-dropdown-menu,
.nav-group:hover .nav-dropdown-menu,
.nav-group:focus-within .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.nav-dropdown-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border-radius: 10px;
    color: var(--text);
    transition: background .15s, color .15s;
}
.nav-dropdown-item i {
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--soft-2);
    color: var(--brand);
    font-size: 16px;
}
.nav-dropdown-item span { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.nav-dropdown-item small { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.25; }
.nav-dropdown-item:hover,
.nav-dropdown-item.active { background: var(--soft); }
.nav-dropdown-item.active span { color: var(--brand); }
.nav-dropdown-item.active i { background: var(--brand-soft); color: var(--brand-dark); }
/* 导航中的「智能体空间」引导样式：品牌色药丸 + 闪光图标 + 温和脉冲 */
/* 「智能体空间」高亮：简约——朱红文字 + ✦ 图标，去掉常亮底色块与脉冲（2026-06-19） */
.nav-link.nav-feature { color: var(--brand); font-weight: 700; }
.nav-link.nav-feature:hover { color: var(--brand-dark); background: var(--brand-soft); }
.nav-link.nav-feature.active { color: var(--brand); background: var(--brand-soft); }
.nav-link.nav-feature.active::before { display: none; }
.nav-link.nav-feature i { font-size: 12.5px; margin-right: 4px; }
.auth-area { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-user-area { display: flex; align-items: center; gap: 8px; }
.nav-user-tool {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.58);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.nav-user-tool i { font-size: 15px; color: var(--brand); }
.nav-user-tool span { line-height: 1; }
.nav-user-tool:hover,
.nav-user-tool.active {
    border-color: rgba(192,57,43,.28);
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.btn-login { padding: 8px 16px; font-size: 13.5px; color: var(--text); font-weight: 500; border-radius: var(--r-sm); background: transparent; border: 1px solid var(--line); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.btn-login:hover { color: var(--ink); border-color: var(--ink); }
.btn-register {
    padding: 9px 18px;
    font-size: 13.5px;
    color: var(--soft);
    font-weight: 600;
    border-radius: var(--r-sm);
    background: var(--ink);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    letter-spacing: -0.005em;
}
.btn-register:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-1px); }
.user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-display);
    box-shadow: 0 2px 6px rgba(150,43,31,0.22);
}

/* ===== Hero - Editorial ===== */
.hero {
    color: var(--ink);
    padding: 92px 24px 88px;
    text-align: left;
    position: relative;
    overflow: hidden;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}
.hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(rgba(26,22,18,0.045) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: 0 0;
    mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
    opacity: 0.7;
}
.hero-content {
    position: relative; z-index: 1;
    width: 100%; max-width: 1240px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.hero-meta {
    display: flex; align-items: center; gap: 16px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: 0.08em;
    margin-bottom: 28px;
    text-transform: uppercase;
}
.hero-meta::before {
    content: '';
    width: 36px; height: 1px;
    background: var(--ink);
    display: inline-block;
}
.hero-issue {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--brand);
    letter-spacing: 0.04em;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 13px;
    color: var(--text-soft);
    font-weight: 500;
    letter-spacing: 0;
}
.hero-badge-dot { width: 7px; height: 7px; background: var(--brand); border-radius: 50%; box-shadow: 0 0 0 3px rgba(192,57,43,0.16); animation: ping-dot 2.4s ease-in-out infinite; }
@keyframes ping-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.25)} }
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 6.4vw, 80px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.032em;
    margin: 28px 0 30px;
    color: var(--ink);
    max-width: 1050px;
}
.hero h1 .highlight {
    font-style: italic;
    font-weight: 800;
    color: var(--brand);
}
.hero h1 .underline {
    position: relative;
    display: inline-block;
}
/* 签名视觉：手绘红笔下划线（更轻笔触） */
.hero h1 .underline::after {
    content: ''; position: absolute; left: -1.5%; right: -1.5%; bottom: -0.17em; height: 0.32em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3,7.5 C42,3.5 84,10 124,6 C152,3.2 182,8.5 197,5.5' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    opacity: 0.85;
    z-index: -1;
}
.hero p {
    color: var(--text-soft);
    font-size: 18px;
    margin: 0 0 44px;
    line-height: 1.75;
    max-width: 600px;
    font-weight: 400;
}
.hero-btns { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.btn-hero-primary, .btn-hero-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 26px; font-size: 15px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    font-weight: 600;
    letter-spacing: -0.005em;
    font-family: var(--font-sans);
}
.btn-hero-primary { background: var(--ink); color: var(--soft); border: 1px solid var(--ink); box-shadow: 0 2px 0 var(--ink), 0 8px 20px rgba(26,22,18,0.08); }
.btn-hero-primary:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 2px 0 var(--brand-dark), 0 12px 26px rgba(192,57,43,0.18); }
.btn-hero-secondary { background: var(--paper); border: 1px solid var(--ink); color: var(--ink); }
.btn-hero-secondary:hover { background: var(--ink); color: var(--soft); transform: translateY(-1px); }
.hero-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 720px;
    margin-top: 72px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}
.hero-highlights a {
    min-width: 0; padding: 4px 26px 4px 0;
    border: none;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    transition: transform 0.2s, color 0.2s;
    position: relative;
}
.hero-highlights a:not(:last-child)::after {
    content: ''; position: absolute; top: 50%; right: -1px;
    width: 1px; height: 16px; transform: translateY(-50%);
    background: var(--brand); opacity: 0; transition: opacity 0.2s;
}
.hero-highlights a:last-child { border-right: none; }
.hero-highlights a:hover { transform: translateY(-2px); color: var(--brand); }
.hero-highlights a:hover::after { opacity: 0.4; }
.hero-highlights strong {
    display: block;
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.hero-highlights a:hover strong { color: var(--brand); }
.hero-highlights span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    letter-spacing: 0;
}
@media(max-width:900px){
    .hero { padding: 72px 20px 64px; }
    .hero p { font-size: 16.5px; }
}
@media(max-width:640px){
    .hero { padding: 52px 18px 48px; }
    .hero h1 { margin: 20px 0 22px; }
    .hero-highlights { grid-template-columns: 1fr; margin-top: 48px; padding-top: 28px; gap: 18px; }
    .hero-highlights a { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 16px; }
    .hero-highlights a:last-child { border-bottom: none; padding-bottom: 0; }
}
/* Staggered entrance — like a magazine being opened */
.hero-content > * { opacity: 0; animation: hero-reveal 0.65s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-content > .hero-meta { animation-delay: 0.05s; }
.hero-content > h1 { animation-delay: 0.18s; }
.hero-content > p { animation-delay: 0.32s; }
.hero-content > .hero-btns { animation-delay: 0.44s; }
.hero-content > .hero-highlights { animation-delay: 0.6s; }
.hero-highlights a { opacity: 0; animation: hero-reveal 0.5s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-highlights a:nth-child(1) { animation-delay: 0.7s; }
.hero-highlights a:nth-child(2) { animation-delay: 0.78s; }
.hero-highlights a:nth-child(3) { animation-delay: 0.86s; }
@keyframes hero-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-content > *, .hero-highlights a { animation: none; opacity: 1; }
}

/* ===== 首页 Hero 两栏：左文案 + 右「本周精选」推荐卡 ===== */
.hero-split .hero-content {
    grid-template-columns: 1.04fr 0.96fr;
    align-items: center;
    gap: 60px;
}
.hero-split .hero-content > .hero-text { animation-delay: 0.1s; }
.hero-split .hero-content > .hero-card { animation-delay: 0.5s; }
.hero-split .hero-values { margin-top: 44px; }

/* 价值标签（替代旧的「8+ / 14+」数字统计） */
.hero-values { display: flex; flex-wrap: wrap; max-width: 780px; margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); }
.hero-values .item { display: flex; align-items: center; gap: 12px; padding: 0 30px; border-right: 1px solid var(--line); }
.hero-values .item:first-child { padding-left: 0; }
.hero-values .item:last-child { border-right: none; }
.hero-values .item > i { font-size: 24px; color: var(--brand); }
.hero-values .item b { font-size: 16px; font-weight: 700; color: var(--ink); display: block; line-height: 1.25; letter-spacing: -0.01em; }
.hero-values .item small { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }

/* 本周精选推荐卡 */
.hero-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 30px;
    box-shadow: 0 28px 64px -26px rgba(26,22,18,0.32), 0 3px 10px rgba(26,22,18,0.06); }
.hero-card .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brand); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.hero-card-main { display: flex; gap: 16px; align-items: flex-start; }
.hero-card-icon { width: 54px; height: 54px; flex: none; border-radius: 15px; background: #e6f0ea; color: #2d6a4f;
    display: flex; align-items: center; justify-content: center; font-size: 27px; }
.hero-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--ink); margin: 0 0 7px; }
.hero-card p { font-size: 13.5px; color: var(--text-soft); line-height: 1.7; margin: 0; max-width: none; }
.hero-card-foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hero-card-foot .use { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--soft);
    padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.hero-card-foot .use:hover { background: var(--brand); transform: translateY(-1px); }
.hero-card-foot .meta { font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
    .hero-split .hero-content { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    .hero-values { margin-top: 40px; padding-top: 26px; }
    .hero-values .item { padding: 0 18px; gap: 10px; }
    .hero-values .item > i { font-size: 21px; }
    .hero-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-split .hero-content > .hero-text,
    .hero-split .hero-content > .hero-card { animation: none; opacity: 1; }
}

/* ===== Stats bar ===== */
.stats-bar { background: var(--soft); border-bottom: 1px solid var(--line); }
.stats-inner { max-width: 1240px; margin: 0 auto; padding: 28px 24px; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stat-item { padding: 8px; border-right: 1px solid var(--line); }
.stat-item:last-child { border-right: none; }
.stat-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.022em;
    line-height: 1;
}
.stat-item span {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    display: block;
    font-weight: 500;
}
@media(max-width:640px){ .stats-inner{grid-template-columns:repeat(2,1fr); padding: 22px 18px;} }

/* ===== Contact band ===== */
.contact-band {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--paper);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.contact-band::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 5px; background: var(--brand);
}
.contact-band-icon {
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 24px;
}
.contact-band-copy span {
    display: block;
    margin-bottom: 8px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}
.contact-band-copy h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.contact-band-copy p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}
.contact-band-button {
    min-width: 132px;
    border: 1px solid var(--ink);
    border-radius: var(--r-sm);
    padding: 13px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--soft);
    background: var(--ink);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    letter-spacing: -0.005em;
}
.contact-band-button:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-1px); }
@media(max-width:720px){
    .contact-band { grid-template-columns: auto minmax(0, 1fr); padding: 22px; }
    .contact-band-button { grid-column: 1 / -1; width: 100%; }
}
@media(max-width:460px){
    .contact-band { grid-template-columns: 1fr; }
    .contact-band-icon { width: 50px; height: 50px; }
}

/* ===== Feature nav ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    counter-reset: feat;
}
.feature-card {
    display: flex; align-items: flex-start; gap: 16px; min-width: 0;
    padding: 22px 24px;
    background: var(--paper);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
    position: relative;
    overflow: hidden;
    counter-increment: feat;
}
.feature-card::before {
    content: counter(feat, decimal-leading-zero);
    position: absolute;
    top: 16px; right: 20px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--subtle);
    letter-spacing: 0.08em;
    transition: color 0.2s;
}
.feature-card::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 0; background: var(--brand);
    transition: height 0.22s ease;
}
.feature-card:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.feature-card:hover::after { height: 3px; }
.feature-card:hover::before { color: var(--brand); }
.feature-icon {
    width: 46px; height: 46px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    transition: transform 0.22s;
}
.feature-card:hover .feature-icon { transform: scale(1.04); }
.feature-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.012em;
    line-height: 1.25;
}
.feature-desc { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.feature-tools { background: #e8f1fc; color: #2563eb; }
.feature-paths { background: #e8f0e9; color: #2d6a4f; }
.feature-prompts { background: #fbf2dd; color: #b08642; }
.feature-news { background: #e6eef7; color: #2c5282; }
.feature-showcase { background: #fbe8e4; color: #c0392b; }
.feature-articles { background: #e7ede8; color: #2d4a3a; }
.feature-resources { background: #f7e0db; color: #962b1f; }
@media(max-width:1080px){ .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:760px){ .feature-grid{grid-template-columns:1fr 1fr} }
@media(max-width:460px){ .feature-grid{grid-template-columns:1fr} }

/* ===== Cards ===== */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
    overflow: hidden;
    position: relative;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--ink);
}
.cards-grid { display: grid; gap: 18px; background: transparent; border: none; }
.cards-grid > .card,
.cards-grid > a.card { background: var(--paper); }
.cards-grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cards-grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cards-grid-2 { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
@media(max-width:640px){ .cards-grid-4,.cards-grid-3,.cards-grid-2{grid-template-columns:1fr} }

/* ===== Filter pills ===== */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter-pill {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    border: 1px solid var(--line);
    color: var(--text-soft);
    background: var(--paper);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
    font-weight: 500;
    font-family: var(--font-sans);
}
.filter-pill:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.filter-pill.active { background: var(--ink); border-color: var(--ink); color: var(--soft); font-weight: 600; }

/* ===== Tool card ===== */
.tool-card { padding: 24px; cursor: pointer; }
.tool-card-icon {
    width: 46px; height: 46px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
    transition: transform 0.22s;
}
.tool-card:hover .tool-card-icon { transform: scale(1.04); }
.tool-card-arrow {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--subtle);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s;
    flex-shrink: 0;
}
.tool-card:hover .tool-card-arrow { background: var(--ink); border-color: var(--ink); color: var(--soft); transform: translateX(2px); }

/* ===== Star Rating ===== */
.star-row { display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.star { font-size: 13px; color: #e2e8f0; cursor: pointer; transition: color 0.1s; line-height: 1; }
.star.on { color: #F59E0B; }
.star-count { font-size: 11px; color: #94a3b8; margin-left: 4px; }
.star-row.interactive .star:hover, .star-row.interactive .star:hover ~ .star { color: #FCD34D; }

/* ===== News card ===== */
.news-card { padding: 24px; }
.news-meta {
    font-size: 12px;
    color: var(--subtle);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
    font-weight: 500;
}
.news-source { color: var(--brand); font-weight: 600; }
.news-card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    transition: color 0.15s;
    letter-spacing: -0.015em;
}
.news-card:hover h3 { color: var(--brand); }
.news-card p { font-size: 13px; color: var(--muted); line-height: 1.75; margin-top: 12px; }

/* ===== Skeleton ===== */
.skeleton { animation: shimmer 1.8s ease-in-out infinite; background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; border-radius: 6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ===== Modal ===== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(26,22,18,0.55); z-index: 500; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.active { display: flex; }
.modal-box { background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--line); width: 100%; max-width: 460px; overflow: hidden; box-shadow: var(--shadow-lg); }
.modal-tabs { display: flex; border-bottom: 1px solid var(--line); }
.modal-tab {
    flex: 1; padding: 18px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    letter-spacing: -0.005em;
}
.modal-tab.active { color: var(--ink); border-bottom-color: var(--brand); }
.modal-body { padding: 28px; }
.form-group { margin-bottom: 18px; }
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    background: var(--paper);
    color: var(--ink);
}
.form-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26,22,18,0.06); }
.form-input::placeholder { color: var(--subtle); }
.form-error {
    font-size: 12.5px;
    color: var(--danger);
    background: var(--brand-soft);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    margin-top: 10px;
    border: 1px solid #f5cfc8;
    border-left: 3px solid var(--brand);
}
.form-success {
    font-size: 12.5px;
    color: #1a7d4f;
    background: #eaf6ef;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    margin-top: 10px;
    border: 1px solid #bfe3cd;
    border-left: 3px solid #2e9e63;
}
.btn-primary {
    width: 100%; padding: 14px;
    background: var(--ink);
    color: var(--soft);
    font-size: 14.5px;
    font-weight: 600;
    border-radius: var(--r-sm);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    font-family: var(--font-sans);
    letter-spacing: -0.005em;
}
.btn-primary:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.modal-footer-text { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 18px; }
.modal-footer-text button { color: var(--brand); background: none; border: none; cursor: pointer; font-weight: 600; font-family: inherit; }
.modal-footer-text button:hover { text-decoration: underline; }

/* ===== Toast ===== */
.toast {
    position: fixed; bottom: 32px; left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--ink); color: var(--soft);
    font-size: 13.5px; padding: 12px 22px;
    border-radius: 999px;
    opacity: 0; transition: opacity 0.25s, transform 0.25s;
    z-index: 1000; pointer-events: none; white-space: nowrap;
    box-shadow: var(--shadow-md);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Welcome overlay ===== */
.welcome-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(26,22,18,0.6);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; transition: opacity 0.32s ease;
}
.welcome-overlay.show { opacity: 1; }
.welcome-overlay.settling { background: rgba(250,247,240,0.96); }
.welcome-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 48px 44px 40px;
    text-align: center;
    max-width: 400px; width: 100%;
    box-shadow: 0 40px 100px rgba(26,22,18,0.4);
    transform: translateY(16px) scale(0.96); opacity: 0;
    transition: transform 0.42s cubic-bezier(.2,.8,.2,1), opacity 0.42s ease;
    position: relative;
}
.welcome-overlay.show .welcome-card { transform: translateY(0) scale(1); opacity: 1; }
.welcome-avatar {
    width: 64px; height: 64px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--soft);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 28px; font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: 0 6px 18px rgba(150,43,31,0.28);
}
.welcome-greeting {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0;
    font-weight: 500;
    margin-bottom: 8px;
}
.welcome-name {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.022em;
    line-height: 1.15;
    margin-bottom: 14px;
}
.welcome-subtitle { font-size: 14px; color: var(--text-soft); line-height: 1.7; margin-bottom: 28px; }
.welcome-spinner { display: inline-flex; gap: 7px; }
.welcome-spinner span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.3;
    animation: welcome-pulse 1.2s ease-in-out infinite;
}
.welcome-spinner span:nth-child(2) { animation-delay: 0.15s; }
.welcome-spinner span:nth-child(3) { animation-delay: 0.3s; }
@keyframes welcome-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.4); }
}

/* ===== Admin ===== */
.admin-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid #f5cfc8;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
    text-align: left;
    padding: 13px 16px;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
    font-size: 12.5px;
    letter-spacing: 0;
}
td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--text); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--soft); }

/* ===== Announcement ===== */
.announcement {
    background: var(--brand-soft);
    border: 1px solid #f5cfc8;
    border-left: 4px solid var(--brand);
    padding: 16px 22px;
    border-radius: var(--r-md);
    margin-bottom: 14px;
}
.announcement strong {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.announcement p { font-size: 13.5px; color: var(--text-soft); margin-top: 5px; line-height: 1.7; }

/* ===== Breadcrumb ===== */
.breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px;
    color: var(--subtle);
    margin-bottom: 28px;
}
.breadcrumb a { color: var(--muted); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--brand); }

/* ===== Prompt card ===== */
.prompt-card { padding: 24px; }
.prompt-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.prompt-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prompt-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.copy-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap; flex-shrink: 0;
    letter-spacing: 0;
}
.copy-btn:hover { background: var(--ink); color: var(--soft); border-color: var(--ink); }
.copy-btn.copied { color: var(--soft); background: var(--brand); border-color: var(--brand); }

/* ===== Community badge ===== */
.badge-community { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: #ecfdf5; color: #15803d; border: 1px solid #bbf7d0; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.badge-pending { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: #fffbeb; color: #92400e; border: 1px solid #fde68a; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }

/* ===== Like button ===== */
.like-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px;
    font-size: 12.5px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.like-btn:hover { border-color: var(--brand); color: var(--brand); }
.like-btn.liked { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ===== Path card ===== */
.path-card { overflow: hidden; }
.path-card-head {
    min-height: 150px;
    padding: 28px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}
.path-card-head::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 55% 50% at 92% 12%, rgba(255,255,255,0.14), transparent 70%),
        radial-gradient(ellipse 40% 50% at 5% 95%, rgba(255,255,255,0.06), transparent 70%);
}
.path-card-head > * { position: relative; }
.path-card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    color: white;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--r-sm);
}
.path-card-head h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: white;
}
.path-card-head p { margin: 0; color: rgba(255,255,255,0.78); font-size: 13.5px; line-height: 1.65; }
.path-card-meta {
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    display: flex; align-items: center; gap: 6px;
}
.path-card-meta span {
    background: rgba(255,255,255,0.18);
    color: white;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 4px;
    border: 1px solid rgba(255,255,255,0.16);
    font-weight: 500;
}
.path-card-body { padding: 22px 28px 26px; }

/* ===== Showcase card ===== */
.showcase-card { padding: 0; overflow: hidden; }
.showcase-card-img {
    height: 170px;
    background: var(--soft-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    color: var(--brand);
    position: relative; overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.showcase-card-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.showcase-card-body { padding: 22px; }
.showcase-tag {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0;
}

/* ===== Subscribe widget ===== */
.subscribe-section {
    background: var(--ink);
    border-radius: var(--r-lg);
    padding: 64px 48px;
    text-align: left;
    color: var(--soft);
    position: relative;
    overflow: hidden;
}
.subscribe-section::before {
    content: '内容更新登记';
    position: absolute;
    top: 28px; right: 36px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--brand);
    letter-spacing: 0;
    pointer-events: none;
}
.subscribe-section::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent 75%);
    opacity: 0.6;
    pointer-events: none;
}
.subscribe-section > * { position: relative; }
.subscribe-section h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--soft);
    max-width: 600px;
}
.subscribe-section p {
    color: rgba(250,247,240,0.65);
    font-size: 15px;
    margin-bottom: 36px;
    line-height: 1.75;
    max-width: 520px;
}
.subscribe-form { display: flex; gap: 10px; max-width: 520px; flex-wrap: wrap; }
.subscribe-input {
    flex: 1;
    min-width: 200px;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-family: inherit;
    background: rgba(250,247,240,0.08);
    color: var(--soft);
    border: 1px solid rgba(250,247,240,0.18);
    transition: border-color 0.15s, background 0.15s;
}
.subscribe-input::placeholder { color: rgba(250,247,240,0.45); }
.subscribe-input:focus { outline: none; border-color: var(--brand); background: rgba(250,247,240,0.14); }
.subscribe-btn {
    padding: 14px 28px;
    background: var(--brand);
    color: var(--soft);
    font-weight: 600;
    font-size: 14.5px;
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    font-family: inherit;
    white-space: nowrap;
    letter-spacing: 0;
}
.subscribe-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); transform: translateY(-1px); }

/* ===== Footer ===== */
.site-footer { background: var(--ink); color: var(--soft); padding: 72px 24px 32px; margin-top: 96px; position: relative; }
.site-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--brand);
}
.footer-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 56px; margin-bottom: 56px; }
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; gap: 40px;} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr; gap: 36px;} }
.footer-brand p { font-size: 13.5px; color: rgba(250,247,240,0.5); margin-top: 16px; line-height: 1.8; max-width: 280px; }
.footer-col h4 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 16px;
    letter-spacing: 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
    font-size: 13.5px;
    color: rgba(250,247,240,0.7);
    transition: color 0.15s;
    font-family: var(--font-sans);
}
.footer-col a:hover { color: var(--soft); }
.footer-link-button { padding: 0; border: 0; background: transparent; color: rgba(250,247,240,0.7); font: inherit; font-size: 13.5px; cursor: pointer; transition: color 0.15s; text-align: left; }
.footer-link-button:hover { color: var(--soft); }
.footer-bottom {
    max-width: 1240px; margin: 0 auto;
    padding-top: 28px;
    border-top: 1px solid rgba(250,247,240,0.08);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12.5px; color: rgba(250,247,240,0.4);
    flex-wrap: wrap; gap: 8px;
}

/* ===== 精选文章 ===== */
.article-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.article-cover {
    height: 150px;
    display: flex; align-items: center; justify-content: center;
    font-size: 56px;
    position: relative; overflow: hidden; flex-shrink: 0;
    border-bottom: 1px solid var(--line);
    filter: saturate(0.85);
}
.article-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(26,22,18,0.12)); }
.article-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.article-cat-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0;
}
.article-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.02em;
}
.article-summary { font-size: 13.5px; color: var(--muted); line-height: 1.75; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-meta {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 12px; color: var(--subtle);
    font-weight: 500;
}
.article-external-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; background: var(--soft-2); color: var(--muted); border-radius: 999px; font-size: 11px; }
/* Article detail reading view */
.prose {
    max-width: 720px; margin: 0 auto;
    font-family: var(--font-sans);
    font-size: 16.5px; line-height: 1.85;
    color: var(--text);
}
.prose h1 {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ink);
    margin: 1.6em 0 0.5em;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.prose h2 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ink);
    margin: 1.6em 0 0.6em;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    letter-spacing: -0.02em;
}
.prose h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
    margin: 1.4em 0 0.5em;
    letter-spacing: -0.015em;
}
.prose p { margin: 1em 0; }
.prose ul, .prose ol { padding-left: 1.6em; margin: 1em 0; }
.prose li { margin: 0.55em 0; }
.prose blockquote {
    border: none;
    border-left: 4px solid var(--brand);
    padding: 6px 0 6px 24px;
    background: transparent;
    margin: 1.4em 0;
    border-radius: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.15em;
    font-style: italic;
    line-height: 1.6;
}
.prose code {
    background: var(--soft-2);
    padding: 2px 8px;
    border-radius: 0;
    font-size: 14px;
    font-family: var(--font-mono);
    color: var(--brand);
    border: 1px solid var(--line);
}
.prose pre {
    background: var(--ink);
    color: var(--soft);
    padding: 22px;
    border-radius: 0;
    overflow-x: auto;
    margin: 1.4em 0;
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.7;
}
.prose pre code { background: none; color: inherit; padding: 0; font-size: 13.5px; border: none; }
.prose a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.prose a:hover { color: var(--brand); }
.prose img { max-width: 100%; border-radius: 0; border: 1px solid var(--line); margin: 1.4em 0; }
.prose hr {
    border: none;
    margin: 2.5em auto;
    text-align: center;
    height: 1em;
}
.prose hr::before {
    content: '· · ·';
    color: var(--brand);
    font-size: 1.3em;
    letter-spacing: 0.3em;
}
.prose strong { color: var(--ink); font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; border: 1px solid var(--line); }
.prose th, .prose td { padding: 12px 16px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--soft); font-weight: 600; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }

/* ===== Resources page ===== */
.resources-mobile-nav { display: none; border-top: 1px solid var(--line); overflow-x: auto; }
.resources-mobile-nav > div { display: flex; padding: 0 18px; gap: 2px; min-width: max-content; }
.resource-page { max-width: 1240px; margin: 0 auto; padding: 56px 24px 88px; }
.resource-hero {
    min-height: 220px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    align-items: end;
    gap: 36px;
    padding: 44px 48px;
    border-radius: var(--r-lg);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.resource-hero::before {
    content: 'RESOURCE / DESIGN';
    position: absolute;
    top: 22px; right: 32px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--brand);
    letter-spacing: 0.14em;
    font-weight: 500;
}
.resource-hero > * { position: relative; }
.resource-hero h1 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(36px, 4.4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--ink);
}
.resource-hero p { margin: 0; max-width: 680px; color: var(--text-soft); line-height: 1.75; font-size: 15px; }
.resource-search { position: relative; align-self: end; }
.resource-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); z-index: 1; }
.resource-search input {
    width: 100%;
    padding: 13px 16px 13px 42px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.resource-search input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26,22,18,0.06); }
.resource-content { display: flex; flex-direction: column; gap: 64px; margin-top: 64px; }
.resource-section { content-visibility: auto; contain-intrinsic-size: 360px; }
.resource-section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.resource-section-title span {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.resource-section-title h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-weight: 700;
}
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.resource-card {
    display: flex;
    min-height: 172px;
    flex-direction: column;
    padding: 22px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: inherit;
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.resource-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--shadow-md); }
.resource-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 14px; }
.resource-card-top > i { color: var(--brand); font-size: 20px; flex-shrink: 0; }
.resource-card-top h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--ink);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.resource-card-top span { margin-left: auto; color: var(--subtle); font-size: 14px; }
.resource-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.75; flex: 1; }
.resource-domain {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--subtle); font-size: 11px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-weight: 500;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
}
.resource-empty { text-align: center; padding: 70px 20px; color: var(--subtle); }
.resource-empty i { display: block; font-size: 42px; margin-bottom: 12px; }
.compact-footer { margin-top: 0; padding: 28px 24px; }

/* ===== Floating assistant and contact ===== */
.assistant-launcher {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 420;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px 11px 13px;
    border: 1px solid rgba(26,22,18,0.10);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(26,22,18,0.05), 0 12px 28px -10px rgba(26,22,18,0.20);
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
}
.assistant-launcher:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 4px 8px rgba(26,22,18,0.06), 0 18px 36px -12px rgba(26,22,18,0.26); }
.assistant-launcher > i { font-size: 18px; color: var(--brand); }
.assistant-launcher:focus-visible,
.assistant-send:focus-visible,
.assistant-panel button:focus-visible,
.contact-band-button:focus-visible,
.contact-modal button:focus-visible,
.contact-modal input:focus-visible,
.contact-modal textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}
.assistant-panel {
    position: fixed;
    right: 24px;
    top: 88px;
    bottom: 24px;
    z-index: 430;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    transform: translateX(calc(100% + 48px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}
.assistant-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.assistant-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    color: white;
    background: var(--ink);
}
.assistant-mini {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 11px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    display: grid; place-items: center;
    color: #fff; font-size: 19px;
}
.assistant-panel-title { font-weight: 800; line-height: 1.2; }
.assistant-panel-subtitle { font-size: 12px; color: rgba(255,255,255,0.72); margin-top: 3px; }
.assistant-head-actions { margin-left: auto; display: flex; gap: 6px; }
.assistant-icon-button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 8px;
    color: white;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
}
.assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8fafc;
}
.assistant-message { display: flex; margin-bottom: 12px; }
.assistant-message.user { justify-content: flex-end; }
.assistant-bubble {
    max-width: 86%;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.75;
    color: #334155;
    background: white;
    border: 1px solid #eef2f7;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.assistant-message.user .assistant-bubble {
    background: var(--ink);
    color: white;
    border-color: transparent;
}
.assistant-bubble a { color: var(--brand); font-weight: 600; }
.assistant-message.user .assistant-bubble a { color: #c7d2fe; }
.assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px;
    background: var(--soft);
}
.assistant-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px;
    background: var(--paper);
    color: var(--text-soft);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.assistant-chip:hover { border-color: var(--ink); color: var(--ink); }
.assistant-composer {
    display: flex;
    gap: 8px;
    padding: 14px;
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
}
.assistant-input {
    flex: 1;
    min-width: 0;
    resize: none;
    height: 44px;
    max-height: 110px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    color: var(--ink);
}
.assistant-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,18,32,0.06); }
.assistant-send {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--ink);
    color: white;
    cursor: pointer;
    transition: background 0.15s;
}
.assistant-send:hover { background: var(--ink-2); }
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(11,18,32,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.contact-modal.open { display: flex; }
.contact-box {
    width: min(540px, 100%);
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.contact-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--soft);
    border-bottom: 1px solid var(--line-soft);
}
.contact-head h3 { margin: 0; font-size: 18px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.contact-head p { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); }
.contact-close { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; transition: color 0.15s; }
.contact-close:hover { color: var(--ink); }
.contact-form { padding: 24px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; letter-spacing: -0.005em; }
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--ink);
    outline: none;
    background: var(--paper);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,18,32,0.06); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.contact-secondary,
.contact-submit {
    border: 0;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s, transform 0.15s;
    letter-spacing: -0.005em;
}
.contact-secondary { background: var(--tint); color: var(--text); border: 1px solid var(--line); }
.contact-secondary:hover { background: var(--line-soft); }
.contact-submit { background: var(--ink); color: white; }
.contact-submit:hover { background: var(--ink-2); transform: translateY(-1px); }
.contact-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.contact-note { margin: 14px 0 0; color: var(--subtle); font-size: 12.5px; line-height: 1.6; }
@media(max-width:640px){
    .assistant-launcher { right: 14px; bottom: 14px; width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: 50%; }
    .assistant-launcher > span { display: none; }
    .assistant-panel { inset: auto 10px 10px 10px; top: 78px; width: auto; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-actions { flex-direction: column-reverse; }
    .contact-secondary, .contact-submit { width: 100%; }
}
@media(max-width:900px){
    .resources-desktop-nav { display: none; }
    .resources-mobile-nav { display: block; }
    .resource-hero { grid-template-columns: 1fr; padding: 30px; }
}
@media(max-width:560px){
    .resource-page { padding: 28px 14px 48px; }
    .resource-hero { padding: 24px; }
    .resource-hero h1 { font-size: 32px; }
}

/* ===== Lightweight color utilities ===== */
.text-blue-500, .text-blue-600 { color: #2563eb; }
.text-pink-500 { color: #db2777; }
.text-emerald-500 { color: #059669; }
.text-green-500 { color: #16a34a; }
.text-purple-500 { color: #7c3aed; }
.text-violet-500 { color: #7c3aed; }
.text-orange-400, .text-orange-500 { color: #ea580c; }
.text-amber-500, .text-yellow-500 { color: #d97706; }
.text-rose-500 { color: #e11d48; }
.text-indigo-500 { color: #4f46e5; }
.text-cyan-500 { color: #0891b2; }
.text-sky-500 { color: #0284c7; }
.text-teal-500 { color: #0f766e; }
.bg-blue-50 { background: #eff6ff; }
.bg-pink-50 { background: #fdf2f8; }
.bg-emerald-50, .bg-green-50 { background: #ecfdf5; }
.bg-purple-50, .bg-violet-50, .bg-indigo-50 { background: #f5f3ff; }
.bg-orange-50, .bg-amber-50, .bg-yellow-50 { background: #fff7ed; }
.bg-rose-50 { background: #fff1f2; }
.bg-cyan-50, .bg-sky-50 { background: #ecfeff; }
.bg-teal-50 { background: #f0fdfa; }

/* ===== Utilities ===== */
[id] { scroll-margin-top: 80px; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }

/* ===== Hamburger drawer (replaces inline mobile nav) ===== */
.nav-hamburger {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    cursor: pointer;
    align-items: center; justify-content: center;
    color: var(--ink); font-size: 22px;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.nav-hamburger:hover { border-color: var(--ink); }
.nav-drawer {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(26,22,18,0.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.24s ease;
}
.nav-drawer.open { opacity: 1; pointer-events: auto; }
.nav-drawer-panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(380px, 90vw);
    background: var(--paper);
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(.2,.8,.2,1);
    padding: 20px 24px 28px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: -20px 0 60px rgba(26,22,18,0.18);
}
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0 18px; margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.nav-drawer-brand { display: flex; align-items: center; gap: 12px; }
.nav-drawer-brand .site-logo-icon { width: 32px; height: 32px; font-size: 14px; }
.nav-drawer-brand strong { font-size: 15px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.nav-drawer-close {
    width: 40px; height: 40px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--paper);
    color: var(--text); cursor: pointer; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}
.nav-drawer-close:hover { border-color: var(--ink); color: var(--ink); }
.nav-drawer .nav-link {
    padding: 13px 14px;
    font-size: 15px;
    border-radius: var(--r-sm);
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}
.nav-drawer .nav-link::before,
.nav-drawer .nav-link::after { display: none !important; }
.nav-drawer .nav-link:hover { background: var(--soft); color: var(--ink); }
.nav-drawer .nav-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
/* 抽屉里的「智能体空间」：轻量品牌色，不用桌面那种实心全宽红块 */
.nav-drawer .nav-link.nav-feature { background: transparent; color: var(--text); font-weight: 600; box-shadow: none; animation: none; }
.nav-drawer .nav-link.nav-feature:hover,
.nav-drawer .nav-link.nav-feature.active { background: var(--brand-soft); color: var(--brand-dark); }
.nav-drawer .nav-link.admin-link { color: var(--brand); }
.nav-drawer-kicker {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 14px 14px 6px;
    font-weight: 500;
}
@media (max-width: 1160px) {
    .site-nav { display: none !important; }
    .nav-hamburger { display: inline-flex; }
}
@media (max-width: 720px) {
    .site-header-inner { height: 60px; padding: 0 16px; gap: 10px; }
    .site-logo-icon { width: 34px; height: 34px; }
    .site-logo-text strong { font-size: 13.5px; }
    .site-logo-text span { display: none; }
    .site-nav { max-width: calc(100vw - 190px); }
    .auth-area { gap: 6px; }
    .nav-user-area { gap: 6px; }
    .nav-user-area .hm,
    .nav-user-area .admin-badge { display: none; }
    .nav-user-tool {
        width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .nav-user-tool i { font-size: 16px; }
    .nav-user-tool span { display: none; }
    .btn-login { padding: 7px 12px; font-size: 12.5px; }
    .btn-register { padding: 8px 14px; font-size: 12.5px; }
    .user-avatar { width: 32px; height: 32px; font-size: 13px; }
    /* section header layout breaks when h2 and "查看全部" both want a line */
    .section-header-row { align-items: flex-start; flex-direction: column; gap: 12px; }
    .section-header { padding-top: 32px; margin-bottom: 28px; }
    .section-header.compact { margin-bottom: 18px; }
    /* contact band stacks vertically on phone */
    .contact-band { padding: 22px; gap: 16px; }
    /* subscribe section tighter */
    .subscribe-section { padding: 44px 22px; }
    .subscribe-section::before { display: none; }
    /* announcement label badge */
    .announcement { padding: 14px 16px; }
}
@media (max-width: 560px) {
    .site-logo-text { display: none; }
    .hero { padding: 56px 18px 48px; }
    .hero h1 { font-size: 38px; letter-spacing: -0.025em; }
    .hero p { font-size: 15.5px; margin-bottom: 28px; }
    .hero-btns { gap: 10px; }
    .btn-hero-primary, .btn-hero-secondary { padding: 13px 22px; font-size: 14px; }
    .home-main { padding: 36px 18px 60px; gap: 48px; }
    .feature-card { padding: 18px 20px; }
    .feature-card::before { top: 14px; right: 18px; font-size: 10px; }
    .stat-item strong { font-size: 1.55rem; }
    /* classroom-tools control bar wraps onto multiple rows nicely */
    .ct-stage-bar { gap: 8px; padding-bottom: 14px; margin-bottom: 18px; }
    .ct-stage-title { font-size: 18px; flex-basis: 100%; order: -1; }
}

@media (max-width: 560px) {
    /* 登录弹层内可切换注册；窄屏优先保留登录与完整导航入口。 */
    .auth-area > .btn-register { display: none; }
}

/* ============================================================
   2026-06-04 · Refinement layer — motion, spacing & polish
   Self-contained overrides; safe to revert as a block.
   ============================================================ */
:root {
    --ease-soft: cubic-bezier(.2,.7,.2,1);
    --ease-spring: cubic-bezier(.34,1.4,.5,1);
    --shadow-soft: 0 18px 44px rgba(26,22,18,0.10), 0 2px 8px rgba(26,22,18,0.04);
}

/* --- More cohesive, softer card motion across the whole site --- */
.card, .feature-card, .tool-card, .news-card {
    transition: transform .34s var(--ease-soft),
                box-shadow .34s var(--ease-soft),
                border-color .34s var(--ease-soft);
    will-change: transform;
}
.card:hover, .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.feature-card:hover .feature-icon { transform: rotate(-4deg) scale(1.08); }

/* --- Springy, tactile press feedback on primary actions --- */
.btn-hero-primary, .btn-hero-secondary, .btn-register, .btn-login, .filter-pill {
    transition: transform .2s var(--ease-spring), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-hero-primary:active, .btn-hero-secondary:active,
.btn-register:active, .btn-login:active, .filter-pill:active { transform: translateY(1px) scale(.98); }

/* --- A touch more air: grander, more editorial spacing --- */
.hero { padding-top: 108px; }
.hero-highlights { margin-top: 80px; }
.hero-highlights strong { font-size: 42px; }
.home-main { gap: 108px; }
@media (max-width: 900px) { .hero { padding-top: 76px; } .home-main { gap: 72px; } }

/* --- Smoother sticky-header transition on scroll --- */
.site-header { transition: box-shadow .3s var(--ease-soft), background .3s var(--ease-soft); }

/* ============================================================
   Scroll-reveal — pure CSS, progressive enhancement.
   Browsers without scroll-driven animations simply show content
   normally (no JS, no per-page changes, fully accessible).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .home-section,
        .cards-grid > .card,
        .cards-grid > a.card,
        .feature-grid > .feature-card,
        .reveal-on-scroll {
            animation: reveal-rise linear both;
            animation-timeline: view();
            animation-range: entry 2% cover 18%;
        }
        @keyframes reveal-rise {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }
}

/* ============================================================
   2026-06-16 · 「加浓」增强层（Direction ①）
   目标：增强纵深、提高图标与文字对比，解决「平、寡淡」。
   不改结构、不换美学；自成一块，可整体删除回退。
   ============================================================ */

/* 1) 卡片精修规范（2026-06-16 · A：极淡描边 + 分层柔影，全站统一）
   静止近乎贴在纸上，hover 才柔和浮起；圆角 16 / 内距 22 统一。
   .agent-card / .wb-card / .resource-card 在各自页面里同步到这套值。 */
.card, .feature-card, .tool-card, .news-card, .resource-card {
    border-radius: 16px;
    border-color: rgba(26,22,18,0.08);
    box-shadow: 0 1px 2px rgba(26,22,18,0.05);
}
.feature-card, .tool-card, .news-card, .resource-card { padding: 22px; }
.card:hover, .feature-card:hover, .tool-card:hover, .news-card:hover, .resource-card:hover {
    transform: translateY(-3px);
    border-color: rgba(26,22,18,0.13);
    box-shadow: 0 2px 4px rgba(26,22,18,0.04), 0 10px 20px -10px rgba(26,22,18,0.10), 0 22px 44px -20px rgba(26,22,18,0.16);
}

/* 2) 功能卡图标块：做大、做实、上饱和色 + 白图标（配色由各卡内联 --c 决定） */
.feature-icon {
    width: 54px; height: 54px; font-size: 26px;
    background: var(--c, var(--brand));
    color: #fff;
    box-shadow: none;   /* 精修：去掉彩色辉光 */
}
.feature-title { font-weight: 800; }
.feature-desc { color: var(--text); }
/* 任务导向入口：6 张卡走 3 列（2×3），比 4 列更聚焦 */
.feature-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .feature-grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .feature-grid.cols-3 { grid-template-columns: 1fr; } }

/* 3) 工具卡图标块：淡底 → 实心、图标转白。配色收敛到一组「暖而克制」的编辑色
   （藏蓝/赭石/墨绿/黛青/酒玫/砖玫/黛紫…全部偏深偏稳），贴合纸墨风、避免亮色彩虹感。 */
.tool-card .tool-card-icon { color: #fff; }
.tool-card-icon.bg-blue-50 { background: #2c5282; }   /* 藏蓝 */
.tool-card-icon.bg-indigo-50 { background: #3a466e; } /* 深靛 */
.tool-card-icon.bg-cyan-50, .tool-card-icon.bg-sky-50 { background: #2f6a72; } /* 深青 */
.tool-card-icon.bg-teal-50 { background: #356b66; }   /* 黛青 */
.tool-card-icon.bg-emerald-50, .tool-card-icon.bg-green-50 { background: #2d6a4f; } /* 墨绿 */
.tool-card-icon.bg-orange-50, .tool-card-icon.bg-amber-50, .tool-card-icon.bg-yellow-50 { background: #b08642; } /* 赭石 */
.tool-card-icon.bg-rose-50 { background: #a23a3a; }   /* 砖玫 */
.tool-card-icon.bg-pink-50 { background: #9d4e63; }   /* 酒玫 */
.tool-card-icon.bg-purple-50, .tool-card-icon.bg-violet-50 { background: #6a4a6b; } /* 黛紫 */

/* ============================================================
   智能体卡片（共享：智能体空间 agents.html + 首页橱窗 index.html）
   精修规范同款。2026-06-17 从 agents.html 内联移到此处，供首页复用。
   ============================================================ */
.agent-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--paper); border: 1px solid rgba(26,22,18,0.08); border-radius: 16px; box-shadow: 0 1px 2px rgba(26,22,18,0.05); cursor: pointer; transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s cubic-bezier(.2,.7,.2,1), border-color .32s cubic-bezier(.2,.7,.2,1); overflow: hidden; text-decoration: none; }
.agent-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cat-color, var(--brand)); opacity: 0; transition: opacity .18s; }
.agent-card:hover { transform: translateY(-3px); border-color: rgba(26,22,18,0.13); box-shadow: 0 2px 4px rgba(26,22,18,0.04), 0 10px 20px -10px rgba(26,22,18,0.10), 0 22px 44px -20px rgba(26,22,18,0.16); }
.agent-card:hover::before { opacity: 1; }
.agent-card-top { display: flex; align-items: center; gap: 13px; }
.agent-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 23px; flex-shrink: 0; }
.agent-card-name { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.agent-card-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--cat-color, var(--muted)); }
.agent-card-desc { font-size: 13px; line-height: 1.7; color: var(--text-soft); flex: 1; }
.agent-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.agent-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--soft-2); color: var(--muted); font-weight: 500; }
.agent-chip.chat { background: var(--brand-soft); color: var(--brand-dark); }
.agent-go { font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; transition: gap .15s, color .15s; }
.agent-card:hover .agent-go { color: var(--cat-color, var(--brand)); gap: 9px; }

/* ===== 首页智能体橱窗 + 配套资源 mini 卡 ===== */
.home-feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .home-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-feat-grid { grid-template-columns: 1fr; } }
.home-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 920px) { .home-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .home-cat-grid { grid-template-columns: 1fr 1fr; } }
.cat-sub { font-family: var(--font-mono); font-size: 11px; color: var(--subtle); letter-spacing: 0.1em; text-transform: uppercase; margin: 30px 0 14px; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .mini-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .mini-grid { grid-template-columns: 1fr; } }
.mini { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--paper); border: 1px solid rgba(26,22,18,0.08); border-radius: 16px; box-shadow: 0 1px 2px rgba(26,22,18,0.05); text-decoration: none; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.mini:hover { transform: translateY(-3px); border-color: rgba(26,22,18,0.13); box-shadow: 0 2px 4px rgba(26,22,18,0.04), 0 10px 20px -10px rgba(26,22,18,0.10), 0 22px 44px -20px rgba(26,22,18,0.16); }
.mini-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.mini b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.mini span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.mini.cat-card { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 116px; }

/* ===== Hero 右侧「AI 智能体 · 5 大场景」面板 ===== */
.hc-scenes { display: flex; flex-direction: column; gap: 2px; }
.hc-scene { display: flex; align-items: center; gap: 11px; padding: 11px 6px; border-radius: 10px; text-decoration: none; transition: background .15s; }
.hc-scene:hover { background: var(--soft); }
.hc-scene .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hc-scene .nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.hc-scene .n { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.hc-scene + .hc-scene { border-top: 1px solid var(--line-soft); }

/* ============================================================
   签名视觉（2026-06-17 · 红笔 / 印章，克制·更轻）
   ============================================================ */
/* 印章徽记：朱砂双线，盖在「精选」卡角上 */
.seal { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--brand); border-radius: 8px;
    color: var(--brand); font-weight: 700; font-size: 13px; letter-spacing: 1px; position: relative; transform: rotate(-7deg);
    font-family: var(--font-sans); line-height: 1; }
.seal::before { content: ''; position: absolute; inset: 3px; border: 1px solid var(--brand); border-radius: 5px; opacity: .4; }
.seal.sm { width: 36px; height: 36px; font-size: 12px; }
.card-seal { position: absolute; top: 13px; right: 13px; z-index: 2; }

/* ============================================================
   2026-07-12 · 现代教研工作台视觉基础层
   科学感来自结构、状态与证据，不使用装饰性科技效果。
   ============================================================ */
:root {
    --ink: #17212b;
    --ink-2: #24313d;
    --text: #3d4a57;
    --text-soft: #53616e;
    --muted: #667482;
    --subtle: #687785;

    --paper: #ffffff;
    --soft: #f3f6f8;
    --soft-2: #edf2f5;
    --tint: #e7edf1;
    --line: #d7e0e6;
    --line-soft: #e7edf1;

    --brand: #b64235;
    --brand-dark: #8f3129;
    --brand-soft: #f7eae8;

    --ink-green: #287a68;
    --ochre: #a76f18;
    --navy: #17212b;
    --blue: #245b78;
    --indigo: #3c6380;
    --teal: #287a68;
    --amber: #a76f18;
    --rose: #a24b45;
    --success: #287a68;
    --warning: #a76f18;
    --danger: #a24b45;

    --r-sm: 7px;
    --r-md: 9px;
    --r-lg: 12px;
    --r-xl: 16px;

    --shadow-xs: 0 1px 2px rgba(23,33,43,.04);
    --shadow-sm: 0 4px 14px -12px rgba(23,33,43,.32);
    --shadow-md: 0 14px 30px -26px rgba(23,33,43,.5);
    --shadow-lg: 0 26px 56px -34px rgba(23,33,43,.62);
    --shadow-soft: 0 12px 28px -24px rgba(23,33,43,.5);
}

body { background: var(--soft); color: var(--text); }
body::before { display: none; }
::selection { background: rgba(36,91,120,.18); color: var(--ink); }
.skip-link {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 1000;
    padding: 9px 13px;
    border-radius: 7px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform .15s;
}
.skip-link:focus { transform: translateY(0); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(36,91,120,.28);
    outline-offset: 2px;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.site-header {
    background: rgba(243,246,248,.94);
    border-bottom-color: var(--line);
    backdrop-filter: saturate(130%) blur(16px);
    -webkit-backdrop-filter: saturate(130%) blur(16px);
}
.site-logo-icon {
    background: var(--brand);
    border-radius: 8px;
    box-shadow: none;
}
.site-logo-icon::after { display: none; }
.site-logo-text strong { color: var(--ink); font-weight: 700; }
.site-logo-text span { color: var(--muted); letter-spacing: .035em; }
.nav-link { border-radius: 7px; color: var(--text-soft); }
.nav-link:hover,
.nav-link.active { background: #e8eef2; color: var(--ink); }
.nav-link.active::before { background: var(--brand); }
.nav-link.nav-feature { color: var(--brand); font-weight: 700; }
.nav-link.nav-feature:hover,
.nav-link.nav-feature.active { color: var(--brand-dark); background: var(--brand-soft); }
.nav-dropdown-menu {
    border-color: var(--line);
    border-radius: 10px;
    box-shadow: 0 18px 42px -28px rgba(23,33,43,.55);
}
.nav-user-tool,
.btn-login,
.btn-register,
.nav-hamburger { border-radius: 8px; }
.btn-register { background: var(--brand); border-color: var(--brand); }
.btn-register:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.user-avatar { background: var(--brand); }

.hero { background: var(--soft); }
.hero::before { opacity: .25; }
.hero h1 .highlight,
.hero h1 .underline { color: var(--brand); font-style: normal; }

.card,
.feature-card,
.tool-card,
.news-card,
.resource-card,
.agent-card {
    border-color: var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
    will-change: auto;
}
.feature-card,
.tool-card,
.news-card,
.resource-card { padding: 20px; }
.card:hover,
.feature-card:hover,
.tool-card:hover,
.news-card:hover,
.resource-card:hover,
.agent-card:hover {
    transform: translateY(-1px);
    border-color: #bdcbd4;
    box-shadow: 0 10px 24px -22px rgba(23,33,43,.52);
}
.feature-card:hover .feature-icon { transform: none; }
.agent-card {
    width: 100%;
    gap: 11px;
    padding: 19px;
    color: inherit;
    text-align: left;
    font: inherit;
}
.agent-card::before { width: 2px; }
.agent-ico { width: 42px; height: 42px; border-radius: 8px; font-size: 21px; }
.agent-card-name { color: var(--ink); font-weight: 720; }
.agent-card-desc { color: var(--text-soft); }
.agent-chip { border-radius: 6px; background: var(--soft-2); color: var(--muted); }
.agent-chip.chat { background: var(--brand-soft); color: var(--brand-dark); }
.agent-state {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--paper);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
}
.agent-state.recommended { border-color: #d9b8b3; background: var(--brand-soft); color: var(--brand); }
.filter-pill { border-radius: 7px; }
.filter-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.contact-band {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: none;
}
.contact-band::before { display: none; }
.contact-band-icon {
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    box-shadow: none;
}
.contact-band-copy span { color: var(--brand); }
.contact-band-button {
    border-radius: 8px;
    background: var(--brand);
    border-color: var(--brand);
}
.contact-band-button:hover { background: var(--brand-dark); border-color: var(--brand-dark); transform: translateY(-1px); }

.subscribe-section {
    border-radius: 12px;
    background: var(--ink);
    box-shadow: none;
}
.subscribe-section::before,
.subscribe-section::after { display: none; }
.subscribe-input,
.subscribe-btn { border-radius: 8px; }
.subscribe-btn { background: var(--brand); }
.subscribe-btn:hover { background: #2f6f90; }

.announcement {
    border-color: var(--line);
    border-radius: 9px;
    background: var(--paper);
    box-shadow: none;
}
.home-main { gap: 64px; }
.section-header h2 { color: var(--ink); font-weight: 720; }
.home-section .section-header::before,
.home-section .section-header::after { display: none; }

.nav-drawer { background: rgba(23,33,43,.48); }
.nav-drawer-panel { box-shadow: -18px 0 46px -30px rgba(23,33,43,.7); }
.nav-drawer .nav-link.nav-feature { background: transparent; color: var(--text); }
.nav-drawer .nav-link.nav-feature:hover,
.nav-drawer .nav-link.nav-feature.active { background: var(--brand-soft); color: var(--brand-dark); }

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