[data-theme=light] {
  --cl:#333;
  --clBorder:#ddd;
  --clP:#666;
  --clFooter:#666;
  --bgHover:#f0f0f0;
  --bgActive:#e0e0e0;
  --bg:#f9f9f9;
  --bg2:#fff;
  --grad1r:249; --grad1g:249; --grad1b:249;
  --grad2r:0;   --grad2g:0;   --grad2b:0;
  --shadow:rgba(0, 0, 0, 0.05);
  --clBtn:#333;
  --bgBtn:#fff;
}
[data-theme=darkblue] {
  --cl:#e0e6ff;
  --clBorder:#1c2253;
  --clP:#aab2ff;
  --clFooter:#8795e8;
  --bgHover:#1c2253;
  --bgActive:#2a2f60;
  --bg:#0a0f2c;
  --bg2:#101840;
  --grad1r:10;  --grad1g:15;  --grad1b:44;
  --grad2r:255; --grad2g:255; --grad2b:255;
  --shadow:rgba(0, 0, 0, 0.2);
  --clBtn:#e0e6ff;
  --bgBtn:#162050;
}
[data-theme=dark] {
  --cl:#f1f1f1;
  --clBorder:#444;
  --clP:#ccc;
  --clFooter:#888;
  --bgHover:#2a2a2a;
  --bgActive:#333;
  --bg:#121212;
  --bg2:#1f1f1f;
  --grad1r:18;  --grad1g:18;  --grad1b:18;
  --grad2r:255; --grad2g:255; --grad2b:255;
  --shadow:rgba(0, 0, 0, 0.4);
  --clBtn:#eee;
  --bgBtn:#2a2a2a;
}
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg);
            color: var(--cl);
            background-image: linear-gradient(to right, rgba(var(--grad1r), var(--grad1g), var(--grad1b), 0.9) 10%, rgba(var(--grad1r), var(--grad1g), var(--grad1b), 0) 50%, rgba(var(--grad1r), var(--grad1g), var(--grad1b), 0.9) 90%),
                              linear-gradient(to bottom, rgba(var(--grad1r), var(--grad1g), var(--grad1b), 0.9) 10%, rgba(var(--grad1r), var(--grad1g), var(--grad1b), 0) 50%, rgba(var(--grad1r), var(--grad1g), var(--grad1b), 0.9) 90%),
                              repeating-linear-gradient(0deg, rgba(var(--grad2r), var(--grad2g), var(--grad2b), 0.1) 0px, rgba(var(--grad2r), var(--grad2g), var(--grad2b), 0.1) 1px, transparent 1px, transparent 40px),
                              repeating-linear-gradient(90deg, rgba(var(--grad2r), var(--grad2g), var(--grad2b), 0.1) 0px, rgba(var(--grad2r), var(--grad2g), var(--grad2b), 0.1) 1px, transparent 1px, transparent 40px);
            background-size: cover, cover, 40px 40px, 40px 40px;
        }
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        .hero {
            text-align: center;
            padding: 40px 0;
        }
        h1, h2 {
            font-weight: 600;
        }
        .tabs {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background: var(--bg2);
            padding: 10px;
            border-radius: 8px;
            box-shadow: 2px 2px 5px var(--shadow);
        }
        .tab {
            padding: 12px 20px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s ease;
            border-radius: 8px;
        }
        .tab:hover {
            background-color: var(--bgHover);
        }
        .tab:active {
            background-color: var(--bgActive);
        }
        .tab.active {
            background-color: var(--bgHover);
        }
        .categories {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            margin: 30px 0;
        }
        .category {
            background: var(--bg2);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
            font-weight: 500;
            border: 1px solid var(--clBorder);
            box-shadow: 2px 2px 5px var(--shadow);
        }
        .tool-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        .tool-card {
            background: var(--bg2);
            padding: 15px;
            border-radius: 12px;
            box-shadow: 2px 2px 10px var(--shadow);
            border: 1px solid var(--clBorder);
            max-width: 480px;
        }

.tool-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: relative;
}

.tool-card.show {
  opacity: 1;
  transform: translateY(0);
}

.tool-card.hide {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: none;
}

        .tool-card img {
            width: 100%;
            border-radius: 5px;
            aspect-ratio: 360 / 189;
            object-fit: cover;
        }
        .tool-card h3 {
            margin-top: 10px;
            font-size: 1.1em;
            font-weight: 600;
        }
        .tool-card h3 a {
            color:var(--cl);
            text-decoration:none;
        }
        .tool-card h3 a:hover {
            text-decoration:underline;
        }
        .tool-card p {
            font-size: 0.9em;
            color: var(--clP);
        }
        .cta {
            text-align: center;
            margin: 50px 0;
        }
        .cta a {
            display:block;
            text-decoration:none;
            margin:20px auto;
            width:160px;
            padding: 10px 20px;
            font-size: 1em;
            font-weight: 600;
            color: var(--clBtn);
            background: var(--bgBtn);
            border: 1px solid var(--clBorder);
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
            box-shadow: 2px 2px 5px var(--shadow);
        }
        .cta a:hover {
            background: var(--bgHover);
            transform: translateY(-2px);
        }
        .footer {
            text-align: center;
            padding: 20px 0;
            font-size: 0.9em;
            color: var(--clFooter);
        }