.hero {



      display: grid;



      grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.76fr);



      gap: clamp(24px, 5vw, 58px);



      align-items: center;



      padding: clamp(26px, 6vw, 72px) 0 36px;



    }







    .eyebrow {



      display: inline-flex;



      align-items: center;



      gap: 9px;



      width: fit-content;



      margin: 0 0 18px;



      padding: 8px 11px;



      border: 1px solid rgba(0, 223, 246, 0.42);

      border-color: color-mix(in srgb, var(--accent) 42%, transparent);



      border-radius: 999px;



      background: rgba(255, 255, 255, 0.72);



      color: var(--accent-strong);



      font-size: 0.82rem;



      font-weight: 700;



      box-shadow: 0 14px 34px rgba(0, 104, 255, 0.1);

      box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-strong) 10%, transparent);



    }







    .eyebrow::before {



      width: 8px;



      height: 8px;



      border-radius: 999px;



      background: var(--magenta);



      box-shadow: 0 0 0 4px rgba(255, 0, 127, 0.1);

      box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 10%, transparent);



      content: "";



    }







    h1 {



      max-width: 780px;



      margin: 0;



      color: var(--headline, var(--ink, #07132f)); /* 主标题色：暗底配浅色 hero 字 */



      font-size: 6.7rem;



      line-height: 0.88;



      letter-spacing: 0;



    }







    .hero-lede {



      max-width: 620px;



      margin: 18px 0 0;



      color: #475467;
      color: var(--headline, var(--muted, #475467)); /* 主标题色跟随 */



      font-size: 1.18rem;



      line-height: 1.72;



    }







    .hero-slogan {



      margin: 22px 0 0;



      color: #00615d;
      color: var(--slogan, #00615d); /* 主题套装跟随 */



      font-size: 2.36rem;



      font-weight: 850;



      line-height: 1.04;



      text-shadow: 0 0 24px rgba(0, 223, 246, 0.24);
      text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 24%, transparent); /* 主题套装跟随（fallback：上一行原值） */



    }







    .hero-actions {



      display: flex;



      flex-wrap: wrap;



      gap: 12px;



      margin-top: 40px;



    }







    .button {



      display: inline-flex;



      align-items: center;



      justify-content: center;



      min-height: 46px;



      padding: 12px 16px;



      border: 1px solid rgba(7, 19, 47, 0.12);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.72);



      color: var(--ink);



      font-weight: 760;



      text-decoration: none;



      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;



    }







    .button:hover {



      transform: translateY(-2px);



      border-color: rgba(0, 223, 246, 0.58);
      border-color: color-mix(in srgb, var(--accent) 58%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      background: #fff;



      box-shadow: 0 14px 28px rgba(0, 104, 255, 0.12);
      box-shadow: 0 14px 28px color-mix(in srgb, var(--accent-strong) 12%, transparent); /* 主题套装跟随（fallback：上一行原值） */



    }







    .button.primary {



      border-color: rgba(0, 223, 246, 0.54);
      border-color: color-mix(in srgb, var(--accent) 54%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      background: linear-gradient(135deg, #053dff, #0068ff, #00dff6, #053dff);
      background: linear-gradient(135deg, var(--accent-strong), var(--accent-strong), var(--accent), var(--accent-strong)); /* 主题套装跟随（fallback：上一行原值） */
      background-size: 300% 300%;
      animation: gradientFlow 4s ease infinite;



      color: #fff;



      box-shadow: 0 20px 40px rgba(0, 104, 255, 0.25);
      box-shadow: 0 20px 40px color-mix(in srgb, var(--accent-strong) 25%, transparent); /* 主题套装跟随（fallback：上一行原值） */



    }







    .button.primary:hover {
      animation-play-state: paused;
      background: linear-gradient(135deg, #071342 0%, #0068ff 48%, #00dff6 100%);
      background: linear-gradient(135deg, var(--navy) 0%, var(--accent-strong) 48%, var(--accent) 100%); /* 主题套装跟随（fallback：上一行原值） */



    }

    @keyframes gradientFlow {

      0%   { background-position: 0% 50%; }

      50%  { background-position: 100% 50%; }

      100% { background-position: 0% 50%; }

    }








    .hero-panel {



      position: relative;



      overflow: hidden;



      min-height: 480px;



      border: 1px solid rgba(0, 223, 246, 0.3);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      border-radius: var(--radius);



      background:



        linear-gradient(160deg, rgba(7, 19, 66, 0.1), rgba(0, 223, 246, 0.04)),
        linear-gradient(160deg, color-mix(in srgb, var(--navy) 10%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)),; /* 主题套装跟随（fallback：上一行原值） */



        url("assets/endril-avatar.png") center / cover;



      box-shadow: var(--shadow);



      isolation: isolate;



    }







    .hero-panel::before {



      position: absolute;



      inset: 0;



      z-index: -1;



      content: "";



      background:



        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(7, 19, 66, 0.28)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), color-mix(in srgb, var(--navy) 28%, transparent)),; /* 主题套装跟随（fallback：上一行原值） */



        linear-gradient(135deg, rgba(0, 223, 246, 0.16), transparent 44%, rgba(255, 0, 127, 0.16));
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 44%, color-mix(in srgb, var(--magenta) 16%, transparent)); /* 主题套装跟随（fallback：上一行原值） */



    }







    .panel-card {



      position: absolute;



      right: 22px;



      bottom: 22px;



      left: 22px;



      border: 1px solid rgba(255, 255, 255, 0.72);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.86);



      box-shadow: 0 24px 56px rgba(7, 19, 66, 0.24);
      box-shadow: 0 24px 56px color-mix(in srgb, var(--navy) 24%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      backdrop-filter: blur(18px);



    }







    .panel-card-header {



      display: flex;



      align-items: center;



      justify-content: space-between;



      gap: 12px;



      padding: 18px 18px 12px;



      border-bottom: 1px solid rgba(7, 19, 47, 0.08);



    }







    .panel-label {



      color: var(--muted);



      font-size: 0.78rem;



      font-weight: 800;



      text-transform: uppercase;



    }







    .panel-status {



      display: inline-flex;



      align-items: center;



      min-height: 28px;



      padding: 5px 9px;



      border-radius: 999px;



      background: rgba(0, 223, 246, 0.14);
      background: color-mix(in srgb, var(--accent) 14%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      color: #0051cf;
      color: var(--accent-strong); /* 主题套装跟随（fallback：上一行原值） */



      font-size: 0.75rem;



      font-weight: 800;



      white-space: nowrap;



    }

    /* Featured 履历标签：由 span 改为可点击超链接，但保持胶囊外观 */
    a.panel-status {
      text-decoration: none;
      color: #0051cf;
      color: var(--accent-strong); /* 主题套装跟随（fallback：上一行原值） */
      cursor: pointer;
      transition: filter 0.15s ease, transform 0.15s ease;
    }
    a.panel-status:hover {
      filter: brightness(0.96);
      transform: translateY(-1px);
    }
    a.panel-status svg {
      width: 14px;
      height: 14px;
      margin-right: 5px;
      vertical-align: -2px;
    }







    .panel-feature {



      display: grid;



      /* First col: fixed 74px; second col: fills remaining space */

      grid-template-columns: 74px minmax(0, 1fr);



      gap: 14px;



      align-items: start;        /* was 'center' — vertical center caused overlap when text was tall */



      padding: 18px;



      overflow: hidden;           /* hard clip any overflow into image zone */



    }







    .panel-feature img {



      width: 74px;



      height: 74px;



      border: 1px solid rgba(0, 223, 246, 0.28);
      border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      border-radius: var(--radius);



      object-fit: cover;



      grid-row: 1 / span 2;       /* span both text rows so img stays left of ALL text */



    }



    /* FEATURED 卡片无封面占位（轮换用，与 .panel-feature img 同步响应 860px 断点） */



    .featured-thumb-placeholder {



      width: 74px;



      height: 74px;



      border: 1px solid rgba(0, 223, 246, 0.42);

      border-color: color-mix(in srgb, var(--accent) 42%, transparent);



      border-radius: var(--radius);



      display: grid;



      place-items: center;



      background:

        linear-gradient(135deg, rgba(0, 223, 246, 0.22), rgba(255, 0, 127, 0.14)),
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--magenta) 14%, transparent)),; /* 主题套装跟随（fallback：上一行原值） */

        #f5fbff;



      color: #0051cf;
      color: var(--accent-strong); /* 主题套装跟随（fallback：上一行原值） */



      font-size: 1.4rem;



      font-weight: 850;



      grid-row: 1 / span 2;       /* span both text rows so placeholder stays left of ALL text */



      flex-shrink: 0;



    }







    .panel-feature h2 {



      margin: 0;



      font-size: 1.12rem;



      line-height: 1.28;



      overflow: hidden;



      text-overflow: ellipsis;



      white-space: nowrap;



      min-width: 0;



    }







    .panel-feature p {



      margin: 7px 0 0;



      color: #5f6c7b;



      font-size: 0.88rem;



      line-height: 1.55;



      overflow: hidden;



      display: -webkit-box;



      -webkit-line-clamp: 2;



      -webkit-box-orient: vertical;



      min-width: 0;



    }







    .stats {



      display: grid;



      grid-template-columns: repeat(3, minmax(0, 1fr));



      gap: 12px;



      padding: 0 18px 18px;



    }







    .stat {



      min-width: 0;



      padding: 12px;



      border: 1px solid rgba(7, 19, 47, 0.08);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.62);



      display: flex;



      flex-direction: column;



      align-items: center;



      justify-content: center;



    }







    .stat strong {



      display: block;



      font-size: 1.28rem;



      line-height: 1;



      text-align: center;



    }







    .stat span {



      display: block;



      margin-top: 6px;



      color: var(--muted);



      font-size: 0.74rem;



      line-height: 1.25;



      text-align: center;



    }







    .section {



      padding: 36px 0 64px;



    }







    .section-head {



      display: flex;



      align-items: end;



      justify-content: space-between;



      gap: 24px;



      margin-bottom: 18px;



    }







    .section-title {



      margin: 0;
      color: var(--headline, var(--ink, #07132f)); /* 主标题色：统一 Hero 大标题与分区标题 */



      font-size: 2.86rem;



      line-height: 1;



    }







    .section-copy {



      max-width: 570px;



      margin: 12px 0 0;



      color: #5f6c7b;



      line-height: 1.72;



    }







    .tools-count {



      flex: 0 0 auto;



      min-height: 38px;



      padding: 10px 12px;



      border: 1px solid rgba(7, 19, 47, 0.1); /* 首页 chip 固定淡描边：不跟随 line（只控两处）/ 不蹭 fab-border（非 FAB 体系） */



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.72);



      color: #26395f;



      font-size: 0.9rem;



      font-weight: 760;



      white-space: nowrap;



    }







    .controls {



      position: sticky;



      top: 0;



      z-index: 3;



      display: grid;



      grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);



      gap: 12px;



      align-items: center;



      margin: 24px 0;



      padding: 10px;



      border: 1px solid rgba(0, 223, 246, 0.22);
      border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.78);



      box-shadow: 0 14px 34px rgba(0, 104, 255, 0.09);
      box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-strong) 9%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      backdrop-filter: blur(18px);



    }







    .search {



      width: 100%;



      height: 46px;



      padding: 0 14px;



      border: 1px solid rgba(7, 19, 47, 0.12);



      border-radius: var(--radius);



      outline: none;



      background: rgba(255, 255, 255, 0.72);



      color: var(--ink);



    }







    .search:focus {



      border-color: rgba(0, 223, 246, 0.62);
      border-color: color-mix(in srgb, var(--accent) 62%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      box-shadow: 0 0 0 4px rgba(0, 223, 246, 0.16);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); /* 主题套装跟随（fallback：上一行原值） */



    }







    .filter-row {



      display: flex;



      flex-wrap: wrap;



      justify-content: flex-end;



      gap: 8px;



    }







    .filter-button {



      min-height: 38px;



      padding: 8px 11px;



      border: 1px solid rgba(7, 19, 47, 0.1);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.7);



      color: #26395f;



      cursor: pointer;



      font-size: 0.88rem;



      font-weight: 760;



      transition: background 160ms ease, border-color 160ms ease, color 160ms ease;



    }







    .filter-button:hover,



    .filter-button.active {



      border-color: rgba(0, 223, 246, 0.58);
      border-color: color-mix(in srgb, var(--accent) 58%, transparent); /* 主题套装跟随（fallback：上一行原值） */



      background: linear-gradient(135deg, rgba(0, 223, 246, 0.16), rgba(124, 255, 0, 0.12));
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--lime) 12%, transparent)); /* 主题套装跟随（fallback：上一行原值） */



      color: #0051cf;
      color: var(--accent-strong); /* 主题套装跟随（fallback：上一行原值） */



    }







    .grid {



      display: grid;



      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));



      gap: 18px;



      align-items: stretch;



    }