@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Dark Theme: Deep Ocean ──────────────────── */
:root {
  /* Dark: Glossy Deep Sky-Blue — rich, never black */
  --bg:         #060d1a;
  --bg2:        #0a1628;
  --bg3:        #0f1f3a;
  --bg4:        #14274d;
  --border:     #1a3358;
  --border2:    #224070;
  --border3:    #2e5490;

  /* Accent: vivid cyan-sky gradient anchor */
  --accent:      #38bdf8;
  --accent-h:    #7dd3fc;
  --accent-s:    #0ea5e9;
  --accent-glow: rgba(56,189,248,0.18);

  /* Gradient pair used on buttons / headers */
  --grad-a:     #0ea5e9;
  --grad-b:     #6366f1;

  --success:    #34d399;
  --success-bg: rgba(52,211,153,0.1);
  --danger:     #f87171;
  --danger-bg:  rgba(248,113,113,0.1);
  --info:       #60a5fa;
  --info-bg:    rgba(96,165,250,0.1);
  --warn:       #fbbf24;
  --warn-bg:    rgba(251,191,36,0.1);

  /* Text: crisp, eye-friendly cool whites */
  --text:       #e4eeff;
  --text2:      #7ba4d4;
  --text3:      #3d6090;
  --text4:      #213050;

  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  18px;
  --shadow:     0 4px 24px rgba(0,0,0,0.55);
  --shadow-lg:  0 8px 48px rgba(0,0,0,0.70);
  --shadow-acc: 0 4px 20px rgba(14,165,233,0.30);
  --font-ui:    'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:  'JetBrains Mono','Consolas','Courier New',monospace;
  --ease:       0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ── Light Theme: Clean Ivory ─────────────────── */
body.light-mode {
  --bg:         #f6f8fc;
  --bg2:        #ffffff;
  --bg3:        #eef1f8;
  --bg4:        #e4e9f4;
  --border:     #dde3f0;
  --border2:    #c8d0e4;
  --border3:    #b0bcd4;
  --accent:     #d97706;
  --accent-h:   #f59e0b;
  --accent-s:   #b45309;
  --accent-glow:rgba(217,119,6,0.1);
  --success:    #059669;
  --success-bg: rgba(5,150,105,0.08);
  --danger:     #dc2626;
  --danger-bg:  rgba(220,38,38,0.08);
  --info:       #2563eb;
  --info-bg:    rgba(37,99,235,0.08);
  --warn:       #d97706;
  --warn-bg:    rgba(217,119,6,0.08);
  --text:       #1e2a40;
  --text2:      #3d5070;
  --text3:      #6b809e;
  --text4:      #9aaac0;
  --shadow:     0 4px 20px rgba(30,42,64,0.08);
  --shadow-lg:  0 8px 40px rgba(30,42,64,0.12);
  --shadow-acc: 0 4px 20px rgba(217,119,6,0.15);
}

/* ── Reset ────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);min-height:100vh;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .25s,color .15s}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h);text-decoration:underline}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--accent);color:#000}

/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border3)}

/* ══ HEADER ════════════════════════════════════ */
.site-header{background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Logo */
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo:hover{text-decoration:none}
.logo img{height:36px;width:auto}
.logo-dark{display:block}.logo-light{display:none}
body.light-mode .logo-dark{display:none}
body.light-mode .logo-light{display:block}

/* Nav */
.header-nav{display:flex;align-items:center;gap:4px}
.nav-link{color:var(--text2);font-size:.875rem;font-weight:600;padding:7px 14px;border-radius:var(--radius);text-decoration:none;transition:color var(--ease),background var(--ease);white-space:nowrap}
.nav-link:hover{color:var(--text);background:var(--bg3);text-decoration:none}

/* Theme toggle */
.theme-toggle{width:40px;height:40px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:4px;transition:border-color var(--ease),color var(--ease),background var(--ease)}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--bg4)}
.icon-dark{display:flex}.icon-light{display:none}
body.light-mode .icon-dark{display:none}
body.light-mode .icon-light{display:flex}

/* Mobile menu */
.mobile-menu-btn{display:none;width:40px;height:40px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;align-items:center;justify-content:center;margin-left:4px;transition:border-color var(--ease),color var(--ease)}
.mobile-nav{display:none;flex-direction:column;padding:10px 16px 14px;background:var(--bg2);border-bottom:1px solid var(--border);gap:2px}
.mobile-nav.open{display:flex}
.mobile-nav .nav-link{padding:10px 14px;width:100%;border-radius:var(--radius)}

