.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);



      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);



      box-shadow: 0 28px 64px rgba(0, 104, 255, 0.16);



    }







    .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)),



        #f5fbff;



    }







    .placeholder-mark {



      display: grid;



      width: 76px;



      height: 76px;



      place-items: center;



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



      border-radius: var(--radius);



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



      color: #0051cf;



      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-radius: 999px;



      background: rgba(0, 223, 246, 0.1);



      color: #0051cf;



      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));



      color: #0051cf;



    }







    .empty-state {



      display: none;



      padding: 34px;



      border: 1px dashed rgba(0, 104, 255, 0.25);



      border-radius: var(--radius);



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



      color: var(--muted);



      text-align: center;



    }







    .empty-state.show {



      display: block;



    }