/* ============================================================================
 * css/styles_v2.css — 暗色编辑风 · 侧边栏导航（v2 实验方案）
 * ----------------------------------------------------------------------------
 * 布局：左侧 260px 固定侧边栏 + 右侧全屏内容流
 * 风格：深墨底 + 暖金强调 + 杂志式不对称排版 + 玻璃态卡片
 * 兼容：JS 渲染卡片复用 v1 类名，此处全部覆盖为暗色样式
 * ==========================================================================*/

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{
    font-family:var(--font-body); color:var(--text); background:var(--bg);
    line-height:1.8; font-size:15.5px; letter-spacing:.01em;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  ::selection{ background:var(--gold-soft); color:var(--gold); }
  :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

  /* 滚动条 */
  ::-webkit-scrollbar{ width:6px; }
  ::-webkit-scrollbar-track{ background:var(--ink); }
  ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--paper-faint); }

  /* ===== 滚动进度条 ===== */
  .scroll-progress{ position:fixed; top:0; left:var(--sidebar-w); right:0; height:2px; z-index:60; background:var(--line-soft); }
  .scroll-progress #progress{ height:100%; width:0; background:var(--gold); transition:width .1s linear; }

  .skip-link{ position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink); padding:10px 20px; z-index:100; }
  .skip-link:focus{ left:var(--sidebar-w); }

  /* ========================================================================
   * 侧边栏导航（v2 核心布局变化）
   * ======================================================================*/
  .nav{ position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:50;
    background:var(--ink-2); border-right:1px solid var(--line);
    display:flex; flex-direction:column; padding:32px 0 24px; overflow-y:auto; }
  .nav.scrolled{ box-shadow:none; }
  .nav .wrap{ display:flex; flex-direction:column; height:100%; padding:0; max-width:100%; }

  .logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700;
    font-size:18px; color:var(--paper); padding:0 24px 28px; border-bottom:1px solid var(--line-soft); margin-bottom:20px; }
  .logo-mark{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    background:var(--gold); color:var(--ink); border-radius:10px; font-size:16px; font-weight:800; }

  .nav-links{ display:flex; flex-direction:column; gap:1px; padding:0 12px; flex:1; }
  .nav-links a{ font-size:14px; font-weight:500; color:var(--paper-dim); padding:8px 14px; border-radius:10px;
    transition:all .25s; display:flex; align-items:center; gap:10px; position:relative; }
  .nav-links a::before{ content:''; width:3px; height:0; background:var(--gold); border-radius:2px;
    position:absolute; left:0; top:50%; transform:translateY(-50%); transition:height .25s; }
  .nav-links a:hover{ color:var(--paper); background:var(--ink-3); }
  .nav-links a:hover::before{ height:16px; }
  .nav-links a.active{ color:var(--gold); background:var(--gold-soft); font-weight:600; }
  .nav-links a.active::before{ height:20px; }

  .nav-cta{ margin:10px 16px 0; padding:10px 20px; font-size:13.5px; font-weight:600; text-align:center;
    background:var(--gold); color:var(--ink); border-radius:10px; transition:all .25s; display:block; }
  .nav-cta:hover{ background:var(--gold-deep); transform:translateY(-1px); }

  .nav-toggle{ display:none; }

  /* 侧边栏底部信息 */
  .sidebar-footer{ padding:12px 24px 20px; border-top:1px solid var(--line-soft); margin-top:8px; }
  .sidebar-footer .sf-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--paper-faint); margin-bottom:8px; }
  .sidebar-footer .sf-schedule{ font-size:13px; color:var(--paper-dim); line-height:1.6; }
  .sidebar-footer .sf-schedule b{ color:var(--gold); font-weight:600; }

  /* 移动菜单（v2 侧边栏在移动端变为抽屉） */
  .mobile-menu{ position:fixed; top:0; left:0; bottom:0; width:280px; z-index:49;
    background:var(--ink-2); padding:80px 20px 24px; transform:translateX(-100%);
    transition:transform .35s var(--ease); display:flex; flex-direction:column; gap:2px; overflow-y:auto;
    border-right:1px solid var(--line); }
  .mobile-menu.open{ transform:translateX(0); }
  .mobile-menu a{ font-size:16px; font-weight:600; color:var(--paper); padding:14px 12px;
    border-bottom:1px solid var(--line-soft); border-radius:0; }
  .mobile-menu a.active{ color:var(--gold); }
  .menu-scrim{ position:fixed; inset:0; z-index:48; background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
    opacity:0; pointer-events:none; transition:opacity .3s; }
  .menu-scrim.show{ opacity:1; pointer-events:auto; }

  /* ========================================================================
   * 主内容区（右侧）
   * ======================================================================*/
  .content{ margin-left:var(--sidebar-w); padding-top:0; min-height:100vh; }
  .wrap{ max-width:1100px; margin:0 auto; padding:0 48px; }
  .section{ padding:var(--section-pad) 0; }
  .section.alt{ background:var(--ink-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }

  /* ===== 区块标题（杂志风：左对齐 + 大编号） ===== */
  .sec-head{ max-width:100%; margin:0 0 48px; text-align:left; position:relative; }
  .sec-kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11.5px;
    font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
  .sec-kicker::before{ content:''; width:24px; height:1px; background:var(--gold); }
  .sec-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.6vw,42px);
    line-height:1.25; letter-spacing:-.01em; color:var(--paper); margin-bottom:14px; }
  .sec-line{ font-size:15px; line-height:1.85; color:var(--paper-dim); max-width:56ch; }
  .sec-line a{ color:var(--gold); border-bottom:1px solid var(--gold-soft); }
  .sec-line a:hover{ border-bottom-color:var(--gold); }

  /* ===== 按钮 ===== */
  .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600;
    font-size:14px; padding:13px 28px; border-radius:10px; cursor:pointer; border:1px solid transparent;
    transition:all .3s var(--ease); white-space:nowrap; }
  .btn .ic{ transition:transform .3s var(--ease); }
  .btn:hover .ic{ transform:translateX(3px); }
  .btn-primary{ background:var(--gold); color:var(--ink); }
  .btn-primary:hover{ background:var(--gold-deep); transform:translateY(-1px); box-shadow:0 8px 24px -6px var(--gold-glow); }
  .btn-cta-highlight{ background:transparent; color:var(--gold); border-color:var(--gold); }
  .btn-cta-highlight:hover{ background:var(--gold); color:var(--ink); transform:translateY(-1px); }
  .btn-outline{ background:transparent; color:var(--paper); border-color:var(--line); }
  .btn-outline:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft); }

  .empty-state{ text-align:center; padding:48px 20px; color:var(--paper-faint); font-size:14px; }

  .mod-foot{ text-align:left; margin-top:36px; }
  .sec-morefoot{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600;
    color:var(--gold); border-bottom:1px solid transparent; padding-bottom:2px; transition:all .25s; }
  .sec-morefoot:hover{ border-bottom-color:var(--gold); }
  .sec-morefoot em{ font-style:normal; }

  /* ========================================================================
   * Hero（杂志风：超大标题 + 不对称网格）
   * ======================================================================*/
  .hero, .hero2{ position:relative; padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,90px); overflow:hidden; }
  .hero::before, .hero2::before{ content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
    background:var(--glow-warm); pointer-events:none; }
  .hero::after, .hero2::after{ content:''; position:absolute; left:-120px; bottom:-100px; width:400px; height:400px;
    background:radial-gradient(circle, rgba(201,169,110,.06), transparent 70%); pointer-events:none; }

  .hero2-grid{ display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(40px,5vw,72px); align-items:end; position:relative; z-index:2; }
  .hero2-eyebrow, .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
    font-weight:600; letter-spacing:.1em; color:var(--gold); background:var(--gold-soft);
    padding:7px 16px; border-radius:var(--r-pill); margin-bottom:24px; }
  .hero2-eyebrow .dot, .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,169,110,.4);} 50%{ box-shadow:0 0 0 6px rgba(201,169,110,0);} }

  .hero2 h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4.8vw,56px); line-height:1.15;
    letter-spacing:-.02em; color:var(--paper); margin:0 0 24px; }
  .hero2 h1 .accent{ color:var(--gold); font-style:italic; }
  .hero2 h1 .hl{ position:relative; display:inline-block; }
  .hero2 h1 .hl::after{ content:''; position:absolute; left:0; right:0; bottom:4px; height:3px;
    background:var(--gold); opacity:.5; border-radius:2px; }
  .hero2-sub, .hero-sub{ font-size:clamp(15px,1.4vw,17px); line-height:1.9; color:var(--paper-dim); max-width:48ch; }
  .hero2-sub b, .hero-sub b{ color:var(--paper); font-weight:700; }

  .hero2-stats{ display:flex; gap:40px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
  .hero2-stat{ display:flex; flex-direction:column; gap:4px; }
  .hero2-stat .hs-num{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--paper); line-height:1; }
  .hero2-stat .hs-num em{ font-style:normal; color:var(--gold); font-size:18px; }
  .hero2-stat .hs-label{ font-size:12px; color:var(--paper-faint); letter-spacing:.03em; }

  .hero2-ctas, .hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

  .hero2-visual, .hero-visual{ position:relative; }
  .hero2-photo-simple{ position:relative; width:100%; max-width:280px; margin-left:auto;
    border-radius:16px; overflow:hidden; box-shadow:0 20px 60px -20px rgba(0,0,0,.6), 0 0 0 1px var(--line);
    border:1px solid var(--line); }
  .hero2-photo-simple img{ display:block; width:100%; height:auto; }
  .hero2-status{ position:absolute; left:-16px; bottom:20px; display:inline-flex; align-items:center; gap:8px;
    background:var(--ink-2); backdrop-filter:blur(12px); border:1px solid var(--line);
    padding:9px 16px; border-radius:10px; font-size:12.5px; font-weight:600; color:var(--paper);
    box-shadow:0 8px 24px -8px rgba(0,0,0,.5); }
  .hero2-status .live{ width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 2s infinite; }

  /* ========================================================================
   * 学习路径（杂志风：大编号 + 文字主导）
   * ======================================================================*/
  .paths2{ padding:clamp(60px,7vw,96px) 0; }
  .paths2-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
  .path-card{ position:relative; display:flex; flex-direction:column; gap:12px; padding:36px 28px 32px;
    background:transparent; border:none; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    border-radius:0; text-decoration:none; transition:all .35s var(--ease); overflow:hidden; }
  .path-card:last-child{ border-right:none; }
  .path-card::before{ content:attr(data-num); position:absolute; top:24px; right:24px; font-family:var(--font-display);
    font-size:48px; font-weight:700; color:var(--line); line-height:1; transition:color .35s; }
  .path-card:hover{ background:var(--ink-2); }
  .path-card:hover::before{ color:var(--gold-soft); }
  .path-card .p2-ic{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:17px; background:var(--gold-soft); color:var(--gold); font-weight:700; transition:all .35s; }
  .path-card:hover .p2-ic{ background:var(--gold); color:var(--ink); transform:scale(1.05); }
  .path-card h3{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--paper); margin:0; }
  .path-card p{ font-size:13.5px; line-height:1.75; color:var(--paper-dim); margin:0; }
  .path-card .p2-go{ margin-top:auto; font-size:13px; font-weight:600; color:var(--gold); display:inline-flex; align-items:center; gap:5px; }
  .path-card:hover .p2-go{ gap:9px; }

  .path-card.lead{ background:var(--gold-soft); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .path-card.lead:hover{ background:rgba(201,169,110,.18); }
  .path-card.lead p{ color:var(--paper-dim); }
  .path-card.lead h3{ color:var(--paper); }
  .path-card.lead .p2-ic{ background:var(--gold); color:var(--ink); }
  .path-card.lead .p2-go{ color:var(--gold); }
  .path-card.lead::before{ display:none; }

  /* ========================================================================
   * 关键词滚动带
   * ======================================================================*/
  .marquee2{ overflow:hidden; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--ink-2); }
  .marquee2-track{ display:flex; width:max-content; animation:mq-scroll 45s linear infinite; }
  .marquee2:hover .marquee2-track{ animation-play-state:paused; }
  .marquee2-item{ display:inline-flex; align-items:center; gap:24px; padding:0 24px; font-family:var(--font-mono);
    font-weight:500; font-size:12px; color:var(--paper-faint); white-space:nowrap; letter-spacing:.12em; text-transform:uppercase; }
  .marquee2-item::after{ content:'—'; font-size:10px; color:var(--line); }
  @keyframes mq-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){ .marquee2-track{ animation:none; } }

  /* ========================================================================
   * 直播课程中心（编辑风：左侧大编号 + 右侧内容）
   * ======================================================================*/
  .courses2{ padding:clamp(60px,7vw,96px) 0; position:relative; }
  .courses2::before{ content:''; position:absolute; inset:0 0 auto; height:1px; background:var(--shimmer-line); pointer-events:none; }
  .course-grid{ display:grid; grid-template-columns:1fr; gap:0; }
  .course-card{ display:grid; grid-template-columns:180px 1fr; gap:0; background:transparent;
    border:none; border-bottom:1px solid var(--line); border-radius:0; overflow:hidden;
    box-shadow:none; transition:all .3s var(--ease); padding:28px 0; }
  .course-card:first-child{ border-top:1px solid var(--line); }
  .course-card:hover{ background:var(--ink-2); padding-left:16px; padding-right:16px; margin:0 -16px; border-radius:12px; border-bottom-color:transparent; }
  .course-card:hover + .course-card{ border-top-color:transparent; }
  .course-card.is-latest{ position:relative; }
  .course-card.is-latest::before{ content:'最新'; position:absolute; top:28px; right:0; font-family:var(--font-mono);
    font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--ink); background:var(--gold);
    padding:3px 10px; border-radius:5px; }
  /* 无封面课程：单列布局，内容占满整行 */
  .course-card:not(:has(.cc-cover)){ grid-template-columns:1fr; }
  .course-card:not(:has(.cc-cover)) .cc-body{ padding-left:0; }

  .cc-cover{ position:relative; overflow:hidden; background:var(--ink-3); border-radius:10px; width:160px; height:100px; align-self:center; }
  .cc-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
  .cc-cover-cnt{ position:absolute; left:6px; bottom:6px; background:rgba(20,20,18,.85); color:var(--paper);
    font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:5px; }

  .cc-body{ padding:0 0 0 24px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
  .cc-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .cc-date{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--gold);
    background:var(--gold-soft); padding:4px 12px; border-radius:6px; flex-shrink:0; }
  .course-card.is-latest .cc-date{ background:var(--gold); color:var(--ink); }
  .cc-title{ font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1.35;
    color:var(--paper); margin:0; flex:1 1 auto; }
  .cc-date-full{ font-size:12px; color:var(--paper-faint); flex-shrink:0; font-family:var(--font-mono); }
  .cc-desc{ font-size:13.5px; line-height:1.7; color:var(--paper-dim); margin:0;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .cc-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
  .cc-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
    color:var(--paper-dim); background:var(--ink-3); border:1px solid var(--line);
    padding:6px 13px; border-radius:8px; text-decoration:none; transition:all .25s var(--ease); }
  .cc-link:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
  .cc-link-ic{ font-size:10px; }
  .cc-link-cnt{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px;
    background:var(--gold); color:var(--ink); font-size:10px; font-weight:700; border-radius:99px; padding:0 5px; }

  /* ========================================================================
   * 最新内容（双栏：教案 + 视频）
   * ======================================================================*/
  .fresh2{ padding:clamp(60px,7vw,96px) 0; }
  .fresh2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,4vw,64px); align-items:start; }
  .fresh2-col h3{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--paper);
    margin:0 0 20px; display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
  .fresh2-col h3 .f2-num{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
    border-radius:8px; background:var(--gold-soft); color:var(--gold); font-family:var(--font-mono); font-size:12px; font-weight:700; }
  .fresh2-col h3 a{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--paper-faint); text-decoration:none; }
  .fresh2-col h3 a:hover{ color:var(--gold); }

  .fresh2 .tutorial-grid, .fresh2 .video-grid{ display:grid; grid-template-columns:1fr; gap:0; }
  .fresh2 .tutorial-card{
    flex-direction:column; align-items:stretch; gap:6px; padding:16px 0; min-height:0;
    background:transparent; border:none; border-bottom:1px solid var(--line-soft); border-radius:0; box-shadow:none; }
  .fresh2 .video-card{
    flex-direction:row; align-items:center; gap:14px; padding:16px 0; min-height:0; overflow:hidden;
    background:transparent; border:none; border-bottom:1px solid var(--line-soft); border-radius:0; box-shadow:none; }
  .fresh2 .tutorial-card:hover, .fresh2 .video-card:hover{ background:transparent; transform:none; border-bottom-color:var(--gold); }
  .fresh2 .tutorial-card::before{ display:none; }
  .fresh2 .tutorial-card .tc-top{ display:flex; align-items:center; gap:8px; margin:0 0 3px; }
  .fresh2 .tutorial-card .tc-badge{ font-family:var(--font-mono); font-size:10.5px; padding:2px 8px; border-radius:5px;
    background:var(--ink-3); border:1px solid var(--line); color:var(--paper-faint); }
  .fresh2 .tutorial-card .tc-format{ font-size:11.5px; color:var(--paper-faint); }
  .fresh2 .tutorial-card .tc-title{ font-size:14.5px; line-height:1.4; margin:3px 0 3px; font-weight:600; color:var(--paper);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
  .fresh2 .tutorial-card .tc-desc{ font-size:12.5px; line-height:1.6; color:var(--paper-dim);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; margin:0; }
  .fresh2 .tutorial-card .tc-foot{ margin-top:6px; padding-top:0; border-top:none; font-size:11.5px; display:flex; gap:10px; }
  .fresh2 .tutorial-card .tc-product{ color:var(--gold); font-weight:600; }
  .fresh2 .tutorial-card .tc-date{ color:var(--paper-faint); }

  .fresh2 .video-card .vc-thumb{ flex:0 0 120px; width:120px; height:75px; align-self:center;
    border-radius:8px; margin:0; overflow:hidden; background:var(--ink-3); position:relative; }
  .fresh2 .video-card .vc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .fresh2 .video-card .vc-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:0; padding:0; }
  .fresh2 .video-card .vc-platform{ display:inline-flex; align-items:center; align-self:flex-start;
    font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:5px; margin-bottom:5px;
    background:var(--ink-3); color:var(--paper-faint); border:1px solid var(--line); }
  .fresh2 .video-card .vc-title{ font-size:14px; line-height:1.4; font-weight:600; color:var(--paper);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0 0 4px; }
  .fresh2 .video-card .vc-meta{ display:flex; align-items:center; gap:8px; margin-top:4px; padding-top:0;
    border-top:none; font-size:11.5px; color:var(--paper-faint); }
  .fresh2 .video-card .vc-meta .vc-dur{ color:var(--gold); font-weight:600; }
  .fresh2 .video-card .vc-foot{ display:none; }

  /* ========================================================================
   * 产品筛选
   * ======================================================================*/
  .product-filter{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; margin-bottom:24px; }
  .pf-chip{ font-family:var(--font-body); font-size:12.5px; font-weight:500; padding:7px 16px;
    border-radius:var(--r-pill); border:1px solid var(--line); background:transparent; color:var(--paper-dim);
    cursor:pointer; transition:all .25s; }
  .pf-chip:hover{ border-color:var(--gold); color:var(--gold); }
  .pf-chip.is-active{ background:var(--gold); color:var(--ink); border-color:var(--gold); font-weight:600; }

  /* ========================================================================
   * 教程卡（独立页）
   * ======================================================================*/
  .tutorial-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
  .tutorial-card{ display:flex; flex-direction:column; gap:8px; padding:22px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px; text-decoration:none;
    box-shadow:var(--card-shadow); transition:all .3s var(--ease); position:relative; overflow:hidden; }
  .tutorial-card:hover{ transform:translateY(-2px); border-color:var(--gold-glow); box-shadow:var(--card-shadow-hover); }
  .tutorial-card.is-hidden{ display:none; }
  .tc-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .tc-badge{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:3px 10px;
    border-radius:5px; background:var(--ink-3); color:var(--paper-faint); border:1px solid var(--line); }
  .tc-format{ font-size:11.5px; color:var(--paper-faint); }
  .tc-title{ font-size:15px; font-weight:700; line-height:1.4; color:var(--paper); margin:4px 0;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .tc-desc{ font-size:12.5px; line-height:1.65; color:var(--paper-dim); margin:0;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .tc-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto;
    padding-top:12px; border-top:1px solid var(--line-soft); font-size:11.5px; gap:8px; flex-wrap:wrap; }
  .tc-product{ color:var(--gold); font-weight:600; }
  .tc-dur{ color:var(--paper-dim); }
  .tc-date{ color:var(--paper-faint); font-family:var(--font-mono); margin-left:auto; }
  .filter-empty{ text-align:center; padding:40px; color:var(--paper-faint); font-size:14px; grid-column:1/-1; }

  /* ========================================================================
   * 视频卡（独立页）
   * ======================================================================*/
  .video-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
  .video-card{ display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line);
    border-radius:12px; overflow:hidden; box-shadow:var(--card-shadow); transition:all .3s var(--ease); }
  .video-card:hover{ transform:translateY(-2px); border-color:var(--gold-glow); box-shadow:var(--card-shadow-hover); }
  .video-card.is-hidden{ display:none; }
  .vc-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink-3); cursor:pointer; border:none; padding:0; }
  .vc-thumb img{ width:100%; height:100%; object-fit:cover; }
  .vc-thumb.ph{ background:linear-gradient(135deg,var(--ink-3),var(--ink-2)); }
  .vc-thumb.ph::after{ content:'▶'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:24px; color:var(--paper-faint); }
  .vc-platform{ position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:600; padding:3px 9px;
    border-radius:5px; background:rgba(20,20,18,.85); color:var(--paper); }
  .vc-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px;
    background:rgba(201,169,110,.9); border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--ink); opacity:0; transition:opacity .25s; pointer-events:none; }
  .vc-thumb:hover .vc-play{ opacity:1; }
  .vc-dur{ position:absolute; right:8px; bottom:8px; background:rgba(20,20,18,.85); color:var(--paper);
    font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:5px; }
  .vc-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
  .vc-title{ font-size:14px; font-weight:600; line-height:1.45; color:var(--paper);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .vc-desc{ font-size:12px; line-height:1.6; color:var(--paper-dim);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .vc-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto;
    padding-top:10px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--paper-faint); }
  .vc-watch{ color:var(--gold); font-weight:600; }
  .vc-watch:hover{ color:var(--gold-deep); }
  .vc-tags{ display:flex; gap:6px; margin-bottom:2px; }
  .vc-diff{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:10px; font-weight:700;
    letter-spacing:.05em; padding:2px 8px; border-radius:4px; text-transform:uppercase; }
  .vc-diff.diff-easy{ background:rgba(90,138,110,.15); color:#5a8a6e; }
  .vc-diff.diff-mid{ background:rgba(201,169,110,.15); color:var(--gold); }
  .vc-diff.diff-hard{ background:rgba(203,85,33,.12); color:#cb5521; }

  /* 视频 lightbox */
  .video-lightbox{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s; }
  .video-lightbox.open{ opacity:1; pointer-events:auto; }
  .vl-mask{ position:absolute; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px); }
  .vl-box{ position:relative; width:min(900px,90vw); aspect-ratio:16/9; background:#000; border-radius:12px;
    overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); border:1px solid var(--line); }
  .vl-close{ position:absolute; top:-44px; right:0; background:none; border:none; color:var(--paper); font-size:28px;
    cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
  .vl-close:hover{ background:var(--ink-3); }
  .vl-frame{ width:100%; height:100%; }
  .vl-frame iframe{ width:100%; height:100%; border:none; }
  .vl-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--paper-faint); font-size:14px; }
  .vl-box[data-loaded="1"] .vl-loading{ display:none; }

  /* ========================================================================
   * 资源与技能
   * ======================================================================*/
  .hub2{ padding:clamp(60px,7vw,96px) 0; position:relative; }
  .hub2::before{ content:''; position:absolute; inset:0 0 auto; height:1px; background:var(--shimmer-line); pointer-events:none; }
  .hub2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .hub-card{ display:flex; flex-direction:column; gap:10px; padding:32px 28px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px; text-decoration:none;
    box-shadow:var(--card-shadow); transition:all .3s var(--ease); position:relative; overflow:hidden; }
  .hub-card:hover{ transform:translateY(-3px); border-color:var(--gold-glow); box-shadow:var(--card-shadow-hover); }
  .hub-card .h2-ic{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    font-size:17px; background:var(--gold-soft); color:var(--gold); font-weight:700; }
  .hub-card h3{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--paper); margin:0; }
  .hub-card p{ font-size:13.5px; line-height:1.7; color:var(--paper-dim); margin:0; }
  .hub-card .h2-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
  .hub-card .h2-tag{ font-size:11px; font-weight:500; color:var(--paper-faint); background:var(--ink-3);
    border:1px solid var(--line); padding:3px 10px; border-radius:99px; }
  .hub-card .h2-go{ margin-top:auto; font-size:13px; font-weight:600; color:var(--gold); display:inline-flex; align-items:center; gap:5px; }
  .hub-card:hover .h2-go{ gap:9px; }

  .hero-tip{ display:flex; align-items:center; gap:14px; margin-top:32px; padding:18px 22px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px; position:relative; }
  .hero-tip-ic{ flex-shrink:0; width:38px; height:38px; border-radius:10px; overflow:hidden; background:var(--tip-icon-grad);
    display:flex; align-items:center; justify-content:center; }
  .hero-tip-ic img{ width:26px; height:26px; object-fit:contain; }
  .hero-tip-text{ font-size:13px; color:var(--paper-dim); line-height:1.65; flex:1; }
  .hero-tip-text b{ color:var(--paper); font-weight:700; }
  .hero-tip-text code{ background:var(--ink-3); border:1px solid var(--line); padding:2px 8px;
    border-radius:5px; font-family:var(--font-mono); font-size:12px; color:var(--gold); }
  .hero-tip-close{ position:absolute; top:10px; right:12px; background:none; border:none; cursor:pointer;
    font-size:20px; color:var(--paper-faint); width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; }
  .hero-tip-close:hover{ background:var(--ink-3); color:var(--paper); }

  /* ========================================================================
   * 资源卡（独立页）
   * ======================================================================*/
  .resource-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
  .resource-card{ display:flex; flex-direction:column; gap:8px; padding:24px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--card-shadow); transition:all .3s var(--ease); }
  .resource-card:hover{ border-color:var(--gold-glow); box-shadow:var(--card-shadow-hover); }
  .rs-type{ display:inline-block; align-self:flex-start; font-family:var(--font-mono); font-size:10.5px;
    font-weight:600; color:var(--gold); background:var(--gold-soft); padding:4px 10px; border-radius:5px; }
  .rs-title{ font-size:16px; font-weight:700; color:var(--paper); line-height:1.4; }
  .rs-desc{ font-size:13px; line-height:1.7; color:var(--paper-dim); }
  .rs-date{ font-size:11.5px; color:var(--paper-faint); font-family:var(--font-mono); }
  .rs-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:14px;
    border-top:1px solid var(--line-soft); }
  .rs-link{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
    padding:7px 13px; border-radius:8px; border:1px solid var(--line); text-decoration:none; transition:all .25s;
    background:var(--ink-3); color:var(--paper-dim); }
  .rs-link:hover{ transform:translateY(-1px); }
  .rs-ic{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
    border-radius:5px; font-size:10px; font-weight:700; color:#fff; }
  .rs-baidu .rs-ic{ background:var(--brand-baidu); }
  .rs-baidu:hover{ border-color:var(--brand-baidu); color:var(--brand-baidu); }
  .rs-quark .rs-ic{ background:var(--brand-quark); }
  .rs-quark:hover{ border-color:var(--brand-quark); color:var(--brand-quark); }
  .rs-feishu .rs-ic{ background:var(--brand-feishu); }
  .rs-feishu:hover{ border-color:var(--brand-feishu); color:var(--brand-feishu); }
  .rs-doc .rs-ic{ background:var(--gold); color:var(--ink); }
  .rs-doc:hover{ border-color:var(--gold); background:var(--gold); color:var(--ink); }
  .rs-github .rs-ic{ background:var(--brand-github); color:var(--ink); }
  .rs-github:hover{ border-color:var(--brand-github); }
  .rs-arrow{ font-size:10px; opacity:.5; }
  .rs-code{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--paper-dim);
    background:var(--ink-3); padding:5px 10px; border-radius:6px; border:1px solid var(--line); }
  .rs-code code{ font-family:var(--font-mono); font-weight:700; color:var(--paper); }
  .rs-copy{ background:var(--ink-2); border:1px solid var(--line); border-radius:5px; padding:2px 8px;
    font-size:10.5px; cursor:pointer; color:var(--paper-faint); transition:all .2s; }
  .rs-copy:hover{ border-color:var(--gold); color:var(--gold); }
  .rs-copy.is-copied{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }
  .rs-none{ font-size:12px; color:var(--paper-faint); font-style:italic; }

  /* ========================================================================
   * 技能卡
   * ======================================================================*/
  .skill-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
  .skill-card{ display:flex; flex-direction:column; gap:10px; padding:24px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--card-shadow); transition:all .3s var(--ease); }
  .skill-card:hover{ border-color:var(--gold-glow); box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }
  .skill-card-top{ display:flex; align-items:flex-start; gap:14px; }
  .skill-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px;
    border-radius:10px; background:var(--gold-soft); color:var(--gold); font-family:var(--font-mono); font-size:12px; font-weight:700;
    flex-shrink:0; line-height:1.3; text-align:center; }
  .skill-head{ flex:1; min-width:0; }
  .skill-name{ font-size:16px; font-weight:700; color:var(--paper); margin-bottom:2px; }
  .skill-sub{ font-size:12px; color:var(--paper-faint); font-family:var(--font-mono); }
  .skill-desc{ font-size:13px; line-height:1.7; color:var(--paper-dim); }
  .skill-tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .skill-tag{ font-size:10.5px; font-weight:500; color:var(--paper-faint); background:var(--ink-3);
    border:1px solid var(--line); padding:3px 9px; border-radius:99px; }
  .skill-src-row{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); }
  .skill-src{ font-size:12.5px; font-weight:600; color:var(--gold); }
  .skill-src:hover{ color:var(--gold-deep); }
  .skill-src em{ font-style:normal; }
  .skill-src-note{ display:block; font-size:10.5px; color:var(--paper-faint); margin-top:4px; }
  .skill-dl-row{ margin-top:0; padding-top:10px; border-top:1px solid var(--line-soft); }

  /* 技能总包单独展示区 */
  .pack-hero{ display:flex; gap:40px; align-items:center; padding:40px;
    background:linear-gradient(135deg,var(--ink-2),var(--ink-3)); border:1px solid var(--gold-glow); border-radius:20px;
    box-shadow:var(--card-shadow); }
  .pack-hero-left{ flex:1; min-width:0; }
  .pack-hero-right{ flex:0 0 auto; display:flex; flex-direction:column; gap:12px; }
  .pack-hero-badge{ display:inline-flex; align-items:center; padding:5px 14px; border-radius:99px;
    background:var(--gold-soft); color:var(--gold); font-family:var(--font-mono); font-size:11px; font-weight:700;
    letter-spacing:.08em; margin-bottom:16px; }
  .pack-hero-title{ font-size:24px; font-weight:800; color:var(--paper); margin-bottom:12px; line-height:1.3; }
  .pack-hero-desc{ font-size:14px; line-height:1.8; color:var(--paper-dim); margin-bottom:18px; }
  .pack-hero-feats{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
  .pack-hero-feats li{ font-size:13px; color:var(--paper-dim); padding-left:22px; position:relative; line-height:1.6; }
  .pack-hero-feats li::before{ content:""; position:absolute; left:0; top:8px; width:12px; height:12px;
    border-radius:3px; background:var(--gold-soft); border:1px solid var(--gold); }
  .pack-hero-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px; border-radius:12px; font-size:14px; font-weight:700; text-decoration:none;
    background:var(--gold); color:var(--ink); transition:all .25s; white-space:nowrap; }
  .pack-hero-btn:hover{ background:var(--gold-deep); transform:translateY(-1px); }
  .pack-hero-btn em{ font-style:normal; }
  .pack-hero-btn-secondary{ background:transparent; color:var(--gold); border:1px solid var(--gold-glow); }
  .pack-hero-btn-secondary:hover{ background:var(--gold-soft); color:var(--gold); }
  @media(max-width:860px){
    .pack-hero{ flex-direction:column; gap:24px; padding:28px; }
    .pack-hero-right{ flex-direction:row; flex-wrap:wrap; }
    .pack-hero-title{ font-size:20px; }
  }

  /* ========================================================================
   * 直播回放
   * ======================================================================*/
  .live-banner{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
    padding:36px 40px; background:var(--ink-2); border:1px solid var(--line); border-radius:16px; margin-bottom:48px; }
  .lb-pill{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
    color:var(--gold); background:var(--gold-soft); padding:5px 14px; border-radius:var(--r-pill); margin-bottom:14px; }
  .lb-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 2s infinite; }
  .lb-topic{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--paper); margin-bottom:6px; }
  .lb-lead{ display:block; font-size:11px; color:var(--paper-faint); font-weight:500; margin-bottom:4px;
    letter-spacing:.08em; text-transform:uppercase; }
  .lb-next{ font-size:13.5px; color:var(--paper-dim); }
  .lb-qrs{ display:flex; gap:12px; }

  .replay-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
  .replay-card{ display:block; background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    overflow:hidden; transition:all .3s var(--ease); box-shadow:var(--card-shadow); }
  .replay-card:hover{ transform:translateY(-3px); border-color:var(--gold-glow); box-shadow:var(--card-shadow-hover); }
  .rc-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink-3); }
  .rc-thumb img{ width:100%; height:100%; object-fit:cover; }
  .rc-dur{ position:absolute; right:8px; bottom:8px; background:rgba(20,20,18,.85); color:var(--paper);
    font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:5px; }
  .rc-body{ padding:14px 16px 16px; }
  .rc-product{ display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
    color:var(--gold); background:var(--gold-soft); padding:3px 9px; border-radius:5px; margin-bottom:8px; }
  .rc-title{ font-size:13.5px; font-weight:600; line-height:1.45; color:var(--paper); margin-bottom:6px;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .rc-date{ font-size:11.5px; color:var(--paper-faint); font-family:var(--font-mono); }

  /* ========================================================================
   * 联系 / 二维码
   * ======================================================================*/
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  .private-entry{ display:flex; flex-direction:column; gap:14px; }
  .entry-card{ display:flex; align-items:center; gap:20px; padding:24px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--card-shadow); text-decoration:none; transition:all .3s var(--ease); }
  .entry-card:hover{ border-color:var(--gold-glow); box-shadow:var(--card-shadow-hover); }
  .entry-card.qr-block{ flex-direction:row; }
  .qr-text{ flex:1; }
  .ec-kind, .dqr-kicker{ display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
  .ec-name, .dqr-title{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--paper); margin-bottom:6px; }
  .ec-desc, .dqr-desc{ font-size:13px; line-height:1.7; color:var(--paper-dim); margin-bottom:8px; }
  .ec-go{ font-size:13.5px; font-weight:600; color:var(--gold); display:inline-flex; align-items:center; gap:5px; }
  .ec-go em{ font-style:normal; }
  .qr-hint, .dqr-handle{ font-size:12.5px; color:var(--paper-dim); }
  .dqr-handle b{ color:var(--paper); font-family:var(--font-mono); }
  .qr-side{ flex-shrink:0; width:130px; }
  .qr-side img{ width:100%; border-radius:10px; border:1px solid var(--line); }
  .douyin-qr{ display:flex; align-items:center; gap:24px; padding:28px 28px; background:var(--ink-3); border:1px solid var(--line); border-radius:14px; box-shadow:var(--card-shadow); }
  .douyin-qr .dqr-kicker{ color:var(--gold); }
  .douyin-qr .dqr-title{ color:var(--paper); }
  .douyin-qr .dqr-desc{ color:var(--paper-dim); }
  .douyin-qr .dqr-handle{ color:var(--paper-faint); }
  .douyin-qr .dqr-handle b{ color:var(--paper); }

  .connect2{ padding:clamp(60px,7vw,96px) 0 clamp(96px,10vw,140px); }
  .home-qr-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .home-qr-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 24px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--card-shadow); transition:all .3s var(--ease); }
  .home-qr-card:hover{ border-color:var(--gold-glow); box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }
  .hqr-kind{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
    text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
  .hqr-img{ width:120px; margin-bottom:14px; }
  .hqr-img img{ width:100%; border-radius:10px; border:1px solid var(--line); }
  .hqr-name{ font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--paper); margin-bottom:6px; }
  .hqr-hint{ font-size:12px; line-height:1.6; color:var(--paper-dim); }

  /* ========================================================================
   * 页脚（v2：简化为内容区内联，不占全屏）
   * ======================================================================*/
  .footer{ background:#0a0a09; color:var(--paper-dim); padding:36px 0 28px; margin-top:24px; border-top:1px solid var(--gold-soft); }
  .footer .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; margin-bottom:36px; }
  .footer .brand{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--paper); margin-bottom:8px; }
  .footer .slogan{ font-size:13px; color:var(--paper-faint); max-width:300px; line-height:1.7; }
  .footer .links{ display:flex; gap:48px; justify-content:flex-end; }
  .footer .links .footer-col{ display:flex; flex-direction:column; gap:14px; }
  .footer .links a{ font-size:13px; color:var(--paper-dim); transition:color .2s; }
  .footer .links a:hover{ color:var(--gold); }
  .footer-links{ margin-bottom:28px; }
  .fl-kicker{ display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:var(--paper-faint); margin-bottom:12px; }
  .fl-row{ display:flex; gap:12px; flex-wrap:wrap; }
  .fl-card{ display:flex; align-items:center; gap:12px; padding:12px 16px;
    background:var(--ink-3); border:1px solid var(--line); border-radius:10px;
    text-decoration:none; transition:all .25s; }
  .fl-card:hover{ background:var(--gold-soft); border-color:var(--gold-glow); }
  .fl-icon{ width:34px; height:34px; border-radius:9px; background:var(--footer-ic-bg);
    display:flex; align-items:center; justify-content:center; color:var(--footer-ic-ink); flex-shrink:0; }
  .fl-icon svg{ width:17px; height:17px; }
  .fl-text{ display:flex; flex-direction:column; }
  .fl-name{ font-size:12.5px; font-weight:600; color:var(--paper); }
  .fl-url{ font-size:11px; color:var(--footer-url-ink); font-family:var(--font-mono); }
  .footer .divider{ height:1px; background:var(--line); margin-bottom:20px; }
  .footer .copyright{ font-size:11.5px; color:var(--paper-faint); text-align:center; }

  /* ========================================================================
   * 响应式
   * ======================================================================*/
  @media (max-width:1100px){
    .hero2-grid{ grid-template-columns:1fr; }
    .hero2-photo-simple{ max-width:240px; margin:0 auto; }
    .fresh2-grid{ grid-template-columns:1fr; }
    .hub2-grid{ grid-template-columns:1fr; }
    .home-qr-grid{ grid-template-columns:repeat(2,1fr); }
    .contact-grid{ grid-template-columns:1fr; }
    .live-banner{ grid-template-columns:1fr; }
    .paths2-grid{ grid-template-columns:1fr; }
    .path-card{ border-right:none; }
  }
  @media (max-width:860px){
    :root{ --sidebar-w:0px; }
    .nav{ transform:translateX(-100%); transition:transform .35s var(--ease); width:280px; }
    .nav.open{ transform:translateX(0); box-shadow:0 0 60px rgba(0,0,0,.5); }
    .nav-toggle{ display:flex; position:fixed; top:16px; left:16px; z-index:55; width:42px; height:42px;
      background:var(--ink-2); border:1px solid var(--line); border-radius:10px; cursor:pointer;
      align-items:center; justify-content:center; }
    .nav-toggle:hover{ background:var(--ink-3); }
    .content{ margin-left:0; padding-top:0; }
    .scroll-progress{ left:0; }
    .wrap{ padding:0 24px; }
    .course-card{ grid-template-columns:1fr; gap:16px; }
    .cc-cover{ width:100%; height:160px; }
    .cc-body{ padding:0; }
    .footer .top{ flex-direction:column; }
    .footer .links{ justify-content:flex-start; }
    .path-card.lead{ background:var(--gold-soft); }
  }
  @media (max-width:640px){
    .wrap{ padding:0 20px; }
    .hero2-stats{ gap:24px; flex-wrap:wrap; }
    .cc-links{ flex-direction:column; }
    .cc-link{ width:100%; justify-content:center; }
    .home-qr-grid{ grid-template-columns:1fr; }
    .entry-card.qr-block{ flex-direction:column; text-align:center; }
    .qr-side{ margin:0 auto; }
    .fresh2 .video-card{ flex-direction:column; align-items:stretch; }
    .fresh2 .video-card .vc-thumb{ width:100%; flex:none; height:160px; }
    .tutorial-grid, .video-grid, .resource-grid, .skill-grid, .replay-grid{ grid-template-columns:1fr; }
    .hero2-status{ left:12px; }
  }

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