/* =========================================================
   PS 学习教程 · 列表页样式（/ps-tutorial）— 新版结构
   ---------------------------------------------------------
   结构：Hero（左文案 + 右主视觉 + 搜索）
         → 学习路径（5 张等宽卡）
         → 浅色面板【教程分类侧栏 + 全部教程（标题/计数/排序下拉 + 卡片网格 + 分页）】
   依赖：vars.css（主题变量）/ header.css / footer.css / ads.css
   说明：文章页（1101–1211）继续使用 tutorial.css；本文件仅列表页加载。
   ========================================================= */

/* ---------------------------------------------------------
   1. 配色变量 —— 8 套封面主题（日夜各一组）+ 页面级主题
   --------------------------------------------------------- */
:root {
    --cv-blue-1:  #dbeafe; --cv-blue-2:  #bfdbfe; --cv-blue-ink:  #2563eb; --cv-blue-3:  #3b82f6;
    --cv-sky-1:   #e0f2fe; --cv-sky-2:   #bae6fd; --cv-sky-ink:   #0284c7; --cv-sky-3:   #0ea5e9;
    --cv-rose-1:  #fce7f3; --cv-rose-2:  #fbcfe8; --cv-rose-ink:  #db2777; --cv-rose-3:  #ec4899;
    --cv-violet-1:#ede9fe; --cv-violet-2:#ddd6fe; --cv-violet-ink:#7c3aed; --cv-violet-3:#8b5cf6;
    --cv-purple-1:#f3e8ff; --cv-purple-2:#e9d5ff; --cv-purple-ink:#9333ea; --cv-purple-3:#a855f7;
    --cv-mint-1:  #d1fae5; --cv-mint-2:  #a7f3d0; --cv-mint-ink:  #059669; --cv-mint-3:  #10b981;
    --cv-amber-1: #fef3c7; --cv-amber-2: #fde68a; --cv-amber-ink: #b45309; --cv-amber-3: #f59e0b;
    --cv-indigo-1:#e0e7ff; --cv-indigo-2:#c7d2fe; --cv-indigo-ink:#4f46e5; --cv-indigo-3:#6366f1;

    --tl-hero-bg:
        radial-gradient(900px 430px at 6% -22%, rgba(0, 82, 255, .14), transparent 62%),
        radial-gradient(720px 380px at 84% -14%, rgba(96, 165, 250, .20), transparent 62%),
        linear-gradient(180deg, #e7f0ff 0%, #f1f6ff 52%, var(--bg-white) 100%);
    --tl-panel-bg:   #f7f9fd;
    --tl-panel-bd:   #edf1f8;
    --tl-card-bg:    #ffffff;
    --tl-soft:       #f3f6fc;
    --tl-input-bg:   #ffffff;
    --tl-soon-bg:    #f1f5f9;
    --tl-soon-ink:   #94a3b8;
    --tl-ring:       0 1px 2px rgba(16, 24, 40, .04);
    --art-paper:     #ffffff;
    --art-card:      #ffffff;
}

[data-theme="dark"] {
    --cv-blue-1:  #16233c; --cv-blue-2:  #1d3157; --cv-blue-ink:  #7fb0ff; --cv-blue-3:  #2f6fe0;
    --cv-sky-1:   #10283a; --cv-sky-2:   #143551; --cv-sky-ink:   #67c7f5; --cv-sky-3:   #1f7fb8;
    --cv-rose-1:  #35202f; --cv-rose-2:  #452a3e; --cv-rose-ink:  #f79ac9; --cv-rose-3:  #b8407f;
    --cv-violet-1:#241f45; --cv-violet-2:#2f2960; --cv-violet-ink:#b3a1ff; --cv-violet-3:#6d55d8;
    --cv-purple-1:#2b1c45; --cv-purple-2:#3a2660; --cv-purple-ink:#cf9bff; --cv-purple-3:#8b4fd0;
    --cv-mint-1:  #102c25; --cv-mint-2:  #143b31; --cv-mint-ink:  #6ee7b7; --cv-mint-3:  #1f9b74;
    --cv-amber-1: #33270f; --cv-amber-2: #453313; --cv-amber-ink: #fcd34d; --cv-amber-3: #c07a10;
    --cv-indigo-1:#1d2144; --cv-indigo-2:#272d5e; --cv-indigo-ink:#a3b1ff; --cv-indigo-3:#5a63d8;

    --tl-hero-bg:
        radial-gradient(900px 430px at 6% -22%, rgba(90, 138, 255, .24), transparent 62%),
        radial-gradient(720px 380px at 84% -14%, rgba(138, 122, 255, .20), transparent 62%),
        linear-gradient(180deg, #121a2c 0%, #101625 52%, var(--bg-white) 100%);
    --tl-panel-bg:   #131019;
    --tl-panel-bd:   #2a2320;
    --tl-card-bg:    var(--card-bg);
    --tl-soft:       #1d1713;
    --tl-input-bg:   var(--card-bg);
    --tl-soon-bg:    #221b17;
    --tl-soon-ink:   #8a7a6a;
    --tl-ring:       0 1px 2px rgba(0, 0, 0, .4);
    --art-paper:     rgba(255, 255, 255, .20);
    --art-card:      #221c2c;
}

/* 主题工具类：同时提供封面渐变与路径卡配色 */
.cv-blue   { --cv-a: var(--cv-blue-1);   --cv-b: var(--cv-blue-2);   --cv-ink: var(--cv-blue-ink);   --cv-3: var(--cv-blue-3); }
.cv-sky    { --cv-a: var(--cv-sky-1);    --cv-b: var(--cv-sky-2);    --cv-ink: var(--cv-sky-ink);    --cv-3: var(--cv-sky-3); }
.cv-rose   { --cv-a: var(--cv-rose-1);   --cv-b: var(--cv-rose-2);   --cv-ink: var(--cv-rose-ink);   --cv-3: var(--cv-rose-3); }
.cv-violet { --cv-a: var(--cv-violet-1); --cv-b: var(--cv-violet-2); --cv-ink: var(--cv-violet-ink); --cv-3: var(--cv-violet-3); }
.cv-purple { --cv-a: var(--cv-purple-1); --cv-b: var(--cv-purple-2); --cv-ink: var(--cv-purple-ink); --cv-3: var(--cv-purple-3); }
.cv-mint   { --cv-a: var(--cv-mint-1);   --cv-b: var(--cv-mint-2);   --cv-ink: var(--cv-mint-ink);   --cv-3: var(--cv-mint-3); }
.cv-amber  { --cv-a: var(--cv-amber-1);  --cv-b: var(--cv-amber-2);  --cv-ink: var(--cv-amber-ink);  --cv-3: var(--cv-amber-3); }
.cv-indigo { --cv-a: var(--cv-indigo-1); --cv-b: var(--cv-indigo-2); --cv-ink: var(--cv-indigo-ink); --cv-3: var(--cv-indigo-3); }

/* 封面：渐变底 + 主题墨色（内联插画用 currentColor 取色）
   限定 .tut-cover，避免影响压在封面上的标签与路径卡 */
.tut-cover.cv-blue, .tut-cover.cv-sky, .tut-cover.cv-rose, .tut-cover.cv-violet,
.tut-cover.cv-purple, .tut-cover.cv-mint, .tut-cover.cv-amber, .tut-cover.cv-indigo {
    background-image: linear-gradient(135deg, var(--cv-a), var(--cv-b));
    color: var(--cv-ink);
}

/* ---------------------------------------------------------
   2. 页面外壳
   --------------------------------------------------------- */
.tut-main { flex: 1; width: 100%; }
/* 与顶部导航 / 页脚的 .container 完全同参（max-width:1200px + padding:0 20px），
   保证 Hero、学习路径、主面板的左边缘与 logo 严格对齐，全站一条竖线 */
.tut-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 仅屏幕阅读器可见（为无标题区块保留语义） */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------
   3. Hero —— 左文案 + 右主视觉
   --------------------------------------------------------- */
.tut-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 0 34px;
    background: var(--tl-hero-bg);
}
.tut-hero::before,
.tut-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: .5;
}
.tut-hero::before { width: 320px; height: 320px; left: -110px; top: -150px; background: rgba(0, 82, 255, .16); }
.tut-hero::after  { width: 280px; height: 280px; right: -80px; top: -120px; background: rgba(96, 165, 250, .22); }
[data-theme="dark"] .tut-hero::before { background: rgba(90, 138, 255, .22); }
[data-theme="dark"] .tut-hero::after  { background: rgba(138, 122, 255, .22); }

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    align-items: center;
    gap: 26px;
}