/* ══ HERO ═══════════════════════════════════════ */
.hero{background:var(--bg2);border-bottom:1px solid var(--border);padding:64px 24px 52px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:700px;height:350px;background:radial-gradient(ellipse,rgba(245,158,11,.07) 0%,transparent 65%);pointer-events:none}

.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-glow);color:var(--accent);font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:20px;border:1px solid rgba(245,158,11,.3);margin-bottom:22px}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.hero h1{font-size:clamp(2rem,5.5vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-bottom:16px;color:var(--text)}
.hero h1 .accent{color:var(--accent)}
.hero-sub{color:var(--text2);font-size:1.05rem;max-width:540px;margin:0 auto 34px;line-height:1.7;font-weight:400}

/* Search */
.search-wrap{max-width:580px;margin:0 auto;position:relative}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;display:flex}
#search-input{width:100%;background:var(--bg3);border:2px solid var(--border2);border-radius:var(--radius-xl);padding:15px 54px 15px 50px;font-size:1rem;color:var(--text);outline:none;font-weight:500;transition:border-color var(--ease),box-shadow var(--ease),background var(--ease)}
#search-input::placeholder{color:var(--text3);font-weight:400}
#search-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow);background:var(--bg4)}
.search-shortcut{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:var(--bg4);border:1px solid var(--border2);border-radius:5px;padding:2px 8px;font-size:.72rem;color:var(--text3);font-family:var(--font-mono);pointer-events:none}

/* Found message */
#search-found-msg{display:none;margin-top:14px;font-size:.875rem;color:var(--success);font-weight:600;align-items:center;justify-content:center;gap:8px}
#search-found-msg.visible{display:flex}
#search-no-msg{display:none;margin-top:14px;font-size:.875rem;color:var(--text3);align-items:center;justify-content:center;gap:8px}
#search-no-msg.visible{display:flex}

/* Stats */
.stats-row{display:flex;gap:0;justify-content:center;margin-top:36px;max-width:460px;margin-left:auto;margin-right:auto;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.stat{flex:1;min-width:80px;padding:14px 8px;text-align:center;border-right:1px solid var(--border)}
.stat:last-child{border-right:none}
.stat-num{font-size:1.25rem;font-weight:800;color:var(--accent);font-family:var(--font-mono);display:block;line-height:1}
.stat-label{font-size:.65rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-top:4px;display:block}

/* ══ FILTERS ════════════════════════════════════ */
.filters-bar{max-width:1280px;margin:32px auto 0;padding:0 24px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-label{font-size:.72rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-right:2px;white-space:nowrap}
.filter-btn{background:var(--bg2);border:1.5px solid var(--border);color:var(--text2);padding:7px 15px;border-radius:20px;font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--font-ui);transition:border-color var(--ease),color var(--ease),background var(--ease),box-shadow var(--ease)}
.filter-btn:hover{border-color:var(--accent);color:var(--text)}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#000;box-shadow:var(--shadow-acc)}
.filter-count{background:rgba(0,0,0,.15);border-radius:10px;padding:1px 7px;font-size:.68rem;font-family:var(--font-mono)}
.filter-btn:not(.active) .filter-count{background:var(--bg3);color:var(--text3)}
.results-info{margin-left:auto;font-size:.78rem;color:var(--text3);font-family:var(--font-mono);white-space:nowrap}

/* ══ TOOL GRID ══════════════════════════════════ */
.tools-section{max-width:1280px;margin:0 auto;padding:28px 24px 80px}
.category-section{margin-bottom:48px}
.category-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.category-heading h2{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);white-space:nowrap}
.category-heading::after{content:'';flex:1;height:1px;background:var(--border)}
.cat-pill{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);white-space:nowrap}

.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}

.tool-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;cursor:pointer;transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
.tool-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.tool-card:hover{border-color:var(--border2);box-shadow:var(--shadow);text-decoration:none;color:inherit;transform:translateY(-3px)}
.tool-card:hover::after{transform:scaleX(1)}

