/* ==========================================================================
EMAROX family look for the app itself (STYL-EMAROX.md), 2026-09-30.
Loaded after every other app stylesheet, so it wins without touching
their rules. The landing is untouched (all of it lives under
#landing-overlay with its own tokens). To go back to the old look:
drop the to this file and restore the CSS files from
_backup_pre_emx_style_2026-09-30/.
Neutral black base, the Map accent as enamel cyan (amber in TIR mode),
Plus Jakarta headings ending in the accent dot, metal pill for the one
main action, glass pill for the rest, no glow.
========================================================================== */
:root {
/* soft graphite, not pure black: easier on the eyes for a whole workday */
--emx-bg: #121215;
--emx-bg-2: #16161a;
--emx-surface: #1b1b1f;
--emx-surface-2: #232328;
--emx-line: rgba(255, 255, 255, .08);
--emx-line-2: rgba(255, 255, 255, .14);
--emx-text: #f4f3f0;
--emx-text-2: #a3a3a7;
--emx-text-3: #8a8a90;
--emx-accent: #3cbfda;
--emx-accent-base: #1fa4c2;
--emx-accent-ink: #02151b;
--emx-tint: rgba(31, 164, 194, .08);
--emx-tint-2: rgba(31, 164, 194, .14);
--emx-metal: linear-gradient(180deg, #a4ecf4 0%, #4cc9e0 38%, #1c97b5 68%, #0d5f77 100%);
--emx-btn-fill: linear-gradient(180deg, #63d4e7 0%, #27abc8 55%, #1689a7 100%);
--emx-btn-shine: rgba(225, 250, 255, .55);
--emx-btn-shadow: rgba(31, 164, 194, .5);
--emx-sheen: rgba(235, 252, 255, .55);
--emx-good: #34d399;
--emx-bad: #f87171;
--emx-warn: #e8a33d;
--emx-glass: rgba(30, 30, 35, .8);
--emx-overlay: rgba(10, 10, 12, .6);
--emx-shadow: 0 30px 80px rgba(0, 0, 0, .55);
--emx-shadow-sm: 0 12px 34px rgba(0, 0, 0, .42);
--emx-ease: cubic-bezier(.22, 1, .36, 1);
/* Headings inside the app stay in Inter (the user preferred it over
Jakarta here); Jakarta is kept for the Emarox Map wordmark only. */
--emx-font-head: 'EMX Inter', 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
--emx-font-brand: 'EMX Jakarta', 'Plus Jakarta Sans', system-ui, sans-serif;
--emx-font-body: 'EMX Inter', 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
--emx-font-num: 'EMX Inter', 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
/* the old names, pointed at the family palette */
--bg-deep: var(--emx-bg);
--glass-bg: rgba(20, 20, 23, .86);
--glass-border: var(--emx-line);
--text-main: var(--emx-text);
--text-muted: var(--emx-text-2);
--neon-green: var(--emx-good);
--neon-red: var(--emx-bad);
}
/* TIR: the second colour of the product, only because VAN and TIR differ */
body.tir-mode {
--emx-accent: #eea24a;
--emx-accent-base: #e8922a;
--emx-accent-ink: #1c0f02;
--emx-tint: rgba(232, 146, 42, .08);
--emx-tint-2: rgba(232, 146, 42, .15);
--emx-metal: linear-gradient(180deg, #f7c378 0%, #ec9a36 40%, #c9731a 72%, #8c4b0c 100%);
--emx-btn-fill: linear-gradient(180deg, #f5bd6a 0%, #e8922a 55%, #c47016 100%);
--emx-btn-shine: rgba(255, 240, 214, .55);
--emx-btn-shadow: rgba(232, 146, 42, .5);
--emx-sheen: rgba(255, 244, 222, .6);
--neon-cyan: var(--emx-accent-base);
}
body.light-theme {
--emx-bg: #f5f5f3;
--emx-bg-2: #eeeeeb;
--emx-surface: #ffffff;
--emx-surface-2: #f1f1ee;
--emx-line: rgba(12, 12, 14, .09);
--emx-line-2: rgba(12, 12, 14, .17);
--emx-text: #0e0e10;
--emx-text-2: #55555a;
--emx-text-3: #68686d;
--emx-accent: #0a6479;
--emx-accent-base: #13849f;
--emx-tint: rgba(19, 132, 159, .08);
--emx-tint-2: rgba(19, 132, 159, .15);
--emx-metal: linear-gradient(180deg, #2eaecb 0%, #14879f 42%, #0d6a82 74%, #0a4a5c 100%);
--emx-btn-fill: linear-gradient(180deg, #3fc2dc 0%, #1c9bb9 55%, #11809c 100%);
--emx-btn-shine: rgba(225, 250, 255, .6);
--emx-btn-shadow: rgba(19, 132, 159, .45);
--emx-good: #0f8a5f;
--emx-bad: #c62828;
--emx-warn: #a86406;
--emx-glass: rgba(255, 255, 255, .78);
--emx-overlay: rgba(20, 20, 24, .38);
--emx-shadow: 0 30px 70px rgba(20, 20, 24, .16), 0 4px 14px rgba(20, 20, 24, .06);
--emx-shadow-sm: 0 10px 28px rgba(20, 20, 24, .12);
--bg-deep: var(--emx-bg);
--glass-bg: rgba(255, 255, 255, .9);
--text-main: var(--emx-text);
--text-muted: var(--emx-text-2);
}
body.light-theme.tir-mode {
--emx-accent: #9a5308;
--emx-accent-base: #b3620c;
--emx-accent-ink: #fff8ef;
--emx-tint: rgba(179, 98, 12, .08);
--emx-tint-2: rgba(179, 98, 12, .15);
--emx-metal: linear-gradient(180deg, #e0923a 0%, #c26f14 42%, #9c5409 74%, #6e3a05 100%);
--emx-btn-fill: linear-gradient(180deg, #e39a45 0%, #c26f14 55%, #9c5409 100%);
--emx-btn-shadow: rgba(179, 98, 12, .45);
}
/* ─────────────────────────── base ─────────────────────────── */
body {
font-family: var(--emx-font-body);
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body button,
body input,
body select,
body textarea {
font-family: inherit;
}
#emarox-bg { background-color: var(--emx-bg) !important; }
body ::selection { background: var(--emx-accent-base); color: var(--emx-accent-ink); }
/* Keyboard focus ring on things you press. Fields draw their own focus
(border + soft ring), and inside clipped boxes (the AI scanner) an outline
survived only as a hard cyan line under the text. */
body :is(button, a, [role="button"], [tabindex]:not(textarea):not(input)):focus-visible { outline: 2px solid var(--emx-accent); outline-offset: 2px; }
body :is(input, textarea, select):focus-visible { outline: none; }
/* thin neutral scrollbars; the accent only while you hold one */
body *::-webkit-scrollbar { width: 8px; height: 8px; }
body *::-webkit-scrollbar-track { background: transparent; }
body *::-webkit-scrollbar-thumb {
background: var(--emx-line-2); border-radius: 999px;
border: 2px solid transparent; background-clip: padding-box;
}
body *::-webkit-scrollbar-thumb:hover { background: var(--emx-text-3); background-clip: padding-box; }
body *::-webkit-scrollbar-thumb:active { background: var(--emx-accent-base); background-clip: padding-box; }
/* ───────────────────── header pill (navbar) ───────────────────── */
body .header-controls {
gap: 4px;
padding: 6px;
background: rgba(30, 30, 35, .92);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--emx-line-2);
border-radius: 999px;
box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.light-theme .header-controls { background: rgba(255, 255, 255, .9); }
/* PROFIT without the add-on stays grey (js/addons.js, profit.css) */
body.addon-profit-locked .header-controls .nav-btn-profit,
body.addon-profit-locked .header-controls .nav-btn-profit > i { color: var(--emx-text-3); }
body.addon-profit-locked .header-controls .nav-btn-profit:hover { color: var(--emx-text-2); background: rgba(255, 255, 255, .05); }
body .header-controls:hover { background: rgba(30, 30, 35, .92); border-color: var(--emx-line-2); }
body .header-controls .nav-btn,
body .header-controls .login-ghost-btn {
display: inline-flex; align-items: center; gap: 9px;
height: 42px; padding: 0 18px; margin: 0;
border: 0; border-radius: 999px; clip-path: none;
background: transparent; box-shadow: none;
/* sentence case, medium weight and a slightly softened white: calm to
read for a whole working day (uppercase + tracking read as "sharp") */
color: rgba(244, 243, 240, .88);
font-family: var(--emx-font-body); font-size: 14.5px; font-weight: 500;
letter-spacing: 0; text-transform: none;
transition: background-color .2s, color .2s;
}
body .header-controls .nav-btn::before,
body .header-controls .login-ghost-btn::before,
body .header-controls .login-ghost-btn::after { display: none; }
body .header-controls .nav-btn i,
body .header-controls .login-ghost-btn i { font-size: 14px; color: var(--emx-accent); opacity: .9; }
body .header-controls .nav-btn:hover,
body .header-controls .login-ghost-btn:hover {
background: var(--emx-tint-2); color: var(--emx-text); transform: none; box-shadow: none;
}
body.light-theme .header-controls .nav-btn:hover,
body.light-theme .header-controls .login-ghost-btn:hover { color: var(--emx-text); }
/* the account sits last, split from the links by a hairline, like the family navbar */
body .header-controls .login-ghost-btn {
position: relative; margin-left: 6px; color: var(--emx-text);
background: rgba(255, 255, 255, .04); border: 1px solid var(--emx-line-2);
}
body .header-controls .login-ghost-btn:hover { border-color: var(--emx-accent-base); color: var(--emx-accent); }
body .controls-toggle-btn {
background: var(--emx-glass);
-webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--emx-line-2); border-radius: 999px;
color: var(--emx-text);
}
/* phone: the sidebar toggle matches the header toggle (glass circle) */
body .mobile-toggle-btn {
border-radius: 999px !important;
background: var(--emx-glass) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--emx-line-2) !important;
color: var(--emx-text) !important;
box-shadow: var(--emx-shadow-sm) !important;
}
/* ───────────────────────── sidebar ───────────────────────── */
body .sidebar {
background: var(--emx-bg-2);
border-right: 1px solid var(--emx-line);
}
body .sidebar .label-title,
body .sidebar .input-group label,
body .sidebar .row label {
font-family: var(--emx-font-body);
font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
color: var(--emx-text-3);
}
/* section heading (FINANSE): Jakarta, not a spaced-out neon label */
body .sidebar .section-header {
margin: 26px 0 14px; padding: 0;
font-family: var(--emx-font-head); font-weight: 700;
font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.1;
text-transform: none; text-align: left;
color: var(--emx-text);
border: 0;
}
body .sidebar .section-header::first-letter { text-transform: uppercase; }
/* brand lockup instead of the neon logo picture */
body .sidebar .brand { padding: 28px 0 22px !important; align-items: flex-start !important; }
body .sidebar .brand .header-logo { display: none; }
body .emx-side-brand { display: flex; align-items: center; gap: 12px; }
body .emx-side-mark {
display: block; height: 36px; aspect-ratio: 108 / 64; flex-shrink: 0;
background: var(--emx-metal);
-webkit-mask: url("landing/assets/img/logo-mark.webp") center / contain no-repeat;
mask: url("landing/assets/img/logo-mark.webp") center / contain no-repeat;
}
body .emx-side-name {
font-family: var(--emx-font-brand); font-weight: 700; font-size: 1.6rem;
letter-spacing: -.025em; line-height: 1.15; white-space: nowrap;
background: var(--emx-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
padding-bottom: .08em;
}
/* phone: the round menu toggle sits at 15px/15px over the sidebar */
@media (max-width: 768px) {
body .sidebar .brand { padding: 24px 0 18px 62px !important; }
body .emx-side-name { font-size: 1.4rem; }
}
/* VAN / TIR switch */
body .premium-mode-toggle {
background: var(--emx-surface);
border: 1px solid var(--emx-line);
border-radius: 999px;
box-shadow: none;
}
body .premium-mode-toggle::after { display: none; }
body .premium-mode-toggle .toggle-slider {
border-radius: 999px;
background: var(--emx-surface-2);
border: 1px solid var(--emx-line-2);
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
body .premium-mode-toggle .toggle-option {
font-family: var(--emx-font-body); font-weight: 600; letter-spacing: .12em;
color: var(--emx-text-3);
}
body .premium-mode-toggle .toggle-option.active,
body .premium-mode-toggle .toggle-option.active i { color: var(--emx-accent); text-shadow: none; }
/* route stops: quiet cards, dates in plain text colour */
body .location-row {
background: var(--emx-surface);
border: 1px solid var(--emx-line);
border-radius: 14px;
padding: 6px 10px 6px 2px;
}
body .location-row:hover { border-color: var(--emx-line-2); background: var(--emx-surface); }
body .date-input,
body .waypoint-date,
body .input-group-main .date-input,
body .input-group-main .waypoint-date {
background: transparent;
border: 1px solid var(--emx-line);
border-radius: 8px;
color: var(--emx-text-2);
font-family: var(--emx-font-body);
font-size: 12.5px;
}
body .date-input:focus,
body .waypoint-date:focus,
body .input-group-main .date-input:focus,
body .input-group-main .waypoint-date:focus { border-color: var(--emx-accent-base); color: var(--emx-text); }
body .deadhead-btn {
border-radius: 10px;
background: transparent;
border: 1px solid var(--emx-line-2);
color: var(--emx-text-2);
font-family: var(--emx-font-body); font-size: 10px; font-weight: 600; letter-spacing: .06em;
}
body .deadhead-btn:hover { background: var(--emx-tint); border-color: var(--emx-accent-base); color: var(--emx-accent); }
body .drag-handle { color: var(--emx-text-3); }
/* avoid-countries: a plain collapsible row, not a cyan box */
body .avoid-countries-panel {
background: var(--emx-surface);
border: 1px solid var(--emx-line);
border-radius: 14px;
}
body .avoid-title { color: var(--emx-text); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; }
body .avoid-title i { color: var(--emx-text-3); }
/* route variants under the stops */
body .mode-btn {
background: var(--emx-surface);
border: 1px solid var(--emx-line);
border-radius: 14px;
color: var(--emx-text-2);
box-shadow: none;
transition: border-color .2s, background-color .2s, color .2s, transform .4s var(--emx-ease);
}
body .mode-btn:hover { background: var(--emx-surface); border-color: var(--emx-line-2); color: var(--emx-text); transform: translateY(-2px); }
body .mode-btn span { font-size: 11px; font-weight: 600; letter-spacing: .08em; }
body .mode-btn.fast.active,
body .mode-btn.eco.active,
body .mode-btn.short.active {
background: var(--emx-tint-2);
border-color: var(--emx-accent-base);
color: var(--emx-text);
}
body .mode-btn.fast.active i,
body .mode-btn.eco.active i,
body .mode-btn.short.active i { color: var(--emx-accent); }
/* ───────────────────── route HUD (mission bar) ───────────────────── */
body .mission-bar {
background: var(--emx-glass);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--emx-line);
box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
transition: transform .8s var(--emx-ease), border-radius .3s var(--emx-ease);
}
body .route-compare-panel {
background: var(--emx-glass);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
backdrop-filter: blur(20px) saturate(1.5);
border-color: var(--emx-line);
transition: opacity .4s var(--emx-ease), transform .5s var(--emx-ease), visibility .4s;
}
body .hud-label {
font-family: var(--emx-font-body);
font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
color: var(--emx-text-3);
margin-bottom: 3px;
}
body .hud-value {
font-family: var(--emx-font-num); font-weight: 700; font-size: 17px;
letter-spacing: -.01em; color: var(--emx-text);
}
body .hud-value.highlight { color: var(--emx-text); font-size: 19px; }
body .hud-value.profit { color: var(--emx-good); font-size: 19px; }
body .hud-value.loss { color: var(--emx-bad); font-size: 19px; }
body .hud-sub { font-size: 11.5px; font-weight: 600; color: var(--emx-text-3); }
body .hud-sub.pos { color: var(--emx-good); }
body .hud-sub.neg { color: var(--emx-bad); }
body .compare-toggle-container { color: var(--emx-text-2); }
body .compare-toggle-container:hover,
body .mission-bar.panel-open .compare-toggle-container { background: rgba(255, 255, 255, .06); color: var(--emx-text); }
body .rc-row { background: var(--emx-surface); border-color: var(--emx-line); border-radius: 12px; }
body .rc-row i.fa-leaf { color: var(--emx-good); }
body .rc-row i.fa-ruler { color: #e6c35c; }
body .rc-header { font-family: var(--emx-font-body); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--emx-text-3); border-color: var(--emx-line); }
body #btn-hud-share {
display: inline-flex; align-items: center; gap: 8px;
height: 38px; padding: 0 16px;
border-radius: 999px;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--emx-line-2);
color: var(--emx-text);
font-family: var(--emx-font-body); font-size: 13.5px; font-weight: 600;
white-space: nowrap; cursor: pointer;
transition: border-color .2s, color .2s, transform .4s var(--emx-ease);
}
body #btn-hud-share span { margin-left: 0 !important; }
body #btn-hud-share i { color: var(--emx-accent); }
body #btn-hud-share:hover { border-color: var(--emx-accent-base); color: var(--emx-accent); transform: translateY(-1px); }
/* help bubble bottom right: a glass circle, not a glowing cyan disc */
body .feedback-trigger {
width: 54px; height: 54px;
background: var(--emx-glass);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--emx-line-2);
color: var(--emx-accent);
font-size: 20px;
box-shadow: var(--emx-shadow-sm);
transition: transform .4s var(--emx-ease), border-color .2s;
}
body .feedback-trigger:hover { transform: translateY(-2px); border-color: var(--emx-accent-base); box-shadow: var(--emx-shadow-sm); }
/* sidebar actions read in sentence case like the rest of the family;
only the small captions above fields stay in capitals */
body .sidebar :is(.btn-secondary, .sidebar-ai-btn, .deadhead-btn, .save-order-btn, .bug-report-trigger, .mode-btn span, .avoid-title) {
text-transform: none; letter-spacing: 0;
}
body .sidebar .sidebar-ai-btn,
body .sidebar .save-order-btn { font-size: 14.5px; font-weight: 600; }
body .sidebar .avoid-title { font-size: 14px; font-weight: 600; }
body .sidebar .mode-btn span { font-size: 13px; font-weight: 600; }
body .sidebar .deadhead-btn { font-size: 11.5px; }
body .sidebar .bug-report-trigger { font-size: 13.5px; }
body .sidebar .btn-secondary { font-size: 14.5px; font-weight: 500; }
body .sidebar .label-title,
body .sidebar .input-group label,
body .sidebar .row label { letter-spacing: .08em; }
/* ─────────────────────────── inputs ─────────────────────────── */
body input.glass-input,
body textarea.glass-input,
body select.glass-input {
background-color: var(--emx-surface);
border: 1px solid var(--emx-line-2);
border-radius: 10px;
color: var(--emx-text);
font-family: var(--emx-font-body);
font-size: 15px;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
body input.glass-input::placeholder,
body textarea.glass-input::placeholder { color: var(--emx-text-3); opacity: 1; }
body input.glass-input:hover,
body textarea.glass-input:hover,
body select.glass-input:hover { border-color: rgba(255, 255, 255, .22); }
body input.glass-input:focus,
body textarea.glass-input:focus,
body select.glass-input:focus {
border-color: var(--emx-accent-base);
background-color: var(--emx-surface);
box-shadow: 0 0 0 3px var(--emx-tint-2);
}
body select.glass-input option { background: var(--emx-surface); color: var(--emx-text); }
/* ─────────────────────────── buttons ───────────────────────────
Main action: the metal pill with one slow sheen on hover.
Everything else: glass with a hairline, accent on hover. */
body .btn-primary,
body .primary-btn,
body .cyber-btn-primary,
body .pf-btn.primary,
body .fx-btn:not(.secondary):not(.danger-btn) {
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 24px;
border: 0; border-radius: 999px;
background: var(--emx-btn-fill);
color: var(--emx-accent-ink);
font-family: var(--emx-font-body); font-weight: 600; font-size: 15px;
letter-spacing: -.005em; text-transform: none;
box-shadow: inset 0 1px 0 var(--emx-btn-shine), inset 0 -1px 0 rgba(0, 40, 55, .35), 0 10px 30px -12px var(--emx-btn-shadow);
filter: none;
transition: transform .4s var(--emx-ease), box-shadow .4s var(--emx-ease), opacity .2s;
}
body .btn-primary::after,
body .primary-btn::after,
body .cyber-btn-primary::after,
body .pf-btn.primary::after,
body .fx-btn:not(.secondary):not(.danger-btn)::after {
content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(105deg, transparent 30%, var(--emx-sheen) 50%, transparent 70%);
transform: translateX(-120%); transition: transform .9s var(--emx-ease);
}
body .btn-primary:hover:not(:disabled),
body .primary-btn:hover:not(:disabled),
body .cyber-btn-primary:hover:not(:disabled),
body .pf-btn.primary:hover:not(:disabled),
body .fx-btn:not(.secondary):not(.danger-btn):hover:not(:disabled) {
transform: translateY(-2px); filter: none;
background: var(--emx-btn-fill);
color: var(--emx-accent-ink);
box-shadow: inset 0 1px 0 var(--emx-btn-shine), inset 0 -1px 0 rgba(0, 40, 55, .35), 0 16px 36px -14px var(--emx-btn-shadow);
}
body .btn-primary:hover:not(:disabled)::after,
body .primary-btn:hover:not(:disabled)::after,
body .cyber-btn-primary:hover:not(:disabled)::after,
body .pf-btn.primary:hover:not(:disabled)::after,
body .fx-btn:not(.secondary):not(.danger-btn):hover:not(:disabled)::after { transform: translateX(120%); }
body .btn-primary:active:not(:disabled),
body .primary-btn:active:not(:disabled),
body .cyber-btn-primary:active:not(:disabled),
body .pf-btn.primary:active:not(:disabled),
body .fx-btn:not(.secondary):not(.danger-btn):active:not(:disabled) { transform: scale(.98); }
body .btn-primary:disabled,
body .primary-btn:disabled,
body .pf-btn.primary:disabled { opacity: .45; cursor: not-allowed; }
body .btn-secondary,
body .secondary-btn,
body .cyber-btn-secondary,
body .pf-btn:not(.primary),
body .fx-btn.secondary,
body .fx-btn.danger-btn {
border-radius: 999px;
background: rgba(255, 255, 255, .035);
border: 1px solid var(--emx-line-2);
color: var(--emx-text);
font-family: var(--emx-font-body); font-weight: 600;
text-transform: none; letter-spacing: 0;
box-shadow: none;
transition: transform .4s var(--emx-ease), border-color .2s, color .2s, background-color .2s;
}
body .btn-secondary:hover:not(:disabled),
body .secondary-btn:hover:not(:disabled),
body .cyber-btn-secondary:hover:not(:disabled),
body .pf-btn:not(.primary):hover:not(:disabled),
body .fx-btn.secondary:hover:not(:disabled) {
background: var(--emx-tint);
border-color: var(--emx-accent-base);
color: var(--emx-accent);
box-shadow: none;
}
/* destructive: quiet until you mean it */
body .fx-btn.danger-btn { color: var(--emx-text-2); min-height: 48px; padding: 0 22px; font-size: 15px; }
body .fx-btn.danger-btn:hover:not(:disabled) {
color: var(--emx-bad); border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .06); transform: none; filter: none;
}
body .fx-btn.secondary { min-height: 48px; font-size: 15px; }
body.light-theme .btn-secondary,
body.light-theme .secondary-btn,
body.light-theme .cyber-btn-secondary,
body.light-theme .pf-btn:not(.primary) { background: rgba(255, 255, 255, .6); }
/* sidebar buttons: full width, calm sizes */
body .sidebar .btn-primary { width: 100%; min-height: 50px; font-size: 15.5px; margin-top: 12px; }
body .sidebar .btn-secondary {
min-height: 40px; font-size: 13.5px; gap: 8px;
}
body .sidebar #reset-mission-btn { color: var(--emx-text-2); border-color: var(--emx-line); background: transparent; }
body .sidebar #reset-mission-btn:hover { color: var(--emx-bad); border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .06); }
body .sidebar-ai-btn {
border-radius: 999px;
background: var(--emx-tint);
border: 1px solid rgba(31, 164, 194, .32);
color: var(--emx-accent);
font-family: var(--emx-font-body); font-weight: 600; font-size: 13px; letter-spacing: .04em;
box-shadow: none;
}
body.tir-mode .sidebar-ai-btn { border-color: rgba(232, 146, 42, .34); }
body .sidebar-ai-btn:hover { background: var(--emx-tint-2); border-color: var(--emx-accent-base); box-shadow: none; }
/* ─────────────────────────── modals ───────────────────────────
Darkened, blurred backdrop; the panel rises from 18px below at .98. */
/* system messages (CyberModal, the only overlay of this class without an id)
answer whatever window asked for them, so they sit above all of them: the
AI scanner (.ai-overlay 9999999) and the add-on window (#addon-modal
10000000) included. The LDT planner and its summary reuse the class with
their own inline z-index (5000 / 5100), which must stay theirs. */
body .cyber-modal-overlay:not([id]) { z-index: 10000010 !important; }
body .modal-overlay,
body .cyber-modal-overlay {
background: var(--emx-overlay);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
body .modal-overlay.active { animation: emxFade .35s var(--emx-ease) both; }
body .modal-overlay.active > .modal-content { animation: emxPanelIn .5s var(--emx-ease) both; }
body .modal-content,
body .cyber-modal-box {
background:
radial-gradient(ellipse 70% 45% at 0% 0%, var(--emx-tint), transparent 60%),
var(--emx-surface);
border: 1px solid var(--emx-line-2);
border-radius: 24px;
box-shadow: var(--emx-shadow);
color: var(--emx-text);
}
body .modal-content.glass-morphism { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.tir-mode #pf-modal .modal-content,
body.tir-mode .modal-content { box-shadow: var(--emx-shadow); }
body .modal-header { border-bottom: 1px solid var(--emx-line); padding-bottom: 16px; margin-bottom: 20px; }
body .modal-header h2,
body .modal-header h3,
body .cyber-modal-header h3 {
font-family: var(--emx-font-head); font-weight: 700;
font-size: 1.45rem; line-height: 1.15; letter-spacing: -.025em;
color: var(--emx-text); text-transform: none; text-shadow: none;
}
body .modal-header h3 i,
body .modal-header h2 i { color: var(--emx-accent); font-size: .8em; margin-right: 4px; }
/* Every dialog close button: a quiet circle with an × drawn from two
lines. The font glyph (× or fa-xmark) sat off-centre and looked bent,
so it is hidden; both lines share one grid cell and meet in the middle. */
body :is(.close-btn, .tos-close-btn, .pricing-close-btn, .ai-close-glass, .lightbox-close, .pf-close) {
display: inline-grid; place-items: center;
/* the hidden glyph is still a grid item: its implicit row gets no height */
grid-template: 100% / 100%; grid-auto-rows: 0; grid-auto-columns: 0;
width: 38px; height: 38px; min-width: 38px; flex: 0 0 38px;
box-sizing: border-box; padding: 0; margin: 0;
border-radius: 50%;
border: 1px solid var(--emx-line-2);
background: rgba(255, 255, 255, .03);
color: var(--emx-text-2) !important;
font-size: 0 !important; line-height: 0;
cursor: pointer; box-shadow: none; text-shadow: none;
transition: transform .4s var(--emx-ease), color .2s, border-color .2s, background-color .2s;
}
body :is(.close-btn, .tos-close-btn, .pricing-close-btn, .ai-close-glass, .lightbox-close, .pf-close) > * { display: none !important; }
body :is(.close-btn, .tos-close-btn, .pricing-close-btn, .ai-close-glass, .lightbox-close, .pf-close)::before,
body :is(.close-btn, .tos-close-btn, .pricing-close-btn, .ai-close-glass, .lightbox-close, .pf-close)::after {
content: '' !important; grid-area: 1 / 1;
width: 14px; height: 1.6px; border-radius: 2px;
background: currentColor;
font-size: 0;
}
body :is(.close-btn, .tos-close-btn, .pricing-close-btn, .ai-close-glass, .lightbox-close, .pf-close)::before { transform: rotate(45deg); }
body :is(.close-btn, .tos-close-btn, .pricing-close-btn, .ai-close-glass, .lightbox-close, .pf-close)::after { transform: rotate(-45deg); }
body :is(.close-btn, .tos-close-btn, .pricing-close-btn, .ai-close-glass, .lightbox-close, .pf-close):hover {
transform: rotate(90deg);
color: var(--emx-text) !important;
border-color: var(--emx-text-3);
background: rgba(255, 255, 255, .06);
}
body.light-theme :is(.close-btn, .tos-close-btn, .pricing-close-btn, .ai-close-glass, .lightbox-close, .pf-close) { background: rgba(255, 255, 255, .7); }
body .modal-body { color: var(--emx-text); }
/* titles: no icon in front. No closing dot inside the app (the landing's
headline dot stays on the landing). */
body .modal-header :is(h2, h3) > i { display: none; }
body .settings-info-box {
background: var(--emx-bg); border: 1px solid var(--emx-line); border-radius: 16px; padding: 18px 20px;
}
body .settings-info-box h5 {
font-family: var(--emx-font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em;
text-transform: none; color: var(--emx-text); margin-bottom: 6px;
}
body .settings-info-box p { font-size: 14.5px !important; line-height: 1.55; color: var(--emx-text-2) !important; }
body .settings-footer-actions { gap: 12px; }
/* system dialogs (CyberModal): same panel, the colour bar on top goes */
body .cyber-modal-box { border-top: 1px solid var(--emx-line-2); padding: 30px; max-width: 460px; }
body .cyber-modal-box.critical { border-color: rgba(248, 113, 113, .4); }
body .cyber-modal-header { border: 0; padding: 0; margin: 0 0 10px; }
body .cyber-modal-message { font-size: 15.5px; line-height: 1.6; color: var(--emx-text-2); }
body .cyber-modal-input {
background: var(--emx-bg); border: 1px solid var(--emx-line-2); border-radius: 10px;
color: var(--emx-text); font-size: 15px;
}
body .cyber-modal-input:focus { border-color: var(--emx-accent-base); box-shadow: 0 0 0 3px var(--emx-tint-2); outline: none; }
body .cyber-modal-footer { gap: 10px; border: 0; }
body .cyber-btn { min-height: 46px; padding: 0 22px; font-size: 14.5px; }
@keyframes emxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes emxPanelIn {
from { opacity: 0; transform: translateY(18px) scale(.98); }
to { opacity: 1; transform: none; }
}
/* ─────────────────────── settings modal ─────────────────────── */
body .settings-tab-btn {
border-radius: 12px; border: 1px solid transparent;
color: var(--emx-text-2); font-weight: 500; font-size: 14.5px;
background: transparent;
}
body .settings-tab-btn:hover { background: rgba(255, 255, 255, .04); color: var(--emx-text); }
body .settings-tab-btn.active,
body.tir-mode .settings-tab-btn.active {
background: var(--emx-tint-2) !important;
border-color: transparent !important;
color: var(--emx-text) !important;
box-shadow: none !important;
}
body .settings-tab-btn.active i { color: var(--emx-accent); }
body .curr-opt,
body .style-opt,
body .lang-opt {
border-radius: 10px;
font-size: 13.5px; font-weight: 600;
color: var(--emx-text-2);
font-family: var(--emx-font-body);
transition: background-color .2s, color .2s, border-color .2s;
}
body .curr-opt.active,
body .style-opt.active,
body .lang-opt.active,
body.tir-mode .curr-opt.active,
body.tir-mode .style-opt.active,
body.tir-mode .lang-opt.active {
background: var(--emx-tint-2) !important;
border-color: var(--emx-accent-base) !important;
color: var(--emx-text) !important;
box-shadow: none !important;
letter-spacing: normal; opacity: 1;
font-family: var(--emx-font-body);
text-transform: none;
}
/* language tiles + the light theme's own "filled" actives: a tint, dark text */
body .lang-btn-opt { border-radius: 12px; font-size: 14.5px; }
body .lang-btn-opt.active { background: var(--emx-tint-2); border-color: var(--emx-accent-base); color: var(--emx-text); }
body.light-theme :is(.curr-opt, .style-opt, .lang-opt, .lang-btn-opt, .filter-pill, .pdf-tab-btn).active {
background: var(--emx-tint-2) !important;
border-color: var(--emx-accent-base) !important;
color: var(--emx-text) !important;
}
/* group: calmer member avatars, readable tabs */
body .member-avatar { background: var(--emx-tint-2) !important; color: var(--emx-accent) !important; border: 1px solid var(--emx-line-2); box-shadow: none; }
body .group-tab-btn { font-size: 14.5px; border-radius: 12px; }
body .team-member-card { background: var(--emx-surface); border-color: var(--emx-line); border-radius: 14px; }
/* ─────────────────────────── toasts ───────────────────────────
One look for every short message: a dark glass pill, a coloured icon,
no coloured frame and no glow. */
body .emx-toast,
body #share-toast,
body #avoidance-toast {
background: var(--emx-glass) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
backdrop-filter: blur(20px) saturate(1.4) !important;
border: 1px solid var(--emx-line-2) !important;
border-radius: 999px !important;
box-shadow: var(--emx-shadow-sm) !important;
color: var(--emx-text) !important;
font-family: var(--emx-font-body) !important;
font-size: 14.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
padding: 12px 22px !important;
/* visible over the AI scanner and every other window too */
z-index: 10000020 !important;
}
body .emx-toast i,
body #share-toast i,
body #avoidance-toast i { color: var(--emx-accent) !important; }
body .emx-toast.is-good i { color: var(--emx-good) !important; }
body .emx-toast.is-bad,
body #avoidance-toast.is-bad { border-color: rgba(248, 113, 113, .38) !important; }
body .emx-toast.is-bad i,
body #avoidance-toast.is-bad i { color: var(--emx-bad) !important; }
/* ─────────────────────────── AI scanner ─────────────────────────── */
body .ai-overlay { background: var(--emx-overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body .ai-modal-glass,
body .share-modal-card {
background:
radial-gradient(ellipse 70% 45% at 0% 0%, var(--emx-tint), transparent 60%),
var(--emx-surface);
border: 1px solid var(--emx-line-2);
border-radius: 24px;
box-shadow: var(--emx-shadow);
transition: transform .5s var(--emx-ease);
}
body .ai-modal-glass { transform: translateY(18px) scale(.98); }
body .ai-overlay.visible .ai-modal-glass { transform: none; }
body .share-modal-glow { display: none; }
body .ai-glass-header { border-bottom: 1px solid var(--emx-line); }
body .ai-scanner-title-wrapper { text-align: left; align-items: flex-start; padding-right: 48px; }
body .ai-title-main {
font-family: var(--emx-font-head); font-weight: 700;
font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.15; text-transform: none;
background: none; -webkit-text-fill-color: currentColor; color: var(--emx-text);
justify-content: flex-start;
}
body .ai-title-main .ai-title-icon { display: none; }
body .ai-subtitle { margin: 0; text-align: left; font-size: 15px; color: var(--emx-text-2); max-width: 44ch; }
body .ai-close-glass { top: -6px; right: -6px; position: absolute; }
body .ai-zone { border-radius: 16px; }
body .ai-zone-full { border: 1px solid var(--emx-line-2); background: var(--emx-tint); box-shadow: none; }
body .ai-zone-quick { border: 1px solid var(--emx-line); background: rgba(255, 255, 255, .015); }
body .ai-zone-badge { border-radius: 12px; }
body .ai-zone-badge.full { color: var(--emx-accent); background: var(--emx-tint-2); border-color: transparent; }
body .ai-zone-title,
body .ai-zone-quick .ai-zone-title {
font-family: var(--emx-font-head); font-weight: 700;
font-size: 1.05rem; letter-spacing: -.01em; text-transform: none; color: var(--emx-text);
}
body .ai-zone-sub { font-size: 13.5px; color: var(--emx-text-2); }
body .ai-input-box { background: var(--emx-bg); border: 1px solid var(--emx-line-2); border-radius: 14px; }
/* a quiet focus: the field is already obvious, the frame only confirms it */
body .ai-input-box:focus-within {
border-color: color-mix(in srgb, var(--emx-accent-base) 42%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--emx-accent-base) 7%, transparent);
}
body .ai-box-text { font-family: var(--emx-font-body); font-size: 15px; color: var(--emx-text); }
body .ai-box-text::placeholder { color: var(--emx-text-3); }
body .ai-box-foot { border-top: 1px solid var(--emx-line); background: transparent; }
body .ai-attach-btn { border-radius: 999px; font-size: 13px; }
/* the order path ends in a saved record: the metal pill. The quick path: glass. */
body .ai-zone-btn {
min-height: 48px; border-radius: 999px;
font-family: var(--emx-font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
transition: transform .4s var(--emx-ease), box-shadow .4s var(--emx-ease), border-color .2s, color .2s;
}
body .ai-zone-btn .ai-btn-glow { display: none; }
body .ai-zone-btn.full,
body.tir-mode .ai-zone-btn.full {
background: var(--emx-btn-fill);
border: 0;
color: var(--emx-accent-ink);
box-shadow: inset 0 1px 0 var(--emx-btn-shine), inset 0 -1px 0 rgba(0, 40, 55, .35), 0 10px 30px -12px var(--emx-btn-shadow);
}
body .ai-zone-btn.full:hover,
body.tir-mode .ai-zone-btn.full:hover {
background: var(--emx-btn-fill);
transform: translateY(-2px);
box-shadow: inset 0 1px 0 var(--emx-btn-shine), inset 0 -1px 0 rgba(0, 40, 55, .35), 0 16px 36px -14px var(--emx-btn-shadow);
}
body .ai-zone-btn.quick,
body.tir-mode .ai-zone-btn.quick { background: rgba(255, 255, 255, .035); border: 1px solid var(--emx-line-2); color: var(--emx-text); }
body .ai-zone-btn.quick:hover { border-color: var(--emx-accent-base); color: var(--emx-accent); background: var(--emx-tint); }
body .ai-disclaimer { font-style: normal; font-size: 12.5px; color: var(--emx-text-3); letter-spacing: 0; }
/* ─────────────────────────── my account ─────────────────────────── */
body #profile-modal .modal-content { width: 400px; padding: 30px; }
body .emx-profile-body { text-align: center; padding: 8px 0 0; }
body #profile-modal .user-avatar {
width: 72px; height: 72px; margin: 4px auto 16px; border-radius: 50%;
display: grid; place-items: center; font-size: 28px;
background: var(--emx-tint-2); color: var(--emx-accent); border: 1px solid var(--emx-line-2);
}
body #user-profile-email { margin: 0 0 8px; font-family: var(--emx-font-head); font-size: 1.15rem; font-weight: 600; color: var(--emx-text); word-break: break-all; }
body .emx-verified {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
font-size: 12.5px; font-weight: 600; color: var(--emx-good); background: rgba(52, 211, 153, .1);
}
body #profile-modal .profile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
body #profile-modal .profile-actions button { min-height: 48px; font-size: 15px; gap: 10px; justify-content: center; }
body #profile-modal .profile-actions i { color: var(--emx-accent); }
body #profile-modal .logout-btn { color: var(--emx-text-2); border-color: var(--emx-line); background: transparent; margin-top: 6px; }
body #profile-modal .logout-btn i { color: inherit; }
body #profile-modal .logout-btn:hover { color: var(--emx-bad); border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .06); }
/* ─────────────────────── LDT loading planner ─────────────────────── */
/* LDT planner line icons (scratchpad/icons.py): one stroke weight, drawn
as masks so they take the text colour and survive the language sweep,
which keeps an but would drop an inline