.hero-copy { max-width: 540px; }

/* H1 内含小标，保证「PS 学习教程」仍在标题里（SEO） */
.hero-title {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 4.3vw, 2.85rem);
    font-weight: 800;
    line-height: 1.26;
    letter-spacing: -1px;
    color: var(--dark);
}
.hero-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--primary);
}
.hero-sub {
    margin: 0 0 22px;
    color: var(--text-muted);
    font-size: clamp(.84rem, 1.5vw, .92rem);
    line-height: 1.8;
}

/* 主视觉 */
.hero-art {
    justify-self: end;
    width: 100%;
    max-width: 560px;
}
.hero-art svg { display: block; width: 100%; height: auto; }
/* 主视觉里的「白色卡片」元件：深色模式下随之变暗 */
.hero-art .art-card { fill: var(--art-card); }

/* ---------------------------------------------------------
   4. Hero 搜索框
   --------------------------------------------------------- */
.hero-search { max-width: 480px; }
.tut-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 14px;
    background: var(--tl-input-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--tl-ring);
    transition: border-color .25s, box-shadow .25s;
}
.tut-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 82, 255, .12); }
[data-theme="dark"] .tut-search:focus-within { box-shadow: 0 0 0 3px rgba(90, 138, 255, .18); }
.tut-search .tut-search-ic { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.tut-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-size: .88rem;
    font-family: inherit;
}
.tut-search input::placeholder { color: var(--text-muted); opacity: .85; }
.tut-search-btn {
    flex: none;
    height: 34px;
    padding: 0 22px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .25s, transform .25s;
}
.tut-search-btn:hover { background: var(--primary-deep); }
.tut-search-btn:active { transform: scale(.97); }
.tut-search-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------------------------------------------------------
   5. 学习路径 —— 5 张等宽卡
   --------------------------------------------------------- */
