* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: "Microsoft YaHei", Arial, sans-serif;
      background:
        radial-gradient(circle at 12% 8%, rgba(47, 130, 120, .08), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(154, 116, 66, .08), transparent 32%),
        linear-gradient(135deg, #fbf7ee 0%, #f8f5ec 52%, #f1f7f3 100%);
      color: #24332f;
      min-height: 100vh;
    }
    .container {
      max-width: 1100px;
      margin: auto;
      padding: 36px 18px 60px;
    }
    .hero {
      position: relative;
      overflow: hidden;
      border-radius: 30px;
      padding: 50px 30px;
      text-align: center;
      color: #fff;
      background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .20), transparent 28%),
        linear-gradient(135deg, #163f3a 0%, #176b64 62%, #9a7442 100%);
      box-shadow: 0 18px 44px rgba(64, 54, 35, .14);
      margin-bottom: 30px;
    }
    .badge {
      display: inline-block;
      padding: 8px 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .22);
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 18px;

    }
    .hero h1 {
      font-size: clamp(32px, 5vw, 48px);
      line-height: 1.16;
      margin-bottom: 15px;
      letter-spacing: 0;
      font-weight: 950;
    }
    .hero p {
      font-size: 18px;
      line-height: 1.8;
      opacity: .96;
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 25px 0 35px;
    }
    .stat {
      background: rgba(255, 255, 255, .82);

      border-radius: 22px;
      padding: 22px;
      text-align: center;
      box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    }
    .stat strong {
      display: block;
      font-size: 30px;
      line-height: 1.25;
      color: #176b64;
      margin-bottom: 8px;
      font-weight: 950;
    }
    .stat span {
      color: #666;
      font-size: 15px;
    }
    .section-title {
      font-size: 28px;
      font-weight: 950;
      margin-bottom: 22px;
    }
    .directory-cta {
      display: block;
      width: fit-content;
      max-width: 100%;
      margin: 14px auto 0;
      text-decoration: none;
      color: #ffffff;
      font-size: 16px;
      font-weight: 950;
      line-height: 1.45;
      padding: 13px 28px;
      border-radius: 999px;
      background: linear-gradient(135deg, #176b64 0%, #2f8278 58%, #9a7442 100%);
      border: 2px solid rgba(255, 255, 255, .75);
      box-shadow: 0 12px 28px rgba(47, 130, 120, .18);
      transition: .22s ease;
    }
    .directory-cta:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 16px 34px rgba(47, 130, 120, .24);
    }
    .top-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.94);
      border: 1px solid #e7dfd2;
      box-shadow: 0 10px 28px rgba(15,23,42,.07);

    }
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: #64748b;
      font-size: 14px;
      line-height: 1.6;
    }
    .breadcrumb a {
      color: #176b64;
      text-decoration: none;
      font-weight: 850;
    }
    .breadcrumb span[aria-current="page"] {
      color: #334155;
      font-weight: 950;
    }
    .crumb-sep { color: #94a3b8; }
    .floating-actions {
      position: fixed;
      right: 18px;
      bottom: 20px;
      z-index: 50;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .floating-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      text-decoration: none;
      color: #fff;
      box-shadow: 0 14px 34px rgba(15,23,42,.22);
      font-size: 14px;
      font-weight: 950;
      white-space: nowrap;
    }
    .floating-back { background: linear-gradient(135deg,#176b64,#2f8278); }
    .floating-contact { background: linear-gradient(135deg,#176b64,#9a7442); }
    .stat strong.context-value {
      font-size: 22px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .search-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      margin: 0 0 22px;
      padding: 14px;
      border-radius: 24px;
      background: rgba(255, 255, 255, .96);
      border: 1px solid #e7dfd2;
      box-shadow: 0 10px 28px rgba(73, 58, 35, .07);
    }
    .search-input {
      width: 100%;
      min-height: 46px;
      padding: 0 18px;
      border: 1px solid #ddd3c4;
      border-radius: 999px;
      outline: none;
      color: #222;
      background: #fffdf8;
      font: inherit;
      font-size: 16px;
      font-weight: 800;
    }
    .search-input:focus {
      border-color: rgba(47, 130, 120, .62);
      box-shadow: 0 0 0 4px rgba(47, 130, 120, .10);
    }
    .search-input::placeholder {
      color: #9ca3af;
    }
    .clear-search {
      min-height: 46px;
      padding: 0 18px;
      border: 0;
      border-radius: 999px;
      color: #ffffff;
      background: linear-gradient(135deg, #176b64, #2f8278);
      box-shadow: 0 10px 24px rgba(47, 130, 120, .16);
      font: inherit;
      font-size: 14px;
      font-weight: 950;
      cursor: pointer;
    }
    .search-status {
      grid-column: 1 / -1;
      min-height: 20px;
      padding: 0 4px;
      color: #6b7280;
      font-size: 14px;
      font-weight: 800;
    }
    .purchased-tools { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    .purchased-toggle, .purchased-clear {
      min-height:40px; padding:0 15px; border:1px solid rgba(0,0,0,.08); border-radius:999px; color:#374151;
      background:#fffdf8; font:inherit; font-size:13px; font-weight:900; cursor:pointer;
    }
    .purchased-panel { grid-column:1 / -1; padding:14px; border-radius:18px; background:#fcfaf5; border:1px solid #e7dfd2; }
    .purchased-panel[hidden] { display:none; }
    .purchased-panel textarea {
      box-sizing:border-box; width:100%; min-height:120px; resize:vertical; padding:12px 14px; border-radius:14px; border:1px solid rgba(0,0,0,.08);
      color:#111827; background:rgba(255,255,255,.92); font:inherit; font-size:14px; line-height:1.6;
    }
    .purchased-panel-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:10px; color:#697386; font-size:13px; font-weight:800; }
    .purchased-check { display:inline-flex; gap:7px; align-items:center; }

    .search-empty {
      display: none;
      margin-top: 16px;
      padding: 24px;
      border-radius: 24px;
      text-align: center;
      color: #6b7280;
      background: rgba(255, 255, 255, .96);
      border: 1px solid #e7dfd2;
      font-weight: 900;
      box-shadow: 0 10px 28px rgba(73, 58, 35, .07);
    }
    .course-results {
      display: none;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    .course-result-card {
      display: block;
      content-visibility: auto;
      contain-intrinsic-size: 220px;
      min-height: 188px;
      padding: 24px;
      border-radius: 24px;
      text-decoration: none;
      color: #222;
      background: #fff;
      border: 1px solid rgba(255, 255, 255, .96);
      box-shadow: 0 10px 28px rgba(73, 58, 35, .07);
      transition: .22s ease;
    }
    .course-result-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 34px rgba(47, 130, 120, .13);
    }
    .result-kicker {
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      padding: 0 12px;
      border-radius: 999px;
      color: #6d4f25;
      background: linear-gradient(135deg, #f5e7c7, #ead19d);
      font-size: 13px;
      font-weight: 950;
    }
    .result-title {
      margin-top: 18px;
      color: #24332f;
      font-size: 21px;
      line-height: 1.28;
      font-weight: 950;
    }
    .result-path {
      margin-top: 10px;
      color: #697386;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 800;
    }
    .result-action {
      display: inline-flex;
      min-height: 38px;
      align-items: center;
      justify-content: center;
      margin-top: 18px;
      padding: 0 14px;
      border-radius: 999px;
      color: #ffffff;
      background: linear-gradient(135deg, #176b64, #9a7442);
      font-size: 14px;
      font-weight: 950;
    }
    .load-more-wrap {
      display: flex;
      justify-content: center;
      margin: 18px 0 0;
    }
    .load-more-results {
      display: none;
      min-height: 42px;
      padding: 0 20px;
      border: 0;
      border-radius: 999px;
      color: #ffffff;
      background: linear-gradient(135deg, #176b64, #2f8278);
      box-shadow: 0 10px 24px rgba(47, 130, 120, .16);
      font: inherit;
      font-size: 14px;
      font-weight: 950;
      cursor: pointer;
    }
    .course-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    .course-card {
      content-visibility: auto;
      contain-intrinsic-size: 190px;
      position: relative;
      overflow: hidden;
      background: #fff;
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 10px 28px rgba(73, 58, 35, .07);
      transition: .25s;
    }
    .course-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 34px rgba(47, 130, 120, .13);
    }
    .course-card::before {
      content: "";
      position: absolute;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      top: -35px;
      right: -35px;
      background: linear-gradient(135deg, #9a7442, #176b64);
      opacity: .15;
    }
    .course-card a {
      position: relative;
      z-index: 1;
      text-decoration: none;
      color: #222;
      display: block;
    }
    .course-no {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: linear-gradient(135deg, #176b64, #2f8278);
      color: #fff;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .course-title {
      font-size: 20px;
      font-weight: 950;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }
    .course-desc {
      margin-top: 12px;
      color: #777;
      font-size: 14px;
      line-height: 1.7;
    }
    .enter {
      margin-top: 18px;
      color: #176b64;
      font-weight: 950;
      font-size: 15px;
    }
    @media(max-width:768px) {
      .hero h1 { font-size: 30px; }
      .hero p { font-size: 16px; }
      .stats { grid-template-columns: 1fr; }
      .course-list,
      .course-results { grid-template-columns: 1fr; }
      .search-panel {
        grid-template-columns: 1fr;
      }
      .clear-search {
        width: 100%;
      }
      .directory-cta {
        width: 100%;
        font-size: 14px;
        padding: 12px 18px;
        text-align: center;
      }
      .top-nav {
        align-items: stretch;
        flex-direction: column;
      }
      .floating-actions { right: 12px; bottom: 14px; }
      .floating-actions a { min-height: 40px; padding: 0 14px; font-size: 13px; }
    }