.tool-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tool-card-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--bg3);border:1px solid var(--border);flex-shrink:0}
.tool-card-arrow{width:28px;height:28px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.8rem;flex-shrink:0;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.tool-card:hover .tool-card-arrow{background:var(--accent);border-color:var(--accent);color:#000}
.tool-card-name{font-size:.9rem;font-weight:700;color:var(--text);line-height:1.3;letter-spacing:-.01em}
.tool-card-desc{font-size:.77rem;color:var(--text3);line-height:1.55;flex:1}
.tool-card-tag{display:inline-flex;align-items:center;font-size:.65rem;font-family:var(--font-mono);color:var(--text3);background:var(--bg3);border:1px solid var(--border);padding:2px 8px;border-radius:4px;align-self:flex-start;letter-spacing:.03em;margin-top:2px}

/* ══ AD BANNER ══════════════════════════════════ */
.ad-banner{max-width:1280px;margin:20px auto 0;padding:0 24px}
.ad-slot{background:var(--bg2);border:1.5px dashed var(--border2);border-radius:var(--radius);min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.74rem;font-family:var(--font-mono);letter-spacing:.04em}

/* ══ TOOL PAGE ══════════════════════════════════ */
.tool-page{max-width:900px;margin:0 auto;padding:36px 24px 80px}

.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text3);margin-bottom:22px;flex-wrap:wrap}
.breadcrumb a{color:var(--text3);text-decoration:none;transition:color var(--ease)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb-sep{color:var(--border2)}
.breadcrumb-current{color:var(--text2);font-weight:600}

.tool-page-header{display:flex;align-items:flex-start;gap:18px;margin-bottom:28px;padding:24px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius-xl);position:relative;overflow:hidden}
.tool-page-header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-h))}
.tool-page-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:var(--bg3);border:1.5px solid var(--border);flex-shrink:0}
.tool-page-meta{flex:1;min-width:0}
.tool-page-meta h1{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;margin-bottom:5px;color:var(--text);line-height:1.2}
.tool-page-meta p{font-size:.875rem;color:var(--text2);line-height:1.65}
.tool-page-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tool-badge{display:inline-flex;align-items:center;gap:4px;font-size:.67rem;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase}
.tool-badge-free{background:var(--success-bg);color:var(--success)}
.tool-badge-instant{background:var(--info-bg);color:var(--info)}
.tool-badge-secure{background:var(--warn-bg);color:var(--warn)}

/* Tool container */
.tool-container{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:28px}

/* Info sections */
.tool-info-sections{display:grid;gap:18px;margin-top:28px}
.tool-info-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:24px 28px;position:relative;overflow:hidden}
.tool-info-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%}
.tool-info-card.how-to::before{background:var(--info)}
.tool-info-card.features::before{background:var(--success)}
.tool-info-card.benefits::before{background:var(--accent)}
.tool-info-card.faq::before{background:var(--danger)}

.tool-info-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.tool-info-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.how-to .tool-info-icon{background:var(--info-bg)}
.features .tool-info-icon{background:var(--success-bg)}
.benefits .tool-info-icon{background:var(--warn-bg)}
.faq .tool-info-icon{background:var(--danger-bg)}
.tool-info-heading h2{font-size:.95rem;font-weight:700;color:var(--text);letter-spacing:-.01em}

.tool-steps{display:flex;flex-direction:column;gap:14px}
.tool-step{display:flex;align-items:flex-start;gap:12px;font-size:.875rem;color:var(--text2);line-height:1.65}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--info-bg);border:1px solid rgba(59,130,246,.25);color:var(--info);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-family:var(--font-mono)}

.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.feature-item{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;color:var(--text2);padding:11px 13px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);line-height:1.5}
.feature-check{color:var(--success);flex-shrink:0;margin-top:1px;font-size:.9rem}

.benefits-list{display:flex;flex-direction:column;gap:12px}
.benefit-item{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;color:var(--text2);line-height:1.65}
.benefit-icon{color:var(--accent);flex-shrink:0;margin-top:2px}

.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border);padding:14px 0}
.faq-item:last-child{border-bottom:none;padding-bottom:0}
.faq-q{font-size:.875rem;font-weight:700;color:var(--text);margin-bottom:6px}
.faq-a{font-size:.82rem;color:var(--text2);line-height:1.7}

/* Related */
.related-tools{margin-top:32px}
.related-heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.related-heading::after{content:'';flex:1;height:1px;background:var(--border)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}

/* ══ TOOL UI COMPONENTS ══════════════════════════ */
.tool-ui{padding:24px}
.tf-label{display:block;font-size:.74rem;font-weight:700;color:var(--text2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.07em}
.tf-input,.tf-textarea,.tf-select{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--radius);padding:10px 14px;color:var(--text);font-family:var(--font-mono);font-size:.875rem;outline:none;resize:vertical;transition:border-color var(--ease),box-shadow var(--ease),background var(--ease)}
.tf-input:focus,.tf-textarea:focus,.tf-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--bg4)}
.tf-input::placeholder,.tf-textarea::placeholder{color:var(--text3)}
.tf-textarea{min-height:130px;line-height:1.65}
.tf-select{resize:none;cursor:pointer}
.tf-select option{background:var(--bg3);color:var(--text)}
.tf-field{margin-bottom:18px}
.tf-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tf-three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.tf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tf-divider{height:1px;background:var(--border);margin:22px 0}