.path-sec { padding: 26px 0 30px; }
.path-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.path-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 156px;
    padding: 18px 18px 40px;
    border: 1px solid var(--cv-b, var(--border));
    border-radius: 18px;
    background: var(--cv-a, var(--tl-card-bg));
    text-decoration: none;
    transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .3s, border-color .3s;
}
.path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.path-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.path-card-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background-image: linear-gradient(140deg, var(--cv-3), var(--cv-ink));
    color: #fff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
}
.path-card-ic svg { width: 22px; height: 22px; }
.path-card-title { display: block; font-size: .96rem; font-weight: 750; color: var(--dark); }
.path-card-desc  { display: block; font-size: .76rem; line-height: 1.65; color: var(--text-muted); }
.path-card-arrow {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: var(--cv-ink, var(--primary));
    font-size: 1rem;
    line-height: 1;
    transition: transform .3s;
}
.path-card:hover .path-card-arrow { transform: translateX(4px); }

/* ---------------------------------------------------------
   6. 浅色面板：侧栏 + 列表
   --------------------------------------------------------- */
.tut-body { padding: 0 0 10px; background: var(--bg-white); }
.tut-panel {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--tl-panel-bd);
    border-radius: 22px;
    background: var(--tl-panel-bg);
}
/* ---------------------------------------------------------
   7. 分类侧栏
   --------------------------------------------------------- */
.tut-side {
    position: sticky;
    top: 96px;
    /* grid 项默认 min-width:auto，横向滚动分类条会撑破 1fr 轨道 */
    min-width: 0;
    /* 侧栏含广告时不超出视口高度，内容超高则在侧栏内滚动 */
    max-height: calc(100vh - 116px);
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 16px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--tl-card-bg);
    box-shadow: var(--shadow);
}
.tut-side::-webkit-scrollbar { width: 5px; }
.tut-side::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 12px;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    font-weight: 750;
    color: var(--dark);
}
.side-head svg { width: 17px; height: 17px; color: var(--primary); flex: none; }

