.tool-card {



      position: relative;



      display: flex;



      overflow: hidden;



      min-height: 420px;



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



      border-radius: var(--radius);



      background: var(--paper-solid);



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



      text-decoration: none;



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



    }







    .tool-card:hover {



      transform: translateY(-5px);



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



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



    }







    .tool-card-inner {



      display: grid;



      width: 100%;



      grid-template-rows: 200px minmax(0, 1fr);



    }







    .tool-media {



      position: relative;



      overflow: hidden;



      background: #d9faff;



    }







    .tool-media img {



      width: 100%;



      height: 100%;



      display: block;



      object-fit: cover;



      transition: transform 380ms ease;



    }







    .tool-card:hover .tool-media img {



      transform: scale(1.045);



    }







    .tool-media.placeholder {



      display: grid;



      place-items: center;



      background:



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



        #f5fbff;



    }







    .placeholder-mark {



      display: grid;



      width: 76px;



      height: 76px;



      place-items: center;



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



      border-radius: var(--radius);



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



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



      font-size: 1.4rem;



      font-weight: 850;



    }







    .tool-body {



      display: flex;



      min-height: 0;



      flex-direction: column;



      padding: 18px;



    }







    .tool-meta {



      display: flex;



      align-items: center;



      justify-content: space-between;



      gap: 10px;



      margin-bottom: 14px;



    }







    .tag {



      display: inline-flex;



      align-items: center;



      max-width: 100%;



      min-height: 28px;



      padding: 5px 9px;



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



      border-radius: 999px;



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



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



      font-size: 0.76rem;



      font-weight: 820;



    }







    .tool-type {



      color: var(--muted);



      font-size: 0.78rem;



      font-weight: 760;



      white-space: nowrap;



    }







    .tool-card h3 {



      margin: 0;



      font-size: 1.2rem;



      line-height: 1.35;



    }







    .tool-card p {



      margin: 10px 0 18px;



      color: #5f6c7b;



      line-height: 1.68;



    }







    .tool-footer {



      display: flex;



      align-items: center;



      justify-content: space-between;



      gap: 14px;



      margin-top: auto;



      padding-top: 16px;



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



      color: #26395f;



      font-size: 0.9rem;



      font-weight: 760;



    }







    .arrow {



      display: grid;



      flex: 0 0 auto;



      width: 34px;



      height: 34px;



      place-items: center;



      border-radius: var(--radius);



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



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



    }







    .empty-state {



      display: none;



      padding: 34px;



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



      border-radius: var(--radius);



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



      color: var(--muted);



      text-align: center;



    }







    .empty-state.show {



      display: block;



    }