.tf-btn{background:var(--accent);color:#000;border:none;padding:11px 22px;border-radius:var(--radius);font-size:.875rem;font-weight:700;cursor:pointer;font-family:var(--font-ui);letter-spacing:.01em;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:filter var(--ease),transform var(--ease),box-shadow var(--ease)}
.tf-btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:var(--shadow-acc)}
.tf-btn:active{transform:translateY(0);filter:brightness(.95)}
.tf-btn-ghost{background:var(--bg3);color:var(--text2);border:1.5px solid var(--border);transition:background var(--ease),color var(--ease),border-color var(--ease)}
.tf-btn-ghost:hover{background:var(--bg4);color:var(--text);border-color:var(--border2);filter:none;box-shadow:none;transform:none}
.tf-btn-sm{padding:7px 14px;font-size:.8rem}
.tf-btn-danger{background:var(--danger);color:#fff}

.tf-output-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg3);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.tf-output-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:var(--font-mono)}
.tf-output-body{padding:18px;font-family:var(--font-mono);font-size:.85rem;min-height:90px;white-space:pre-wrap;word-break:break-all;color:var(--success);line-height:1.75;background:var(--bg3)}
.tf-output-body.plain{color:var(--text)}
.tf-output-body.error{color:var(--danger)}

.tf-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:16px}
.tf-stat-card{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;transition:border-color var(--ease)}
.tf-stat-card:hover{border-color:var(--accent)}
.tf-stat-card .num{font-size:1.4rem;font-weight:800;color:var(--accent);font-family:var(--font-mono);display:block;line-height:1}
.tf-stat-card .lbl{font-size:.67rem;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-top:5px;display:block;font-weight:600}

.copy-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text3);padding:5px 12px;border-radius:5px;font-size:.71rem;font-family:var(--font-mono);cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:border-color var(--ease),color var(--ease)}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.copy-btn.copied{color:var(--success);border-color:var(--success)}

.tf-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:5px;font-size:.71rem;font-family:var(--font-mono);font-weight:600}
.tf-badge-success{background:var(--success-bg);color:var(--success)}
.tf-badge-error{background:var(--danger-bg);color:var(--danger)}
.tf-badge-info{background:var(--info-bg);color:var(--info)}
.tf-badge-warn{background:var(--warn-bg);color:var(--warn)}

.tf-info-box{background:var(--info-bg);border:1px solid rgba(59,130,246,.2);border-radius:var(--radius);padding:12px 16px;font-size:.82rem;color:var(--info);margin-bottom:18px;line-height:1.6}

.tf-tabs{display:flex;gap:2px;background:var(--bg3);border-radius:var(--radius);padding:3px;margin-bottom:20px;border:1px solid var(--border);overflow-x:auto}
.tf-tab{flex:1;min-width:max-content;text-align:center;padding:8px 14px;font-size:.78rem;font-weight:600;color:var(--text3);border-radius:5px;cursor:pointer;border:none;background:none;white-space:nowrap;font-family:var(--font-ui);transition:background var(--ease),color var(--ease)}
.tf-tab.active{background:var(--bg2);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.25)}

.range-wrap{display:flex;gap:12px;align-items:center}
.range-wrap input[type=range]{flex:1;accent-color:var(--accent);cursor:pointer}
.range-val{font-family:var(--font-mono);font-size:.85rem;color:var(--accent);min-width:44px;text-align:right;font-weight:600}

.tf-checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.85rem;color:var(--text2);line-height:1.4}
.tf-checkbox-row input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;flex-shrink:0}

.loading-state{padding:60px 20px;text-align:center;color:var(--text3)}
.spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.error-state{padding:40px 20px;text-align:center}
.error-state h3{font-size:1rem;color:var(--danger);margin-bottom:8px}
.error-state p{font-size:.85rem;color:var(--text3)}

/* No results */
.no-results{text-align:center;padding:80px 20px;color:var(--text3)}
.no-results-icon{font-size:3rem;margin-bottom:16px;opacity:.35}
.no-results h3{font-size:1.1rem;margin-bottom:8px;color:var(--text2)}
.no-results p{font-size:.875rem}

