/* ============================================================ ToolsNovaHub — main.css ============================================================ */ :root{ --bg:#07090f;--surf:#0d1117;--s2:#111827;--s3:#1a2235; --border:#2a3a52;--b2:#33475f; --p:#7c3aed;--p2:#06b6d4;--warn:#f59e0b; --danger:#ef4444;--ok:#10b981;--info:#3b82f6; --text:#f1f5f9;--t2:#cbd5e1;--t3:#a3b3c9; --mono:"JetBrains Mono",monospace; --sans:"Inter",sans-serif; --r:12px;--rs:8px; --grd:linear-gradient(135deg,#7c3aed,#06b6d4); --sw:240px; } /* ============================================================ LIGHT THEME (Daylight Mode) Activated via ============================================================ */ html[data-theme="light"]{ --bg:#f4f6fb;--surf:#ffffff;--s2:#f1f5f9;--s3:#e8edf5; --border:#cbd5e1;--b2:#a8b6c8; --p:#7c3aed;--p2:#0891b2;--warn:#d97706; --danger:#dc2626;--ok:#059669;--info:#2563eb; --text:#0f172a;--t2:#3f4d63;--t3:#5b6b82; --grd:linear-gradient(135deg,#7c3aed,#0891b2); } html[data-theme="light"] body{background:var(--bg);color:var(--text);} html[data-theme="light"] .ad-slot{background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(8,145,178,.05));} html[data-theme="light"] .hero-illustration svg, html[data-theme="light"] .hero-illustration{background:#0d1117;} html[data-theme="light"] ::-webkit-scrollbar-track{background:#e8edf5;} html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#cbd5e1;} html[data-theme="light"] .iph, html[data-theme="light"] .age-card{box-shadow:0 1px 3px rgba(0,0,0,.06);} html[data-theme="light"] .card, html[data-theme="light"] .tc, html[data-theme="light"] .cc, html[data-theme="light"] .sc, html[data-theme="light"] .tic, html[data-theme="light"] .iph, html[data-theme="light"] .tp-card, html[data-theme="light"] .fc{box-shadow:0 1px 2px rgba(15,23,42,.04);} /* ── THEME TOGGLE BUTTON ──────────────────────────────── */ .theme-toggle{ display:flex;align-items:center;justify-content:space-between;gap:8px; margin:10px 16px;padding:8px 12px; background:var(--s2);border:1px solid var(--border);border-radius:var(--rs); cursor:pointer;transition:all .2s;font-size:12px;color:var(--t2); font-weight:600; } .theme-toggle:hover{border-color:var(--p);} .theme-toggle .tt-icons{display:flex;align-items:center;gap:6px;} .theme-toggle .tt-track{ position:relative;width:38px;height:20px;border-radius:20px; background:var(--border);transition:background .25s;flex-shrink:0; } .theme-toggle .tt-thumb{ position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:var(--grd);transition:transform .25s; display:flex;align-items:center;justify-content:center;font-size:12px; } html[data-theme="light"] .theme-toggle .tt-thumb{transform:translateX(18px);} html[data-theme="light"] .theme-toggle .tt-track{background:#e0e7ff;} /* ── RESET & BASE ─────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth;} body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;display:flex;overflow-x:hidden;} a{text-decoration:none;color:inherit;} button{font-family:var(--sans);cursor:pointer;} input,textarea,select{font-family:var(--sans);} img{max-width:100%;height:auto;} /* ── LAYOUT ───────────────────────────────────────────── */ .app{display:flex;min-height:100vh;width:100%;} .sb{width:var(--sw);background:var(--surf);border-right:1px solid var(--border); position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:200; display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);} .mw{margin-left:var(--sw);flex:1;min-height:100vh;display:flex;flex-direction:column; width:calc(100% - var(--sw));overflow-x:hidden;} .mh{display:none;background:var(--surf);border-bottom:1px solid var(--border); padding:10px 14px;align-items:center;gap:10px;position:sticky;top:0;z-index:100;} .pw{flex:1;padding:20px 24px 60px;max-width:1320px;width:100%;margin:0 auto;} .ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:150; backdrop-filter:blur(3px);} .ov.show{display:block;} /* ── SIDEBAR ──────────────────────────────────────────── */ .logo-w{padding:16px 16px 12px;border-bottom:1px solid var(--border);} .logo-i{display:flex;align-items:center;gap:10px;} .logo-t{font-size:15px;font-weight:800;background:var(--grd); -webkit-background-clip:text;-webkit-text-fill-color:transparent;} .logo-s{font-size:11px;color:var(--t3);letter-spacing:2px;text-transform:uppercase;margin-top:1px;} .ns{font-size:11px;color:var(--t3);letter-spacing:2.5px;text-transform:uppercase;padding:13px 16px 5px;} .nl{display:flex;align-items:center;gap:9px;padding:10px 16px;color:var(--t2); font-size:13.5px;font-weight:500;border-left:3px solid transparent;transition:all .15s;cursor:pointer;} .nl:hover{background:rgba(124,58,237,.08);color:var(--text);} .nl.act{background:rgba(124,58,237,.12);color:var(--p);border-left-color:var(--p);} .ni{width:18px;text-align:center;font-size:15px;} .sb-ft{margin-top:auto;padding:12px 16px;border-top:1.5px solid var(--b2);font-size:12px; font-size:13px;color:var(--t3);} /* ── MOBILE HEADER ────────────────────────────────────── */ .hamburger{background:none;border:none;color:var(--text);font-size:22px; padding:4px 6px;line-height:1;flex-shrink:0;} .back-b{background:none;border:1.5px solid var(--b2);color:var(--t2);font-size:13px; font-size:13px;padding:5px 10px;border-radius:var(--rs); display:flex;align-items:center;gap:5px;flex-shrink:0;} .back-b:hover{border-color:var(--p);color:var(--p);} .mob-title{flex:1;font-size:15px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mob-logo{display:flex;align-items:center;justify-content:center;gap:7px;font-size:15px; font-weight:800;background:var(--grd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;} /* ── PAGE TRANSITIONS ─────────────────────────────────── */ .pg{display:none;animation:fu .25s ease;} .pg.show{display:block;} @keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* ── BUTTONS ──────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:10px 20px;border-radius:var(--rs);font-size:14px;font-weight:600; border:none;cursor:pointer;transition:all .2s;white-space:nowrap;} .btn-p{background:var(--grd);color:#fff;} .btn-p:hover{opacity:.88;transform:translateY(-1px);} .btn-p:active{transform:scale(.97);} .btn-p:disabled{opacity:.4;cursor:not-allowed;transform:none;} .btn-o{background:transparent;color:var(--t2);border:1.5px solid var(--b2);} .btn-o:hover{border-color:var(--p);color:var(--p);} .btn-sm{padding:6px 13px;font-size:12px;} .btn-g{background:linear-gradient(135deg,#059669,#10b981);color:#fff;} .btn-g:hover{opacity:.88;} /* ── INPUTS ───────────────────────────────────────────── */ .inp{width:100%;background:var(--s2);border:1.5px solid var(--b2);color:var(--text); font-size:14px;padding:11px 14px;border-radius:var(--rs);outline:none;transition:border-color .2s;} .inp:focus{border-color:var(--p);} .inp::placeholder{color:var(--t3);} .inp-m{font-family:var(--mono);font-size:13px;} .sr{display:flex;gap:8px;flex-wrap:wrap;}.sr .inp{flex:1;min-width:0;} textarea.inp{resize:vertical;min-height:88px;} /* ── CARDS ────────────────────────────────────────────── */ .card{background:var(--surf);border:1.5px solid var(--b2);border-radius:var(--r);padding:16px 18px;} .card-sm{padding:12px 14px;} .ct{font-size:12px;font-family:var(--mono);letter-spacing:2px;color:var(--p2); text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;font-weight:600;} .ct::after{content:"";flex:1;height:1px;background:var(--b2);} /* ── DATA ROWS ────────────────────────────────────────── */ .dr{display:flex;justify-content:space-between;align-items:flex-start; padding:9px 0;border-bottom:1px solid var(--border);gap:10px;} .dr:last-child{border-bottom:none;} .dl{color:var(--t2);font-size:13px;white-space:nowrap;flex-shrink:0;padding-top:1px;} .dv{font-family:var(--mono);font-size:13px;text-align:right;word-break:break-all;max-width:66%;color:var(--text);} .cp{color:var(--p);}.cp2{color:var(--p2);}.cok{color:var(--ok);}.cwn{color:var(--warn);}.cbd{color:var(--danger);} /* ── BADGES ───────────────────────────────────────────── */ .bw{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;} .badge{font-size:11px;font-family:var(--mono);font-weight:600;letter-spacing:.8px; padding:3px 9px;border-radius:20px;text-transform:uppercase;} .bs{background:rgba(16,185,129,.12);color:var(--ok);border:1px solid rgba(16,185,129,.25);} .bw2{background:rgba(245,158,11,.12);color:var(--warn);border:1px solid rgba(245,158,11,.25);} .bd{background:rgba(239,68,68,.12);color:var(--danger);border:1px solid rgba(239,68,68,.25);} .bi{background:rgba(59,130,246,.12);color:var(--info);border:1px solid rgba(59,130,246,.25);} .bp{background:rgba(124,58,237,.12);color:var(--p);border:1px solid rgba(124,58,237,.25);} /* ── GRID SYSTEM ──────────────────────────────────────── */ .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} /* ── LOADING / ERROR ──────────────────────────────────── */ .lw{display:none;text-align:center;padding:40px 20px;} .lw.show{display:block;} .spin{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--p); border-radius:50%;animation:sp .7s linear infinite;margin:0 auto 12px;} @keyframes sp{to{transform:rotate(360deg)}} .lw p{color:var(--t2);font-size:13px;font-family:var(--mono);letter-spacing:2px;} .alrt{display:none;border-radius:var(--rs);padding:12px 14px;font-size:14px;margin:10px 0;border-width:1.5px;} .alrt.show{display:block;} .ae{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--danger);} .ao{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:var(--ok);} .rw{display:none;}.rw.show{display:block;} /* ── IP RESULT HEADER ─────────────────────────────────── */ .iph{background:linear-gradient(135deg,var(--surf),var(--s2));border:1px solid var(--border); border-top:3px solid var(--p);border-radius:var(--r);padding:16px 20px;margin-bottom:13px; display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;} .ipb{font-family:var(--mono);font-size:clamp(16px,3.5vw,26px);font-weight:700; background:var(--grd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;} /* ── SCORE BAR ────────────────────────────────────────── */ .sn{font-family:var(--mono);font-size:38px;font-weight:700;line-height:1;} .sbar{height:7px;background:var(--border);border-radius:4px;overflow:hidden;margin:7px 0 4px;} .sf{height:100%;border-radius:4px;transition:width 1.2s cubic-bezier(.4,0,.2,1);} /* ── STAT CARD ────────────────────────────────────────── */ .sc{background:var(--surf);border:1.5px solid var(--b2);border-radius:var(--r); padding:14px;text-align:center;} .sn2{font-family:var(--mono);font-size:22px;font-weight:700;margin-bottom:3px;} .sl{font-size:12px;color:var(--t3);} /* ── MAP ──────────────────────────────────────────────── */ .mp{margin-top:10px;border-radius:10px;overflow:hidden; background:var(--s2);border:1px solid var(--border);} .mp iframe{display:block;width:100%;height:230px;border:none;} /* ── HERO SECTION ─────────────────────────────────────── */ .hh{text-align:center;padding:24px 16px 16px;} .ht{display:inline-flex;align-items:center;gap:7px;background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.3);color:var(--p);font-size:11px;font-family:var(--mono); letter-spacing:3px;padding:5px 14px;border-radius:20px;margin-bottom:14px;} .hh h1{font-size:clamp(22px,4vw,40px);font-weight:800;line-height:1.15;margin-bottom:10px;} .hh h1 .g{background:var(--grd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;} .hh p{color:var(--t2);font-size:14px;line-height:1.7;max-width:560px;margin:0 auto 14px;} /* Trust Section */ .trust{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; } .trust div{ padding:8px 12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); font-size:.92rem; color:var(--t1,#fff); line-height:1.4; } @media (max-width:768px){ .trust{ gap:8px; } .trust div{ font-size:.85rem; padding:7px 10px; } } /* CTA Button */ .hero-cta-big{display:inline-flex;align-items:center;gap:8px;background:var(--grd);color:#fff; font-size:16px;font-weight:800;padding:13px 30px;border-radius:50px;border:none; cursor:pointer;margin-bottom:14px;box-shadow:0 4px 24px rgba(124,58,237,.35); transition:all .25s;} .hero-cta-big:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(124,58,237,.55);} .hero-cta-big:active{transform:scale(.97);} .hero-cta-pulse{animation:hpulse 2.5s ease-in-out infinite;} @keyframes hpulse{0%,100%{box-shadow:0 4px 24px rgba(124,58,237,.35);} 50%{box-shadow:0 4px 40px rgba(6,182,212,.5);}} /* Hero illustration */ .hero-illustration{max-width:100%;margin:16px auto 0;border-radius:var(--r);overflow:hidden; border:1px solid var(--border);box-shadow:0 16px 48px rgba(0,0,0,.5);} .hero-illustration svg{display:block;width:100%;height:auto;} /* Home search */ .hsb{max-width:520px;margin:0 auto;} .hsbox{display:flex;align-items:center;gap:8px;background:var(--surf); border:1.5px solid var(--border);border-radius:var(--r);padding:6px; margin-bottom:10px;transition:border-color .2s;} .hsbox:focus-within{border-color:var(--p);} .hsbox input{flex:1;background:transparent;border:none;color:var(--text); font-size:14px;padding:6px 8px;outline:none;min-width:0;} .hsbox input::placeholder{color:var(--t3);} .ptags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;} .ptag{background:var(--s2);border:1px solid var(--border);color:var(--t2); font-size:12px;padding:5px 11px;border-radius:20px;cursor:pointer;transition:all .15s; white-space:nowrap;} .ptag:hover{border-color:var(--p);color:var(--p);} /* ── HOME — CATEGORIES & TOOLS ────────────────────────── */ .sh{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px;} .st{font-size:16px;font-weight:700;} .ss{color:var(--t3);font-size:13px;margin-top:2px;} .cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:20px;} .cc{background:var(--surf);border:1.5px solid var(--b2);border-radius:var(--r); padding:13px 10px;text-align:center;cursor:pointer;transition:all .2s;} .cc:hover{border-color:var(--p);transform:translateY(-1px);} .ci{font-size:22px;margin-bottom:6px;} .cn{font-size:12px;font-weight:600;margin-bottom:2px;} .ck{font-size:11px;color:var(--t3);} /* Tool grid — responsive cards */ .tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;} .tc{background:var(--surf);border:1.5px solid var(--b2);border-radius:var(--r); padding:15px;cursor:pointer;transition:all .2s;position:relative;} .tc:hover{border-color:var(--p);transform:translateY(-2px); box-shadow:0 6px 24px rgba(124,58,237,.1);} .tci{font-size:20px;margin-bottom:8px;} .tcn{font-size:13px;font-weight:700;margin-bottom:4px;} .tcd{font-size:13px;color:var(--t2);line-height:1.55;} .ttag{position:absolute;top:10px;right:10px;font-size:10px;font-family:var(--mono); font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.5px;} .thot{background:rgba(239,68,68,.15);color:var(--danger);} .tnew{background:rgba(16,185,129,.15);color:var(--ok);} /* Tool preview cards */ .tool-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:12px 0 24px;} .tp-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r); overflow:hidden;cursor:pointer;transition:all .2s;} .tp-card:hover{border-color:var(--p);transform:translateY(-2px);} .tp-header{background:linear-gradient(135deg,var(--s2),var(--s3));padding:10px 12px; display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);} .tp-dot{width:7px;height:7px;border-radius:50%;} .tp-title{font-size:12px;font-weight:600;font-family:var(--mono);} .tp-body{padding:10px 12px;} .tp-row{display:flex;justify-content:space-between;padding:5px 0;font-size:12px; border-bottom:1px solid var(--border);} .tp-row:last-child{border-bottom:none;} .tp-label{color:var(--t3);} .tp-val{font-family:var(--mono);color:var(--p2);} /* ── ADSENSE SLOTS ─────────────────────────────────────── */ .ad-slot{background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(6,182,212,.04)); border:1px dashed var(--border);border-radius:var(--r);display:flex; align-items:center;justify-content:center;color:var(--t3);font-size:12px; font-family:var(--mono);letter-spacing:1px;text-align:center;} .ad-slot-banner{height:80px;margin:14px 0;} .ad-slot-square{height:250px;margin:16px 0;} /* ── SOCIAL ICONS ──────────────────────────────────────── */ .social-row{display:flex;gap:10px;justify-content:center;margin-bottom:12px;flex-wrap:wrap;} .soc-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; background:var(--s2);border:1px solid var(--border);border-radius:7px;color:var(--t2); font-size:14px;transition:all .2s;text-decoration:none;} .soc-btn:hover{border-color:var(--p);color:var(--p);transform:translateY(-2px);} /* ── TOOL PAGE ─────────────────────────────────────────── */ .th{margin-bottom:18px;} .th h1{font-size:clamp(18px,3vw,26px);font-weight:800;margin-bottom:5px;} .th p{color:var(--t2);font-size:13px;line-height:1.6;} .tic{background:var(--surf);border:1.5px solid var(--b2);border-radius:var(--r); padding:16px 18px;margin-bottom:14px;} /* ── DESCRIPTION / BLOG ────────────────────────────────── */ .ds{margin-top:24px;} .ds h2{font-size:16px;font-weight:700;margin:20px 0 9px;color:var(--text);} .ds h3{font-size:14px;font-weight:600;margin:14px 0 6px;color:var(--p2);} .ds p{color:var(--t2);font-size:14px;line-height:1.8;margin-bottom:10px;} .ds ul{color:var(--t2);font-size:14px;line-height:1.8;padding-left:20px;margin-bottom:10px;} .ds ul li{margin-bottom:5px;} .hstep{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;} .hsnum{background:var(--grd);color:#fff;width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:12px; font-weight:700;flex-shrink:0;margin-top:2px;} .hsc h3{font-size:13px;font-weight:600;margin-bottom:3px;} .hsc p{font-size:13px;color:var(--t2);line-height:1.6;} .faq{display:flex;flex-direction:column;} .fqi{border-bottom:1.5px solid var(--b2);} .fqq{padding:12px 0;font-size:14px;font-weight:600;cursor:pointer;color:var(--text); display:flex;justify-content:space-between;align-items:center;gap:8px;} .fqq:hover{color:var(--p);} .fqa{display:none;padding:0 0 12px;font-size:13px;color:var(--t2);line-height:1.75;} .fqa.open{display:block;} .fqic{font-size:14px;color:var(--t3);transition:transform .2s;flex-shrink:0;} .fqic.open{transform:rotate(45deg);color:var(--p);} /* ── BULK TABLE ────────────────────────────────────────── */ .tw{overflow-x:auto;border-radius:var(--r);border:1.5px solid var(--b2);} .dt{width:100%;border-collapse:collapse;font-size:12px;} .dt th{background:var(--s2);color:var(--t2);font-size:11px;font-weight:700;border-bottom:1.5px solid var(--b2); letter-spacing:1.5px;text-transform:uppercase;padding:9px 10px;text-align:left;white-space:nowrap;} .dt td{padding:9px 10px;border-bottom:1px solid var(--border); font-family:var(--mono);vertical-align:top;} .dt tr:hover td{background:rgba(124,58,237,.03);} .exb{background:var(--s2);border:1px solid var(--border);color:var(--p); font-size:11px;font-family:var(--mono);padding:2px 7px;border-radius:4px;cursor:pointer;} .exr{display:none;background:var(--s2);} .exr td{padding:12px 14px;} .exg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;} .exi label{font-size:11px;color:var(--t3);display:block;margin-bottom:2px;} .exi span{font-size:12px;font-family:var(--mono);} /* ── DNS ───────────────────────────────────────────────── */ .dtb{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;} .dtyp{background:var(--s2);border:1px solid var(--border);color:var(--t3); font-size:12px;font-family:var(--mono);padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .15s;} .dtyp.act,.dtyp:hover{background:rgba(124,58,237,.15);color:var(--p);border-color:var(--p);} .dout{background:var(--s2);border:1.5px solid var(--b2);border-radius:var(--rs); padding:12px 14px;font-family:var(--mono);font-size:12px;color:var(--p2); min-height:70px;white-space:pre-wrap;word-break:break-all;line-height:1.9;margin-top:10px;} /* ── BLACKLIST ─────────────────────────────────────────── */ .blg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px;margin-top:12px;} .bli{background:var(--s2);border:1.5px solid var(--b2);border-radius:var(--rs); padding:8px 11px;display:flex;align-items:center;gap:7px;font-size:12px;} .bld{width:7px;height:7px;border-radius:50%;flex-shrink:0;} .bok{background:var(--ok);}.bbd{background:var(--danger);} .bck{background:var(--warn);animation:pls 1s infinite;} @keyframes pls{0%,100%{opacity:1}50%{opacity:.3}} /* ── EMAIL CHECKER ─────────────────────────────────────── */ .vd{text-align:center;padding:16px;} .ve{font-size:44px;margin-bottom:8px;} .vl{font-size:18px;font-weight:700;margin-bottom:4px;} .vs{font-size:12px;color:var(--t3);} .email-disclaimer{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25); border-radius:var(--rs);padding:9px 12px;font-size:12px;color:var(--warn);margin-top:10px;} /* ── PRIVACY ROWS ──────────────────────────────────────── */ .pr{display:flex;justify-content:space-between;align-items:center;padding:10px 0; border-bottom:1px solid var(--border);} .pr:last-child{border-bottom:none;} .prl{font-size:13px;font-weight:500;} .prt{font-family:var(--mono);font-size:12px;padding:4px 11px;border-radius:20px;} .ptok{background:rgba(16,185,129,.12);color:var(--ok);} .ptbd{background:rgba(239,68,68,.12);color:var(--danger);} .ptwn{background:rgba(245,158,11,.12);color:var(--warn);} /* ── STATIC PAGES ──────────────────────────────────────── */ .sp{max-width:820px;} .sp h1{font-size:clamp(20px,4vw,32px);font-weight:800;margin-bottom:6px;} .sp .intro{color:var(--t2);font-size:14px;line-height:1.8;margin-bottom:22px;} .sp h2{font-size:16px;font-weight:700;margin:22px 0 8px;} .sp h3{font-size:14px;font-weight:600;margin:14px 0 6px;color:var(--p2);} .sp p{color:var(--t2);font-size:14px;line-height:1.8;margin-bottom:10px;} .sp ul{color:var(--t2);font-size:14px;line-height:1.8;padding-left:20px;margin-bottom:10px;} .sp ul li{margin-bottom:5px;} .sp .hl{background:var(--s2);border-left:3px solid var(--p); border-radius:0 var(--rs) var(--rs) 0;padding:12px 15px;margin:13px 0; font-size:13px;color:var(--t2);} .cgd{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0;} .ccd{background:var(--surf);border:1px solid var(--border);border-radius:var(--r); padding:16px;text-align:center;} .ccd .icon{font-size:26px;margin-bottom:8px;} .ccd h3{font-size:13px;font-weight:600;margin-bottom:4px;} .ccd p{font-size:12px;color:var(--t3);} .cf{display:flex;flex-direction:column;gap:10px;margin-top:16px;} .cf label{font-size:12px;color:var(--t3);margin-bottom:3px;display:block;} .smg{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:16px;margin-top:13px;} .sms h3{font-size:13px;font-weight:700;color:var(--p);margin-bottom:8px;} .sms ul{list-style:none;padding:0;} .sms li{margin-bottom:7px;} .sms a{color:var(--t2);font-size:13px;display:flex;align-items:center;gap:5px;cursor:pointer;} .sms a:hover{color:var(--p);} .fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:13px 0;} .fc{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:15px;} .fi{font-size:20px;margin-bottom:8px;} .fn{font-size:13px;font-weight:600;margin-bottom:4px;} .fd{font-size:13px;color:var(--t2);line-height:1.55;} /* ── TIMEZONE ──────────────────────────────────────────── */ .tz-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;} .tz-result{background:var(--s2);border:1.5px solid var(--b2);border-radius:var(--r); padding:16px;text-align:center;margin-top:12px;} .tz-time-big{font-family:var(--mono);font-size:clamp(22px,4vw,34px);font-weight:700; background:var(--grd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:5px;} .tz-date{color:var(--t2);font-size:13px;margin-bottom:3px;} .tz-zone{font-size:12px;color:var(--t3);font-family:var(--mono);} /* ── AGE CALCULATOR ────────────────────────────────────── */ .age-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;} .age-card{background:var(--grd);border-radius:var(--r);padding:16px;text-align:center;color:#fff;} .age-num{font-family:var(--mono);font-size:32px;font-weight:800;line-height:1;} .age-unit{font-size:11px;opacity:.85;margin-top:3px;letter-spacing:1px;text-transform:uppercase;} .bday-card{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(239,68,68,.1)); border:1px solid rgba(245,158,11,.3);border-radius:var(--r);padding:16px; text-align:center;margin-top:12px;} .bday-num{font-family:var(--mono);font-size:40px;font-weight:800;color:var(--warn);} .bday-lbl{font-size:12px;color:var(--t2);margin-top:3px;} .age-details{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;} /* ── QR GENERATOR ──────────────────────────────────────── */ .qr-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:7px;margin-bottom:12px;} .qr-type-btn{background:var(--s2);border:1.5px solid var(--b2);border-radius:var(--rs); padding:9px 5px;text-align:center;cursor:pointer;transition:all .2s; font-size:12px;font-weight:600;} .qr-type-btn:hover,.qr-type-btn.active{border-color:var(--p);color:var(--p);background:rgba(124,58,237,.1);} .qr-type-btn .qi{font-size:18px;display:block;margin-bottom:3px;} .qr-output{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px; background:var(--s2);border:1px solid var(--border);border-radius:var(--r);} #qrCanvas{background:#fff;padding:12px;border-radius:10px;} /* ── PASSWORD GENERATOR ────────────────────────────────── */ .pass-display{font-family:var(--mono);font-size:clamp(13px,2.5vw,18px);font-weight:700; background:var(--s2);border:1.5px solid var(--border);border-radius:var(--rs); padding:14px;word-break:break-all;letter-spacing:1px;min-height:52px; display:flex;align-items:center;margin-bottom:9px;} .strength-bar{height:7px;border-radius:4px;overflow:hidden;background:var(--border);margin:9px 0;} .strength-fill{height:100%;border-radius:4px;transition:width .4s,background .4s;} .strength-label{font-size:12px;font-weight:600;margin-bottom:3px;} .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;} .opt-item{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--s2); border:1.5px solid var(--b2);border-radius:var(--rs);cursor:pointer; font-size:13px;transition:border-color .2s;} .opt-item:hover{border-color:var(--p);} .opt-item input[type=checkbox]{width:15px;height:15px;accent-color:var(--p);flex-shrink:0;} .crack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px;margin-top:10px;} .crack-card{background:var(--s2);border:1.5px solid var(--b2);border-radius:var(--rs); padding:11px 12px;text-align:center;} .crack-attacker{font-size:11px;color:var(--t3);margin-bottom:3px;} .crack-time{font-family:var(--mono);font-size:13px;font-weight:700;} /* ── WHOIS ─────────────────────────────────────────────── */ .whois-out{font-family:var(--mono);font-size:13px;background:var(--s2); border:1.5px solid var(--b2);border-radius:var(--r);padding:13px 15px; white-space:pre-wrap;word-break:break-all;line-height:1.9;overflow-x:auto;} /* ── TOAST ─────────────────────────────────────────────── */ .toast{position:fixed;bottom:16px;right:16px;background:var(--surf);border:1.5px solid var(--b2); color:var(--text);font-size:12px;padding:8px 16px;border-radius:var(--rs); box-shadow:0 4px 20px rgba(0,0,0,.4);z-index:9999;display:none;} .toast.show{display:block;animation:fu .3s ease;} /* ── FOOTER ────────────────────────────────────────────── */ footer{background:var(--surf);border-top:1.5px solid var(--b2); padding:20px;text-align:center;font-size:12px;color:var(--t3);} .fl{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:8px;} .fl a{color:var(--t2);cursor:pointer;font-size:12px;}.fl a:hover{color:var(--p);} /* ── UTILS ─────────────────────────────────────────────── */ .hr{height:1.5px;background:var(--b2);margin:22px 0;} .mb1{margin-bottom:7px;}.mb2{margin-bottom:13px;}.mb3{margin-bottom:20px;} .mt1{margin-top:7px;}.mt2{margin-top:13px;}.mt3{margin-top:20px;} .fx{display:flex;}.gp1{gap:7px;}.gp2{gap:10px;}.fw{flex-wrap:wrap;} .aic{align-items:center;}.jb{justify-content:space-between;} /* ================================================================ RESPONSIVE BREAKPOINTS ================================================================ */ /* ── TABLET: 769px – 1024px ───────────────────────────── */ @media(min-width:769px) and (max-width:1024px){ :root{--sw:200px;} .pw{padding:18px 16px 50px;max-width:100%;} .g4{grid-template-columns:repeat(2,1fr);} .tg{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));} .tool-preview-grid{grid-template-columns:repeat(2,1fr);} .hh h1{font-size:28px;} .crack-grid{grid-template-columns:1fr 1fr;} .fg{grid-template-columns:repeat(2,1fr);} } /* ── MOBILE: ≤ 768px ──────────────────────────────────── */ @media(max-width:768px){ :root{--sw:280px;} .sb{transform:translateX(-100%);box-shadow:none;} .sb.mo{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.5);} .mw{margin-left:0;width:100%;} .mh{display:flex;} .pw{padding:12px 12px 60px;} /* Grids collapse */ .g2,.g3,.g4{grid-template-columns:1fr;} .age-result-grid{grid-template-columns:repeat(3,1fr);} .age-details{grid-template-columns:1fr;} .tz-grid{grid-template-columns:1fr;} .opt-grid{grid-template-columns:1fr;} .cg{grid-template-columns:repeat(3,1fr);} .tg{grid-template-columns:repeat(2,1fr);} .tool-preview-grid{grid-template-columns:1fr;} .crack-grid{grid-template-columns:1fr 1fr;} .qr-type-grid{grid-template-columns:repeat(4,1fr);} .cgd{grid-template-columns:1fr;} .fg{grid-template-columns:1fr 1fr;} /* Hero compact */ .hh{padding:16px 12px 10px;} .hh h1{font-size:clamp(20px,7vw,28px);} .hero-cta-big{font-size:14px;padding:11px 22px;} .hero-illustration{display:none;} /* IP header stack */ .iph{flex-direction:column;padding:13px 15px;} .sr{flex-direction:column;} .sr .btn-p{width:100%;} /* Bulk table scrollable */ .tw{-webkit-overflow-scrolling:touch;} .dt{font-size:11px;} /* Static pages */ .sp{max-width:100%;} .blg{grid-template-columns:1fr 1fr;} .sn{font-size:32px;} } /* ── SMALL MOBILE: ≤ 420px ────────────────────────────── */ @media(max-width:420px){ .tg{grid-template-columns:1fr;} .cg{grid-template-columns:repeat(2,1fr);} .age-result-grid{grid-template-columns:1fr;} .crack-grid{grid-template-columns:1fr;} .qr-type-grid{grid-template-columns:repeat(3,1fr);} .fg{grid-template-columns:1fr;} .hh p{font-size:13px;} .ptag{font-size:11px;padding:4px 9px;} .hero-cta-big{font-size:13px;padding:10px 18px;} } /* Related Tools */ .related-tools{ margin-top:40px; padding:20px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.02); } .related-tools h3{ margin-bottom:14px; } .related-grid{ display:flex; flex-wrap:wrap; gap:10px; } .related-grid a{ text-decoration:none; color:var(--t1); padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.03); transition:.2s; } .related-grid a:hover{ transform:translateY(-2px); } /* ── BYLINE: Author / Reviewer / Last Updated ─────────────── */ .byline{ display:flex;flex-wrap:wrap;gap:14px;align-items:center; font-size:12px;color:var(--t3);margin:-4px 0 18px; padding-bottom:12px;border-bottom:1.5px solid var(--border); } .byline b{color:var(--t2);font-weight:600;} .byline .by-sep{color:var(--b2);} /* ── RELATED TOOLS GRID ────────────────────────────────────── */ .related-tools{margin-top:24px;} .related-tools h2{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--text);} .rt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;} .rt-card{ background:var(--surf);border:1.5px solid var(--b2);border-radius:var(--r); padding:14px;text-decoration:none;transition:all .15s;display:block; } .rt-card:hover{border-color:var(--p);transform:translateY(-2px);} .rt-card .rt-icon{font-size:20px;margin-bottom:6px;} .rt-card .rt-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;} .rt-card .rt-desc{font-size:12px;color:var(--t3);line-height:1.4;} /* ── REAL-WORLD EXAMPLE BOX ────────────────────────────────── */ .example-box{ background:var(--s2);border:1.5px solid var(--b2);border-left:3px solid var(--p); border-radius:var(--rs);padding:14px 16px;margin:14px 0; } .example-box .ex-label{ font-size:11px;font-family:var(--mono);letter-spacing:2px;color:var(--p2); text-transform:uppercase;margin-bottom:8px;font-weight:700; } .example-box p{margin-bottom:8px;font-size:14px;} .example-box p:last-child{margin-bottom:0;} .example-box code{ background:var(--surf);border:1px solid var(--b2);border-radius:4px; padding:1px 6px;font-family:var(--mono);font-size:13px;color:var(--p2); } /* ── ADVANCED TIPS / TIP CARDS ────────────────────────────── */ .tip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:12px 0;} .tip-card{background:var(--s2);border:1.5px solid var(--b2);border-radius:var(--r);padding:13px 15px;} .tip-card .tip-icon{font-size:18px;margin-bottom:6px;} .tip-card .tip-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;} .tip-card .tip-body{font-size:13px;color:var(--t2);line-height:1.6;} /* ── COMMON ERRORS LIST ───────────────────────────────────── */ .err-list{display:flex;flex-direction:column;gap:10px;margin:12px 0;} .err-item{background:var(--s2);border:1.5px solid var(--b2);border-left:3px solid var(--danger); border-radius:var(--rs);padding:12px 15px;} .err-item .err-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px; display:flex;align-items:center;gap:6px;} .err-item .err-body{font-size:13px;color:var(--t2);line-height:1.6;} .err-item code{background:var(--surf);border:1px solid var(--b2);border-radius:4px; padding:1px 6px;font-family:var(--mono);font-size:12px;color:var(--p2);} /* ── RESULT FIELD EXPLAINER ───────────────────────────────── */ .field-list{display:flex;flex-direction:column;gap:8px;margin:12px 0;} .field-item{display:flex;gap:12px;padding:10px 14px;background:var(--s2); border:1.5px solid var(--b2);border-radius:var(--rs);} .field-item .field-name{flex:0 0 130px;font-family:var(--mono);font-size:12.5px; font-weight:700;color:var(--p2);} .field-item .field-desc{flex:1;font-size:13px;color:var(--t2);line-height:1.6;} /* ── COMPARISON TABLE WRAPPER (reuses .dt) ────────────────── */ .comp-wrap{margin:12px 0;} .comp-wrap .dt td:first-child,.comp-wrap .dt th:first-child{font-weight:600;color:var(--text);} /* ── WORLD CLOCK ───────────────────────────────────────────── */ .wc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:12px 0;} .wc-card{background:var(--s2);border:1.5px solid var(--b2);border-radius:var(--r);padding:14px;position:relative;} .wc-card.wc-user{border-color:var(--p);box-shadow:0 0 0 1px var(--p) inset;} .wc-city{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;} .wc-tz{font-size:11px;color:var(--t3);font-family:var(--mono);margin-bottom:8px;} .wc-time{font-size:24px;font-weight:700;font-family:var(--mono);color:var(--p);line-height:1.1;} .wc-date{font-size:11px;color:var(--t2);margin-top:4px;} .wc-meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;} .wc-badge{font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:10px;background:var(--surf);border:1px solid var(--b2);color:var(--t3);} .wc-badge.dst{background:rgba(245,158,11,.12);color:var(--warn);border-color:rgba(245,158,11,.3);} .wc-remove{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--t3); cursor:pointer;font-size:14px;padding:2px 6px;border-radius:4px;} .wc-remove:hover{color:var(--danger);background:var(--s3);} /* ── QUICK CONVERSION CHIPS ───────────────────────────────── */ .qc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:12px 0;} .qc-chip{background:var(--s2);border:1.5px solid var(--b2);border-radius:var(--rs); padding:9px 12px;font-size:12.5px;font-family:var(--mono);font-weight:600;color:var(--t2); text-align:center;cursor:pointer;transition:all .15s;} .qc-chip:hover{border-color:var(--p);color:var(--p);background:rgba(124,58,237,.08);} /* ── TIME DIFFERENCE RESULT ────────────────────────────────── */ .tdiff-box{background:var(--s2);border:1.5px solid var(--b2);border-left:3px solid var(--p); border-radius:var(--rs);padding:14px 16px;margin-top:10px;text-align:center;} .tdiff-val{font-size:22px;font-weight:700;font-family:var(--mono);color:var(--p);} .tdiff-sub{font-size:12px;color:var(--t3);margin-top:4px;} /* ── BUSINESS HOURS / MEETING PLANNER GRID ────────────────── */ .bh-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;} .bh-label{flex:0 0 130px;font-size:12px;font-family:var(--mono);color:var(--t2);} .bh-track{flex:1;display:grid;grid-template-columns:repeat(24,1fr);gap:1px;height:22px; border-radius:4px;overflow:hidden;border:1px solid var(--border);} .bh-cell{background:var(--s2);} .bh-cell.work{background:rgba(16,185,129,.35);} .bh-cell.overlap{background:var(--ok);} .bh-cell.now{box-shadow:inset 0 0 0 2px var(--p);} .bh-axis{display:flex;gap:1px;margin-left:140px;font-size:9px;color:var(--t3);font-family:var(--mono);} .bh-axis span{flex:1;text-align:center;} /* ── TIMEZONE STRIP / VISUAL MAP ───────────────────────────── */ .tzmap-wrap{overflow-x:auto;padding-bottom:6px;} .tzmap-strip{display:grid;grid-template-columns:repeat(25,minmax(34px,1fr));gap:1px; min-width:760px;border-radius:6px;overflow:hidden;border:1px solid var(--border);} .tzmap-cell{background:var(--s2);height:32px;display:flex;align-items:center;justify-content:center; font-size:10px;font-family:var(--mono);color:var(--t3);position:relative;} .tzmap-cell.daytime{background:rgba(245,158,11,.15);color:var(--text);} .tzmap-cell.now-col{box-shadow:inset 0 0 0 2px var(--p);font-weight:700;color:var(--p);} .tzmap-pin{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%); font-size:9px;color:var(--t2);white-space:nowrap;background:var(--surf);border:1px solid var(--b2); border-radius:3px;padding:1px 4px;} .tzmap-pins{position:relative;height:24px;min-width:760px;} /* ── SHARE LINK BOX ─────────────────────────────────────────── */ .share-box{display:flex;gap:8px;align-items:center;background:var(--s2);border:1.5px solid var(--b2); border-radius:var(--rs);padding:8px 10px;margin-top:8px;} .share-box input{flex:1;background:none;border:none;color:var(--t2);font-family:var(--mono); font-size:11px;outline:none;}