:root {
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  color: #edf4fb;
  background: #07111f;
  color-scheme: dark;
  --accent: #f0a417;
  --accent-soft: #f0a41722;
  --panel: #101d2c;
  --panel-light: #16263a;
  --line: #26394e;
  --muted: #91a5ba;
  --success: #35c58a;
  --danger: #ef6262;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 15% -10%, #173753 0, transparent 36%), radial-gradient(circle at 90% 5%, #47330f55 0, transparent 28%), #07111f; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.035em; margin-bottom: .5rem; }
h2 { font-size: 1.15rem; margin-bottom: 1rem; }
p { color: var(--muted); line-height: 1.55; }

.topbar { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px clamp(18px, 4vw, 60px); border-bottom: 1px solid #ffffff12; background: #07111ed9; backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 48px; height: 48px; display: block; border-radius: 13px; object-fit: contain; filter: drop-shadow(0 7px 14px #087ed055); }
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); margin-top: 2px; }
.session-box { display: flex; align-items: center; gap: 12px; }
.live-status { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: #9ee7c2; }
.live-status i { width: 8px; height: 8px; border-radius: 50%; background: #37d58c; box-shadow: 0 0 0 4px rgba(55,213,140,.12); }
.live-status.reconnecting { color: var(--muted); }
.live-status.reconnecting i { background: #f6ad1b; box-shadow: 0 0 0 4px rgba(246,173,27,.12); }
#sessionUser { color: var(--muted); }

main { max-width: 1680px; margin: 0 auto; padding: clamp(20px, 3vw, 44px); }
.hidden { display: none !important; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #132238f2, #0d1928f4); box-shadow: 0 18px 55px #00000030; padding: clamp(18px, 2.2vw, 28px); }
.panel-kicker, .eyebrow { display: inline-block; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 8px; }

.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 15px; font-weight: 750; color: #f4f7fa; background: var(--panel-light); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); border-color: #ffffff30; }
.button.primary { color: #161009; background: linear-gradient(135deg, #ffc14d, #e69200); }
.button.secondary { border-color: var(--line); background: #122136; }
.button.ghost { border-color: var(--line); background: transparent; }
.button.danger, .danger { color: white; background: #b33f47; }
.button.small { padding: 7px 10px; font-size: .82rem; margin: 2px; }
.button.compact { width: auto; margin-bottom: 18px; padding: 7px 11px; }

.auth-shell { max-width: 1220px; margin: clamp(16px, 7vh, 90px) auto; }
.welcome-panel { max-width: 800px; margin-bottom: 32px; }
.welcome-panel h1 { max-width: 760px; font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.02; }
.welcome-panel p { max-width: 680px; font-size: 1.08rem; }
.feature-row { display: flex; flex-wrap: wrap; gap: 18px; color: #cad7e5; }
.feature-row span::first-letter { color: var(--success); }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 22px; }
.auth-card { display: grid; align-content: start; }
.auth-card .button { margin-top: 8px; }
.remember-login { grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; gap: 11px; margin: 8px 0 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #081421; }
.remember-login input { width: 18px; height: 18px; margin: 2px 0 0; }
.remember-login strong, .remember-login small { display: block; }
.remember-login small { margin-top: 3px; color: var(--muted); font-weight: 450; line-height: 1.35; }
.register-avatar-note { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid #168ee3; background: #168ee312; font-size: .82rem; }
label { display: grid; gap: 7px; color: #bbcad9; margin: 12px 0; font-size: .9rem; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: #f5f8fb; background: #081421; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.portal { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 24px; align-items: start; }
.portal.profile-with-awards { grid-template-columns: 246px minmax(0, 1fr) minmax(280px, 320px); }
.portal.user-profile-with-sidebar { grid-template-columns: 246px minmax(0, 1fr) minmax(260px, 300px); }
.sidebar { position: sticky; top: 100px; padding: 15px; }
.sidebar nav { display: grid; gap: 5px; }
.sidebar nav button { width: 100%; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 10px; padding: 11px 13px; text-align: left; color: #b8c6d5; background: transparent; font-weight: 650; }
.sidebar nav button span { width: 20px; color: var(--muted); text-align: center; }
.sidebar nav button:hover { color: white; background: #ffffff0a; }
.sidebar nav button.active { color: #fff4db; border-color: #f0a41745; background: var(--accent-soft); }
.sidebar nav button.active span { color: var(--accent); }
.nav-title { margin: 5px 12px 8px; color: #6f879f; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-title.admin-nav { margin-top: 22px; }
.nav-title.community-nav { margin-top: 22px; }
.workspace { min-width: 0; }
.message { margin-bottom: 18px; padding: 13px 16px; border: 1px solid #f0a41755; border-radius: 12px; color: #ffd27a; background: #553b0f66; }
.message.success { color: #9be5c6; border-color: #35c58a55; background: #0c4d3566; }
.message.error { color: #ffb3b3; border-color: #ef626255; background: #5b182066; }
.page-heading { min-height: 110px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 8px 2px; }
.page-heading p { margin-bottom: 0; }
.status-pill, .badge { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #35c58a55; border-radius: 99px; padding: 6px 10px; color: #92e4c0; background: #35c58a17; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.badge.pending { color: #ffd47e; border-color: #f0a41755; background: #f0a41718; }
.badge.rejected { color: #ffaaaa; border-color: #ef626255; background: #ef626218; }
.badge.neutral { color: #b9c8d7; border-color: var(--line); background: #ffffff08; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric { position: relative; overflow: hidden; min-height: 132px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #15263b, #0c1929); }
.metric::after { content: ""; position: absolute; width: 80px; height: 80px; right: -28px; bottom: -30px; border-radius: 50%; background: var(--accent-soft); }
.metric span { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.metric strong { display: block; margin-top: 15px; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.metric small { display: block; margin-top: 5px; color: #7188a0; }
.metric.centered { text-align: center; }
.metric.online-metric { border-color: #35c58a66; background: linear-gradient(145deg, #12372f, #0c1929); }
.profile-hero-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(22px, 4vw, 46px); align-items: center; margin-bottom: 34px; overflow: hidden; background: radial-gradient(circle at 9% 25%, #1579be33, transparent 32%), linear-gradient(145deg, #132a43, #0b1725); }
.profile-avatar-frame { width: 210px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 2px solid #209be955; border-radius: 28px; background: radial-gradient(circle at 50% 28%, #1c5c88, #07111e 75%); box-shadow: 0 20px 54px #0007, 0 0 36px #168ee324; }
.profile-avatar-frame svg, .profile-avatar-frame .generated-avatar { width: 100%; height: 100%; }
.profile-hero-copy h2 { margin: 11px 0 7px; font-size: clamp(2rem, 4vw, 3.4rem); }
.profile-hero-copy > p { max-width: 680px; margin-bottom: 13px; }
.profile-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #9fb4c8; font-size: .82rem; }
.my-profile-presence { width: fit-content; margin: 15px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #071421aa; }
.my-profile-presence.connected { border-color: #35c58a66; background: #35c58a12; }
.my-profile-presence .presence-state.profile img { width: 34px; height: 34px; }
.my-profile-presence .presence-state.profile span { color: #dceaf6; font-size: .92rem; font-weight: 750; }
.profile-avatar-action { margin-top: 20px; }
.profile-onboarding-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.profile-onboarding-actions .profile-avatar-action { margin-top: 0; }
.profile-statistics-section { margin-top: 38px; }
.profile-statistics-grid .metric { min-height: 122px; }
.profile-statistics-grid .profile-stat-presence { display: inline-flex; align-items: center; margin-top: 1px; }
.profile-statistics-grid .profile-stat-presence img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; filter: brightness(0) invert(1); }
.generated-avatar { display: block; object-fit: cover; object-position: center; }
.small-user-avatar { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 1px solid #42aef477; border-radius: 11px; background: radial-gradient(circle at 50% 30%, #1b4566, #081522 72%); }
.small-user-avatar svg, .small-user-avatar .generated-avatar { width: 100%; height: 100%; object-fit: cover; }
.user-with-avatar, .driver-stat-user, .award-user, .last-event-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
.user-with-avatar strong, .driver-stat-user strong, .award-user > span, .last-event-user strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-profile-link { cursor: pointer; border-radius: 10px; outline: none; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.user-profile-link:hover, .user-profile-link:focus-visible { color: #77caff; background: #168ee318; box-shadow: 0 0 0 3px #168ee328; }
[data-presence-avatar].user-profile-link, [data-presence-name].user-profile-link { cursor: pointer; }
.home-section { margin-bottom: 34px; }
.center-heading { max-width: 760px; margin: 0 auto 18px; text-align: center; }
.center-heading h2 { margin-bottom: 7px; font-size: 1.45rem; }
.center-heading p { margin-bottom: 0; }
.account-heading { margin-top: 42px; }
.driver-stats { display: grid; gap: 7px; margin-top: 12px; }
.driver-stats > div { display: grid; grid-template-columns: minmax(140px, 1.5fr) repeat(4, minmax(100px, 1fr)); gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #0b1725; }
.driver-stats span { color: var(--muted); font-size: .82rem; }
.driver-stat-user strong { color: #eef7ff; }
.community-statistics-chart-card { position: relative; margin-bottom: 18px; padding-left: clamp(42px, 4vw, 62px); background: radial-gradient(circle at 82% 0, #168ee31f, transparent 38%), linear-gradient(145deg, #132238f2, #0d1928f4); }
.community-statistics-chart-heading { align-items: center; gap: 18px; }
.community-statistics-chart-heading p, .community-statistics-drivers-card .section-head p { margin: 5px 0 0; }
.statistics-period-tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid #263d52; border-radius: 9px; background: #071421aa; }
.statistics-period-tabs button { min-width: 56px; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; color: #8297ab; background: transparent; font-size: .74rem; font-weight: 750; }
.statistics-period-tabs button:hover { color: #fff; background: #ffffff0a; }
.statistics-period-tabs button.active { color: #06101b; border-color: #ffc14d; background: linear-gradient(135deg, #ffd06e, #e6970a); box-shadow: 0 4px 10px #0003; }
.statistics-range-navigation { display: grid; grid-template-columns: 38px minmax(180px, 1fr) 38px; gap: 10px; align-items: center; max-width: 620px; margin: 4px auto 14px; }
.statistics-range-arrow { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #38536c; border-radius: 50%; color: #eef7ff; background: #0a1928; font-size: 1.65rem; line-height: 1; }
.statistics-range-arrow:hover:not(:disabled) { border-color: #f0a417; color: #ffd16e; background: #142638; }
.statistics-range-arrow:disabled { opacity: .28; cursor: default; }
.statistics-range-center { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.statistics-range-center > p { min-width: 0; margin: 0; overflow: hidden; color: #c8d8e7; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 750; }
.statistics-range-center label { width: 162px; margin: 0; color: #6f879f; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.statistics-range-center input { min-height: 32px; margin-top: 2px; padding: 5px 8px; border-radius: 7px; font-size: .76rem; }
.community-statistics-chart { width: 100%; min-height: 350px; overflow-x: auto; border: 1px solid #ffffff0d; border-radius: 14px; background: linear-gradient(180deg, #071421aa, #07111edd); scrollbar-color: #37536d #071421; }
.community-statistics-chart svg { width: 100%; min-width: 660px; height: auto; display: block; }
.statistics-chart-grid-line line { stroke: #49607755; stroke-width: 1; stroke-dasharray: 5 7; }
.statistics-chart-grid-line text, .statistics-chart-x-tick { fill: #7f95aa; font-size: 14px; font-weight: 650; }
.statistics-chart-area { fill: url(#statisticsChartArea); }
.statistics-chart-line { fill: none; stroke: #49baff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: url(#statisticsChartGlow); }
.statistics-chart-point { fill: #ffd16e; stroke: #081421; stroke-width: 3; cursor: help; transition: r .15s ease, fill .15s ease; }
.statistics-chart-point:hover, .statistics-chart-point:focus { r: 8; fill: #fff0bd; outline: none; }
.statistics-chart-y-label { position: absolute; left: 16px; top: 54%; transform: translateY(-50%) rotate(-90deg); color: #6f879f; font-size: .66rem; font-weight: 850; letter-spacing: .14em; white-space: nowrap; }
.statistics-chart-x-label { margin-top: 10px; color: #6f879f; text-align: center; font-size: .66rem; font-weight: 850; letter-spacing: .14em; }
.statistics-chart-totals { display: grid; grid-template-columns: repeat(4,minmax(130px,1fr)); gap: 1px; overflow: hidden; margin-top: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
.statistics-chart-totals > div { min-width: 0; padding: 13px 15px; background: #081522; }
.statistics-chart-totals span, .statistics-chart-totals strong, .statistics-chart-totals small { display: block; }
.statistics-chart-totals span { color: #7f95aa; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.statistics-chart-totals strong { margin-top: 6px; color: #eef7ff; font-size: 1.08rem; }
.statistics-chart-totals small { margin-top: 3px; color: #6f879f; font-size: .7rem; }
.community-statistics-summary { margin-top: 18px; }
.community-statistics-summary .metric { min-height: 122px; }
.community-statistics-drivers-card { margin-top: 18px; }
.statistics-driver { width: fit-content; display: inline-flex; align-items: center; gap: 9px; padding: 4px 6px; }
.statistics-driver strong { color: #eef7ff; }
.statistics-participation { width: 150px; height: 8px; display: inline-block; overflow: hidden; margin-right: 8px; border-radius: 99px; background: #06101b; vertical-align: middle; }
.statistics-participation span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #168ee3, #48d0ff); }
.community-statistics-drivers-card td:last-child small { color: var(--muted); white-space: nowrap; }
.statistics-total-row td { border-top: 2px solid #f0a41788; border-bottom: 0; color: #fff1cf; background: #f0a4170d; }
.statistics-total-row td:first-child strong, .statistics-total-row td:first-child small { display: block; }
.statistics-total-row td:first-child small { margin-top: 4px; color: #a9936c; }
.presence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
.presence-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #0a1725; }
.presence-card > div { min-width: 0; }
.presence-card strong, .presence-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presence-card small { margin-top: 3px; color: var(--muted); }
.presence-card .presence-location { display: flex; align-items: center; gap: 6px; color: #cfe8fa; }
.presence-cargo { display: flex; align-items: center; gap: 7px; min-width: 0; }
.presence-cargo img { width: 34px; height: 27px; flex: 0 0 auto; object-fit: contain; }
.presence-cargo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-location-flag { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; }
.presence-state { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.presence-state img { width: 25px; height: 25px; object-fit: contain; filter: brightness(0) invert(1); border-radius: 5px; }
.presence-state.large { flex: 0 0 auto; }
.presence-state.large img { width: 46px; height: 46px; }
.presence-state.large > span { display: none; }
.events-column { min-width: 0; }
.event-carousel { position: relative; min-width: 0; padding: 0 42px; }
.event-window { min-width: 0; overflow: hidden; }
.event-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.event-track.carousel-refresh { animation: carousel-refresh .35s ease both; }
.event-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, #14253a, #0c1827); box-shadow: 0 18px 44px #0003; }
.event-image { position: relative; min-height: 0; aspect-ratio: 1/1; overflow: hidden; background: radial-gradient(circle at 50% 42%, #21334a 0, #091421 70%); }
.event-image > .event-main-image { position: absolute; top: 50%; left: 50%; width: calc(100% - 28px); height: calc(100% - 28px); display: block; padding: 0; transform: translate(-50%, -50%); object-fit: contain; object-position: center center; }
.event-image.generated > .event-main-image { width: 100%; height: 100%; object-fit: contain; }
.event-cargo-thumb { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 54px !important; height: 54px !important; padding: 5px !important; border: 2px solid #fff; border-radius: 12px; background: #07111ee8; object-fit: contain !important; box-shadow: 0 8px 22px #0009; }
.event-image > span { position: absolute; z-index: 2; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: 99px; color: #fff; background: #07111ecc; font-size: .75rem; font-weight: 800; }
.completed-stamp { position: absolute !important; z-index: 4; top: 50% !important; left: 50% !important; width: min(76%, 300px) !important; height: auto !important; padding: 0 !important; transform: translate(-50%, -50%) rotate(-5deg) !important; object-fit: contain !important; filter: drop-shadow(0 8px 12px #000a); pointer-events: none; }
.completed-stamp.hero { width: min(70%, 320px) !important; }
.completed-stamp.small { width: 78% !important; }
.event-card.completed { border-color: #35c58a88; box-shadow: 0 18px 44px #0003, 0 0 24px #35c58a18; }
.event-card-body { padding: 15px; }
.event-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.event-title small { color: var(--accent); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.event-title h3 { margin: 3px 0 12px; font-size: 1rem; }
.event-description { display: -webkit-box; overflow: hidden; margin: -3px 0 12px; color: #a9b9c9; font-size: .76rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.flag { width: 34px; height: 26px; border-radius: 6px; object-fit: cover; }
.event-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 7px; align-items: stretch; margin: 4px 0 14px; }
.event-route-arrow { align-self: center; color: var(--accent); font-size: 1.1rem; font-weight: 900; }
.event-stop { min-width: 0; padding: 8px; border: 1px solid #ffffff10; border-radius: 10px; background: #07142199; }
.event-stop-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 7px; color: var(--accent); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.event-stop-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-stop-label img { width: 25px; height: 18px; border-radius: 4px; object-fit: cover; }
.event-stop-main { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; align-items: center; }
.event-stop-main > img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }
.event-stop strong, .event-stop small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-stop strong { font-size: .74rem; }
.event-stop small { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.event-stop.unavailable { display: grid; align-content: center; color: var(--muted); }
.event-stop.unavailable span { color: var(--accent); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.progress-label { display: flex; justify-content: space-between; gap: 10px; margin: 9px 0 6px; color: var(--muted); font-size: .75rem; }
.progress-label strong { color: var(--accent); }
.progress { height: 7px; overflow: hidden; border-radius: 99px; background: #06101b; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #df8d00, #ffc454); }
.progress.completed span { background: linear-gradient(90deg, #168b5a, #4fe3a4); }
.progress-label.completed strong { color: #55e4a8; }
.progress.big { height: 12px; }
.progress-label.big { margin-top: 24px; font-size: .95rem; }
.event-dates { display: flex; justify-content: space-between; margin: 7px 0 13px; color: #7188a0; font-size: .72rem; }
.event-open { width: 100%; padding: 8px; font-size: .78rem; }
.carousel-arrow { position: absolute; z-index: 3; top: 50%; width: 36px; height: 54px; display: grid; place-items: center; transform: translateY(-50%); border: 1px solid #f0a41766; border-radius: 12px; color: #ffd16e; background: #101d2cf2; box-shadow: 0 10px 28px #0007; font-size: 2rem; line-height: 1; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.carousel-arrow:hover { transform: translateY(-50%) scale(1.04); border-color: var(--accent); background: #1b2d42; }
.carousel-arrow:focus-visible { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.carousel-arrow.previous { left: 0; }
.carousel-arrow.next { right: 0; }
.carousel-footer { min-height: 24px; display: flex; justify-content: center; gap: 16px; margin-top: 11px; color: #7188a0; font-size: .72rem; }
.carousel-footer span:first-child { color: #b6c5d4; font-weight: 700; }
.awards-sidebar { position: sticky; top: 100px; padding: 22px; }
.profile-side-entry { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; margin-bottom: 22px; padding: 13px; border: 1px solid #168ee366; border-radius: 14px; color: #eaf6ff; text-align: left; background: linear-gradient(135deg, #123b59, #0a1826); }
.profile-side-entry:hover { border-color: #38a9f3; transform: translateY(-1px); }
.profile-side-entry > span:nth-child(2) { min-width: 0; }
.profile-side-entry strong, .profile-side-entry small { display: block; }
.profile-side-entry small { margin-top: 3px; color: #8fb8d3; }
.profile-side-entry b { color: #75c9ff; font-size: 1.7rem; }
.profile-side-entry.community-side-entry { margin-top: -10px; border-color: #f0a41755; background: linear-gradient(135deg, #3a2b12, #0a1826); }
.profile-side-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #dff3ff; background: #168ee32b; font-size: 1.25rem; }
.profile-side-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid #42aef477; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #1b4566, #081522 72%); }
.profile-side-avatar svg, .profile-side-avatar .generated-avatar, .profile-side-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.user-profile-sidebar { position: sticky; top: 100px; padding: 18px; }
.selected-user-context { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 16px; padding: 4px 5px 17px; border-bottom: 1px solid var(--line); }
.selected-user-context .profile-side-avatar { width: 52px; height: 52px; }
.selected-user-context strong, .selected-user-context small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-user-context small { margin-top: 4px; color: #8fb8d3; }
.profile-context-nav { display: grid; gap: 8px; }
.profile-context-nav button { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid transparent; border-radius: 13px; color: #c4d3e1; text-align: left; background: transparent; }
.profile-context-nav button:hover { border-color: #168ee355; background: #168ee30c; }
.profile-context-nav button.active { color: #fff4db; border-color: #f0a41755; background: #f0a41714; }
.profile-context-nav button > span:nth-child(2) { min-width: 0; }
.profile-context-nav strong, .profile-context-nav small { display: block; }
.profile-context-nav small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.profile-context-nav b { color: #75c9ff; font-size: 1.35rem; }
.user-profile-back { width: 100%; margin-top: 18px; }
.awards-heading { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.awards-heading h2 { margin-bottom: 5px; font-size: 1.3rem; }
.awards-heading p { margin-bottom: 0; font-size: .86rem; text-transform: capitalize; }
.awards-list { display: grid; gap: 11px; margin-top: 18px; }
.award-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 13px 12px; border: 1px solid var(--line); border-radius: 13px; background: #091522; }
.award-rank { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid #a8731e; border-radius: 50%; color: #ffe7a4; background: #6e471c; font-size: 1rem; font-weight: 900; }
.award-1 { border-color: #eeb63677; background: linear-gradient(135deg, #3d2b11, #0b1725 72%); }
.award-1 .award-rank { border-color: #ffd76a; color: #301d00; background: linear-gradient(145deg, #ffe68b, #d99416); box-shadow: 0 0 22px #f0a41744; }
.award-2 .award-rank { border-color: #e4ebf2; color: #23303c; background: linear-gradient(145deg, #f4f7fa, #9daab7); }
.award-3 .award-rank { border-color: #e1a06d; color: #32170a; background: linear-gradient(145deg, #efb080, #9e542a); }
.award-row strong, .award-row small { display: block; }
.award-row small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.award-row b { color: #f7c45f; font-size: .86rem; white-space: nowrap; }
.last-event-award { margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--line); }
.last-event-card { width: 100%; display: grid; gap: 7px; margin-top: 18px; padding: 0 0 14px; overflow: hidden; border: 1px solid #35c58a66; border-radius: 14px; color: inherit; text-align: left; background: #091522; }
.last-event-card:hover { border-color: var(--success); }
.last-event-image { position: relative; aspect-ratio: 1.35/1; overflow: hidden; background: radial-gradient(circle at 50% 42%, #21334a, #091421 70%); }
.last-event-image > img:first-child { width: 100%; height: 100%; object-fit: contain; }
.last-event-image.generated > img:first-child { object-fit: contain; }
.last-event-image .event-cargo-thumb { right: 9px; bottom: 9px; width: 48px !important; height: 48px !important; }
.last-event-card > span, .last-event-card > strong, .last-event-card > small { margin: 0 13px; }
.last-event-card > .last-event-user { margin: 0 13px; }
.last-event-card > span { color: var(--success); font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.last-event-card > strong { font-size: 1.05rem; }
.last-event-card > small { color: var(--muted); line-height: 1.45; }
@keyframes carousel-refresh { from { opacity: .35; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .event-track.carousel-refresh { animation: none; } }
.event-detail-kicker { display: block; margin-top: 4px; }
.event-hero { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(300px, 1.15fr); gap: 26px; margin-bottom: 18px; }
.event-hero-images { position: relative; min-height: 0; display: grid; place-items: center; align-self: start; overflow: hidden; border-radius: 14px; background: #07111e; }
.hero-event-image { width: 100%; height: auto; max-height: 560px; display: block; object-fit: contain; object-position: center; }
.event-hero-images.generated .hero-event-image { object-fit: contain; }
.event-hero-info { align-self: center; }
.event-hero-info-heading { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 18px; align-items: start; }
.event-hero-info-heading h2 { margin: 18px 0 0; font-size: 1.7rem; }
.event-detail-cargo-logo { width: 84px; height: 84px; display: block; object-fit: contain; filter: drop-shadow(0 7px 12px #0008); }
.event-detail-cargo-card { min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 9px; border: 1px solid #ffffff14; border-radius: 11px; color: #edf5fb; background: #050d16; box-shadow: inset 0 1px #ffffff08, 0 8px 20px #0005; transform: translateY(-10px); }
.event-detail-cargo-card > span { color: var(--accent); font-size: .61rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.event-detail-cargo-card > strong { width: 100%; overflow: hidden; font-size: .68rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.event-detail-cargo-card .event-detail-cargo-logo { width: 62px; height: 62px; }
.event-detail-description { margin: -5px 0 16px; padding: 12px 14px; border-left: 3px solid var(--accent); white-space: pre-line; background: #07142199; }
.badge.completed { color: #9df0ca; border-color: #35c58a88; background: #35c58a22; }
.event-detail-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; margin: 16px 0; }
.event-detail-route .event-stop { padding: 12px; background: #071421cc; }
.event-detail-route .event-stop-main { grid-template-columns: 42px minmax(0, 1fr); }
.event-detail-route .event-stop-main > img { width: 42px; height: 42px; }
.event-detail-route .event-stop strong { font-size: .9rem; }
.event-detail-route .event-stop small { font-size: .72rem; }
.event-admin-layout { grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); }
.event-location-group { min-width: 0; margin: 18px 0; padding: 12px 15px 5px; border: 1px solid var(--line); border-radius: 13px; background: #07142166; }
.event-location-group legend { padding: 0 8px; color: var(--accent); font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.event-ai-group { min-width: 0; margin: 18px 0; padding: 13px 15px 12px; border: 1px solid #168ee366; border-radius: 13px; background: linear-gradient(145deg, #0a2034, #071421); }
.event-ai-group legend { padding: 0 8px; color: #75c9ff; font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.event-ai-group small { display: block; color: var(--muted); line-height: 1.45; }
.event-ai-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 12px 0; }
.event-ai-actions .button { margin: 0; }
.event-local-image-button { display: inline-flex; width: auto; cursor: pointer; }
.event-local-image-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.event-local-image-input:focus-visible + .event-ai-status { outline: 2px solid var(--accent); outline-offset: 3px; }
.event-ai-status { color: var(--muted); font-size: .78rem; font-weight: 750; }
.event-ai-status.working { color: #75c9ff; }.event-ai-status.ready { color: #61edaa; }.event-ai-status.error { color: #ff8585; }
.event-ai-preview { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(180px,.65fr); gap: 14px; align-items: center; margin: 12px 0; padding: 10px; border: 1px solid #35c58a66; border-radius: 12px; background: #35c58a0d; }
.event-ai-preview img { width: 100%; height: auto; max-height: 220px; display: block; object-fit: contain; border-radius: 9px; background: #030a12; }
.event-ai-preview > div { display: grid; gap: 8px; align-content: center; }.event-ai-preview strong,.event-ai-preview span { display: block; }.event-ai-preview strong { color: #75efb5; }.event-ai-preview span { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.event-ai-preview .button { margin: 3px 0 0; }
.admin-event-list { display: grid; gap: 10px; }
.admin-event-item { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #0a1725; }
.admin-event-item.completed { border-color: #35c58a66; }
.admin-event-item img { width: 58px; height: 48px; border-radius: 9px; object-fit: cover; }
.admin-event-images { position: relative; width: 58px; height: 52px; }
.admin-event-item .admin-event-main { width: 58px; height: 48px; }
.admin-event-item .admin-event-cargo { position: absolute; right: -5px; bottom: -2px; width: 24px; height: 24px; padding: 2px; border: 1px solid #fff; border-radius: 6px; background: #07111e; object-fit: contain; }
.admin-event-item strong, .admin-event-item small { display: block; }
.admin-event-item small { margin-top: 3px; color: var(--muted); }
.admin-event-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.event-form-actions { margin-top: 16px; }
.details-panel { margin-top: 18px; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-head h2 { margin-bottom: 0; }
.section-head.centered { justify-content: center; text-align: center; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.bank-financing { margin-top: 18px; }
.bank-history { margin-top: 18px; }
.transfer-balance { padding: 12px 14px; border: 1px solid #f0a41755; border-radius: 10px; color: var(--muted); background: #f0a4170c; }
.transfer-balance strong { color: #ffd47e; }
.lock-label { color: var(--muted); font-size: .78rem; }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 1px; overflow: hidden; margin: 20px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.details-grid > div { padding: 15px; background: #0d1928; }
.details-grid dt { color: var(--muted); font-size: .78rem; }
.details-grid dd { margin: 5px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.note { margin: 18px 0 0; padding: 11px 14px; border-left: 3px solid var(--accent); color: var(--muted); background: #f0a4170a; }
.two-columns { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; }
.request-layout { grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.filters input { min-width: 240px; flex: 1; }
.filters select { width: auto; min-width: 180px; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: #7f95aa; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
td { color: #d8e2ec; font-size: .88rem; }
tbody tr:hover { background: #ffffff05; }
.amount-positive { color: #65d8a8; font-weight: 800; }
.amount-negative { color: #ff8585; font-weight: 800; }
.hash { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Consolas, monospace; color: #8fa5ba; }
.empty { padding: 30px 12px; text-align: center; color: var(--muted); }
.request-list { display: grid; gap: 10px; }
.request-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #0a1725; }
.request-item strong, .request-item small { display: block; }
.request-item small { margin-top: 4px; color: var(--muted); }

.public-user-search { max-width: 680px; }
.public-users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.public-user-card { display: grid; justify-items: center; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; color: inherit; text-align: center; background: linear-gradient(145deg, #14253a, #0b1725); transition: transform .15s ease, border-color .15s ease; }
.public-user-card:hover { transform: translateY(-2px); border-color: #168ee388; }
.public-user-card svg, .public-user-card .generated-avatar { width: 128px; height: 128px; border-radius: 22px; }
.public-user-card strong { font-size: 1rem; }
.public-user-card small { color: var(--muted); }
.role-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border: 1px solid #168ee366; border-radius: 99px; color: #a9dcff; background: #168ee318; font-size: .72rem; font-weight: 800; }
.public-profile { margin-top: 18px; }
.public-profile-layout { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 30px; align-items: center; }
.public-profile-avatar { display: grid; place-items: center; min-height: 320px; padding: 18px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, #1b4566, #081522 72%); }
.public-profile-avatar svg, .public-profile-avatar .generated-avatar { width: min(100%, 280px); height: auto; aspect-ratio: 1; border-radius: 24px; }
.public-profile-info h2 { margin: 10px 0 18px; font-size: clamp(2rem, 5vw, 3.6rem); }
.public-profile-stats { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 12px; }
.public-profile-stats div { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #0a1725; }
.public-profile-stats span, .public-profile-stats strong { display: block; }
.public-profile-stats span { color: var(--muted); font-size: .76rem; }
.public-profile-stats strong { margin-top: 6px; }
.public-statistics-heading { margin: 36px 0 16px; text-align: center; }
.public-statistics-heading h3 { margin: 0; font-size: 1.45rem; }
.public-statistics-grid { margin-bottom: 0; }
.admin-role-select { width: auto; min-width: 130px; padding: 7px 9px; }
.user-actions { display: flex; flex-wrap: wrap; gap: 4px; min-width: 280px; }
.ets2-fleet { display: grid; gap: 20px; }
.fleet-summary { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 12px; }
.fleet-summary > div { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #0a1725; }
.fleet-summary span, .fleet-summary strong { display: block; }
.fleet-summary span { color: var(--muted); font-size: .76rem; }
.fleet-summary strong { margin-top: 6px; font-size: 1.08rem; }
.fleet-section h3 { margin: 0 0 12px; }
.fleet-cards { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 12px; }
.fleet-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #0a1725; }
.fleet-card.active { border-color: #35c97699; box-shadow: inset 0 0 0 1px #35c9762b; }
.fleet-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.fleet-card-head strong, .fleet-card-head small { display: block; }
.fleet-card-head small { margin-top: 4px; color: var(--muted); }
.fleet-details { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 8px; }
.fleet-details > div { padding: 9px; border-radius: 9px; background: #ffffff08; }
.fleet-details span, .fleet-details strong { display: block; overflow-wrap: anywhere; }
.fleet-details span { color: var(--muted); font-size: .7rem; }
.fleet-details strong { margin-top: 3px; font-size: .86rem; }
.fleet-note { color: var(--muted); font-size: .82rem; }
.user-data-page { display: grid; gap: 18px; min-width: 0; }
.user-data-page > * { min-width: 0; max-width: 100%; }
.live-profit-label { color: #62f5b8; border-color: #31c98b55; background: #0f513733; }
.active-delivery-card { overflow: hidden; border-color: #2acb8f55; background: linear-gradient(145deg, #0d2130, #0a1623 62%); }
.delivery-cargo-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.delivery-cargo-title > img { width: 86px; height: 68px; flex: 0 0 auto; object-fit: contain; }
.delivery-cargo-title > div { min-width: 0; }
.delivery-route-companies { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 14px; align-items: center; margin: 4px 0 18px; padding: 12px 14px; border: 1px solid #ffffff12; border-radius: 12px; color: #bed4e6; background: #030a12aa; }
.delivery-route-companies span:last-child { text-align: right; }
.delivery-route-companies b { color: var(--accent); }
.delivery-profit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.delivery-profit-grid > div { min-width: 0; display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid #ffffff12; border-radius: 13px; background: #06111dcc; }
.delivery-profit-grid span { color: var(--muted); font-size: .79rem; }
.delivery-profit-grid strong { overflow-wrap: anywhere; font-size: 1.25rem; }
.delivery-profit-grid small { color: #829aaf; line-height: 1.35; }
.delivery-net-result { border-color: #2acb8f44 !important; box-shadow: inset 0 0 24px #1caa7410; }
.delivery-progress { display: grid; gap: 8px; margin-top: 18px; }
.delivery-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: #bed4e6; }
.delivery-progress > small { color: var(--muted); }
.delivery-empty-active { display: grid; gap: 8px; justify-items: center; padding: 30px; text-align: center; }
.delivery-empty-active span { max-width: 720px; color: var(--muted); }
.deliveries-history { overflow: hidden; }
.delivery-history-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.delivery-history-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, #14253a, #0c1827); box-shadow: 0 16px 36px #0003; }
.delivery-history-card.race { border-color: #f0a41755; }
.delivery-history-card-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border-bottom: 1px solid #ffffff12; background: linear-gradient(90deg, #10243a, #0a1725); }
.delivery-history-cargo { min-width: 0; display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 13px; align-items: center; }
.delivery-history-cargo-image { width: 82px; height: 64px; display: grid; place-items: center; overflow: hidden; border: 1px solid #ffffff14; border-radius: 12px; background: radial-gradient(circle at 50% 42%, #21334a, #07111e 72%); }
.delivery-history-cargo img { width: 72px; height: 54px; object-fit: contain; }
.delivery-history-cargo > span:last-child { min-width: 0; }
.delivery-history-cargo small, .delivery-history-cargo strong { display: block; }
.delivery-history-cargo small { margin-bottom: 5px; color: var(--accent); font-size: .67rem; font-weight: 800; letter-spacing: .09em; }
.delivery-history-cargo strong { min-width: 0; overflow-wrap: anywhere; font-size: 1.08rem; line-height: 1.3; }
.delivery-history-completed { flex: 0 0 auto; display: grid; justify-items: end; gap: 7px; text-align: right; }
.delivery-history-completed strong { color: #bcd0e2; font-size: .82rem; white-space: nowrap; }
.delivery-history-route { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 11px; align-items: stretch; padding: 16px 18px 0; }
.delivery-history-stop { min-width: 0; padding: 12px; border: 1px solid #ffffff12; border-radius: 12px; background: #071421aa; }
.delivery-history-stop-label { display: block; margin-bottom: 9px; color: var(--accent); font-size: .65rem; font-weight: 800; letter-spacing: .1em; }
.delivery-history-route-arrow { align-self: center; color: var(--accent); font-size: 1.35rem; font-weight: 900; }
.delivery-history-location { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: start; min-width: 0; }
.delivery-history-flag { font-size: 1.25rem; line-height: 1; }
.delivery-history-flag-image { width: 24px; height: 17px; object-fit: cover; border: 1px solid #ffffff2b; border-radius: 2px; }
.delivery-history-location > span:last-child, .delivery-history-location strong, .delivery-history-location small, .delivery-history-location em { display: block; min-width: 0; }
.delivery-history-location strong, .delivery-history-location em { overflow-wrap: anywhere; }
.delivery-history-location small { margin-top: 3px; }
.delivery-history-location em { margin-top: 5px; color: #9eb4c7; font-size: .72rem; font-style: normal; }
.delivery-history-trip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 14px 18px; }
.delivery-history-trip > div { min-width: 0; padding: 10px 12px; border: 1px solid #ffffff0e; border-radius: 10px; background: #ffffff06; }
.delivery-history-trip span, .delivery-history-trip strong { display: block; }
.delivery-history-trip span { color: var(--muted); font-size: .7rem; }
.delivery-history-trip strong { margin-top: 4px; overflow-wrap: anywhere; font-size: .91rem; }
.delivery-history-finance { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0 18px 18px; }
.delivery-history-finance > div { min-width: 0; display: grid; align-content: start; gap: 5px; padding: 13px; border: 1px solid #ffffff12; border-radius: 12px; background: #06111dcc; }
.delivery-history-finance span, .delivery-history-finance strong, .delivery-history-finance small { display: block; min-width: 0; }
.delivery-history-finance span { color: var(--muted); font-size: .73rem; }
.delivery-history-finance strong { overflow-wrap: anywhere; font-size: 1.08rem; }
.delivery-history-finance small { color: #829aaf; font-size: .69rem; line-height: 1.4; }
.delivery-history-finance .delivery-history-net { border-color: #2acb8f44; background: linear-gradient(145deg, #092119, #06111d); box-shadow: inset 0 0 24px #1caa7410; }
.admin-ets2-identity { min-width: 190px; }
.admin-ets2-identity > span { display: block; margin-bottom: 4px; color: var(--accent); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.admin-ets2-identity strong, .admin-ets2-identity small { display: block; }
.admin-ets2-identity small { margin-top: 4px; max-width: 260px; overflow-wrap: anywhere; white-space: normal; color: var(--muted); }
.garage-summary, .economy-summary { margin-bottom: 0; }
.active-fleet, .garage-location, .economy-table { margin: 0; }
.garage-location > h3 { margin: 24px 0 11px; }
.garage-location-summary { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 9px; }
.economy-expense-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.garage-location-summary > div, .economy-expense-grid > div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #091522; }
.economy-expense-grid > div { min-width: 0; overflow: hidden; }
.garage-location-summary span, .garage-location-summary strong, .economy-expense-grid span, .economy-expense-grid strong { display: block; }
.garage-location-summary span, .economy-expense-grid span { color: var(--muted); font-size: .7rem; }
.garage-location-summary strong, .economy-expense-grid strong { margin-top: 4px; overflow-wrap: anywhere; font-size: .88rem; }
.garage-vehicle-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; }
.garage-vehicle { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #091522; }
.garage-vehicle.active { border-color: #35c97688; box-shadow: inset 0 0 0 1px #35c97622; }
.fleet-details.compact { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
.vehicle-condition { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.vehicle-condition > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--muted); font-size: .76rem; }
.vehicle-condition > div:first-child strong { color: #dbe9f5; }
.vehicle-condition > small { display: block; margin-top: 7px; color: #7890a6; font-size: .68rem; }
.condition-track { height: 8px; overflow: hidden; border-radius: 99px; background: #ffffff0c; }
.condition-track i { display: block; height: 100%; border-radius: inherit; background: #35c58a; }
.condition-track i.warning { background: #f0a417; }
.condition-track i.danger { background: #ef6262; }
.economy-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 18px; }
.economy-chart-card { min-width: 0; overflow: hidden; }
.economy-chart { display: grid; gap: 16px; margin: 18px 0 22px; }
.economy-chart-row { display: grid; grid-template-columns: 110px minmax(100px, 1fr) 110px; gap: 12px; align-items: center; }
.economy-chart-row > span { color: var(--muted); font-size: .8rem; }
.economy-chart-row > strong { text-align: right; font-size: .86rem; }
.economy-chart-track { height: 16px; overflow: hidden; border: 1px solid #ffffff0d; border-radius: 99px; background: #07111e; }
.economy-chart-track i { display: block; height: 100%; border-radius: inherit; }
.economy-chart-track i.income { background: linear-gradient(90deg, #168ee3, #5fc1ff); }
.economy-chart-track i.expense, .economy-chart-track i.loss { background: linear-gradient(90deg, #a43b44, #ef6262); }
.economy-chart-track i.profit { background: linear-gradient(90deg, #1a895f, #35c58a); }
.economy-inline-indicator { min-width: 110px; margin-top: 7px; }
.economy-inline-indicator .condition-track { height: 5px; }
.economy-inline-indicator.loss .condition-track i { background: #ef6262; }
.economy-inline-indicator.profit .condition-track i { background: #35c58a; }
.economy-inline-indicator small { display: block; margin-top: 4px; color: var(--muted); font-size: .65rem; }
.economy-table td small { color: var(--muted); }
.community-events-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.company-admin-layout { grid-template-columns: minmax(310px, .8fr) minmax(0, 1.2fr); align-items: start; }
.company-location-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.company-country-control { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; }
.company-country-control img { width: 36px; height: 25px; object-fit: cover; border: 1px solid #ffffff38; border-radius: 5px; box-shadow: 0 3px 9px #0008; }
.company-location { display: inline-flex; max-width: 100%; align-items: center; gap: 8px; color: #b9d8ee; font-size: .82rem; }
.company-location img { flex: 0 0 auto; width: 28px; height: 19px; object-fit: cover; border: 1px solid #ffffff38; border-radius: 4px; }
.company-location span { overflow-wrap: anywhere; }
.company-logo-preview { width: min(100%, 250px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; margin: 12px auto 18px; border: 2px dashed #2b4a65; border-radius: 24px; color: var(--muted); background: radial-gradient(circle, #18334a, #081421 72%); }
.company-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.company-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 14px; }
.company-card { min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; padding: 15px; border: 1px solid var(--line); border-radius: 15px; color: inherit; text-align: left; background: linear-gradient(145deg, #14253a, #0b1725); }
.company-card:hover { border-color: #38a9f3; transform: translateY(-1px); }
.company-card-logo, .company-profile-logo { display: grid; place-items: center; overflow: hidden; border: 1px solid #42aef477; border-radius: 16px; background: radial-gradient(circle at 50% 35%, #1b4566, #081522 72%); }
.company-card-logo { width: 76px; aspect-ratio: 1; }
.company-card-logo img, .company-profile-logo img { width: 100%; height: 100%; object-fit: contain; }
.company-logo-fallback { color: #8fd4ff; font-size: 2rem; font-weight: 900; }
.company-card-copy { min-width: 0; }
.company-card-copy > strong, .company-card-copy > small, .company-card-copy > b { display: block; }
.company-card-copy > strong { margin: 9px 0 3px; overflow-wrap: anywhere; font-size: 1.05rem; }
.company-card-copy > small { color: var(--muted); }
.company-card-copy > p { display: -webkit-box; overflow: hidden; margin: 10px 0; font-size: .78rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.company-card-copy > b { color: #8ce2b8; }
.company-profile { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.company-profile-logo { width: 100%; aspect-ratio: 1; }
.company-profile-logo .company-logo-fallback { font-size: 4.5rem; }
.company-profile h2 { margin: 12px 0 8px; font-size: clamp(2rem, 4vw, 3.5rem); overflow-wrap: anywhere; }
.company-profile-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); }
.company-profile-meta strong { color: #e5f3ff; }
.company-ownership-private { color: #ffd47e; border-color: #f0a41755; background: #f0a41718; }
.company-future { min-height: 240px; display: grid; place-content: center; text-align: center; }
.company-future strong { color: var(--accent); font-size: 1.4rem; }
.company-side-logo .company-logo-fallback { font-size: 1.3rem; }

@media (max-width: 1550px) {
  .event-track, .community-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-profit-grid, .delivery-history-finance { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.admin-bank-section { margin-top: 26px; }
.settings-card { max-width: 820px; }
.openai-setting-meta { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1px; overflow: hidden; margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.openai-setting-meta span, .openai-setting-meta strong { padding: 12px 14px; background: #0a1725; }
.openai-setting-meta span { color: var(--muted); }
.settings-actions { justify-content: space-between; }

dialog { width: min(520px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; color: inherit; background: #101d2c; box-shadow: 0 30px 100px #000c; }
dialog::backdrop { background: #02070dcc; backdrop-filter: blur(5px); }
.dialog-card { padding: 28px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.permanent-delete-warning { padding: 12px 14px; border: 1px solid #ef626266; border-radius: 11px; color: #ffc2c2; background: #6d1f291f; }
.avatar-dialog { width: min(680px, calc(100% - 28px)); }
.avatar-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.avatar-dialog-heading h2 { margin-bottom: 6px; font-size: 1.55rem; }
.dialog-close { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; color: #dbe8f4; background: #091522; font-size: 1.6rem; line-height: 1; }
.avatar-source-preview { width: min(100%, 300px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; margin: 18px auto; border: 2px dashed #2b4a65; border-radius: 24px; color: #7188a0; background: radial-gradient(circle, #18334a, #081421 72%); }
.avatar-source-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-role-summary { display: grid; gap: 4px; margin: 14px 0; padding: 13px 15px; border: 1px solid #168ee355; border-radius: 12px; background: #168ee312; }
.avatar-role-summary strong { color: #77caff; font-size: .82rem; text-transform: uppercase; }
.avatar-role-summary span { color: #d6e7f4; }
.avatar-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.avatar-gamer-note { margin: 8px 0 16px; color: #8fa8bd; font-size: .8rem; line-height: 1.45; }
.consent-check { grid-template-columns: auto 1fr; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #081421; font-weight: 500; line-height: 1.4; }
.consent-check input { width: 18px; height: 18px; margin: 2px 0 0; }
.avatar-ai-status { min-height: 45px; padding: 12px 14px; border: 1px solid #168ee355; border-radius: 10px; color: #b7ddf8; background: #168ee312; }
.avatar-ai-status.working { color: #ffe1a3; border-color: #f0a41766; background: #f0a41712; }
.avatar-ai-status.unavailable { color: #ffb3b3; border-color: #ef626255; background: #ef626212; }
.avatar-processing-note { margin-top: 16px; font-size: .82rem; }
.starter-profile-dialog { width: min(820px, calc(100% - 28px)); }
.starter-profile-card { display: grid; gap: 17px; }
.starter-profile-card > p { margin: 0; }
.starter-grant-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.starter-grant-summary > div { padding: 13px; border: 1px solid #168ee344; border-radius: 11px; background: #168ee30d; }
.starter-grant-summary span,.starter-grant-summary strong { display: block; }
.starter-grant-summary span { color: var(--muted); font-size: .72rem; }
.starter-grant-summary strong { margin-top: 5px; color: #dff2ff; font-size: .88rem; }
.starter-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.starter-choice-grid label { min-width: 0; }
.starter-choice-grid small { display: block; min-height: 2.7em; margin-top: 6px; color: var(--muted); font-weight: 400; line-height: 1.35; }

.map-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 14px 16px; }
.map-toolbar label { margin: 0; }
.map-search { min-width: min(100%, 260px); flex: 1 1 260px; }
.map-toggle { display: inline-flex; grid-template-columns: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: #081421; white-space: nowrap; }
.map-toggle input { width: 17px; height: 17px; margin: 0; }
.map-toolbar .button.compact { margin: 0; align-self: end; }
.map-toolbar .status-pill { margin-left: auto; min-height: 42px; }
.community-map-shell { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 0; overflow: hidden; padding: 0; background: #040c16; }
.community-map-shell:fullscreen, .community-map-shell.map-fullscreen-fallback { width: 100vw; height: 100vh; max-width: none; margin: 0; border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); background: #040c16; }
.community-map-shell:fullscreen.map-detail-collapsed, .community-map-shell.map-fullscreen-fallback.map-detail-collapsed { grid-template-columns: minmax(0, 1fr); }
.community-map-shell.map-fullscreen-fallback { position: fixed; inset: 0; z-index: 2000; }
body.map-fullscreen-open { overflow: hidden; }
.community-map-shell:fullscreen .community-map-viewport, .community-map-shell.map-fullscreen-fallback .community-map-viewport { height: 100vh; min-height: 0; }
.community-map-shell:fullscreen .community-map-detail, .community-map-shell.map-fullscreen-fallback .community-map-detail { height: 100vh; overflow: auto; border-top: 0; border-left: 1px solid var(--line); }
.community-map-shell:fullscreen.map-detail-collapsed .community-map-detail, .community-map-shell.map-fullscreen-fallback.map-detail-collapsed .community-map-detail { display: none; }
.community-map-viewport { position: relative; min-width: 0; height: min(72vh, 780px); min-height: 560px; overflow: hidden; cursor: grab; user-select: none; touch-action: none; background: #484e66; outline: none; }
.community-map-viewport *, .community-map-viewport img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.community-map-viewport:active { cursor: grabbing; }
.community-map-viewport:focus-visible { box-shadow: inset 0 0 0 3px #f0a417aa; }
.community-map-world { position: absolute; left: 0; top: 0; width: 8192px; height: 8192px; contain: layout paint style; transform-origin: 0 0; will-change: transform; background: #484e66; }
.community-map-road-tiles { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.community-map-road-tile { position: absolute; display: block; max-width: none; object-fit: fill; image-rendering: auto; backface-visibility: hidden; contain: strict; pointer-events: none; user-select: none; }
.community-map-layer, .community-map-trails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.community-map-trails { z-index: 5; pointer-events: none; }
.community-map-trails polyline { fill: none; stroke: #48bfff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .75; filter: drop-shadow(0 0 4px #168ee3); }
.community-map-cities { z-index: 3; pointer-events: none; }
.map-city-marker { position: absolute; left: 0; top: 0; display: block; }
.map-city-scale { position: relative; display: block; transform: translate(-50%, -50%) scale(var(--map-city-marker-scale, 1)); transform-origin: center; }
.map-city-dot { display: none; }
.map-city-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 0; color: #f5f5f7; background: transparent; text-shadow: 0 1px 2px #272a3a, 1px 0 2px #272a3a, -1px 0 2px #272a3a, 0 -1px 2px #272a3a; font-size: 11px; font-weight: 850; line-height: 1.2; white-space: nowrap; }
.map-city-marker[data-city-rank="major"] .map-city-label { color: #fff; font-size: 13px; font-weight: 950; }
.community-map-world[data-city-detail="overview"] .map-city-marker:not([data-city-rank="major"]),
.community-map-world[data-city-detail="regional"] .map-city-marker[data-city-rank="local"] { display: none; }
.map-driver-marker, .map-company-marker, .map-poi-marker, .map-photo-marker { position: absolute; left: 0; top: 0; z-index: 6; transition: left .9s linear, top .9s linear; }
.map-driver-marker { opacity: 1; }
.map-marker-scale { position: relative; transform: translate(-50%, -50%) scale(var(--map-marker-scale, 1)); transform-origin: center; }
.map-driver-button, .map-company-button { display: grid; place-items: center; border: 0; padding: 0; color: white; background: transparent; filter: drop-shadow(0 5px 9px #000b); }
.map-truck-direction { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px; transform: rotate(var(--truck-heading, 0deg)); transition: transform .7s ease; }
.map-truck-direction::before { content: ""; position: absolute; left: 21px; top: -11px; width: 16px; height: 29px; clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%); background: var(--marker-color, #35c58a); filter: drop-shadow(0 0 5px var(--marker-color, #35c58a)); }
.map-driver-avatar { position: relative; z-index: 2; width: 43px; height: 43px; overflow: hidden; display: grid; place-items: center; border: 3px solid var(--marker-color, #35c58a); border-radius: 50%; color: #07111f; background: #dce9f5; font-weight: 900; box-shadow: 0 0 0 4px #07111ed9; }
.map-driver-avatar img { width: 100%; height: 100%; object-fit: cover; }
.map-driver-label, .map-company-label { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); max-width: 190px; padding: 5px 8px; border: 1px solid #35516c; border-radius: 8px; color: #f4f8fb; background: #07121ee8; box-shadow: 0 5px 18px #0008; font-size: 12px; font-weight: 800; white-space: nowrap; }
.map-driver-label small { margin-left: 5px; color: #91d9ff; font-weight: 700; }
.map-driver-marker[data-state="Pause"] { --marker-color: #f0a417; }
.map-driver-marker[data-state="Rest"] { --marker-color: #168ee3; }
.map-driver-marker[data-state="OtherWork"] { --marker-color: #a57be8; }
.map-driver-marker[data-state="OffService"] { --marker-color: #7890a5; }
.map-driver-marker[data-connected="false"] { --marker-color: #718092; filter: grayscale(1); }
.map-driver-marker[data-connected="false"] .map-driver-button { filter: none; }
.map-driver-marker[data-connected="false"] .map-driver-avatar { box-shadow: none; }
.map-driver-marker[data-connected="false"] .map-truck-direction, .map-driver-marker[data-connected="false"] .map-driver-label { display: none; }
.map-driver-marker[data-speeding="true"] .map-driver-label small { color: #ff6e75; }
.map-company-marker { z-index: 4; }
.map-company-button { width: 64px; height: 48px; background: transparent; filter: drop-shadow(0 4px 5px #000d) drop-shadow(0 0 4px #f0a41788); }
.map-company-button img { width: 100%; height: 100%; object-fit: contain; }
.map-company-label { top: calc(100% + 7px); color: #ffd47e; border-color: #f0a41766; }
.community-map-world[data-map-detail="overview"] .map-company-marker { display: none; }
.map-poi-marker, .map-photo-marker { z-index: 4; }
.map-poi-button, .map-photo-button { display: grid; place-items: center; border: 0; padding: 0; color: #07111e; filter: drop-shadow(0 4px 7px #000c); cursor: pointer; }
.map-poi-button { width: var(--overlay-width, 32px); height: var(--overlay-height, 32px); border: 0; border-radius: 0; background: transparent; line-height: 1; }
.map-poi-icon { display: block; width: 100%; height: 100%; object-fit: contain; }
.community-map-world[data-enlarged-icons="true"] .map-poi-icon, .community-map-world[data-enlarged-icons="true"] .map-driver-avatar img { image-rendering: auto; backface-visibility: hidden; transform: translateZ(0); }
.map-poi-label { display: none !important; }
.map-photo-button { position: relative; width: 54px; height: 38px; overflow: hidden; border: 2px solid #fff; border-radius: 8px; background: #07111e; }
.map-photo-button img { width: 100%; height: 100%; object-fit: cover; }
.map-photo-button::after { content: "📷"; position: absolute; right: 2px; bottom: 1px; padding: 1px 3px; border-radius: 4px; background: #06111ddd; font-size: 10px; }
.map-photo-label { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); max-width: 180px; padding: 4px 7px; border: 1px solid #7cbff166; border-radius: 7px; color: #e8f6ff; background: #07121ee8; font-size: 10px; font-weight: 800; white-space: nowrap; }
.map-official-photo { width: 100%; aspect-ratio: 16/9; display: block; object-fit: cover; border-radius: 11px; box-shadow: 0 8px 25px #0008; }
.map-photo-source { color: #84cfff; font-size: .74rem; }
.map-detail-overlay-icon { display: block; width: min(128px, 100%); max-height: 54px; margin: 0 0 12px; object-fit: contain; object-position: left center; filter: drop-shadow(0 4px 8px #0008); }
.map-empty { position: absolute; left: 50%; top: 24px; z-index: 8; transform: translateX(-50%); width: min(90%, 620px); padding: 12px 15px; border: 1px solid #f0a41755; border-radius: 11px; color: #ffd47e; text-align: center; background: #171208e8; pointer-events: none; }
.community-map-controls { position: absolute; right: 14px; top: 14px; z-index: 9; display: grid; gap: 6px; }
.community-map-controls button { width: 42px; height: 42px; border: 1px solid #35516c; border-radius: 10px; color: #edf4fb; background: #07121ee8; font-size: 1.25rem; font-weight: 900; box-shadow: 0 8px 22px #0007; }
.community-map-controls button:hover { border-color: var(--accent); background: #14253a; }
.community-map-controls button:disabled { opacity: .42; cursor: not-allowed; }
.community-map-controls button.active { color: #07111e; border-color: #5ef0b5; background: #5ef0b5; box-shadow: 0 0 0 3px #5ef0b533,0 8px 22px #0007; }
.community-map-controls .map-find-me svg { width: 25px; height: 25px; fill: currentColor; }
.community-map-controls .map-toggle-detail { display: none; }
.community-map-shell:fullscreen .community-map-controls .map-toggle-detail, .community-map-shell.map-fullscreen-fallback .community-map-controls .map-toggle-detail { display: block; }
.community-map-filters { position: absolute; left: 14px; top: 14px; z-index: 10; width: 304px; overflow: hidden; border: 1px solid #263f58; border-radius: 10px; color: #cbd9e5; background: #07121ef0; box-shadow: 0 8px 22px #0008; }
.community-map-filters:not([open]) { width: auto; }
.community-map-filters summary { padding: 7px 9px; color: #dceaf5; font-size: .66rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; list-style-position: inside; }
.community-map-filters[open] summary { border-bottom: 1px solid #ffffff0d; }
.community-map-filters > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 7px; padding: 7px 8px 8px; }
.community-map-filters label { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 3px 4px; border-radius: 6px; font-size: .61rem; white-space: nowrap; cursor: pointer; }
.community-map-filters label:hover { background: #ffffff0a; }
.community-map-filters input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
.map-filter-icon { flex: 0 0 17px; width: 17px; height: 17px; display: grid; place-items: center; color: #8fa5b9; font-size: .72rem; font-style: normal; line-height: 1; text-align: center; }
.map-filter-icon img { display: block; width: 17px; height: 17px; object-fit: contain; }
.map-filter-icon.connected { color: #35c58a; }.map-filter-icon.disconnected { color: #718092; }.map-filter-icon.cities { color: #f4f7fa; }.map-filter-icon.companies { color: #f0a417; }.map-filter-icon.fuel { color: #65d28f; }.map-filter-icon.services { color: #78bfff; }.map-filter-icon.garages { color: #d6a963; }.map-filter-icon.other { color: #b49be8; }.map-filter-icon.trails { color: #48bfff; }
.community-map-legend { position: absolute; left: 14px; bottom: 14px; z-index: 9; display: flex; flex-wrap: wrap; gap: 8px 12px; max-width: calc(100% - 285px); padding: 9px 11px; border: 1px solid #263f58; border-radius: 10px; color: #aec0d1; background: #07121ee8; font-size: .72rem; box-shadow: 0 8px 22px #0007; pointer-events: none; }
.community-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.community-map-legend i { width: 9px; height: 9px; border-radius: 50%; background: #35c58a; box-shadow: 0 0 6px currentColor; }
.community-map-legend i.pause { background: #f0a417; }.community-map-legend i.rest { background: #168ee3; }.community-map-legend i.other-work { background: #a57be8; }.community-map-legend i.offline { background: #718092; }.community-map-legend i.company { border-radius: 2px; background: #f0a417; }.community-map-legend i.game-road { border-radius: 2px; background: #f5f5f5; box-shadow: 0 0 0 2px #484e66; }
.community-map-detail { min-width: 0; padding: 20px; border-left: 1px solid var(--line); background: linear-gradient(180deg, #111f31, #08131f); }
.map-detail-placeholder { min-height: 220px; display: grid; align-content: center; gap: 8px; color: var(--muted); text-align: center; }
.map-detail-placeholder strong { color: #eef5fb; }
.map-detail-driver { display: grid; gap: 15px; }
.map-detail-driver-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.map-detail-driver-head .map-driver-avatar { width: 64px; height: 64px; }
.map-detail-driver-head h2 { margin: 0 0 3px; overflow-wrap: anywhere; }
.map-detail-driver-head p { margin: 0; }
.map-detail-profile-link { width: 100%; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; align-items: center; margin: -7px 0 7px; padding: 7px; border: 0; color: inherit; text-align: left; background: transparent; }
.map-detail-profile-link .map-driver-avatar { width: 64px; height: 64px; }
.map-detail-profile-copy { min-width: 0; display: block; }.map-detail-profile-copy h2 { margin: 0 0 3px; overflow-wrap: anywhere; }
.map-detail-profile-link:hover .map-driver-avatar, .map-detail-profile-link:focus-visible .map-driver-avatar { border-color: var(--accent); }
.map-detail-driver-head .map-driver-avatar.offline, .map-detail-profile-link .map-driver-avatar.offline, .map-driver-picker-item .map-driver-avatar.offline { border-color: #718092; filter: grayscale(1); box-shadow: none; opacity: 1; }
.map-detail-presence { display: inline-flex; align-items: center; gap: 6px; color: #cbd8e4; }
.map-detail-presence i { width: 10px; height: 10px; border-radius: 50%; background: #718092; }
.map-detail-presence.state-driving i { background: #35c58a; }.map-detail-presence.state-pause i { background: #f0a417; }.map-detail-presence.state-rest i { background: #168ee3; }.map-detail-presence.state-other i { background: #a57be8; }
.map-detail-location { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 9px; align-items: center; margin: 13px 0; padding: 10px 11px; border: 1px solid #168ee344; border-radius: 11px; background: #081827; }
.map-detail-location .map-location-flag { font-size: 1.75rem; }
.map-detail-location strong, .map-detail-location small { display: block; }
.map-detail-location small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.map-detail-location.unavailable { border-color: var(--line); filter: saturate(.4); }
.map-detail-speed { padding: 15px; border: 1px solid #168ee355; border-radius: 13px; text-align: center; background: #168ee313; }
.map-detail-speed strong { display: block; color: #79d0ff; font-size: 2rem; }.map-detail-speed span { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.map-detail-speed.speeding { border-color: #ff5964aa; background: #ff596419; }.map-detail-speed.speeding strong,.speeding-text { color: #ff6e75 !important; }
.map-detail-route-flags { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: center; margin-bottom: 9px; padding: 10px; border: 1px solid #ffffff14; border-radius: 11px; background: #07131f; }
.map-detail-route-flags span { min-width: 0; }.map-detail-route-flags small,.map-detail-route-flags strong { display: block; }.map-detail-route-flags small { color: var(--muted); font-size: .64rem; text-transform: uppercase; }.map-detail-route-flags strong { margin-top: 4px; overflow-wrap: anywhere; font-size: .77rem; }.map-detail-route-flags i { color: var(--accent); font-style: normal; }
.map-detail-list { display: grid; gap: 0; margin: 0; }
.map-detail-list div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid #ffffff0d; }
.map-detail-list dt { color: var(--muted); }.map-detail-list dd { margin: 0; color: #edf4fb; text-align: right; font-weight: 750; }
.map-detail-list .map-detail-cargo { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.map-detail-cargo img { width: 50px; height: 38px; object-fit: contain; }
.map-light-row { display: flex; flex-wrap: wrap; gap: 7px; }.map-light-row span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: #71879d; font-size: .72rem; }.map-light-row span.active { color: #ffe099; border-color: #f0a41777; background: #f0a41718; }
.map-detail-profile { width: 100%; }
.map-driver-picker h2 { margin-bottom: 5px; }.map-driver-picker > p { margin-top: 0; color: var(--muted); }
.map-driver-picker-list { display: grid; gap: 8px; margin-top: 16px; }
.map-driver-picker-item { width: 100%; display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 11px; align-items: center; padding: 9px; border: 1px solid var(--line); color: #eef5fb; text-align: left; background: #091724; }
.map-driver-picker-item .map-driver-avatar { width: 45px; height: 45px; }.map-driver-picker-item strong { overflow-wrap: anywhere; }
.map-privacy-note { margin: 13px 3px 0; font-size: .78rem; text-align: center; }

@media (max-width: 1350px) {
  .portal.profile-with-awards { grid-template-columns: 246px minmax(0, 1fr); }
  .awards-sidebar { grid-column: 2; position: static; }
  .user-profile-with-sidebar .public-profile-layout { grid-template-columns: minmax(160px, .65fr) minmax(0, 1.35fr); gap: 18px; }
  .user-profile-with-sidebar .public-profile-avatar { min-height: 270px; }
  .user-profile-with-sidebar .public-profile-info h2 { overflow-wrap: anywhere; font-size: clamp(1.9rem, 4vw, 3rem); }
  .delivery-profit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .event-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .portal.user-profile-with-sidebar { grid-template-columns: 246px minmax(0, 1fr); }
  .user-profile-sidebar { grid-column: 2; position: static; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .two-columns { grid-template-columns: 1fr; }
  .event-admin-layout { grid-template-columns: 1fr; }
  .company-admin-layout { grid-template-columns: 1fr; }
  .fleet-summary, .fleet-cards { grid-template-columns: repeat(2, 1fr); }
  .garage-location-summary, .economy-expense-grid { grid-template-columns: repeat(2, 1fr); }
  .economy-chart-grid { grid-template-columns: 1fr; }
  .delivery-profit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .delivery-history-finance { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .community-map-shell { grid-template-columns: 1fr; }
  .community-statistics-chart-heading { align-items: flex-start; flex-direction: column; }
  .statistics-chart-totals { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .community-map-detail { border-left: 0; border-top: 1px solid var(--line); }
  .map-detail-driver { grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr); align-items: start; }
}
@media (max-width: 820px) {
  main { padding: 18px; }
  .event-ai-preview { grid-template-columns: 1fr; }
  .portal, .portal.profile-with-awards, .portal.user-profile-with-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: static; overflow-x: auto; padding: 9px; }
  .awards-sidebar, .user-profile-sidebar { grid-column: 1; }
  .user-profile-sidebar { position: static; }
  .profile-context-nav { grid-template-columns: repeat(4, minmax(150px, 1fr)); overflow-x: auto; }
  .profile-context-nav button { min-width: 180px; }
  .sidebar nav { display: flex; width: max-content; }
  .sidebar .nav-title { display: none !important; }
  .sidebar nav button { width: auto; white-space: nowrap; }
  .auth-grid { grid-template-columns: 1fr; }
  .page-heading { min-height: 0; }
  .driver-stats > div { grid-template-columns: 1fr 1fr; }
  .event-hero { grid-template-columns: 1fr; }
  .public-profile-layout { grid-template-columns: 1fr; }
  .profile-hero-card { grid-template-columns: 160px minmax(0, 1fr); }
  .profile-avatar-frame { width: 160px; border-radius: 22px; }
  .garage-vehicle-grid { grid-template-columns: 1fr; }
  .community-map-shell:fullscreen, .community-map-shell.map-fullscreen-fallback { grid-template-columns: 1fr; }
  .community-map-shell:fullscreen .community-map-detail, .community-map-shell.map-fullscreen-fallback .community-map-detail { display: none; }
}
@media (max-width: 560px) {
  .topbar { align-items: flex-start; }
  #sessionUser { display: none !important; }
  .metric-grid, .details-grid { grid-template-columns: 1fr; }
  .fleet-summary, .fleet-cards { grid-template-columns: 1fr; }
  .garage-location-summary, .economy-expense-grid { grid-template-columns: 1fr; }
  .profile-context-nav { grid-template-columns: 1fr; overflow: visible; }
  .profile-context-nav button { min-width: 0; }
  .delivery-profit-grid { grid-template-columns: 1fr; }
  .delivery-history-card-head { align-items: flex-start; flex-direction: column; }
  .delivery-history-completed { justify-items: start; text-align: left; }
  .delivery-history-route { grid-template-columns: 1fr; }
  .delivery-history-route-arrow { justify-self: center; transform: rotate(90deg); }
  .delivery-history-trip, .delivery-history-finance { grid-template-columns: 1fr; }
  .delivery-history-cargo { grid-template-columns: 68px minmax(0,1fr); }
  .delivery-history-cargo-image { width: 68px; height: 54px; }
  .delivery-history-cargo img { width: 58px; height: 44px; }
  .delivery-cargo-title { align-items: flex-start; gap: 9px; }
  .delivery-cargo-title > img { width: 66px; height: 52px; }
  .delivery-route-companies { grid-template-columns: 1fr; text-align: center; }
  .delivery-route-companies span:last-child { text-align: center; }
  .economy-chart-row { grid-template-columns: 86px minmax(70px, 1fr) 92px; gap: 8px; }
  .event-carousel { padding: 0 34px; }
  .event-track { grid-template-columns: 1fr; }
  .community-events-grid, .company-grid { grid-template-columns: 1fr; }
  .event-route { grid-template-columns: 1fr; }
  .event-route-arrow { justify-self: center; transform: rotate(90deg); }
  .event-hero-info-heading { grid-template-columns: minmax(0, 1fr) 84px; gap: 12px; }
  .event-detail-cargo-logo { width: 64px; height: 64px; }
  .event-detail-cargo-card { padding: 7px 6px; }
  .event-detail-cargo-card .event-detail-cargo-logo { width: 48px; height: 48px; }
  .carousel-arrow { width: 30px; height: 48px; }
  .carousel-footer { flex-direction: column; align-items: center; gap: 3px; }
  .page-heading { flex-direction: column; }
  .filters, .dialog-actions { flex-direction: column; }
  .filters select { width: 100%; }
  .button { width: 100%; }
  td .button { width: auto; }
  .public-profile-stats { grid-template-columns: 1fr; }
  .public-users-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-hero-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .profile-hero-meta { justify-content: center; }
  .my-profile-presence { margin-inline: auto; }
  .profile-avatar-frame { width: min(78vw, 230px); }
  .avatar-dialog-card { padding: 20px; }
  .avatar-choice-grid { grid-template-columns: 1fr; }
  .starter-choice-grid,.starter-grant-summary { grid-template-columns: 1fr; }
  .openai-setting-meta { grid-template-columns: 1fr; }
  .company-profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .company-profile-logo { width: min(75vw, 230px); }
  .company-profile-meta { justify-content: center; }
  .company-location-fields { grid-template-columns: 1fr; }
  .community-map-viewport { height: 62vh; min-height: 430px; }
  .map-toolbar { align-items: stretch; }
  .map-toolbar .status-pill { width: 100%; margin-left: 0; }
  .community-map-filters { left: 8px; top: 8px; width: min(304px,calc(100% - 68px)); }
  .community-map-legend { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 6px 8px; }
  .map-detail-driver { grid-template-columns: 1fr; }
  .community-map-legend { right: 14px; justify-content: center; }
  .map-driver-label { display: none; }
  .user-data-page, .economy-chart-grid, .economy-chart-card, .economy-table, .table-wrap { min-width: 0; max-width: 100%; }
  .page-heading > .lock-label { width: 100%; min-height: 0; padding: 0; background: transparent; overflow-wrap: anywhere; }
  .economy-chart-row { grid-template-columns: 1fr; gap: 6px; }
  .economy-chart-row > strong { text-align: left; }
  .community-statistics-chart-card { padding-left: 38px; padding-right: 12px; }
  .community-statistics-chart { min-height: 285px; }
  .community-statistics-chart svg { min-width: 620px; }
  .statistics-period-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statistics-period-tabs button { width: 100%; min-width: 0; }
  .statistics-range-navigation { grid-template-columns: 34px minmax(0,1fr) 34px; gap: 6px; }
  .statistics-range-arrow { width: 34px; height: 34px; }
  .statistics-range-center { flex-direction: column; gap: 5px; }
  .statistics-range-center > p { width: 100%; white-space: normal; }
  .statistics-range-center label { width: min(100%,180px); }
  .statistics-participation { width: 90px; }
  .statistics-chart-totals { grid-template-columns: 1fr; }
}
@media (max-width: 390px) { .public-users-grid { grid-template-columns: 1fr; } }