:root {
  --tf-ink: #10202c;
  --tf-muted: #566875;
  --tf-navy: #082f49;
  --tf-blue: #0369a1;
  --tf-cyan: #0891b2;
  --tf-teal: #0f766e;
  --tf-line: #d7e1e7;
  --tf-soft: #eef5f7;
  --tf-surface: #ffffff;
  --tf-bg: #f4f7f8;
  --tf-danger: #b42318;
  --tf-warning: #a15c00;
  --tf-success: #147d64;
  --tf-radius: 12px;
  --tf-radius-sm: 7px;
  --tf-shadow: 0 10px 30px rgba(8, 47, 73, .08), 0 1px 3px rgba(8, 47, 73, .06);
  --tf-shadow-lg: 0 24px 70px rgba(3, 27, 43, .22);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { max-width:100%; overflow-x:clip; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 8% -10%, rgba(8,145,178,.10), transparent 32rem),
    radial-gradient(circle at 95% 5%, rgba(15,118,110,.07), transparent 28rem),
    var(--tf-bg);
  color: var(--tf-ink);
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: var(--tf-blue); text-underline-offset: 2px; }
a:hover { color: var(--tf-teal); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
input, select, textarea, button { min-width:0; max-width:100%; }
input[type="file"] { width:100%; overflow:hidden; }
ins.adsbygoogle { max-width:100%!important; overflow:hidden; }
body > iframe[src*="google" i], body > iframe[name*="google" i] { max-width:100vw!important; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

.tf-skip-link { position: fixed; left: 12px; top: -60px; z-index: 2000; padding: 9px 13px; background: #fff; color: #111; border-radius: 4px; }
.tf-skip-link:focus { top: 12px; }
.tf-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.tf-navbar { position: sticky; top: 0; z-index: 1000; padding: 0; background: var(--tf-navy); border-bottom: 3px solid var(--tf-cyan); box-shadow: 0 5px 18px rgba(3, 27, 43, .2); }
.tf-nav-inner { display:flex; align-items:center; flex-wrap:nowrap; gap:14px; width:min(1440px, 100%); min-height:60px; margin:auto; padding:0 20px; }
.tf-brand { display:flex; align-items:center; gap:9px; flex:none; color:#fff!important; font-size:16px; font-weight:600; letter-spacing:.01em; text-decoration:none; }
.tf-brand b { color:#6ee7e0; }
.tf-brand-mark { display:grid; place-items:center; width:31px; height:31px; color:#06283c; background:#67e8f9; border-radius:6px; font-size:12px; font-weight:900; letter-spacing:-.02em; }
.tf-nav-links { display:flex; align-items:center; gap:3px; min-width:0; margin-left:auto; }
.tf-nav-links > a, .tf-nav-group > summary, .tf-nav-logout button { display:block; padding:9px 10px; border:0; border-radius:5px; color:#e8f4f8!important; background:transparent; font-weight:650; text-decoration:none; cursor:pointer; white-space:nowrap; list-style:none; }
.tf-nav-links > a:hover, .tf-nav-group > summary:hover, .tf-nav-logout button:hover { background:rgba(255,255,255,.1); }
.tf-nav-group { position:relative; }
.tf-nav-group > summary::-webkit-details-marker { display:none; }
.tf-nav-group > summary::after { content:'⌄'; padding-left:5px; color:#81d8e2; }
.tf-nav-group[open] > summary { background:rgba(255,255,255,.12); }
.tf-nav-menu { position:absolute; top:calc(100% + 8px); left:0; display:grid; min-width:230px; padding:7px; background:#fff; border:1px solid var(--tf-line); border-radius:var(--tf-radius); box-shadow:0 18px 50px rgba(0,24,40,.25); }
.tf-nav-menu a { padding:9px 10px; border-radius:5px; color:var(--tf-ink); text-decoration:none; }
.tf-nav-menu a:hover { background:var(--tf-soft); color:var(--tf-blue); }
.tf-nav-search input { width:145px; padding:8px 10px; border:1px solid rgba(255,255,255,.25); border-radius:5px; color:#fff; background:rgba(255,255,255,.08); }
.tf-nav-search input::placeholder { color:#c8d8df; }
.tf-nav-search input:focus { width:210px; background:#fff; color:var(--tf-ink); transition:.15s ease; }
.tf-nav-logout { margin:0; }
.tf-nav-toggle { display:none; margin-left:auto; padding:8px 10px; border:1px solid rgba(255,255,255,.25); border-radius:5px; color:#fff; background:transparent; font-weight:700; }
.tf-nav-toggle-label { margin-left:6px; }

.tf-page { padding:26px 20px 48px; }
.tf-page-inner { width:min(1280px, 100%); margin:auto; }
.tf-page-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:0 0 20px; padding:0 0 16px; border-bottom:1px solid var(--tf-line); background:transparent; color:inherit; text-align:left; }
.tf-eyebrow { margin:0 0 3px; color:var(--tf-teal); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.tf-title { margin:0; color:var(--tf-navy); font-size:clamp(1.65rem, 3vw, 2.35rem); line-height:1.15; letter-spacing:-.025em; }
.tf-subtitle { max-width:820px; margin:6px 0 0; color:var(--tf-muted); font-size:15px; font-weight:450; }

.tf-card, .card, .container, .container-half {
  background:var(--tf-surface);
  border:1px solid var(--tf-line);
  border-radius:var(--tf-radius);
  box-shadow:var(--tf-shadow);
}
.tf-card { padding:20px; }
.tf-card > *, .tf-grid > *, .tf-form-grid > *, .tf-inline-form > * { min-width:0; }
.tf-card + .tf-card { margin-top:16px; }
.tf-card h2, .tf-card h3 { margin-top:0; color:var(--tf-navy); }
.tf-card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.tf-card-head h2, .tf-card-head h3, .tf-card-head p { margin:0; }
.tf-card-head p { color:var(--tf-muted); }
.tf-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:14px; }
.tf-stack { display:grid; gap:14px; }
.tf-result-panel { min-width:0; padding:16px; background:#f9fbfc; border:1px solid var(--tf-line); border-left:4px solid var(--tf-cyan); border-radius:6px; }
.tf-output, pre { max-width:100%; overflow:auto; padding:14px; border:1px solid #1e3b4c; border-radius:6px; background:#0c2230; color:#d8f3f5; font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.tf-empty { padding:22px; color:var(--tf-muted); text-align:center; background:var(--tf-soft); border:1px dashed #b7c8d0; border-radius:6px; }

.tf-form { display:grid; gap:12px; }
.tf-form label, label { font-weight:700; color:#243845; }
.tf-form label > span { display:block; margin-bottom:5px; }
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=search], input[type=tel], select, textarea, .tf-input {
  width:100%; min-height:42px; padding:9px 11px; border:1px solid #aebec7; border-radius:5px; background:#fff; color:var(--tf-ink); box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
}
textarea { min-height:120px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--tf-cyan); box-shadow:0 0 0 3px rgba(8,145,178,.16); outline:0; }
.tf-actions, .tf-inline-form { display:flex; align-items:end; flex-wrap:wrap; gap:8px; margin-top:5px; }
.tf-inline-form label { flex:1 1 240px; }
.tf-btn, button.tf-btn, input[type=submit], form button:not(.tf-nav-toggle):not(.dropbtn) { min-height:40px; padding:9px 14px; border:1px solid var(--tf-blue); border-radius:5px; color:#fff; background:var(--tf-blue); font-weight:750; text-decoration:none; cursor:pointer; }
.tf-btn:hover, button.tf-btn:hover { color:#fff; background:#075985; }
.tf-btn:disabled, button:disabled { cursor:wait; opacity:.62; }
.tf-btn-quiet { border-color:#b7c8d0!important; background:#fff!important; color:var(--tf-navy)!important; }
.tf-btn-danger { border-color:var(--tf-danger)!important; background:var(--tf-danger)!important; }

.tf-alert { margin:0 0 14px; padding:12px 14px; border:1px solid var(--tf-line); border-left:4px solid var(--tf-blue); border-radius:5px; background:#f7fbfd; }
.tf-alert-success { border-left-color:var(--tf-success); background:#eefaf6; }
.tf-alert-warning { border-left-color:var(--tf-warning); background:#fff9ed; }
.tf-alert-error { border-left-color:var(--tf-danger); background:#fff4f3; }
.tf-status, .tf-badge, .tf-tag { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:3px 8px; border-radius:999px; background:#e7eef2; color:#344b59; font-size:12px; font-weight:750; overflow-wrap:anywhere; white-space:normal; }
.tf-status.is-good { background:#dff6ed; color:#09664e; }
.tf-status.is-bad { background:#fee4e2; color:#9b1c13; }

.tf-footer { display:flex; justify-content:space-between; gap:20px; width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:22px 0 30px; border-top:1px solid var(--tf-line); color:var(--tf-muted); background:transparent; text-align:left; font-weight:400; }
.tf-footer div { display:flex; gap:10px; }
.tf-auth-card { max-width:520px; }

.tf-home-hero { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.6fr); gap:16px; margin-bottom:18px; }
.tf-home-intro { padding:26px; color:#fff; background:var(--tf-navy); border-radius:var(--tf-radius); box-shadow:var(--tf-shadow); }
.tf-home-intro .tf-eyebrow { color:#67e8f9; }
.tf-home-intro h1 { max-width:760px; margin:5px 0 10px; font-size:clamp(2rem,5vw,3.6rem); line-height:1.02; letter-spacing:-.045em; }
.tf-home-intro p { max-width:700px; margin:0; color:#d7e8ee; font-size:16px; }
.tf-home-ip { display:flex; flex-direction:column; justify-content:space-between; }
.tf-home-ip code { display:block; margin:10px 0; color:var(--tf-blue); font-size:clamp(1rem,2.5vw,1.4rem); font-weight:800; overflow-wrap:anywhere; }
.tf-tool-filter { position:sticky; top:70px; z-index:20; display:flex; gap:10px; margin:18px 0; padding:12px; background:rgba(244,247,248,.94); border:1px solid var(--tf-line); border-radius:var(--tf-radius); backdrop-filter:blur(8px); }
.tf-tool-filter input { flex:1; }
.tf-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:28px 0 10px; }
.tf-section-title h2 { margin:0; color:var(--tf-navy); font-size:19px; }
.tf-tool-card { display:flex; flex-direction:column; min-height:150px; padding:17px; border-top:3px solid var(--tf-cyan); text-decoration:none; }
.tf-tool-card:hover { transform:translateY(-1px); border-color:var(--tf-teal); box-shadow:0 12px 28px rgba(8,47,73,.13); }
.tf-tool-card h3 { margin:0 0 7px; font-size:16px; }
.tf-tool-card p { margin:0; color:var(--tf-muted); font-size:13px; }
.tf-tool-card .tf-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:auto; padding-top:12px; }

table { width:100%; border-collapse:collapse; }
th, td { padding:9px 10px; border-bottom:1px solid var(--tf-line); text-align:left; vertical-align:top; }
th { color:var(--tf-navy); background:var(--tf-soft); font-size:12px; letter-spacing:.03em; text-transform:uppercase; }
.table-responsive, .tf-table-wrap { max-width:100%; overflow-x:auto; }
.tf-table-wrap > table { min-width:560px; }

/* Compatibility layer for legacy and Bootstrap-based tools. */
.container:not(.tf-container), .container-fluid { width:min(1280px, calc(100% - 28px)); margin-inline:auto; }
.container:not(.tf-container) { padding:20px; }
.card { overflow:hidden; }
.card-body { padding:18px; }
.card-header, .card-footer { padding:12px 18px; background:var(--tf-soft); border-color:var(--tf-line); }
.btn, button, input[type=submit], input[type=button] { border-radius:5px; font-weight:750; }
.btn-primary, .btn-success { border-color:var(--tf-blue); background:var(--tf-blue); color:#fff; }
.btn-primary:hover, .btn-success:hover { border-color:#075985; background:#075985; color:#fff; }
.form-control, .form-select { border-color:#aebec7; border-radius:5px; }
.alert { border-radius:5px; border-left-width:4px; }
.nav-tabs { gap:4px; border-color:var(--tf-line); }
.nav-tabs .nav-link { color:var(--tf-blue); border-radius:5px 5px 0 0; font-weight:700; }
.nav-tabs .nav-link.active { color:var(--tf-navy); }
.tabs, .tool-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--tf-line); }
.tab-btn, .tab-button { padding:9px 13px; border:1px solid var(--tf-line); border-bottom:0; border-radius:5px 5px 0 0; background:var(--tf-soft); color:var(--tf-navy); font-weight:700; }
.tab-btn.active, .tab-button.active { background:var(--tf-blue); color:#fff; }
.result, .result-box, .output, .tool-result { max-width:100%; overflow-wrap:anywhere; border-color:var(--tf-line); border-radius:6px; }
.tool-section, .calculator-section, fieldset { border-color:var(--tf-line); border-radius:var(--tf-radius); }
.bg-light { background:var(--tf-bg)!important; }

/* Contrast contract for shared and legacy surfaces.
   Theme-aware applications may expose --bg/--surface/--text tokens on <html>;
   the global compatibility layer must preserve those surfaces instead of
   pairing dark-theme text with light-theme cards. */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .container-half,
html:not([data-theme="dark"]) fieldset,
html:not([data-theme="dark"]) .tool-section,
html:not([data-theme="dark"]) .calculator-section { color:var(--tf-ink); }
html:not([data-theme="dark"]) .card h1,
html:not([data-theme="dark"]) .card h2,
html:not([data-theme="dark"]) .card h3,
html:not([data-theme="dark"]) .card h4,
html:not([data-theme="dark"]) .card h5,
html:not([data-theme="dark"]) .card h6 { color:var(--tf-navy); }
html:not([data-theme]) .text-muted,
html:not([data-theme]) .muted,
html:not([data-theme]) .smallnote { color:var(--tf-muted)!important; }

html[data-theme="light"] {
  color-scheme:light;
}
html[data-theme="light"] body,
html[data-theme="light"] .card,
html[data-theme="light"] .container-half,
html[data-theme="light"] fieldset,
html[data-theme="light"] .tool-section,
html[data-theme="light"] .calculator-section { color:var(--text, var(--tf-ink)); }
html[data-theme="light"] .card h1,
html[data-theme="light"] .card h2,
html[data-theme="light"] .card h3,
html[data-theme="light"] .card h4,
html[data-theme="light"] .card h5,
html[data-theme="light"] .card h6,
html[data-theme="light"] label { color:var(--text, var(--tf-ink))!important; }
html[data-theme="dark"] {
  --text:#f8fbff!important;
  --muted:#cbd5e1!important;
  --surface:#111b2e!important;
  --surface2:#0e1728!important;
  color-scheme:dark;
}
html[data-theme="dark"] body {
  background:#0b1220!important;
  color:#f8fbff!important;
}
html[data-theme="dark"] .container:not(.tf-container),
html[data-theme="dark"] .container-fluid {
  background:transparent!important;
  color:var(--text, #f8fbff)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .tf-card,
html[data-theme="dark"] .tf-result-panel,
html[data-theme="dark"] .tf-alert,
html[data-theme="dark"] .container-half,
html[data-theme="dark"] fieldset,
html[data-theme="dark"] .tool-section,
html[data-theme="dark"] .calculator-section,
html[data-theme="dark"] .modal-content {
  background:#111b2e!important;
  color:#f8fbff!important;
  border-color:rgba(255,255,255,.16)!important;
}
html[data-theme="dark"] .tf-page-head .tf-title,
html[data-theme="dark"] .tf-page-head h1,
html[data-theme="dark"] .tf-section-title h2,
html[data-theme="dark"] .tf-card h1,
html[data-theme="dark"] .tf-card h2,
html[data-theme="dark"] .tf-card h3,
html[data-theme="dark"] .tf-card h4,
html[data-theme="dark"] .tf-card h5,
html[data-theme="dark"] .tf-card h6,
html[data-theme="dark"] .tf-card label { color:#f8fbff!important; }
html[data-theme="dark"] .tf-page-head .tf-subtitle,
html[data-theme="dark"] .tf-card .tf-muted,
html[data-theme="dark"] .tf-card small,
html[data-theme="dark"] .tf-tool-card p { color:#cbd5e1!important; }
html[data-theme="dark"] .tf-alert-error { background:#3a1720!important; color:#fecdd3!important; border-color:#fb7185!important; }
html[data-theme="dark"] .tf-alert-warning { background:#342a13!important; color:#fde68a!important; border-color:#fbbf24!important; }
html[data-theme="light"] .tf-page-head .tf-title,
html[data-theme="light"] .tf-card h1,
html[data-theme="light"] .tf-card h2,
html[data-theme="light"] .tf-card h3,
html[data-theme="light"] .tf-card label { color:var(--tf-ink)!important; }
html[data-theme="dark"] .tf-muted,
html[data-theme="dark"] .tf-subtitle,
html[data-theme="dark"] .tf-footer,
html[data-theme="dark"] .tf-footer small { color:#b9c9d4!important; }
html[data-theme="dark"] .tf-eyebrow { color:#5eead4!important; }
html[data-theme="dark"] .tf-footer a { color:#67e8f9!important; }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .input-group-text {
  background:var(--surface2, #0e1728)!important;
  color:var(--text, #f8fbff)!important;
  border-color:var(--border2, rgba(255,255,255,.22))!important;
}
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card h5,
html[data-theme="dark"] .card h6,
html[data-theme="dark"] label,
html[data-theme="dark"] legend { color:var(--text, #f8fbff)!important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .smallnote,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body-secondary { color:var(--muted, #cbd5e1)!important; }
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=url],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .tf-input {
  background:var(--surface2, #0e1728)!important;
  color:var(--text, #f8fbff)!important;
  border-color:var(--border2, rgba(255,255,255,.24))!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:var(--muted, #cbd5e1)!important; opacity:.78; }
html[data-theme="dark"] th { background:var(--surface2, #0e1728)!important; color:var(--text, #f8fbff)!important; }
html[data-theme="dark"] td { color:var(--text, #f8fbff)!important; border-color:var(--border, rgba(255,255,255,.16))!important; }
html[data-theme="dark"] .alert { color:var(--text, #f8fbff); background:var(--surface2, #0e1728); border-color:var(--border2, rgba(255,255,255,.22)); }
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-outline-secondary { color:var(--text, #f8fbff)!important; border-color:var(--border2, rgba(255,255,255,.30))!important; }
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover { color:#fff!important; background:rgba(255,255,255,.12)!important; }
html[data-theme="dark"] .tf-nav-mega,
html[data-theme="dark"] .tf-command-panel {
  color:#10202c!important;
  color-scheme:light;
}
html[data-theme="dark"] .tf-nav-mega input,
html[data-theme="dark"] .tf-command-panel input {
  background:#fff!important;
  color:var(--tf-ink)!important;
  border-color:#aebec7!important;
}
html[data-theme="dark"] .form-text { color:#cbd5e1!important; }
html[data-theme="dark"] .small-note,
html[data-theme="dark"] .small-note em { color:#e2e8f0!important; }
html[data-theme="dark"] code:not(pre code):not(.tf-output code) { color:#f9a8d4; }
html[data-theme="dark"] .btn-outline-danger { color:#fecdd3!important; border-color:#fb7185!important; }
html[data-theme="dark"] .tf-shape-card { background:#111b2e!important; border-color:rgba(255,255,255,.18)!important; }
html[data-theme="dark"] .tf-osi li { background:#0e1728!important; color:#f8fbff!important; }
html[data-theme="dark"] .tf-dropzone strong { color:#f8fbff!important; }
html[data-theme="dark"] .meta-drop strong { color:#f8fbff!important; }
html[data-theme="dark"] .tf-category-chip { color:#082f49!important; }
html[data-theme="dark"] .tf-category-chip span { color:#566875!important; }
html[data-theme="dark"] .ipsub-ip { background:#0e1728!important; }
html[data-theme="dark"] .editor-surface {
  background:#fff!important;
  color:#111!important;
  color-scheme:light;
}
html[data-theme="dark"] .editor-surface h1,
html[data-theme="dark"] .editor-surface h2,
html[data-theme="dark"] .editor-surface h3 { color:#163447!important; }
html[data-theme="dark"] .tf-card a:not(.tf-btn):not(.btn),
html[data-theme="dark"] .tf-page a:not(.tf-btn):not(.btn) { color:#67e8f9; }
html[data-theme="light"] .container h1.mb-3,
html[data-theme="light"] .container h4.mt-4 { color:#10202c!important; }
html[data-theme="light"] body[data-game] {
  --bg:#f4f7f8;
  --panel:#ffffff;
  --panel2:#eef5f7;
  --panel3:#ffffff;
  --text:#10202c;
  --muted:#566875;
  --line:#c9d7de;
  --accent:#0f766e;
  --accent2:#086f68;
  --good:#167a4e;
  --warn:#8a5b00;
  --bad:#b42318;
  background:#f4f7f8!important;
  color:#10202c!important;
}
html[data-theme="light"] .btn-outline-warning { color:#765000!important; border-color:#a66f00!important; }
html[data-theme="light"] .btn-outline-info { color:#006477!important; border-color:#007f96!important; }

button:disabled, input:disabled, select:disabled, textarea:disabled { opacity:.72; }

/* Premium global shell, complete catalog navigation, and command palette. */
.tf-navbar { border-bottom-width:2px; background:linear-gradient(105deg,#062f47 0%,#073d58 58%,#07536a 100%); }
.tf-nav-inner { position:relative; min-height:64px; gap:12px; }
.tf-brand-mark { width:34px; height:34px; border-radius:9px; box-shadow:0 0 0 4px rgba(103,232,249,.10); }
.tf-nav-links > a[aria-current="page"], .tf-nav-category-links a[aria-current="page"] { background:rgba(103,232,249,.16); color:#8af3ee!important; }
.tf-nav-count { display:inline-grid; place-items:center; min-width:24px; height:20px; margin-left:5px; padding:0 6px; border-radius:999px; background:rgba(103,232,249,.16); color:#8af3ee; font-size:11px; }
.tf-nav-browse { position:static; }
.tf-nav-browse > summary { display:flex; align-items:center; }
.tf-nav-mega { position:absolute; top:calc(100% + 9px); left:18px; right:18px; max-height:min(72vh,700px); overflow:auto; padding:18px; color:var(--tf-ink); background:rgba(255,255,255,.985); border:1px solid rgba(160,184,196,.72); border-radius:14px; box-shadow:var(--tf-shadow-lg); }
.tf-nav-mega-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; padding:0 2px 14px; border-bottom:1px solid var(--tf-line); }
.tf-nav-mega-head strong, .tf-nav-mega-head span { display:block; }
.tf-nav-mega-head strong { color:var(--tf-navy); font-size:18px; }
.tf-nav-mega-head span { margin-top:2px; color:var(--tf-muted); font-size:13px; }
.tf-nav-mega-head a { color:var(--tf-blue); font-weight:800; text-decoration:none; white-space:nowrap; }
.tf-nav-mega-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 18px; }
.tf-nav-category { min-width:0; }
.tf-nav-category h2 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 7px; padding-bottom:6px; border-bottom:2px solid #d8edf1; color:var(--tf-navy); font-size:13px; letter-spacing:.02em; }
.tf-nav-category h2 a { color:inherit; text-decoration:none; }
.tf-nav-category h2 span { color:var(--tf-muted); font-size:11px; }
.tf-nav-category-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 8px; }
.tf-nav-category-links a { min-width:0; padding:5px 7px; overflow:hidden; border-radius:5px; color:#26404f; font-size:12px; font-weight:600; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.tf-nav-category-links a:hover { background:var(--tf-soft); color:var(--tf-blue); }
.tf-command-trigger { display:flex; align-items:center; gap:7px; min-height:38px; padding:7px 9px; border:1px solid rgba(255,255,255,.25); border-radius:7px; color:#e8f4f8; background:rgba(255,255,255,.09); cursor:pointer; white-space:nowrap; }
.tf-command-trigger:hover { background:rgba(255,255,255,.15); }
.tf-command-trigger kbd { padding:2px 5px; border:1px solid rgba(255,255,255,.22); border-radius:4px; color:#cce4ea; background:rgba(0,0,0,.12); font:10px/1.35 ui-monospace,monospace; }
.tf-command[hidden] { display:none!important; }
.tf-command { position:fixed; inset:0; z-index:3000; display:grid; align-items:start; justify-items:center; padding:9vh 18px 18px; }
.tf-command-backdrop { position:absolute; inset:0; background:rgba(3,19,29,.68); backdrop-filter:blur(5px); }
.tf-command-panel { position:relative; width:min(720px,100%); max-height:82vh; overflow:hidden; padding:18px; background:#fff; border:1px solid #b8cbd4; border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.tf-command-head { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.tf-command-head h2 { margin:0 0 12px; color:var(--tf-navy); font-size:21px; }
.tf-command-close { width:38px; height:38px; padding:0; border:1px solid var(--tf-line); border-radius:8px; color:var(--tf-muted); background:var(--tf-soft); font-size:25px; line-height:1; cursor:pointer; }
.tf-command-input { min-height:50px!important; padding:11px 14px!important; border-width:2px!important; font-size:17px!important; }
.tf-command-meta { display:flex; justify-content:space-between; gap:12px; padding:8px 2px; color:var(--tf-muted); font-size:11px; }
.tf-command-results { max-height:55vh; overflow:auto; }
.tf-command-item { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 11px; border-radius:8px; color:var(--tf-ink); text-decoration:none; }
.tf-command-item span:first-child { min-width:0; }
.tf-command-item strong, .tf-command-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tf-command-item strong { color:var(--tf-navy); }
.tf-command-item small { color:var(--tf-muted); }
.tf-command-item.is-selected { background:#e9f6f8; box-shadow:inset 3px 0 var(--tf-cyan); }
.tf-modal-open { overflow:hidden; }

.tf-page { padding-top:30px; }
.tf-page-head { margin-bottom:24px; padding-bottom:18px; }
.tf-title { font-weight:800; }
.tf-card { transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.tf-home-intro { position:relative; overflow:hidden; min-height:245px; padding:34px; background:linear-gradient(135deg,#062f47 0%,#07536a 66%,#0f766e 125%); }
.tf-home-intro::after { content:''; position:absolute; width:260px; height:260px; right:-70px; top:-95px; border:45px solid rgba(103,232,249,.09); border-radius:50%; }
.tf-home-intro h1, .tf-home-intro p { position:relative; z-index:1; }
.tf-home-intro h1 { max-width:820px; }
.tf-home-stats { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tf-home-stat { padding:7px 10px; border:1px solid rgba(255,255,255,.17); border-radius:999px; color:#dff7f8; background:rgba(255,255,255,.08); font-size:12px; font-weight:750; }
.tf-home-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tf-home-actions .tf-btn { border-color:#67e8f9; background:#67e8f9; color:#062f47; }
.tf-home-actions .tf-btn-quiet { border-color:rgba(255,255,255,.35)!important; background:rgba(255,255,255,.08)!important; color:#fff!important; }
.tf-category-strip { display:flex; flex-wrap:wrap; gap:8px; padding:2px 1px 10px; }
.tf-category-chip { display:flex; align-items:center; gap:7px; flex:none; padding:8px 11px; border:1px solid var(--tf-line); border-radius:999px; color:var(--tf-navy); background:#fff; font-size:12px; font-weight:750; text-decoration:none; box-shadow:0 2px 7px rgba(8,47,73,.04); }
.tf-category-chip:hover { border-color:var(--tf-cyan); background:#effbfd; }
.tf-category-chip span { color:var(--tf-muted); }
.tf-tool-filter { border-radius:10px; box-shadow:0 6px 20px rgba(8,47,73,.07); }
.tf-tool-card { position:relative; min-height:172px; padding:19px; overflow:hidden; }
.tf-tool-card::after { content:'→'; position:absolute; right:15px; bottom:13px; color:#9bb1bc; font-size:18px; transition:transform .16s ease,color .16s ease; }
.tf-tool-card:hover::after { color:var(--tf-teal); transform:translateX(3px); }
.tf-tool-card:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(8,47,73,.14); }
.tf-tool-card .tf-tags { padding-right:28px; }
.tf-tool-category { margin-bottom:7px; color:var(--tf-teal); font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.tf-section-title > div > .tf-eyebrow { margin-bottom:1px; }
.tf-section-title > div > h2 { margin:0; }
.tf-tool-card[data-category="network-diagnostics"] { border-top-color:#0284c7; }
.tf-tool-card[data-category="telecom-voip"] { border-top-color:#7c3aed; }
.tf-tool-card[data-category="security-cryptography"] { border-top-color:#c2410c; }
.tf-tool-card[data-category="converters-calculators"] { border-top-color:#0f766e; }
.tf-tool-card[data-category="files-media-developer"] { border-top-color:#4f46e5; }
.tf-tool-card[data-category="finance-reference"] { border-top-color:#15803d; }
.tf-tool-card[data-category="apps-productivity"] { border-top-color:#be185d; }
.tf-search-controls { display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,.7fr); gap:12px; }
.tf-search-controls label > span { display:block; margin-bottom:5px; }
.tf-search-results { margin-top:16px; }
.tf-card kbd { padding:2px 5px; border:1px solid var(--tf-line); border-radius:4px; background:var(--tf-soft); font:11px ui-monospace,monospace; }
.tf-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:10px 0 13px; }
.tf-form-grid label > input, .tf-form-grid label > select { margin-top:5px; }
.tf-check { display:flex; align-items:center; align-self:end; gap:8px; min-height:42px; padding:9px 11px; border:1px solid var(--tf-line); border-radius:var(--tf-radius-sm); background:var(--tf-soft); }
.tf-check input { width:auto; min-height:0; margin:0; }
.tf-feature-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr)); align-items:start; }
.tf-quick-converters { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tf-measurement-layout { grid-template-columns:minmax(0,1.3fr) minmax(0,1.7fr); }
.tf-feature-grid > .tf-card { margin-top:0; }
.tf-span-2 { grid-column:span 2; }
input[type=range] { width:100%; accent-color:var(--tf-cyan); }
output { color:var(--tf-blue); font-weight:800; }
.tf-converter-hero { overflow:visible; }
.tf-converter-grid { grid-template-columns:minmax(220px,1fr) minmax(140px,.35fr); }
.tf-converter-swap { display:flex; align-items:end; justify-content:center; }
.tf-converter-result { display:grid; gap:2px; margin-top:18px; padding:20px; border-left:5px solid var(--tf-cyan); border-radius:9px; background:linear-gradient(110deg,#e9f7f9,#f8fbfc); }
.tf-converter-result span { color:var(--tf-muted); }
.tf-converter-result strong { color:var(--tf-navy); font-size:clamp(1.6rem,4vw,2.6rem); line-height:1.15; overflow-wrap:anywhere; }
.tf-dropzone { display:grid; place-items:center; gap:8px; min-height:190px; padding:28px; border:2px dashed #9eb7c3; border-radius:10px; background:linear-gradient(135deg,#f8fbfc,#edf7f8); text-align:center; transition:.16s ease; }
.tf-dropzone strong { color:var(--tf-navy); font-size:21px; }
.tf-dropzone span { color:var(--tf-muted); }
.tf-dropzone.is-dragging { border-color:var(--tf-cyan); background:#e1f6f7; transform:scale(1.005); }
.tf-image-preview { display:block; width:auto; max-width:100%; max-height:560px; margin:auto; border:1px solid var(--tf-line); border-radius:8px; background:repeating-conic-gradient(#eef2f4 0 25%,#fff 0 50%) 0/18px 18px; }
.tf-palette { display:grid; grid-template-columns:repeat(8,1fr); height:42px; margin-top:12px; overflow:hidden; border:1px solid var(--tf-line); border-radius:8px; }
.tf-palette span { min-width:24px; }
.tf-osi { display:grid; gap:6px; margin:0; padding:0; list-style-position:inside; }
.tf-osi li { padding:9px 11px; border-left:4px solid var(--tf-cyan); border-radius:5px; background:var(--tf-soft); }

@media (max-width: 1024px) {
  .tf-nav-weather { display:none!important; }
  .tf-command-trigger kbd { display:none; }
  .tf-nav-mega-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tf-nav-links > a, .tf-nav-group > summary { padding-inline:7px; font-size:14px; }
}
@media (max-width: 860px) {
  .tf-nav-inner { flex-wrap:wrap; padding:9px 14px; }
  .tf-nav-toggle { display:block; }
  .tf-nav-links { display:none; width:100%; margin:0; padding:9px 0; border-top:1px solid rgba(255,255,255,.15); }
  .tf-nav-links.is-open { display:grid; }
  .tf-nav-links > a, .tf-nav-group > summary, .tf-nav-logout button, .tf-command-trigger { width:100%; text-align:left; }
  .tf-nav-menu { position:static; margin:4px 0 6px 10px; box-shadow:none; }
  .tf-nav-mega { position:static; max-height:62vh; margin:5px 0; padding:13px; border-radius:9px; box-shadow:none; }
  .tf-nav-mega-head { align-items:flex-start; }
  .tf-nav-mega-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tf-nav-category-links { grid-template-columns:1fr; }
  .tf-command-trigger { justify-content:flex-start; }
  .tf-category-strip { flex-wrap:nowrap; overflow:auto; scrollbar-width:thin; }
  .tf-home-hero { grid-template-columns:1fr; }
  .tf-quick-converters, .tf-measurement-layout { grid-template-columns:1fr; }
  .tf-page { padding:20px 14px 36px; }
  .tf-footer { width:calc(100% - 28px); }
}
@media (max-width: 540px) {
  .tf-page-head, .tf-card-head, .tf-footer { align-items:flex-start; flex-direction:column; }
  .tf-home-intro, .tf-card { padding:17px; }
  .tf-home-intro { min-height:0; }
  .tf-nav-mega-head { display:block; }
  .tf-nav-mega-head > a { display:inline-block; margin-top:8px; }
  .tf-nav-mega-grid { grid-template-columns:1fr; }
  .tf-command { padding:4vh 10px 10px; }
  .tf-command-panel { padding:14px; border-radius:12px; }
  .tf-command-meta span:last-child { display:none; }
  .tf-tool-filter { top:68px; }
  .tf-actions .tf-btn, .tf-actions button { flex:1 1 auto; }
  .tf-search-controls { grid-template-columns:1fr; }
  .tf-form-grid, .tf-converter-grid { grid-template-columns:1fr; }
  .tf-span-2 { grid-column:auto; }
  .tf-table-wrap > table { min-width:520px; }
  .tf-converter-swap { justify-content:stretch; }
  .tf-converter-swap .tf-btn { width:100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; } }
@media print { .tf-navbar, .tf-footer, .tf-tool-filter, .tf-actions { display:none!important; } body { background:#fff; } .tf-card { box-shadow:none; } }