Files
lingniu-vehicle-ingest/vehicle-data-platform/apps/web/src/v2/styles/v2.css

2238 lines
276 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
:root {
--v2-bg: #f4f7fb;
--v2-surface: #ffffff;
--v2-text: #152033;
--v2-muted: #718096;
--v2-border: #e4eaf2;
--v2-blue: #1268f3;
--v2-blue-soft: #edf4ff;
--v2-green: #12a46f;
--v2-orange: #f59e0b;
--v2-red: #ef4444;
--v2-shadow: 0 8px 30px rgba(21, 32, 51, 0.06);
--v2-radius: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--v2-bg); color: var(--v2-text); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.v2-monitor-return { display: flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 12px; border: 1px solid #cfe0f6; border-radius: 9px; background: linear-gradient(90deg,#f2f7ff,#fff); padding: 6px 10px; color: #51637b; box-shadow: 0 3px 12px rgba(31,69,119,.06); font-size: 9px; }
.v2-monitor-return a { display: inline-flex; height: 28px; flex: 0 0 auto; align-items: center; gap: 5px; border-radius: 7px; background: #1769d2; padding: 0 10px; color: #fff; text-decoration: none; font-weight: 700; }
.v2-monitor-return span { display: inline-flex; min-width: 0; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-monitor-return em { margin-left: auto; flex: 0 0 auto; color: #78869a; font-size: 8px; font-style: normal; }
.v2-track-page > .v2-monitor-return { z-index: 30; grid-column: 1 / -1; }
.v2-auth-screen { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, 1.15fr) minmax(420px, .85fr); align-items: center; background: #f3f6fa; padding: clamp(28px, 5vw, 80px); }
.v2-auth-intro { max-width: 640px; padding: 36px 8vw 36px 4vw; }
.v2-auth-intro > img { width: 176px; }
.v2-auth-intro h2 { margin: 54px 0 20px; color: #14223a; font-size: clamp(34px, 4vw, 58px); font-weight: 720; line-height: 1.16; letter-spacing: -.055em; }
.v2-auth-intro p { max-width: 520px; margin: 0; color: #617087; font-size: 16px; line-height: 1.9; }
.v2-auth-intro > div { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 42px; color: #3f5068; font-size: 13px; font-weight: 650; }
.v2-auth-intro > div span::before { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--v2-blue); content: ""; }
.v2-auth-card { display: flex; width: min(430px, 100%); flex-direction: column; align-items: stretch; border: 1px solid #e0e7f0; border-radius: 18px; background: #fff; padding: 42px; box-shadow: 0 28px 80px rgba(21, 32, 51, .11); }
.v2-auth-loading { grid-column: 1 / -1; justify-self: center; }
.v2-auth-card > strong { margin-top: 12px; text-align: center; }
.v2-auth-logo { display: block; width: 150px; height: auto; margin: 0 auto 18px; }
.v2-auth-card h1 { margin: 2px 0 0; text-align: center; font-size: 24px; letter-spacing: -.035em; }.v2-auth-card p { margin: 11px 0 26px; color: var(--v2-muted); text-align: center; font-size: 13px; line-height: 1.7; }
.v2-auth-card label { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; color: #44536a; font-size: 13px; font-weight: 650; }.v2-auth-card input { height: 46px; border: 1px solid #d5deea; border-radius: 9px; padding: 0 13px; outline: 0; font-size: 14px; }.v2-auth-card input:focus { border-color: #7aaafb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-auth-card em { margin-top: 12px; color: var(--v2-red); font-size: 12px; font-style: normal; }.v2-auth-card button { height: 46px; margin-top: 22px; border: 0; border-radius: 9px; background: var(--v2-blue); color: #fff; cursor: pointer; font-size: 14px; font-weight: 700; }.v2-auth-card button:disabled { opacity: .45; cursor: not-allowed; }
.v2-auth-card .v2-auth-mode-switch { height: 36px; margin-top: 8px; background: transparent; color: #68778c; font-size: 12px; font-weight: 600; }
.v2-auth-card .v2-auth-mode-switch:hover { color: var(--v2-blue); }
.v2-auth-card > small { margin-top: 14px; color: #9aa5b5; text-align: center; font-size: 10px; }
.v2-auth-spinner { width: 24px; height: 24px; margin: auto; border: 3px solid #d8e5fa; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; }
.v2-shell { height: 100vh; height: 100dvh; overflow: hidden; background: var(--v2-bg); }
.v2-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; contain: layout paint; display: flex; width: 188px; flex-direction: column; border-right: 1px solid var(--v2-border); background: #fff; }
.v2-brand { display: flex; height: 64px; align-items: center; border-bottom: 1px solid var(--v2-border); padding: 0 16px; white-space: nowrap; overflow: hidden; }
.v2-brand-logo { display: block; width: 140px; height: auto; flex: 0 0 auto; }
.v2-brand-symbol { display: none; width: 36px; height: auto; flex: 0 0 36px; }
.v2-navigation { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 14px 10px; }
.v2-nav-item { position: relative; display: flex; height: 44px; align-items: center; gap: 12px; border-radius: 8px; padding: 0 14px; color: #59677c; text-decoration: none; white-space: nowrap; overflow: hidden; font-size: 13px; font-weight: 600; transition: background .16s, color .16s; }
.v2-nav-item:hover { background: #f7f9fc; color: var(--v2-text); }
.v2-nav-item.is-active { background: var(--v2-blue-soft); color: var(--v2-blue); }
.v2-nav-item.is-active::before { position: absolute; left: 0; width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--v2-blue); content: ""; }
.v2-nav-operations { margin: 0 10px 8px; }
.v2-collapse { display: flex; height: 48px; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--v2-border); background: #fff; padding: 0 22px; color: #64748b; cursor: pointer; }
.v2-main { display: flex; height: 100vh; height: 100dvh; min-width: 0; flex-direction: column; margin-left: 188px; }
.v2-topbar { position: sticky; top: 0; z-index: 40; display: flex; height: 64px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); background: rgba(255,255,255,.94); padding: 0 24px; backdrop-filter: blur(16px); }
.v2-topbar h1 { margin: 0; font-size: 20px; letter-spacing: -.035em; }
.v2-topbar-actions { display: flex; align-items: center; gap: 4px; }
.v2-topbar-actions button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; }
.v2-topbar-actions button:hover { background: #f1f5f9; }
.v2-help-backdrop { position: fixed; z-index: 1200; inset: 0; background: rgba(15,23,42,.12); }
.v2-help-panel { position: absolute; top: 58px; right: 18px; width: min(390px, calc(100vw - 28px)); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; background: #fff; padding: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.22); }
.v2-help-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.v2-help-panel > header small { color: var(--v2-blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.v2-help-panel h2 { margin: 4px 0 0; color: #17253a; font-size: 19px; }
.v2-help-panel > header button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 8px; background: #f3f6fa; color: #627086; cursor: pointer; }
.v2-help-panel > p { margin: 15px 0; color: #59677c; font-size: 12px; line-height: 1.7; }
.v2-help-panel ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.v2-help-panel li { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: start; gap: 9px; border-radius: 8px; background: #f7f9fc; padding: 10px; color: #435168; font-size: 11px; line-height: 1.65; }
.v2-help-panel li > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--v2-blue-soft); color: var(--v2-blue); font-size: 10px; font-weight: 800; }
.v2-help-panel > footer { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: #8996a8; font-size: 10px; }
.v2-help-panel kbd { border: 1px solid #dce4ef; border-radius: 4px; background: #fff; padding: 2px 5px; color: #59677c; font-family: inherit; }
.v2-current-user { display: flex; align-items: center; gap: 6px; margin: 0 5px; color: #59677c; font-size: 11px; }.v2-current-user b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-current-user small, .v2-role-badge { border-radius: 10px; background: var(--v2-blue-soft); padding: 2px 6px; color: var(--v2-blue); font-size: 9px; }
.v2-topbar-actions .v2-current-user { display: flex; width: auto; padding: 0 7px; }
.v2-password-mobile { display: none !important; }
.v2-password-backdrop { position: fixed; z-index: 1400; inset: 0; display: grid; place-items: center; background: rgba(15,23,42,.28); padding: 16px; }
.v2-password-dialog { width: min(410px,100%); border: 1px solid #e0e7ef; border-radius: 14px; background: #fff; padding: 22px; box-shadow: 0 28px 80px rgba(15,23,42,.2); }
.v2-password-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.v2-password-dialog h2 { margin: 0; font-size: 19px; }.v2-password-dialog header p { margin: 6px 0 0; color: #8491a3; font-size: 10px; }.v2-password-dialog header button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: #f2f5f8; color: #66758a; cursor: pointer; }
.v2-password-dialog > label { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; color: #5a6980; font-size: 11px; font-weight: 650; }.v2-password-dialog input { height: 40px; border: 1px solid #d8e1ec; border-radius: 8px; padding: 0 10px; outline: 0; font-size: 13px; }.v2-password-dialog input:focus { border-color: #84b0f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); }.v2-password-dialog > em { display: block; margin-top: 10px; color: var(--v2-red); font-size: 10px; font-style: normal; }
.v2-password-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.v2-password-dialog footer button { height: 36px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fff; padding: 0 14px; color: #5d6d83; cursor: pointer; font-size: 11px; font-weight: 650; }.v2-password-dialog footer button[type="submit"] { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }.v2-password-dialog footer button:disabled { opacity: .5; }
.v2-role-notice { margin: 6px 0; border-radius: 6px; background: #f6f8fb; padding: 8px; color: var(--v2-muted); font-size: 8px; line-height: 1.5; }
.v2-content { min-width: 0; min-height: 0; flex: 1; overflow: auto; }
.v2-sidebar.is-collapsed { width: 68px; }
.v2-sidebar.is-collapsed + .v2-main { margin-left: 68px; }
.v2-sidebar.is-collapsed .v2-nav-label, .v2-sidebar.is-collapsed .v2-collapse span { display: none; }
.v2-sidebar.is-collapsed .v2-brand { justify-content: center; padding: 0; }
.v2-sidebar.is-collapsed .v2-brand-logo { display: none; }
.v2-sidebar.is-collapsed .v2-brand-symbol { display: block; }
.v2-sidebar.is-collapsed .v2-nav-item { justify-content: center; padding: 0; }
.v2-sidebar.is-collapsed .v2-collapse { justify-content: center; padding: 0; transform: rotate(180deg); }
.v2-monitor-page { display: flex; height: 100%; min-height: 0; overflow: hidden; flex-direction: column; gap: clamp(10px, 1vh, 14px); padding: clamp(10px, 1vw, 18px); }
.v2-filterbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(120px, 150px) minmax(120px, 150px) auto auto auto auto; gap: 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 10px 12px; box-shadow: var(--v2-shadow); }
.v2-search-field { display: flex; height: 36px; align-items: center; gap: 8px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 10px; color: #8a98aa; }
.v2-search-field:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-search-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--v2-text); font-size: 12px; }
.v2-search-field.is-batch { border-color: #9fc0f7; background: #fbfdff; }
.v2-search-batch-count { flex: 0 0 auto; border-radius: 999px; background: var(--v2-blue-soft); padding: 3px 7px; color: var(--v2-blue); font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; }
.v2-search-batch-count.has-missing { background: #fff4e5; color: #b45309; }
.v2-search-batch-action { flex: 0 0 auto; border: 0; border-left: 1px solid #dce4ef; background: transparent; padding: 0 2px 0 10px; color: var(--v2-blue); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.v2-search-batch-action:hover { color: #124ea1; }
.v2-batch-search-backdrop { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; background: rgba(15, 27, 46, .4); padding: 20px; backdrop-filter: blur(3px); }
.v2-batch-search-dialog { width: min(520px, 100%); border: 1px solid rgba(255,255,255,.75); border-radius: 14px; background: #fff; padding: 20px; box-shadow: 0 24px 70px rgba(13, 33, 62, .24); }
.v2-batch-search-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.v2-batch-search-dialog > header div { display: grid; gap: 4px; }
.v2-batch-search-dialog > header strong { color: #17253a; font-size: 17px; }
.v2-batch-search-dialog > header span { color: #728096; font-size: 12px; }
.v2-batch-search-dialog > header button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 7px; background: #f3f6fa; color: #627086; cursor: pointer; }
.v2-batch-search-dialog > label { display: block; margin-bottom: 8px; color: #536176; font-size: 12px; font-weight: 600; }
.v2-batch-search-dialog textarea { display: block; width: 100%; min-height: 210px; resize: vertical; border: 1px solid #ccd8e7; border-radius: 9px; background: #fbfcfe; padding: 12px 14px; color: #1d2a3d; outline: 0; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.v2-batch-search-dialog textarea:focus { border-color: #4386df; background: #fff; box-shadow: 0 0 0 3px rgba(45, 116, 210, .1); }
.v2-batch-search-summary { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; color: #758297; font-size: 11px; }
.v2-batch-search-summary strong { color: var(--v2-blue); font-size: 13px; }
.v2-batch-search-summary em { color: #8994a5; font-style: normal; }
.v2-batch-search-dialog > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.v2-batch-search-dialog > footer button { min-width: 92px; }
.v2-batch-search-dialog > footer button:disabled { opacity: .45; cursor: not-allowed; }
.v2-filterbar select { height: 36px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 30px 0 11px; color: #4d5c70; outline: 0; font-size: 12px; }
.v2-filter-live-status { display: flex; height: 36px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #d9e8fb; border-radius: 7px; background: #f5f9ff; padding: 0 11px; color: #3568a9; font-size: 11px; font-weight: 700; white-space: nowrap; }
.v2-filter-live-status svg { color: var(--v2-blue); }
.v2-primary-button, .v2-secondary-button { display: flex; height: 36px; align-items: center; justify-content: center; gap: 7px; border-radius: 7px; padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 700; }
.v2-primary-button { border: 1px solid var(--v2-blue); background: var(--v2-blue); color: #fff; box-shadow: 0 5px 12px rgba(18,104,243,.18); }
.v2-secondary-button { border: 1px solid #dce4ef; background: #fff; color: #59677c; }
.v2-monitor-mode { display: flex; height: 36px; overflow: hidden; border: 1px solid #dce4ef; border-radius: 7px; background: #f7f9fc; padding: 2px; }
.v2-monitor-mode button, .v2-monitor-mobile-entry { display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 5px; background: transparent; padding: 0 10px; color: #65758a; font-size: 12px; cursor: pointer; white-space: nowrap; }
.v2-monitor-mode button.is-active { background: #fff; color: var(--v2-blue); box-shadow: 0 1px 4px rgba(21,32,51,.12); font-weight: 700; }
.v2-monitor-mobile-entry { height: 36px; border: 1px solid #dce4ef; background: #fff; }
.v2-kpis { display: grid; grid-template-columns: repeat(8, minmax(86px, 1fr)); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-kpi { position: relative; min-width: 0; padding: 10px 14px; }
.v2-kpi + .v2-kpi::before { position: absolute; inset: 12px auto 12px 0; width: 1px; background: var(--v2-border); content: ""; }
.v2-kpi small { display: block; color: var(--v2-muted); font-size: 11px; }
.v2-kpi strong { display: block; margin-top: 5px; overflow: hidden; color: var(--v2-text); font-size: clamp(16px, 1.45vw, 22px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-kpi.is-online strong, .v2-kpi.is-idle strong { color: var(--v2-green); }
.v2-kpi.is-driving strong, .v2-kpi.is-today strong { color: var(--v2-blue); }
.v2-kpi.is-alert strong { color: var(--v2-red); }
.v2-kpi.is-offline strong, .v2-kpi.is-missing strong { color: #7b8798; }
.v2-monitor-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: clamp(244px, 14vw, 300px) minmax(480px, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(21,32,51,.04); }
.v2-monitor-workspace.is-detail-open { grid-template-columns: clamp(244px, 14vw, 300px) minmax(480px, 1fr) clamp(300px, 17vw, 360px); }
.v2-monitor-workspace.is-detail-collapsed { grid-template-columns: clamp(244px, 14vw, 300px) minmax(480px, 1fr) 44px; }
.v2-vehicle-rail { display: flex; min-width: 0; min-height: 0; flex-direction: column; border-right: 1px solid var(--v2-border); }
.v2-vehicle-rail > header { display: flex; height: 46px; align-items: center; justify-content: space-between; padding: 0 12px; }
.v2-vehicle-rail > header strong { font-size: 13px; }
.v2-vehicle-rail > header span, .v2-vehicle-rail > footer { color: var(--v2-muted); font-size: 10px; }
.v2-rail-search { display: flex; height: 34px; align-items: center; gap: 7px; margin: 0 9px 8px; border: 1px solid var(--v2-border); border-radius: 7px; padding: 0 9px; color: #8a98aa; font-size: 10px; }
.v2-rail-search.has-missing { border-color: #fed7aa; background: #fffaf3; color: #b45309; }
.v2-vehicle-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.v2-vehicle-row { display: grid; width: 100%; min-height: 60px; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-top: 1px solid #eef2f7; background: #fff; padding: 8px 10px; text-align: left; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 60px; }
.v2-vehicle-row:hover { background: #f8fbff; }
.v2-vehicle-row.is-selected { position: relative; z-index: 1; background: var(--v2-blue-soft); box-shadow: inset 3px 0 var(--v2-blue); }
.v2-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.v2-status-dot.is-online, .v2-status-dot.is-idle { background: var(--v2-green); }
.v2-status-dot.is-driving { background: var(--v2-blue); }
.v2-status-dot.is-offline { background: #aab3c0; }
.v2-status-dot.is-alert { background: var(--v2-red); }
.v2-vehicle-identity, .v2-vehicle-motion { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.v2-vehicle-identity strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.v2-vehicle-identity small, .v2-vehicle-motion small { overflow: hidden; color: #8996a8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.v2-vehicle-motion { align-items: flex-end; }
.v2-vehicle-motion strong { font-size: 11px; font-variant-numeric: tabular-nums; }
.v2-vehicle-motion strong small { font-size: 8px; font-weight: 500; }
.v2-vehicle-rail > footer { display: flex; height: 34px; align-items: center; justify-content: center; border-top: 1px solid var(--v2-border); }
.v2-list-loading { display: flex; min-height: 100px; align-items: center; justify-content: center; gap: 8px; color: var(--v2-muted); font-size: 11px; }
.v2-monitor-table-panel { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid #dce4ee; border-radius: 9px; background: #fff; box-shadow: 0 4px 16px rgba(21,32,51,.04); }
.v2-monitor-table-panel > header { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--v2-border); padding: 8px 14px; }
.v2-monitor-table-panel > header div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.v2-monitor-table-panel > header strong { font-size: 14px; }
.v2-monitor-table-panel > header span, .v2-monitor-table-panel > header > b { color: var(--v2-muted); font-size: 11px; font-weight: 500; }
.v2-monitor-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.v2-monitor-table-scroll table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.v2-monitor-table-scroll th { position: sticky; top: 0; z-index: 3; height: 42px; border-bottom: 1px solid #dce4ee; background: #f7f9fc; padding: 0 14px; color: #607086; font-size: 11px; font-weight: 650; text-align: left; }
.v2-monitor-table-scroll th:nth-child(1) { width: 180px; }.v2-monitor-table-scroll th:nth-child(2) { width: 116px; }.v2-monitor-table-scroll th:nth-child(3) { width: 92px; }.v2-monitor-table-scroll th:nth-child(4) { width: 154px; }.v2-monitor-table-scroll th:nth-child(5) { width: 150px; }.v2-monitor-table-scroll th:nth-child(6) { width: auto; }.v2-monitor-table-scroll th:nth-child(7) { width: 148px; }
.v2-monitor-table-scroll td { height: 62px; border-bottom: 1px solid #edf1f6; padding: 7px 14px; vertical-align: middle; }
.v2-monitor-table-scroll tbody tr { transition: background .14s ease; }
.v2-monitor-table-scroll tbody tr:hover { background: #f8fbff; }
.v2-monitor-table-scroll td > strong, .v2-monitor-table-scroll td > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-monitor-table-vehicle > button { display: flex; max-width: 100%; flex-direction: column; align-items: flex-start; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; }.v2-monitor-table-vehicle > button:hover strong { color: var(--v2-blue); }
.v2-monitor-table-vehicle strong, .v2-monitor-table-vehicle span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-monitor-table-vehicle strong { color: #263448; font-size: 13px; transition: color .14s ease; }.v2-monitor-table-vehicle span { margin-top: 4px; color: #8996a8; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; }
.v2-monitor-live-value { display: inline !important; color: #213044; font-size: 14px !important; font-variant-numeric: tabular-nums; }
.v2-monitor-live-unit { margin-left: 4px; color: #8b98aa; font-size: 9px; }
.v2-monitor-coordinate { color: #52637a; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.55; }
.v2-monitor-source-badge { display: inline-flex !important; max-width: 100%; align-items: center; overflow: hidden; border: 1px solid #dbe5f1; border-radius: 999px; background: #f7faff; padding: 4px 8px; color: #42648f; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.v2-monitor-mileage, .v2-monitor-last-seen { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.v2-monitor-mileage > span { display: grid; min-width: 0; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 4px; }
.v2-monitor-mileage small { color: #8996a8; font-size: 8px; }.v2-monitor-mileage strong { overflow: hidden; color: #34445a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-monitor-last-seen strong { color: #46566c; font-size: 10px; }.v2-monitor-last-seen span { overflow: hidden; color: #8a97a9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-monitor-unavailable { color: #a2acb9; }
.v2-monitor-address-action { display: inline-flex; height: 28px; align-items: center; gap: 5px; border: 1px solid #d5e0ee; border-radius: 6px; background: #fff; padding: 0 9px; color: #3568a9; cursor: pointer; font-size: 10px; font-weight: 650; transition: border-color .14s ease, background .14s ease; }
.v2-monitor-address-action:hover { border-color: #9bb8dd; background: #f4f8fe; }.v2-monitor-address-action.is-error { border-color: #f0c9c9; color: #b74b4b; }
.v2-monitor-address-empty, .v2-monitor-address-loading { display: inline-flex; align-items: center; gap: 6px; color: #929dac; font-size: 10px; }
.v2-monitor-address-result { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
.v2-monitor-address-result > span { display: block; width: 100%; overflow: hidden; color: #47576c; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.v2-monitor-address-result > small { color: #98a3b2; font-size: 8px; }
.v2-monitor-address-result > button { border: 0; background: transparent; padding: 0; color: #c27a13; cursor: pointer; font-size: 9px; }
.v2-monitor-source { min-width: 0; border-left: 2px solid #d6dee9; padding-left: 8px; }
.v2-monitor-source.is-online { border-color: #1fb573; }.v2-monitor-source.is-offline, .v2-monitor-source.is-pending, .v2-monitor-source.is-unknown { border-color: #f59e0b; }.v2-monitor-source.is-not-required { opacity: .62; }
.v2-monitor-source header, .v2-monitor-source header span, .v2-monitor-source > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.v2-monitor-source header span { justify-content: flex-start; font-size: 10px; font-weight: 700; }.v2-monitor-source header i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v2-monitor-source.is-online header span { color: #16885a; }.v2-monitor-source.is-abnormal header span { color: #c87905; }.v2-monitor-source header time { color: #8996a8; font-size: 9px; white-space: nowrap; }
.v2-monitor-source > div { margin-top: 7px; justify-content: flex-start; }.v2-monitor-source > div b { font-size: 11px; }.v2-monitor-source > div span { color: #59677c; font-size: 10px; }
.v2-monitor-source > small { display: block; margin-top: 5px; overflow: hidden; color: #8996a8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-monitor-overall { display: inline-flex; border-radius: 10px; background: #edf2f7; padding: 3px 8px; color: #637186; font-size: 10px; }.v2-monitor-overall.is-healthy { background: #e7f8f0; color: #16885a; }.v2-monitor-overall.is-degraded, .v2-monitor-overall.is-incomplete { background: #fff4df; color: #a86400; }.v2-monitor-overall.is-offline { background: #f1f3f6; color: #68778b; }
.v2-monitor-table-loading { position: sticky; bottom: 0; display: flex; height: 34px; align-items: center; justify-content: center; gap: 7px; background: rgba(255,255,255,.92); color: #607086; font-size: 10px; }
.v2-monitor-mobile-cards { display: none; }
.v2-monitor-table-panel > footer { display: flex; min-height: 44px; align-items: center; justify-content: space-between; border-top: 1px solid var(--v2-border); padding: 6px 14px; color: #718096; font-size: 11px; }
.v2-monitor-table-panel > footer div { display: flex; gap: 7px; }.v2-monitor-table-panel > footer button, .v2-monitor-table-panel > footer select { height: 30px; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0 10px; color: #536277; font-size: 10px; cursor: pointer; }.v2-monitor-table-panel > footer button:disabled { cursor: not-allowed; opacity: .45; }
.v2-monitor-qr-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(15,23,42,.42); padding: 18px; backdrop-filter: blur(4px); }
.v2-monitor-qr-backdrop > section { position: relative; display: flex; width: min(360px, 100%); align-items: center; flex-direction: column; border-radius: 16px; background: #fff; padding: 26px; box-shadow: 0 24px 70px rgba(15,23,42,.26); text-align: center; }
.v2-monitor-qr-backdrop > section > button:first-child { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: #6b7a8f; cursor: pointer; }.v2-monitor-qr-backdrop > section > svg { color: var(--v2-blue); font-size: 26px; }.v2-monitor-qr-backdrop h3 { margin: 9px 0 4px; font-size: 17px; }.v2-monitor-qr-backdrop p { margin: 0 0 13px; color: #718096; font-size: 11px; }.v2-monitor-qr-backdrop img { width: 220px; height: 220px; }.v2-monitor-qr-backdrop code { width: 100%; overflow: hidden; margin-top: 10px; border-radius: 6px; background: #f5f7fa; padding: 8px; color: #5f6e82; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.v2-monitor-qr-backdrop > section > button:last-child { width: 100%; height: 38px; margin-top: 10px; border: 0; border-radius: 7px; background: var(--v2-blue); color: #fff; font-weight: 700; cursor: pointer; }
.v2-monitor-qr-error { display: flex; width: 220px; height: 220px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; border: 1px dashed #f0b7b7; border-radius: 10px; background: #fff7f7; padding: 18px; color: #a53a3a; font-size: 11px; line-height: 1.6; }.v2-monitor-qr-error button { height: 30px; border: 1px solid #e7a7a7; border-radius: 6px; background: #fff; padding: 0 12px; color: #a53a3a; cursor: pointer; font-size: 10px; font-weight: 700; }
.v2-fleet-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e8f0f6; }
.v2-fleet-map-canvas { position: absolute; inset: 0; }
.v2-map-controls { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; align-items: stretch; gap: 8px; }
.v2-map-layer-control { display: grid; height: 44px; grid-template-columns: auto auto auto; align-items: center; gap: 8px; border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; padding: 0 10px; color: #435168; box-shadow: 0 5px 16px rgba(21,32,51,.1); cursor: pointer; }
.v2-map-layer-control > svg { color: var(--v2-blue); font-size: 15px; }
.v2-map-layer-control span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.v2-map-layer-control strong { font-size: 10px; line-height: 1.2; }
.v2-map-layer-control small { color: #7b8ba0; font-size: 8px; }
.v2-map-layer-control > i { position: relative; width: 24px; height: 14px; border-radius: 8px; background: #cbd5e1; transition: background .16s; }
.v2-map-layer-control > i::after { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); content: ""; transition: transform .16s; }
.v2-map-layer-control > i.is-on { background: var(--v2-blue); }
.v2-map-layer-control > i.is-on::after { transform: translateX(10px); }
.v2-map-follow-control { display: grid; height: 44px; grid-template-columns: auto auto; align-items: center; gap: 8px; border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; padding: 0 11px; color: #607086; box-shadow: 0 5px 16px rgba(21,32,51,.1); cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.v2-map-follow-control > svg { font-size: 16px; }
.v2-map-follow-control span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.v2-map-follow-control strong { font-size: 10px; line-height: 1.2; }
.v2-map-follow-control small { color: #8a98aa; font-size: 8px; }
.v2-map-follow-control.is-active { border-color: #9ec0f7; background: #eef5ff; color: #1268f3; }
.v2-map-follow-control.is-active small { color: #4e82cf; }
.v2-map-selection-marker { --v2-selection-color: #f59e0b; --v2-selection-rgb: 245,158,11; position: relative; width: 48px; height: 48px; pointer-events: none; }
.v2-map-selection-marker.is-driving { --v2-selection-color: #1677ff; --v2-selection-rgb: 22,119,255; }
.v2-map-selection-marker.is-idle { --v2-selection-color: #12a46f; --v2-selection-rgb: 18,164,111; }
.v2-map-selection-marker.is-offline { --v2-selection-color: #9aa6b7; --v2-selection-rgb: 154,166,183; }
.v2-map-selection-marker.is-alert { --v2-selection-color: #ef4444; --v2-selection-rgb: 239,68,68; }
.v2-map-selection-marker > i { position: absolute; inset: 4px; border: 2px solid rgba(var(--v2-selection-rgb),.6); border-radius: 50%; animation: v2-map-ripple 2s ease-out infinite; }
.v2-map-selection-marker > i:nth-child(2) { animation-delay: 1s; }
.v2-map-selection-marker > b { position: absolute; top: 18px; left: 18px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--v2-selection-color); box-shadow: 0 2px 8px rgba(var(--v2-selection-rgb),.45); }
.v2-province-placement { position: relative; width: 0; height: 0; }
.v2-province-anchor { position: absolute; top: -3px; left: -3px; z-index: 2; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #397fd7; box-shadow: 0 2px 6px rgba(31,92,167,.34); pointer-events: none; }
.v2-province-connector { position: absolute; top: -.5px; left: 0; width: var(--province-line); height: 1px; background: rgba(72,111,158,.46); pointer-events: none; transform: rotate(var(--province-angle)); transform-origin: 0 50%; }
.v2-province-marker { position: absolute; top: var(--province-y); left: var(--province-x); display: grid; width: 92px; min-height: 52px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 7px; overflow: hidden; border: 1px solid rgba(126,164,216,.78); border-radius: 9px; background: rgba(255,255,255,.96); padding: 6px 8px 5px; color: #27405f; box-shadow: 0 7px 22px rgba(31,65,112,.18); cursor: pointer; font-family: Inter,"PingFang SC","Microsoft YaHei",sans-serif; text-align: left; transform: translate(-50%,-50%) translateZ(0); transition: border-color .16s ease, box-shadow .16s ease, margin .16s ease; }
.v2-province-marker:hover { margin-top: -1px; border-color: #397fd7; box-shadow: 0 9px 26px rgba(31,92,167,.25); }
.v2-province-marker > span { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.v2-province-marker > strong { grid-row: 1 / span 2; grid-column: 2; color: #1268f3; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1; }
.v2-province-marker > small { color: #75869b; font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v2-province-marker > i { position: relative; height: 3px; grid-column: 1 / -1; overflow: hidden; border-radius: 2px; background: #e7edf5; }
.v2-province-marker > i > b { position: absolute; inset: 0 auto 0 0; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg,#12a46f,#35c98c); }
.v2-map-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; background: #eef3f7; color: #637083; font-size: 12px; }
.v2-map-state.is-loading { background: rgba(255,255,255,.82); backdrop-filter: blur(2px); }
.v2-map-state.is-error { flex-direction: column; padding: 20px; color: #b42318; text-align: center; }
.v2-map-state.is-error button { display: inline-flex; height: 32px; align-items: center; gap: 6px; border: 1px solid #f2b8b5; border-radius: 7px; background: #fff; padding: 0 11px; color: #a61b13; cursor: pointer; font-size: 11px; font-weight: 700; box-shadow: 0 3px 10px rgba(180,35,24,.08); }
.v2-map-state.is-error button:hover { border-color: #df8a85; background: #fff8f7; }
.v2-map-legend { position: absolute; bottom: 12px; left: 50%; display: flex; width: max-content; max-width: calc(100% - 28px); height: 36px; align-items: center; justify-content: center; gap: 18px; border: 1px solid #d8e2ed; border-radius: 8px; background: #fff; padding: 0 16px; color: #5f6e82; box-shadow: 0 6px 18px rgba(21,32,51,.1); font-size: 9px; transform: translateX(-50%); }
.v2-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.v2-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.v2-map-legend .is-driving { background: var(--v2-blue); }
.v2-map-legend .is-idle { background: var(--v2-green); }
.v2-map-legend .is-alert { background: var(--v2-red); }
.v2-map-legend b { margin-left: 6px; color: #4d5c70; font-weight: 600; }
.v2-vehicle-detail { position: relative; min-width: 0; min-height: 0; contain: layout paint; overflow: auto; border-left: 1px solid var(--v2-border); background: #fff; padding: 14px; animation: v2-panel-enter .14s ease-out; }
.v2-detail-controls { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; gap: 4px; }
.v2-detail-controls button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; color: #68768a; cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.v2-detail-controls button:hover { border-color: #a9c5f2; background: #f1f6ff; color: var(--v2-blue); }
.v2-detail-controls button:last-child:hover { border-color: #f0b9b9; background: #fff5f5; color: var(--v2-red); }
.v2-detail-title { padding: 2px 68px 12px 0; border-bottom: 1px solid var(--v2-border); }
.v2-detail-title > div { display: flex; align-items: center; gap: 8px; }
.v2-detail-title strong { font-size: 16px; }
.v2-detail-title small { display: block; margin-top: 4px; color: var(--v2-muted); font-size: 9px; }
.v2-status-text { color: var(--v2-muted); font-size: 10px; font-weight: 700; }
.v2-status-text.is-driving { color: var(--v2-blue); }
.v2-status-text.is-idle, .v2-status-text.is-online { color: var(--v2-green); }
.v2-status-text.is-alert { color: var(--v2-red); }
.v2-detail-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 0; }
.v2-detail-actions a { display: flex; height: 30px; align-items: center; justify-content: center; border: 1px solid #dce4ef; border-radius: 6px; color: #59677c; text-decoration: none; font-size: 9px; font-weight: 700; }
.v2-detail-actions a:first-child { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.v2-detail-peek { min-width: 0; min-height: 0; contain: layout paint; border-left: 1px solid var(--v2-border); background: #fff; animation: v2-panel-enter .12s ease-out; }
.v2-detail-peek button { display: flex; width: 100%; height: 100%; align-items: center; flex-direction: column; gap: 10px; border: 0; background: #fff; padding: 14px 8px; color: #65758a; cursor: pointer; transition: background .16s, color .16s; }
.v2-detail-peek button:hover { background: #f2f7ff; color: var(--v2-blue); }
.v2-detail-peek button > svg { flex: 0 0 auto; font-size: 15px; }
.v2-detail-peek button > span { overflow: hidden; writing-mode: vertical-rl; color: #435168; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-overflow: ellipsis; }
.v2-vehicle-detail section { padding: 10px 0; border-top: 1px solid var(--v2-border); }
.v2-vehicle-detail h3 { margin: 0 0 9px; font-size: 11px; }
.v2-detail-list { margin: 0; }
.v2-detail-list > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; padding: 5px 0; font-size: 9px; }
.v2-detail-list dt { color: var(--v2-muted); }
.v2-detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #3d4a5e; }
.v2-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--v2-border); border-radius: 7px; }
.v2-metric-grid > div { min-width: 0; padding: 9px; }
.v2-metric-grid > div:nth-child(even) { border-left: 1px solid var(--v2-border); }
.v2-metric-grid > div:nth-child(n+3) { border-top: 1px solid var(--v2-border); }
.v2-metric-grid small { display: block; color: var(--v2-muted); font-size: 8px; }
.v2-metric-grid strong { display: block; margin-top: 4px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.v2-metric-grid em { margin-left: 2px; color: var(--v2-muted); font-size: 7px; font-style: normal; font-weight: 500; }
.v2-metric-source-link, .v2-live-source-link { display: block; width: 100%; margin-top: 4px; overflow: hidden; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.v2-metric-source-link:hover, .v2-live-source-link:hover, .v2-detail-source-link:hover, .v2-map-source-link:hover { color: var(--v2-blue); }
.v2-detail-source-link { max-width: 100%; overflow: hidden; border: 0; background: transparent; padding: 0; color: #3d4a5e; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
.v2-source-evidence { min-width: 0; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; box-shadow: 0 4px 18px rgba(23,43,77,.045); }
.v2-record-grid > .v2-source-evidence { grid-column: 1 / -1; }
.v2-source-evidence-trigger { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.v2-source-evidence-trigger > div { min-width: 0; }
.v2-source-evidence-trigger strong { display: block; color: #25344a; font-size: 12px; }
.v2-source-evidence-trigger span { display: block; margin-top: 3px; overflow: hidden; color: #79869a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.v2-source-evidence-trigger button { flex: 0 0 auto; height: 30px; border: 1px solid #bfd4f6; border-radius: 7px; background: #f3f7ff; padding: 0 11px; color: var(--v2-blue); cursor: pointer; font-size: 9px; font-weight: 700; }
.v2-source-evidence-body { border-top: 1px solid var(--v2-border); padding: 12px 14px 14px; }
.v2-source-evidence-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.v2-source-evidence-toolbar label { display: flex; align-items: center; gap: 8px; color: #59677b; font-size: 9px; font-weight: 700; }
.v2-source-evidence-toolbar input { height: 30px; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0 8px; color: #344257; font-size: 9px; }
.v2-source-evidence-toolbar small { color: #8b96a8; font-size: 8px; }
.v2-source-evidence-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid #dfe6ef; border-radius: 8px; background: #f8fafc; }
.v2-source-evidence-summary > div { min-width: 0; padding: 10px 12px; }
.v2-source-evidence-summary > div + div { border-left: 1px solid #e2e8f0; }
.v2-source-evidence-summary small { display: block; color: #7b8799; font-size: 8px; }
.v2-source-evidence-summary strong { display: block; margin-top: 4px; overflow: hidden; color: #26364c; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-source-evidence-summary em { margin-left: 3px; color: #8793a5; font-size: 8px; font-style: normal; font-weight: 500; }
.v2-source-evidence-group { margin-top: 12px; padding: 0; border: 0; }
.v2-source-evidence-group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.v2-source-evidence-group > header strong { color: #314157; font-size: 11px; }
.v2-source-evidence-group > header span { color: #8995a7; font-size: 8px; }
.v2-source-evidence-group > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 8px; }
.v2-source-evidence-card { min-width: 0; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff; }
.v2-source-evidence-card.is-recommended { border-color: #8eb8f5; box-shadow: inset 3px 0 #3b82f6; }
.v2-source-evidence-card.is-warning { border-color: #f0c16f; box-shadow: inset 3px 0 #eaa126; }
.v2-source-evidence-card.is-disabled, .v2-source-evidence-card.is-offline { background: #fafbfc; opacity: .82; }
.v2-source-evidence-card > header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #edf1f5; padding: 8px 10px; }
.v2-source-evidence-card > header > div { min-width: 0; }
.v2-source-evidence-card > header strong { display: block; overflow: hidden; color: #2c3b50; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.v2-source-evidence-card > header span { display: block; margin-top: 3px; overflow: hidden; color: #7e8a9c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.v2-source-evidence-card > header aside { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.v2-source-evidence-card > header b { border-radius: 10px; background: #edf2f7; padding: 2px 6px; color: #64748b; font-size: 7px; }
.v2-source-evidence-card > header b.is-recommended { background: #e8f1ff; color: #1769d2; }
.v2-source-evidence-card > header b.is-disabled, .v2-source-evidence-card > header b.is-offline { background: #eef0f3; color: #7b8491; }
.v2-source-evidence-card > header b.is-warning { background: #fff4dc; color: #a46500; }
.v2-source-evidence-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 5px 10px 8px; }
.v2-source-evidence-card dl > div { min-width: 0; padding: 5px 3px; }
.v2-source-evidence-card dt { color: #8b96a7; font-size: 7px; }
.v2-source-evidence-card dd { margin: 3px 0 0; overflow: hidden; color: #445268; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-source-evidence-card > p { margin: 0 10px 9px; border-radius: 5px; background: #fff7e8; padding: 6px 8px; color: #9a650b; font-size: 7px; line-height: 1.5; }
.v2-source-evidence-state { display: flex; min-height: 80px; align-items: center; justify-content: center; gap: 8px; color: #718096; font-size: 9px; }
.v2-source-evidence-state i { width: 16px; height: 16px; border: 2px solid #cbd8ea; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; }
.v2-source-evidence-state.is-error { color: #b42318; }
.v2-source-evidence-state button { height: 28px; border: 1px solid #edb5b0; border-radius: 6px; background: #fff; padding: 0 9px; color: #a61b13; cursor: pointer; font-size: 8px; }
.v2-source-evidence.is-compact { margin-top: 10px; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
.v2-source-evidence.is-compact .v2-source-evidence-trigger { padding: 9px 0; }
.v2-source-evidence.is-compact .v2-source-evidence-body { padding: 10px 0 2px; }
.v2-source-evidence.is-compact .v2-source-evidence-toolbar { align-items: flex-start; flex-direction: column; gap: 7px; }
.v2-source-evidence.is-compact .v2-source-evidence-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.v2-source-evidence.is-compact .v2-source-evidence-summary > div:nth-child(3) { border-left: 0; }
.v2-source-evidence.is-compact .v2-source-evidence-summary > div:nth-child(n+3) { border-top: 1px solid #e2e8f0; }
.v2-source-evidence.is-compact .v2-source-evidence-group > div { grid-template-columns: 1fr; }
.v2-vehicle-detail .v2-source-evidence-group { padding: 0; border-top: 0; }
.v2-event-strip { display: flex; min-height: 48px; align-items: center; gap: 22px; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff; padding: 0 16px; box-shadow: 0 3px 12px rgba(21,32,51,.035); color: #6d7a8d; font-size: 10px; }
.v2-event-strip strong { color: var(--v2-text); font-size: 11px; }
.v2-event-strip span { display: inline-flex; align-items: center; gap: 6px; }
.v2-event-strip i { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-green); }
.v2-event-strip time { margin-left: auto; font-variant-numeric: tabular-nums; }
.v2-refresh-cadence { border-left: 1px solid var(--v2-border); padding-left: 18px; }
.v2-refresh-cadence b { color: var(--v2-blue); font-weight: 700; }
.v2-page-state, .v2-inline-state { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--v2-muted); font-size: 12px; }
.v2-page-state { min-height: 100%; flex-direction: column; gap: 18px; padding: clamp(18px, 3vw, 36px); }
.v2-page-state > header { display: flex; align-items: center; gap: 10px; }
.v2-page-state > header strong, .v2-page-state > header small { display: block; }
.v2-page-state > header strong { color: var(--v2-text); font-size: 13px; }
.v2-page-state > header small { margin-top: 3px; color: var(--v2-muted); font-size: 9px; }
.v2-page-skeleton { display: grid; width: min(920px, 100%); grid-template-columns: repeat(3,1fr); gap: 10px; }
.v2-page-skeleton i { min-height: 72px; border: 1px solid #edf1f6; border-radius: 10px; background: linear-gradient(100deg,#f4f7fb 25%,#edf3fa 38%,#f4f7fb 55%); background-size: 300% 100%; animation: v2-skeleton 1.4s ease infinite; }
.v2-page-skeleton i:last-child { min-height: 260px; grid-column: 1 / -1; }
.v2-route-error { display: grid; min-height: 100%; place-items: center; padding: 28px; background: #f6f8fb; }
.v2-root-error { min-height: 100vh; }
.v2-route-error > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: #fff1f2; color: #dc2626; font-size: 24px; }
.v2-route-error > div { width: min(560px,100%); text-align: center; }
.v2-route-error small { color: #b45309; font-size: 10px; font-weight: 700; }
.v2-route-error h2 { margin: 8px 0; color: var(--v2-text); font-size: 21px; }
.v2-route-error p { margin: 0 auto; color: var(--v2-muted); font-size: 12px; line-height: 1.7; }
.v2-route-error code { display: block; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9b1c1c; font-size: 9px; }
.v2-route-error footer { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.v2-route-error button, .v2-route-error a { display: inline-flex; height: 36px; align-items: center; gap: 6px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; padding: 0 14px; color: #526176; text-decoration: none; cursor: pointer; font-size: 11px; font-weight: 700; }
.v2-route-error button { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.v2-inline-state { min-height: 76px; border: 1px dashed var(--v2-border); border-radius: 8px; padding: 12px; }
.v2-inline-state.is-error { justify-content: flex-start; min-height: 42px; border-style: solid; border-color: #fecaca; background: #fff5f5; color: #b42318; }
.v2-inline-state button { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; }
.v2-spinner { width: 14px; height: 14px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; }
@keyframes v2-skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.v2-module-stage { margin: 18px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 28px; box-shadow: var(--v2-shadow); }
.v2-module-stage h2 { margin: 0; font-size: 20px; }
.v2-module-stage p { margin: 10px 0 0; color: var(--v2-muted); font-size: 13px; }
.v2-ops-page { display: flex; min-height: 100%; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.v2-ops-heading { display: flex; align-items: center; justify-content: space-between; }.v2-ops-heading h2 { margin: 0; font-size: 18px; }.v2-ops-heading p { margin: 4px 0 0; color: var(--v2-muted); font-size: 10px; }.v2-ops-heading button { display: flex; height: 32px; align-items: center; gap: 6px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 11px; color: #526176; cursor: pointer; font-size: 10px; }
.v2-ops-kpis { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }.v2-ops-kpis article { position: relative; min-width: 0; padding: 13px 15px; }.v2-ops-kpis article + article::before { position: absolute; inset: 12px auto 12px 0; width: 1px; background: var(--v2-border); content: ''; }.v2-ops-kpis small { display: block; color: var(--v2-muted); font-size: 9px; }.v2-ops-kpis strong { display: block; margin: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }.v2-ops-kpis span { color: #8793a5; font-size: 8px; }
.v2-ops-grid { display: grid; min-height: 280px; grid-template-columns: minmax(460px,1.5fr) minmax(280px,.8fr); gap: 10px; }.v2-ops-links, .v2-ops-runtime, .v2-ops-sources { border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }.v2-ops-links > header, .v2-ops-runtime > header, .v2-ops-sources > header { display: flex; height: 42px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 13px; }.v2-ops-links header strong, .v2-ops-runtime header strong, .v2-ops-sources header strong { font-size: 11px; }.v2-ops-links header span, .v2-ops-sources header span { color: var(--v2-muted); font-size: 8px; }
.v2-ops-links article { display: grid; min-height: 46px; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #eef2f7; padding: 7px 13px; }.v2-ops-links article > i, .v2-ops-sources article i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }.v2-ops-links article > i.is-ok, .v2-ops-sources article i.is-ok { background: var(--v2-green); }.v2-ops-links article > i.is-warning, .v2-ops-sources article i.is-warning { background: var(--v2-orange); }.v2-ops-links article > i.is-error, .v2-ops-sources article i.is-error { background: var(--v2-red); }.v2-ops-links article strong { font-size: 9px; }.v2-ops-links article p { margin: 3px 0 0; color: var(--v2-muted); font-size: 8px; }.v2-ops-links article > span { border-radius: 10px; background: #f1f5f9; padding: 3px 7px; color: #64748b; font-size: 8px; }
.v2-ops-runtime dl { margin: 0; padding: 7px 13px; }.v2-ops-runtime dl div { display: flex; min-height: 31px; align-items: center; justify-content: space-between; border-bottom: 1px solid #eef2f7; font-size: 9px; }.v2-ops-runtime dt { color: var(--v2-muted); }.v2-ops-runtime dd { margin: 0; }.v2-ops-clear, .v2-ops-findings { margin: 4px 13px 12px; border-radius: 6px; background: #f1fbf7; padding: 8px; color: #17815d; font-size: 8px; }.v2-ops-findings { background: #fff7ed; color: #b45309; }.v2-ops-findings p { margin: 3px 0; }
.v2-ops-sources > div { display: grid; grid-template-columns: repeat(3,1fr); }.v2-ops-sources article { min-width: 0; padding: 12px 14px; }.v2-ops-sources article + article { border-left: 1px solid var(--v2-border); }.v2-ops-sources article > div { display: flex; align-items: center; gap: 7px; }.v2-ops-sources article strong { font-size: 10px; }.v2-ops-sources article span { margin-left: auto; color: var(--v2-muted); font-size: 8px; }.v2-ops-sources article b { display: block; margin-top: 9px; font-size: 14px; }.v2-ops-sources article p { margin: 6px 0 0; color: #68768a; font-size: 8px; line-height: 1.45; }.v2-ops-sources article em { display: block; margin-top: 7px; color: var(--v2-blue); font-size: 8px; font-style: normal; }.is-ok { color: var(--v2-green) !important; }.is-warning { color: #b87900 !important; }.is-error { color: var(--v2-red) !important; }
.v2-reconcile-center { position: relative; border: 1px solid #cbd8e8; border-radius: 14px; background: #fff; box-shadow: 0 10px 32px rgba(31,53,80,.09); overflow: hidden; }
.v2-reconcile-heading { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e2e9f2; padding: 12px 16px; background: linear-gradient(105deg,#f7fbff 0%,#f2f7ff 58%,#eef5ff 100%); }.v2-reconcile-heading > div { display: grid; gap: 3px; }.v2-reconcile-heading small { color: #557494; font-size: 11px; }.v2-reconcile-heading strong { color: #17283b; font-size: 18px; }.v2-reconcile-heading span { color: #64758a; font-size: 12px; }.v2-reconcile-heading button { display: inline-flex; height: 36px; flex: 0 0 auto; align-items: center; gap: 6px; border: 1px solid #c5d4e5; border-radius: 8px; background: #fff; padding: 0 13px; color: #355272; cursor: pointer; font-size: 12px; }
.v2-reconcile-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-bottom: 1px solid #e3eaf2; }.v2-reconcile-kpis article { position: relative; min-width: 0; padding: 13px 16px; }.v2-reconcile-kpis article + article::before { position: absolute; inset: 13px auto 13px 0; width: 1px; background: #e4ebf3; content: ''; }.v2-reconcile-kpis small { display: block; color: #748398; font-size: 11px; }.v2-reconcile-kpis strong { display: block; margin: 5px 0 2px; color: #17283b; font-size: 22px; line-height: 1.1; }.v2-reconcile-kpis span { color: #8794a6; font-size: 10px; }.v2-reconcile-kpis article.is-active strong { color: #2464c8; }.v2-reconcile-kpis article.is-overdue strong { color: #c2413d; }
.v2-reconcile-layout { position: relative; display: grid; min-height: 480px; grid-template-columns: minmax(0,1fr) 260px; }.v2-reconcile-main { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid #e3eaf2; }.v2-reconcile-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) repeat(3,minmax(130px,auto)); gap: 8px; border-bottom: 1px solid #e7edf4; padding: 10px 12px; }.v2-reconcile-toolbar select, .v2-reconcile-search { height: 36px; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; color: #33465c; font-size: 12px; }.v2-reconcile-toolbar select { min-width: 0; padding: 0 10px; }.v2-reconcile-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; }.v2-reconcile-search svg { color: #71849a; }.v2-reconcile-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #23374e; font: inherit; }
.v2-reconcile-table-wrap { min-height: 360px; flex: 1; overflow: auto; }.v2-reconcile-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }.v2-reconcile-table th { position: sticky; z-index: 1; top: 0; height: 38px; background: #f7f9fc; padding: 0 11px; color: #718095; font-size: 11px; font-weight: 600; text-align: left; }.v2-reconcile-table th:nth-child(1) { width: 72px; }.v2-reconcile-table th:nth-child(2) { width: 27%; }.v2-reconcile-table th:nth-child(3) { width: 19%; }.v2-reconcile-table th:nth-child(4) { width: 15%; }.v2-reconcile-table th:nth-child(5) { width: 21%; }.v2-reconcile-table th:nth-child(6) { width: 112px; }.v2-reconcile-table tbody tr { cursor: pointer; border-top: 1px solid #edf1f6; outline: none; }.v2-reconcile-table tbody tr:hover, .v2-reconcile-table tbody tr:focus-visible { background: #f7fbff; }.v2-reconcile-table tbody tr.is-selected { background: #eef6ff; box-shadow: inset 3px 0 #3478d4; }.v2-reconcile-table td { height: 62px; padding: 8px 11px; vertical-align: middle; }.v2-reconcile-table td strong { display: block; overflow: hidden; color: #263a50; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.v2-reconcile-table td span:not(.v2-reconcile-severity):not(.v2-reconcile-status) { display: block; margin-top: 4px; overflow: hidden; color: #8290a2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.v2-reconcile-severity, .v2-reconcile-status { display: inline-flex; min-height: 24px; align-items: center; border-radius: 999px; padding: 0 8px; font-size: 10px; font-weight: 600; }.v2-reconcile-severity.is-critical { background: #fff0ef; color: #c53c36; }.v2-reconcile-severity.is-major { background: #fff6e5; color: #a96600; }.v2-reconcile-severity.is-minor { background: #eef4fa; color: #60758d; }.v2-reconcile-status { background: #edf3fb; color: #426485; }.v2-reconcile-status.is-pending { background: #fff4df; color: #a45f00; }.v2-reconcile-status.is-confirmed_source_a, .v2-reconcile-status.is-confirmed_source_b { background: #e9f2ff; color: #2464c8; }.v2-reconcile-status.is-recovered, .v2-reconcile-status.is-fixed { background: #eaf8f2; color: #167759; }
.v2-reconcile-empty { margin: 0; padding: 34px 16px; color: #77879a; font-size: 12px; text-align: center; }.v2-reconcile-pagination { display: flex; min-height: 46px; align-items: center; justify-content: space-between; border-top: 1px solid #e6edf4; padding: 7px 12px; color: #728197; font-size: 11px; }.v2-reconcile-pagination div { display: flex; gap: 6px; }.v2-reconcile-pagination button { height: 30px; border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; padding: 0 11px; color: #405870; cursor: pointer; font-size: 11px; }.v2-reconcile-pagination button:disabled { cursor: not-allowed; opacity: .45; }
.v2-reconcile-trend { padding: 12px; background: #fbfcfe; }.v2-reconcile-trend > header { display: grid; gap: 3px; margin-bottom: 10px; }.v2-reconcile-trend header strong { color: #273b51; font-size: 13px; }.v2-reconcile-trend header span, .v2-reconcile-trend > p { color: #8390a2; font-size: 10px; }.v2-reconcile-trend article { display: grid; min-height: 25px; grid-template-columns: 36px minmax(0,1fr) 28px; align-items: center; gap: 7px; }.v2-reconcile-trend time, .v2-reconcile-trend article b { color: #718197; font-size: 9px; font-weight: 500; }.v2-reconcile-trend article > div { position: relative; height: 12px; border-radius: 3px; background: #edf2f7; overflow: hidden; }.v2-reconcile-trend article i { position: absolute; left: 0; height: 4px; }.v2-reconcile-trend article i.is-active { top: 0; background: #4c7fc4; }.v2-reconcile-trend article i.is-new { top: 4px; background: #e2a237; }.v2-reconcile-trend article i.is-recovered { top: 8px; background: #35a37b; }.v2-reconcile-trend > footer { display: flex; gap: 10px; margin-top: 10px; color: #758398; font-size: 9px; }.v2-reconcile-trend footer span { display: inline-flex; align-items: center; gap: 4px; }.v2-reconcile-trend footer i { width: 7px; height: 7px; border-radius: 2px; }.v2-reconcile-trend footer i.is-active { background: #4c7fc4; }.v2-reconcile-trend footer i.is-new { background: #e2a237; }.v2-reconcile-trend footer i.is-recovered { background: #35a37b; }
.v2-reconcile-detail { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(460px,52vw); border-left: 1px solid #c9d7e7; background: #fff; box-shadow: -14px 0 34px rgba(25,48,75,.15); overflow: hidden; }.v2-reconcile-detail > header { display: flex; min-height: 66px; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e3eaf2; padding: 12px 14px; background: #f6f9fd; }.v2-reconcile-detail > header div { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px 8px; }.v2-reconcile-detail > header span { border-radius: 999px; background: #edf2f7; padding: 3px 7px; font-size: 10px; }.v2-reconcile-detail > header span.is-critical { background: #fff0ef; color: #c53c36; }.v2-reconcile-detail > header span.is-major { background: #fff6e5; color: #a96600; }.v2-reconcile-detail > header strong { width: 100%; color: #21364d; font-size: 15px; }.v2-reconcile-detail > header small { color: #738297; font-size: 10px; }.v2-reconcile-detail > header button { border: 0; background: transparent; color: #6f8093; cursor: pointer; font-size: 24px; line-height: 1; }.v2-reconcile-detail-body { height: calc(100% - 66px); padding: 12px 14px 20px; overflow: auto; }.v2-reconcile-identity { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid #e1e8f0; border-radius: 9px; overflow: hidden; }.v2-reconcile-identity div { min-width: 0; padding: 10px; }.v2-reconcile-identity div + div { border-left: 1px solid #e5ebf2; }.v2-reconcile-identity small, .v2-reconcile-identity span { display: block; color: #8491a2; font-size: 9px; }.v2-reconcile-identity strong { display: block; margin: 4px 0; overflow: hidden; color: #2b3e54; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.v2-reconcile-summary { margin: 11px 0; border-radius: 8px; background: #f3f7fb; padding: 10px 12px; color: #4b5e73; font-size: 11px; line-height: 1.55; }
.v2-reconcile-evidence, .v2-reconcile-review, .v2-reconcile-actions { margin-top: 12px; border: 1px solid #e0e7ef; border-radius: 9px; overflow: hidden; }.v2-reconcile-evidence > header, .v2-reconcile-review > header, .v2-reconcile-actions > header { display: flex; min-height: 39px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5ebf2; padding: 0 11px; background: #fafbfd; }.v2-reconcile-evidence header strong, .v2-reconcile-review header strong, .v2-reconcile-actions header strong { color: #34495f; font-size: 11px; }.v2-reconcile-evidence header span, .v2-reconcile-review header span, .v2-reconcile-actions header span { color: #8794a4; font-size: 9px; }.v2-reconcile-evidence dl { margin: 0; }.v2-reconcile-evidence dl div { display: grid; grid-template-columns: 118px minmax(0,1fr); border-top: 1px solid #eef2f6; }.v2-reconcile-evidence dl div:first-child { border-top: 0; }.v2-reconcile-evidence dt { padding: 9px 10px; background: #fafbfd; color: #708095; font-size: 9px; }.v2-reconcile-evidence dd { min-width: 0; margin: 0; padding: 8px 10px; }.v2-reconcile-evidence pre { margin: 0; overflow: auto; color: #30475f; font: 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; word-break: break-word; }
.v2-reconcile-review { padding-bottom: 11px; }.v2-reconcile-review > header { margin-bottom: 9px; }.v2-reconcile-review > label { display: grid; gap: 5px; margin: 8px 11px; color: #66778b; font-size: 10px; }.v2-reconcile-review select, .v2-reconcile-review textarea { border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; padding: 8px 9px; color: #30465d; font: inherit; }.v2-reconcile-review textarea { min-height: 78px; resize: vertical; }.v2-reconcile-review > button { height: 33px; margin: 3px 11px 0; border: 0; border-radius: 7px; background: #316fc3; padding: 0 13px; color: #fff; cursor: pointer; font-size: 11px; }.v2-reconcile-review > button:disabled { cursor: not-allowed; opacity: .5; }.v2-reconcile-review > p { margin: 7px 11px 0; color: #c23c37; font-size: 10px; }
.v2-reconcile-actions > ol { margin: 0; padding: 9px 12px; list-style: none; }.v2-reconcile-actions li { display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 8px; padding: 7px 0; }.v2-reconcile-actions li > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #5d83b5; }.v2-reconcile-actions li strong { color: #354b61; font-size: 10px; }.v2-reconcile-actions li p { margin: 3px 0; color: #627489; font-size: 10px; line-height: 1.4; }.v2-reconcile-actions li span { color: #8b97a7; font-size: 9px; }.v2-reconcile-actions > p { margin: 0; padding: 14px; color: #8290a1; font-size: 10px; }
.v2-source-diagnostic { position: relative; border: 1px solid #cfdbea; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(31,53,80,.08); overflow: hidden; }.v2-source-diagnostic > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5ebf3; padding: 9px 14px; background: linear-gradient(100deg,#f8fbff,#f4f8ff); }.v2-source-diagnostic > header div { display: grid; gap: 2px; }.v2-source-diagnostic > header small { color: #547297; font-size: 9px; }.v2-source-diagnostic > header strong { font-size: 15px; }.v2-source-diagnostic > header span { color: var(--v2-muted); font-size: 9px; }.v2-source-diagnostic > header button, .v2-source-search > button, .v2-source-policy-cell button { display: inline-flex; height: 32px; align-items: center; justify-content: center; gap: 5px; border: 1px solid #cbd8e8; border-radius: 7px; background: #fff; padding: 0 12px; color: #355272; cursor: pointer; font-size: 10px; }.v2-source-diagnostic button:disabled { cursor: not-allowed; opacity: .5; }
.v2-source-search { position: relative; display: flex; gap: 8px; padding: 12px 14px; }.v2-source-search > label { display: flex; min-width: 280px; flex: 1; height: 36px; align-items: center; gap: 8px; border: 1px solid #cbd8e8; border-radius: 8px; padding: 0 11px; color: #6c7c91; }.v2-source-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 11px; }.v2-source-search > button { height: 36px; border-color: #2f6fe4; background: #2f6fe4; color: #fff; }.v2-source-candidates { position: absolute; z-index: 12; top: 51px; right: 114px; left: 14px; max-height: 310px; overflow: auto; border: 1px solid #d6e0ec; border-radius: 9px; background: #fff; box-shadow: 0 12px 32px rgba(31,53,80,.18); }.v2-source-candidates > button { display: grid; width: 100%; grid-template-columns: 150px minmax(180px,1fr) auto; gap: 10px; border: 0; border-bottom: 1px solid #edf1f6; background: #fff; padding: 10px 12px; text-align: left; cursor: pointer; }.v2-source-candidates > button:hover { background: #f5f9ff; }.v2-source-candidates strong { font-size: 11px; }.v2-source-candidates span, .v2-source-candidates em, .v2-source-candidates p { color: var(--v2-muted); font-size: 9px; font-style: normal; }.v2-source-candidates p { margin: 0; padding: 14px; }.v2-source-candidates footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e5ebf3; background: #fff; padding: 7px 10px; }.v2-source-candidates footer div { display: flex; gap: 5px; }.v2-source-candidates footer button { border: 1px solid #d2dce8; border-radius: 5px; background: #fff; padding: 4px 8px; color: #52657d; font-size: 8px; }
.v2-source-empty { display: grid; min-height: 110px; place-content: center; gap: 6px; color: var(--v2-muted); text-align: center; }.v2-source-empty strong { color: #42556e; font-size: 13px; }.v2-source-empty span { font-size: 10px; }.v2-source-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid #e7edf4; background: #fafcff; }.v2-source-summary article { min-width: 0; padding: 11px 14px; }.v2-source-summary article + article { border-left: 1px solid #e7edf4; }.v2-source-summary small, .v2-source-summary span { display: block; overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.v2-source-summary strong { display: block; margin: 5px 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.v2-source-recommendation { margin: 12px 14px 8px; border-left: 3px solid #2f6fe4; border-radius: 6px; background: #f3f7ff; padding: 9px 11px; }.v2-source-recommendation strong { font-size: 10px; }.v2-source-recommendation p { margin: 4px 0; color: #405774; font-size: 9px; line-height: 1.5; }.v2-source-recommendation span, .v2-source-readonly { color: #728299; font-size: 8px; }.v2-source-readonly { margin: 0 14px 8px; border-radius: 6px; background: #fff8e8; padding: 7px 9px; color: #966500; }
.v2-source-table-wrap { margin: 0 14px 12px; overflow: auto; border: 1px solid #dfe7f0; border-radius: 8px; }.v2-source-table { width: 100%; min-width: 1320px; border-collapse: collapse; table-layout: fixed; }.v2-source-table th { height: 34px; background: #f6f8fb; color: #63748a; font-size: 8px; text-align: left; }.v2-source-table th, .v2-source-table td { border-bottom: 1px solid #e8edf3; padding: 7px 9px; vertical-align: top; }.v2-source-table tbody tr:last-child td { border-bottom: 0; }.v2-source-table tbody tr.is-recommended { background: #f4fbf8; }.v2-source-table td { color: #3e5067; font-size: 9px; line-height: 1.45; }.v2-source-table td > strong, .v2-source-table td > span { display: block; }.v2-source-table td > span { margin-top: 3px; color: var(--v2-muted); }.v2-source-table td > i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #9aa7b8; }.v2-source-table td > i.is-online { background: var(--v2-green); }.v2-source-table td > i.is-offline { background: #94a3b8; }.v2-source-reason span { max-width: 230px; white-space: normal !important; }.v2-source-policy-cell { display: grid; grid-template-columns: auto 64px; gap: 5px; }.v2-source-policy-cell label { display: flex; align-items: center; gap: 4px; }.v2-source-policy-cell input[type=number], .v2-source-policy-cell input[type=text], .v2-source-policy-cell > input:not([type]) { min-width: 0; height: 26px; border: 1px solid #ccd7e5; border-radius: 5px; padding: 0 6px; font-size: 9px; }.v2-source-policy-cell > input:last-of-type { grid-column: 1 / -1; }.v2-source-policy-cell button { grid-column: 1 / -1; height: 27px; }.v2-source-policy-cell em { grid-column: 1 / -1; color: var(--v2-red); font-size: 8px; font-style: normal; }.v2-source-audit { margin: 0 14px 14px; border: 1px solid #e0e7f0; border-radius: 8px; }.v2-source-audit > header { display: flex; height: 34px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7edf4; padding: 0 10px; }.v2-source-audit > header strong { font-size: 10px; }.v2-source-audit > header span, .v2-source-audit > p { color: var(--v2-muted); font-size: 8px; }.v2-source-audit > p { margin: 0; padding: 12px; }.v2-source-audit ol { max-height: 170px; margin: 0; overflow: auto; padding: 0; list-style: none; }.v2-source-audit li { display: grid; min-height: 34px; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #edf1f6; padding: 5px 10px; font-size: 9px; }.v2-source-audit li em { color: var(--v2-muted); font-size: 8px; font-style: normal; }
.v2-vehicle-search-page, .v2-not-found { display: grid; min-height: 100%; place-items: center; padding: 28px; }
.v2-vehicle-search-card { width: min(660px, 100%); border: 1px solid var(--v2-border); border-radius: 16px; background: #fff; padding: 54px; text-align: center; box-shadow: var(--v2-shadow); }
.v2-search-hero-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 18px; place-items: center; border-radius: 15px; background: var(--v2-blue-soft); color: var(--v2-blue); }
.v2-vehicle-search-card h2, .v2-not-found h2 { margin: 0; font-size: 22px; }
.v2-vehicle-search-card > p, .v2-not-found p { margin: 10px auto 26px; color: var(--v2-muted); font-size: 13px; line-height: 1.7; }
.v2-vehicle-search-card form { display: flex; height: 46px; align-items: center; gap: 10px; border: 1px solid #cfd9e7; border-radius: 9px; padding-left: 14px; color: #8a98aa; }
.v2-vehicle-search-card form:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 4px rgba(18,104,243,.08); }
.v2-vehicle-search-card input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--v2-text); }
.v2-vehicle-search-card button, .v2-not-found a { display: inline-flex; height: 46px; align-items: center; gap: 7px; border: 0; border-radius: 8px; background: var(--v2-blue); padding: 0 20px; color: #fff; text-decoration: none; cursor: pointer; font-weight: 700; }
.v2-vehicle-search-card .v2-profile-sync-open { height: 32px; margin-top: 16px; border: 1px solid #d5e3f7; background: #f6f9fe; color: var(--v2-blue); font-size: 10px; font-weight: 600; }
.v2-vehicle-search-page.has-sync-panel { align-content: center; gap: 14px; overflow: auto; }
.v2-profile-sync-panel { width: min(900px, 100%); border: 1px solid var(--v2-border); border-radius: 12px; background: #fff; padding: 16px; box-shadow: var(--v2-shadow); }
.v2-profile-sync-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.v2-profile-sync-panel > header strong { font-size: 14px; }.v2-profile-sync-panel > header p { margin: 5px 0 0; color: var(--v2-muted); font-size: 9px; }.v2-profile-sync-panel > header button { border: 0; background: transparent; color: var(--v2-muted); cursor: pointer; font-size: 9px; }
.v2-profile-sync-fields { display: grid; grid-template-columns: 1fr 1fr .8fr 1.2fr; gap: 10px; margin-top: 14px; }.v2-profile-sync-fields label { display: grid; min-width: 0; gap: 5px; color: var(--v2-muted); font-size: 9px; }.v2-profile-sync-fields input, .v2-profile-sync-fields select { min-width: 0; height: 34px; border: 1px solid var(--v2-border); border-radius: 6px; background: #fff; padding: 0 9px; color: var(--v2-text); font-size: 10px; }.v2-profile-sync-fields input[type="file"] { padding: 6px; }
.v2-profile-sync-format, .v2-profile-sync-file, .v2-profile-sync-error, .v2-profile-sync-warning { margin: 10px 0 0; color: var(--v2-muted); font-size: 9px; line-height: 1.5; }.v2-profile-sync-format code { overflow-wrap: anywhere; color: #53657c; }.v2-profile-sync-file { color: var(--v2-blue); }.v2-profile-sync-error { color: var(--v2-red); }.v2-profile-sync-warning { border-radius: 6px; background: #fff7ed; padding: 7px 9px; color: #b45309; }
.v2-profile-sync-result { margin-top: 12px; border: 1px solid #e4ebf4; border-radius: 8px; background: #fbfcfe; padding: 10px; }.v2-profile-sync-result > div { display: grid; grid-template-columns: repeat(6,1fr); }.v2-profile-sync-result > div span { color: var(--v2-muted); text-align: center; font-size: 8px; }.v2-profile-sync-result > div strong { display: block; margin-top: 4px; color: var(--v2-text); font-size: 14px; }.v2-profile-sync-result > p { margin: 8px 0 0; color: var(--v2-green); font-size: 9px; }.v2-profile-sync-result ul { max-height: 104px; margin: 9px 0 0; overflow: auto; border-top: 1px solid #e7edf5; padding: 5px 0 0; list-style: none; }.v2-profile-sync-result li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 2px; font-size: 8px; }.v2-profile-sync-result li span { color: var(--v2-muted); }
.v2-profile-sync-panel > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }.v2-profile-sync-panel > footer button { height: 32px; border: 1px solid var(--v2-border); border-radius: 6px; background: #fff; padding: 0 12px; color: var(--v2-text); cursor: pointer; font-size: 9px; }.v2-profile-sync-panel > footer button.is-primary { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }.v2-profile-sync-panel > footer button:disabled { cursor: not-allowed; opacity: .5; }
.v2-not-found { align-content: center; text-align: center; color: var(--v2-muted); }
.v2-not-found a { height: 38px; margin: 0 auto; }
.v2-page-error { padding: 18px; }
.v2-vehicle-record-page { display: flex; min-height: 100%; flex-direction: column; gap: 12px; padding: 12px 16px 16px; }
.v2-identity-band { display: grid; min-height: 96px; grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.25fr) auto; align-items: center; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-identity-primary, .v2-identity-meta, .v2-identity-actions { min-width: 0; padding: 15px 18px; }
.v2-identity-primary { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 14px; }
.v2-plate { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; border: 1px solid #b9d2fb; border-radius: 7px; background: var(--v2-blue-soft); padding: 0 12px; color: var(--v2-blue); font-size: 16px; font-weight: 800; }
.v2-online-label { display: inline-flex; align-items: center; gap: 6px; color: #8793a5; font-size: 11px; font-weight: 700; }
.v2-online-label i { width: 7px; height: 7px; border-radius: 50%; background: #aab3c0; }
.v2-online-label.is-online { color: var(--v2-green); }
.v2-online-label.is-online i { background: var(--v2-green); }
.v2-identity-primary small { grid-row: 2; color: var(--v2-muted); font-size: 9px; }
.v2-identity-primary b { grid-row: 2; overflow: hidden; color: #445166; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.v2-identity-primary button { grid-row: 2; border: 0; background: transparent; color: #718096; cursor: pointer; }
.v2-identity-meta { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; align-items: center; border-right: 1px solid var(--v2-border); border-left: 1px solid var(--v2-border); }
.v2-identity-meta > div + div { border-left: 1px solid var(--v2-border); padding-left: 22px; }
.v2-identity-meta small { color: var(--v2-muted); font-size: 10px; }
.v2-identity-meta p { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.v2-identity-meta p span, .v2-telemetry-card footer span { border: 1px solid #dde5ef; border-radius: 5px; background: #f7f9fc; padding: 3px 7px; color: #526176; font-size: 9px; }
.v2-identity-meta strong { display: block; margin-top: 8px; color: #445166; font-size: 11px; font-variant-numeric: tabular-nums; }
.v2-identity-actions { display: flex; gap: 8px; }
.v2-identity-actions a { display: inline-flex; height: 38px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 14px; color: #536177; text-decoration: none; white-space: nowrap; font-size: 10px; font-weight: 700; }
.v2-identity-actions a:hover { border-color: #a8c7f9; color: var(--v2-blue); }
.v2-record-grid { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(520px, 1.75fr) minmax(300px, 1fr); grid-template-rows: minmax(300px, 1.05fr) minmax(270px, .95fr); gap: 12px; }
.v2-record-card, .v2-single-map-card { min-width: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-record-card > header { display: flex; height: 40px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 14px; }
.v2-record-card > header strong { font-size: 12px; }
.v2-record-card > header span, .v2-record-card > header a { color: var(--v2-muted); text-decoration: none; font-size: 9px; }
.v2-single-map-card { position: relative; display: flex; min-height: 300px; flex-direction: column; }
.v2-single-map-card .v2-fleet-map { flex: 1; }
.v2-single-map-card .v2-map-legend { display: none; }
.v2-single-map-card footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px; color: #64748b; font-size: 9px; }
.v2-single-map-card footer span { display: inline-flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-map-source-link { display: inline-flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; border: 0; background: transparent; padding: 0; color: #64748b; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
.v2-single-map-card footer time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-archive-card { grid-column: 2; grid-row: 2; }
.v2-record-list { margin: 0; padding: 8px 14px 4px; }
.v2-record-list > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); padding: 6px 0; font-size: 10px; }
.v2-record-list dt { color: var(--v2-muted); }
.v2-record-list dd { margin: 0; overflow-wrap: anywhere; }
.v2-record-list dd i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #aab3c0; }
.v2-record-list dd i.is-online { background: var(--v2-green); }
.v2-record-note { margin: 3px 14px 12px; border-radius: 6px; background: #f7f9fc; padding: 8px 10px; color: #79869a; font-size: 8px; line-height: 1.5; }
.v2-profile-heading { display: flex; align-items: center; gap: 8px; }.v2-profile-heading button { border: 0; border-radius: 5px; background: var(--v2-blue-soft); padding: 4px 7px; color: var(--v2-blue); font-size: 9px; cursor: pointer; }.v2-profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; padding: 10px 14px 12px; }.v2-profile-form label { display: grid; gap: 3px; color: var(--v2-muted); font-size: 8px; }.v2-profile-form input, .v2-profile-form select { min-width: 0; height: 29px; border: 1px solid var(--v2-border); border-radius: 5px; background: #fff; padding: 0 7px; color: var(--v2-text); font-size: 9px; }.v2-profile-form > p { grid-column: 1 / -1; margin: 0; color: var(--v2-red); font-size: 8px; }.v2-profile-form footer { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 7px; }.v2-profile-form footer button { height: 28px; border: 1px solid var(--v2-border); border-radius: 5px; background: #fff; padding: 0 10px; font-size: 9px; cursor: pointer; }.v2-profile-form footer button.is-primary { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.v2-live-card > header span { display: inline-flex; align-items: center; gap: 5px; }
.v2-live-card > header span > i { width: 7px; height: 7px; border-radius: 50%; background: #aab3c0; }
.v2-live-card > header span > i.is-online { background: var(--v2-green); box-shadow: 0 0 0 4px rgba(26,160,109,.1); }
.v2-live-overview { border-color: #cfddf0; background: linear-gradient(135deg,#fff 0%,#fbfdff 72%,#f3f8ff 100%); }
.v2-live-overview .v2-live-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.v2-live-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.v2-live-grid > div { min-width: 0; padding: 12px 14px; }
.v2-live-grid > div + div { border-left: 1px solid var(--v2-border); }
.v2-live-grid > div:nth-child(4) { border-left: 0; }
.v2-live-grid > div:nth-child(n+4) { border-top: 1px solid var(--v2-border); }
.v2-live-overview .v2-live-grid > div:nth-child(4) { border-left: 1px solid var(--v2-border); }
.v2-live-overview .v2-live-grid > div:nth-child(n+4) { border-top: 0; }
.v2-live-grid small { display: block; color: var(--v2-muted); font-size: 9px; }
.v2-live-grid strong { display: block; margin-top: 5px; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-live-grid strong.is-text { font-size: 14px; }
.v2-live-source-link { margin-top: 5px; font-size: 17px; font-variant-numeric: tabular-nums; }
.v2-live-grid em { margin-left: 3px; color: var(--v2-muted); font-size: 8px; font-style: normal; font-weight: 500; }
.v2-current-location { display: grid; min-height: 52px; grid-template-columns: minmax(280px,.8fr) minmax(420px,1.2fr); border-top: 1px solid var(--v2-border); }
.v2-current-location > span { display: grid; min-width: 0; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 8px; padding: 8px 14px; color: #64748b; }
.v2-current-location > span + span { border-left: 1px solid var(--v2-border); }
.v2-current-location small { color: var(--v2-muted); font-size: 9px; white-space: nowrap; }
.v2-current-location strong { min-width: 0; overflow: hidden; color: #3d4c62; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-current-location button { width: max-content; max-width: 100%; height: 28px; overflow: hidden; border: 1px solid #bfd4f6; border-radius: 6px; background: #f3f7ff; padding: 0 9px; color: var(--v2-blue); cursor: pointer; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.v2-current-location button.is-error { border-color: #edb5b0; background: #fff; color: var(--v2-red); }
.v2-current-address { grid-template-columns: auto minmax(0,1fr) auto !important; }
.v2-telemetry-card { grid-column: 1; grid-row: 2; }
.v2-telemetry-card nav { display: flex; height: 42px; align-items: stretch; border-bottom: 1px solid var(--v2-border); padding: 0 8px; overflow-x: auto; }
.v2-telemetry-card nav button { position: relative; min-width: 78px; border: 0; background: transparent; color: #64748b; cursor: pointer; font-size: 10px; }
.v2-telemetry-card nav button.is-active { color: var(--v2-blue); font-weight: 700; }
.v2-telemetry-card nav button.is-active::after { position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; border-radius: 2px; background: var(--v2-blue); content: ''; }
.v2-telemetry-card nav button span { margin-left: 3px; color: #9aa6b7; font-size: 8px; }
.v2-telemetry-list { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 14px; }
.v2-telemetry-list > div { display: grid; min-width: 0; grid-template-columns: minmax(130px, 1fr) auto 58px; align-items: center; gap: 10px; border-bottom: 1px solid #eef2f7; padding: 9px 8px; font-size: 10px; }
.v2-telemetry-list > div:nth-child(odd) { border-right: 1px solid var(--v2-border); }
.v2-telemetry-list > div > span { min-width: 0; color: #556276; }
.v2-telemetry-list > div > span small { display: block; margin-top: 3px; overflow: hidden; color: #a0aaba; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.v2-telemetry-list strong { font-size: 10px; font-variant-numeric: tabular-nums; }
.v2-telemetry-list strong em { color: #8a96a8; font-size: 8px; font-style: normal; font-weight: 500; }
.v2-telemetry-list time { display: grid; justify-items: end; gap: 3px; color: #8a96a8; font-size: 8px; text-align: right; }
.v2-telemetry-list time i { border-radius: 8px; background: #eef2f7; padding: 1px 5px; color: #778397; font-size: 7px; font-style: normal; }
.v2-telemetry-list time i.is-good { background: #e8f8f1; color: #16845b; }
.v2-telemetry-list time i.is-stale { background: #fff6df; color: #a66b00; }
.v2-telemetry-list time i.is-warning { background: #fff0f0; color: var(--v2-red); }
.v2-telemetry-list .v2-empty-compact { display: flex; min-height: 94px; grid-column: 1 / -1; justify-content: center; border: 0; }
.v2-telemetry-list .v2-empty-compact.is-error { color: var(--v2-red); }
.v2-telemetry-card footer { display: flex; align-items: center; gap: 6px; margin: 8px 10px 10px; border: 1px solid var(--v2-border); border-radius: 7px; padding: 8px 10px; color: #718096; font-size: 9px; }
.v2-telemetry-card footer b { color: #526176; font-size: 9px; }
.v2-telemetry-card footer small { margin-left: auto; color: #8a96a8; font-size: 8px; }
.v2-events-card { grid-column: 2; grid-row: 1; }
.v2-events-card > header a { color: var(--v2-blue); }
.v2-event-list { padding: 2px 14px 8px; }
.v2-event-row { position: relative; display: grid; min-height: 40px; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.v2-event-row:not(:last-child)::after { position: absolute; top: 31px; bottom: -9px; left: 10px; width: 1px; background: var(--v2-border); content: ''; }
.v2-event-icon { z-index: 1; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #eef3f8; color: #8492a6; }
.v2-event-row.is-success .v2-event-icon { background: #e8f8f1; color: var(--v2-green); }
.v2-event-row.is-error .v2-event-icon { background: #fff0f0; color: var(--v2-red); }
.v2-event-row.is-warning .v2-event-icon { background: #fff7e5; color: var(--v2-orange); }
.v2-event-row strong { font-size: 9px; }
.v2-event-row p { margin: 2px 0 0; overflow: hidden; color: #7f8b9d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.v2-event-row time { color: #8d99aa; font-size: 8px; font-variant-numeric: tabular-nums; }
.v2-empty-compact { display: flex; min-height: 80px; align-items: center; color: var(--v2-muted); font-size: 10px; }
.v2-track-page { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 12px; overflow: hidden; padding: 12px 16px 16px; }
.v2-track-toolbar { display: grid; flex: 0 0 auto; grid-template-columns: minmax(210px, 1.15fr) minmax(170px, .85fr) minmax(170px, .85fr) minmax(140px, .65fr) auto auto; align-items: end; gap: 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 11px 13px; box-shadow: var(--v2-shadow); }
.v2-track-toolbar label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: var(--v2-muted); font-size: 9px; }
.v2-track-toolbar label > div { display: flex; height: 36px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 10px; color: #8996a8; }
.v2-track-toolbar input, .v2-track-toolbar select { min-width: 0; height: 36px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 9px; color: #435168; outline: 0; font-size: 10px; }
.v2-track-toolbar label > div input { height: auto; flex: 1; border: 0; padding: 0; }
.v2-track-toolbar input:focus, .v2-track-toolbar select:focus, .v2-track-toolbar label > div:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-track-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.v2-track-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(540px, 1fr) 330px; gap: 12px; }
.v2-track-main { display: grid; min-width: 0; min-height: 0; grid-template-rows: 34px minmax(280px, 1fr) 58px 108px; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-track-coverage { display: flex; min-width: 0; align-items: center; gap: 10px; border-bottom: 1px solid var(--v2-border); padding: 0 13px; background: #f8fbff; color: #617086; font-size: 8px; }
.v2-track-coverage::before { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--v2-green); content: ''; }
.v2-track-coverage.is-limited { background: #fff8ed; color: #8b5b19; }
.v2-track-coverage.is-limited::before { background: var(--v2-orange); }
.v2-track-coverage.is-empty::before { background: #9aa7b8; }
.v2-track-coverage strong { color: inherit; font-size: 9px; white-space: nowrap; }
.v2-track-coverage span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-track-coverage em { margin-left: auto; color: inherit; font-style: normal; white-space: nowrap; }
.v2-track-canvas-wrap { position: relative; min-height: 0; overflow: hidden; }
.v2-track-map, .v2-track-map-canvas { position: absolute; inset: 0; }
.v2-track-loading { position: absolute; z-index: 20; top: 12px; left: 50%; display: flex; height: 32px; align-items: center; gap: 7px; transform: translateX(-50%); border: 1px solid var(--v2-border); border-radius: 7px; background: rgba(255,255,255,.94); padding: 0 12px; color: #637083; box-shadow: var(--v2-shadow); font-size: 9px; }
.v2-track-map-legend { position: absolute; right: 14px; bottom: 12px; display: flex; height: 32px; align-items: center; gap: 12px; border: 1px solid rgba(220,228,239,.9); border-radius: 7px; background: rgba(255,255,255,.92); padding: 0 11px; color: #637083; box-shadow: 0 7px 18px rgba(21,32,51,.08); backdrop-filter: blur(8px); font-size: 8px; }
.v2-track-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.v2-track-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-blue); }
.v2-track-map-legend i.is-start { background: var(--v2-green); }
.v2-track-map-legend i.is-end { background: var(--v2-red); }
.v2-track-map-legend b { margin-left: 3px; font-weight: 600; }
.v2-track-marker { display: grid; width: 24px; height: 24px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--v2-blue); color: #fff; box-shadow: 0 3px 10px rgba(21,32,51,.25); font-size: 8px; font-weight: 800; }
.v2-track-marker.is-start { background: var(--v2-green); }
.v2-track-marker.is-end { background: var(--v2-red); }
.v2-track-marker.is-event { width: 21px; height: 21px; border-width: 2px; }
.v2-track-current-marker { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid rgba(18,104,243,.22); border-radius: 50%; background: rgba(18,104,243,.15); box-shadow: 0 0 0 6px rgba(18,104,243,.08); }
.v2-track-current-marker span { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--v2-blue); box-shadow: 0 2px 7px rgba(18,104,243,.45); }
.v2-track-empty { display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; color: #8b98aa; text-align: center; }
.v2-track-empty strong { margin-top: 10px; color: #4e5b6f; font-size: 13px; }
.v2-track-empty p { margin: 6px 0 0; font-size: 9px; }
.v2-track-timeline { display: grid; min-width: 0; grid-template-columns: 142px minmax(0, 1fr); align-items: center; gap: 10px; border-top: 1px solid var(--v2-border); border-bottom: 1px solid var(--v2-border); padding: 7px 13px; color: #657286; font-size: 8px; }
.v2-track-timeline header { display: flex; flex-direction: column; gap: 3px; }
.v2-track-timeline header strong { color: #3f4e64; font-size: 9px; }
.v2-track-timeline header span { color: #8793a5; }
.v2-track-timeline > div { display: flex; min-width: 0; height: 24px; overflow: hidden; border-radius: 5px; background: #edf2f7; }
.v2-track-timeline button { display: flex; min-width: 8px; flex: 1; align-items: center; justify-content: center; gap: 4px; overflow: hidden; border: 0; border-right: 1px solid rgba(255,255,255,.8); background: #dff3e8; padding: 0 4px; color: #26734d; cursor: pointer; }
.v2-track-timeline button:hover { filter: brightness(.96); }
.v2-track-timeline button.is-stopped { background: #fff0cf; color: #92600d; }
.v2-track-timeline button.is-gap { background: #fde4e4; color: #a53b3b; }
.v2-track-timeline button i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.v2-track-timeline button span { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.v2-track-timeline > em { grid-column: 2; margin-top: -5px; color: #9a6b20; font-size: 7px; font-style: normal; }
.v2-track-timeline.is-empty { display: flex; justify-content: center; color: #8996a8; }
.v2-track-playback { display: grid; grid-template-columns: 220px minmax(230px, 1fr) minmax(320px, 1.3fr); align-items: center; min-width: 0; padding: 10px 13px; }
.v2-play-controls { min-width: 0; }
.v2-play-controls small { display: block; margin-bottom: 6px; color: #64748b; font-size: 9px; }
.v2-play-controls p { display: flex; gap: 6px; margin: 0; }
.v2-play-controls button, .v2-play-controls select { display: grid; width: 34px; height: 32px; place-items: center; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; color: #536177; cursor: pointer; }
.v2-play-controls button:first-child { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.v2-play-controls button:disabled { opacity: .35; cursor: not-allowed; }
.v2-play-controls select { display: block; width: 55px; padding: 0 7px; font-size: 9px; }
.v2-play-progress { min-width: 0; border-left: 1px solid var(--v2-border); padding: 0 18px; }
.v2-play-progress header { display: flex; justify-content: space-between; color: #7f8b9d; font-size: 8px; }
.v2-play-progress header strong { color: #48566b; font-size: 10px; }
.v2-play-progress input { width: 100%; height: 4px; margin: 10px 0 6px; accent-color: var(--v2-blue); cursor: pointer; }
.v2-play-progress footer { color: #738095; font-size: 8px; }
.v2-current-metrics { display: grid; min-width: 0; grid-template-columns: .7fr .9fr 1.6fr .8fr; margin: 0; border-left: 1px solid var(--v2-border); }
.v2-current-metrics > div { min-width: 0; padding: 4px 11px; }
.v2-current-metrics > div + div { border-left: 1px solid var(--v2-border); }
.v2-current-metrics dt { color: #8290a3; font-size: 8px; }
.v2-current-metrics dd { margin: 7px 0 0; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-current-metrics em { margin-left: 3px; color: #8390a2; font-size: 7px; font-style: normal; font-weight: 500; }
.v2-track-inspector { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.v2-track-inspector > section, .v2-track-inspector.is-empty { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-track-inspector > section + section { margin-top: 10px; }
.v2-track-inspector section > header { display: flex; height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 13px; }
.v2-track-inspector section > header strong { font-size: 11px; }
.v2-track-inspector section > header span, .v2-track-inspector section > header b { color: #8491a3; font-size: 8px; font-weight: 500; }
.v2-track-vehicle { display: flex; align-items: center; gap: 10px; padding: 13px; }
.v2-track-vehicle > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 7px; background: var(--v2-blue-soft); color: var(--v2-blue); }
.v2-track-vehicle > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.v2-track-vehicle strong { font-size: 13px; }
.v2-track-vehicle small { overflow: hidden; color: #778498; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.v2-track-summary { margin: 0; padding: 8px 13px; }
.v2-track-summary > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); padding: 5px 0; font-size: 9px; }
.v2-track-summary dt { color: #8190a4; }
.v2-track-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.v2-track-sources > div { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 13px; }
.v2-track-sources > div span { display: flex; min-width: 128px; flex: 1; flex-direction: column; gap: 3px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; padding: 7px 8px; }
.v2-track-sources > div strong { font-size: 9px; }
.v2-track-sources > div small { color: #8390a2; font-size: 7px; }
.v2-track-sources > p { margin: 0 13px 10px; border-radius: 5px; background: #fff7ed; padding: 7px 8px; color: #a16207; font-size: 8px; line-height: 1.5; }
.v2-track-quality > p { margin: 0 13px 10px; border-radius: 5px; background: #f1f8f4; padding: 7px 8px; color: #3d7356; font-size: 8px; line-height: 1.5; }
.v2-track-quality.is-warning > p { background: #fff7ed; color: #9a620e; }
.v2-track-events > div { padding: 3px 11px 8px; }
.v2-track-events button { display: grid; width: 100%; min-height: 36px; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; background: #fff; padding: 3px 0; text-align: left; cursor: pointer; }
.v2-track-events button:hover { background: #f8fbff; }
.v2-track-events button > i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--v2-blue); color: #fff; font-size: 7px; font-style: normal; font-weight: 800; }
.v2-track-events button > i.is-start { background: var(--v2-green); }
.v2-track-events button > i.is-end { background: var(--v2-red); }
.v2-track-events button > i.is-warning { background: var(--v2-orange); }
.v2-track-events button > span { display: flex; min-width: 0; justify-content: space-between; gap: 8px; }
.v2-track-events button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.v2-track-events button small { color: #8491a3; font-size: 8px; }
.v2-track-events button em { color: #718096; font-size: 8px; font-style: normal; }
.v2-track-inspector.is-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #78869a; text-align: center; }
.v2-track-inspector.is-empty strong { color: #4c596d; font-size: 12px; }
.v2-track-inspector.is-empty p { max-width: 220px; margin: 7px 0 0; font-size: 9px; line-height: 1.6; }
.v2-history-page { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 10px; overflow: hidden; padding: 12px 16px 16px; }
.v2-history-toolbar { display: grid; flex: 0 0 auto; grid-template-columns: minmax(230px, 1.1fr) minmax(350px, 1.5fr) 120px 130px auto auto auto; align-items: end; gap: 8px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 10px 12px; box-shadow: var(--v2-shadow); }
.v2-history-toolbar label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--v2-muted); font-size: 8px; }
.v2-history-toolbar label > div { display: flex; height: 34px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 9px; color: #8996a8; }
.v2-history-toolbar input, .v2-history-toolbar select { min-width: 0; height: 34px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 8px; color: #435168; outline: 0; font-size: 9px; }
.v2-history-toolbar label > div input { height: auto; flex: 1; border: 0; padding: 0; }
.v2-history-toolbar input:focus, .v2-history-toolbar select:focus, .v2-history-toolbar label > div:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-history-range { min-width: 0; margin: 0; border: 0; padding: 0; }
.v2-history-range legend { margin-bottom: 5px; padding: 0; color: var(--v2-muted); font-size: 8px; }
.v2-history-range > div { display: grid; height: 34px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; }
.v2-history-range > div:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-history-range > div input { width: 100%; height: 32px; border: 0; border-radius: 0; padding: 0 8px; box-shadow: none; }
.v2-history-range > div span { color: #8794a5; font-size: 8px; }
.v2-history-toolbar button { height: 34px; padding: 0 11px; white-space: nowrap; }
.v2-history-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.v2-history-metrics { display: flex; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 7px; overflow-x: auto; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 6px 11px; box-shadow: var(--v2-shadow); }
.v2-history-metrics > strong { margin-right: 4px; white-space: nowrap; font-size: 10px; }
.v2-history-metrics button { display: inline-flex; height: 27px; flex: 0 0 auto; align-items: center; gap: 6px; border: 1px solid #dfe6ef; border-radius: 6px; background: #fff; padding: 0 9px; color: #657286; cursor: pointer; font-size: 8px; }
.v2-history-metrics button i { width: 6px; height: 6px; border: 1px solid #9aa6b7; border-radius: 50%; }
.v2-history-metrics button.is-active { border-color: #b8d1fa; background: var(--v2-blue-soft); color: var(--v2-blue); }
.v2-history-metrics button.is-active i { border-color: var(--v2-blue); background: var(--v2-blue); }
.v2-history-metrics > span { color: var(--v2-muted); font-size: 8px; }
.v2-history-metrics > button.v2-history-metrics-manage { margin-left: auto; border-color: #cddcf0; color: #526987; font-weight: 700; }
.v2-history-metrics > button.v2-history-metrics-manage:disabled { opacity: .4; cursor: not-allowed; }
.v2-history-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(660px, 1fr) 310px; gap: 10px; }
.v2-history-main { display: grid; min-width: 0; min-height: 0; grid-template-rows: 58px 205px minmax(260px, 1fr); gap: 9px; }
.v2-history-summary { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-history-summary > div { position: relative; display: flex; min-width: 0; justify-content: center; flex-direction: column; padding: 0 16px; }
.v2-history-summary > div + div::before { position: absolute; inset: 12px auto 12px 0; width: 1px; background: var(--v2-border); content: ''; }
.v2-history-summary small { color: var(--v2-muted); font-size: 8px; }
.v2-history-summary strong { margin-top: 5px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.v2-history-trend { display: flex; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-history-trend > header { display: flex; min-height: 37px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 12px; }
.v2-history-trend > header strong { font-size: 10px; }
.v2-history-trend > header div { display: flex; gap: 14px; color: #657286; font-size: 8px; }
.v2-history-trend > header span { display: inline-flex; align-items: center; gap: 5px; }
.v2-history-trend > header i { width: 14px; height: 2px; border-radius: 2px; }
.v2-history-trend-panels { display: grid; min-height: 0; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: auto; padding: 8px 10px 5px; }
.v2-history-trend-panels article { min-width: 0; overflow: hidden; border: 1px solid #e6ebf2; border-radius: 6px; }
.v2-history-trend-panels article > header { display: flex; height: 25px; align-items: center; justify-content: space-between; padding: 0 8px; background: #f8fafc; }
.v2-history-trend-panels article > header strong { font-size: 9px; }
.v2-history-trend-panels article > header span { color: var(--v2-muted); font-size: 7px; }
.v2-history-trend-panels svg { display: block; width: 100%; height: 105px; }
.v2-history-trend-panels article > footer { display: flex; min-height: 22px; align-items: center; gap: 5px 10px; overflow-x: auto; padding: 0 8px; color: #657286; font-size: 7px; white-space: nowrap; }
.v2-history-trend-panels article > footer span { display: inline-flex; align-items: center; gap: 4px; }
.v2-history-trend-panels article > footer i { width: 10px; height: 2px; flex: 0 0 auto; }
.v2-chart-grid line { stroke: #e9eef5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.v2-chart-axis text { fill: #7b8798; font-size: 8px; font-variant-numeric: tabular-nums; }
.v2-chart-axis text:first-child, .v2-chart-axis text:nth-child(2) { text-anchor: end; }
.v2-history-chart-empty { display: flex; flex: 1; align-items: center; justify-content: center; color: var(--v2-muted); font-size: 9px; }
.v2-history-trend-evidence { display: block; flex: 0 0 auto; overflow: hidden; border-top: 1px solid #eef2f7; padding: 4px 10px; color: var(--v2-muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.v2-history-table-card { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-history-table-card > header { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 10px 0 12px; }
.v2-history-table-card > header strong { font-size: 10px; }
.v2-history-table-card > header div { display: flex; gap: 6px; }
.v2-history-table-card > header button, .v2-history-table-card > header select { display: inline-flex; height: 27px; align-items: center; gap: 5px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 8px; color: #657286; cursor: pointer; font-size: 8px; }
.v2-history-column-panel { position: absolute; z-index: 15; top: 37px; right: 9px; display: flex; width: min(340px, calc(100% - 18px)); max-height: min(390px, calc(100% - 48px)); flex-direction: column; overflow: hidden; border: 1px solid #d8e2ee; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(30, 47, 70, .18); }
.v2-history-column-panel > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8edf4; padding: 10px 11px; }.v2-history-column-panel > header div { display: grid; gap: 3px; }.v2-history-column-panel > header strong { color: #35445a; font-size: 10px; }.v2-history-column-panel > header span { color: #8591a2; font-size: 8px; }.v2-history-column-panel > header button { display: grid; width: 25px; height: 25px; place-items: center; border: 0; border-radius: 5px; background: #f2f5f9; color: #68768a; cursor: pointer; }
.v2-history-column-panel > label.v2-history-column-search { display: flex; min-height: 38px; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; border-bottom: 1px solid #e8edf4; padding: 5px 10px; color: #8a97a9; }
.v2-history-column-panel > label.v2-history-column-search input { width: 100%; height: 28px; border: 1px solid #dce4ee; border-radius: 6px; padding: 0 8px; color: #435168; outline: 0; font-size: 9px; }
.v2-history-column-panel > label.v2-history-column-search input:focus { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-history-column-panel > div { display: grid; min-height: 0; overflow: auto; padding: 5px 8px; }.v2-history-column-panel label { display: grid; min-height: 36px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #f0f3f7; padding: 0 4px; color: #4d5b6f; font-size: 9px; cursor: pointer; }.v2-history-column-panel label input { margin: 0; accent-color: var(--v2-blue); }.v2-history-column-panel label small { max-width: 130px; overflow: hidden; color: #929dac; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.v2-history-column-panel > div > p { margin: 18px 8px; color: var(--v2-muted); text-align: center; font-size: 9px; }
.v2-history-column-panel > footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; border-top: 1px solid #e8edf4; padding: 8px 10px; }.v2-history-column-panel > footer span { margin-right: auto; color: #8491a3; font-size: 8px; }.v2-history-column-panel > footer button { height: 27px; border: 1px solid #dce4ee; border-radius: 5px; background: #fff; padding: 0 9px; color: #5f6e83; cursor: pointer; font-size: 8px; }.v2-history-column-panel > footer button:disabled { opacity: .4; cursor: not-allowed; }
.v2-history-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.v2-history-table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #4e5b6f; font-size: 8px; }
.v2-history-table-scroll th { position: sticky; z-index: 3; top: 0; height: 31px; border-bottom: 1px solid var(--v2-border); background: #f8fafc; color: #607086; text-align: left; white-space: nowrap; font-weight: 700; }
.v2-history-table-scroll td, .v2-history-table-scroll th { max-width: 170px; border-right: 1px solid #eef2f7; padding: 0 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-history-table-scroll td { height: 30px; border-bottom: 1px solid #eef2f7; content-visibility: auto; font-variant-numeric: tabular-nums; }
.v2-history-table-card.is-comfortable .v2-history-table-scroll td { height: 40px; }
.v2-history-table-scroll tr:hover td, .v2-history-table-scroll tr.is-selected td { background: #f2f7ff; }
.v2-history-table-scroll td button { border: 0; background: transparent; color: var(--v2-blue); cursor: pointer; font-size: 8px; }
.v2-history-table-scroll td.v2-history-quality-reason { max-width: 260px; color: #66758a; }
.v2-history-table-scroll input { width: 13px; height: 13px; accent-color: var(--v2-blue); }
.v2-quality { display: inline-flex; align-items: center; gap: 5px; }
.v2-quality i { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green); }
.v2-quality:not(.is-normal) i { background: var(--v2-orange); }
.v2-history-loading { position: sticky; left: 0; display: flex; min-height: 90px; align-items: center; justify-content: center; gap: 7px; color: #607086; font-size: 9px; }
.v2-history-loading i { width: 13px; height: 13px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; }
.v2-history-empty { position: sticky; left: 0; display: flex; min-height: 90px; align-items: center; justify-content: center; color: var(--v2-muted); font-size: 9px; }
.v2-history-table-card > footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-top: 1px solid var(--v2-border); padding: 0 10px; color: #657286; font-size: 8px; }
.v2-history-table-card > footer div { display: flex; gap: 5px; }
.v2-history-table-card > footer button, .v2-history-table-card > footer select { height: 26px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 8px; color: #5f6e83; font-size: 8px; }
.v2-history-table-card > footer button:disabled { opacity: .35; }
.v2-history-side { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.v2-history-side > section { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-history-side > section + section { margin-top: 9px; }
.v2-history-side section > header { display: flex; height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 12px; }
.v2-history-side section > header strong { font-size: 10px; }
.v2-history-side section > header span { color: var(--v2-muted); font-size: 8px; }
.v2-history-evidence > header button { border: 0; background: transparent; color: #718096; cursor: pointer; }
.v2-history-evidence > dl { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--v2-border); }
.v2-history-evidence > dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); padding: 5px 0; font-size: 8px; }
.v2-history-evidence dt { color: #7f8c9f; }
.v2-history-evidence dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.v2-history-evidence dd i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--v2-green); }
.v2-history-evidence dd i.is-warning { background: var(--v2-orange); }
.v2-history-evidence dd i.is-error, .v2-history-evidence dd i.is-critical { background: var(--v2-red); }
.v2-history-evidence .v2-history-quality-detail { align-items: start; }
.v2-history-evidence .v2-history-quality-detail dd { color: #5c6b80; line-height: 1.5; white-space: normal; }
.v2-evidence-values { padding: 10px 12px; }
.v2-evidence-values > strong { display: block; margin-bottom: 5px; font-size: 9px; }
.v2-evidence-values > p { margin: 10px 0; color: var(--v2-muted); font-size: 8px; text-align: center; }
.v2-evidence-values > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #eef2f7; padding: 6px 0; }
.v2-evidence-values span { min-width: 0; color: #617087; font-size: 8px; }
.v2-evidence-values span small { display: block; margin-top: 2px; overflow: hidden; color: #a0aaba; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.v2-evidence-values b { font-size: 8px; font-weight: 600; }
.v2-history-evidence > footer { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--v2-border); padding: 9px 12px; color: #718096; font-size: 8px; }
.v2-history-evidence > footer b { overflow: hidden; color: var(--v2-blue); text-overflow: ellipsis; white-space: nowrap; }
.v2-history-side-empty { display: flex; min-height: 92px; align-items: center; justify-content: center; padding: 14px; color: var(--v2-muted); text-align: center; font-size: 8px; line-height: 1.6; }
.v2-export-jobs > div { padding: 4px 11px 8px; }
.v2-export-jobs article { display: grid; min-height: 54px; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #eef2f7; }
.v2-export-jobs article > i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.v2-export-jobs article > i.is-running { background: var(--v2-blue); }
.v2-export-jobs article > i.is-completed { background: var(--v2-green); }
.v2-export-jobs article > i.is-failed { background: var(--v2-red); }
.v2-export-jobs article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.v2-export-jobs article strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.v2-export-jobs article small { overflow: hidden; color: #8290a3; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.v2-export-jobs article small.v2-export-owner { color: #64748b; }
.v2-export-jobs article .v2-export-download { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; color: var(--v2-blue); cursor: pointer; font-size: 7px; }
.v2-export-jobs article .v2-export-download:disabled { opacity: .55; cursor: wait; }
.v2-export-jobs article em { color: #7f8c9f; font-size: 7px; font-style: normal; }
.v2-access-page { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 9px; overflow: hidden; padding: 12px 14px 14px; }
.v2-access-filter { display: grid; flex: 0 0 auto; grid-template-columns: minmax(210px, 1.15fr) repeat(4, minmax(120px, .7fr)) auto auto; align-items: end; gap: 8px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 9px 11px; box-shadow: var(--v2-shadow); }
.v2-access-filter label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--v2-muted); font-size: 8px; }
.v2-access-filter label > div { display: flex; height: 34px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 6px; padding: 0 9px; color: #8996a8; }
.v2-access-filter input, .v2-access-filter select { min-width: 0; height: 34px; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0 8px; color: #435168; outline: 0; font-size: 9px; }
.v2-access-filter label > div input { height: auto; flex: 1; border: 0; padding: 0; }
.v2-access-filter label > div:focus-within, .v2-access-filter select:focus { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-access-filter button { height: 34px; white-space: nowrap; }
.v2-access-advanced { grid-column: 1 / -1; border-top: 1px solid var(--v2-border); padding-top: 6px; }
.v2-access-advanced summary { width: fit-content; color: var(--v2-blue); font-size: 9px; cursor: pointer; }
.v2-access-advanced > div { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 8px; padding-top: 8px; }
.v2-access-kpis { display: grid; min-height: 68px; flex: 0 0 auto; grid-template-columns: repeat(7, minmax(82px, 1fr)); overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-access-kpis button { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-content: center; border: 0; background: #fff; padding: 9px 15px; text-align: left; cursor: pointer; }
.v2-access-kpis button + button::before { position: absolute; inset: 12px auto 12px 0; width: 1px; background: var(--v2-border); content: ''; }
.v2-access-kpis button:hover { background: #f8fbff; }
.v2-access-kpis small { grid-column: 1 / -1; color: var(--v2-muted); font-size: 9px; }
.v2-access-kpis strong { margin-top: 6px; overflow: hidden; font-size: 19px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-access-kpis em { align-self: end; color: #7f8c9f; font-size: 8px; font-style: normal; }
.v2-access-kpis .is-online strong, .v2-access-kpis .is-today strong { color: var(--v2-green); }
.v2-access-kpis .is-delay strong { color: var(--v2-orange); }
.v2-access-kpis .is-identity strong { color: #a65a12; }
.v2-access-kpis .is-never strong, .v2-access-kpis .is-offline strong { color: #64748b; }
.v2-access-protocols { flex: 0 0 auto; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 9px 12px 10px; box-shadow: var(--v2-shadow); }
.v2-access-protocols header { display: flex; align-items: center; justify-content: space-between; }
.v2-access-protocols header strong { font-size: 10px; }
.v2-access-protocols header span { color: var(--v2-muted); font-size: 7px; }
.v2-access-segments { display: flex; height: 6px; gap: 2px; margin-top: 8px; overflow: hidden; border-radius: 6px; background: #edf1f6; }
.v2-access-segments i { display: block; min-width: 2px; height: 100%; }
.v2-access-legends { display: flex; gap: 20px; margin-top: 8px; overflow-x: auto; color: #657286; font-size: 7px; white-space: nowrap; }
.v2-access-legends span { display: inline-flex; align-items: center; gap: 5px; }
.v2-access-legends span > i { width: 6px; height: 6px; border-radius: 50%; }
.v2-access-legends b { color: #455268; font-weight: 700; }
.v2-access-legends em { color: #8a97a9; font-style: normal; }
.v2-access-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(680px, 1fr) 300px; gap: 9px; }
.v2-access-identity-queue { flex: 0 0 auto; border: 1px solid #efd7b5; border-radius: var(--v2-radius); background: #fffaf3; color: var(--v2-text); }
.v2-access-identity-queue summary { display: flex; min-height: 35px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; cursor: pointer; list-style-position: inside; }
.v2-access-identity-queue summary span { display: inline-flex; align-items: center; gap: 8px; }
.v2-access-identity-queue summary strong { min-width: 22px; border-radius: 12px; background: #a65a12; padding: 2px 7px; color: #fff; font-size: 10px; text-align: center; }
.v2-access-identity-queue summary em { color: #8a6440; font-size: 10px; font-style: normal; }
.v2-access-identity-queue > div { display: grid; max-height: 112px; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 7px; overflow: auto; border-top: 1px solid #efd7b5; padding: 7px; }
.v2-access-identity-queue article { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; border: 1px solid #f0dfc7; border-radius: 7px; background: #fff; padding: 7px 8px; }
.v2-access-identity-code { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.v2-access-identity-queue article dl { display: grid; min-width: 0; grid-column: 1 / -1; gap: 2px; margin: 0; }
.v2-access-identity-queue article dl div { display: grid; min-width: 0; grid-template-columns: 45px minmax(0, 1fr); gap: 4px; }
.v2-access-identity-queue article dt, .v2-access-identity-queue article dd { overflow: hidden; margin: 0; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.v2-access-identity-queue article button { grid-column: 2; grid-row: 1; border: 0; background: transparent; color: var(--v2-blue); font-size: 9px; cursor: pointer; }
.v2-access-table-card { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-access-table-card > header { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 9px 0 12px; }
.v2-access-table-card > header strong { font-size: 10px; }
.v2-access-table-card > header div { display: flex; align-items: center; gap: 5px; }
.v2-access-table-card > header span { margin-right: 5px; color: var(--v2-muted); font-size: 7px; }
.v2-access-table-card > header button { display: inline-flex; height: 26px; align-items: center; gap: 4px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #657286; cursor: pointer; font-size: 7px; }
.v2-access-table-card > header button:disabled { opacity: .4; cursor: not-allowed; }
.v2-access-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.v2-access-table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #4e5b6f; font-size: 7px; }
.v2-access-table-scroll th { position: sticky; z-index: 3; top: 0; height: 32px; border-bottom: 1px solid var(--v2-border); background: #f8fafc; color: #607086; text-align: left; font-weight: 700; }
.v2-access-table-scroll th, .v2-access-table-scroll td { max-width: 150px; border-right: 1px solid #eef2f7; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-access-table-scroll td { height: 31px; border-bottom: 1px solid #eef2f7; content-visibility: auto; font-variant-numeric: tabular-nums; }
.v2-access-table-scroll tr:hover td, .v2-access-table-scroll tr.is-selected td { background: #f2f7ff; }
.v2-access-table-scroll input { width: 12px; height: 12px; accent-color: var(--v2-blue); }
.v2-access-table-scroll td > button { border: 0; background: transparent; color: var(--v2-blue); cursor: pointer; font-size: 7px; }
.v2-access-table-scroll td.is-good { color: var(--v2-green); }
.v2-access-table-scroll td.is-danger { color: var(--v2-red); }
.v2-access-status { display: inline-flex; align-items: center; gap: 5px; color: #64748b; white-space: nowrap; }
.v2-access-status i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.v2-access-status.is-online { color: var(--v2-green); }
.v2-access-status.is-online i { background: var(--v2-green); }
.v2-access-status.is-offline i { background: #7b8798; }
.v2-access-status.is-never_reported i { background: #aab3c0; }
.v2-access-status.is-unknown i { background: var(--v2-orange); }
.v2-access-loading, .v2-access-empty { position: sticky; left: 0; display: flex; min-height: 72px; align-items: center; justify-content: center; gap: 7px; color: var(--v2-muted); font-size: 8px; }
.v2-access-loading { position: absolute; inset: 32px 0 auto; min-height: 34px; background: rgba(255,255,255,.88); backdrop-filter: blur(2px); }
.v2-access-loading i { width: 12px; height: 12px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; }
.v2-access-table-card > footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-top: 1px solid var(--v2-border); padding: 0 9px; color: #657286; font-size: 7px; }
.v2-access-table-card > footer div { display: flex; gap: 5px; }
.v2-access-table-card > footer button, .v2-access-table-card > footer select { height: 25px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #5f6e83; font-size: 7px; }
.v2-access-table-card > footer button:disabled { opacity: .35; }
.v2-access-side { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.v2-access-side > section { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-access-side > section + section { margin-top: 9px; }
.v2-access-side section > header { display: flex; height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 11px; }
.v2-access-side section > header strong { font-size: 10px; }
.v2-access-side section > header span { font-size: 7px; }
.v2-access-identity { margin: 0; padding: 7px 11px 3px; }
.v2-access-identity > div, .v2-access-inspector section dl > div { display: grid; grid-template-columns: 77px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 7px; }
.v2-access-inspector dt { color: #7e8b9e; }
.v2-access-inspector dd { margin: 0; overflow-wrap: anywhere; color: #46546a; text-align: right; }
.v2-access-inspector dd.is-good { color: var(--v2-green); }
.v2-access-inspector dd.is-danger { color: var(--v2-red); }
.v2-access-vehicle-link { display: block; margin: 3px 11px 9px; color: var(--v2-blue); text-decoration: none; font-size: 7px; }
.v2-access-inspector > section { border-top: 1px solid var(--v2-border); padding: 9px 11px; }
.v2-access-inspector h3 { margin: 0 0 5px; font-size: 8px; }
.v2-access-inspector section dl { margin: 0; }
.v2-access-proof p { display: grid; grid-template-columns: 64px 1fr; gap: 8px; margin: 0; padding: 4px 0; color: #778599; font-size: 7px; line-height: 1.5; }
.v2-access-proof p b { color: #4c596d; }
.v2-access-side-empty { display: flex; min-height: 100px; align-items: center; justify-content: center; padding: 16px; color: var(--v2-muted); text-align: center; font-size: 8px; line-height: 1.6; }
.v2-threshold-form { min-width: 0; margin: 0; border: 0; padding: 7px 11px 10px; }
.v2-threshold-form:disabled { opacity: .82; }
.v2-threshold-form label { position: relative; display: grid; min-height: 30px; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 7px; border-bottom: 1px solid #eef2f7; color: #657286; font-size: 7px; }
.v2-threshold-form input, .v2-threshold-form select { min-width: 0; height: 24px; border: 1px solid #dce4ef; border-radius: 5px; background: #fff; padding: 0 22px 0 7px; color: #46546a; outline: 0; font-size: 7px; }
.v2-threshold-form em { position: absolute; right: 7px; color: #96a1b1; font-size: 6px; font-style: normal; }
.v2-threshold-form > button { display: inline-flex; width: 100%; height: 29px; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; border: 1px solid var(--v2-blue); border-radius: 6px; background: var(--v2-blue); color: #fff; cursor: pointer; font-size: 8px; font-weight: 700; }
.v2-threshold-form > button:disabled { opacity: .5; }
.v2-threshold-error { margin: 6px 0 0; color: var(--v2-red); font-size: 7px; line-height: 1.4; }
.v2-access-threshold > footer { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--v2-border); padding: 8px 11px; color: #7f8c9f; font-size: 6px; }
.v2-access-threshold > footer b { color: #536177; text-align: right; font-weight: 600; }
/* Vehicle-first access matrix. Text deliberately starts at 11px instead of the legacy 7-9px scale. */
.v2-access-page-v3 { gap: 12px; overflow: auto; padding: 16px 18px 20px; background: #f6f8fb; }
.v2-access-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; }
.v2-access-heading h2 { margin: 0; color: #26354b; font-size: 22px; line-height: 1.25; letter-spacing: -.03em; }
.v2-access-heading p { margin: 5px 0 0; color: #6f7d90; font-size: 13px; line-height: 1.5; }
.v2-access-heading > div:last-child { display: flex; align-items: center; gap: 12px; color: #7b889a; font-size: 12px; }
.v2-access-heading button, .v2-access-table-v3 > header button { display: inline-flex; height: 34px; align-items: center; gap: 6px; border: 1px solid #dbe3ed; border-radius: 7px; background: #fff; padding: 0 12px; color: #536176; cursor: pointer; font-size: 12px; font-weight: 700; }
.v2-access-heading button:hover, .v2-access-table-v3 > header button:hover { border-color: #9fc1f5; color: var(--v2-blue); }
.v2-access-filter-v3 { display: grid; flex: 0 0 auto; grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, .7fr)) auto auto; align-items: end; gap: 10px; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; padding: 13px 14px; box-shadow: var(--v2-shadow); }
.v2-access-filter-v3 label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #647287; font-size: 12px; font-weight: 650; }
.v2-access-filter-v3 label > div { display: flex; height: 38px; align-items: center; gap: 8px; border: 1px solid #d9e2ed; border-radius: 7px; padding: 0 10px; color: #8997aa; }
.v2-access-filter-v3 input, .v2-access-filter-v3 select { min-width: 0; width: 100%; height: 38px; border: 1px solid #d9e2ed; border-radius: 7px; background: #fff; padding: 0 10px; color: #35445b; outline: 0; font-size: 13px; }
.v2-access-filter-v3 label > div input { height: auto; border: 0; padding: 0; }
.v2-access-filter-v3 label > div:focus-within, .v2-access-filter-v3 select:focus { border-color: #83aff4; box-shadow: 0 0 0 3px rgba(18,104,243,.09); }
.v2-access-filter-v3 > button { height: 38px; padding: 0 15px; font-size: 13px; }
.v2-access-kpis-v3 { display: grid; min-height: 56px; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(140px, 1fr)); overflow: hidden; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; box-shadow: var(--v2-shadow); }
.v2-access-kpis-v3 button { position: relative; display: flex; min-width: 0; align-items: center; gap: 12px; border: 0; background: #fff; padding: 10px 18px; text-align: left; cursor: pointer; }
.v2-access-kpis-v3 button + button::before { position: absolute; inset: 10px auto 10px 0; width: 1px; background: #e6ebf2; content: ''; }
.v2-access-kpis-v3 button:hover { background: #f8fbff; }
.v2-access-kpis-v3 small { color: #748195; font-size: 12px; }
.v2-access-kpis-v3 strong { margin-left: auto; color: #29384e; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.v2-access-kpis-v3 em { color: #8995a6; font-size: 11px; font-style: normal; }
.v2-access-kpis-v3 .is-healthy strong, .v2-access-kpis-v3 .is-today strong { color: var(--v2-green); }
.v2-access-kpis-v3 .is-incomplete strong { color: #d47b12; }
.v2-access-kpis-v3 .is-degraded strong { color: #bd6423; }
.v2-access-kpis-v3 .is-attention strong { color: #d47b12; }
.v2-access-kpis-v3 .is-offline strong, .v2-access-kpis-v3 .is-never strong { color: #5f6f83; }
.v2-access-protocol-overview { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v2-access-protocol-overview article { min-width: 0; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; padding: 13px 15px; box-shadow: var(--v2-shadow); }
.v2-access-protocol-overview header, .v2-access-protocol-overview div, .v2-access-protocol-overview footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v2-access-protocol-overview header strong { color: #33445a; font-size: 14px; }.v2-access-protocol-overview header span { color: #8995a6; font-size: 11px; }
.v2-access-protocol-overview div { justify-content: flex-start; margin-top: 9px; }.v2-access-protocol-overview div b { color: #25364c; font-size: 24px; }.v2-access-protocol-overview div small { color: #708095; font-size: 12px; }.v2-access-protocol-overview div em { margin-left: auto; color: #c66a0a; font-size: 12px; font-style: normal; }
.v2-access-protocol-overview footer { margin-top: 10px; }.v2-access-protocol-overview footer > i { height: 5px; flex: 1; overflow: hidden; border-radius: 5px; background: #edf1f6; }.v2-access-protocol-overview footer > i span { display: block; height: 100%; border-radius: inherit; background: #3787ee; }.v2-access-protocol-overview footer > span { color: #728095; font-size: 11px; white-space: nowrap; }
.v2-access-workspace-v3 { display: grid; min-height: 540px; flex: 1 0 540px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.v2-access-workspace-v3.is-inspector-open { grid-template-columns: minmax(760px, 1fr) 390px; }
.v2-access-table-v3 { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; box-shadow: var(--v2-shadow); }
.v2-access-table-v3 > header { display: flex; min-height: 52px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--v2-border); padding: 0 13px 0 15px; }
.v2-access-table-title { display: flex; min-width: 0; align-items: baseline; gap: 10px; }.v2-access-table-title strong { color: #334258; font-size: 15px; white-space: nowrap; }.v2-access-table-title > span { overflow: hidden; color: #8692a3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.v2-access-table-actions { display: flex; min-width: 0; align-items: center; gap: 9px; }
.v2-access-protocol-coverage { display: flex; min-width: 0; align-items: center; gap: 6px; }
.v2-access-protocol-coverage > span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; padding: 5px 7px; white-space: nowrap; }
.v2-access-protocol-coverage b { color: #526178; font-size: 10px; }.v2-access-protocol-coverage em { color: #7e8b9d; font-size: 10px; font-style: normal; font-variant-numeric: tabular-nums; }
.v2-access-table-scroll-v3 { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.v2-access-table-scroll-v3 table { width: 100%; min-width: 1030px; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: #48576c; font-size: 13px; }
.v2-access-table-scroll-v3 th { position: sticky; z-index: 2; top: 0; height: 40px; border-bottom: 1px solid #dfe5ed; background: #f7f9fc; color: #647287; text-align: left; font-size: 12px; font-weight: 700; }
.v2-access-table-scroll-v3 th, .v2-access-table-scroll-v3 td { padding: 8px 11px; vertical-align: middle; }
.v2-access-table-scroll-v3 th:nth-child(1) { width: 165px; }.v2-access-table-scroll-v3 th:nth-child(2) { width: 140px; }.v2-access-table-scroll-v3 th:nth-child(3) { width: 115px; }.v2-access-table-scroll-v3 th:nth-child(4), .v2-access-table-scroll-v3 th:nth-child(5), .v2-access-table-scroll-v3 th:nth-child(6) { width: 160px; }.v2-access-table-scroll-v3 th:nth-child(7) { width: 120px; }
.v2-access-table-scroll-v3 tbody tr { cursor: pointer; transition: background .14s ease; }.v2-access-table-scroll-v3 tbody tr:hover, .v2-access-table-scroll-v3 tbody tr.is-selected { background: #f2f7ff; }.v2-access-table-scroll-v3 tbody td { height: 67px; border-bottom: 1px solid #edf1f5; }
.v2-access-table-scroll-v3 td > strong, .v2-access-table-scroll-v3 td > b { display: block; overflow: hidden; color: #314158; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.v2-access-table-scroll-v3 td > span { display: block; overflow: hidden; margin-top: 5px; color: #8793a5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.v2-access-protocol-cell { display: grid; min-width: 0; gap: 4px; }.v2-access-protocol-cell > span { display: inline-flex; width: fit-content; align-items: center; gap: 5px; color: #6c788b; font-size: 12px; }.v2-access-protocol-cell > span i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6b5; }.v2-access-protocol-cell > strong { color: #3d4d63; font-size: 12px; font-weight: 650; }.v2-access-protocol-cell > small { overflow: hidden; color: #8b97a7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.v2-access-protocol-cell.is-online > span { color: #16815f; }.v2-access-protocol-cell.is-online > span i { background: #19a974; box-shadow: 0 0 0 3px rgba(25,169,116,.11); }.v2-access-protocol-cell.is-offline > span { color: #b26512; }.v2-access-protocol-cell.is-offline > span i { background: #e6922e; }.v2-access-protocol-cell.is-missing > span { color: #8290a3; }.v2-access-protocol-cell.is-missing > span i { border: 1px solid #aeb8c5; background: #fff; }
.v2-access-connection { display: grid; gap: 5px; }.v2-access-connection strong { width: fit-content; border-radius: 12px; background: #eef2f6; padding: 4px 8px; color: #607086; font-size: 11px; }.v2-access-connection span { color: #8793a5; font-size: 11px; }.v2-access-connection.is-healthy strong { background: #eaf8f2; color: #15815e; }.v2-access-connection.is-incomplete strong, .v2-access-connection.is-degraded strong { background: #fff4e5; color: #b5660c; }.v2-access-connection.is-not_connected strong { background: #fff0f0; color: #bc4d4d; }
.v2-access-table-v3 > footer { display: flex; min-height: 46px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--v2-border); padding: 0 12px; color: #788699; font-size: 12px; }.v2-access-table-v3 > footer div { display: flex; align-items: center; gap: 7px; }.v2-access-table-v3 > footer button, .v2-access-table-v3 > footer select { height: 30px; border: 1px solid #dbe3ed; border-radius: 6px; background: #fff; padding: 0 9px; color: #5d6b80; font-size: 12px; }
.v2-access-inspector-v3 { min-width: 0; overflow: auto; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; box-shadow: var(--v2-shadow); }
.v2-access-inspector-v3 > header { position: sticky; z-index: 2; top: 0; display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); background: #fff; padding: 0 14px; }.v2-access-inspector-v3 > header > div { display: grid; gap: 4px; }.v2-access-inspector-v3 > header strong { color: #2f3f55; font-size: 16px; }.v2-access-inspector-v3 > header span { color: #8290a3; font-size: 11px; }.v2-access-inspector-v3 > header button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 6px; background: #f2f5f8; color: #6d7a8e; cursor: pointer; }
.v2-access-inspector-summary { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--v2-border); padding: 10px 14px; }.v2-access-inspector-summary > div { min-width: 0; padding: 7px 4px; }.v2-access-inspector-summary span { display: block; color: #8793a5; font-size: 11px; }.v2-access-inspector-summary strong { display: block; margin-top: 5px; color: #3f4e63; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }.v2-access-inspector-summary .v2-access-connection { margin-top: 4px; }
.v2-access-protocol-details { display: grid; gap: 9px; padding: 12px; }.v2-access-protocol-detail { overflow: hidden; border: 1px solid #e1e7ef; border-radius: 8px; }.v2-access-protocol-detail > header { display: flex; height: 38px; align-items: center; justify-content: space-between; background: #f8fafc; padding: 0 10px; }.v2-access-protocol-detail > header strong { color: #3b4a60; font-size: 13px; }.v2-access-protocol-detail > header span { display: inline-flex; align-items: center; gap: 5px; color: #69778b; font-size: 11px; }.v2-access-protocol-detail > header i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6b5; }.v2-access-protocol-detail.is-online > header i { background: var(--v2-green); }.v2-access-protocol-detail.is-offline > header i { background: var(--v2-orange); }.v2-access-protocol-detail.is-missing { border-color: #e1e7ef; }.v2-access-protocol-detail.is-missing > header { background: #f8fafc; }.v2-access-protocol-detail.is-missing > header i { border: 1px solid #aeb8c5; background: #fff; }
.v2-access-protocol-detail dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 7px 10px; }.v2-access-protocol-detail dl > div { min-width: 0; padding: 5px 3px; }.v2-access-protocol-detail dt { color: #8995a6; font-size: 11px; }.v2-access-protocol-detail dd { overflow: hidden; margin: 4px 0 0; color: #46556a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.v2-access-protocol-detail dd.is-danger { color: var(--v2-red); }.v2-access-protocol-detail p { margin: 0; border-top: 1px solid #edf1f5; padding: 7px 10px; color: #7c899b; font-size: 11px; line-height: 1.5; }
.v2-access-inspector-v3 > footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-top: 1px solid var(--v2-border); padding: 10px 14px; }.v2-access-inspector-v3 > footer span { color: #8591a2; font-size: 11px; line-height: 1.5; }.v2-access-inspector-v3 > footer a { flex: 0 0 auto; color: var(--v2-blue); font-size: 12px; text-decoration: none; }
.v2-access-identity-queue-v3, .v2-access-settings { flex: 0 0 auto; border: 1px solid var(--v2-border); border-radius: 8px; background: #fff; }.v2-access-identity-queue-v3 summary, .v2-access-settings summary { display: flex; min-height: 40px; align-items: center; gap: 10px; padding: 0 12px; color: #5c6b80; cursor: pointer; font-size: 11px; }.v2-access-identity-queue-v3 summary span { color: #8995a6; font-size: 10px; }.v2-access-identity-queue-v3 > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--v2-border); padding: 10px; }.v2-access-identity-queue-v3 article { display: grid; gap: 4px; border: 1px solid #e4e9f0; border-radius: 7px; padding: 9px; }.v2-access-identity-queue-v3 article b { font-size: 11px; }.v2-access-identity-queue-v3 article span, .v2-access-identity-queue-v3 article small { color: #7d8a9c; font-size: 9px; line-height: 1.5; }
.v2-access-settings fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin: 0; border: 0; border-top: 1px solid var(--v2-border); padding: 11px; }.v2-access-settings label { display: grid; gap: 5px; color: #718095; font-size: 10px; }.v2-access-settings input { width: 110px; height: 32px; border: 1px solid #dbe3ed; border-radius: 6px; padding: 0 8px; font-size: 11px; }.v2-access-settings button { display: inline-flex; height: 32px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: var(--v2-blue); padding: 0 11px; color: #fff; font-size: 10px; }.v2-access-settings p { width: 100%; margin: 0; color: var(--v2-red); font-size: 10px; }
.v2-alert-page { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; background: #f5f7fa; padding: 0 12px 12px; }
.v2-alert-heading { display: flex; min-height: 48px; flex: 0 0 auto; align-items: center; justify-content: space-between; background: #fff; margin: 0 -12px; padding: 0 16px; }
.v2-alert-heading h2 { margin: 0; color: #26354b; font-size: 17px; letter-spacing: -.02em; }
.v2-alert-heading p { display: inline; margin: 0 0 0 12px; color: var(--v2-muted); font-size: 8px; }
.v2-alert-heading > div { display: flex; align-items: baseline; }
.v2-alert-tabs { display: flex; min-height: 35px; flex: 0 0 auto; gap: 18px; border-bottom: 1px solid var(--v2-border); background: #fff; margin: 0 -12px 8px; padding: 0 16px; }
.v2-alert-tabs button { position: relative; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 0 4px; color: #68768a; cursor: pointer; font-size: 9px; font-weight: 600; }
.v2-alert-tabs button.is-active { color: var(--v2-blue); }
.v2-alert-tabs button.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--v2-blue); content: ''; }
.v2-alert-tabs b { display: grid; min-width: 15px; height: 15px; place-items: center; border-radius: 8px; background: var(--v2-red); color: #fff; font-size: 7px; }
.v2-alert-filter { display: grid; flex: 0 0 auto; grid-template-columns: minmax(180px,1.15fr) repeat(4,minmax(92px,.65fr)) repeat(2,minmax(135px,.8fr)) auto auto; align-items: end; gap: 6px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 7px 9px; box-shadow: var(--v2-shadow); }
.v2-alert-filter label { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: var(--v2-muted); font-size: 7px; }
.v2-alert-filter label > div { display: flex; height: 30px; align-items: center; gap: 5px; border: 1px solid #dce4ef; border-radius: 5px; padding: 0 7px; color: #8996a8; }
.v2-alert-filter input, .v2-alert-filter select { min-width: 0; height: 30px; border: 1px solid #dce4ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #435168; outline: 0; font-size: 8px; }
.v2-alert-filter label > div input { height: auto; flex: 1; border: 0; padding: 0; }
.v2-alert-filter label > div:focus-within, .v2-alert-filter input:focus, .v2-alert-filter select:focus { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-alert-filter button { height: 30px; padding: 0 10px; white-space: nowrap; font-size: 8px; }
.v2-alert-kpis { display: grid; min-height: 62px; flex: 0 0 auto; grid-template-columns: repeat(7,minmax(74px,1fr)); overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; margin-top: 8px; box-shadow: var(--v2-shadow); }
.v2-alert-kpis button { position: relative; display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; border: 0; background: #fff; cursor: pointer; }
.v2-alert-kpis button + button::before { position: absolute; inset: 11px auto 11px 0; width: 1px; background: var(--v2-border); content: ''; }
.v2-alert-kpis button:hover, .v2-alert-kpis .is-unprocessed { background: #fff9f2; }
.v2-alert-kpis small { color: var(--v2-muted); font-size: 8px; }
.v2-alert-kpis strong { margin-top: 5px; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.v2-alert-kpis .is-unprocessed strong, .v2-alert-kpis button:first-child strong { color: var(--v2-red); }
.v2-alert-kpis .is-processing strong { color: var(--v2-blue); }.v2-alert-kpis .is-recovered strong { color: var(--v2-green); }.v2-alert-kpis .is-notice strong { color: #7c3aed; }
.v2-alert-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(700px,1fr) 320px; gap: 8px; margin-top: 8px; }
.v2-alert-table-card { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-alert-table-card > header { display: flex; min-height: 36px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 9px 0 11px; }
.v2-alert-table-card > header strong { font-size: 9px; }.v2-alert-table-card > header div { display: flex; align-items: center; gap: 7px; }.v2-alert-table-card > header span { color: var(--v2-muted); font-size: 7px; }
.v2-alert-table-card > header button { display: inline-flex; height: 25px; align-items: center; gap: 4px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #657286; cursor: pointer; font-size: 7px; }
.v2-alert-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.v2-alert-table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #4e5b6f; font-size: 7px; }
.v2-alert-table-scroll th { position: sticky; z-index: 3; top: 0; height: 31px; border-bottom: 1px solid var(--v2-border); background: #f8fafc; color: #607086; text-align: left; }
.v2-alert-table-scroll th, .v2-alert-table-scroll td { max-width: 130px; border-right: 1px solid #eef2f7; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-alert-table-scroll td { height: 34px; border-bottom: 1px solid #eef2f7; content-visibility: auto; font-variant-numeric: tabular-nums; cursor: pointer; }
.v2-alert-table-scroll td strong, .v2-alert-table-scroll td small { display: block; }.v2-alert-table-scroll td small { margin-top: 2px; color: #8b97a8; font-size: 6px; }
.v2-alert-table-scroll tr:hover td, .v2-alert-table-scroll tr.is-selected td { background: #f2f7ff; }.v2-alert-table-scroll tr.is-selected td:first-child { box-shadow: inset 2px 0 var(--v2-blue); }
.v2-alert-table-scroll input { width: 12px; height: 12px; accent-color: var(--v2-blue); }
.v2-alert-severity { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }.v2-alert-severity i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }.v2-alert-severity.is-critical { color: var(--v2-red); }.v2-alert-severity.is-critical i { background: var(--v2-red); }.v2-alert-severity.is-major { color: var(--v2-orange); }.v2-alert-severity.is-major i { background: var(--v2-orange); }
.v2-alert-status { display: inline-flex; border: 1px solid #dce4ef; border-radius: 4px; background: #f8fafc; padding: 2px 5px; color: #657286; white-space: nowrap; }.v2-alert-status.is-unprocessed { border-color: #fecaca; background: #fff1f2; color: #dc2626; }.v2-alert-status.is-processing { border-color: #bfdbfe; background: #eff6ff; color: var(--v2-blue); }.v2-alert-status.is-recovered { border-color: #bbf7d0; background: #f0fdf4; color: var(--v2-green); }
.v2-alert-loading, .v2-alert-empty { position: sticky; left: 0; display: flex; min-height: 70px; align-items: center; justify-content: center; gap: 6px; color: var(--v2-muted); font-size: 8px; }.v2-alert-loading { position: absolute; inset: 31px 0 auto; min-height: 32px; background: rgba(255,255,255,.88); }.v2-alert-loading i { width: 11px; height: 11px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; }
.v2-alert-table-card > footer { display: flex; min-height: 36px; align-items: center; justify-content: space-between; border-top: 1px solid var(--v2-border); padding: 0 9px; color: #657286; font-size: 7px; }.v2-alert-table-card > footer div { display: flex; gap: 5px; }.v2-alert-table-card > footer button, .v2-alert-table-card > footer select { height: 24px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #5f6e83; font-size: 7px; }.v2-alert-table-card > footer button:disabled { opacity: .35; }
.v2-alert-inspector { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-alert-inspector > header { display: flex; min-height: 52px; align-items: center; border-bottom: 1px solid var(--v2-border); padding: 8px 11px; }.v2-alert-inspector > header > div { display: flex; min-width: 0; flex: 1; justify-content: space-between; flex-direction: column; gap: 6px; }.v2-alert-inspector > header strong { font-size: 12px; }.v2-alert-inspector > header span { display: flex; gap: 5px; font-size: 7px; }
.v2-alert-inspector > section { border-bottom: 1px solid var(--v2-border); padding: 9px 11px; }.v2-alert-inspector h3 { margin: 0 0 6px; border-left: 2px solid var(--v2-blue); padding-left: 6px; font-size: 8px; }.v2-alert-inspector dl { margin: 0; }.v2-alert-inspector dl > div { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 7px; padding: 3px 0; font-size: 7px; }.v2-alert-inspector dt { color: #7f8c9f; }.v2-alert-inspector dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.v2-alert-evidence { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 4px; }.v2-alert-evidence > div { display: flex; min-height: 57px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #e0e7f0; border-radius: 6px; background: #fafcff; text-align: center; }.v2-alert-evidence small { color: #7e8b9e; font-size: 7px; }.v2-alert-evidence strong { margin-top: 6px; color: #39475c; font-size: 11px; }.v2-alert-evidence > div:first-child strong { color: var(--v2-red); }.v2-alert-evidence > b { color: #7e8b9e; text-align: center; font-size: 8px; }
.v2-alert-timeline { padding-left: 3px; }.v2-alert-timeline article { position: relative; display: grid; min-height: 35px; grid-template-columns: 12px 1fr; gap: 7px; }.v2-alert-timeline article:not(:last-child)::before { position: absolute; top: 10px; bottom: -3px; left: 3px; width: 1px; background: #cdd7e4; content: ''; }.v2-alert-timeline i { position: relative; z-index: 1; width: 7px; height: 7px; margin-top: 3px; border: 2px solid var(--v2-blue); border-radius: 50%; background: #fff; }.v2-alert-timeline article:first-child i { border-color: var(--v2-red); }.v2-alert-timeline strong { display: block; font-size: 7px; }.v2-alert-timeline span { display: block; margin-top: 3px; color: #8793a5; font-size: 6px; }.v2-alert-timeline p { margin: 3px 0 0; color: #68768a; font-size: 6px; }
.v2-alert-inspector textarea { width: 100%; height: 46px; resize: vertical; border: 1px solid #dce4ef; border-radius: 5px; padding: 6px; color: #46546a; outline: 0; font: inherit; font-size: 7px; }.v2-alert-note-count { display: block; margin-top: -13px; padding-right: 5px; color: #9aa5b4; text-align: right; font-size: 6px; }.v2-alert-action-error { margin: 6px 0 0; color: var(--v2-red); font-size: 7px; }
.v2-alert-actions { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 5px; margin-top: 8px; }.v2-alert-actions button { height: 28px; border: 1px solid #dce4ef; border-radius: 5px; background: #fff; color: #526176; cursor: pointer; font-size: 7px; }.v2-alert-actions button.is-primary { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }.v2-alert-actions button:disabled { opacity: .35; cursor: not-allowed; }
.v2-alert-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 8px 11px; }.v2-alert-links a { display: flex; height: 26px; align-items: center; justify-content: center; color: var(--v2-blue); text-decoration: none; font-size: 7px; }
.v2-alert-side-empty { display: flex; min-height: 220px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 20px; color: #8290a3; text-align: center; }.v2-alert-side-empty strong { color: #4b596d; font-size: 11px; }.v2-alert-side-empty span { font-size: 8px; }
.v2-alert-rules { display: grid; min-height: 0; flex: 1; grid-template-columns: 330px minmax(560px,1fr); gap: 8px; }.v2-alert-rule-list, .v2-alert-rule-editor, .v2-alert-notifications { min-height: 0; overflow: auto; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
.v2-alert-rule-list > header, .v2-alert-rule-editor > header, .v2-alert-notifications > header { display: flex; min-height: 45px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 12px; }.v2-alert-rule-list > header strong, .v2-alert-rule-editor > header strong, .v2-alert-notifications > header strong { font-size: 11px; }.v2-alert-rule-list > header button, .v2-alert-rule-editor > header button, .v2-alert-notifications > header button { height: 27px; border: 1px solid #dce4ef; border-radius: 5px; background: #fff; padding: 0 8px; color: var(--v2-blue); cursor: pointer; font-size: 8px; }
.v2-alert-rule-list > button { display: grid; width: 100%; min-height: 58px; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid #eef2f7; background: #fff; padding: 8px 11px; text-align: left; cursor: pointer; }.v2-alert-rule-list > button.is-selected { background: #f2f7ff; box-shadow: inset 2px 0 var(--v2-blue); }.v2-alert-rule-list > button > i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }.v2-alert-rule-list > button > i.is-critical { background: var(--v2-red); }.v2-alert-rule-list > button > i.is-major { background: var(--v2-orange); }.v2-alert-rule-list > button span { min-width: 0; }.v2-alert-rule-list > button strong, .v2-alert-rule-list > button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-alert-rule-list > button strong { font-size: 9px; }.v2-alert-rule-list > button small { margin-top: 5px; color: #8390a2; font-size: 7px; }.v2-alert-rule-list em { color: #94a3b8; font-size: 7px; font-style: normal; }.v2-alert-rule-list em.is-enabled { color: var(--v2-green); }
.v2-alert-rule-editor > header div, .v2-alert-notifications > header div { display: flex; flex-direction: column; gap: 3px; }.v2-alert-rule-editor > header span, .v2-alert-notifications > header span { color: var(--v2-muted); font-size: 7px; }.v2-rule-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 15px; }.v2-rule-form-grid label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #68768a; font-size: 8px; }.v2-rule-form-grid label.is-wide { grid-column: 1/-1; }.v2-rule-form-grid input, .v2-rule-form-grid select, .v2-rule-form-grid textarea { min-width: 0; height: 34px; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0 9px; color: #435168; outline: 0; font: inherit; font-size: 9px; }.v2-rule-form-grid textarea { height: 60px; padding: 8px; resize: vertical; }.v2-alert-rule-editor > footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--v2-border); padding: 10px 15px; }.v2-alert-rule-editor > footer > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }.v2-alert-rule-editor > footer b { font-size: 8px; }.v2-alert-rule-editor > footer span { color: var(--v2-muted); font-size: 7px; }.v2-alert-rule-editor > footer em { color: var(--v2-red); font-size: 7px; font-style: normal; }.v2-alert-rule-editor > footer button { height: 32px; }
.v2-alert-notifications { flex: 1; }.v2-alert-notifications > div { min-height: 0; max-height: calc(100% - 125px); overflow: auto; }.v2-alert-notifications article { display: grid; min-height: 64px; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #eef2f7; padding: 9px 13px; }.v2-alert-notifications article.is-read { opacity: .58; }.v2-alert-notifications article > i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }.v2-alert-notifications article > i.is-critical { background: var(--v2-red); }.v2-alert-notifications article > i.is-major { background: var(--v2-orange); }.v2-alert-notifications article strong { font-size: 9px; }.v2-alert-notifications article p { margin: 4px 0; color: #68768a; font-size: 8px; }.v2-alert-notifications article span { color: #94a3b8; font-size: 7px; }.v2-alert-notifications article button { border: 0; background: transparent; color: var(--v2-blue); cursor: pointer; font-size: 8px; }.v2-alert-notifications > footer { display: flex; gap: 16px; border-top: 1px solid var(--v2-border); padding: 12px 13px; color: #7f8c9f; font-size: 7px; }.v2-alert-notifications > footer b { color: #4f5d72; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@keyframes v2-map-ripple { 0% { opacity: .8; transform: scale(.35); } 80%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes v2-panel-enter { from { opacity: .72; transform: translate3d(8px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@media (min-width: 1600px) and (min-height: 900px) {
.v2-filterbar { gap: 12px; padding: 11px 14px; }
.v2-search-field, .v2-filterbar select, .v2-primary-button, .v2-secondary-button { height: 40px; }
.v2-kpi { min-height: 70px; padding: 12px 17px; }
.v2-kpi small { font-size: 11px; }
.v2-kpi strong { margin-top: 7px; font-size: clamp(20px, 1.2vw, 27px); }
.v2-vehicle-rail > header { height: 50px; padding: 0 14px; }
.v2-rail-search { height: 36px; margin: 0 11px 9px; }
.v2-vehicle-row { min-height: 66px; padding: 9px 12px; }
.v2-vehicle-identity strong { font-size: 13px; }
.v2-vehicle-detail { padding: 16px; }
.v2-detail-title strong { font-size: 17px; }
.v2-detail-actions a { height: 32px; font-size: 9px; }
.v2-vehicle-detail h3 { font-size: 12px; }
.v2-detail-list > div { grid-template-columns: 84px minmax(0, 1fr); padding: 6px 0; font-size: 10px; }
.v2-metric-grid > div { padding: 11px; }
.v2-metric-grid small { font-size: 9px; }
.v2-metric-grid strong { font-size: 17px; }
.v2-event-strip { min-height: 52px; font-size: 10px; }
}
@media (min-width: 2200px) and (min-height: 1200px) {
.v2-monitor-page { gap: 14px; padding: 18px 22px 20px; }
.v2-filterbar { padding: 13px 16px; }
.v2-search-field, .v2-filterbar select, .v2-primary-button, .v2-secondary-button { height: 42px; font-size: 13px; }
.v2-kpi { min-height: 82px; padding: 15px 20px; }
.v2-kpi small { font-size: 12px; }
.v2-kpi strong { font-size: 28px; }
.v2-vehicle-rail > header { height: 54px; }
.v2-vehicle-rail > header strong { font-size: 14px; }
.v2-rail-search { height: 38px; font-size: 11px; }
.v2-vehicle-row { min-height: 72px; }
.v2-vehicle-identity strong { font-size: 14px; }
.v2-vehicle-motion strong { font-size: 12px; }
.v2-map-controls { top: 16px; right: 16px; }
.v2-map-layer-control, .v2-map-follow-control { height: 48px; padding: 0 12px; }
.v2-map-layer-control strong { font-size: 11px; }
.v2-map-layer-control small { font-size: 9px; }
.v2-map-follow-control strong { font-size: 11px; }
.v2-map-follow-control small { font-size: 9px; }
.v2-map-legend { bottom: 16px; height: 40px; gap: 22px; padding: 0 20px; font-size: 10px; }
.v2-vehicle-detail { padding: 19px; }
.v2-detail-title strong { font-size: 19px; }
.v2-detail-list > div { grid-template-columns: 92px minmax(0, 1fr); font-size: 11px; }
.v2-vehicle-detail h3 { font-size: 13px; }
.v2-metric-grid small { font-size: 10px; }
.v2-metric-grid strong { font-size: 19px; }
.v2-event-strip { min-height: 56px; padding: 0 20px; font-size: 11px; }
}
@media (max-width: 1180px) {
.v2-monitor-workspace { grid-template-columns: 220px minmax(420px, 1fr); }
.v2-monitor-workspace.is-detail-open { grid-template-columns: 220px minmax(420px, 1fr) 280px; }
.v2-monitor-workspace.is-detail-collapsed { grid-template-columns: 220px minmax(420px, 1fr) 42px; }
.v2-kpis { grid-template-columns: repeat(4, 1fr); }
.v2-kpi:nth-child(5)::before { display: none; }
.v2-identity-band { grid-template-columns: minmax(240px, 1fr) minmax(300px, 1fr); }
.v2-identity-actions { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--v2-border); }
.v2-record-grid { grid-template-columns: minmax(460px, 1.5fr) minmax(280px, 1fr); }
.v2-live-overview .v2-live-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.v2-live-overview .v2-live-grid > div:nth-child(4) { border-left: 0; }
.v2-live-overview .v2-live-grid > div:nth-child(n+4) { border-top: 1px solid var(--v2-border); }
.v2-current-location { grid-template-columns: minmax(260px,.8fr) minmax(320px,1.2fr); }
.v2-track-toolbar { grid-template-columns: minmax(210px, 1fr) repeat(3, minmax(140px, .7fr)); }
.v2-track-toolbar > button { min-width: 100px; }
.v2-track-workspace { grid-template-columns: minmax(500px, 1fr) 290px; }
.v2-track-playback { grid-template-columns: 180px minmax(210px, 1fr); }
.v2-current-metrics { grid-column: 1 / -1; border-top: 1px solid var(--v2-border); border-left: 0; padding-top: 6px; }
.v2-history-toolbar { grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.5fr) repeat(3, minmax(100px, .7fr)); }
.v2-history-toolbar button { min-width: 90px; }
.v2-history-workspace { grid-template-columns: minmax(600px, 1fr) 280px; }
.v2-access-filter { grid-template-columns: minmax(210px, 1fr) repeat(4, minmax(110px, .7fr)); }
.v2-access-filter button { min-width: 86px; }
.v2-access-advanced > div { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.v2-access-workspace { grid-template-columns: minmax(620px, 1fr) 280px; }
.v2-access-identity-queue > div { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.v2-alert-filter { grid-template-columns: minmax(180px,1fr) repeat(4,minmax(88px,.65fr)); }
.v2-alert-filter label:nth-of-type(6), .v2-alert-filter label:nth-of-type(7) { display: none; }
.v2-alert-workspace { grid-template-columns: minmax(620px,1fr) 290px; }
}
@media (max-width: 900px) {
.v2-sidebar { width: 68px; }
.v2-main { margin-left: 68px; }
.v2-nav-label, .v2-collapse span { display: none; }
.v2-brand { justify-content: center; padding: 0; }
.v2-brand-logo { display: none; }
.v2-brand-symbol { display: block; }
.v2-nav-item { justify-content: center; padding: 0; }
.v2-filterbar { grid-template-columns: 1fr 1fr; }
.v2-search-field { grid-column: 1 / -1; }
.v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { position: relative; grid-template-columns: 220px minmax(0, 1fr); }
.v2-vehicle-detail { position: absolute; inset: 10px 10px 10px auto; z-index: 8; display: block; width: min(340px, calc(100% - 240px)); border: 1px solid #d8e2ed; border-radius: 10px; box-shadow: 0 12px 36px rgba(21,32,51,.16); }
.v2-detail-peek { position: absolute; right: 10px; bottom: 10px; z-index: 8; display: block; min-width: 0; min-height: 0; border: 1px solid #cfe0f8; border-radius: 22px; box-shadow: 0 7px 24px rgba(18,104,243,.16); }
.v2-detail-peek button { width: auto; height: 44px; flex-direction: row; gap: 7px; border-radius: 22px; padding: 0 14px; }
.v2-detail-peek button > span { max-width: 130px; writing-mode: horizontal-tb; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.v2-identity-band { grid-template-columns: 1fr; }
.v2-identity-meta { border: 0; border-top: 1px solid var(--v2-border); border-bottom: 1px solid var(--v2-border); }
.v2-identity-actions { grid-column: auto; justify-content: stretch; border: 0; }
.v2-identity-actions a { flex: 1; justify-content: center; }
.v2-record-grid { display: flex; flex-direction: column; }
.v2-live-overview .v2-live-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.v2-live-overview .v2-live-grid > div:nth-child(odd) { border-left: 0; }
.v2-live-overview .v2-live-grid > div:nth-child(n+3) { border-top: 1px solid var(--v2-border); }
.v2-current-location { grid-template-columns: 1fr; }
.v2-current-location > span + span { border-top: 1px solid var(--v2-border); border-left: 0; }
.v2-single-map-card { min-height: 360px; }
.v2-archive-card, .v2-live-card, .v2-telemetry-card, .v2-events-card { grid-area: auto; }
.v2-track-page { height: auto; min-height: 100%; overflow: auto; }
.v2-track-toolbar { grid-template-columns: 1fr 1fr; }
.v2-track-vehicle-input { grid-column: 1 / -1; }
.v2-track-workspace { display: flex; flex-direction: column; }
.v2-track-main { min-height: 700px; flex: none; grid-template-rows: 34px 420px 58px 145px; }
.v2-track-inspector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; }
.v2-track-inspector > section + section { margin-top: 0; }
.v2-track-events { grid-column: 1 / -1; }
.v2-history-page { height: auto; min-height: 100%; overflow: auto; }
.v2-history-toolbar { grid-template-columns: 1fr 1fr; }
.v2-history-vehicles { grid-column: 1 / -1; }
.v2-history-range { grid-column: 1 / -1; }
.v2-history-workspace { display: flex; flex-direction: column; }
.v2-history-main { height: 760px; min-height: 0; flex: none; grid-template-rows: 58px 220px minmax(0, 1fr); }
.v2-history-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; }
.v2-history-side > section + section { margin-top: 0; }
.v2-access-page { height: auto; min-height: 100%; overflow: auto; }
.v2-access-filter { grid-template-columns: 1fr 1fr; }
.v2-access-filter label:first-child { grid-column: 1 / -1; }
.v2-access-advanced > div { grid-template-columns: 1fr 1fr; }
.v2-access-kpis { grid-template-columns: repeat(3, 1fr); }
.v2-access-kpis button:nth-child(4)::before { display: none; }
.v2-access-workspace { display: flex; flex-direction: column; }
.v2-access-identity-queue > div { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.v2-access-table-card { height: 620px; flex: none; }
.v2-access-side { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; overflow: visible; }
.v2-access-side > section + section { margin-top: 0; }
.v2-alert-page { height: auto; min-height: 100%; overflow: auto; }
.v2-alert-filter { grid-template-columns: repeat(3,1fr); }
.v2-alert-filter label:first-child { grid-column: 1/-1; }
.v2-alert-kpis { grid-template-columns: repeat(4,1fr); }
.v2-alert-kpis button:nth-child(5)::before { display: none; }
.v2-alert-workspace { display: flex; flex-direction: column; }
.v2-alert-table-card { height: 610px; flex: none; }
.v2-alert-inspector { max-height: none; overflow: visible; }
.v2-alert-rules { display: flex; flex-direction: column; }
.v2-alert-rule-list { max-height: 300px; flex: none; }
.v2-ops-kpis { grid-template-columns: repeat(3,1fr); }.v2-ops-grid { grid-template-columns: 1fr; }.v2-ops-sources > div { grid-template-columns: 1fr; }.v2-ops-sources article + article { border-top: 1px solid var(--v2-border); border-left: 0; }
.v2-reconcile-kpis { grid-template-columns: repeat(3,1fr); }.v2-reconcile-layout { grid-template-columns: minmax(0,1fr) 220px; }.v2-reconcile-toolbar { grid-template-columns: minmax(220px,1fr) repeat(2,minmax(120px,auto)); }.v2-reconcile-toolbar select:last-child { grid-column: span 2; }
.v2-source-summary { grid-template-columns: repeat(2,1fr); }.v2-source-summary article:nth-child(3) { border-left: 0; }.v2-source-summary article:nth-child(n+3) { border-top: 1px solid #e7edf4; }
}
.v2-mileage-page { display: flex; min-height: 100%; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.v2-mileage-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.v2-mileage-heading h2 { margin: 0; color: #172033; font-size: 24px; font-weight: 720; letter-spacing: -.04em; }
.v2-mileage-heading p { margin: 6px 0 0; color: #748196; font-size: 12px; line-height: 1.5; }
.v2-mileage-heading > button { display: flex; height: 36px; align-items: center; gap: 7px; border: 1px solid #d8e0eb; border-radius: 8px; background: #fff; padding: 0 13px; color: #56657a; cursor: pointer; font-size: 12px; font-weight: 600; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.v2-mileage-heading > button:hover { border-color: #aebed3; background: #f8fafc; color: #1f4e8c; }
.v2-mileage-query-panel { overflow: visible; border: 1px solid #d9e2ed; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(24,39,62,.055); }
.v2-mileage-filter { display: grid; grid-template-columns: minmax(320px,1.5fr) minmax(132px,.55fr) minmax(132px,.55fr) auto auto auto; align-items: start; gap: 12px; padding: 16px 18px 15px; }
.v2-mileage-filter > label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #4f5f75; font-size: 11px; font-weight: 650; }
.v2-mileage-filter > label > input { width: 100%; height: 40px; border: 1px solid #d7e0ea; border-radius: 7px; background: #fff; padding: 0 11px; color: #253248; outline: 0; font-family: inherit; font-size: 13px; transition: border-color .16s ease, box-shadow .16s ease; }
.v2-mileage-filter > label > input:focus, .v2-mileage-multiselect:focus-within { border-color: #6d9ff1; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.v2-mileage-filter > .v2-primary-button { height: 40px; margin-top: 18px; border-radius: 7px; padding: 0 22px; box-shadow: 0 4px 10px rgba(37,99,235,.16); font-size: 12px; }
.v2-mileage-validation { margin: -5px 20px 14px; border: 1px solid #f1c5c8; border-radius: 7px; background: #fff7f7; padding: 9px 11px; color: #b54046; font-size: 11px; line-height: 1.5; }
.v2-mileage-vehicle-field { position: relative; }
.v2-mileage-vehicle-field > small { color: #96a1b0; font-size: 9px; font-weight: 400; }
.v2-mileage-multiselect { position: relative; display: flex; min-height: 40px; align-items: flex-start; gap: 8px; border: 1px solid #d7e0ea; border-radius: 7px; background: #fff; padding: 6px 10px; color: #8a98aa; transition: border-color .16s ease, box-shadow .16s ease; }
.v2-mileage-multiselect > svg { flex: 0 0 auto; margin-top: 5px; }
.v2-mileage-selection { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: 4px; }
.v2-mileage-selection > input { width: 120px; min-width: 90px; height: 26px; flex: 1; border: 0; background: transparent; padding: 0 3px; color: var(--v2-text); outline: 0; font-family: inherit; font-size: 12px; }
.v2-mileage-chip { display: inline-flex; max-width: 150px; height: 26px; align-items: center; gap: 4px; border: 1px solid #c8daf6; border-radius: 5px; background: #eff5ff; padding: 0 6px 0 8px; color: #245da8; cursor: pointer; font-size: 10px; }
.v2-mileage-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-chip svg { flex: 0 0 auto; font-size: 9px; }
.v2-mileage-options { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; left: 0; overflow: hidden; border: 1px solid #d8e1ed; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(35,53,78,.16); }
.v2-mileage-options > header { display: flex; height: 34px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f5; padding: 0 11px; color: #77859a; font-size: 9px; }
.v2-mileage-options > header em { font-style: normal; }
.v2-mileage-options > button { display: grid; width: 100%; min-height: 42px; grid-template-columns: minmax(90px,.55fr) minmax(150px,1fr) auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #f0f3f7; background: #fff; padding: 7px 11px; color: var(--v2-text); cursor: pointer; text-align: left; }
.v2-mileage-options > button:hover { background: #f6f9fd; }
.v2-mileage-options > button:disabled { color: #8491a3; cursor: default; }
.v2-mileage-options > button strong { font-size: 11px; }
.v2-mileage-options > button span { overflow: hidden; color: #7d899a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; }
.v2-mileage-options > button em { color: var(--v2-blue); font-size: 9px; font-style: normal; }
.v2-mileage-options > p { margin: 0; padding: 16px; color: var(--v2-muted); text-align: center; font-size: 10px; }
.v2-vehicle-option-error { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 10px; background: #fff8f8; padding: 9px 11px; color: #b44848; font-size: 10px; line-height: 1.45; }
.v2-vehicle-option-error > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-vehicle-option-error > button { height: 28px; flex: 0 0 auto; border: 1px solid #efc3c3; border-radius: 6px; background: #fff; padding: 0 10px; color: #ad4141; cursor: pointer; font-size: 10px; font-weight: 700; }
.v2-mileage-source-strategy { position: relative; align-self: start; margin-top: 18px; }
.v2-mileage-source-trigger { display: flex; height: 40px; align-items: center; gap: 6px; border: 1px solid #d7e0ea; border-radius: 7px; background: #fff; padding: 0 11px; color: #56657a; cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap; transition: border-color .16s ease, background .16s ease; }
.v2-mileage-source-trigger:hover, .v2-mileage-source-trigger[aria-expanded="true"] { border-color: #a8bad2; background: #f8fafc; }
.v2-mileage-source-trigger b { display: grid; min-width: 28px; height: 20px; place-items: center; border-radius: 10px; background: #eef4fd; color: #3167ad; font-size: 9px; }
.v2-mileage-source-popover { position: absolute; z-index: 45; top: calc(100% + 7px); right: 0; width: 430px; overflow: hidden; border: 1px solid #d8e1ed; border-radius: 10px; background: #fff; box-shadow: 0 18px 44px rgba(35,53,78,.18); }
.v2-mileage-source-popover > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f5; padding: 0 14px 0 16px; }
.v2-mileage-source-popover > header div { display: flex; flex-direction: column; gap: 3px; }
.v2-mileage-source-popover > header strong { color: #263448; font-size: 13px; }
.v2-mileage-source-popover > header span, .v2-mileage-source-popover > footer span { color: #8491a3; font-size: 9px; }
.v2-mileage-source-popover > header button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #7d899a; cursor: pointer; }
.v2-mileage-source-list article { display: grid; min-height: 62px; grid-template-columns: auto minmax(130px,1fr) 72px auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf1f5; padding: 8px 13px 8px 16px; }
.v2-mileage-source-list article.is-disabled { background: #fafbfc; }
.v2-mileage-source-switch { position: relative; width: 32px; height: 18px; border: 0; border-radius: 9px; background: #c9d1dc; padding: 0; cursor: pointer; transition: background .16s ease; }
.v2-mileage-source-switch i { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.2); transition: transform .16s ease; }
.v2-mileage-source-switch.is-on { background: var(--v2-blue); }
.v2-mileage-source-switch.is-on i { transform: translateX(14px); }
.v2-mileage-source-list article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.v2-mileage-source-list article > div strong { color: #344257; font-size: 11px; }
.v2-mileage-source-list article > div small { display: flex; min-width: 0; align-items: center; gap: 7px; color: #8a96a7; font-size: 8px; }
.v2-mileage-source-list article > div small b { color: #55708f; font-size: 9px; font-weight: 650; }
.v2-mileage-source-list article > div code { overflow: hidden; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-source-list article > em { color: #5f7190; font-size: 9px; font-style: normal; text-align: right; white-space: nowrap; }
.v2-mileage-source-list article.is-disabled > div, .v2-mileage-source-list article.is-disabled > em { opacity: .58; }
.v2-mileage-source-list article > p { display: flex; gap: 3px; margin: 0; }
.v2-mileage-source-list article > p button { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #dce4ee; border-radius: 5px; background: #fff; color: #65758b; cursor: pointer; }
.v2-mileage-source-list article > p button:disabled { opacity: .32; cursor: default; }
.v2-mileage-source-popover > footer { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px 0 16px; }
.v2-mileage-source-popover > footer button { height: 30px; border: 0; border-radius: 6px; background: var(--v2-blue); padding: 0 13px; color: #fff; cursor: pointer; font-size: 10px; font-weight: 650; }
.v2-mileage-ranges { display: flex; align-items: center; align-self: end; gap: 3px; margin-bottom: 1px; border-radius: 8px; background: #f3f6fa; padding: 2px; }
.v2-mileage-ranges > span { display: none; }
.v2-mileage-ranges button { height: 34px; border: 0; border-radius: 6px; background: transparent; padding: 0 9px; color: #64748b; cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.v2-mileage-ranges button:hover { background: #f1f5fb; color: var(--v2-blue); }
.v2-mileage-ranges button.is-active { background: #fff; color: var(--v2-blue); box-shadow: 0 1px 4px rgba(20,44,78,.12); }
.v2-mileage-summary { display: grid; grid-template-columns: minmax(330px,.9fr) minmax(0,1.55fr); border-top: 1px solid #e3e9f1; background: #f7f9fc; }
.v2-mileage-summary article { min-width: 0; }
.v2-mileage-summary small, .v2-mileage-summary span { display: block; overflow: hidden; color: #7c899b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-summary strong { display: block; margin: 7px 0 4px; overflow: hidden; color: #172033; font-size: clamp(20px,1.6vw,26px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-summary > .is-primary { position: relative; overflow: hidden; background: #1268f3; padding: 18px 24px 20px; color: #fff; }
.v2-mileage-summary > .is-primary small, .v2-mileage-summary > .is-primary span { position: relative; z-index: 1; color: rgba(255,255,255,.76); }
.v2-mileage-summary > .is-primary strong { position: relative; z-index: 1; color: #fff; font-size: clamp(27px,2.15vw,36px); }
.v2-mileage-summary-secondary { display: grid; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); background: #fff; }
.v2-mileage-summary-secondary article { position: relative; display: flex; min-width: 0; justify-content: center; flex-direction: column; padding: 17px 20px 18px; }
.v2-mileage-summary-secondary article + article::before { position: absolute; inset: 17px auto 17px 0; width: 1px; background: #e0e6ee; content: ""; }
.v2-mileage-results { display: flex; min-height: 430px; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid #d9e2ed; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(24,39,62,.05); }
.v2-mileage-results > header, .v2-mileage-results > footer { display: flex; min-height: 54px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; }
.v2-mileage-results > header { border-bottom: 1px solid #e4e9f0; }
.v2-mileage-results > header div { display: flex; align-items: baseline; gap: 10px; }
.v2-mileage-results > header strong { color: #17253a; font-size: 15px; }
.v2-mileage-results > header span, .v2-mileage-results > header em, .v2-mileage-results > footer { color: #7c899b; font-size: 10px; font-style: normal; }
.v2-mileage-results > header .v2-mileage-result-actions { align-items: center; gap: 12px; }
.v2-mileage-result-actions > button { display: inline-flex; height: 32px; align-items: center; gap: 6px; border: 1px solid #cbd8e8; border-radius: 7px; background: #fff; padding: 0 11px; color: #315f9f; cursor: pointer; font-size: 10px; font-weight: 650; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.v2-mileage-result-actions > button:hover { border-color: #99b6dd; background: #f5f9ff; box-shadow: 0 2px 7px rgba(37,99,235,.08); }
.v2-mileage-result-actions > button.is-refresh { border-color: transparent; background: #f2f5f9; color: #5f6f84; box-shadow: none; }
.v2-mileage-result-actions > button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.v2-mileage-export-progress { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; border-bottom: 1px solid #e4e9f0; background: #f7faff; padding: 9px 18px; }
.v2-mileage-export-progress > span { display: flex; min-width: 190px; align-items: center; justify-content: space-between; gap: 12px; color: #315f9f; font-size: 10px; }
.v2-mileage-export-progress > span strong { font-weight: 650; }.v2-mileage-export-progress > span small { color: #6f8198; font-variant-numeric: tabular-nums; }
.v2-mileage-export-progress > i { position: relative; height: 5px; flex: 1; overflow: hidden; border-radius: 999px; background: #dce8f8; }
.v2-mileage-export-progress > i b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--v2-blue); transition: width .18s ease; }
.v2-mileage-export-progress > i.is-indeterminate b { width: 38%; animation: v2-export-progress 1.1s ease-in-out infinite; }
@keyframes v2-export-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
.v2-mileage-table-wrap { min-height: 0; flex: 1; overflow: auto; }
.v2-mileage-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.v2-mileage-table th { position: sticky; z-index: 2; top: 0; height: 46px; border-bottom: 1px solid #dfe6ef; background: #f5f8fc; padding: 0 14px; color: #526279; font-size: 11px; font-weight: 700; text-align: left; white-space: nowrap; }
.v2-mileage-table td { height: 56px; border-bottom: 1px solid #e8edf3; padding: 0 14px; color: #46556a; white-space: nowrap; }
.v2-mileage-table tbody tr:hover { background: #f8fbff; }
.v2-mileage-table td strong { color: #263448; }
.v2-mileage-table code { color: #69778b; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; }
.v2-mileage-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }
.v2-mileage-table .is-date { min-width: 96px; text-align: center; }
.v2-mileage-table .is-sticky { position: sticky; z-index: 3; background: #fff; }
.v2-mileage-table th.is-sticky { z-index: 5; background: #f7f9fc; }
.v2-mileage-table .is-plate { left: 0; width: 120px; min-width: 120px; }
.v2-mileage-table .is-vin { left: 120px; width: 182px; min-width: 182px; border-right: 1px solid #d8e0ea; box-shadow: 5px 0 10px rgba(15,23,42,.025); }
.v2-mileage-table .is-total { position: sticky; z-index: 3; right: 0; min-width: 128px; border-left: 1px solid #d8e0ea; background: #fbfdff; box-shadow: -5px 0 10px rgba(15,23,42,.025); }
.v2-mileage-table th.is-total { z-index: 5; background: #f1f6fe; color: #315f9f; }
.v2-mileage-table .is-daily { color: #28496f; font-size: 11px; font-weight: 650; }
.v2-mileage-table .is-empty { color: #b2bcc9; text-align: center; }
.v2-mileage-table .is-period { color: #135fcb; font-size: 12px; font-weight: 800; }
.v2-mileage-source { display: inline-flex; height: 22px; align-items: center; border: 1px solid #dbe4ef; border-radius: 4px; background: #f8fafc; padding: 0 7px; color: #66758a; font-size: 8px; }
.v2-mileage-results > footer { border-top: 1px solid var(--v2-border); background: #fbfcfe; }
.v2-mileage-results > footer div { display: flex; gap: 6px; }
.v2-mileage-results > footer button { height: 29px; border: 1px solid #d7e0eb; border-radius: 6px; background: #fff; padding: 0 12px; color: #50627a; cursor: pointer; font-size: 9px; font-weight: 600; }
.v2-mileage-results > footer button:hover:not(:disabled) { border-color: #a9bdd7; background: #f5f8fc; color: #315f9f; }
.v2-mileage-results > footer button:disabled { opacity: .45; cursor: not-allowed; }
.v2-mileage-mobile-list { display: none; }
.v2-mileage-loading { display: flex; min-height: 210px; flex: 1; align-items: center; justify-content: center; gap: 10px; color: #52637a; }
.v2-mileage-loading > div { display: flex; flex-direction: column; gap: 3px; }
.v2-mileage-loading strong { color: #2c3d54; font-size: 12px; }
.v2-mileage-loading small { color: #8491a3; font-size: 9px; }
.v2-mileage-empty { display: grid; min-height: 210px; flex: 1; place-items: center; color: #8290a3; font-size: 12px; }
.v2-mileage-evidence { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--v2-muted); font-size: 9px; }
@media (max-width: 1050px) {
.v2-mileage-filter { grid-template-columns: repeat(2,minmax(0,1fr)) auto auto; }
.v2-mileage-vehicle-field { grid-column: 1 / -1; }
.v2-mileage-filter > .v2-primary-button { width: auto; margin-top: 18px; }
.v2-mileage-ranges { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
html, body, #root { min-width: 320px; min-height: 100%; }
body { overscroll-behavior-y: none; }
.v2-auth-screen { min-height: 100dvh; padding: 16px; }
.v2-auth-card { padding: 26px 20px; }
.v2-auth-card input { height: 46px; font-size: 16px; }
.v2-auth-card button { height: 46px; }
.v2-sidebar { inset: auto 0 0 0; width: auto; height: calc(64px + env(safe-area-inset-bottom)); flex-direction: row; border: 0; border-top: 1px solid var(--v2-border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px rgba(21,32,51,.07); }
.v2-brand, .v2-collapse, .v2-nav-operations { display: none; }
.v2-navigation { display: grid; width: 100%; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 4px 3px; }
.v2-nav-item { height: 56px; justify-content: center; flex-direction: column; gap: 2px; padding: 3px 0 2px; border-radius: 8px; font-weight: 600; }
.v2-nav-item > svg { flex: 0 0 auto; font-size: 18px; }
.v2-nav-label, .v2-sidebar.is-collapsed .v2-nav-label { display: block; max-width: 100%; overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; }
.v2-nav-item.is-active::before { inset: auto auto 0; width: 20px; height: 2px; }
.v2-main, .v2-sidebar.is-collapsed + .v2-main { margin-left: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.v2-topbar { height: 52px; flex: 0 0 52px; padding: 0 10px 0 14px; }
.v2-topbar h1 { font-size: 17px; }
.v2-topbar-actions { gap: 0; }
.v2-topbar-actions button { width: 40px; height: 40px; }
.v2-help-panel { top: 48px; right: 7px; padding: 16px; }
.v2-current-user { display: none; }
.v2-content { overscroll-behavior: contain; }
.v2-monitor-page { height: auto; min-height: 100%; gap: 8px; overflow: visible; padding: 8px; }
.v2-filterbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 9px; box-shadow: 0 4px 16px rgba(21,32,51,.04); }
.v2-search-field { grid-column: 1 / -1; height: 44px; }
.v2-search-field input, .v2-filterbar select { font-size: 16px; }
.v2-filterbar select, .v2-primary-button, .v2-secondary-button, .v2-filter-live-status { height: 44px; }
.v2-primary-button, .v2-secondary-button { padding: 0 10px; font-size: 12px; }
.v2-monitor-mode { height: 44px; }
.v2-monitor-mode button { flex: 1; font-size: 12px; }
.v2-monitor-mobile-entry { height: 44px; font-size: 12px; }
.v2-kpis { display: flex; min-width: 0; overflow-x: auto; border-radius: 9px; scroll-snap-type: x proximity; scrollbar-width: none; }
.v2-kpis::-webkit-scrollbar { display: none; }
.v2-kpi { width: 108px; min-width: 108px; min-height: 70px; flex: 0 0 108px; padding: 11px 13px; scroll-snap-align: start; }
.v2-kpi + .v2-kpi::before, .v2-kpi:nth-child(odd)::before { display: block; }
.v2-kpi small { font-size: 10px; }
.v2-kpi strong { margin-top: 7px; font-size: 20px; }
.v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { min-height: calc(52dvh + 360px); flex: none; grid-template-columns: 1fr; grid-template-rows: minmax(360px, 52dvh) 360px; overflow: hidden; }
.v2-monitor-table-panel { min-height: 68dvh; flex: none; }
.v2-monitor-table-panel > header { align-items: flex-start; flex-direction: column; gap: 4px; padding: 10px 12px; }
.v2-monitor-table-scroll { display: none; }
.v2-monitor-mobile-cards { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 8px; overflow: auto; padding: 8px; background: #f5f7fa; }
.v2-monitor-mobile-cards > article { border: 1px solid #e0e6ee; border-radius: 10px; background: #fff; padding: 12px; box-shadow: 0 2px 8px rgba(21,32,51,.04); content-visibility: auto; contain-intrinsic-size: auto 154px; }
.v2-monitor-mobile-cards > article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.v2-monitor-mobile-cards > article > header div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.v2-monitor-mobile-cards > article > header strong { font-size: 15px; }.v2-monitor-mobile-cards > article > header span { color: #7f8da1; font-size: 10px; }
.v2-monitor-mobile-cards > article > header > b { color: #1f4f8d; font-size: 18px; font-variant-numeric: tabular-nums; }.v2-monitor-mobile-cards > article > header > b small { margin-left: 3px; color: #8996a8; font-size: 8px; font-weight: 500; }
.v2-monitor-mobile-cards dl { display: grid; grid-template-columns: .72fr 1.28fr; gap: 10px; margin: 12px 0 0; border-top: 1px solid #edf1f6; padding-top: 11px; }
.v2-monitor-mobile-cards dl > div { min-width: 0; }.v2-monitor-mobile-cards dl > div.is-address { grid-column: 1 / -1; }
.v2-monitor-mobile-cards dt { color: #8a97a9; font-size: 9px; }.v2-monitor-mobile-cards dd { margin: 4px 0 0; color: #34445a; font-size: 11px; font-weight: 650; }
.v2-monitor-mobile-cards dd code { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-weight: 500; }
.v2-monitor-mobile-cards .v2-monitor-address-result > span { white-space: normal; }
.v2-monitor-mobile-cards > article > footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 10px; border-top: 1px solid #edf1f6; padding-top: 10px; }
.v2-monitor-mobile-cards > article > footer button { display: flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--v2-blue); font-size: 11px; font-weight: 700; }
.v2-monitor-table-panel > footer { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 4; background: #fff; }
.v2-vehicle-rail { grid-row: 2; border: 0; border-top: 1px solid var(--v2-border); }
.v2-fleet-map { grid-row: 1; }
.v2-vehicle-rail > header { height: 48px; }
.v2-rail-search { height: 40px; }
.v2-vehicle-row { min-height: 64px; padding: 9px 11px; }
.v2-vehicle-identity strong { font-size: 13px; }
.v2-map-controls { top: 8px; right: 8px; gap: 6px; }
.v2-map-layer-control, .v2-map-follow-control { width: 44px; height: 44px; grid-template-columns: 1fr; justify-items: center; padding: 0; }
.v2-map-layer-control span:not(.semi-icon), .v2-map-layer-control > i, .v2-map-follow-control span:not(.semi-icon) { display: none; }
.v2-map-layer-control .semi-icon, .v2-map-follow-control .semi-icon { display: inline-flex; font-size: 18px; }
.v2-province-marker.is-compact { width: 68px; min-height: 42px; grid-template-columns: minmax(0,1fr) auto; gap: 4px; border-radius: 8px; padding: 6px 7px; }
.v2-province-marker.is-compact > span { font-size: 11px; }
.v2-province-marker.is-compact > strong { grid-row: auto; grid-column: auto; font-size: 17px; }
.v2-province-marker.is-compact > small, .v2-province-marker.is-compact > i { display: none; }
.v2-map-legend { right: 8px; bottom: 8px; left: 8px; width: auto; max-width: none; height: 36px; justify-content: flex-start; gap: 13px; overflow-x: auto; padding: 0 12px; transform: none; white-space: nowrap; scrollbar-width: none; }
.v2-map-legend::-webkit-scrollbar { display: none; }
.v2-map-legend b { margin-left: auto; }
.v2-vehicle-detail { position: fixed; inset: auto 8px calc(72px + env(safe-area-inset-bottom)) 8px; z-index: 70; display: block; width: auto; height: min(68dvh, 620px); min-height: 300px; contain: layout paint; overscroll-behavior: contain; border: 1px solid #d8e2ed; border-radius: 14px; background: #fff; padding: 18px 15px 20px; box-shadow: 0 -10px 44px rgba(21,32,51,.2); animation: v2-mobile-sheet-enter .18s ease-out; }
.v2-vehicle-detail::before { display: block; width: 38px; height: 4px; margin: -8px auto 10px; border-radius: 2px; background: #d7e0eb; content: ""; }
.v2-detail-controls { top: 13px; right: 12px; }
.v2-detail-controls button { width: 36px; height: 36px; }
.v2-detail-title { padding: 0 82px 14px 0; }
.v2-detail-title strong { font-size: 18px; }
.v2-detail-actions { position: sticky; top: -18px; z-index: 2; background: #fff; padding: 10px 0; }
.v2-detail-actions a { min-height: 38px; font-size: 10px; }
.v2-detail-list > div { grid-template-columns: 82px minmax(0, 1fr); font-size: 11px; }
.v2-metric-grid small { font-size: 10px; }
.v2-metric-grid strong { font-size: 17px; }
.v2-detail-peek { position: fixed; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 65; display: block; min-width: 0; min-height: 0; border: 1px solid #cfe0f8; border-radius: 22px; box-shadow: 0 7px 24px rgba(18,104,243,.18); }
.v2-detail-peek button { width: auto; height: 44px; flex-direction: row; gap: 7px; border-radius: 22px; padding: 0 14px; background: #fff; }
.v2-detail-peek button > span { max-width: 120px; writing-mode: horizontal-tb; font-size: 11px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.v2-event-strip { flex-wrap: wrap; gap: 7px 12px; padding: 10px 12px; line-height: 1.4; }
.v2-event-strip > strong { width: 100%; }
.v2-refresh-cadence { border-left: 0; padding-left: 0; }
.v2-event-strip time { width: 100%; margin: 0; }
.v2-vehicle-record-page { overflow: auto; padding: 8px; }
.v2-vehicle-search-page { padding: 12px; }
.v2-vehicle-search-card { padding: 30px 18px; }
.v2-vehicle-search-card form { height: auto; flex-wrap: wrap; padding: 8px; }
.v2-vehicle-search-card form button { width: 100%; justify-content: center; }
.v2-vehicle-search-page.has-sync-panel { align-content: start; }
.v2-profile-sync-panel { padding: 13px; }
.v2-profile-sync-fields { grid-template-columns: 1fr; }
.v2-profile-sync-result > div { grid-template-columns: repeat(3,1fr); gap: 8px; }
.v2-profile-sync-panel > footer button { flex: 1; }
.v2-identity-actions { flex-wrap: wrap; }
.v2-identity-actions a { flex-basis: calc(50% - 4px); }
.v2-identity-meta { grid-template-columns: 1fr; }
.v2-identity-meta > div + div { margin-top: 12px; border: 0; border-top: 1px solid var(--v2-border); padding: 12px 0 0; }
.v2-single-map-card { min-height: 300px; }
.v2-single-map-card footer { align-items: flex-start; flex-direction: column; gap: 4px; padding: 8px 12px; }
.v2-telemetry-list { grid-template-columns: 1fr; }
.v2-telemetry-list > div:nth-child(odd) { border-right: 0; }
.v2-live-grid { grid-template-columns: repeat(2, 1fr); }
.v2-live-overview .v2-live-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.v2-live-grid > div:nth-child(3), .v2-live-grid > div:nth-child(5) { border-left: 0; }
.v2-live-grid > div:nth-child(n+3) { border-top: 1px solid var(--v2-border); }
.v2-current-location > span { grid-template-columns: auto auto minmax(0,1fr); padding: 10px 12px; }
.v2-current-address { grid-template-columns: auto minmax(0,1fr) !important; }
.v2-current-address > button:last-child { grid-column: 2; }
.v2-track-page { padding: 8px; }
.v2-track-toolbar { grid-template-columns: 1fr; }
.v2-track-vehicle-input { grid-column: auto; }
.v2-track-toolbar > button { width: 100%; }
.v2-track-main { min-height: 770px; grid-template-rows: auto 400px auto 205px; }
.v2-track-map-legend { right: 8px; bottom: 8px; left: 8px; justify-content: center; }
.v2-track-map-legend b { display: none; }
.v2-track-coverage { min-height: 52px; flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; }
.v2-track-coverage span { width: calc(100% - 20px); white-space: normal; }
.v2-track-coverage em { width: 100%; margin-left: 14px; }
.v2-track-timeline { min-height: 74px; grid-template-columns: 1fr; gap: 6px; padding: 8px 10px; }
.v2-track-timeline header { flex-direction: row; justify-content: space-between; }
.v2-track-timeline > em { grid-column: 1; }
.v2-track-playback { display: flex; align-items: stretch; flex-direction: column; gap: 12px; padding: 10px; }
.v2-play-controls { display: flex; align-items: center; justify-content: space-between; }
.v2-play-controls small { margin: 0; }
.v2-play-progress { border: 0; padding: 0; }
.v2-track-inspector { display: flex; flex-direction: column; }
.v2-history-page { padding: 8px; }
.v2-history-toolbar { grid-template-columns: 1fr; }
.v2-history-vehicles { grid-column: auto; }
.v2-history-range { grid-column: auto; }
.v2-history-toolbar button { width: 100%; }
.v2-history-summary { grid-template-columns: 1fr 1fr; min-height: 106px; }
.v2-history-summary > div:nth-child(3)::before { display: none; }
.v2-history-main { height: 1111px; grid-template-rows: 106px 385px minmax(0, 600px); }
.v2-history-trend > header { align-items: flex-start; flex-direction: column; gap: 6px; padding: 7px 10px; }
.v2-history-trend > header div { flex-wrap: wrap; gap: 5px 10px; }
.v2-history-trend-panels { grid-template-columns: 1fr; grid-auto-rows: 152px; }
.v2-history-side { display: flex; flex-direction: column; }
.v2-access-page { padding: 8px; }
.v2-access-filter { grid-template-columns: 1fr; }
.v2-access-filter label:first-child { grid-column: auto; }
.v2-access-filter button { width: 100%; }
.v2-access-advanced > div { grid-template-columns: 1fr; }
.v2-access-kpis { grid-template-columns: repeat(2, 1fr); }
.v2-access-identity-queue summary { align-items: flex-start; flex-direction: column; gap: 3px; }
.v2-access-identity-queue > div { grid-template-columns: 1fr; }
.v2-access-kpis button:nth-child(4)::before { display: block; }
.v2-access-kpis button:nth-child(odd)::before { display: none; }
.v2-access-protocols header { align-items: flex-start; flex-direction: column; gap: 4px; }
.v2-access-table-card { height: 600px; }
.v2-access-table-card > header { align-items: flex-start; height: auto; flex-direction: column; gap: 7px; padding: 8px 9px; }
.v2-access-table-card > header div { width: 100%; overflow-x: auto; }
.v2-access-table-card > footer { align-items: flex-start; height: auto; flex-direction: column; gap: 7px; padding: 8px 9px; }
.v2-access-side { display: flex; flex-direction: column; }
.v2-alert-page { padding: 0 8px 8px; }
.v2-alert-heading { margin: 0 -8px; padding: 0 10px; }
.v2-alert-heading > div { align-items: flex-start; flex-direction: column; gap: 3px; }
.v2-alert-heading p { margin: 0; }
.v2-alert-tabs { margin: 0 -8px 8px; padding: 0 9px; }
.v2-alert-filter { grid-template-columns: 1fr; }
.v2-alert-filter label:first-child { grid-column: auto; }
.v2-alert-filter label:nth-of-type(6), .v2-alert-filter label:nth-of-type(7) { display: flex; }
.v2-alert-filter button { width: 100%; }
.v2-alert-kpis { grid-template-columns: repeat(2,1fr); }
.v2-alert-kpis button:nth-child(5)::before { display: block; }
.v2-alert-kpis button:nth-child(odd)::before { display: none; }
.v2-alert-table-card { height: 590px; }
.v2-alert-table-card > header, .v2-alert-table-card > footer { align-items: flex-start; height: auto; flex-direction: column; gap: 6px; padding: 7px 9px; }
.v2-alert-inspector { max-height: none; }
.v2-rule-form-grid { grid-template-columns: 1fr; padding: 10px; }
.v2-rule-form-grid label.is-wide { grid-column: auto; }
.v2-alert-rule-editor > footer { align-items: stretch; flex-direction: column; }
.v2-alert-notifications > footer { flex-direction: column; gap: 5px; }
.v2-ops-page { padding: 8px; }.v2-ops-heading { align-items: flex-start; flex-direction: column; gap: 8px; }.v2-ops-kpis { grid-template-columns: 1fr 1fr; }.v2-ops-kpis article + article::before { display: none; }.v2-ops-kpis article { border-bottom: 1px solid var(--v2-border); }
.v2-reconcile-heading { align-items: flex-start; flex-direction: column; }.v2-reconcile-heading button { width: 100%; justify-content: center; }.v2-reconcile-kpis { grid-template-columns: 1fr 1fr; }.v2-reconcile-kpis article + article::before { display: none; }.v2-reconcile-kpis article { border-bottom: 1px solid #e5ebf2; }.v2-reconcile-layout { display: block; min-height: 520px; }.v2-reconcile-main { border-right: 0; }.v2-reconcile-toolbar { grid-template-columns: 1fr 1fr; }.v2-reconcile-search { grid-column: 1 / -1; }.v2-reconcile-toolbar select:last-child { grid-column: 1 / -1; }.v2-reconcile-trend { border-top: 1px solid #e3eaf2; }.v2-reconcile-detail { position: fixed; inset: 54px 0 0; width: auto; border-left: 0; }.v2-reconcile-identity { grid-template-columns: 1fr; }.v2-reconcile-identity div + div { border-top: 1px solid #e5ebf2; border-left: 0; }.v2-reconcile-evidence dl div { grid-template-columns: 96px minmax(0,1fr); }
.v2-source-diagnostic > header { align-items: flex-start; flex-direction: column; gap: 8px; }.v2-source-diagnostic > header button { width: 100%; }.v2-source-search { flex-direction: column; }.v2-source-search > label { width: auto; min-width: 0; height: 42px; }.v2-source-search > button { width: 100%; }.v2-source-candidates { top: 61px; right: 14px; }.v2-source-candidates > button { grid-template-columns: 1fr; gap: 3px; }.v2-source-summary { grid-template-columns: 1fr; }.v2-source-summary article + article, .v2-source-summary article:nth-child(3) { border-top: 1px solid #e7edf4; border-left: 0; }.v2-source-audit > header { height: auto; align-items: flex-start; flex-direction: column; gap: 3px; padding-block: 7px; }.v2-source-audit li { grid-template-columns: 35px minmax(0,1fr); }.v2-source-audit li em { grid-column: 2; }
.v2-mileage-page { gap: 10px; padding: 12px 8px 18px; }
.v2-mileage-heading { align-items: flex-start; flex-direction: row; gap: 10px; }
.v2-mileage-heading h2 { font-size: 18px; }
.v2-mileage-heading p { line-height: 1.6; }
.v2-mileage-heading > button { width: auto; height: 36px; flex: 0 0 auto; justify-content: center; padding: 0 11px; }
.v2-mileage-query-panel { border-radius: 10px; }
.v2-mileage-filter { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
.v2-mileage-vehicle-field { grid-column: auto; }
.v2-mileage-filter > label > input { height: 44px; font-size: 16px; }
.v2-mileage-multiselect { min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
.v2-mileage-selection > input { height: 28px; font-size: 16px; }
.v2-mileage-filter > .v2-primary-button { height: 44px; margin-top: 0; }
.v2-mileage-source-strategy { margin-top: 0; }
.v2-mileage-source-trigger { width: 100%; height: 44px; justify-content: center; }
.v2-mileage-source-popover { position: fixed; top: 70px; right: 8px; bottom: auto; left: 8px; width: auto; max-height: calc(100dvh - 142px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.v2-mileage-source-popover > header { position: sticky; z-index: 2; top: 0; background: #fff; }
.v2-mileage-source-popover > footer { position: sticky; z-index: 2; bottom: 0; background: #fff; }
.v2-mileage-source-list article { grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; padding-right: 11px; padding-left: 12px; }
.v2-mileage-source-list article > p { grid-column: 2 / -1; justify-content: flex-end; margin-top: -5px; }
.v2-mileage-ranges { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
.v2-mileage-ranges button { height: 36px; background: #f6f8fb; }
.v2-mileage-options > button { grid-template-columns: minmax(80px,.7fr) minmax(0,1fr); }
.v2-mileage-options > button em { display: none; }
.v2-mileage-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.v2-mileage-summary article { padding: 13px 14px 14px; }
.v2-mileage-summary article:nth-child(3)::before { display: none; }
.v2-mileage-summary article:nth-child(-n+2) { border-bottom: 1px solid #e5eaf1; }
.v2-mileage-summary strong { font-size: 18px; }
.v2-mileage-results { min-height: 420px; overflow: visible; }
.v2-mileage-results > header { align-items: flex-start; height: auto; flex-direction: column; gap: 4px; padding: 11px 12px; }
.v2-mileage-results > header div { align-items: flex-start; flex-direction: column; gap: 3px; }
.v2-mileage-results > header .v2-mileage-result-actions { width: 100%; align-items: center; justify-content: space-between; flex-direction: row; gap: 8px; }
.v2-mileage-result-actions > button { height: 34px; flex: 0 0 auto; }
.v2-mileage-export-progress { align-items: stretch; flex-direction: column; gap: 7px; padding: 9px 12px; }
.v2-mileage-export-progress > span { min-width: 0; }
.v2-mileage-table-wrap { display: block; }
.v2-mileage-mobile-list { display: none; }
.v2-mileage-mobile-list article { border-bottom: 1px solid #e9eef5; padding: 14px 12px; }
.v2-mileage-mobile-list article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.v2-mileage-mobile-list article > header div { min-width: 0; }
.v2-mileage-mobile-list article > header strong, .v2-mileage-mobile-list article > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-mobile-list article > header strong { color: #253449; font-size: 13px; }
.v2-mileage-mobile-list article > header b { flex: 0 0 auto; color: var(--v2-blue); font-size: 14px; text-align: right; }
.v2-mileage-mobile-list article > header b small { display: block; margin-top: 3px; color: var(--v2-muted); font-size: 8px; font-weight: 500; }
.v2-mileage-mobile-list article > header span, .v2-mileage-mobile-list time { margin-top: 3px; color: var(--v2-muted); font-size: 9px; }
.v2-mileage-mobile-list dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 14px; margin: 12px 0 0; }
.v2-mileage-mobile-list dl div { min-width: 0; }
.v2-mileage-mobile-list dt { color: var(--v2-muted); font-size: 9px; }
.v2-mileage-mobile-list dd { margin: 4px 0 0; overflow: hidden; color: #334155; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-mobile-list dd.is-daily { color: var(--v2-blue); font-size: 14px; }
.v2-mileage-mobile-days { display: grid; grid-auto-columns: 84px; grid-auto-flow: column; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 3px; }
.v2-mileage-mobile-days > div { border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; padding: 8px; }
.v2-mileage-mobile-days time, .v2-mileage-mobile-days strong { display: block; }
.v2-mileage-mobile-days time { color: var(--v2-muted); font-size: 8px; }
.v2-mileage-mobile-days strong { margin-top: 4px; color: #334155; font-size: 10px; }
.v2-mileage-results > footer { min-height: 58px; align-items: flex-start; flex-direction: column; gap: 7px; padding: 9px 10px; }
.v2-mileage-results > footer div { width: 100%; }
.v2-mileage-results > footer button { height: 34px; }
.v2-mileage-results > footer div button { flex: 1; }
.v2-mileage-evidence { flex-direction: column; line-height: 1.5; }
}
/* Account administration follows the platform's open table/workspace layout. */
.v2-user-admin { min-height: 100%; padding: 22px 24px 34px; }
.v2-user-admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto 18px; max-width: 1480px; }
.v2-user-admin-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.v2-user-admin-heading p { margin: 7px 0 0; color: var(--v2-muted); font-size: 12px; }
.v2-user-admin-heading > button, .v2-user-editor form > footer button, .v2-user-editor-empty button { height: 38px; border: 0; border-radius: 8px; background: var(--v2-blue); padding: 0 16px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.v2-user-admin-grid { display: grid; max-width: 1480px; min-height: 690px; margin: 0 auto; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--v2-border); border-radius: 13px; background: #fff; box-shadow: var(--v2-shadow); }
.v2-user-list { min-width: 0; border-right: 1px solid var(--v2-border); background: #f9fbfd; padding: 12px; }
.v2-user-list-summary { display: flex; align-items: baseline; gap: 7px; padding: 8px 9px 14px; color: #7a8798; font-size: 11px; }
.v2-user-list-summary strong { color: #26364e; font-size: 20px; }
.v2-user-list > button { display: grid; width: 100%; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-radius: 9px; background: transparent; padding: 10px; color: #273750; text-align: left; cursor: pointer; }
.v2-user-list > button:hover { background: #f0f4f9; }
.v2-user-list > button.is-active { background: #eaf2ff; box-shadow: inset 3px 0 var(--v2-blue); }
.v2-user-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: #dfe9f8; color: #3a5e91; font-weight: 800; }
.v2-user-list button > span:nth-child(2) { min-width: 0; }
.v2-user-list button b, .v2-user-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-user-list button b { font-size: 12px; }
.v2-user-list button small { margin-top: 4px; color: #8290a3; font-size: 9px; }
.v2-user-list button i { border-radius: 10px; background: #f0f2f5; padding: 3px 6px; color: #8a96a6; font-size: 8px; font-style: normal; }
.v2-user-list button i.is-enabled { background: #e9f8f2; color: #16805b; }
.v2-user-editor { min-width: 0; }
.v2-user-editor-empty { display: grid; height: 100%; place-content: center; justify-items: center; color: #4a5b72; text-align: center; }
.v2-user-editor-empty strong { font-size: 18px; }.v2-user-editor-empty p { margin: 8px 0 18px; color: #8a96a7; font-size: 12px; }
.v2-user-editor form { height: 100%; padding: 24px 28px 82px; }
.v2-user-editor-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #edf1f5; }
.v2-user-editor-title h3 { margin: 0; font-size: 20px; }.v2-user-editor-title p { margin: 6px 0 0; color: #8591a2; font-size: 10px; }
.v2-user-status { display: flex; align-items: center; gap: 8px; color: #45556c; font-size: 11px; font-weight: 650; }
.v2-user-status input { width: 16px; height: 16px; accent-color: var(--v2-blue); }
.v2-user-editor section { padding: 20px 0; border-bottom: 1px solid #edf1f5; }
.v2-user-editor h4 { margin: 0 0 14px; color: #2c3d54; font-size: 13px; }
.v2-user-editor h4 small { margin-left: 7px; color: #91a0b2; font-size: 9px; font-weight: 500; }
.v2-user-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.v2-user-fields label, .v2-vehicle-permission-tools label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #637188; font-size: 10px; font-weight: 650; }
.v2-user-fields input, .v2-vehicle-permission-tools input { width: 100%; height: 38px; border: 1px solid #dbe3ed; border-radius: 7px; padding: 0 10px; outline: 0; color: #273750; font-size: 12px; }
.v2-user-fields input:focus, .v2-vehicle-permission-tools input:focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); }
.v2-user-fields input:disabled { background: #f5f7fa; color: #8390a0; }
.v2-menu-permissions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.v2-menu-permissions label { display: flex; min-width: 0; align-items: flex-start; gap: 10px; border: 1px solid #e0e7ef; border-radius: 8px; padding: 11px; cursor: pointer; }
.v2-menu-permissions label.is-selected { border-color: #a9c8fb; background: #f3f7ff; }
.v2-menu-permissions input { margin-top: 2px; accent-color: var(--v2-blue); }.v2-menu-permissions span { min-width: 0; }.v2-menu-permissions b, .v2-menu-permissions small { display: block; }.v2-menu-permissions b { color: #33445c; font-size: 11px; }.v2-menu-permissions small { margin-top: 4px; color: #8491a3; font-size: 9px; line-height: 1.5; }
.v2-vehicle-permission-heading { display: flex; align-items: center; justify-content: space-between; }.v2-vehicle-permission-heading h4 { margin-bottom: 14px; }.v2-vehicle-permission-heading > button { border: 0; background: transparent; color: #7d899a; cursor: pointer; font-size: 10px; }
.v2-vehicle-permission-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.v2-bulk-vin { display: flex; gap: 6px; }.v2-bulk-vin button { flex: 0 0 auto; border: 1px solid #cbd8e9; border-radius: 7px; background: #f7f9fc; padding: 0 11px; color: #46607e; cursor: pointer; font-size: 10px; }
.v2-vehicle-candidates { display: grid; max-height: 194px; margin-top: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: auto; border: 1px solid #e1e7ef; border-radius: 8px; padding: 5px; }
.v2-vehicle-candidates > p { grid-column: 1/-1; margin: 16px; color: #8996a7; font-size: 10px; }
.v2-vehicle-candidates > button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 6px; background: transparent; padding: 8px; text-align: left; cursor: pointer; }.v2-vehicle-candidates > button:hover { background: #f4f7fa; }.v2-vehicle-candidates > button.is-selected { background: #edf4ff; }
.v2-vehicle-candidates b, .v2-vehicle-candidates small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-vehicle-candidates b { color: #34455c; font-size: 10px; }.v2-vehicle-candidates small { margin-top: 3px; color: #8a96a6; font-size: 8px; }.v2-vehicle-candidates i { color: var(--v2-blue); font-size: 9px; font-style: normal; }
.v2-assigned-vins { display: grid; max-height: 330px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; overflow: auto; margin-top: 10px; }
.v2-assigned-vins > article { min-width: 0; border: 1px solid #dbe4ef; border-radius: 9px; background: #f8fafc; padding: 10px; }
.v2-assigned-vins article > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; }
.v2-assigned-vins article > header > span { min-width: 0; }
.v2-assigned-vins article > header button { width: 24px; height: 24px; flex: 0 0 auto; border: 0; border-radius: 6px; background: transparent; color: #99a4b3; cursor: pointer; font-size: 15px; }
.v2-assigned-vins article > header button:hover { background: #eef2f7; color: var(--v2-red); }
.v2-assigned-vins b,.v2-assigned-vins small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-assigned-vins b { color: #34455c; font-size: 11px; }.v2-assigned-vins small { margin-top: 3px; color: #8a96a6; font: 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.v2-assigned-vins article > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.v2-assigned-vins label { min-width: 0; color: #758296; font-size: 9px; }
.v2-assigned-vins label span { display: block; margin-bottom: 4px; }
.v2-assigned-vins input { width: 100%; height: 32px; border: 1px solid #dbe3ed; border-radius: 6px; background: #fff; padding: 0 7px; color: #34455c; font-size: 10px; }
.v2-grant-history { margin-top: 12px; border: 1px solid #e1e7ef; border-radius: 9px; background: #fff; }
.v2-grant-history summary { padding: 10px 12px; color: #4c5f78; cursor: pointer; font-size: 10px; font-weight: 700; }
.v2-grant-history > div { display: grid; max-height: 250px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; overflow: auto; border-top: 1px solid #edf1f5; padding: 8px; }
.v2-grant-history article { min-width: 0; border-radius: 7px; background: #f7f9fc; padding: 9px; }
.v2-grant-history article header { display: flex; min-width: 0; justify-content: space-between; gap: 8px; color: #34455c; font-size: 10px; }
.v2-grant-history article header span { overflow: hidden; color: #8290a3; font: 8px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
.v2-grant-history article p { margin: 6px 0 4px; color: #4d6078; font-size: 9px; }
.v2-grant-history article small { color: #8996a7; font-size: 8px; line-height: 1.5; }
.v2-user-empty { margin: 14px 4px; color: #8b97a7; font-size: 10px; line-height: 1.6; }
.v2-user-feedback { margin: 14px 0 0; color: #16805b; font-size: 11px; }.v2-user-feedback.is-error { color: var(--v2-red); }
.v2-user-editor form > footer { display: flex; justify-content: flex-end; margin-top: 18px; }.v2-user-editor form > footer button:disabled { opacity: .5; }
@media (max-width: 900px) {
.v2-auth-screen { grid-template-columns: 1fr; }
.v2-auth-intro { display: none; }
.v2-auth-card { justify-self: center; }
.v2-user-admin { padding: 12px; }
.v2-user-admin-grid { grid-template-columns: 230px minmax(560px,1fr); overflow-x: auto; }
}
@media (max-width: 680px) {
.v2-auth-screen { min-height: 100dvh; padding: 16px; }
.v2-auth-card { padding: 28px 22px; }
.v2-user-admin { padding: 8px 8px 82px; }
.v2-user-admin-heading { align-items: flex-start; margin-bottom: 10px; }.v2-user-admin-heading h2 { font-size: 17px; }.v2-user-admin-heading p { display: none; }.v2-user-admin-heading > button { height: 34px; flex: 0 0 auto; padding: 0 10px; font-size: 10px; }
.v2-user-admin-grid { display: flex; min-height: 0; overflow: visible; border: 0; box-shadow: none; flex-direction: column; gap: 8px; background: transparent; }
.v2-user-list { display: flex; border: 1px solid var(--v2-border); border-radius: 10px; overflow-x: auto; padding: 6px; background: #fff; }.v2-user-list-summary { flex: 0 0 auto; padding: 8px; }.v2-user-list > button { min-width: 210px; }
.v2-user-editor { border: 1px solid var(--v2-border); border-radius: 10px; overflow: hidden; background: #fff; }.v2-user-editor form { padding: 16px 14px 22px; }.v2-user-fields, .v2-menu-permissions, .v2-vehicle-permission-tools, .v2-vehicle-candidates, .v2-assigned-vins, .v2-grant-history > div { grid-template-columns: 1fr; }
.v2-assigned-vins article > div { grid-template-columns: 1fr; }
.v2-password-mobile { display: grid !important; }
.v2-topbar-actions .v2-current-user { display: none; }
}
@media (max-width: 1280px) {
.v2-access-filter-v3 { grid-template-columns: minmax(210px, 1.3fr) repeat(3, minmax(120px, .75fr)) auto auto; }
.v2-access-filter-v3 > button { min-width: 76px; }
.v2-access-protocol-coverage b { display: none; }
.v2-access-workspace-v3.is-inspector-open { position: relative; grid-template-columns: minmax(0, 1fr); }
.v2-access-inspector-v3 { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: min(390px, calc(100% - 40px)); box-shadow: -12px 0 38px rgba(24, 38, 58, .16); }
}
@media (max-width: 760px) {
.v2-batch-search-backdrop { align-items: end; padding: 0; }
.v2-batch-search-dialog { width: 100%; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
.v2-batch-search-dialog textarea { min-height: 32vh; font-size: 16px; }
.v2-batch-search-dialog > footer button { min-width: 0; flex: 1; height: 44px; }
.v2-access-page-v3 { gap: 9px; padding: 10px 8px 18px; }
.v2-access-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
.v2-access-heading h2 { font-size: 19px; }
.v2-access-heading p { font-size: 11px; }
.v2-access-heading > div:last-child { width: 100%; justify-content: space-between; }
.v2-access-filter-v3 { grid-template-columns: 1fr 1fr; padding: 11px; }
.v2-access-filter-v3 .is-search { grid-column: 1 / -1; }
.v2-access-filter-v3 label { font-size: 11px; }
.v2-access-filter-v3 input, .v2-access-filter-v3 select, .v2-access-filter-v3 label > div { height: 42px; font-size: 13px; }
.v2-access-filter-v3 > button { height: 42px; }
.v2-access-kpis-v3 { display: flex; min-height: 56px; overflow-x: auto; scroll-snap-type: x proximity; }
.v2-access-kpis-v3 button { min-width: 150px; flex: 0 0 150px; scroll-snap-align: start; }
.v2-access-kpis-v3 strong { font-size: 20px; }
.v2-access-workspace-v3 { min-height: 620px; flex-basis: 620px; }
.v2-access-table-v3 > header { align-items: flex-start; min-height: 62px; flex-direction: column; padding: 9px 10px; }
.v2-access-table-title { align-items: flex-start; flex-direction: column; gap: 3px; }
.v2-access-table-actions { width: 100%; justify-content: space-between; overflow: hidden; }
.v2-access-protocol-coverage { overflow-x: auto; }
.v2-access-protocol-coverage b { display: inline; }
.v2-access-table-v3 > footer { align-items: flex-start; min-height: 76px; flex-direction: column; padding: 9px 10px; }
.v2-access-table-scroll-v3 table { font-size: 12px; }
.v2-access-inspector-v3 { position: fixed; z-index: 30; top: 76px; right: 8px; bottom: 8px; width: calc(100% - 16px); border-radius: 12px; }
.v2-access-identity-queue-v3 summary { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 10px; }
.v2-access-identity-queue-v3 > div { grid-template-columns: 1fr; }
.v2-access-settings fieldset { align-items: stretch; flex-direction: column; }
.v2-access-settings input { width: 100%; box-sizing: border-box; }
}
@keyframes v2-mobile-sheet-enter {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 374px) {
.v2-nav-label, .v2-sidebar.is-collapsed .v2-nav-label { font-size: 8px; }
.v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { grid-template-rows: minmax(330px, 50dvh) 340px; min-height: calc(50dvh + 340px); }
.v2-map-legend span:nth-of-type(3), .v2-map-legend span:nth-of-type(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Mobile task-first interaction layer. Desktop keeps the full workspace. */
.v2-mobile-navigation,
.v2-mobile-more-backdrop,
.v2-mobile-filter-toggle,
.v2-alert-mobile-list,
.v2-access-mobile-list,
.v2-history-mobile-list { display: none; }
@media (max-width: 680px) {
.v2-mobile-navigation { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: grid; height: calc(66px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #dce4ee; background: rgba(255,255,255,.97); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(20,35,55,.10); backdrop-filter: blur(16px); }
.v2-mobile-nav-item { position: relative; display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 0; border-radius: 10px; background: transparent; color: #718096; text-decoration: none; cursor: pointer; }
.v2-mobile-nav-item > svg { font-size: 20px; }
.v2-mobile-nav-item > span { max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.v2-mobile-nav-item.is-active { background: #edf4ff; color: var(--v2-blue); }
.v2-mobile-nav-item.is-active::after { position: absolute; right: 22%; bottom: 1px; left: 22%; height: 2px; border-radius: 2px; background: var(--v2-blue); content: ""; }
.v2-mobile-more-backdrop { position: fixed; z-index: 89; inset: 0 0 calc(65px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; background: rgba(15,23,42,.34); backdrop-filter: blur(2px); }
.v2-mobile-more-sheet { width: 100%; border-radius: 18px 18px 0 0; background: #fff; padding: 12px 14px 18px; box-shadow: 0 -22px 60px rgba(15,23,42,.2); animation: v2-mobile-sheet-enter .18s ease-out; }
.v2-mobile-more-sheet > header { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px; }
.v2-mobile-more-sheet > header div { display: flex; flex-direction: column; gap: 3px; }
.v2-mobile-more-sheet > header strong { color: #17253a; font-size: 17px; }
.v2-mobile-more-sheet > header span { color: #8290a3; font-size: 11px; }
.v2-mobile-more-sheet > header button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 20px; background: #f1f5f9; color: #64748b; font-size: 23px; }
.v2-mobile-more-sheet > nav { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.v2-mobile-more-sheet .v2-mobile-nav-item { min-height: 76px; border: 1px solid #e5eaf1; background: #f8fafc; }
.v2-main { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
.v2-mobile-filter-toggle { display: flex; width: 100%; min-height: 54px; flex: 0 0 auto; align-items: center; justify-content: space-between; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; padding: 8px 12px; color: #26364b; box-shadow: 0 3px 12px rgba(25,39,59,.04); text-align: left; }
.v2-mobile-filter-toggle > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.v2-mobile-filter-toggle b { font-size: 13px; }
.v2-mobile-filter-toggle small { overflow: hidden; color: #7a889b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.v2-mobile-filter-toggle em { flex: 0 0 auto; border-radius: 14px; background: #edf4ff; padding: 5px 10px; color: var(--v2-blue); font-size: 11px; font-style: normal; font-weight: 700; }
:is(.v2-alert-filter,.v2-access-filter-v3,.v2-history-toolbar,.v2-mileage-filter).is-mobile-collapsed { display: none !important; }
.v2-alert-heading > div,
.v2-access-heading > div:first-child,
.v2-mileage-heading > div { display: none; }
.v2-alert-heading { display: none; }
.v2-access-heading { justify-content: flex-end; min-height: 40px; }
.v2-access-heading > div:last-child { width: 100%; }
.v2-mileage-heading { justify-content: flex-end; min-height: 40px; }
.v2-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; }
.v2-kpi { width: auto; min-width: 0; min-height: 64px; padding: 9px 11px; }
.v2-kpi:nth-child(3), .v2-kpi:nth-child(4), .v2-kpi:nth-child(5), .v2-kpi:nth-child(7) { display: none; }
.v2-kpi + .v2-kpi::before { display: block; }
.v2-monitor-workspace,
.v2-monitor-workspace.is-detail-open,
.v2-monitor-workspace.is-detail-collapsed { min-height: max(430px, calc(100dvh - 330px)); grid-template-columns: 1fr; grid-template-rows: minmax(430px, 1fr); }
.v2-monitor-workspace > .v2-vehicle-rail { display: none; }
.v2-monitor-workspace > .v2-fleet-map { grid-row: 1; }
.v2-vehicle-detail { height: min(58dvh, 520px); }
.v2-alert-page { gap: 9px; }
.v2-alert-kpis { display: flex; min-height: 70px; overflow-x: auto; scroll-snap-type: x proximity; }
.v2-alert-kpis button { min-width: 116px; flex: 0 0 116px; scroll-snap-align: start; }
.v2-alert-workspace { display: flex; min-height: 0; flex-direction: column; }
.v2-alert-table-card { height: auto; min-height: 420px; }
.v2-alert-table-scroll { overflow: visible; }
.v2-alert-table-scroll table { display: none; }
.v2-alert-mobile-list { display: flex; flex-direction: column; background: #f5f7fa; padding: 8px; gap: 8px; }
.v2-alert-mobile-list > button { width: 100%; border: 1px solid #e0e7f0; border-radius: 10px; background: #fff; padding: 12px; color: #334155; text-align: left; box-shadow: 0 2px 8px rgba(20,35,55,.04); }
.v2-alert-mobile-list > button.is-selected { border-color: #8eb8f8; box-shadow: 0 0 0 2px rgba(18,104,243,.08); }
.v2-alert-mobile-list header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-alert-mobile-list header > strong { font-size: 15px; }
.v2-alert-mobile-list header > span { display: flex; gap: 5px; }
.v2-alert-mobile-list p { margin: 9px 0; color: #26364b; font-size: 13px; font-weight: 700; }
.v2-alert-mobile-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin: 0; border-top: 1px solid #edf1f5; padding-top: 10px; }
.v2-alert-mobile-list dt { color: #8a97a9; font-size: 10px; }
.v2-alert-mobile-list dd { margin: 3px 0 0; color: #46566c; font-size: 11px; font-weight: 650; }
.v2-alert-inspector { max-height: none; margin-top: 10px; }
.v2-access-kpis-v3 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; }
.v2-access-kpis-v3 button { min-width: 0; min-height: 74px; flex: none; }
.v2-access-workspace-v3 { min-height: 480px; flex-basis: auto; }
.v2-access-table-v3 > header { min-height: 0; }
.v2-access-table-title > span, .v2-access-protocol-coverage { display: none; }
.v2-access-table-actions { justify-content: flex-end; }
.v2-access-table-scroll-v3 { overflow: visible; }
.v2-access-table-scroll-v3 table { display: none; }
.v2-access-mobile-list { display: flex; flex-direction: column; gap: 8px; background: #f5f7fa; padding: 8px; }
.v2-access-mobile-list > button { width: 100%; border: 1px solid #e0e7ef; border-radius: 10px; background: #fff; padding: 12px; color: #334155; text-align: left; }
.v2-access-mobile-list > button.is-selected { border-color: #8eb8f8; box-shadow: 0 0 0 2px rgba(18,104,243,.08); }
.v2-access-mobile-list > button > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.v2-access-mobile-list > button > header > div:first-child { min-width: 0; }
.v2-access-mobile-list > button > header > div:first-child strong,
.v2-access-mobile-list > button > header > div:first-child span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-access-mobile-list > button > header > div:first-child strong { font-size: 15px; }
.v2-access-mobile-list > button > header > div:first-child span { margin-top: 3px; color: #8491a3; font-size: 10px; }
.v2-access-mobile-list > button > p { margin: 9px 0; color: #68768a; font-size: 11px; }
.v2-access-mobile-list > button > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; border-top: 1px solid #edf1f5; padding-top: 9px; }
.v2-access-mobile-list .v2-access-protocol-cell { min-width: 0; border-radius: 7px; background: #f7f9fc; padding: 7px; }
.v2-access-mobile-list .v2-access-protocol-cell strong { font-size: 9px; }
.v2-access-mobile-list .v2-access-protocol-cell small { display: none; }
.v2-history-page { gap: 9px; }
.v2-history-metrics { max-height: 48px; overflow-x: auto; flex-wrap: nowrap; }
.v2-history-main { display: flex; height: auto; min-height: 0; flex-direction: column; }
.v2-history-summary { min-height: 92px; }
.v2-history-table-card { order: 2; height: auto; min-height: 380px; }
.v2-history-trend { order: 3; min-height: 220px; margin-top: 10px; }
.v2-history-table-scroll { overflow: visible; }
.v2-history-table-scroll table { display: none; }
.v2-history-mobile-list { display: flex; flex-direction: column; gap: 8px; background: #f5f7fa; padding: 8px; }
.v2-history-mobile-list > button { width: 100%; border: 1px solid #e0e7ef; border-radius: 10px; background: #fff; padding: 12px; color: #334155; text-align: left; }
.v2-history-mobile-list > button.is-selected { border-color: #8eb8f8; }
.v2-history-mobile-list header, .v2-history-mobile-list p { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-history-mobile-list header > div { min-width: 0; }
.v2-history-mobile-list header strong, .v2-history-mobile-list header > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-history-mobile-list header strong { font-size: 14px; }
.v2-history-mobile-list header > div > span { margin-top: 3px; color: #8794a5; font-size: 10px; }
.v2-history-mobile-list p { margin: 9px 0; color: #718096; font-size: 10px; }
.v2-history-mobile-list p b { color: var(--v2-blue); }
.v2-history-mobile-quality { display: block; margin: -2px 0 9px; color: #6d7b8f; font-size: 10px; line-height: 1.45; }
.v2-history-mobile-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; border-top: 1px solid #edf1f5; padding-top: 9px; }
.v2-history-mobile-list dt { color: #8a97a9; font-size: 9px; }
.v2-history-mobile-list dd { margin: 3px 0 0; font-size: 11px; font-weight: 700; }
.v2-history-mobile-list > button > em { display: block; margin-top: 10px; color: var(--v2-blue); font-size: 11px; font-style: normal; font-weight: 700; text-align: right; }
.v2-history-side { margin-top: 10px; }
.v2-mileage-query-panel { padding: 8px; }
.v2-mileage-query-panel > .v2-mobile-filter-toggle { margin-bottom: 8px; }
.v2-mileage-filter.is-mobile-collapsed + .v2-mileage-validation { margin-top: 4px; }
.v2-track-page.is-rail-collapsed { display: grid; grid-template-columns: minmax(0,1fr); }
.v2-track-page.is-rail-collapsed .v2-track-stage { min-height: calc(100dvh - 118px - env(safe-area-inset-bottom)); }
}
/* Track replay command center — map-first layout based on the G7 reference. */
.v2-track-page { display: grid; width: 100%; height: 100%; min-height: 0; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; overflow: hidden; padding: 0; background: #e9eef4; }
.v2-track-page > .v2-monitor-return { margin: 7px 8px; }
.v2-track-page.is-rail-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.v2-track-rail { position: relative; z-index: 12; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: visible; border-right: 1px solid #d9e1ea; background: #fff; box-shadow: 8px 0 24px rgba(30, 45, 66, .07); transition: transform .18s ease, opacity .18s ease; }
.v2-track-page.is-rail-collapsed .v2-track-rail { opacity: 0; pointer-events: none; transform: translateX(-100%); }
.v2-track-query { flex: 0 0 auto; border-bottom: 1px solid #e2e8f0; padding: 14px 14px 13px; background: #fff; }
.v2-track-query > header { display: flex; height: 34px; align-items: flex-start; justify-content: space-between; margin-bottom: 11px; }
.v2-track-query > header div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.v2-track-query > header strong { color: #1e293b; font-size: 14px; letter-spacing: -.02em; }
.v2-track-query > header span { color: #8a97a9; font-size: 9px; }
.v2-track-query > header button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dde5ef; border-radius: 7px; background: #fff; color: #66758a; cursor: pointer; }
.v2-track-query > label, .v2-track-date-grid label { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #738197; font-size: 10px; }
.v2-track-vehicle-picker { position: relative; display: grid; height: 38px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid #d8e1ec; border-radius: 7px; background: #fdfefe; padding: 0 9px; color: #8a97a8; }
.v2-track-vehicle-picker:focus-within { border-color: #8cb7fb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.v2-track-vehicle-picker input { min-width: 0; height: 34px; border: 0; background: transparent; color: #334155; outline: 0; font-family: inherit; font-size: 11px; }
.v2-track-vehicle-picker > button { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #8a97a8; cursor: pointer; }
.v2-track-vehicle-options { position: absolute; z-index: 50; top: calc(100% + 6px); right: -1px; left: -1px; overflow: hidden; border: 1px solid #d8e1ec; border-radius: 9px; background: #fff; box-shadow: 0 16px 36px rgba(29, 43, 63, .16); }
.v2-track-vehicle-options header { display: flex; height: 32px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f6; background: #f8fafc; padding: 0 10px; color: #617086; font-size: 9px; }
.v2-track-vehicle-options header em { color: #95a1b1; font-style: normal; }
.v2-track-vehicle-options > button { display: grid; width: 100%; min-height: 44px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr) auto; align-items: center; gap: 8px; border: 0; border-top: 1px solid #f0f3f7; background: #fff; padding: 6px 10px; text-align: left; cursor: pointer; }
.v2-track-vehicle-options > button:hover { background: #f3f7ff; }
.v2-track-vehicle-options > button strong, .v2-track-vehicle-options > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-track-vehicle-options > button strong { color: #334155; font-size: 10px; }.v2-track-vehicle-options > button span { color: #8390a2; font-size: 8px; }.v2-track-vehicle-options > button em { color: var(--v2-blue); font-size: 8px; font-style: normal; }
.v2-track-vehicle-options > p { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 7px; margin: 0; color: #8390a2; font-size: 9px; }
.v2-track-presets { display: flex; gap: 6px; margin: 8px 0; }
.v2-track-presets button { height: 25px; flex: 1; border: 1px solid #e0e7f0; border-radius: 5px; background: #f8fafc; color: #64748b; font-family: inherit; font-size: 9px; cursor: pointer; }
.v2-track-presets button:hover { border-color: #aac7f6; background: #eef5ff; color: var(--v2-blue); }
.v2-track-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.v2-track-date-grid input, .v2-track-query select { width: 100%; height: 35px; box-sizing: border-box; border: 1px solid #dbe3ed; border-radius: 6px; background: #fff; padding: 0 7px; color: #48566a; outline: 0; font-family: inherit; font-size: 8px; }
.v2-track-query select { margin-bottom: 9px; font-size: 10px; }
.v2-track-query-button { display: flex; width: 100%; height: 36px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #2563eb; border-radius: 7px; background: #2563eb; color: #fff; box-shadow: 0 6px 14px rgba(37, 99, 235, .18); font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.v2-track-query-button:disabled { cursor: not-allowed; opacity: .48; }
.v2-track-rail-result { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.v2-track-rail-vehicle { display: grid; min-height: 58px; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #e8edf3; padding: 8px 13px; }
.v2-track-rail-vehicle > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: #eaf2ff; color: #2563eb; }
.v2-track-rail-vehicle > div { min-width: 0; }.v2-track-rail-vehicle strong, .v2-track-rail-vehicle small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-track-rail-vehicle strong { color: #253348; font-size: 12px; }.v2-track-rail-vehicle small { margin-top: 3px; color: #8b97a8; font-size: 8px; }
.v2-track-rail-vehicle em { color: #2563eb; font-size: 12px; font-style: normal; font-weight: 700; }
.v2-track-rail-result > nav { display: grid; height: 40px; flex: 0 0 40px; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #dfe6ee; padding: 0 8px; }
.v2-track-rail-result > nav button { position: relative; border: 0; background: transparent; color: #66758a; font-family: inherit; font-size: 10px; cursor: pointer; }
.v2-track-rail-result > nav button.is-active { color: #2563eb; font-weight: 700; }.v2-track-rail-result > nav button.is-active::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; border-radius: 2px 2px 0 0; background: #2563eb; content: ''; }
.v2-track-rail-result > nav b { margin-left: 2px; font-size: 8px; font-weight: 600; }
.v2-track-rail-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.v2-track-rail-empty { display: flex; min-height: 280px; align-items: center; justify-content: center; flex-direction: column; padding: 24px; color: #9aa6b5; text-align: center; }
.v2-track-rail-empty > svg { font-size: 25px; }.v2-track-rail-empty strong { margin-top: 10px; color: #4c596d; font-size: 12px; }.v2-track-rail-empty p { margin: 6px 0 0; color: #8a97a8; font-size: 9px; line-height: 1.55; }
.v2-track-stop-list > button, .v2-track-event-list > button { display: grid; width: 100%; min-height: 48px; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid #edf1f5; background: #fff; padding: 6px 11px; text-align: left; cursor: pointer; }
.v2-track-stop-list > button:hover, .v2-track-event-list > button:hover { background: #f8fbff; }.v2-track-stop-list > button.is-active, .v2-track-event-list > button.is-active { background: #edf5ff; box-shadow: inset 3px 0 #2563eb; }
.v2-track-stop-list button > i, .v2-track-event-list button > i { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #f3aa3c; color: #fff; font-size: 8px; font-style: normal; font-weight: 800; }
.v2-track-event-list button > i { background: #2563eb; }.v2-track-event-list button > i.is-start { background: #18a86b; }.v2-track-event-list button > i.is-end { background: #e74b4b; }.v2-track-event-list button > i.is-warning { background: #f1a238; }
.v2-track-stop-list button > span, .v2-track-event-list button > span { min-width: 0; }.v2-track-stop-list button strong, .v2-track-stop-list button small, .v2-track-event-list button strong, .v2-track-event-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-track-stop-list button strong, .v2-track-event-list button strong { color: #3d4b5f; font-size: 9px; }.v2-track-stop-list button small, .v2-track-event-list button small { margin-top: 3px; color: #8c98a9; font-size: 8px; }
.v2-track-stop-list button > em, .v2-track-event-list button > em { color: #6f7d90; font-size: 8px; font-style: normal; white-space: nowrap; }
.v2-track-list-empty { margin: 50px 20px; color: #8a97a8; font-size: 10px; text-align: center; }
.v2-track-overview-panel { padding-bottom: 14px; }.v2-track-overview-panel > section { border-bottom: 1px solid #edf1f5; padding: 11px 13px; }.v2-track-overview-panel section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }.v2-track-overview-panel header strong { color: #364357; font-size: 10px; }.v2-track-overview-panel header span { color: #8a97a8; font-size: 8px; }
.v2-track-overview-panel dl { margin: 0; }.v2-track-overview-panel dl div { display: grid; grid-template-columns: 86px minmax(0, 1fr); padding: 4px 0; font-size: 8px; }.v2-track-overview-panel dt { color: #8390a2; }.v2-track-overview-panel dd { margin: 0; color: #48566a; text-align: right; font-variant-numeric: tabular-nums; }
.v2-track-source-list { display: grid; gap: 5px; }.v2-track-source-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid #e4e9f0; border-radius: 6px; background: #f8fafc; padding: 7px 8px; }.v2-track-source-list strong { color: #425066; font-size: 9px; }.v2-track-source-list span { color: #2563eb; font-size: 8px; }.v2-track-source-list small { grid-column: 1 / -1; margin-top: 3px; color: #8b97a8; font-size: 7px; }
.v2-track-quality-card p { margin: 0; color: #526176; font-size: 8px; line-height: 1.55; }.v2-track-quality-card small { display: block; margin-top: 6px; color: #8190a3; font-size: 7px; }.v2-track-quality-card.is-warning { background: #fffaf2; }
.v2-track-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e7edf3; }
.v2-track-map, .v2-track-map-canvas { position: absolute; inset: 0; }
.v2-track-stage-tools { position: absolute; z-index: 18; top: 14px; right: 14px; display: flex; gap: 7px; }
.v2-track-stage-tools button { display: flex; height: 34px; align-items: center; gap: 6px; border: 1px solid #d7e0eb; border-radius: 7px; background: rgba(255, 255, 255, .95); padding: 0 10px; color: #607086; box-shadow: 0 5px 15px rgba(26, 42, 63, .1); backdrop-filter: blur(8px); font-family: inherit; font-size: 9px; cursor: pointer; }
.v2-track-stage-tools button.is-active { border-color: #a8c5f4; background: #eef5ff; color: #2563eb; }.v2-track-stage-tools button:disabled { cursor: not-allowed; opacity: .45; }
.v2-track-coverage-float { position: absolute; z-index: 16; top: 14px; left: 14px; display: grid; width: min(510px, calc(100% - 450px)); min-height: 34px; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(209, 221, 234, .94); border-radius: 7px; background: rgba(255, 255, 255, .94); padding: 5px 10px; color: #65748a; box-shadow: 0 5px 16px rgba(26, 42, 63, .09); backdrop-filter: blur(9px); font-size: 8px; }
.v2-track-coverage-float > i { width: 7px; height: 7px; border-radius: 50%; background: #18a86b; }.v2-track-coverage-float.is-warning > i { background: #f1a238; }.v2-track-coverage-float > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-coverage-float strong { margin-right: 7px; color: #354358; font-size: 9px; }.v2-track-coverage-float em { color: #758399; font-size: 8px; font-style: normal; white-space: nowrap; }
.v2-track-current-card { position: absolute; z-index: 16; top: 60px; left: 14px; width: 292px; overflow: hidden; border: 1px solid rgba(204, 216, 230, .95); border-radius: 9px; background: rgba(28, 39, 55, .91); color: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .2); backdrop-filter: blur(12px); }
.v2-track-current-card > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px 8px; }.v2-track-current-card header div { min-width: 0; }.v2-track-current-card header strong, .v2-track-current-card header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-current-card header strong { font-size: 12px; }.v2-track-current-card header span { margin-top: 3px; color: #b8c4d2; font-size: 8px; }.v2-track-current-card header b { border-radius: 10px; background: rgba(37, 99, 235, .38); padding: 3px 7px; color: #dce9ff; font-size: 8px; }
.v2-track-current-card > div { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }.v2-track-current-card > div > span { min-width: 0; padding: 8px 10px; }.v2-track-current-card > div > span + span { border-left: 1px solid rgba(255, 255, 255, .1); }.v2-track-current-card small, .v2-track-current-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-current-card small { color: #9eacbd; font-size: 7px; }.v2-track-current-card > div strong { margin-top: 4px; font-size: 10px; }.v2-track-current-card em { color: #aebac8; font-size: 7px; font-style: normal; font-weight: 500; }
.v2-track-current-card > p { margin: 0; overflow: hidden; padding: 8px 11px; color: #c4ced9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.v2-track-empty-state { position: absolute; z-index: 14; top: 50%; left: 50%; display: flex; width: min(330px, calc(100% - 36px)); align-items: center; flex-direction: column; transform: translate(-50%, calc(-50% - 56px)); border: 1px solid rgba(211, 221, 232, .95); border-radius: 12px; background: rgba(255, 255, 255, .93); padding: 24px; color: #8a97a8; box-shadow: 0 14px 36px rgba(27, 42, 61, .1); text-align: center; backdrop-filter: blur(10px); }.v2-track-empty-state > svg { color: #2563eb; font-size: 28px; }.v2-track-empty-state strong { margin-top: 10px; color: #344256; font-size: 13px; }.v2-track-empty-state p { margin: 6px 0 14px; font-size: 9px; }.v2-track-empty-state button { display: flex; height: 34px; align-items: center; gap: 6px; border: 0; border-radius: 6px; background: #2563eb; padding: 0 12px; color: #fff; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.v2-track-loading { position: absolute; z-index: 25; top: 14px; left: 50%; display: flex; height: 34px; align-items: center; gap: 8px; transform: translateX(-50%); border: 1px solid #d9e2ec; border-radius: 7px; background: rgba(255, 255, 255, .96); padding: 0 12px; color: #59687c; box-shadow: 0 8px 20px rgba(30, 45, 66, .13); font-size: 9px; }
.v2-track-error { position: absolute; z-index: 28; top: 56px; right: 14px; width: min(420px, calc(100% - 28px)); }
.v2-track-marker { display: grid; width: 25px; height: 25px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #2563eb; color: #fff; box-shadow: 0 3px 10px rgba(29, 44, 65, .28); }.v2-track-marker span { font-size: 8px; font-weight: 800; line-height: 1; }.v2-track-marker.is-start { background: #18a86b; }.v2-track-marker.is-end { background: #e64c4c; }.v2-track-marker.is-stop { width: 22px; height: 22px; border-width: 2px; background: #f1a238; }
.v2-track-current-marker { position: relative; width: 42px; height: 42px; }.v2-track-current-marker > i { position: absolute; inset: 2px; border: 2px solid rgba(37, 99, 235, .45); border-radius: 50%; animation: v2-track-pulse 1.8s ease-out infinite; }.v2-track-current-marker > span { position: absolute; top: 13px; left: 13px; width: 16px; height: 16px; box-sizing: border-box; border: 4px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 3px 9px rgba(37, 99, 235, .5); }
@keyframes v2-track-pulse { 0% { opacity: .9; transform: scale(.45); } 80%, 100% { opacity: 0; transform: scale(1); } }
.v2-track-playback-dock { position: absolute; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; min-height: 112px; grid-template-columns: 145px minmax(260px, 1fr) auto; align-items: center; gap: 18px; border-top: 1px solid rgba(202, 214, 228, .95); background: rgba(255, 255, 255, .96); padding: 12px 16px; box-shadow: 0 -8px 26px rgba(24, 38, 58, .11); backdrop-filter: blur(14px); }
.v2-track-dock-summary { min-width: 0; }.v2-track-dock-summary strong, .v2-track-dock-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-dock-summary strong { color: #263448; font-size: 17px; letter-spacing: -.02em; }.v2-track-dock-summary span { margin-top: 5px; color: #7e8b9d; font-size: 8px; }
.v2-track-dock-progress { min-width: 0; }.v2-track-segment-rail { display: flex; width: 100%; height: 10px; overflow: hidden; border-radius: 5px; background: #e8edf3; }.v2-track-segment-rail button { min-width: 2px; border: 0; border-right: 1px solid rgba(255, 255, 255, .55); background: #b9e6d0; padding: 0; cursor: pointer; }.v2-track-segment-rail button.is-stopped { background: #f8d797; }.v2-track-segment-rail button.is-gap { background: #f2a7a7; }.v2-track-segment-rail button:hover { filter: brightness(.94); }.v2-track-segment-placeholder { height: 10px; border-radius: 5px; background: #e7ecf2; }
.v2-track-dock-progress > input { width: 100%; height: 4px; margin: 13px 0 7px; accent-color: #2563eb; cursor: pointer; }.v2-track-dock-progress > input:disabled { cursor: not-allowed; }.v2-track-dock-progress > div { display: flex; justify-content: space-between; color: #7c899a; font-size: 8px; }.v2-track-dock-progress time { color: #4b596d; font-variant-numeric: tabular-nums; }
.v2-track-dock-controls { display: flex; align-items: center; gap: 6px; }.v2-track-dock-controls > button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #d8e1eb; border-radius: 50%; background: #fff; color: #5c6b7f; cursor: pointer; }.v2-track-dock-controls > button.is-primary { width: 42px; height: 42px; border-color: #2563eb; background: #2563eb; color: #fff; box-shadow: 0 5px 14px rgba(37, 99, 235, .25); }.v2-track-dock-controls > button:disabled { cursor: not-allowed; opacity: .36; }
.v2-track-dock-controls label { display: flex; height: 32px; align-items: center; gap: 5px; border: 1px solid #d8e1eb; border-radius: 16px; padding: 0 8px 0 10px; color: #7c899a; font-size: 8px; }.v2-track-dock-controls select { border: 0; background: transparent; color: #3f4e63; outline: 0; font-family: inherit; font-size: 9px; font-weight: 700; }
.v2-track-dock-metrics { display: none; align-items: center; }.v2-track-dock-metrics > span { min-width: 92px; padding: 0 12px; }.v2-track-dock-metrics > span + span { border-left: 1px solid #e2e8f0; }.v2-track-dock-metrics small, .v2-track-dock-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-dock-metrics small { color: #8a97a8; font-size: 7px; }.v2-track-dock-metrics strong { margin-top: 5px; color: #405066; font-size: 9px; }
@media (min-width: 1680px) {
.v2-track-page { grid-template-columns: 340px minmax(0, 1fr); }
.v2-track-page.is-rail-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.v2-track-playback-dock { grid-template-columns: 150px minmax(310px, 1fr) auto auto; }
.v2-track-dock-metrics { display: flex; }
}
@media (max-width: 1100px) {
.v2-track-page { grid-template-columns: 286px minmax(0, 1fr); }
.v2-track-page.is-rail-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.v2-track-current-card { width: 260px; }
.v2-track-coverage-float { width: min(420px, calc(100% - 360px)); }
.v2-track-playback-dock { grid-template-columns: minmax(250px, 1fr) auto; gap: 12px; }
.v2-track-dock-summary, .v2-track-dock-metrics { display: none; }
}
@media (max-width: 700px) {
.v2-track-page, .v2-track-page.is-rail-collapsed { position: relative; display: block; height: 100%; min-height: 0; overflow: hidden; }
.v2-track-stage { width: 100%; height: 100%; }
.v2-track-rail { position: fixed; z-index: 72; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 8px; width: auto; height: min(76dvh, 680px); border: 1px solid #d7e0ea; border-radius: 16px; box-shadow: 0 -14px 46px rgba(22, 34, 50, .22); transform: translateY(0); }
.v2-track-rail::before { display: block; width: 40px; height: 4px; flex: 0 0 4px; margin: 8px auto 0; border-radius: 2px; background: #d5dee9; content: ''; }
.v2-track-page.is-rail-collapsed .v2-track-rail { opacity: 0; pointer-events: none; transform: translateY(calc(100% + 90px)); }
.v2-track-query { padding: 9px 12px 10px; }.v2-track-query > header { height: 30px; margin-bottom: 7px; }.v2-track-query > header strong { font-size: 14px; }.v2-track-query > header button { width: 34px; height: 34px; transform: rotate(-90deg); }
.v2-track-vehicle-picker { height: 42px; }.v2-track-vehicle-picker input, .v2-track-date-grid input, .v2-track-query select { font-size: 16px; }.v2-track-date-grid { grid-template-columns: 1fr; gap: 6px; }.v2-track-date-grid input, .v2-track-query select { height: 40px; }.v2-track-query select { margin-bottom: 7px; }.v2-track-presets { margin: 6px 0; }.v2-track-presets button { height: 29px; }.v2-track-query-button { height: 42px; font-size: 12px; }
.v2-track-rail-vehicle { min-height: 54px; }.v2-track-rail-result > nav { height: 42px; flex-basis: 42px; }.v2-track-stop-list > button, .v2-track-event-list > button { min-height: 54px; }.v2-track-stop-list button strong, .v2-track-event-list button strong { font-size: 11px; }.v2-track-stop-list button small, .v2-track-event-list button small { font-size: 9px; }
.v2-track-stage-tools { top: 8px; right: 8px; gap: 6px; }.v2-track-stage-tools button { width: 40px; height: 40px; justify-content: center; padding: 0; }.v2-track-stage-tools button > span:not(.semi-icon) { display: none; }.v2-track-stage-tools button > .semi-icon { display: inline-flex; font-size: 17px; }
.v2-track-coverage-float { top: 56px; right: 8px; left: 8px; width: auto; min-height: 36px; grid-template-columns: 7px minmax(0, 1fr); }.v2-track-coverage-float > span { white-space: nowrap; }.v2-track-coverage-float > span:not(strong) { font-size: 0; }.v2-track-coverage-float strong { font-size: 10px; }.v2-track-coverage-float em { display: none; }
.v2-track-current-card { top: auto; right: 8px; bottom: 126px; left: 8px; width: auto; border-radius: 9px; }.v2-track-current-card > header { padding: 8px 10px 6px; }.v2-track-current-card > div > span { padding: 6px 9px; }.v2-track-current-card > p { display: none; }
.v2-track-empty-state { width: min(300px, calc(100% - 28px)); transform: translate(-50%, calc(-50% - 42px)); padding: 20px 16px; }
.v2-track-loading { top: 103px; width: max-content; max-width: calc(100% - 20px); }
.v2-track-error { top: 103px; right: 8px; width: calc(100% - 16px); }
.v2-track-playback-dock { min-height: 118px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 9px; }.v2-track-dock-summary, .v2-track-dock-metrics { display: none; }.v2-track-dock-progress { align-self: center; }.v2-track-dock-controls { align-self: center; gap: 4px; }.v2-track-dock-controls > button { width: 34px; height: 34px; }.v2-track-dock-controls > button.is-primary { width: 42px; height: 42px; }.v2-track-dock-controls > button:first-child, .v2-track-dock-controls > button:nth-child(3), .v2-track-dock-controls > button:last-child { display: none; }.v2-track-dock-controls label { height: 34px; padding: 0 6px; }.v2-track-dock-controls label span { display: none; }
.v2-track-dock-progress > div span { display: none; }
}
/* Shared workspace scale — aligns data pages with the monitor command center. */
:is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) {
--v2-workspace-title: 22px;
--v2-workspace-body: 13px;
--v2-workspace-control: 12px;
--v2-workspace-meta: 11px;
--v2-workspace-row: 48px;
font-size: var(--v2-workspace-body);
}
:is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page)
:where(button, input, select, textarea) {
font-size: var(--v2-workspace-control);
}
:is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page)
:where(p, li, dt, dd, td) {
font-size: var(--v2-workspace-control);
line-height: 1.5;
}
:is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page)
:where(small, time, code) {
font-size: var(--v2-workspace-meta);
line-height: 1.45;
}
:is(.v2-vehicle-record-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) :where(h2) {
font-size: var(--v2-workspace-title);
line-height: 1.25;
letter-spacing: -.03em;
}
:is(.v2-vehicle-record-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) :where(h3) {
font-size: 14px;
line-height: 1.35;
}
:is(.v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page)
:where(table th) {
font-size: var(--v2-workspace-meta);
line-height: 1.35;
}
/* Vehicle lookup and detail. */
.v2-vehicle-search-card { width: min(620px, 100%); padding: 38px 42px; }
.v2-vehicle-search-card h2, .v2-not-found h2 { font-size: 24px; }
.v2-vehicle-search-card > p, .v2-not-found p { font-size: 13px; }
.v2-vehicle-search-card input { height: 42px; font-size: 14px; }
.v2-vehicle-record-page { gap: 14px; padding: 16px 20px 20px; }
.v2-vehicle-record-page header strong, .v2-vehicle-record-page article strong { font-size: 13px; }
.v2-vehicle-record-page .v2-plate { min-height: 40px; font-size: 17px; }
.v2-vehicle-record-page .v2-live-grid strong { font-size: 18px; }
.v2-vehicle-record-page .v2-record-list > div,
.v2-vehicle-record-page .v2-telemetry-list > div { min-height: 42px; font-size: 12px; }
.v2-vehicle-record-page .v2-telemetry-list strong { font-size: 12px; }
.v2-vehicle-record-page .v2-identity-actions a { height: 38px; font-size: 12px; }
/* Track replay keeps the map-first layout while making command chrome readable. */
.v2-track-page { grid-template-columns: 340px minmax(0, 1fr); }
.v2-track-query { padding: 16px; }
.v2-track-query > header { height: 38px; margin-bottom: 12px; }
.v2-track-query > header strong { font-size: 16px; }
.v2-track-query > header span,
.v2-track-query > label,
.v2-track-date-grid label { font-size: 11px; }
.v2-track-vehicle-picker { height: 42px; }
.v2-track-vehicle-picker input { height: 38px; font-size: 13px; }
.v2-track-date-grid input, .v2-track-query select { height: 39px; font-size: 12px; }
.v2-track-presets button { height: 30px; font-size: 11px; }
.v2-track-query-button { height: 40px; font-size: 13px; }
.v2-track-page header strong,
.v2-track-stop-list button strong,
.v2-track-event-list button strong,
.v2-track-overview-panel strong { font-size: 12px; }
.v2-track-page small,
.v2-track-stop-list button small,
.v2-track-event-list button small { font-size: 10px; }
.v2-track-stop-list > button, .v2-track-event-list > button { min-height: 56px; }
.v2-track-overview-panel dl div { min-height: 30px; align-items: center; font-size: 11px; }
.v2-track-stage-tools button { height: 38px; font-size: 11px; }
.v2-track-coverage-float { min-height: 38px; font-size: 10px; }
.v2-track-coverage-float strong { font-size: 12px; }
.v2-track-current-card { width: 310px; }
.v2-track-current-card header strong { font-size: 14px; }
.v2-track-current-card > div strong { font-size: 12px; }
.v2-track-current-card > p { font-size: 10px; }
.v2-track-dock-summary strong { font-size: 18px; }
.v2-track-dock-summary span,
.v2-track-dock-progress > div,
.v2-track-dock-controls label { font-size: 10px; }
/* History data table. */
.v2-history-page { gap: 12px; padding: 16px 20px 20px; }
.v2-history-toolbar { padding: 14px 16px; }
.v2-history-toolbar label, .v2-history-range legend { font-size: 11px; }
.v2-history-toolbar input, .v2-history-toolbar select { height: 38px; font-size: 12px; }
.v2-history-range > div { height: 38px; }
.v2-history-range > div input { height: 36px; font-size: 12px; }
.v2-history-range > div span { font-size: 11px; }
.v2-history-summary { min-height: 76px; }
.v2-history-summary small { font-size: 11px; }
.v2-history-summary strong { font-size: 20px; }
.v2-history-table-card > header { min-height: 48px; padding: 0 14px; }
.v2-history-table-card > header strong { font-size: 14px; }
.v2-history-table-scroll table { font-size: 12px; }
.v2-history-table-scroll th { height: 42px; }
.v2-history-table-scroll td { height: 46px; }
.v2-history-table-card > footer { min-height: 44px; font-size: 11px; }
.v2-history-side header strong,
.v2-history-evidence strong { font-size: 13px; }
/* Mileage query already uses the monitor palette; align its compact metadata. */
.v2-mileage-page { gap: 14px; padding: 18px 20px 20px; }
.v2-mileage-heading h2 { font-size: 24px; }
.v2-mileage-heading p { font-size: 13px; }
.v2-mileage-filter > label { font-size: 12px; }
.v2-mileage-filter > label > input,
.v2-mileage-multiselect,
.v2-mileage-source-trigger { min-height: 42px; font-size: 13px; }
.v2-mileage-selection > input { font-size: 13px; }
.v2-mileage-chip { height: 28px; font-size: 11px; }
.v2-mileage-summary small, .v2-mileage-summary span { font-size: 11px; }
.v2-mileage-results > header strong { font-size: 14px; }
.v2-mileage-results > header span,
.v2-mileage-results > header em,
.v2-mileage-results > footer { font-size: 11px; }
.v2-mileage-table { font-size: 13px; }
.v2-mileage-table th { height: 44px; font-size: 12px; }
.v2-mileage-table td { height: 54px; }
/* Alert center: the previous 69px command-center scale was unreadable. */
.v2-alert-page { gap: 12px; overflow: auto; padding: 14px 18px 18px; background: var(--v2-bg); }
.v2-alert-heading { min-height: 50px; margin: 0; background: transparent; padding: 0; }
.v2-alert-heading h2 { font-size: 22px; }
.v2-alert-heading p { margin-left: 14px; font-size: 12px; }
.v2-alert-tabs { min-height: 42px; margin: 0; border: 1px solid var(--v2-border); border-radius: 9px 9px 0 0; padding: 0 14px; }
.v2-alert-tabs button { font-size: 12px; }
.v2-alert-filter { gap: 9px; padding: 12px; }
.v2-alert-filter label { gap: 6px; font-size: 11px; }
.v2-alert-filter label > div,
.v2-alert-filter input,
.v2-alert-filter select,
.v2-alert-filter button { height: 36px; font-size: 12px; }
.v2-alert-kpis { min-height: 76px; margin-top: 0; }
.v2-alert-kpis small { font-size: 11px; }
.v2-alert-kpis strong { font-size: 21px; }
.v2-alert-workspace { min-height: 520px; grid-template-columns: minmax(760px, 1fr) 360px; gap: 12px; margin-top: 0; }
.v2-alert-page strong { font-size: 12px; }
.v2-alert-table-card > header { min-height: 44px; padding: 0 12px; }
.v2-alert-table-card > header strong { font-size: 14px; }
.v2-alert-table-card > header span { font-size: 11px; }
.v2-alert-table-card > header button { height: 32px; font-size: 11px; }
.v2-alert-table-scroll table { font-size: 11px; }
.v2-alert-table-scroll th { height: 40px; }
.v2-alert-table-scroll td { height: 46px; }
.v2-alert-table-scroll td small { font-size: 10px; }
.v2-alert-table-card > footer { min-height: 42px; font-size: 11px; }
.v2-alert-table-card > footer button, .v2-alert-table-card > footer select { height: 30px; font-size: 11px; }
.v2-alert-inspector > header strong { font-size: 14px; }
.v2-alert-inspector h3 { font-size: 12px; }
.v2-alert-inspector dl > div { min-height: 30px; align-items: center; font-size: 11px; }
.v2-alert-actions button { height: 34px; font-size: 11px; }
.v2-alert-rule-list > header strong,
.v2-alert-rule-editor > header strong,
.v2-alert-notifications > header strong { font-size: 14px; }
.v2-alert-rule-list > button { min-height: 66px; }
.v2-alert-rule-list > button strong,
.v2-alert-notifications article strong { font-size: 12px; }
.v2-alert-rule-list > button small,
.v2-alert-notifications article span { font-size: 10px; }
.v2-rule-form-grid label { font-size: 11px; }
.v2-rule-form-grid input, .v2-rule-form-grid select, .v2-rule-form-grid textarea { font-size: 12px; }
/* Access management: preserve the table-first layout and enlarge work text. */
.v2-access-page-v3 { gap: 14px; padding: 18px 20px 22px; }
.v2-access-heading h2 { font-size: 22px; }
.v2-access-heading p { font-size: 12px; }
.v2-access-page strong { font-size: 12px; }
.v2-access-filter-v3 { padding: 13px 15px; }
.v2-access-filter-v3 label { gap: 6px; font-size: 11px; }
.v2-access-filter-v3 input,
.v2-access-filter-v3 select,
.v2-access-filter-v3 label > div,
.v2-access-filter-v3 > button { height: 38px; font-size: 12px; }
.v2-access-kpis-v3 { min-height: 76px; }
.v2-access-kpis-v3 small { font-size: 11px; }
.v2-access-kpis-v3 strong { font-size: 20px; }
.v2-access-table-v3 > header { min-height: 54px; padding: 0 14px; }
.v2-access-table-title strong { font-size: 14px; }
.v2-access-table-title span { font-size: 11px; }
.v2-access-table-scroll-v3 table { font-size: 12px; }
.v2-access-table-scroll-v3 th { height: 42px; font-size: 11px; }
.v2-access-table-scroll-v3 td { height: 56px; }
.v2-access-table-v3 > footer { min-height: 44px; font-size: 11px; }
.v2-access-inspector-v3 > header strong { font-size: 15px; }
.v2-access-inspector-summary span,
.v2-access-protocol-cell span { font-size: 11px; }
/* Mileage query: one dominant conclusion, compact controls, data-first results. */
.v2-mileage-page { gap: 12px; padding: 18px 20px 20px; }
.v2-mileage-summary > .is-primary small,
.v2-mileage-summary > .is-primary span { font-size: 11px; }
.v2-mileage-summary-secondary small,
.v2-mileage-summary-secondary span { font-size: 11px; }
.v2-mileage-table th { height: 46px; }
.v2-mileage-table td { height: 56px; }
.v2-mileage-mobile-day-heading { display: none; }
@media (max-width: 1280px) {
.v2-alert-workspace { grid-template-columns: minmax(650px, 1fr) 330px; }
.v2-track-page { grid-template-columns: 310px minmax(0, 1fr); }
}
@media (max-width: 900px) {
:is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) {
--v2-workspace-control: 13px;
--v2-workspace-meta: 11px;
}
.v2-vehicle-record-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page-v3 { padding: 12px 10px 18px; }
.v2-alert-heading > div { align-items: flex-start; flex-direction: column; gap: 4px; }
.v2-alert-heading p { margin-left: 0; }
.v2-alert-workspace { min-height: 700px; grid-template-columns: minmax(650px, 1fr); }
}
@media (max-width: 700px) {
.v2-track-page { display: block; }
.v2-track-page > .v2-monitor-return { margin: 7px; }
.v2-monitor-return { min-height: 34px; gap: 7px; padding: 4px 6px; }
.v2-monitor-return a { height: 27px; padding: 0 8px; }
.v2-monitor-return span { flex: 1; }
.v2-monitor-return em { display: none; }
.v2-track-query > label, .v2-track-date-grid label { font-size: 12px; }
.v2-track-query-button { font-size: 13px; }
.v2-alert-tabs { overflow-x: auto; }
.v2-alert-tabs button { min-width: max-content; }
}
/* Keep mobile task layouts authoritative after the desktop typography layer. */
@media (max-width: 680px) {
.v2-alert-heading { display: none; }
.v2-alert-workspace { display: flex; min-height: 0; grid-template-columns: none; flex-direction: column; }
.v2-alert-table-card { height: auto; min-height: 420px; }
.v2-alert-table-scroll table { display: none; }
.v2-alert-mobile-list { display: flex; }
.v2-access-heading > div:first-child,
.v2-mileage-heading > div { display: none; }
.v2-access-kpis-v3 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; }
.v2-access-kpis-v3 button { min-width: 0; flex: none; }
.v2-access-kpis-v3 small { flex: 0 0 auto; white-space: nowrap; }
.v2-access-kpis-v3 em { display: none; }
.v2-access-workspace-v3 { min-height: 480px; flex-basis: auto; }
.v2-access-table-scroll-v3 table { display: none; }
.v2-access-mobile-list { display: flex; }
.v2-history-main { display: flex; height: auto; min-height: 0; flex-direction: column; }
.v2-history-table-card { height: auto; min-height: 380px; order: 2; }
.v2-history-trend { order: 3; }
.v2-history-table-scroll table { display: none; }
.v2-history-mobile-list { display: flex; }
:is(.v2-alert-filter,.v2-access-filter-v3,.v2-history-toolbar,.v2-mileage-filter).is-mobile-collapsed { display: none !important; }
.v2-track-page.is-rail-collapsed { display: grid; grid-template-columns: minmax(0,1fr); }
.v2-mileage-page { gap: 7px; padding: 7px 7px 14px; }
.v2-mileage-query-panel { padding: 7px; border-radius: 11px; }
.v2-mileage-query-panel > .v2-mobile-filter-toggle { min-height: 48px; margin: 0 0 7px; padding: 7px 10px; }
.v2-mileage-ranges { grid-template-columns: repeat(5,minmax(0,1fr)); }
.v2-mileage-ranges button { height: 36px; padding: 0 3px; font-size: 10px; }
.v2-mileage-summary { display: grid; grid-template-columns: 1fr; gap: 6px; border: 0; background: transparent; }
.v2-mileage-summary > .is-primary { min-height: 82px; border-radius: 9px; padding: 11px 14px 12px; }
.v2-mileage-summary > .is-primary strong { margin: 4px 0 2px; font-size: 25px; }
.v2-mileage-summary-secondary { grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; border: 1px solid #e1e7ef; border-radius: 10px; }
.v2-mileage-summary-secondary article { min-height: 70px; justify-content: flex-start; border-bottom: 0 !important; padding: 9px 9px 8px; }
.v2-mileage-summary-secondary article + article::before { inset: 9px auto 9px 0; }
.v2-mileage-summary-secondary strong { margin: 4px 0 2px; font-size: 16px; }
.v2-mileage-summary-secondary span { overflow: hidden; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-results { min-height: 430px; border-radius: 12px; }
.v2-mileage-results > header { gap: 5px; padding: 9px 10px; }
.v2-mileage-results > header div:first-child { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
.v2-mileage-results > header strong { font-size: 14px; }
.v2-mileage-results > header .v2-mileage-result-actions { gap: 6px; }
.v2-mileage-results > header .v2-mileage-result-actions em { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-result-actions > button { height: 32px; padding: 0 9px; font-size: 10px; }
.v2-mileage-table-wrap { display: block; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
.v2-mileage-table { width: max-content; min-width: 100%; font-size: 10px; }
.v2-mileage-table th { height: 38px; padding: 0 8px; font-size: 9px; }
.v2-mileage-table td { height: 44px; padding: 0 8px; font-size: 10px; }
.v2-mileage-table .is-vin { display: none; }
.v2-mileage-table .is-plate { left: 0; width: 92px; min-width: 92px; max-width: 92px; border-right: 1px solid #d8e0ea; box-shadow: 5px 0 10px rgba(15,23,42,.035); }
.v2-mileage-table td.is-plate strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-mileage-table .is-date { width: 76px; min-width: 76px; }
.v2-mileage-table .is-total { width: 104px; min-width: 104px; padding-right: 10px; }
.v2-mileage-table .is-daily { font-size: 10px; }
.v2-mileage-table .is-period { font-size: 11px; }
.v2-source-evidence-trigger { min-height: 58px; padding: 10px 11px; }
.v2-source-evidence-trigger strong { font-size: 13px; }
.v2-source-evidence-trigger span { max-width: 220px; font-size: 10px; }
.v2-source-evidence-trigger button { height: 34px; font-size: 10px; }
.v2-source-evidence-body { padding: 10px; }
.v2-source-evidence-toolbar { align-items: flex-start; flex-direction: column; gap: 7px; }
.v2-source-evidence-toolbar label { font-size: 10px; }
.v2-source-evidence-toolbar input { height: 34px; font-size: 11px; }
.v2-source-evidence-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.v2-source-evidence-summary > div:nth-child(3) { border-left: 0; }
.v2-source-evidence-summary > div:nth-child(n+3) { border-top: 1px solid #e2e8f0; }
.v2-source-evidence-summary strong { font-size: 15px; }
.v2-source-evidence-group > div { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.v2-source-evidence-card { min-width: min(82vw,300px); flex: 0 0 min(82vw,300px); scroll-snap-align: start; }
.v2-source-evidence-card > header strong { font-size: 11px; }
.v2-source-evidence-card dd { font-size: 10px; }
}