.ecu-portal {
--sw-red: #e20b17;
--sw-red-bright: #ff1f2d;
--sw-red-dark: #b70812;
--sw-black: #0c1013;
--sw-panel: #1d2226;
--sw-steel: #505153;
--sw-muted: #7d858a;
--sw-line: #dfe3e5;
--sw-bg: #f2f4f5;
--sw-surface: #ffffff;
--sw-surface-soft: #f4f6f7;
--sw-surface-hover: #f7f9fa;
--sw-text: #0c1013;
--sw-text-soft: #58636b;
--sw-input-border: #cfd4d7;
--sw-ready-text: #126536;
--sw-ready-bg: #ecfdf3;
--sw-ready-border: #a9e8c2;
--sw-danger-text: #8a251e;
--sw-danger-bg: #fff1f0;
--sw-danger-border: #ffc8c4;
box-sizing: border-box;
max-width: 1180px;
margin: 32px auto;
overflow: hidden;
color: var(--sw-text);
background: var(--sw-bg);
border: 1px solid rgba(17, 22, 26, 0.08);
border-radius: 18px;
box-shadow: 0 28px 80px rgba(12, 16, 19, 0.16);
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.45;
}
.ecu-portal[data-theme="dark"] {
--sw-line: #343d42;
--sw-bg: #0f1316;
--sw-surface: #181d21;
--sw-surface-soft: #151a1e;
--sw-surface-hover: #22292e;
--sw-text: #f3f5f6;
--sw-text-soft: #aeb7bb;
--sw-input-border: #465158;
--sw-ready-text: #75e0a7;
--sw-ready-bg: #123323;
--sw-ready-border: #286846;
--sw-danger-text: #ff9b95;
--sw-danger-bg: #3a1718;
--sw-danger-border: #713033;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
.ecu-portal:not([data-theme]) {
--sw-line: #343d42;
--sw-bg: #0f1316;
--sw-surface: #181d21;
--sw-surface-soft: #151a1e;
--sw-surface-hover: #22292e;
--sw-text: #f3f5f6;
--sw-text-soft: #aeb7bb;
--sw-input-border: #465158;
--sw-ready-text: #75e0a7;
--sw-ready-bg: #123323;
--sw-ready-border: #286846;
--sw-danger-text: #ff9b95;
--sw-danger-bg: #3a1718;
--sw-danger-border: #713033;
color-scheme: dark;
}
}
.ecu-portal *, .ecu-portal *::before, .ecu-portal *::after { box-sizing: border-box; }
.ecu-portal [hidden] { display: none !important; }
.ecu-portal__hero {
position: relative;
min-height: 230px;
overflow: hidden;
padding: 38px clamp(26px, 6vw, 64px) 42px;
color: #fff;
background:
radial-gradient(circle at 82% 25%, rgba(226, 11, 23, 0.22), transparent 31%),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 82px 100%,
linear-gradient(135deg, #0c1013 0%, #14191d 72%, #242b30 100%);
}
.ecu-portal__hero::before {
content: "ECU";
position: absolute;
right: -14px;
top: -42px;
color: transparent;
font-size: 230px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.08em;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
pointer-events: none;
}
.ecu-portal__hero::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 4px; background: var(--sw-red); }
.ecu-portal__hero-tools { position: absolute; z-index: 3; top: 22px; right: clamp(22px, 4vw, 42px); display: flex; align-items: center; gap: 8px; }
.ecu-portal__tool-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 42px; min-height: 38px; padding: 8px 12px; color: #e9eef0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font: 800 12px/1 Inter, system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(10px); transition: background .18s, border-color .18s, transform .18s; }
.ecu-portal__tool-button:hover, .ecu-portal__tool-button:focus-visible { color: #fff; background: rgba(226,11,23,.22); border-color: rgba(255,89,99,.65); transform: translateY(-1px); outline: none; }
.ecu-portal__tool-button [data-ecu-theme-icon] { color: var(--sw-red-bright); font-size: 15px; }
.ecu-portal__brand { position: relative; z-index: 1; margin: 0 0 18px; color: #fff; font-size: 18px; font-weight: 950; letter-spacing: -0.04em; }
.ecu-portal__brand span { color: var(--sw-red); }
.ecu-portal__eyebrow { position: relative; z-index: 1; margin: 0 0 7px; color: var(--sw-red); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.ecu-portal__eyebrow::before { content: "/"; margin-right: 8px; font-size: 17px; }
.ecu-portal__hero h2 { position: relative; z-index: 1; margin: 0 0 12px !important; color: #fff !important; font-size: clamp(33px, 5vw, 54px) !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.045em !important; }
.ecu-portal__lead { position: relative; z-index: 1; max-width: 680px; margin: 0 !important; color: #d6dadd !important; font-size: 15px; }
.ecu-portal__account { display: inline-flex; align-items: center; min-height: 34px; color: #d6dadd; font-size: 12px; font-weight: 800; }
.ecu-portal__hero-tools a.ecu-portal__tool-button { text-decoration: none !important; }
.ecu-portal--auth { max-width: 820px; margin-inline: auto; }
.ecu-portal__auth-hero { min-height: 210px; }
.ecu-portal__auth-body { max-width: 650px; margin: 0 auto; }
.ecu-portal__auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; padding: 5px; background: var(--sw-surface-soft); border: 1px solid var(--sw-line); border-radius: 12px; }
.ecu-portal__auth-tabs button { min-height: 42px; color: var(--sw-text-soft); background: transparent; border: 0; border-radius: 8px; font: inherit; font-weight: 900; cursor: pointer; }
.ecu-portal__auth-tabs button.is-active { color: #fff; background: var(--sw-red); box-shadow: 0 8px 18px rgba(226,10,9,.2); }
.ecu-portal__auth-message { margin: 0 0 17px; padding: 12px 14px; border: 1px solid var(--sw-line); border-radius: 9px; font-weight: 800; }
.ecu-portal__auth-message.is-info { color: var(--sw-text); background: var(--sw-surface-soft); }
.ecu-portal__auth-message.is-success { color: var(--sw-ready-text); background: var(--sw-ready-bg); border-color: var(--sw-ready-border); }
.ecu-portal__auth-message.is-error { color: var(--sw-danger-text); background: var(--sw-danger-bg); border-color: var(--sw-danger-border); }
.ecu-portal__auth-form { display: grid; gap: 15px; padding: clamp(20px, 4vw, 30px); background: var(--sw-surface); border: 1px solid var(--sw-line); border-left: 4px solid var(--sw-red); border-radius: 14px; }
.ecu-portal__auth-form[hidden] { display: none; }
.ecu-portal__auth-form h3 { margin: 0 0 4px !important; color: var(--sw-text) !important; font-size: 23px !important; font-weight: 950 !important; }
.ecu-portal__auth-form > p { margin: 0; color: var(--sw-text-soft); }
.ecu-portal__auth-form label { display: grid; gap: 7px; color: var(--sw-text); font-size: 13px; font-weight: 850; }
.ecu-portal__auth-form input { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--sw-text); background: var(--sw-surface); border: 1px solid var(--sw-input-border); border-radius: 9px; font: inherit; }
.ecu-portal__auth-form input:focus { outline: 2px solid rgba(226,10,9,.25); border-color: var(--sw-red); }
.ecu-portal__auth-form small { color: var(--sw-text-soft); font-weight: 600; line-height: 1.45; }
.ecu-portal__auth-form button { min-height: 44px; padding: 10px 15px; color: #fff; background: var(--sw-red); border: 0; border-radius: 9px; font: inherit; font-weight: 900; cursor: pointer; }
.ecu-portal__auth-form button:disabled { opacity: .5; cursor: wait; }
.ecu-portal__auth-form .ecu-portal__auth-link { min-height: 34px; padding: 5px; color: var(--sw-text-soft); background: transparent; box-shadow: none; font-size: 12px; }
.ecu-portal__auth-form .ecu-portal__auth-link:hover { color: var(--sw-red); }
.ecu-portal__auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.ecu-portal__auth-grid--address { grid-template-columns: minmax(120px, .35fr) 1fr; }
.ecu-portal__auth-check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 9px !important; line-height: 1.45; }
.ecu-portal__auth-check input { flex: 0 0 auto; width: 18px; min-height: 18px; margin-top: 2px; accent-color: var(--sw-red); }
.ecu-portal__honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.ecu-portal__body { padding: clamp(22px, 4vw, 38px); }
.ecu-portal__form { display: grid; gap: 18px; margin: 0; }
.ecu-portal__form > label { display: grid; gap: 9px; color: var(--sw-text); font-weight: 800; }
.ecu-portal__form fieldset { margin: 0; padding: 18px; background: var(--sw-surface); border: 1px solid var(--sw-line); border-left: 4px solid var(--sw-red); border-radius: 12px; }
.ecu-portal__form legend { padding: 0 8px; color: var(--sw-text); font-weight: 850; }
.ecu-portal__form input, .ecu-portal__form select, .ecu-portal__form button { min-height: 44px; padding: 11px 14px; border-radius: 9px; font: inherit; }
.ecu-portal__form input, .ecu-portal__form select { color: var(--sw-text); background: var(--sw-surface); border: 1px solid var(--sw-input-border); }
.ecu-portal__form input:focus, .ecu-portal__form select:focus { outline: 2px solid rgba(226, 10, 9, 0.28); border-color: var(--sw-red); }
.ecu-portal__form button, .ecu-portal__download { display: inline-flex; align-items: center; justify-content: center; width: fit-content; color: #fff !important; background: var(--sw-red) !important; border: 0; box-shadow: 0 10px 22px rgba(226, 10, 9, 0.22); font-weight: 850; text-decoration: none !important; cursor: pointer; transition: background 0.18s, transform 0.18s; }
.ecu-portal__form button:hover, .ecu-portal__download:hover { background: var(--sw-red-dark) !important; transform: translateY(-1px); }
.ecu-portal__form button:disabled { opacity: 0.42; box-shadow: none; cursor: not-allowed; transform: none; }
.ecu-portal__ecu-selector { padding: 19px; color: var(--sw-text); background: var(--sw-surface-soft); border: 1px solid var(--sw-line); border-left: 4px solid var(--sw-red); border-radius: 14px; }
.ecu-portal__ecu-selector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ecu-portal__ecu-selector h3 { margin: 0 !important; color: var(--sw-text) !important; font-size: 18px !important; font-weight: 950 !important; }
.ecu-portal__selector-retry { flex: 0 0 auto; min-height: 38px !important; padding: 8px 13px !important; font-size: 12px !important; }
.ecu-portal__selector-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 15px; }
.ecu-portal__selector-fields label { display: grid; gap: 7px; min-width: 0; color: var(--sw-text); font-size: 12px; font-weight: 850; }
.ecu-portal__selector-fields select { width: 100%; }
.ecu-portal__selector-status { margin: 13px 0 0; color: var(--sw-text); font-size: 13px; font-weight: 800; }
.ecu-portal__selector-note { margin: 5px 0 0; color: var(--sw-text-soft); font-size: 11px; line-height: 1.5; }
.ecu-portal__drop { position: relative; display: grid !important; place-items: center; min-height: 150px; padding: 24px; overflow: hidden; color: var(--sw-text-soft) !important; background: var(--sw-surface); border: 1px dashed var(--sw-input-border); border-radius: 16px; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.ecu-portal__drop::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0, rgba(226,11,23,.08), transparent 56%); }
.ecu-portal__drop:hover, .ecu-portal__drop.is-dragging { color: var(--sw-text) !important; background: var(--sw-surface-hover); border-color: var(--sw-red); transform: translateY(-1px); }
.ecu-portal__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ecu-portal__drop strong { color: var(--sw-text); font-size: 17px; font-weight: 900; }
.ecu-portal__drop span { position: relative; z-index: 1; }
.ecu-portal__drop-icon { color: var(--sw-red) !important; font-size: 34px; line-height: 1; }
.ecu-portal__identity { padding: 0; overflow: hidden; color: #fff; background: #343a3e; border: 1px solid #343a3e; border-radius: 16px; box-shadow: 0 12px 34px rgba(21, 25, 28, 0.13); }
.ecu-portal__identity h3 { margin: 0 !important; padding: 15px 18px; color: #fff !important; background: #171d20; border-bottom: 3px solid var(--sw-red); font-size: 15px !important; font-weight: 900 !important; }
.ecu-portal__ecu-banner { display: grid; gap: 4px; padding: 23px 20px; color: #fff; background: radial-gradient(circle at 90% 40%, rgba(226,11,23,.25), transparent 38%), #0c1013; border-bottom: 1px solid #30383d; }
.ecu-portal__ecu-banner span { color: var(--sw-red-bright); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.ecu-portal__ecu-banner strong { color: #fff; font-size: clamp(28px, 5vw, 48px); font-weight: 950; line-height: 1; letter-spacing: -.04em; }
.ecu-portal__identity dl { display: grid; gap: 1px; margin: 0; background: #343a3e; }
.ecu-portal__identity dl > div { display: grid; grid-template-columns: minmax(175px, 0.35fr) 1fr; gap: 14px; padding: 11px 16px; background: var(--sw-panel); }
.ecu-portal__identity dt { color: #9ea5a9; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.ecu-portal__identity dd { margin: 0; color: #fff; overflow-wrap: anywhere; font-weight: 700; }
.ecu-portal__identity .is-code { color: #c8d0d4; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.84em; font-weight: 500; }
.ecu-portal__option-group + .ecu-portal__option-group { margin-top: 12px; }
.ecu-portal__readiness { padding: 15px 18px; border: 1px solid; border-radius: 13px; font-weight: 800; }
.ecu-portal__readiness.is-ready { color: var(--sw-ready-text); background: var(--sw-ready-bg); border-color: var(--sw-ready-border); }
.ecu-portal__readiness.is-locked { color: var(--sw-danger-text); background: var(--sw-danger-bg); border-color: var(--sw-danger-border); }
.ecu-portal__modules { display: grid; gap: 14px; }
.ecu-portal__module { position: relative; padding: 21px; color: var(--sw-text); background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 16px; transition: border-color 0.18s, box-shadow 0.18s, transform .18s; }
.ecu-portal__module.is-selected { border-color: var(--sw-red); box-shadow: 0 0 0 2px rgba(226, 10, 9, 0.12); }
.ecu-portal__module.is-disabled { color: var(--sw-text-soft); background: var(--sw-surface-soft); }
.ecu-portal__module-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; }
.ecu-portal__module-head input { width: 18px; min-height: 18px; margin: 3px 0 0; accent-color: var(--sw-red); }
.ecu-portal__module-title { margin: 0; font-size: 18px; font-weight: 950; }
.ecu-portal__module-message { grid-column: 1 / -1; margin: 3px 0 0; color: var(--sw-text-soft); font-size: 13px; }
.ecu-portal__availability { padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.ecu-portal__availability.is-ready { color: #126536; background: #dcfae6; }
.ecu-portal__availability.is-locked { color: #8a251e; background: #fee4e2; }
.ecu-portal__module-check { margin: 0 0 12px; padding: 10px 12px; color: var(--sw-text-soft); background: var(--sw-surface-soft); border-radius: 9px; font-size: 12px; font-weight: 750; }
.ecu-portal__module-body { margin-top: 15px; }
.ecu-portal__module select { width: 100%; margin-top: 8px; }
.ecu-portal__feature-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--sw-line); }
.ecu-portal__feature-row:first-of-type { border-top: 0; }
.ecu-portal__feature-row label { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; }
.ecu-portal__feature-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--sw-red); }
.ecu-portal__info-button { min-height: 34px; padding: 6px 12px; color: var(--sw-text); background: var(--sw-surface-soft); border: 1px solid var(--sw-line); border-radius: 999px; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.ecu-portal__info-button:hover { border-color: var(--sw-red); }
.ecu-portal__feature-info { grid-column: 1 / -1; margin: 0; padding: 11px 13px; color: var(--sw-text-soft); background: var(--sw-surface-soft); border-radius: 9px; font-size: 13px; line-height: 1.55; }
.ecu-portal__dtc-search { display: flex; gap: 8px; margin-bottom: 10px; }
.ecu-portal__dtc-search input { flex: 1; min-width: 0; }
.ecu-portal__dtc-summary { margin: 0 0 10px; color: var(--sw-text-soft); font-size: 12px; font-weight: 750; }
.ecu-portal__dtc-table-wrap { max-height: 330px; overflow: auto; border: 1px solid var(--sw-line); border-radius: 10px; }
.ecu-portal__dtc-table { width: 100%; min-width: 1260px; color: var(--sw-text); background: var(--sw-surface); border-collapse: collapse; font-size: 13px; }
.ecu-portal__dtc-table th { position: sticky; top: 0; z-index: 1; padding: 9px 10px; color: #fff; background: #252b2f; text-align: left; }
.ecu-portal__dtc-table td { padding: 9px 10px; border-top: 1px solid var(--sw-line); vertical-align: top; }
.ecu-portal__dtc-table tr:hover td { background: var(--sw-surface-hover); }
.ecu-portal__dtc-detail { display: -webkit-box; max-width: 460px; margin-top: 4px; overflow: hidden; color: var(--sw-muted); font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ecu-portal__dtc-internal { min-width: 230px; white-space: pre-line; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.ecu-portal__dtc-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 800; }
.ecu-portal__raw { max-width: 180px; overflow: hidden; color: var(--sw-text-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ecu-portal__pill { display: inline-flex; min-width: 48px; justify-content: center; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: 0.04em; }
.ecu-portal__pill--on { color: #9d1c15; background: #fee4e2; }
.ecu-portal__pill--off { color: #176b3a; background: #dcfae6; }
.ecu-portal__pill--partial { color: #8a5a00; background: #fff2cc; }
.ecu-portal__pill--unknown { color: #8a5a00; background: #fff2cc; }
.ecu-portal__support { margin-top: 18px; padding: clamp(20px, 3vw, 28px); color: var(--sw-text); background: linear-gradient(135deg, var(--sw-surface) 0%, var(--sw-surface-soft) 100%); border: 1px solid var(--sw-danger-border); border-left: 5px solid var(--sw-red); border-radius: 16px; box-shadow: 0 16px 38px rgba(24, 28, 31, .08); }
.ecu-portal__support-head { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.ecu-portal__support-mark { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; color: #fff; background: var(--sw-red); border-radius: 50%; font-size: 22px; font-weight: 950; box-shadow: 0 8px 20px rgba(226,10,9,.25); }
.ecu-portal__support-eyebrow { margin: 0 0 3px; color: var(--sw-red); font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.ecu-portal__support h3 { margin: 0 0 5px !important; color: var(--sw-text) !important; font-size: 22px !important; font-weight: 950 !important; }
.ecu-portal__support-head p:last-child { margin: 0; color: var(--sw-text-soft); }
.ecu-portal__support-form { display: grid; gap: 16px; }
.ecu-portal__support-form > label { display: grid; gap: 7px; color: var(--sw-text); font-weight: 850; }
.ecu-portal__support-form input[type="text"], .ecu-portal__support-form textarea { width: 100%; padding: 11px 13px; color: var(--sw-text); background: var(--sw-surface); border: 1px solid var(--sw-input-border); border-radius: 9px; font: inherit; }
.ecu-portal__support-form textarea { min-height: 96px; resize: vertical; }
.ecu-portal__support-form fieldset { margin: 0; padding: 15px; background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 11px; }
.ecu-portal__support-form legend { padding: 0 7px; color: var(--sw-text); font-weight: 900; }
.ecu-portal__support-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.ecu-portal__support-option { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; color: var(--sw-text); background: var(--sw-surface-soft); border-radius: 8px; font-weight: 750; }
.ecu-portal__support-option input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--sw-red); }
.ecu-portal__support-attachment { margin: 0; padding: 11px 13px; color: var(--sw-text-soft); background: var(--sw-surface-soft); border-radius: 9px; overflow-wrap: anywhere; }
.ecu-portal__support-result { margin: 0; padding: 11px 13px; border: 1px solid; border-radius: 9px; font-weight: 800; }
.ecu-portal__support-result.is-success { color: var(--sw-ready-text); background: var(--sw-ready-bg); border-color: var(--sw-ready-border); }
.ecu-portal__support-result.is-error { color: var(--sw-danger-text); background: var(--sw-danger-bg); border-color: var(--sw-danger-border); }
.ecu-portal__status { margin: 18px 0 0; padding: 17px 18px; color: #e9eef0; background: #20272b; border: 1px solid #39434a; border-radius: 14px; }
.ecu-portal__status p { margin: 10px 0 0; color: #d6dadd; }
.ecu-portal__status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ecu-portal__case { margin: 0 !important; color: #fff !important; }
.ecu-portal__stopwatch { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 10px; color: #cbd3d7; background: #151a1d; border: 1px solid #3d484e; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ecu-portal__stopwatch-icon { color: var(--sw-red-bright); font-size: 17px; line-height: 1; }
.ecu-portal__stopwatch strong { min-width: 72px; color: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.ecu-portal__bar { height: 10px; overflow: hidden; background: #41484c; border-radius: 999px; }
.ecu-portal__bar span { display: block; width: 0; height: 100%; background: var(--sw-red); transition: width 220ms ease; }
.ecu-portal__server-time { padding: 10px 12px; color: #fff !important; background: #151a1d; border-left: 3px solid var(--sw-red); border-radius: 7px; font-size: 12px; font-weight: 800; }
.ecu-portal__timeline-wrap { margin-top: 14px; padding-top: 13px; border-top: 1px solid #3b454b; }
.ecu-portal__timeline-wrap h3 { margin: 0 0 10px !important; color: #fff !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: .02em; }
.ecu-portal__timeline { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ecu-portal__timeline-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 8px; min-height: 30px; padding: 7px 9px; color: #dbe1e4; background: #181e21; border: 1px solid #343e43; border-radius: 8px; font-size: 12px; }
.ecu-portal__timeline-mark { display: grid; place-items: center; width: 20px; height: 20px; color: #fff; background: #566168; border-radius: 50%; font-size: 11px; font-weight: 950; }
.ecu-portal__timeline-item.is-ok .ecu-portal__timeline-mark { background: #16804a; }
.ecu-portal__timeline-item.is-failed .ecu-portal__timeline-mark { background: var(--sw-red); }
.ecu-portal__timeline-item.is-running .ecu-portal__timeline-mark { background: #bd7b00; animation: ecu-portal-pulse 1.15s ease-in-out infinite; }
.ecu-portal__timeline-item.is-waiting .ecu-portal__timeline-mark { color: #222; background: #f4c152; }
.ecu-portal__timeline-message { min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.ecu-portal__timeline-time { padding-top: 2px; color: #8f9a9f; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecu-portal__timeline-support { grid-column: 2 / -1; justify-self: start; min-height: 30px; padding: 5px 10px; color: #fff; background: transparent; border: 1px solid #bd555b; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.ecu-portal__timeline-support:hover, .ecu-portal__timeline-support:focus-visible { background: var(--sw-red); border-color: var(--sw-red); outline: none; }
@keyframes ecu-portal-pulse { 50% { opacity: .45; transform: scale(.86); } }
.ecu-portal__download { margin-top: 12px; padding: 10px 16px; }
.ecu-portal__download--secondary { margin-left: 8px; color: #fff !important; background: #343c41 !important; box-shadow: none; }
.ecu-portal__notice { margin: 18px 0 0; padding: 12px 14px; color: var(--sw-text-soft); background: var(--sw-surface); border: 1px solid var(--sw-line); border-left: 4px solid var(--sw-red); border-radius: 9px; font-size: 0.88rem; }
.ecu-portal[data-theme="dark"] .ecu-portal__availability.is-ready,
.ecu-portal[data-theme="dark"] .ecu-portal__pill--off { color: #75e0a7; background: #123323; }
.ecu-portal[data-theme="dark"] .ecu-portal__availability.is-locked,
.ecu-portal[data-theme="dark"] .ecu-portal__pill--on { color: #ff9b95; background: #3a1718; }
.ecu-portal[data-theme="dark"] .ecu-portal__pill--partial,
.ecu-portal[data-theme="dark"] .ecu-portal__pill--unknown { color: #f7c65d; background: #3d3013; }
.ecu-portal[data-theme="dark"] input[type="checkbox"] { accent-color: var(--sw-red); }
@media (max-width: 640px) {
.ecu-portal { margin: 16px 0; border-radius: 16px; }
.ecu-portal__hero { min-height: 210px; padding: 30px 22px 34px; }
.ecu-portal__hero-tools { top: 16px; right: 16px; }
.ecu-portal__account { display: none; }
.ecu-portal__tool-button [data-ecu-theme-label] { display: none; }
.ecu-portal__hero::before { font-size: 155px; top: -22px; }
.ecu-portal__body { padding: 18px; }
.ecu-portal__identity dl > div { grid-template-columns: 1fr; gap: 4px; }
.ecu-portal__form button, .ecu-portal__download { width: 100%; }
.ecu-portal__ecu-selector-head { flex-direction: column; }
.ecu-portal__selector-fields { grid-template-columns: 1fr; }
.ecu-portal__selector-retry { width: 100%; }
.ecu-portal__dtc-search { display: grid; }
.ecu-portal__support-options { grid-template-columns: 1fr; }
.ecu-portal__auth-grid, .ecu-portal__auth-grid--address { grid-template-columns: 1fr; }
.ecu-portal__status-head { align-items: flex-start; flex-direction: column; }
.ecu-portal__timeline-item { grid-template-columns: 22px minmax(0, 1fr); }
.ecu-portal__timeline-time { grid-column: 2; }
.ecu-portal__download--secondary { margin-left: 0; }
}