/* Tool pages: header, tool tabs, footer bar and main buttons in the same look as the rest of the site, in both modes.
   The mode is set on <html data-tool-theme="light|dark"> by the script in each tool's <head>. */
:root { --ink: #171A20; --paper: #F7F7F4; }   /* used by the inline logo */
:root, [data-tool-theme="light"] { --tn-bg: #F7F7F4; --tn-bar: #EFEFEA; --tn-ink: #171A20; --tn-ink2: #3A3F48; --tn-grey: #565B64; --tn-line: #DCDCD5; --tn-btn: #171A20; --tn-btn-ink: #F7F7F4; --tn-accent: #2563EB; }
[data-tool-theme="dark"] { --tn-bg: #111318; --tn-bar: #15181D; --tn-ink: #F7F7F4; --tn-ink2: #C9CCD1; --tn-grey: #9A9EA6; --tn-line: #2A2F37; --tn-btn: #F7F7F4; --tn-btn-ink: #171A20; --tn-accent: #3B82F6; }
body { font-family: 'Inter', system-ui, sans-serif !important; }
::selection { background: rgba(37, 99, 235, .2); }

/* header */
nav { background: var(--tn-bg) !important; border-bottom: 1px solid var(--tn-line) !important; }
nav .tn-brand { color: var(--tn-ink) !important; font: 700 16px/1 'Inter', sans-serif !important; letter-spacing: -.03em !important; text-decoration: none; direction: ltr; }
.tn-brand .wordmark { color: var(--tn-ink); }
.tn-brand .wordmark span { color: var(--tn-grey); }
[data-tool-theme="dark"] .tn-brand .brand-mark { border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
#langToggle { background: none !important; border: 0 !important; box-shadow: none !important; padding: 6px 4px !important; color: var(--tn-ink2) !important; font: 600 14px 'Inter', 'IBM Plex Sans Arabic', 'Tajawal', sans-serif !important; }
#langToggle svg { display: none !important; }
#langToggle:hover { color: var(--tn-accent) !important; }
#themeToggle { display: inline-grid !important; place-items: center; width: 34px !important; height: 34px !important; padding: 0 !important; background: none !important; border: 1px solid var(--tn-line) !important; border-radius: 4px !important; color: var(--tn-ink2) !important; cursor: pointer; }
#themeToggle:hover { border-color: var(--tn-ink) !important; color: var(--tn-ink) !important; }
#themeToggle .tt-sun, [data-tool-theme="dark"] #themeToggle .tt-moon { display: none; }
[data-tool-theme="dark"] #themeToggle .tt-sun { display: block; }
.nav-badge, .nav-free { display: none !important; }
.nav-back { color: var(--tn-ink2) !important; font-size: 14px !important; font-weight: 500 !important; }
.nav-back:hover { color: var(--tn-accent) !important; }

/* tool tabs */
.tool-tabs { background: var(--tn-bar) !important; border-bottom: 1px solid var(--tn-line) !important; }
.tool-tab { color: var(--tn-grey) !important; }
.tool-tab:hover { color: var(--tn-ink) !important; }
.tool-tab.active { color: var(--tn-ink) !important; border-bottom-color: var(--tn-ink) !important; }

/* main action buttons: ink on paper (light), paper on ink (dark), blue on hover, like the site's buttons */
.tb-btn.primary, .exp-btn.primary { background: var(--tn-btn) !important; border-color: var(--tn-btn) !important; color: var(--tn-btn-ink) !important; }
.tb-btn.primary:hover, .exp-btn.primary:hover { background: var(--tn-accent) !important; border-color: var(--tn-accent) !important; color: #fff !important; }

/* bottom bar with the free-check line */
.sticky-footer { background: color-mix(in srgb, var(--tn-bg) 94%, transparent) !important; border-top: 1px solid var(--tn-line) !important; }
.sf-text { color: var(--tn-ink2) !important; }
.sf-text strong { color: var(--tn-ink) !important; }
.sf-icon { color: var(--tn-grey) !important; border-color: var(--tn-line) !important; }
.sf-icon:hover { color: var(--tn-ink) !important; border-color: var(--tn-ink) !important; }
.sf-close { color: var(--tn-grey) !important; }
.sf-cta { background: var(--tn-btn) !important; color: var(--tn-btn-ink) !important; }
.sf-cta:hover { background: var(--tn-accent) !important; color: #fff !important; }