.toc { display: flex; flex-direction: column; gap: 2px; }
      .toc a {
        display: flex; align-items: center; gap: 8px;
        padding: 6px 10px; border-radius: 6px; text-decoration: none;
        font-size: 12px; color: var(--sub); font-weight: 400;
        transition: background 0.15s, color 0.15s;
        border: 1px solid transparent;
      }
      .toc a:hover { background: var(--faint); color: var(--text); }
      .toc a.active { background: var(--blue-g); color: var(--blue-s); border-color: var(--blue-b); }
      .toc a i { width: 14px; text-align: center; font-size: 11px; color: var(--muted); flex-shrink: 0; }
      .toc a:hover i, .toc a.active i { color: var(--blue-s); }

      .uses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

      .use-card {
        border: 1px solid var(--border-mid); background: var(--card); border-radius: 8px;
        padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px;
        position: relative; overflow: hidden;
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
      }
      .use-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
        background: var(--card-accent, var(--blue));
        transform: scaleX(0); transform-origin: left;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        border-radius: 8px 8px 0 0;
      }
      .use-card:hover { border-color: var(--border-pop); background: var(--card2); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
      .use-card:hover::before { transform: scaleX(1); }

      .use-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
      .use-card-left { display: flex; align-items: center; gap: 10px; }
      .use-card-icon {
        width: 32px; height: 32px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; flex-shrink: 0;
      }
      .use-card-icon.blue { background: var(--blue-g); color: var(--blue-s); border: 1px solid var(--blue-b); }
      .use-card-icon.green { background: var(--green-g); color: var(--green-s); border: 1px solid var(--green-b); }
      .use-card-icon.violet { background: var(--violet-g); color: var(--violet); border: 1px solid var(--violet-b); }
      .use-card-icon.amber { background: var(--amber-g); color: var(--amber); border: 1px solid var(--amber-b); }

      .use-card-name { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; color: var(--blue-s); }
      .use-card:hover .use-card-name { color: var(--blue); }

      .use-card-desc {
        font-size: 12px; color: var(--sub); font-weight: 300;
        line-height: 1.65; letter-spacing: -0.003em; flex: 1;
      }
      .use-card-desc code {
        font-family: "Geist Mono", monospace; font-size: 10px;
        background: var(--faint); padding: 1px 5px; border-radius: 3px;
        border: 1px solid var(--border); color: var(--blue-s);
      }
      .use-card:hover .ptag { border-color: var(--border-pop); color: var(--sub); }

      .sec-count {
        font-family: "Geist Mono", monospace; font-size: 10px; color: var(--muted);
        letter-spacing: 0.04em; background: var(--faint);
        padding: 2px 7px; border-radius: 20px; border: 1px solid var(--border);
      }

      .use-empty {
        border-style: dashed; background: transparent; cursor: default;
        align-items: center; justify-content: center; min-height: 130px;
      }
      .use-empty:hover { border-color: var(--border-mid); background: transparent; box-shadow: none; }
      .use-empty::before { display: none; }

      @media (max-width: 760px) {
        .uses-grid { grid-template-columns: 1fr; }
      }