.side-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-main);
    font-size: .85rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .22s, color .22s;
    -webkit-tap-highlight-color: transparent;
}
.side-item svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); transition: color .22s; }
.side-item .side-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .side-num { flex: none; font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.side-item:hover { background: var(--tl-soft); color: var(--primary); }
.side-item:hover svg { color: var(--primary); }
.side-item.is-active { background: var(--primary-light); color: var(--primary); font-weight: 700; }
.side-item.is-active svg { color: var(--primary); }
.side-item.is-active .side-num { color: var(--primary); opacity: .8; }
.side-item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}
.side-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ---------------------------------------------------------
   8. 列表头：标题 + 计数 + 排序下拉
   --------------------------------------------------------- */
.tut-list { min-width: 0; padding: 8px 10px 4px 0; }
.list-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.list-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.14rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.2px;
}
.list-count { font-size: .78rem; color: var(--text-muted); }

/* ---------------------------------------------------------
   9. 教程卡片
   --------------------------------------------------------- */
.tut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.tut-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--tl-card-bg);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .35s cubic-bezier(.23, 1, .32, 1), border-color .3s, box-shadow .3s;
}
a.tut-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-hover); }
a.tut-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tut-card.is-soon { cursor: default; }

/* 封面 16:9 + 分类标签压左上角 */
.tut-cover {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.tut-cover svg.tut-art {
    width: 80%;
    height: 80%;
    display: block;
    transition: transform .45s cubic-bezier(.23, 1, .32, 1);
}
.tut-card:hover .tut-cover svg.tut-art { transform: scale(1.05); }
/* 插画里的「纸白」元素：深色模式压暗，避免大面积纯白刺眼 */
.tut-cover .art-paper { fill: var(--art-paper); }

.tut-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 11px;
    border-radius: 8px;
    background: var(--cv-3, var(--primary));
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}

.tut-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    padding: 14px 16px 14px;
}
.tut-card-title {
    display: block;
    margin: 0;
    font-size: .95rem;
    font-weight: 750;
    color: var(--dark);
    line-height: 1.45;
    transition: color .25s;
}
a.tut-card:hover .tut-card-title { color: var(--primary); }
.tut-card-desc {
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 兜底：文案已统一为 60–95 字的摘要（见 _tools/article_leads.json），
       实测最长 95 字在桌面三列布局下占 4 行，这里留 5 行余量，
       日后万一有人塞进长文案也不会把卡片撑高。 */
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.7;
}
.tut-card-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    font-size: .74rem;
    color: var(--text-muted);
}
.tut-card-foot .tut-clock { width: 13px; height: 13px; flex: none; }
.tut-card-foot .tut-arrow {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-size: .95rem;
    line-height: 1;
    transition: transform .3s;
}
a.tut-card:hover .tut-card-foot .tut-arrow { transform: translateX(4px); }
.tut-soon {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--tl-soon-bg);
    color: var(--tl-soon-ink);
    font-size: .67rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   10. 空状态 / 分页 / 底部提示
   --------------------------------------------------------- */
.tut-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--tl-card-bg);
}
.tut-empty strong { display: block; margin-bottom: 8px; font-size: .96rem; color: var(--dark); }
.tut-empty .tut-empty-actions { margin-top: 14px; }
.tut-empty button {
    padding: 9px 20px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    background: transparent;
    color: var(--primary);
    font-size: .83rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s, color .25s;
}
.tut-empty button:hover { background: var(--primary); color: #fff; }

.tut-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}
.tut-page {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--tl-card-bg);
    color: var(--text-main);
    font-size: .83rem;
    font-family: inherit;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all .25s;
}
.tut-page:hover:not(:disabled):not(.is-active) { border-color: var(--primary); color: var(--primary); }
.tut-page.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0, 82, 255, .22);
}
[data-theme="dark"] .tut-page.is-active { box-shadow: 0 6px 16px rgba(90, 138, 255, .20); }
.tut-page:disabled { opacity: .4; cursor: not-allowed; }
.tut-page:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tut-page.is-gap { border-color: transparent; background: transparent; cursor: default; }

.tut-more-tip { margin: 30px 0 0; text-align: center; font-size: .85rem; color: var(--text-muted); }
.tut-more-tip a { color: var(--primary); text-decoration: none; font-weight: 600; }
.tut-more-tip a:hover { text-decoration: underline; }

