:root{--bg:#06080c;--surface:#0c0f15;--card:#0f1318;--card-h:#141820;--border:#1a2030;--border-h:#28354a;--accent:#e8ff47;--accent-dim:rgba(232,255,71,0.1);--red:#ff4545;--red-dim:rgba(255,69,69,0.12);--green:#2aff9e;--green-dim:rgba(42,255,158,0.1);--blue:#47b0ff;--blue-dim:rgba(71,176,255,0.1);--purple:#b47fff;--purple-dim:rgba(180,127,255,0.1);--orange:#ff9640;--text:#ffffff;--muted:#7a90a8;--dim:#2a3848;--mono:"IBM Plex Mono",monospace;--display:"Bebas Neue",sans-serif;--body:"DM Sans",sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;overflow-x:hidden}
.amb{position:fixed;border-radius:50%;filter:blur(140px);pointer-events:none;z-index:0}
.amb1{width:600px;height:600px;top:-200px;left:-200px;background:rgba(180,127,255,.018)}
.amb2{width:500px;height:500px;bottom:-150px;right:-150px;background:rgba(232,255,71,.014)}

/* HEADER — shared across all pages */
header{position:sticky;top:0;z-index:100;background:rgba(6,8,12,.96);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.hdr{max-width:1600px;margin:0 auto;padding:0 1.5rem;height:56px;display:flex;align-items:center;gap:1.5rem}
.wordmark{display:flex;align-items:baseline;gap:8px;text-decoration:none;flex-shrink:0}
.wm-main{font-family:var(--display);font-size:2rem;letter-spacing:.05em;color:var(--text);line-height:1}

/* primary nav — centre-right tabs */
.hdr-nav{display:flex;align-items:center;gap:.2rem;flex:1;justify-content:center}
.hnav{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:6px 14px;border:1px solid transparent;border-radius:2px;transition:all .15s;white-space:nowrap}
.hnav:hover{color:var(--text);border-color:var(--border-h);box-shadow:0 0 6px rgba(255,255,255,.05)}
.hnav.on{background:var(--accent);color:#06080c;border-color:var(--accent);font-weight:700;box-shadow:0 0 14px rgba(232,255,71,.35),0 0 4px rgba(232,255,71,.2)}
.hnav.soon{opacity:.4;cursor:default;pointer-events:none}
/* right side of header */
.hdr-r{display:flex;align-items:center;gap:.75rem;flex-shrink:0;margin-left:auto}
.live-lbl{font-family:var(--mono);font-size:.54rem;color:var(--green);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:hb 2.4s ease-in-out infinite}
@keyframes hb{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.4)}}
.hdr-clock{font-family:var(--mono);font-size:.54rem;color:var(--muted);letter-spacing:.05em;min-width:56px;text-align:center}
.btn-ref{font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:none;border:1px solid rgba(232,255,71,.45);padding:5px 11px;border-radius:3px;cursor:pointer;transition:all .15s;white-space:nowrap;box-shadow:0 0 8px rgba(232,255,71,.15)}
.btn-ref:hover{background:var(--accent-dim);box-shadow:0 0 14px rgba(232,255,71,.28)}
.btn-ref:disabled{opacity:.4;cursor:default}
.submit-btn{font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#06080c;background:var(--accent);border:1px solid var(--accent);padding:5px 12px;border-radius:3px;cursor:pointer;font-weight:700;transition:all .15s;white-space:nowrap;box-shadow:0 0 14px rgba(232,255,71,.3)}
.submit-btn:hover{opacity:.88;box-shadow:0 0 20px rgba(232,255,71,.45)}
.sico{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* CONTROL BAR — categories + search + nav, one sticky row */
.cbar{position:sticky;top:56px;z-index:90;border-bottom:1px solid var(--border);background:var(--surface)}
.cbar-in{max-width:1600px;margin:0 auto;padding:0 1.5rem;height:50px;display:flex;align-items:center;gap:.5rem;overflow-x:auto}
.cbar-in::-webkit-scrollbar{display:none}
.cat-btn{font-family:var(--mono);font-size:.54rem;letter-spacing:.07em;text-transform:uppercase;background:none;border:1px solid var(--border);color:var(--muted);padding:5px 11px;border-radius:2px;cursor:pointer;transition:all .13s;white-space:nowrap;flex-shrink:0}
.cat-btn:hover{color:var(--text);border-color:var(--border-h)}
.cat-btn.on{background:var(--accent);color:#06080c;border-color:var(--accent);font-weight:700;box-shadow:0 0 14px rgba(232,255,71,.35),0 0 4px rgba(232,255,71,.2)}
.cdiv{width:1px;height:24px;background:var(--border);flex-shrink:0}
/* search in cbar */
.cbar-srch{position:relative;width:180px;flex-shrink:0}
.cbar-srch input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-family:var(--body);font-size:.76rem;padding:6px 10px 6px 28px;border-radius:3px;outline:none;transition:border-color .15s}
.cbar-srch input:focus{border-color:var(--border-h)}
.cbar-srch input::placeholder{color:var(--muted)}
/* nav links — rightmost */





/* TOOLS GRID */
.tools-wrap{max-width:1600px;margin:0 auto;padding:1.5rem 1.5rem 7rem;position:relative;z-index:5}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.tool-card{background:var(--card);padding:1.4rem;display:flex;flex-direction:column;gap:.85rem;transition:background .15s;cursor:pointer;position:relative;overflow:hidden;text-decoration:none;color:inherit}
.tool-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,255,71,.03),transparent);opacity:0;transition:opacity .2s}
.tool-card:hover{background:var(--card-h)}.tool-card:hover::before{opacity:1}
.tc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.tc-icon{width:42px;height:42px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;background:rgba(255,255,255,.03)}
.tc-badges{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
.badge{font-family:var(--mono);font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:2px}
.badge-free{background:var(--green-dim);color:var(--green);border:1px solid rgba(42,255,158,.2)}
.badge-paid{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,69,69,.2)}
.badge-freemium{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(71,176,255,.2)}
.badge-new{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(232,255,71,.25)}
.badge-hot{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,69,69,.25);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.tc-name{font-family:var(--display);font-size:1.3rem;letter-spacing:.04em;color:var(--text)}
.tc-tagline{font-size:.8rem;color:var(--muted);line-height:1.55;flex:1}
.tc-cats{display:flex;gap:.3rem;flex-wrap:wrap}
.tc-cat{font-family:var(--mono);font-size:.46rem;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:2px;background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border)}
.tc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:.7rem;border-top:1px solid var(--border);margin-top:auto}
.tc-link{font-family:var(--mono);font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:4px;transition:gap .12s}
.tool-card:hover .tc-link{gap:8px}
.tc-rating{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:.52rem;color:var(--muted)}
.star{color:var(--accent);font-size:.65rem}