/* ══ FOOTER ═════════════════════════════════════ */
.site-footer{background:var(--bg2);border-top:1px solid var(--border);padding:44px 24px 28px;margin-top:60px}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--border)}
.footer-brand{max-width:280px}
.footer-logo{display:flex;align-items:center;text-decoration:none;margin-bottom:12px}
.footer-logo:hover{text-decoration:none}
.footer-logo img{height:30px;width:auto}
.footer-desc{font-size:.8rem;color:var(--text3);line-height:1.7}
.footer-links-grid{display:flex;gap:40px}
.footer-col h3{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:12px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul li a{font-size:.82rem;color:var(--text3);text-decoration:none;transition:color var(--ease)}
.footer-col ul li a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-copy{font-size:.74rem;color:var(--text3)}

/* ══ RESPONSIVE ══════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE-FIRST RESPONSIVE SYSTEM
   Breakpoints: 1024 | 768 | 600 | 480 | 380
   ══════════════════════════════════════════════════════ */

/* ── Tablet landscape & small desktop (≤1024px) ──────── */
/* ═══════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE SYSTEM
   Mobile-first: base styles → tablet → desktop overrides
   Breakpoints: 480 | 600 | 768 | 1024
   ═══════════════════════════════════════════════════════ */

/* ── Large tablet / small laptop (≤1024px) ─────────── */
@media(max-width:1024px){
  .nav-dropdown.wide .nav-dropdown-panel{min-width:360px;left:0;transform:none}
  .tools-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .footer-top{grid-template-columns:1fr;gap:28px}
  .footer-links-grid{gap:20px;flex-wrap:wrap}
  .calc-page{max-width:480px}
  .tool-info-card{padding:20px 22px}
}

/* ── Tablet portrait (≤768px) ──────────────────────── */
@media(max-width:768px){

  /* ─ Header ─ */
  .header-inner{padding:0 14px;height:56px}
  /* Hide desktop nav items; show only theme toggle + hamburger */
  .header-nav .nav-dropdown{display:none}
  .header-nav > a.nav-dropdown-btn{display:none!important}
  .mobile-menu-btn{display:flex}

  /* ─ Hero ─ */
  .hero{padding:36px 16px 28px}
  .hero h1{font-size:1.75rem;letter-spacing:-.03em}
  .hero-sub{font-size:.9rem;margin-bottom:24px}
  .hero-badge{font-size:.65rem;padding:4px 12px}
  .stats-row{max-width:100%}
  .stat-num{font-size:1.1rem}
  .stat-label{font-size:.6rem}
  #search-input{font-size:.9rem;padding:13px 44px 13px 44px}
  .search-shortcut{display:none}

  /* ─ Filters ─ */
  .filters-bar{
    padding:0 14px;gap:6px;margin-top:20px;
    flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;scrollbar-width:none
  }
  .filters-bar::-webkit-scrollbar{display:none}
  .filter-label{display:none}
  .filter-btn{flex-shrink:0;padding:6px 12px;font-size:.78rem}
  .results-info{display:none}

  /* ─ Tools grid ─ */
  .tools-section{padding:18px 14px 60px}
  .tools-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px}
  .tool-card{padding:16px 14px}
  .tool-card-icon{width:36px;height:36px;font-size:1rem}
  .tool-card-name{font-size:.84rem}
  .tool-card-desc{font-size:.74rem}
  .category-section{margin-bottom:32px}

  /* ─ Tool page ─ */
  .tool-page{padding:16px 14px 60px}
  .tool-page-header{padding:16px;flex-direction:row;gap:12px;align-items:flex-start}
  .tool-page-header h1{font-size:1.15rem}
  .tool-page-meta p{font-size:.8rem}
  .tool-page-icon{width:46px;height:46px;font-size:1.4rem;border-radius:10px}
  .tool-page-badges{gap:4px;margin-top:8px;flex-wrap:wrap}
  .tool-badge{font-size:.6rem;padding:2px 8px}
  .breadcrumb{font-size:.72rem;margin-bottom:14px;flex-wrap:wrap}

  /* ─ Tool UI components ─ */
  .tool-container{border-radius:var(--radius-lg)}
  .tool-ui{padding:16px}
  .tf-two-col{grid-template-columns:1fr}
  .tf-three-col{grid-template-columns:1fr}
  .tf-stat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .tf-stat-card{padding:14px 10px}
  .tf-stat-card .num{font-size:1.2rem}
  .tf-stat-card .lbl{font-size:.62rem}
  .tf-actions{gap:8px;flex-wrap:wrap}
  .tf-btn{padding:10px 18px;font-size:.84rem}
  .tf-btn-sm{padding:7px 12px;font-size:.76rem}
  .tf-label{font-size:.7rem}
  .tf-input,.tf-textarea,.tf-select{font-size:.9rem;padding:9px 12px}
  .tf-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tf-tab{min-width:auto;padding:7px 10px;font-size:.75rem;flex-shrink:0}
  .tf-output-body{font-size:.82rem;padding:14px}
  .tf-output-header{padding:9px 14px}

  /* ─ Info sections ─ */
  .tool-info-sections{gap:14px;margin-top:20px}
  .tool-info-card{padding:16px 18px}
  .tool-info-heading h2{font-size:.9rem}
  .tool-info-icon{width:30px;height:30px;font-size:.9rem}
  .features-grid{grid-template-columns:1fr}
  .feature-item{font-size:.8rem;padding:9px 11px}
  .tool-steps{gap:10px}
  .tool-step{font-size:.82rem}
  .step-num{width:22px;height:22px;font-size:.68rem}
  .faq-q{font-size:.82rem}
  .faq-a{font-size:.78rem}
  .related-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}

  /* ─ Footer ─ */
  .site-footer{padding:28px 14px 20px;margin-top:40px}
  .footer-top{grid-template-columns:1fr;gap:22px;margin-bottom:22px;padding-bottom:22px}
  .footer-links-grid{flex-direction:row;flex-wrap:wrap;gap:20px}
  .footer-col h3{font-size:.68rem;margin-bottom:10px}
  .footer-col ul{gap:7px}
  .footer-col ul li a{font-size:.8rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .footer-bottom>div{flex-wrap:wrap;gap:10px}

  /* ─ Legal pages ─ */
  .legal-page{padding:16px 14px 60px}
  .legal-card{padding:16px 18px}
  .legal-hero{padding:28px 16px 20px}
  .legal-hero h1{font-size:1.5rem}
  .legal-grid{grid-template-columns:1fr}
  .legal-principles{grid-template-columns:1fr}
  .legal-body{gap:14px}

  /* ─ Calculator page ─ */
  .calc-page{max-width:100%;padding:0 14px;margin-top:20px}
  .calc-page-title h1{font-size:1.2rem}
  .calc-modes{border-radius:10px;gap:1px}
  .calc-mode-btn{padding:7px 4px;font-size:.72rem}
  .cb{height:56px;font-size:.88rem}
  .calc-btns.sci-grid .cb{height:46px;font-size:.74rem}
  .calc-result{font-size:2rem}
  .calc-display{padding:12px 16px 10px;min-height:90px}
  .unit-panel{padding:14px}
  .unit-row{grid-template-columns:1fr 36px 1fr}
  .unit-swap-btn{width:36px;height:36px;font-size:1rem}
}