/* 广告位间距（占位外观与尺寸见 ads.css） */
.tut-list .ad-slot.ad-banner { margin-bottom: 20px; }
.tut-list .ad-slot.ad-list-bottom { margin: 26px 0 0; }
/* 侧栏广告：分类卡下方，随侧栏一起吸顶，长列表下曝光最好 */
.tut-side .ad-side { margin-top: 14px; }
.tut-side .ad-label { padding: 0 10px; font-size: .7rem; }

/* ---------------------------------------------------------
   11. 响应式：电脑 / 平板 / 手机
   --------------------------------------------------------- */

/* 大屏：加宽侧栏，让 250×250 / 160×600 这类标准单元放得下
   （外壳已固定 1200px，故这里只按视口宽度分档，不再改外壳宽度） */
@media (min-width: 1180px) {
    .tut-panel { grid-template-columns: 280px minmax(0, 1fr); }
}

/* 中小屏：Hero 主视觉缩到文案下方 */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .hero-copy { max-width: 640px; }
    .hero-art { justify-self: center; max-width: 430px; }

    .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .path-card { min-height: 146px; }

    .tut-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 12px; }
    .tut-side {
        position: static;
        padding: 12px;
        max-height: none;
        overflow: visible;
    }
    /* 侧栏在这里变成横向筛选条，方图广告不再合适（改由信息流位承接） */
    .tut-side .ad-side { display: none; }
    .side-head { padding: 0 4px 10px; }
    /* 分类转横向滚动条 */
    .side-list {
        flex-direction: row;
        gap: 8px;
        margin-top: 10px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .side-item {
        width: auto;
        flex: none;
        gap: 7px;
        padding: 8px 14px;
        border: 1px solid var(--border);
        border-radius: 999px;
        white-space: nowrap;
    }
    .side-item .side-name { overflow: visible; }
    .side-item.is-active { border-color: var(--primary); }
    .side-item.is-active::before { display: none; }
    .side-list::-webkit-scrollbar { height: 5px; }
    .side-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .tut-list { padding: 4px 4px 0; }
    .tut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 平板竖向 / 大手机 */
@media (max-width: 768px) {
    .tut-hero { padding: 28px 0 26px; }
    .hero-title { letter-spacing: -.5px; }
    .hero-search { max-width: none; }
    .hero-art { max-width: 340px; }
    .path-sec { padding: 20px 0 24px; }
    .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .path-card { min-height: 138px; padding: 15px 15px 36px; }
    .tut-grid { gap: 14px; }
    .tut-card-body { padding: 12px 14px; }
    .list-head { gap: 8px; }
    .tut-page { min-width: 34px; height: 34px; }
}

/* 手机 */
@media (max-width: 560px) {
    /* 注意：不要在这里改 .tut-shell 横向内边距，
       必须与 header/footer 的 .container（padding: 0 20px）保持一致，否则左右边线对不齐 */
    .hero-art { max-width: 270px; }
    .hero-eyebrow { letter-spacing: 3px; }
    .path-grid { grid-template-columns: minmax(0, 1fr); }
    .path-card { min-height: 0; flex-direction: row; align-items: center; padding: 14px 40px 14px 14px; gap: 12px; }
    .path-card-ic { width: 40px; height: 40px; border-radius: 12px; }
    .path-card-ic svg { width: 20px; height: 20px; }
    .path-card-arrow { bottom: 50%; transform: translateY(50%); }
    .path-card:hover .path-card-arrow { transform: translateY(50%) translateX(4px); }

    .tut-grid { grid-template-columns: minmax(0, 1fr); }
    .tut-search-btn { padding: 0 18px; }
    .tut-page { min-width: 32px; height: 32px; padding: 0 8px; font-size: .79rem; }
}

/* 触摸设备：去掉 hover 位移 */
@media (hover: none) {
    .tut-card:hover, a.tut-card:hover,
    .path-card:hover { transform: none; }
    .path-card:hover .path-card-arrow { transform: none; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .tut-card, .path-card, .tut-page, .tut-cover svg.tut-art { transition: none !important; }
    .tut-card:hover, a.tut-card:hover, .path-card:hover { transform: none; }
}

/* 打印 */
@media print {
    .hero-search, .tut-side, .tut-pagination, .theme-switch { display: none !important; }
    .tut-grid { grid-template-columns: repeat(2, 1fr); }
    .tut-panel { border: 0; background: transparent; padding: 0; }
}