.materials-content {
    --cyan: var(--accent);
    --violet: var(--accent);
    --pink: var(--accent-strong);
    --gold: var(--accent-strong);
    :root {
      --ink: #eef2ff;
      --muted: #9aa7c4;
      --line: rgba(255,255,255,.10);
      --panel: rgba(12,19,39,.72);
      --cyan: #54e8ff;
      --violet: #8b7cff;
      --pink: #ff6fbd;
      --gold: #ffc76b;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
      background:
        radial-gradient(circle at 7% 4%, rgba(84,232,255,.16), transparent 25%),
        radial-gradient(circle at 88% 10%, rgba(139,124,255,.20), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255,111,189,.11), transparent 30%),
        #060a16;
      min-height: 100vh;
    }
    body::before {
      content: "";
      position: fixed; inset: 0; pointer-events: none; opacity: .24;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, black, transparent 72%);
    }
    a { color: inherit; }
    button, input { font: inherit; }
    .shell { width: min(1500px, calc(100% - 40px)); margin: 0 auto; }
    .nav {
      height: 78px; display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }
    .brand { display: flex; align-items: center; gap: 13px; font-weight: 800; letter-spacing: .04em; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
      background: linear-gradient(135deg, var(--cyan), var(--violet) 52%, var(--pink));
      color: #06101d; font-weight: 950; box-shadow: 0 10px 30px rgba(84,232,255,.22);
    }
    .nav-meta { color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
    .hero {
      min-height: 530px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(320px,.7fr);
      align-items: center; gap: 70px; padding: 76px 0 64px;
    }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px; color: var(--cyan); font-size: 13px;
      font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--cyan); }
    h1 { margin: 22px 0 22px; font-size: clamp(48px, 7.2vw, 104px); line-height: .94; letter-spacing: -.06em; }
    h1 span {
      display: block; color: transparent;
      background: linear-gradient(100deg, #fff 8%, var(--cyan) 45%, #b8aaff 72%, var(--pink));
      -webkit-background-clip: text; background-clip: text;
    }
    .lead { max-width: 720px; margin: 0; color: #aeb9d1; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.85; }
    .hero-panel {
      position: relative; padding: 30px; border: 1px solid var(--line); border-radius: 28px;
      background: linear-gradient(145deg, rgba(17,27,55,.9), rgba(10,15,32,.74));
      box-shadow: 0 30px 80px rgba(0,0,0,.34); overflow: hidden;
    }
    .hero-panel::after {
      content: ""; position: absolute; width: 210px; height: 210px; right: -70px; top: -80px;
      border-radius: 50%; background: var(--violet); filter: blur(80px); opacity: .34;
    }
    .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 1; }
    .metric { padding: 21px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
    .metric strong { display: block; font-size: 34px; letter-spacing: -.04em; }
    .metric span { color: var(--muted); font-size: 13px; }
    .metric.wide { grid-column: 1 / -1; }
    .metric.wide strong { color: var(--gold); }
    .quick-links {
      display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 22px 0;
    }
    .quick-link {
      display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 18px;
      color: #f3f6ff; font-size: 14px; font-weight: 750; text-decoration: none;
      border: 1px solid rgba(84,232,255,.24); border-radius: 13px;
      background: linear-gradient(135deg, rgba(84,232,255,.09), rgba(139,124,255,.11)); transition: .2s ease;
    }
    .quick-link:hover { border-color: rgba(84,232,255,.64); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(84,232,255,.12); }
    .search-panel {
      position: relative; overflow: hidden;
      display: grid; grid-template-columns: minmax(250px,.65fr) minmax(420px,1.35fr); align-items: center; gap: 34px;
      margin: 0 auto 22px; padding: 27px 30px; border: 4px solid #5ff3ff; border-radius: 22px;
      background:
        radial-gradient(circle at 15% 20%, rgba(44,238,255,.38), transparent 28%),
        linear-gradient(120deg, #063f70, #17266f 48%, #63238c);
      box-shadow:
        0 0 0 5px rgba(95,243,255,.13),
        0 0 38px rgba(64,225,255,.38),
        0 22px 58px rgba(0,12,62,.48),
        inset 0 1px 0 rgba(255,255,255,.22);
      animation: search-panel-glow 2.6s ease-in-out infinite;
    }
    .search-panel::after {
      content: ""; position: absolute; top: -100%; left: -25%; width: 20%; height: 300%;
      transform: rotate(22deg); pointer-events: none; opacity: .24;
      background: linear-gradient(90deg, transparent, #fff, transparent);
      animation: search-sheen 4.5s linear infinite;
    }
    .search-panel > * { position: relative; z-index: 1; }
    @keyframes search-panel-glow {
      50% { box-shadow: 0 0 0 7px rgba(95,243,255,.18), 0 0 52px rgba(128,101,255,.52), 0 24px 64px rgba(0,12,62,.56), inset 0 1px 0 rgba(255,255,255,.25); }
    }
    @keyframes search-sheen { to { left: 125%; } }
    .search-panel-kicker { color: #9cffff; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
    .search-panel h2 { margin: 5px 0 4px; color: #fff; font-size: clamp(24px, 2.8vw, 38px); letter-spacing: -.03em; text-shadow: 0 0 18px rgba(95,243,255,.58); }
    .search-panel p { margin: 0; color: #c3ddf7; font-size: 13px; }
    .search-panel .search { width: 100%; min-width: 0; height: 60px; border: 2px solid rgba(181,246,255,.72); background: rgba(1,9,35,.7); }
    .search-panel .search-button { height: 48px; padding: 0 25px; background: linear-gradient(110deg, #67fbff, #e6ff72 52%, #ffb657); box-shadow: 0 0 22px rgba(103,251,255,.4); }
    .directory {
      margin: 0 auto 42px; padding: 24px; border: 3px solid #ff70d1; border-radius: 24px;
      background:
        radial-gradient(circle at 90% 10%, rgba(255,102,204,.26), transparent 25%),
        linear-gradient(145deg, rgba(82,24,104,.96), rgba(31,22,73,.97));
      box-shadow: 0 18px 48px rgba(69,0,88,.38), inset 0 0 0 1px rgba(255,203,241,.14);
    }
    .directory summary {
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      cursor: pointer; list-style: none; font-size: 20px; font-weight: 800;
    }
    .directory summary::-webkit-details-marker { display: none; }
    .directory summary span { color: var(--muted); font-size: 13px; font-weight: 500; }
    .directory-list {
      display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px;
      margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line);
    }
    .directory-link {
      min-width: 0; padding: 10px 12px; overflow: hidden; color: #aeb9d1; font-size: 12px;
      white-space: nowrap; text-overflow: ellipsis; text-decoration: none;
      border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.03);
    }
    .directory-link:hover { color: #fff; border-color: rgba(139,124,255,.48); background: rgba(139,124,255,.09); }
    .library {
      margin-bottom: 70px; padding: 34px 28px 100px;
      border: 3px solid #66f0ba; border-radius: 26px;
      background:
        radial-gradient(circle at 8% 2%, rgba(58,255,174,.17), transparent 24%),
        linear-gradient(155deg, rgba(6,63,69,.77), rgba(8,22,48,.9) 38%, rgba(22,45,56,.86));
      box-shadow: 0 22px 58px rgba(0,53,50,.36), inset 0 0 0 1px rgba(170,255,222,.1);
    }
    .library .section-head h2 { color: #b9ffe2; text-shadow: 0 0 18px rgba(71,255,184,.28); }
    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
    .section-head h2 { margin: 0 0 7px; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.04em; }
    .section-head p { margin: 0; color: var(--muted); }
    .search {
      min-width: min(520px, 100%); display: flex; align-items: center; gap: 11px; padding: 4px 5px 4px 17px;
      height: 52px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.055);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .search:focus-within { border-color: rgba(84,232,255,.65); box-shadow: 0 0 0 4px rgba(84,232,255,.08); }
    .search input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; }
    .search input::placeholder { color: #71809f; }
    .search-button, .clear-search {
      flex: 0 0 auto; border: 0; border-radius: 11px; cursor: pointer; font-weight: 850; transition: .2s ease;
    }
    .search-button {
      height: 42px; padding: 0 20px; color: #07101e;
      background: linear-gradient(110deg, var(--cyan), #b3a8ff);
    }
    .search-button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(84,232,255,.18); }
    .clear-search {
      display: none; margin-top: 16px; padding: 10px 15px; color: #dbe3f3;
      border: 1px solid var(--line); background: rgba(255,255,255,.055);
    }
    .clear-search:hover { color: #fff; border-color: rgba(84,232,255,.45); }
    .search-results { display: none; gap: 10px; }
    .search-result {
      display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: center;
      padding: 18px 20px; color: inherit; cursor: pointer;
      border: 1px solid var(--line); border-radius: 16px;
      background: linear-gradient(145deg, rgba(18,28,54,.82), rgba(8,13,28,.76));
      transition: .2s ease;
    }
    .search-result:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
    .search-result:hover { transform: translateY(-2px); border-color: rgba(84,232,255,.42); background: rgba(18,35,62,.92); }
    .search-result-title { margin-bottom: 8px; font-size: 16px; font-weight: 800; line-height: 1.45; }
    .search-result-title a { color: #f2f5ff; text-decoration: none; }
    .search-result-title a:hover { color: #8ef5ff; text-decoration: underline; text-underline-offset: 3px; }
    .search-result-path { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
    .search-crumb { color: #64cfff; text-decoration: none; font-weight: 700; }
    .search-crumb:hover { color: #a5efff; text-decoration: underline; text-underline-offset: 3px; }
    .search-path-separator { color: #52647f; }
    .search-result-type {
      padding: 7px 10px; color: var(--cyan); font-size: 11px; font-weight: 850;
      border: 1px solid rgba(84,232,255,.22); border-radius: 999px; white-space: nowrap;
    }
    .search-limit-note { margin: 14px 0 0; color: #8190ad; font-size: 12px; }
    .filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }
    .filter {
      border: 1px solid var(--line); border-radius: 999px; padding: 10px 15px; color: #aeb9d1;
      background: rgba(255,255,255,.035); cursor: pointer; transition: .2s ease;
    }
    .filter:hover, .filter.active {
      color: #07101e; border-color: transparent; background: linear-gradient(110deg, var(--cyan), #b3a8ff);
      box-shadow: 0 8px 22px rgba(84,232,255,.16);
    }
    .grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
    .card {
      --card-hue: 210;
      position: relative; display: flex; flex-direction: column; padding: 30px;
      border: 2px solid hsla(var(--card-hue), 88%, 72%, .52); border-radius: 23px; text-decoration: none; overflow: hidden;
      background:
        radial-gradient(circle at 92% 8%, hsla(var(--card-hue), 95%, 66%, .27), transparent 28%),
        linear-gradient(135deg, hsla(var(--card-hue), 62%, 26%, .96), hsla(calc(var(--card-hue) + 42), 56%, 14%, .95));
      box-shadow: 0 18px 44px rgba(0,0,0,.16); cursor: pointer;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .card::before {
      content: ""; position: absolute; inset: 0 0 auto; height: 3px;
      background: linear-gradient(90deg, hsl(var(--card-hue), 95%, 68%), hsl(calc(var(--card-hue) + 70), 92%, 72%)); opacity: .95;
    }
    .card:hover { transform: translateY(-3px); border-color: hsla(var(--card-hue), 100%, 82%, .85); box-shadow: 0 26px 64px rgba(0,0,0,.38), 0 0 28px hsla(var(--card-hue), 80%, 55%, .15); }
    .card .category { color: hsl(var(--card-hue), 100%, 82%); }
    .card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
    .card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 21px; }
    .category { color: var(--cyan); font-size: 11px; font-weight: 850; letter-spacing: .12em; }
    .count { color: #bdc6da; font-size: 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; }
    .card h3 {
      margin: 0 0 18px; font-size: 21px; line-height: 1.43; letter-spacing: -.02em;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .course-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 25px 0 22px; }
    .course {
      min-width: 0; display: flex; align-items: center; min-height: 43px; padding: 10px 12px; color: #aeb9d1; font-size: 13px; line-height: 1.45; text-decoration: none; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(255,255,255,.035); transition: .2s ease;
    }
    .course::before { content: ""; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: var(--violet); flex: 0 0 auto; }
    a.course:hover { color: #fff; border-color: rgba(84,232,255,.38); background: rgba(84,232,255,.08); transform: translateY(-1px); }
    .course.disabled { opacity: .58; }
    .series-title { color: inherit; text-decoration: none; }
    .series-title:hover { color: var(--cyan); }
    .card-foot {
      margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line);
      display: flex; justify-content: space-between; align-items: center; color: #cfd7e8; font-size: 13px;
    }
    .arrow { font-size: 21px; color: var(--cyan); transition: transform .2s ease; }
    .card:hover .arrow { transform: translateX(5px); }
    .empty { display: none; padding: 70px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 24px; }
    footer {
      display: flex; justify-content: space-between; gap: 20px; padding: 31px 0 42px;
      border-top: 1px solid var(--line); color: #7e8ba7; font-size: 13px;
    }
    body { padding: 18px; background: #fff; }
    body::before { display: none; }
    .page-frame {
      position: relative; min-height: calc(100vh - 36px); padding-bottom: 58px; overflow: clip;
      border: 12px double #d20a2e; outline: 5px solid #ff294f; outline-offset: -20px;
      background:
        radial-gradient(circle at 7% 4%, rgba(84,232,255,.16), transparent 25%),
        radial-gradient(circle at 88% 10%, rgba(139,124,255,.20), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255,111,189,.11), transparent 30%),
        #060a16;
      box-shadow: 0 20px 70px rgba(93,0,15,.22);
    }
    .page-frame::before {
      content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, black, transparent 72%);
    }
    .page-frame > * { position: relative; z-index: 1; }
    .floating-widget {
      position: fixed; left: 32px; bottom: 65px; z-index: 90; width: clamp(105px, 12vw, 175px);
      filter: drop-shadow(0 15px 20px rgba(0,0,0,.32));
      animation: mascot-float 3.4s ease-in-out infinite;
    }
    .floating-host {
      position: relative; display: block;
      color: inherit; text-decoration: none; cursor: pointer;
    }
    .floating-host img { display: block; width: 100%; height: auto; }
    .floating-host:focus-visible { outline: 3px solid #fff; outline-offset: 5px; border-radius: 18px; }
    .customer-label {
      position: absolute; left: 50%; top: -39px; transform: translateX(-50%);
      min-width: 128px; padding: 7px 14px 8px; text-align: center; white-space: nowrap;
      font-size: 22px; font-weight: 950; letter-spacing: .08em;
      color: #fff8c9;
      -webkit-text-stroke: 1px #b80032;
      text-shadow:
        0 2px 0 #b80032,
        0 0 7px #ff4478,
        0 0 16px rgba(255,199,107,.9);
      border: 2px solid #ff799d; border-radius: 999px;
      background: linear-gradient(135deg, #ff315f, #b80072 54%, #ff8a25);
      box-shadow: 0 8px 24px rgba(255,40,97,.42), inset 0 1px 0 rgba(255,255,255,.5);
    }
    .customer-label::before, .customer-label::after { content: "✿"; color: #ffe06d; -webkit-text-stroke: 0; }
    .customer-label::before { margin-right: 7px; }
    .customer-label::after { margin-left: 7px; }
    .customer-close {
      position: absolute; top: -50px; right: -17px; z-index: 4;
      width: 34px; height: 34px; display: grid; place-items: center;
      padding: 0; border: 3px solid #fff; border-radius: 50%; cursor: pointer;
      color: #fff; background: linear-gradient(145deg, #ff4169, #b90024);
      box-shadow: 0 6px 18px rgba(180,0,32,.5); font-size: 24px; font-weight: 950; line-height: 1;
      transition: transform .18s ease, filter .18s ease;
    }
    .customer-close:hover { transform: scale(1.12) rotate(8deg); filter: brightness(1.12); }
    .customer-close:focus-visible { outline: 3px solid #ffe069; outline-offset: 3px; }
    @keyframes mascot-float {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(-10px) rotate(1deg); }
    }
    .ticker {
      position: fixed; left: 30px; right: 30px; bottom: 30px; z-index: 100; height: 42px;
      overflow: hidden; display: flex; align-items: center; color: #fff; font-weight: 850; letter-spacing: .03em;
      border: 2px solid #ff879c; border-radius: 8px; background: linear-gradient(90deg, #9d001d, #e20936, #9d001d);
      box-shadow: 0 8px 26px rgba(126,0,21,.38);
    }
    .ticker-track {
      display: inline-block; flex: 0 0 auto; min-width: 100%; padding-left: 100%; white-space: nowrap;
      animation: ticker-scroll 24s linear infinite;
    }
    @keyframes ticker-scroll { to { transform: translateX(-100%); } }
    @media (max-width: 1080px) {
      .hero { grid-template-columns: 1fr; gap: 35px; padding-top: 62px; }
      .hero-panel { max-width: 680px; }
      .search-panel { grid-template-columns: 1fr; gap: 18px; }
      .course-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .directory-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .section-head { align-items: stretch; flex-direction: column; }
    }
    @media (max-width: 680px) {
      body { padding: 8px; }
      .page-frame { min-height: calc(100vh - 16px); border-width: 8px; outline-width: 3px; outline-offset: -13px; }
      .shell { width: min(100% - 24px, 1500px); }
      .nav { height: 66px; }
      .nav-meta { display: none; }
      .hero { min-height: auto; padding: 55px 0 45px; }
      h1 { font-size: 51px; }
      .hero-panel { padding: 18px; border-radius: 21px; }
      .metric { padding: 17px; }
      .grid { grid-template-columns: 1fr; }
      .card { padding: 21px; }
      .library { padding: 24px 16px 80px; }
      .course-list, .directory-list { grid-template-columns: 1fr; }
      .directory { padding: 19px; }
      .search-panel { padding: 20px; }
      .directory summary { align-items: flex-start; flex-direction: column; gap: 6px; }
      .search { min-width: 100%; }
      .search-button { padding: 0 14px; }
      .search-result { grid-template-columns: 1fr; gap: 11px; padding: 16px; }
      .search-result-type { width: fit-content; }
      footer { flex-direction: column; }
      .floating-widget { left: 12px; bottom: 55px; width: 92px; }
      .customer-label { top: -31px; min-width: 102px; padding: 5px 9px 6px; font-size: 16px; }
      .customer-close { top: -40px; right: -14px; width: 29px; height: 29px; border-width: 2px; font-size: 20px; }
      .ticker { left: 16px; right: 16px; bottom: 16px; height: 38px; font-size: 13px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }

    /* ===== 阿鹏资料库:在原版基础上补充的部分 ===== */
    .brand { text-decoration: none; }
    .nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .nav-links a {
      padding: 8px 13px; color: #b7c2db; font-size: 14px; text-decoration: none;
      border: 1px solid transparent; border-radius: 10px; transition: .2s ease;
    }
    .nav-links a:hover { color: #fff; border-color: rgba(84,232,255,.34); background: rgba(84,232,255,.08); }
    .nav-links a.active { color: #07101e; font-weight: 800; background: linear-gradient(110deg, var(--cyan), #b3a8ff); }
    .card-desc { margin: -6px 0 0; color: #b9c4dc; font-size: 13.5px; line-height: 1.6; }
    .course .item-price { margin-left: auto; padding-left: 8px; color: var(--cyan); font-size: 12px; font-weight: 800; white-space: nowrap; }
    .course .item-price.free { color: #6ff0b0; }
    .price-tag { font-weight: 850; color: var(--gold); }
    .price-tag.free { color: #6ff0b0; }
    .buy-panel {
      margin: 0 auto 60px; padding: 30px;
      display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap;
      border: 2px solid rgba(84,232,255,.34); border-radius: 24px;
      background:
        radial-gradient(circle at 88% 12%, rgba(84,232,255,.18), transparent 30%),
        linear-gradient(145deg, rgba(16,26,52,.92), rgba(8,13,28,.94));
    }
    .buy-panel h2 { margin: 0 0 10px; font-size: 26px; }
    .buy-panel p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.7; }
    .buy-panel strong { color: var(--cyan); }
    .buy-qr { width: 190px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.32); }
    .buy-qr img { display: block; width: 100%; height: auto; border-radius: 10px; }
    .buy-copy { max-width: 460px; }
    .page-frame { padding-bottom: 96px; }
    @media (max-width: 640px) {
      .buy-panel { padding: 22px; gap: 20px; }
      .buy-qr { width: 160px; }
    }

    /* ===== 浅色配色覆写:只替换颜色,排版与动画保持原样 ===== */
    :root {
      --ink: #1f2a2e;
      --muted: #6b7b80;
      --line: rgba(31,42,46,.12);
      --panel: rgba(255,255,255,.86);
      --cyan: #0d7377;
      --violet: #2f8f6f;
      --pink: #1f7a8c;
      --gold: #b4791f;
    }
    body {
      background:
        radial-gradient(circle at 7% 4%, rgba(13,115,119,.10), transparent 25%),
        radial-gradient(circle at 88% 10%, rgba(47,143,111,.12), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(31,122,140,.08), transparent 30%),
        #f6f4ee;
    }
    body::before {
      background-image:
        linear-gradient(rgba(31,42,46,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,42,46,.045) 1px, transparent 1px);
    }
    .brand { color: var(--ink); }
    .brand-mark {
      color: #fff;
      background: linear-gradient(135deg, #0d7377, #2f8f6f 52%, #1f7a8c);
      box-shadow: 0 10px 30px rgba(13,115,119,.22);
    }
    .nav-links a { color: var(--muted); }
    .nav-links a:hover { color: var(--cyan); border-color: rgba(13,115,119,.34); background: rgba(13,115,119,.07); }
    .nav-links a.active { color: #fff; background: linear-gradient(110deg, #0d7377, #2f8f6f); }
    h1 span {
      background: linear-gradient(100deg, #123c3f 8%, #0d7377 45%, #2f8f6f 72%, #1f7a8c);
      -webkit-background-clip: text; background-clip: text;
    }
    .lead { color: var(--muted); }
    .quick-link {
      color: var(--ink); border-color: rgba(13,115,119,.26);
      background: linear-gradient(135deg, rgba(13,115,119,.07), rgba(47,143,111,.08));
    }
    .quick-link:hover { border-color: rgba(13,115,119,.6); box-shadow: 0 12px 28px rgba(13,115,119,.12); }
    .hero-panel {
      background: linear-gradient(145deg, #ffffff, #f2f7f6);
      border-color: var(--line); box-shadow: 0 22px 50px rgba(31,42,46,.10);
    }
    .hero-panel::after { background: #7fd3cf; opacity: .35; }
    .metric { background: rgba(255,255,255,.75); border-color: var(--line); }
    .metric strong { color: var(--ink); }
    .metric.wide strong { color: var(--gold); }
    .metric span { color: var(--muted); }
    .search-panel {
      border-color: rgba(13,115,119,.45);
      background:
        radial-gradient(circle at 15% 20%, rgba(13,115,119,.14), transparent 28%),
        linear-gradient(120deg, #eef7f6, #e6f1f0 48%, #e9f4f2);
      box-shadow: 0 0 0 5px rgba(13,115,119,.08), 0 18px 44px rgba(13,115,119,.16), inset 0 1px 0 rgba(255,255,255,.7);
    }
    .search-panel::after { background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .35; }
    .search-panel-kicker { color: var(--cyan); }
    .search-panel h2 { color: var(--ink); text-shadow: none; }
    .search-panel p { color: var(--muted); }
    .search-panel .search { border-color: rgba(13,115,119,.35); background: rgba(255,255,255,.92); }
    .search input { color: var(--ink); }
    .search input::placeholder { color: #9aa8ac; }
    .search-panel .search-button,
    .search-button { color: #fff; background: linear-gradient(110deg, #0d7377, #2f8f6f); box-shadow: 0 8px 20px rgba(13,115,119,.22); }
    .directory {
      border-color: rgba(13,115,119,.35);
      background:
        radial-gradient(circle at 90% 10%, rgba(13,115,119,.10), transparent 25%),
        linear-gradient(145deg, #f4faf9, #eaf4f3);
      box-shadow: 0 16px 40px rgba(13,115,119,.14);
    }
    .directory-link { color: var(--muted); border-color: var(--line); background: rgba(255,255,255,.72); }
    .directory-link:hover { color: var(--cyan); border-color: rgba(13,115,119,.45); background: rgba(13,115,119,.08); }
    .library .section-head h2 { color: var(--ink); text-shadow: none; }
    .filter { color: var(--muted); background: rgba(255,255,255,.8); border-color: var(--line); }
    .filter:hover, .filter.active {
      color: #fff; background: linear-gradient(110deg, #0d7377, #2f8f6f);
      box-shadow: 0 8px 20px rgba(13,115,119,.18);
    }
    .card {
      border-color: hsla(var(--card-hue), 45%, 62%, .45);
      background:
        radial-gradient(circle at 92% 8%, hsla(var(--card-hue), 70%, 78%, .30), transparent 28%),
        linear-gradient(135deg, hsla(var(--card-hue), 42%, 98%, .98), hsla(calc(var(--card-hue) + 30), 38%, 94%, .96));
      box-shadow: 0 14px 34px rgba(31,42,46,.10);
    }
    .card:hover { border-color: hsla(var(--card-hue), 55%, 52%, .65); box-shadow: 0 24px 54px rgba(31,42,46,.16); }
    .card .category { color: hsl(var(--card-hue), 45%, 36%); }
    .card h3, .card .series-title { color: var(--ink); }
    .card-desc { color: var(--muted); }
    .course { color: #4c5c62; border-color: rgba(31,42,46,.10); background: rgba(255,255,255,.72); }
    .course::before { background: hsl(var(--card-hue), 45%, 52%); }
    a.course:hover { color: var(--ink); border-color: rgba(13,115,119,.4); background: rgba(13,115,119,.07); }
    .course .item-price { color: var(--cyan); }
    .course .item-price.free { color: #1a7f43; }
    .card-foot { color: var(--muted); border-top-color: var(--line); }
    .card-foot .series-title { color: var(--cyan); }
    .price-tag { color: var(--gold); }
    .price-tag.free { color: #1a7f43; }
    .search-result { border-color: var(--line); background: linear-gradient(145deg, #ffffff, #f6faf9); }
    .search-result:hover { border-color: rgba(13,115,119,.42); background: #f1f8f7; }
    .search-result-title, .search-result-title a { color: var(--ink); }
    .search-result-title a:hover { color: var(--cyan); }
    .search-result-type { color: var(--cyan); border-color: rgba(13,115,119,.3); }
    .search-result-path { color: var(--muted); }
    .clear-search { color: var(--muted); border-color: var(--line); background: rgba(255,255,255,.8); }
    .clear-search:hover { color: var(--cyan); border-color: rgba(13,115,119,.45); }
    .empty { color: var(--muted); border-color: var(--line); }
    .buy-panel {
      border-color: rgba(13,115,119,.3);
      background:
        radial-gradient(circle at 88% 12%, rgba(13,115,119,.10), transparent 30%),
        linear-gradient(145deg, #ffffff, #f3f8f7);
    }
    .buy-panel p { color: var(--muted); }
    .buy-panel strong { color: var(--cyan); }
    .buy-qr { box-shadow: 0 14px 34px rgba(31,42,46,.16); }
    .ticker {
      border-color: rgba(13,115,119,.45);
      background: linear-gradient(90deg, #0a5c60, #0d7377, #0a5c60);
      box-shadow: 0 8px 26px rgba(13,115,119,.3);
    }
    footer { color: var(--muted); }

    /* Match the main site's palette without changing geometry or motion. */
    :root {
      --bg: #f6f4ee;
      --surface: #fffdf8;
      --surface-2: #f0ece2;
      --ink: #26302e;
      --muted: #75807c;
      --line: #e5e0d2;
      --cyan: #0d7377;
      --violet: #0d7377;
      --pink: #0a5c60;
      --gold: #0a5c60;
      --accent-soft: #e0efee;
      --shadow: 0 1px 2px rgba(38,48,46,.05), 0 8px 24px -12px rgba(38,48,46,.12);
    }
    body, .page-frame { background: var(--bg); }
    .page-frame { border-color: var(--line); outline-color: var(--bg); box-shadow: none; }
    .page-frame::before { background-image: none; }
    .brand-mark, .search-button, .search-panel .search-button { background: var(--cyan); box-shadow: var(--shadow); }
    h1 span { color: var(--cyan); background: none; }
    .nav-links a:hover, .quick-link:hover { color: var(--cyan); background: var(--surface-2); border-color: var(--line); }
    .nav-links a.active, .filter.active, .filter:hover {
      color: var(--cyan); background: var(--accent-soft); border-color: var(--line); box-shadow: none;
    }
    .hero-panel, .directory, .library, .buy-panel, .card, .search-result {
      background: var(--surface); border-color: var(--line); box-shadow: var(--shadow);
    }
    .hero-panel::after { background: transparent; }
    .metric, .quick-link, .directory-link, .course, .filter, .clear-search { background: var(--surface-2); border-color: var(--line); }
    .search-panel { background: var(--accent-soft); border-color: #b4d4d2; box-shadow: var(--shadow); }
    @keyframes search-panel-glow {
      50% { box-shadow: 0 0 0 7px rgba(13,115,119,.04), 0 0 52px rgba(13,115,119,.08), 0 24px 64px rgba(38,48,46,.06), inset 0 1px 0 rgba(255,253,248,.7); }
    }
    .search-panel .search { background: var(--surface); border-color: var(--line); }
    .search:focus-within, .search-panel .search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(13,115,119,.08); }
    .search-button:hover, .search-panel .search-button:hover { background: #0a5c60; box-shadow: var(--shadow); }
    .card::before { background: var(--accent-soft); }
    .card:hover { border-color: #b4d4d2; box-shadow: 0 12px 28px rgba(38,48,46,.12); }
    .card .category, .search-crumb, .course .item-price.free, .price-tag.free { color: var(--cyan); }
    .course::before { background: var(--cyan); }
    .count, .search-limit-note, .search-path-separator, .search input::placeholder { color: var(--muted); }
    .search-crumb:hover { color: #0a5c60; }
    .search-result:hover, .directory-link:hover, a.course:hover { background: var(--accent-soft); border-color: #b4d4d2; }
    .buy-qr { background: var(--surface); box-shadow: var(--shadow); }
    .ticker { background: var(--cyan); border-color: #0a5c60; box-shadow: var(--shadow); }

    .shell { width: 100%; }
    .hero { min-height: auto; padding: 40px 0; gap: 32px; background: none; }
    .hero h1 { margin: 14px 0; font-size: 32px; line-height: 1.4; white-space: normal; letter-spacing: 0; }
    .eyebrow, .section-head h2, .metric strong, .category { letter-spacing: 0; }
    .lead { font-size: 16px; }
    .ticker { position: relative; inset: auto; margin: 0 0 24px; }
    .card, .directory, .library, .buy-panel, .hero-panel { border-radius: var(--radius); }
    .library { padding-bottom: 34px; margin-bottom: 32px; }
    .search-panel .search-button:hover { background: var(--accent-strong); }
    .search-panel { background: var(--accent-soft); }
@media (max-width: 680px) {
  .hero h1 { font-size: 28px; }
  .search-panel .search-button { padding: 0 14px; }
}
}

/* ===== 资料目录新增元素:分组筛选 / 编号 / 格式 / 需求标签 / 操作按钮 ===== */
.materials-content .filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.materials-content .filter-row:last-of-type { margin-bottom: 26px; }
.materials-content .filter-label { flex: 0 0 auto; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.materials-content .filter-row .filters { margin-bottom: 0; }
.materials-content .mat-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 2px; color: var(--muted); font-size: 12px; }
.materials-content .mat-need { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--cyan); font-size: 11px; font-weight: 700; }
.materials-content .card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.materials-content .card-actions .btn { text-decoration: none; }
.materials-content .consult-btn { cursor: pointer; border: 0; }
.materials-content .card { cursor: default; }

/* 浅色主题下把正文灰再压深一点,避免大片浅灰看不清(深色主题不受影响) */
:root:not([data-theme='dark']) .materials-content .lead,
:root:not([data-theme='dark']) .materials-content .section-head p,
:root:not([data-theme='dark']) .materials-content .card-desc,
:root:not([data-theme='dark']) .materials-content .search-panel p,
:root:not([data-theme='dark']) .materials-content .directory summary span,
:root:not([data-theme='dark']) .materials-content .metric span,
:root:not([data-theme='dark']) .materials-content .buy-panel p,
:root:not([data-theme='dark']) .materials-content .course,
:root:not([data-theme='dark']) .materials-content .directory-link { color: #55605d; }

:root:not([data-theme='dark']) .materials-content .filter { color: #55605d; }

/* ===== 课程式电子资料目录 ===== */
.course-catalog { padding-top: 42px; padding-bottom: 64px; }
.catalog-heading { margin-bottom: 30px; }
.catalog-heading h1 { margin: 0 0 10px; font-size: 2rem; letter-spacing: 0; }
.catalog-heading p { margin: 0; color: var(--muted); }
.catalog-toolbar { position: relative; padding: 22px 24px; margin-bottom: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.catalog-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 230px 11px 0; }
.catalog-filter-row + .catalog-filter-row { border-top: 1px solid var(--line); }
.catalog-filter-row b { width: 76px; font-size: .86rem; color: var(--muted); }
.catalog-filter,.track-filter { padding: 8px 13px; border: 0; border-radius: 6px; color: var(--ink); background: transparent; cursor: pointer; }
.catalog-filter:hover,.track-filter:hover,.catalog-filter.active,.track-filter.active { color: var(--accent); background: var(--accent-soft); }
.catalog-search { position: absolute; top: 24px; right: 24px; width: 205px; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
.catalog-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; }
.catalog-result { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.catalog-result h2 { margin: 0; font-size: 1.35rem; }
.catalog-result span { color: var(--muted); font-size: .88rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.catalog-course { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); transition: transform .2s ease,box-shadow .2s ease; }
.catalog-course:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(38,48,46,.13); }
.catalog-cover { position: relative; aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 22px; overflow: hidden; color: #fff; text-decoration: none; background: linear-gradient(135deg,#0a5c60,#0d7377 58%,#2f8f6f); }
.catalog-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 25%,rgba(0,45,47,.72)); }
.catalog-cover > * { position: relative; z-index: 1; }
.catalog-cover strong { max-width: calc(100% - 10px); font-size: 1.35rem; line-height: 1.35; }
.catalog-cover small { margin-top: 5px; opacity: .8; }
.catalog-no { position: absolute; top: 18px; left: 20px; color: rgba(255,255,255,.72); font-size: 1rem; font-weight: 800; }
.catalog-icon { position: absolute; top: 14px; right: 19px; font-size: 2rem; }
.career-cover { background: linear-gradient(135deg,#40544f,#607c73); }
.catalog-body { padding: 17px 18px 18px; }
.catalog-body h3 { margin: 0 0 8px; font-size: 1.05rem; }
.catalog-body h3 a { color: inherit; text-decoration: none; }
.catalog-body p { min-height: 48px; margin: 0 0 15px; color: var(--muted); font-size: .86rem; line-height: 1.7; }
.catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.catalog-meta b { color: var(--accent); }
.catalog-meta b.free { color: #1a7f43; }
.catalog-empty { padding: 54px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); }
.catalog-buy { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 42px; padding: 25px 30px; background: var(--accent-soft); border: 1px solid #b4d4d2; border-radius: 8px; }
.catalog-buy h2 { margin: 0 0 8px; font-size: 1.25rem; }
.catalog-buy p { margin: 0; color: var(--muted); }
.catalog-buy strong { color: var(--accent); }
.catalog-buy img { width: 116px; height: 116px; object-fit: cover; padding: 5px; background: #fff; border-radius: 6px; }
@media (max-width: 980px) { .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .catalog-filter-row { padding-right: 0; } .catalog-search { position: static; width: 100%; margin-top: 12px; } }
@media (max-width: 620px) { .course-catalog { padding-top: 28px; } .catalog-toolbar { padding: 14px; } .catalog-filter-row { align-items: flex-start; } .catalog-filter-row b { width: 100%; } .catalog-grid { grid-template-columns: 1fr; } .catalog-buy { align-items: flex-start; flex-direction: column; } }