/* ── Mobile (≤600px) ────────────────────────────────── */
@media(max-width:600px){

  /* ─ Hero ─ */
  .hero{padding:28px 14px 24px}
  .hero h1{font-size:1.5rem}
  .hero-sub{font-size:.85rem;margin-bottom:20px}
  .hero-badge{font-size:.62rem;padding:4px 10px}
  .stats-row{border-radius:var(--radius)}
  .stat{padding:10px 6px;min-width:60px}
  .stat-num{font-size:1rem}

  /* ─ Tools grid — 2 per row ─ */
  .tools-grid{grid-template-columns:1fr 1fr;gap:8px}
  .tool-card{padding:14px 12px;gap:6px}
  .tool-card-header{margin-bottom:2px}
  .tool-card-icon{width:32px;height:32px;font-size:.9rem;border-radius:8px}
  .tool-card-arrow{width:22px;height:22px;font-size:.68rem;border-radius:5px}
  .tool-card-name{font-size:.78rem;line-height:1.25}
  .tool-card-desc{display:none}
  .tool-card-tag{display:none}

  /* ─ Tool page header — stack on mobile ─ */
  .tool-page-header{flex-direction:column;gap:10px;padding:14px}
  .tool-page-icon{width:40px;height:40px;font-size:1.2rem;border-radius:10px}
  .tool-page-meta h1{font-size:1.05rem}
  .tool-page-meta p{font-size:.78rem}

  /* ─ Buttons — full width on mobile ─ */
  .tf-actions{flex-direction:column;gap:6px}
  .tf-btn,.tf-btn-ghost{width:100%;justify-content:center}
  /* EXCEPTION: small ghost buttons stay auto-width */
  .tf-btn-sm{width:auto!important;flex-shrink:0}
  /* Preserve inline action buttons like copy */
  .tf-output-header .tf-btn-sm,
  .tf-output-header .copy-btn{width:auto!important}

  /* ─ Stats ─ */
  .tf-stat-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .tf-stat-card{padding:10px 6px}
  .tf-stat-card .num{font-size:1rem}
  .tf-stat-card .lbl{font-size:.58rem;letter-spacing:.04em}

  /* ─ Date calculator — 3 col on phone ─ */
  #dc-grid{grid-template-columns:repeat(3,1fr)!important}

  /* ─ Range ─ */
  .range-wrap{gap:8px}

  /* ─ Calculator ─ */
  .calc-page{padding:0 10px;margin-top:16px}
  .calc-page-title h1{font-size:1.1rem}
  .calc-page-title>div{gap:10px}
  .calc-modes{border-radius:9px}
  .calc-mode-btn{font-size:.68rem;padding:7px 4px}
  .cb{height:52px;font-size:.85rem}
  .calc-result{font-size:1.8rem}
  .calc-result.small{font-size:1.4rem}
  .calc-result.xsmall{font-size:1.1rem}
  .calc-display{padding:12px 14px 10px;min-height:86px}
  .calc-btns.sci-grid .cb{height:44px;font-size:.7rem}
  .calc-mem-strip{padding:5px 14px}
  .calc-mem-strip span{font-size:.6rem}
  .calc-kbd-hint{font-size:.6rem;padding:6px}

  /* ─ GPA course rows ─ */
  .gpa-course-row{grid-template-columns:1fr 90px 36px!important;gap:6px!important}
  .gpa-credits-col{display:none!important}

  /* ─ Footer ─ */
  .footer-top{gap:18px;padding-bottom:18px;margin-bottom:18px}
  .footer-links-grid{flex-direction:column;gap:16px}
  .site-footer{padding:24px 14px 20px}
  .footer-desc{font-size:.78rem}
  .footer-bottom>div{gap:8px}
  .footer-legal-link{font-size:.7rem}

  /* ─ Legal pages ─ */
  .legal-card{padding:14px 14px}
  .legal-hero{padding:24px 14px 18px}
  .legal-hero-icon{font-size:2rem}
  .legal-hero p{font-size:.78rem}
  .legal-card h2{font-size:.95rem}
  .legal-card p,.legal-card li{font-size:.82rem}
  .legal-principle strong{font-size:.82rem}
  .legal-principle p{font-size:.76rem}
  .legal-contacts{gap:10px}
  .legal-contact-item{padding:10px 12px}
  .legal-btn{font-size:.82rem;padding:9px 16px}
  .legal-alert-info,.legal-alert-warn,.legal-alert-error{font-size:.82rem;padding:12px 14px}

  /* ─ Contact form ─ */
  .legal-body .tf-two-col{grid-template-columns:1fr}
}

