.dev-toolbox {
  --card-bg: var(--bg);
  --card-border: var(--fg);
  --shadow: 6px 6px 0 var(--fg);

  padding: 0 0 2rem;

  .tool-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .tool-card {
    display: grid;
    gap: 0.6rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow);

    h2 {
      margin: 0 0 0.2rem;
      font-size: 1.2rem;
    }

    label {
      font-size: 0.875rem;
      font-weight: 700;
      opacity: 0.85;
    }

    input,
    textarea {
      width: 100%;
      box-sizing: border-box;
      border: 2px solid var(--fg);
      border-radius: 0.375rem;
      background: var(--bg);
      color: var(--fg);
      font-size: 0.95rem;
      padding: 0.7rem 0.8rem;
      font-family:
        "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;
    }

    textarea {
      resize: vertical;
      min-height: 7rem;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    button {
      border: 2px solid var(--fg);
      border-radius: 0.375rem;
      padding: 0.55rem 0.9rem;
      font-weight: 700;
      background: var(--link);
      color: #fff;
      box-shadow: 3px 3px 0 var(--fg);
      transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;

      &:hover {
        opacity: 0.92;
        transform: translate(-1px, -1px);
        box-shadow: 4px 4px 0 var(--fg);
      }

      &:active {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0 var(--fg);
      }
    }
  }
}

.dark .dev-toolbox {
  --card-bg: var(--bg);
  --card-border: var(--fg);
  --shadow: 6px 6px 0 var(--fg);
}