/* EMPTY / SUBMIT */
.no-results{text-align:center;padding:5rem 2rem;color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.submit-tool-banner{background:linear-gradient(135deg,rgba(232,255,71,.06),rgba(71,176,255,.04));border:1px solid rgba(232,255,71,.15);border-radius:8px;padding:2rem;text-align:center;margin:2rem 0}
.stb-title{font-family:var(--display);font-size:1.6rem;letter-spacing:.04em;margin-bottom:.5rem}
.stb-sub{font-size:.82rem;color:var(--muted);margin-bottom:1.2rem;line-height:1.6}
.stb-btn{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#06080c;border:none;padding:8px 20px;border-radius:3px;cursor:pointer;font-weight:700;transition:opacity .15s}
.stb-btn:hover{opacity:.82}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border-h);border-radius:10px;max-width:560px;width:100%;padding:2rem;position:relative;animation:mfade .2s ease}
@keyframes mfade{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:3px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .13s}
.modal-close:hover{color:var(--text);border-color:var(--border-h)}
.modal h3{font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;margin-bottom:1.2rem;padding-right:2rem}
.modal label{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;margin-top:.9rem}
.modal input,.modal textarea,.modal select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-family:var(--body);font-size:.82rem;padding:8px 10px;border-radius:3px;outline:none;transition:border-color .15s}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--border-h)}
.modal textarea{resize:vertical;min-height:80px}
.modal select option{background:var(--surface)}
.modal-footer{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.4rem}
.btn-cancel{font-family:var(--mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;background:none;border:1px solid var(--border);color:var(--muted);padding:7px 14px;border-radius:3px;cursor:pointer;transition:all .13s}
.btn-cancel:hover{color:var(--text);border-color:var(--border-h)}
.btn-submit{font-family:var(--mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;background:var(--accent);color:#06080c;border:none;padding:7px 18px;border-radius:3px;cursor:pointer;font-weight:700;transition:opacity .15s}
.btn-submit:hover{opacity:.82}

@media(max-width:680px){.tools-grid{grid-template-columns:1fr}.tools-wrap{padding:1rem 1rem 5rem}.cbar-in{height:auto;padding:.5rem 1rem;flex-wrap:wrap}.cbar-nav{margin-left:0;width:100%}}

/* TICKER FOOTER */
.tools-footer{position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(6,8,12,.97);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ttrack-wrap{height:28px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--border)}
.ttrack{display:flex;align-items:center;white-space:nowrap;animation:tk 80s linear infinite}
.tools-footer:hover .ttrack{animation-play-state:paused}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.titem{font-family:var(--mono);font-size:.52rem;color:var(--muted);padding:0 1.8rem;letter-spacing:.03em}
.titem a{color:inherit;text-decoration:none;transition:color .12s}
.titem a:hover{color:var(--accent)}
.made-bar{height:22px;display:flex;align-items:center;justify-content:center}
.made-txt{font-family:var(--mono);font-size:.48rem;color:var(--dim);letter-spacing:.08em}
.made-txt a{color:var(--muted);text-decoration:none;transition:color .12s}
.made-txt a:hover{color:var(--accent)}
.thot{color:var(--accent)!important}

/* ── WORDPRESS THEME ADDITIONS ────────────────────────────────── */
.hnav{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:5px 14px;border:1px solid transparent;border-radius:2px;transition:all .13s;white-space:nowrap}
.hnav:hover{color:var(--text);border-color:var(--border-h)}
.hnav.on{background:var(--accent);color:#06080c;border-color:var(--accent);font-weight:700;box-shadow:0 0 14px rgba(232,255,71,.35)}
.hdr-srch{position:relative;display:flex;align-items:center;flex-shrink:0}
.hdr-srch input,.hdr-srch input[type="search"]{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);font-family:var(--body);font-size:.74rem;padding:5px 10px 5px 28px;border-radius:3px;outline:none;transition:border-color .15s;width:160px;-webkit-appearance:none}
.hdr-srch input:focus{border-color:var(--border-h)}
.hdr-srch input::placeholder{color:var(--muted)}
.hdr-srch .sico{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.site-footer{position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(6,8,12,.97);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ttrack-wrap{height:28px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--border)}
.ttrack{display:flex;align-items:center;white-space:nowrap;animation:tk 80s linear infinite}
.site-footer:hover .ttrack{animation-play-state:paused}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.made-bar{height:22px;display:flex;align-items:center;justify-content:center}
.made-txt{font-family:var(--mono);font-size:.48rem;color:var(--dim);letter-spacing:.08em}
.made-txt a{color:var(--muted);text-decoration:none}
.made-txt a:hover{color:var(--accent)}

.wordmark{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.site-logo{height:36px!important;width:auto!important;max-width:180px!important;object-fit:contain!important;display:block}