/* ── Small mobile (≤480px) ──────────────────────────── */
@media(max-width:480px){
  .hero h1{font-size:1.3rem}
  .hero-sub{font-size:.82rem}
  .tools-section{padding:14px 12px 60px}
  .tools-grid{gap:6px}
  .tool-card{padding:12px 10px}
  .tool-card-name{font-size:.75rem}

  /* Stats — 2 per row */
  .tf-stat-grid{grid-template-columns:repeat(2,1fr)}
  .tf-stat-card .num{font-size:.95rem}

  /* Date calc — 2 col on very small */
  #dc-grid{grid-template-columns:repeat(2,1fr)!important}
  /* But keep hours+mins visible */

  /* Calculator tighter */
  .cb{height:48px;font-size:.8rem}
  .calc-btns.sci-grid .cb{height:40px;font-size:.66rem}
  .calc-result{font-size:1.6rem}
  .calc-mode-btn{font-size:.64rem;padding:6px 3px}

  /* Breadcrumb wrap */
  .breadcrumb{gap:4px;font-size:.68rem}
  .breadcrumb-sep{display:none}
  .breadcrumb a::after{content:" /";color:var(--border2)}

  /* Tool info */
  .tool-info-card{padding:14px 14px}
  .benefit-item,.tool-step{font-size:.78rem}

  /* Loan table */
  #lc-amort-wrap table{font-size:.72rem}
  #lc-amort-wrap td,#lc-amort-wrap th{padding:6px 6px}

  /* Reduce footer col gap */
  .footer-links-grid{gap:14px}
  .footer-col ul{gap:6px}

  /* Legal */
  .legal-principles{gap:12px}
  .lp-icon{width:30px;height:30px;font-size:.95rem}
}

/* ── Very small (≤380px) ────────────────────────────── */
@media(max-width:380px){
  .hero h1{font-size:1.15rem}
  .hero-sub{display:none}
  .hero-badge{font-size:.6rem}
  .tools-grid{grid-template-columns:1fr 1fr;gap:5px}
  .tool-card{padding:10px 9px;gap:5px}
  .tool-card-icon{width:28px;height:28px;font-size:.8rem;border-radius:6px}
  .tool-card-name{font-size:.72rem}
  .tool-card-arrow{display:none}

  /* Calculator — really compact */
  .cb{height:44px;font-size:.75rem}
  .calc-mode-btn{font-size:.6rem;padding:5px 2px}
  .calc-result{font-size:1.4rem}
  .calc-display{min-height:78px}
  .calc-btns.sci-grid .cb{height:38px;font-size:.62rem}

  /* Single col everything */
  .tf-stat-grid{grid-template-columns:repeat(2,1fr);gap:5px}
  .tf-stat-card{padding:9px 5px}
  #dc-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Header tighter */
  .header-inner{padding:0 10px;height:52px}
}

