:root{--bg: #0a0b0e;--card-bg: #12151e;--border: #1e2433;--accent: #ffb07c;--accent-glow: rgba(255, 176, 124, .15);--text: #e2e8f0;--text-muted: #8b949e}*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}.bg{background-color:var(--bg);color:var(--text);min-height:100vh;padding:2rem 1rem 4rem}.container{max-width:1200px;margin:0 auto}.back-link{color:var(--accent);text-decoration:none;font-size:.85rem;display:inline-block;margin-bottom:1rem;transition:opacity .2s}.back-link:hover{opacity:.8}.header{text-align:center;margin-bottom:2.5rem}.logo{font-size:2.8rem;font-weight:900;color:var(--accent);letter-spacing:-1px;text-shadow:0 0 25px var(--accent-glow)}h1{font-size:1.8rem;margin-top:.2rem;letter-spacing:1px}.tag{background:var(--accent-glow);color:var(--accent);font-size:.75rem;padding:.2rem .5rem;border-radius:4px;border:1px solid var(--accent)}.subtitle{color:var(--text-muted);font-size:.85rem;margin-top:.4rem}.controls{margin-bottom:2.5rem;display:flex;flex-direction:column;gap:1rem;align-items:center}#search-input{width:100%;max-width:580px;background:var(--card-bg);border:1px solid var(--border);padding:.75rem 1rem;border-radius:8px;color:var(--text);font-size:.9rem;box-shadow:0 8px 24px #0006}#search-input:focus{outline:none;border-color:var(--accent)}.categories{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.cat-btn{background:var(--card-bg);border:1px solid var(--border);color:var(--text-muted);padding:.4rem .8rem;border-radius:6px;font-size:.78rem;cursor:pointer;transition:all .2s}.cat-btn:hover,.cat-btn.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.5rem}.no-results{grid-column:1 / -1;text-align:center;color:var(--text-muted);padding:3rem}.card{background-color:#12151e!important;border:1px solid #1e2433!important;border-radius:12px!important;width:100%;min-height:240px;padding:1.25rem!important;color:#e2e8f0!important;transition:all .25s ease!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;box-shadow:0 8px 24px #0006!important}.card:hover{border-color:#ffb07c!important;transform:translateY(-4px)!important;box-shadow:0 12px 30px #ffb07c26!important;background-color:#161a26!important}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.badge{font-size:.65rem;color:#ffb07c;text-transform:uppercase;letter-spacing:1px;font-weight:700}.card h2{font-size:1.1rem;margin-bottom:.3rem;color:#fff}.card p{color:#8b949e;font-size:.8rem;line-height:1.35;margin-bottom:1rem}.card-interactive-area{display:flex;flex-direction:column;gap:.55rem;margin-top:auto}textarea,input[type=text],input[type=number]{width:100%;background:#0a0b0e;border:1px solid #1e2433;border-radius:6px;padding:.5rem;color:#e2e8f0;font-family:monospace;font-size:.8rem}textarea{min-height:55px;resize:vertical}textarea:focus,input:focus{outline:none;border-color:#ffb07c}.btn-group{display:flex;gap:.4rem;flex-wrap:wrap}.inline-inputs{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#8b949e}.output-group{display:flex;gap:.4rem}.output-group input{flex-grow:1}button{background:#ffb07c;color:#000;border:none;padding:.4rem .75rem;border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer;transition:opacity .2s}button:hover{opacity:.85}.btn-full{width:100%}.btn-copy{background:#1e2433;color:#e2e8f0}.btn-copy:hover{background:#2e364a}.res-box{font-size:.75rem;background:#0a0b0e;padding:.5rem;border-radius:6px;border:1px solid #1e2433;color:#ffb07c;font-family:monospace;text-align:center}.toast{position:fixed;bottom:20px;right:20px;background:#ffb07c;color:#000;padding:.6rem 1.2rem;border-radius:8px;font-weight:600;font-size:.85rem;box-shadow:0 4px 16px #00000080;opacity:0;transform:translateY(20px);transition:all .3s ease;pointer-events:none;z-index:1000}.toast.show{opacity:1;transform:translateY(0)}<div class="logo-container"> <img src="/logo_42.png" alt="42 Logo" class="site-logo" /> </div> .logo-container{display:flex;align-items:center}.site-logo{height:42px;width:auto;filter:drop-shadow(0 0 8px rgba(255,176,124,.4));transition:transform .2s}.site-logo:hover{transform:scale(1.05)}