/* ── Touch / pointer improvements ───────────────────── */
@media(hover:none) and (pointer:coarse){
  /* Larger tap targets on touch devices */
  .filter-btn{min-height:36px}
  .tf-btn{min-height:44px}
  .tf-btn-sm{min-height:36px}
  .nav-dropdown-btn{min-height:36px}
  .cb{cursor:default} /* remove pointer on calc buttons - prevents 300ms delay */
  .mob-link{min-height:44px}
  .mob-accordion-btn{min-height:44px}
  .copy-btn{min-height:32px;padding:6px 14px}
  /* Remove hover states that can stick on touch */
  .tool-card:hover{transform:none;box-shadow:none}
  .tf-btn:hover{transform:none}
}

/* ── Print styles ───────────────────────────────────── */
@media print{
  .site-header,.site-footer,.filters-bar,.ad-banner,
  .mobile-drawer,.mobile-drawer-overlay,
  .tf-actions,.tool-page-badges{display:none!important}
  .tool-page{padding:0}
  .tool-container,.tool-info-card{border:1px solid #ccc!important;box-shadow:none!important}
  body{background:#fff!important;color:#000!important}
}

/* ══════════════════════════════════════════════════════
   GLOBAL MOBILE-FIRST FOUNDATIONS (appended last)
   ══════════════════════════════════════════════════════ */

/* Prevent horizontal overflow globally */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
img, video, svg, canvas { max-width: 100%; height: auto; }

/* Safe area insets for notched phones (iPhone X+) */
.site-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.site-footer  { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.mobile-drawer{ padding-left: env(safe-area-inset-left); }

/* Smooth momentum scrolling everywhere on iOS */
* { -webkit-overflow-scrolling: touch; }

/* Better tap highlight */
* { -webkit-tap-highlight-color: rgba(56,189,248,0.12); }

/* Prevent text size adjustment on orientation change */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Tables: always scrollable, never overflow */
table { width: 100%; max-width: 100%; }
.tool-ui table, #lc-amort, .tf-output-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* Inputs: prevent iOS zoom (font-size must be ≥16px on focus) */
@media(max-width:768px){
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }
}

/* Word break for long strings in output */
.tf-output-body { word-wrap: break-word; overflow-wrap: break-word; }
.tf-output-body.plain { white-space: pre-wrap; }

/* Fix nav dropdown z-index on mobile */
.mobile-drawer { z-index: 9999; }
.mobile-drawer-overlay { z-index: 9998; }
.site-header { z-index: 500; }

/* Sticky header safe padding under header */
.hero, .tool-page, .legal-page, .calc-page { scroll-margin-top: 70px; }

/* Category headings don't break on tiny screens */
.cat-pill { max-width: 100%; white-space: normal; }
.category-heading { flex-wrap: wrap; gap: 8px; }
.category-heading::after { min-width: 20px; }

/* Tool page badges — always wrap */
.tool-page-badges { flex-wrap: wrap; }

/* Textarea resize handle visible on all devices */
.tf-textarea { resize: vertical; min-height: 100px; }

/* Search box — clear button for mobile browsers */
#search-input::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }

/* Filter bar items never clip text */
.filter-btn { white-space: nowrap; }

/* Footer legal links — wrap on small screens */
.footer-bottom { flex-wrap: wrap; gap: 10px; }
.footer-bottom > div { flex-wrap: wrap; gap: 8px; }

/* ── Component-level overflow fixes ──────────────────── */

/* Amortization table in loan calculator */
#lc-amort-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#lc-amort-tbl  { min-width: 320px; }

/* Unit converter row on narrow screens */
@media(max-width:400px){
  .unit-row { grid-template-columns: 1fr; gap: 8px; }
  .unit-swap-btn { width: 100%; border-radius: var(--radius); }
}

/* Speed/Date/Unit calculators - force wrap selects */
@media(max-width:500px){
  .tf-two-col { grid-template-columns: 1fr; }
  .tf-three-col { grid-template-columns: 1fr; }
}

/* Compound interest chart — responsive height */
@media(max-width:600px){
  #ci-chart { height: 90px !important; }
}

/* Color palette swatches — don't overflow */
.color-palette-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* JWT output — break long tokens */
#jwt-out div { word-break: break-all; }

/* ── Dropdown nav: ensure it never shows on small screens ─ */
@media(max-width:768px){
  .nav-dropdown { display: none !important; }
  .header-nav > a.nav-dropdown-btn { display: none !important; }
}