:root {
  --ink: #17231f;
  --muted: #6f7c76;
  --line: #e2e8e4;
  --panel: #ffffff;
  --canvas: #f4f7f5;
  --green: #1e7254;
  --green-dark: #15533d;
  --green-soft: #e5f3ed;
  --orange: #e67e32;
  --orange-soft: #fff0e4;
  --blue: #3075bb;
  --red: #d8483f;
  --shadow: 0 12px 34px rgba(25, 43, 35, .10);
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
html, body { height: 100%; margin: 0; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas); }
button, input { font: inherit; }
button { color: inherit; }

.auth-screen { position: relative; min-height: 100%; overflow: hidden; display: flex; flex-direction: column; background: #edf5f1; isolation: isolate; }
.auth-screen[hidden], .app-shell[hidden] { display: none; }
.auth-background { position: absolute; z-index: -1; inset: 0; overflow: hidden; background: radial-gradient(circle at 12% 16%, rgba(255,255,255,.95), transparent 25%), linear-gradient(135deg, #e8f3ee 0%, #f8faf9 55%, #e8f2ed 100%); }
.auth-background::before, .auth-background::after { content: ""; position: absolute; border: 1px solid rgba(30,114,84,.1); border-radius: 50%; }
.auth-background::before { width: 620px; height: 620px; left: -280px; bottom: -330px; }
.auth-background::after { width: 440px; height: 440px; right: -180px; top: -220px; }
.auth-road { position: absolute; height: 76px; border-block: 1px solid rgba(30,114,84,.08); background: rgba(255,255,255,.32); transform-origin: center; }
.auth-road::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; border-top: 2px dashed rgba(30,114,84,.1); }
.auth-road-one { width: 75%; left: -12%; top: 26%; transform: rotate(-18deg); }
.auth-road-two { width: 65%; right: -16%; bottom: 18%; transform: rotate(28deg); }
.auth-map-dot { position: absolute; width: 12px; height: 12px; border: 3px solid white; border-radius: 50%; background: var(--orange); box-shadow: 0 4px 12px rgba(60,85,72,.18); }
.auth-map-dot-one { left: 9%; top: 31%; }
.auth-map-dot-two { right: 14%; top: 17%; background: var(--green); }
.auth-map-dot-three { right: 7%; bottom: 15%; background: var(--blue); }
.auth-layout { width: min(1160px, calc(100% - 48px)); flex: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); align-items: center; gap: clamp(50px, 8vw, 110px); margin: 0 auto; padding: 48px 0 28px; }
.auth-showcase { min-width: 0; }
.auth-brand { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(40px, 7vh, 74px); }
.auth-brand-mark, .auth-mobile-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--green); color: white; font-size: 14px; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 9px 25px rgba(30,114,84,.2); }
.brand-logo-image { display: block; object-fit: contain; border-radius: 0; background: transparent; box-shadow: none; }
.auth-brand .auth-brand-mark { width: 96px; height: 96px; filter: drop-shadow(0 13px 20px rgba(30,114,84,.24)); }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-size: 28px; letter-spacing: -.035em; }
.auth-brand small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.auth-kicker { margin: 0 0 10px; color: var(--green); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .11em; }
.auth-showcase-copy { max-width: 590px; }
.auth-showcase-copy h2 { margin: 0; max-width: 560px; font-size: clamp(33px, 4vw, 54px); line-height: 1.04; letter-spacing: -.05em; }
.auth-showcase-copy > p:last-child { max-width: 520px; margin: 18px 0 0; color: #53635c; font-size: 14px; line-height: 1.65; }
.auth-preview { width: min(570px, 100%); margin-top: 35px; overflow: hidden; border: 1px solid rgba(255,255,255,.85); border-radius: 17px; background: rgba(255,255,255,.74); box-shadow: 0 25px 70px rgba(38,72,57,.15); backdrop-filter: blur(12px); }
.auth-preview-toolbar { height: 27px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid #e4ece8; }
.auth-preview-toolbar i, .auth-preview-toolbar span { width: 5px; height: 5px; border-radius: 50%; background: #c3d1ca; }
.auth-preview-toolbar i { background: var(--orange); }
.auth-preview-map { position: relative; height: 122px; overflow: hidden; background-color: #e6eee8; background-image: linear-gradient(31deg, transparent 45%, rgba(255,255,255,.8) 46%, rgba(255,255,255,.8) 53%, transparent 54%), linear-gradient(-22deg, transparent 41%, rgba(255,255,255,.7) 42%, rgba(255,255,255,.7) 48%, transparent 49%); }
.auth-preview-route { position: absolute; width: 78%; height: 63px; left: 10%; top: 28px; border-bottom: 4px solid var(--green); border-radius: 50%; transform: rotate(-7deg); }
.auth-preview-point { position: absolute; width: 22px; height: 22px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--green); color: white; font-size: 7px; font-style: normal; font-weight: 900; box-shadow: 0 3px 8px rgba(20,50,38,.2); }
.auth-preview-point.start { left: 8%; top: 65px; }
.auth-preview-point.end { right: 8%; top: 30px; }
.auth-preview-vehicle { position: absolute; width: 14px; height: 8px; border: 2px solid white; border-radius: 5px; background: var(--green); box-shadow: 0 2px 5px rgba(20,50,38,.2); }
.auth-preview-vehicle.car-one { left: 32%; top: 73px; }
.auth-preview-vehicle.car-two { left: 55%; top: 60px; }
.auth-preview-vehicle.bus { width: 21px; right: 24%; top: 47px; border-radius: 3px; background: var(--blue); }
.auth-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.auth-preview-stats span { padding: 12px 15px; border-right: 1px solid #e7ece9; }
.auth-preview-stats span:last-child { border: 0; }
.auth-preview-stats small, .auth-preview-stats strong { display: block; }
.auth-preview-stats small { color: var(--muted); font-size: 7px; }
.auth-preview-stats strong { margin-top: 3px; font-size: 11px; }
.auth-card { width: 100%; padding: 38px; border: 1px solid rgba(255,255,255,.9); border-radius: 23px; background: rgba(255,255,255,.92); box-shadow: 0 28px 80px rgba(30,63,49,.16); backdrop-filter: blur(18px); }
.auth-mobile-mark { display: none; margin-bottom: 20px; }
.auth-card-heading h1 { margin: 0; font-size: 29px; letter-spacing: -.04em; }
.auth-card-heading > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.auth-checking { min-height: 184px; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.auth-checking[hidden], .auth-form[hidden] { display: none; }
.auth-spinner { width: 25px; height: 25px; border: 3px solid #dbe8e2; border-top-color: var(--green); border-radius: 50%; animation: auth-spin .75s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-form { margin-top: 26px; }
.auth-form > label { display: block; margin: 15px 0 7px; color: #415149; font-size: 9px; font-weight: 800; }
.auth-input { display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #dce5e0; border-radius: 11px; background: #fbfcfb; transition: .18s ease; }
.auth-input:focus-within { border-color: var(--green); background: white; box-shadow: 0 0 0 4px var(--green-soft); }
.auth-input > span { color: #9eb0a7; font-size: 7px; }
.auth-input input { width: 100%; padding: 12px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.auth-input input::placeholder { color: #a6b2ac; }
.auth-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; padding: 13px 16px; border: 0; border-radius: 11px; background: var(--green); color: white; font-size: 12px; font-weight: 800; box-shadow: 0 10px 24px rgba(30,114,84,.22); cursor: pointer; transition: .18s ease; }
.auth-submit:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 13px 28px rgba(30,114,84,.27); }
.auth-help { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; line-height: 1.5; text-align: center; }
.invitation-auth-context { margin: 0 0 4px; padding: 10px 11px; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; line-height: 1.45; }
.invitation-name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.invitation-name-fields label { display: grid; gap: 6px; color: #415149; font-size: 9px; font-weight: 800; }
.invitation-name-fields input { width: 100%; padding: 11px; border: 1px solid #d3dfd8; border-radius: 9px; outline: 0; font: inherit; }
.invitation-name-fields input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.auth-password-help { margin: 8px 0 2px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.auth-footer { width: min(1160px, calc(100% - 48px)); display: flex; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 14px 0 20px; color: #75847d; font-size: 8px; }

.app-shell { height: 100%; min-height: 650px; display: flex; flex-direction: column; }
.topbar { height: 78px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 1001; }
.topbar-primary { min-width: 0; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 0; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; transition: background .16s ease; }
.brand:hover, .brand:focus-visible { outline: 0; background: var(--green-soft); }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--green); color: white; font-size: 13px; font-weight: 800; letter-spacing: -.04em; }
.brand .brand-logo-image { border-radius: 0; background: transparent; }
.brand h1 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.simulation-actions { display: flex; align-items: center; gap: 10px; }
.time-control { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.time-control select { padding: 8px 26px 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font-weight: 800; cursor: pointer; }
.sim-status { color: var(--green); font-size: 12px; font-weight: 700; margin-right: 4px; display: flex; align-items: center; gap: 7px; }
.sim-status span { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px var(--green-soft); }
.sim-status.waiting { color: var(--muted); }
.sim-status.waiting span { background: #96a19c; box-shadow: 0 0 0 4px #edf0ee; }
.sim-status.paused { color: var(--muted); }
.sim-status.paused span { background: var(--muted); box-shadow: 0 0 0 4px #edf0ee; }
.sim-status.draining { color: #8a5a00; }
.sim-status.draining span { background: #d69216; box-shadow: 0 0 0 4px #fff2d8; }
.sim-status.finished { color: #26558e; }
.sim-status.finished span { background: #3e72ae; box-shadow: 0 0 0 4px #e8eef8; }
.button { border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; background: white; cursor: pointer; font-size: 13px; font-weight: 700; transition: .18s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(25, 43, 35, .09); }
.button:disabled, button:disabled, input:disabled { cursor: not-allowed; opacity: .5; }
.button-primary { color: white; background: var(--green); border-color: var(--green); min-width: 78px; }
.button-primary:hover { background: var(--green-dark); }
.button-danger { color: white; background: var(--red); border-color: var(--red); }
.button-danger:hover { background: #bd3932; }
.config-button { display: inline-flex; align-items: center; gap: 5px; }
.project-menu { position: relative; }
.project-menu-trigger { min-width: 230px; height: 52px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 6px 11px; border: 1px solid #bfd2c8; border-radius: 11px; background: linear-gradient(180deg, #fff, #f6faf8); box-shadow: 0 3px 10px rgba(28,75,56,.08); cursor: pointer; text-align: left; }
.project-menu-trigger:hover, .project-menu-trigger[aria-expanded="true"] { border-color: #a9c9ba; background: var(--green-soft); }
.project-menu-trigger > span:nth-child(2) { min-width: 0; }
.project-menu-trigger small, .project-menu-trigger strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-menu-trigger small { color: var(--green-dark); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.project-menu-trigger strong { max-width: 155px; margin-top: 2px; font-size: 14px; line-height: 1.15; }
.project-menu-trigger > i { color: var(--muted); font-size: 15px; font-style: normal; transition: transform .18s ease; }
.project-menu-trigger[aria-expanded="true"] > i { transform: rotate(180deg); }
.project-menu-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--green); color: white; font-size: 13px; }
.project-menu-panel { position: absolute; z-index: 2300; top: calc(100% + 10px); left: 0; width: 390px; max-height: calc(100vh - 100px); overflow: visible; padding: 8px; border: 1px solid #dce5e0; border-radius: 13px; background: white; box-shadow: 0 22px 60px rgba(20,44,34,.2); }
.project-menu-panel[hidden] { display: none; }
.project-menu-list { display: grid; }
.project-menu-list.busy { opacity: .62; cursor: wait; }
.project-menu-row { position: relative; width: 100%; min-height: 54px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 11px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.project-menu-row:hover, .project-menu-row:focus-within, .project-menu-submenu:has(.project-submenu-panel:not([hidden])) > .project-menu-row { outline: 0; background: var(--green-soft); }
.project-menu-row > span:nth-child(2) { min-width: 0; }
.project-menu-row strong, .project-menu-row small { display: block; }
.project-menu-row strong { font-size: 13px; line-height: 1.25; }
.project-menu-row small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.project-row-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #dce7e1; border-radius: 8px; background: #f7faf8; color: var(--green-dark); font-size: 15px; font-weight: 800; }
.project-menu-row:hover .project-row-icon { border-color: #b9d3c7; background: white; }
.project-delete-row { margin-top: 6px; padding-top: 11px; border-top: 1px solid #f0d5d2; border-radius: 0 0 8px 8px; }
.project-delete-row strong { color: #a93831; }
.project-delete-row .project-row-icon { border-color: #efd2cf; background: #fff5f4; color: var(--red); }
.project-delete-row:hover:not(:disabled), .project-delete-row:focus-visible:not(:disabled) { background: #fff1f0; }
.project-current-row { cursor: text; }
.project-current-row input { width: 100%; margin-top: 2px; padding: 2px 0 4px; border: 0; border-bottom: 1px solid #cbd8d1; outline: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; }
.project-current-row input:focus { border-color: var(--green); }
.project-menu-submenu { position: relative; }
.project-submenu-trigger { grid-template-columns: 36px minmax(0, 1fr) auto; }
.project-submenu-trigger > i { padding-right: 4px; color: #87958e; font-size: 22px; font-style: normal; }
.project-submenu-panel { position: absolute; z-index: 1; top: 0; left: calc(100% + 10px); width: 330px; padding: 12px; border: 1px solid #dce5e0; border-radius: 12px; background: white; box-shadow: 0 18px 48px rgba(20,44,34,.2); }
.project-submenu-panel[hidden] { display: none; }
.project-submenu-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 3px 10px; border-bottom: 1px solid var(--line); }
.project-submenu-heading strong { font-size: 12px; }
.project-submenu-heading button { width: 27px; height: 27px; border: 0; border-radius: 7px; background: var(--canvas); color: var(--green-dark); font-size: 15px; cursor: pointer; }
.project-open-list { max-height: 310px; overflow-y: auto; padding-top: 6px; }
.project-open-empty { margin: 4px 0; padding: 14px 10px; color: var(--muted); font-size: 10px; text-align: center; }
.project-open-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.project-open-item:hover { background: var(--green-soft); }
.project-open-item > i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.project-open-item strong, .project-open-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-open-item strong { font-size: 11px; }
.project-open-item small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.project-open-item > span:last-child { color: var(--muted); font-size: 14px; }
.project-space-submenu p { margin: 9px 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.project-space-submenu label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.project-space-submenu select { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font-size: 11px; }
.project-space-actions { display: grid; gap: 7px; margin-top: 10px; }
.project-space-actions button { width: 100%; padding: 9px; border: 1px solid var(--green); border-radius: 8px; background: white; color: var(--green-dark); font-size: 10px; font-weight: 800; cursor: pointer; }
.project-space-actions button:hover:not(:disabled) { background: var(--green-soft); }
.project-space-actions button:last-child { background: var(--green); color: white; }
.project-space-actions button:last-child:hover:not(:disabled) { background: var(--green-dark); }
.scenario-menu { position: relative; }
.scenario-menu-trigger { width: 205px; height: 52px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #bfd2c8; border-radius: 11px; background: linear-gradient(180deg, #fff, #f6faf8); box-shadow: 0 3px 10px rgba(28,75,56,.08); text-align: left; cursor: pointer; }
.scenario-menu-trigger:hover:not(:disabled), .scenario-menu-trigger[aria-expanded="true"] { border-color: #9fc8b6; background: var(--green-soft); }
.scenario-menu-trigger > span { min-width: 0; }
.scenario-menu-trigger small, .scenario-menu-trigger strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-menu-trigger small { color: var(--green-dark); font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.scenario-menu-trigger strong { margin-top: 2px; font-size: 14px; line-height: 1.15; }
.scenario-menu-trigger em { padding: 4px 6px; border-radius: 999px; background: var(--green); color: white; font-size: 10px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.scenario-menu-trigger > i { color: var(--muted); font-size: 14px; font-style: normal; transition: transform .18s; }
.scenario-menu-trigger[aria-expanded="true"] > i { transform: rotate(180deg); }
.scenario-menu-panel { position: absolute; z-index: 2300; top: calc(100% + 10px); left: 0; width: 410px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 14px; border: 1px solid #d7e2dc; border-radius: 13px; background: white; box-shadow: 0 22px 60px rgba(20,44,34,.2); }
.scenario-menu-panel[hidden] { display: none; }
.scenario-menu-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 2px 2px 10px; border-bottom: 1px solid var(--line); }
.scenario-menu-heading strong, .scenario-menu-heading small { display: block; }
.scenario-menu-heading strong { font-size: 15px; }
.scenario-menu-heading small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.scenario-menu-heading button { width: 27px; height: 27px; border: 0; border-radius: 7px; background: var(--canvas); color: var(--muted); font-size: 18px; cursor: pointer; }
.main-results-button { width: 205px; height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid #b9cad8; border-radius: 11px; background: linear-gradient(180deg, #fff, #f5f9fc); color: #31433b; box-shadow: 0 3px 10px rgba(36,95,143,.09); text-align: left; cursor: pointer; transition: .18s ease; }
.main-results-button:hover, .main-results-button.active { border-color: #92b9d9; background: #edf5fb; color: #245f8f; }
.main-results-button > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #e5eef8; color: #286da8; font-size: 14px; font-weight: 850; }
.main-results-button small, .main-results-button strong { display: block; white-space: nowrap; }
.main-results-button small { color: #245f8f; font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.main-results-button strong { margin-top: 2px; font-size: 14px; line-height: 1.15; }
.scenario-list { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; padding: 11px 0; }
.scenario-list-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.scenario-list-item { width: 100%; min-height: 48px; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.scenario-list-item:hover { background: var(--canvas); }
.scenario-list-item.active { border-color: #a9cdbd; background: var(--green-soft); }
.scenario-list-item > i { width: 8px; height: 8px; border-radius: 50%; background: #9ba8a2; }
.scenario-list-item.active > i { background: var(--green); box-shadow: 0 0 0 3px rgba(30,114,84,.12); }
.scenario-list-item strong, .scenario-list-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-list-item strong { font-size: 13px; line-height: 1.25; }
.scenario-list-item small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.scenario-list-item em { padding: 4px 6px; border-radius: 999px; background: var(--green); color: white; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.scenario-editor { display: grid; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.scenario-editor > label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.scenario-editor input[type="text"], .scenario-editor textarea { width: 100%; padding: 10px 11px; resize: vertical; border: 1px solid #d3dfd9; border-radius: 8px; outline: 0; background: white; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.scenario-editor input:focus, .scenario-editor textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.scenario-editor-flags { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.scenario-editor-flags label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.scenario-editor-flags input { accent-color: var(--green); }
.scenario-reference-state { font-weight: 750; }
.scenario-reference-state.reference { color: var(--green-dark); }
.scenario-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scenario-actions button, .scenario-create-button { min-height: 38px; padding: 9px 10px; border: 1px solid #b8d4c8; border-radius: 8px; background: white; color: var(--green-dark); font-size: 11px; font-weight: 800; cursor: pointer; }
.scenario-actions button:hover:not(:disabled), .scenario-create-button:hover:not(:disabled) { background: var(--green-soft); }
.scenario-actions .scenario-delete-button { grid-column: 1 / -1; border-color: #efc3bf; color: var(--red); }
.scenario-actions .scenario-delete-button:hover:not(:disabled) { background: #fff0ef; }
.scenario-create-button { width: 100%; margin-top: 8px; border-style: dashed; }
.account-area { display: flex; align-items: center; margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--line); }
.account-login-button { padding: 8px 11px; border: 1px solid #a8cdbc; border-radius: 9px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; font-weight: 800; cursor: pointer; }
.account-login-button:hover { border-color: var(--green); background: #d9eee5; }
.account-identity { display: flex; align-items: center; gap: 7px; }
.account-identity[hidden] { display: none; }
.account-avatar { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.account-identity strong, .account-identity small { display: block; max-width: 135px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-identity strong { font-size: 9px; }
.account-identity small { margin-top: 1px; color: var(--muted); font-size: 7px; }
.account-logout-button { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--muted); cursor: pointer; transition: .16s ease; }
.account-logout-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.account-logout-button:hover, .account-logout-button:focus-visible { outline: 0; border-color: #e6b6b2; background: #fff3f2; color: var(--red); }
.settings-menu { position: relative; }
.settings-menu[hidden] { display: none; }
.settings-trigger { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: white; color: #53635b; font-size: 12px; font-weight: 800; cursor: pointer; transition: .16s ease; }
.settings-trigger:hover, .settings-trigger[aria-expanded="true"] { border-color: #a7caba; background: var(--green-soft); color: var(--green-dark); }
.settings-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-panel { position: absolute; z-index: 2400; top: calc(100% + 10px); right: 0; width: 440px; overflow: hidden; border: 1px solid #d8e3dd; border-radius: 13px; background: white; box-shadow: 0 22px 60px rgba(20,44,34,.22); }
.settings-panel[hidden] { display: none; }
.settings-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, white, #f8fbf9); }
.settings-panel > header strong, .settings-panel > header small { display: block; }
.settings-panel > header strong { font-size: 16px; }
.settings-panel > header small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.settings-panel > header button { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--canvas); color: var(--muted); font-size: 20px; cursor: pointer; }
.settings-content { max-height: min(680px, calc(100vh - 110px)); padding: 14px; overflow-y: auto; }
.settings-organization-field { display: grid; gap: 6px; color: #526159; font-size: 11px; font-weight: 800; }
.settings-organization-field select { width: 100%; padding: 10px 11px; border: 1px solid #cfddd5; border-radius: 9px; outline: 0; background: white; color: var(--ink); font-size: 12px; font-weight: 700; }
.settings-organization-field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.settings-invitation-form { display: grid; gap: 9px; margin-top: 13px; padding: 12px; border: 1px solid #dce7e1; border-radius: 10px; background: #f8fbf9; }
.settings-invitation-form > strong { color: #34483e; font-size: 12px; }
.settings-invitation-fields { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
.settings-invitation-fields label { display: grid; gap: 5px; color: #526159; font-size: 10px; font-weight: 800; }
.settings-invitation-fields input, .settings-invitation-fields select { min-width: 0; width: 100%; padding: 9px; border: 1px solid #cfddd5; border-radius: 8px; outline: 0; background: white; color: var(--ink); font-size: 11px; }
.settings-invitation-fields input:focus, .settings-invitation-fields select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.settings-invitation-fields button { grid-column: 1 / -1; padding: 9px 11px; border: 0; border-radius: 8px; background: var(--green); color: white; font-size: 11px; font-weight: 800; cursor: pointer; }
.settings-invitation-fields button:disabled { opacity: .65; cursor: wait; }
.settings-invitation-status { min-height: 16px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.settings-invitation-status.success { color: var(--green-dark); }
.settings-invitation-status.error { color: var(--red); }
.settings-invitations { display: grid; gap: 7px; margin-top: 12px; }
.settings-invitations > strong { color: #34483e; font-size: 11px; }
.settings-invitation-list-empty { margin: 0; padding: 9px; border-radius: 8px; background: var(--canvas); color: var(--muted); font-size: 10px; text-align: center; }
.settings-invitation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid #e2e9e5; border-radius: 8px; background: #fff; }
.settings-invitation-row strong, .settings-invitation-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-invitation-row strong { font-size: 11px; }
.settings-invitation-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.settings-invitation-actions { display: flex; gap: 5px; }
.settings-invitation-actions button { padding: 5px 7px; border: 1px solid #cfddd5; border-radius: 6px; background: white; color: var(--green-dark); font-size: 9px; font-weight: 800; cursor: pointer; }
.settings-invitation-actions button[data-invitation-action="revoke"] { color: var(--red); }
.settings-invitation-actions button:disabled { opacity: .55; cursor: wait; }
.settings-members-summary { min-height: 25px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.settings-members-summary strong { color: var(--ink); }
.settings-role-count { padding: 4px 7px; border-radius: 999px; background: var(--canvas); color: #56675e; font-size: 11px; font-weight: 750; }
.settings-member-list { max-height: min(410px, calc(100vh - 280px)); display: grid; gap: 6px; margin-top: 8px; overflow-y: auto; }
.settings-member-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 126px; align-items: center; gap: 10px; min-height: 58px; padding: 9px; border: 1px solid #e2e9e5; border-radius: 10px; background: #fbfcfb; }
.settings-member-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #e2f0e9; color: var(--green-dark); font-size: 13px; font-weight: 850; }
.settings-member-identity { min-width: 0; }
.settings-member-identity strong, .settings-member-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-member-identity strong { font-size: 13px; line-height: 1.25; }
.settings-member-identity small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.settings-current-user { display: inline-block; margin-left: 5px; padding: 2px 5px; border-radius: 999px; background: #e5f2eb; color: var(--green-dark); font-size: 11px; font-style: normal; vertical-align: 1px; }
.settings-member-role { width: 100%; padding: 8px 7px; border: 1px solid #cfddd5; border-radius: 8px; background: white; color: var(--ink); font-size: 11px; font-weight: 750; }
.settings-member-role:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.settings-member-role:disabled { opacity: .72; }
.settings-members-empty, .settings-members-loading { margin: 0; padding: 28px 14px; border-radius: 9px; background: var(--canvas); color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.settings-members-loading::before { content: ""; width: 17px; height: 17px; display: inline-block; margin-right: 8px; border: 2px solid #cfe0d7; border-top-color: var(--green); border-radius: 50%; animation: auth-spin .75s linear infinite; vertical-align: -4px; }
.settings-members-help { margin: 12px 0 0; padding: 10px 11px; border-radius: 9px; background: #f1f6f3; color: #5e6d65; font-size: 11px; line-height: 1.5; }
.settings-members-help strong { color: #34483e; }
.notification-menu { position: relative; }
.notification-trigger { position: relative; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: white; color: #53635b; cursor: pointer; transition: .16s ease; }
.notification-trigger:hover, .notification-trigger[aria-expanded="true"] { border-color: #a7caba; background: var(--green-soft); color: var(--green-dark); }
.notification-trigger svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-trigger > span { position: absolute; min-width: 17px; height: 17px; display: grid; place-items: center; top: -6px; right: -6px; padding: 0 4px; border: 2px solid white; border-radius: 999px; background: var(--red); color: white; font-size: 7px; font-weight: 900; }
.notification-trigger > span[hidden] { display: none; }
.notification-panel { position: absolute; z-index: 2400; top: calc(100% + 10px); right: 0; width: 370px; overflow: hidden; border: 1px solid #d8e3dd; border-radius: 13px; background: white; box-shadow: 0 22px 60px rgba(20,44,34,.22); }
.notification-panel[hidden] { display: none; }
.notification-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px 11px; border-bottom: 1px solid var(--line); }
.notification-panel > header strong, .notification-panel > header small { display: block; }
.notification-panel > header strong { font-size: 13px; }
.notification-panel > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.notification-panel > header button { padding: 5px 7px; border: 0; border-radius: 6px; background: var(--canvas); color: var(--green-dark); font-size: 8px; font-weight: 800; cursor: pointer; }
.notification-panel > header button:disabled { display: none; }
.notification-list { max-height: min(430px, calc(100vh - 130px)); overflow-y: auto; padding: 6px; }
.notification-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 9px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.notification-item:hover { background: var(--canvas); }
.notification-item:disabled { opacity: .58; cursor: not-allowed; }
.notification-item:disabled:hover { background: transparent; }
.notification-item.unread:disabled:hover { background: #f2f8f5; }
.notification-item.unread { background: #f2f8f5; }
.notification-item.unread:hover { background: #e8f4ee; }
.notification-item > i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #e7f1fa; color: #286da8; font-size: 14px; font-style: normal; }
.notification-item.visual > i { background: #fff0dc; color: #9a5a16; }
.notification-item strong, .notification-item small, .notification-item time { display: block; }
.notification-item strong { font-size: 10px; }
.notification-item small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.notification-item time { padding-top: 2px; color: #8d9993; font-size: 7px; white-space: nowrap; }
.notification-empty { margin: 0; padding: 28px 14px; color: var(--muted); font-size: 9px; text-align: center; }
.app-alert { position: fixed; z-index: 2100; top: 86px; right: 18px; max-width: min(460px, calc(100% - 36px)); display: flex; align-items: flex-start; gap: 13px; padding: 12px 14px; border: 1px solid #f0b7b3; border-radius: 11px; background: #fff6f5; color: #9d2e28; box-shadow: var(--shadow); font-size: 11px; font-weight: 700; line-height: 1.45; }
.app-alert[hidden] { display: none; }
.app-alert button { margin: -4px -6px -4px auto; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.share-dialog { width: min(600px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); box-shadow: 0 22px 70px rgba(16, 37, 28, .25); }
.share-dialog::backdrop { background: rgba(13, 29, 23, .48); backdrop-filter: blur(2px); }
.share-dialog form { padding: 22px; }
.share-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.share-dialog h2 { margin: 0 0 4px; font-size: 18px; }
.share-dialog p { margin: 0; color: var(--muted); font-size: 11px; }
.share-dialog label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.share-dialog-close { width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 8px; background: var(--canvas); color: var(--muted); font-size: 20px; cursor: pointer; }
.share-link-row { display: flex; gap: 8px; }
.share-link-row input { min-width: 0; flex: 1; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-size: 11px; }
.share-dialog small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.batch-simulation-dialog form { display: grid; gap: 14px; }
.batch-simulation-dialog select, .batch-simulation-dialog input[type="number"] { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font-size: 11px; font-weight: 700; }
.batch-scenario-fieldset { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.batch-scenario-fieldset legend { padding: 0 5px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.batch-scenario-list { display: grid; gap: 6px; }
.batch-scenario-option { display: flex !important; align-items: center; gap: 9px; margin: 0 !important; padding: 8px; border-radius: 8px; background: var(--canvas); color: var(--ink) !important; font-size: 10px !important; text-transform: none !important; cursor: pointer; }
.batch-scenario-option input { accent-color: var(--green); }
.batch-scenario-option i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.batch-run-list { display: grid; gap: 7px; }
.batch-run-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); }
.batch-run-item strong { font-size: 10px; }
.batch-run-item > span { color: var(--muted); font-size: 9px; font-weight: 750; }
.batch-run-progress { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: #dfe8e3; }
.batch-run-progress i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--green); transition: width .18s; }
.batch-run-item.completed { border-color: #acd2c0; background: #f0faf5; }
.batch-run-item.failed { border-color: #efc3bf; background: #fff5f4; }
.batch-run-item.failed .batch-run-progress i { background: var(--red); }
.batch-simulation-note { margin: 0 !important; padding: 9px; border-radius: 8px; background: #f3f7fc; color: #506276 !important; font-size: 9px !important; line-height: 1.45; }
.batch-simulation-actions { display: flex; justify-content: flex-end; gap: 8px; }

.confirm-dialog { width: min(470px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); box-shadow: 0 22px 70px rgba(16, 37, 28, .25); }
.confirm-dialog::backdrop { background: rgba(13, 29, 23, .52); backdrop-filter: blur(2px); }
.confirm-dialog form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; padding: 23px; }
.confirm-dialog-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #fff0ef; color: var(--red); font-size: 21px; font-weight: 800; }
.confirm-dialog-copy h2 { margin: 1px 0 7px; font-size: 18px; }
.confirm-dialog-copy p { margin: 0; color: #42514a; font-size: 11px; line-height: 1.55; }
.confirm-dialog-copy small { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.confirm-dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }

.login-dialog { width: min(430px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); box-shadow: 0 22px 70px rgba(16, 37, 28, .25); }
.login-dialog::backdrop { background: rgba(13, 29, 23, .52); backdrop-filter: blur(2px); }
.login-dialog form { padding: 23px; }
.login-dialog-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-bottom: 19px; }
.login-dialog-mark { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: var(--green); color: white; font-size: 11px; font-weight: 850; }
.login-dialog h2 { margin: 0; font-size: 18px; }
.login-dialog-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.login-dialog form > label { display: block; margin: 11px 0 5px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.login-dialog form > input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font-size: 12px; }
.login-dialog form > input:focus { outline: 2px solid var(--green-soft); border-color: var(--green); }
.login-error { margin: 10px 0 0; padding: 8px 9px; border-radius: 8px; background: #fff0ef; color: #a4322c; font-size: 9px; font-weight: 700; line-height: 1.4; }
.login-error[hidden] { display: none; }
.login-dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 17px; }

.site-footer { min-height: 28px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 18px; border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 9px; line-height: 1.4; z-index: 1001; }
.site-footer nav { display: flex; align-items: center; gap: 13px; }
.site-footer a { color: var(--green-dark); font-weight: 700; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }

.legal-page { min-height: 100%; height: auto; background: #f3f7f5; }
.legal-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; padding: 12px max(20px, calc((100% - 900px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.legal-brand { color: var(--ink); text-decoration: none; }
.legal-brand strong, .legal-brand small { display: block; }
.legal-brand strong { font-size: 17px; }
.legal-brand small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.legal-content { width: min(900px, calc(100% - 32px)); margin: 34px auto 50px; padding: 42px 50px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.legal-intro { padding-bottom: 27px; border-bottom: 1px solid var(--line); }
.legal-kicker { margin: 0 0 7px !important; color: var(--green) !important; font-size: 10px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.legal-intro h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.legal-intro > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.legal-content section { padding-top: 25px; }
.legal-content h2 { margin: 0 0 10px; color: var(--green-dark); font-size: 17px; letter-spacing: -.01em; }
.legal-content p { margin: 0 0 10px; color: #42514a; font-size: 13px; line-height: 1.72; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content a { color: var(--green); font-weight: 700; }
.legal-note { margin-top: 30px; padding: 18px 20px; border: 1px solid #efd5b9; border-radius: 12px; background: var(--orange-soft); }
.legal-note strong { color: #85501f; font-size: 12px; }
.legal-note p { margin-top: 5px; color: #71543b; font-size: 11px; }
.legal-footer { min-height: 42px; padding-inline: max(20px, calc((100% - 900px) / 2)); }

.results-screen[hidden] { display: none; }
.app-shell.results-mode .workspace { display: none; }
.app-shell.results-mode .simulation-actions > :not(.account-area) { display: none; }
.results-screen { min-height: 0; flex: 1; overflow-y: auto; background: #f2f5f4; }
.results-page-header { position: sticky; z-index: 900; top: 0; min-height: 94px; display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 16px clamp(22px, 3vw, 48px); border-bottom: 1px solid #dce4e0; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.results-back-button { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 9px 12px; border: 1px solid #d9e2dd; border-radius: 9px; background: white; color: #3d4e46; font-size: 11px; font-weight: 800; cursor: pointer; }
.results-back-button:hover { border-color: #a9cbbd; color: var(--green-dark); background: var(--green-soft); }
.results-back-button span { font-size: 17px; line-height: 1; }
.results-page-header > div { min-width: 0; }
.results-page-header p { margin: 0 0 3px; color: var(--green); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.results-page-header h2 { margin: 0; overflow: hidden; font-size: 22px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.results-page-header > div > span { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.results-layout { width: min(1680px, 100%); min-height: calc(100% - 94px); display: grid; grid-template-columns: 330px minmax(0, 1fr); margin: 0 auto; }
.results-history { min-width: 0; padding: 22px 16px 34px 22px; border-right: 1px solid #dce4e0; background: #f8faf9; }
.results-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 5px 14px; }
.results-history-heading strong, .results-history-heading small { display: block; }
.results-history-heading strong { font-size: 14px; }
.results-history-heading small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.results-history-heading > span { min-width: 29px; padding: 5px 7px; border-radius: 999px; background: #e4ece8; color: #4f6158; font-size: 11px; font-weight: 850; text-align: center; }
.results-history-list { display: grid; gap: 11px; }
.results-history-group { overflow: hidden; border: 1px solid #dce5e0; border-radius: 12px; background: white; box-shadow: 0 4px 14px rgba(24,48,37,.04); }
.results-history-group-title { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 0; border-bottom: 1px solid #e6ece9; background: #f9fbfa; text-align: left; cursor: pointer; }
.results-history-group-title:hover { background: #eef6f2; }
.results-history-group.active { border-color: #79ad95; box-shadow: 0 0 0 2px rgba(30,114,84,.1); }
.results-history-group.active .results-history-group-title { background: #e6f3ed; }
.results-history-group-title > em { color: #789087; font-size: 17px; font-style: normal; transition: transform .16s ease; }
.results-history-group-title:hover > em, .results-history-group.active .results-history-group-title > em { transform: translateX(2px); color: var(--green); }
.results-history-group-title > span { padding: 4px 6px; border-radius: 6px; background: #e8f2ed; color: var(--green-dark); font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.results-history-group-title > span.batch { background: #eaf0fa; color: #3566a0; }
.results-history-group-title > span.visual { background: #fff0dc; color: #9a5a16; }
.results-history-group-title strong, .results-history-group-title small { display: block; }
.results-history-group-title strong { font-size: 12px; }
.results-history-group-title small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.results-history-runs { display: grid; padding: 5px; }
.results-history-runs button { width: 100%; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.results-history-runs button:hover { background: #f3f7f5; }
.results-history-runs button.active { background: var(--green-soft); color: var(--green-dark); }
.results-history-runs button > i { width: 7px; height: 7px; border-radius: 50%; background: #aab7b0; }
.results-history-runs button.active > i { background: var(--green); box-shadow: 0 0 0 3px rgba(30,114,84,.12); }
.results-history-runs strong, .results-history-runs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-history-runs strong { font-size: 12px; }
.results-history-runs small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.results-history-runs em { color: #88978f; font-size: 16px; font-style: normal; }
.results-reference-badge { display: inline-flex; margin-left: 6px; padding: 2px 5px; border-radius: 999px; background: #dcefe6; color: var(--green-dark); font-size: 8px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; vertical-align: 1px; }
.results-content { position: relative; min-width: 0; padding: 24px clamp(20px, 2.7vw, 44px) 44px; }
.results-loading { position: fixed; z-index: 1500; inset: 74px 0 28px; display: grid; place-content: center; justify-items: center; gap: 10px; background: rgba(242,245,244,.72); backdrop-filter: blur(2px); color: #4b5c54; font-size: 11px; }
.results-loading[hidden] { display: none; }
.results-loading span { width: 34px; height: 34px; border: 3px solid #cbdcd4; border-top-color: var(--green); border-radius: 50%; animation: auth-spin .75s linear infinite; }
.results-empty { min-height: 430px; display: grid; place-content: center; justify-items: center; text-align: center; }
.results-empty[hidden] { display: none; }
.results-empty > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--green-soft); color: var(--green); font-size: 25px; }
.results-empty h3 { margin: 15px 0 5px; font-size: 18px; }
.results-empty p { max-width: 410px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.results-run-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.results-run-heading p { margin: 0 0 4px; color: var(--muted); font-size: 11px; }
.results-run-heading h3 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.results-run-heading label { display: grid; gap: 5px; min-width: 210px; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.results-run-heading select { padding: 9px 32px 9px 10px; border: 1px solid #d4ded9; border-radius: 9px; background: white; color: var(--ink); font-size: 11px; font-weight: 750; text-transform: none; }
.results-report-action { display: grid; justify-items: end; gap: 5px; }
.results-report-action[hidden] { display: none; }
.results-report-button { display: inline-flex; align-items: center; gap: 8px; border-color: var(--green); background: var(--green); color: white; font-size: 12px; }
.results-report-button:hover { background: var(--green-dark); }
.results-report-button.loading span { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.45); border-top-color: white; border-radius: 50%; font-size: 0; animation: auth-spin .75s linear infinite; }
.results-report-action small { min-height: 13px; color: var(--muted); font-size: 9px; }
.results-comparison-card { margin-bottom: 16px; border-color: #cbded5; box-shadow: 0 8px 24px rgba(22,65,47,.07); }
.results-comparison-card > .results-card-heading { align-items: flex-end; background: linear-gradient(135deg, #fbfdfc, #f3f8f5); }
.results-comparison-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.results-comparison-filters label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.results-comparison-filters label[hidden] { display: none; }
.results-comparison-filters select { min-width: 140px; max-width: 220px; padding: 8px 28px 8px 9px; border: 1px solid #d4ded9; border-radius: 8px; background: white; color: var(--ink); font-size: 11px; font-weight: 750; text-transform: none; }
.results-comparison-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 7px 12px; margin: 12px 14px 0; padding: 10px 12px; border: 1px solid #edc68d; border-radius: 9px; background: #fff6e8; color: #765326; font-size: 11px; line-height: 1.45; }
.results-comparison-alert[hidden] { display: none; }
.results-comparison-alert > strong { grid-column: 1; grid-row: 1; color: #965f18; }
.results-comparison-alert > div { grid-column: 2; display: flex; align-items: baseline; gap: 6px; }
.results-comparison-alert > div strong { color: #965f18; }
.results-comparison-tables { display: grid; gap: 14px; padding: 14px; background: #f4f7f5; }
.results-comparison-subtable { overflow: hidden; border: 1px solid #dbe5e0; border-radius: 10px; background: white; box-shadow: 0 3px 10px rgba(22,45,35,.035); }
.results-comparison-subtable h4 { display: flex; align-items: baseline; gap: 7px; margin: 0; padding: 12px 15px; border-bottom: 1px solid #e4ebe7; color: #263b32; font-size: 14px; }
.results-comparison-subtable h4 span { padding: 3px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 9px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.results-comparison-subtable h4 small { color: var(--muted); font-size: 10px; font-weight: 650; }
.results-comparison-table { width: 100%; border-collapse: collapse; }
.results-comparison-table th, .results-comparison-table td { padding: 13px 18px; border-bottom: 1px solid #e8eeeb; font-size: 12px; text-align: right; }
.results-comparison-table thead th { background: #f8faf9; color: #66756e; font-size: 10px; letter-spacing: .025em; text-transform: uppercase; }
.results-comparison-table th:first-child { text-align: left; }
.results-comparison-table tbody th { color: #35483f; font-size: 12px; }
.results-comparison-table td.improved, .results-comparison-table .comparison-evolution.improved { background: #eff9f3; color: #21754b; }
.results-comparison-table td.degraded, .results-comparison-table .comparison-evolution.degraded { background: #fff2f1; color: #b33e38; }
.results-comparison-table td.neutral, .results-comparison-table .comparison-evolution.neutral { background: #f5f7f6; color: #68766f; }
.comparison-evolution span { display: inline-grid; width: 20px; height: 20px; place-items: center; margin-right: 6px; border-radius: 50%; background: currentColor; color: white; font-size: 10px; }
.comparison-evolution.improved span { background: #2f8a5b; }
.comparison-evolution.degraded span { background: #ca4c46; }
.comparison-evolution.neutral span { background: #87938d; }
.results-comparison-empty { padding: 22px; color: var(--muted); font-size: 12px; text-align: center; }
.results-comparison-empty[hidden] { display: none; }
.results-comparison-chart-section { border-top: 1px solid #e3ebe7; background: #fcfdfc; }
.results-comparison-chart-section[hidden] { display: none; }
.results-comparison-chart-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 15px 18px 5px; }
.results-comparison-chart-heading h4 { margin: 0; font-size: 15px; }
.results-comparison-chart-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.results-comparison-chart-heading .results-metric-selector { max-width: 620px; }
.results-comparison-chart { height: 285px; }
.results-kpis { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.results-kpis article { min-width: 0; padding: 13px 14px; border: 1px solid #dce5e0; border-radius: 11px; background: white; box-shadow: 0 5px 16px rgba(22,45,35,.04); }
.results-kpis span, .results-kpis strong, .results-kpis small { display: block; }
.results-kpis span { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.results-kpis strong { margin-top: 7px; color: #173d2f; font-size: 21px; letter-spacing: -.035em; }
.results-kpis small { min-height: 26px; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.results-card { min-width: 0; border: 1px solid #dce5e0; border-radius: 13px; background: white; box-shadow: 0 5px 18px rgba(22,45,35,.045); }
.results-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 18px 12px; border-bottom: 1px solid #e6ece9; }
.results-card-heading h3 { margin: 0; font-size: 16px; }
.results-card-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.results-metric-selector { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.results-metric-selector button { padding: 7px 9px; border: 1px solid #dce5e0; border-radius: 7px; background: #f8faf9; color: #53635b; font-size: 10px; font-weight: 750; cursor: pointer; }
.results-metric-selector button:hover { border-color: #a9c8ba; }
.results-metric-selector button.active { border-color: var(--green); background: var(--green); color: white; }
.results-chart-legend { display: flex; align-items: center; gap: 7px; padding: 11px 18px 0; font-size: 11px; }
.results-chart-legend i { width: 10px; height: 10px; border-radius: 3px; }
.results-chart-legend span { margin-left: auto; color: var(--muted); }
.results-chart-series-legend, #resultsComparisonChartLegend { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.results-chart-series-legend span, #resultsComparisonChartLegend span { display: flex; align-items: center; gap: 5px; margin-left: 0; color: #46574f; font-size: 10px; font-weight: 750; }
.results-chart-series-legend i, #resultsComparisonChartLegend i { flex: 0 0 auto; }
.results-chart { position: relative; height: 310px; padding: 5px 12px 12px; }
.results-chart svg { width: 100%; height: 100%; overflow: visible; font-family: inherit; }
.results-chart-grid line { stroke: #e6ece9; stroke-width: 1; }
.results-chart-grid text { fill: #7c8a83; font-size: 10px; }
.results-chart-injection-background { fill: rgba(79, 153, 211, .09); }
.results-chart-draining-background { fill: rgba(212, 143, 60, .08); }
.results-chart-phase-boundary { stroke: #c48742; stroke-dasharray: 6 5; stroke-width: 1.5; }
.results-chart-phases text { font-size: 10px; font-weight: 850; letter-spacing: .035em; }
.results-chart-injection-label { fill: #397aa9; }
.results-chart-draining-label { fill: #9a672f; }
.results-chart-point-hit { cursor: pointer; pointer-events: all; }
.results-chart-tooltip { position: absolute; z-index: 5; min-width: 190px; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--tooltip-color, var(--green)); border-radius: 9px; background: rgba(255,255,255,.97); color: var(--ink); box-shadow: 0 9px 28px color-mix(in srgb, var(--tooltip-color, var(--green)) 24%, transparent); pointer-events: none; transform: translate(-50%, -100%); backdrop-filter: blur(8px); }
.results-chart-tooltip[hidden] { display: none; }
.results-chart-tooltip > span { width: 9px; height: 28px; border-radius: 5px; }
.results-chart-tooltip strong, .results-chart-tooltip small { display: block; }
.results-chart-tooltip strong { max-width: 135px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.results-chart-tooltip small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.results-chart-tooltip b { color: var(--tooltip-color, var(--green)); font-size: 12px; white-space: nowrap; }
.results-chart-empty { height: 100%; display: grid; place-content: center; padding: 20px; color: var(--muted); font-size: 12px; text-align: center; }
.results-two-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .45fr); gap: 16px; margin-top: 16px; }
.results-table-wrap { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.results-table th, .results-table td { padding: 10px 12px; border-bottom: 1px solid #edf1ef; text-align: right; white-space: nowrap; }
.results-table thead th { background: #f8faf9; color: #66756e; font-size: 9px; letter-spacing: .025em; text-transform: uppercase; }
.results-table th:first-child, .results-table td:first-child { text-align: left; }
.results-table tbody th { max-width: 190px; overflow: hidden; color: #283a32; font-size: 11px; text-overflow: ellipsis; }
.results-table tbody tr.active { background: #f1f8f4; }
.results-table tbody tr[data-results-route-index] { cursor: pointer; transition: background .15s ease; }
.results-table tbody tr[data-results-route-index]:hover { background: #f5f9f7; }
.results-table tbody tr[data-results-route-index]:focus-visible { outline: 2px solid #72ad92; outline-offset: -2px; }
.results-table tbody tr[data-results-route-index].active { box-shadow: inset 4px 0 var(--green); }
.results-table td strong, .results-table td small { display: block; }
.results-table td small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.results-breakdown-card > div:last-child { padding: 12px; }
.results-vehicle-type { padding: 11px; border: 1px solid #e1e8e4; border-radius: 9px; background: #fafcfb; }
.results-vehicle-type + .results-vehicle-type { margin-top: 8px; }
.results-vehicle-type header { display: flex; align-items: center; gap: 7px; }
.results-vehicle-type header i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.results-vehicle-type.bus header i { border-radius: 2px; background: var(--blue); }
.results-vehicle-type header strong { font-size: 12px; }
.results-vehicle-type header span { margin-left: auto; color: var(--muted); font-size: 10px; }
.results-vehicle-type dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.results-vehicle-type dl div { min-width: 0; }
.results-vehicle-type dt { color: var(--muted); font-size: 9px; }
.results-vehicle-type dd { margin: 2px 0 0; font-size: 11px; font-weight: 800; }
.results-bus-regularity { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 9px; padding: 9px; border-radius: 8px; background: #eff5fb; color: #47627a; font-size: 10px; }
.results-bus-regularity strong { width: 100%; color: #2c5274; font-size: 11px; }
.results-map-card { position: relative; margin-top: 16px; overflow: hidden; }
.results-map-scale { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.results-map-scale i { width: 14px; height: 14px; border: 2px solid #a82f39; border-radius: 50%; background: rgba(230,75,80,.68); }
.results-congestion-map { height: 410px; background: #e9efec; }
.results-map-empty { position: absolute; z-index: 500; top: 78px; right: 20px; padding: 10px 12px; border: 1px solid #dce5e0; border-radius: 9px; background: rgba(255,255,255,.94); color: var(--muted); font-size: 11px; box-shadow: 0 6px 20px rgba(20,40,31,.12); }
.results-map-empty[hidden] { display: none; }
.results-street-congestion { border-top: 1px solid #e2e9e5; background: #fff; }
.results-street-congestion-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 16px 18px 12px; }
.results-street-congestion-heading h4 { margin: 0; color: #263a31; font-size: 15px; }
.results-street-congestion-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.results-street-congestion-heading > span { color: #5f7168; font-size: 10px; text-align: right; }
.results-street-congestion-heading > span.loading::before { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 2px solid #c9d9d1; border-top-color: var(--green); border-radius: 50%; content: ""; vertical-align: -2px; animation: results-street-loading .8s linear infinite; }
.results-street-congestion-table th:nth-child(2), .results-street-congestion-table td:nth-child(2) { max-width: 300px; text-align: left; white-space: normal; }
.results-street-congestion-table tbody th { min-width: 210px; max-width: 320px; white-space: normal; }
.results-street-congestion-table tbody th small { display: block; margin-top: 3px; color: #9a6b35; font-weight: 500; }
.results-street-congestion-table tbody tr:last-child th,
.results-street-congestion-table tbody tr:last-child td { border-bottom: 0; }
@keyframes results-street-loading { to { transform: rotate(360deg); } }

.workspace { width: 100%; flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.control-panel { min-width: 0; background: var(--panel); overflow-y: auto; z-index: 1000; box-shadow: 6px 0 24px rgba(20, 50, 38, .06); }
.control-panel.scenario-readonly { opacity: .78; }
.osm-loading-overlay { position: fixed; z-index: 2050; display: grid; place-items: center; padding: 20px; background: rgba(49, 58, 54, .36); backdrop-filter: blur(2px); cursor: wait; }
.osm-loading-overlay[hidden] { display: none; }
.osm-loading-card { width: min(250px, 100%); display: grid; justify-items: center; gap: 8px; padding: 20px 18px; border: 1px solid rgba(255,255,255,.72); border-radius: 14px; background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 16px 45px rgba(17,34,26,.22); text-align: center; }
.osm-loading-card strong { font-size: 12px; }
.osm-loading-card small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.osm-loading-spinner { width: 30px; height: 30px; border: 3px solid #cfe1d9; border-top-color: var(--green); border-radius: 50%; animation: osm-loading-spin .8s linear infinite; }
@keyframes osm-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .osm-loading-spinner { animation: none; border-top-color: #cfe1d9; background: var(--green-soft); } }
.panel-section { padding: 21px 22px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 17px; }
.section-heading.compact { margin-bottom: 14px; }
.step-number { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; }
.section-heading h2 { margin: 1px 0 3px; font-size: 14px; }
.section-heading p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.section-heading-copy { min-width: 0; flex: 1; }
.route-section-heading { align-items: center; margin-bottom: 12px; }
.add-route-header { flex: 0 0 auto; padding: 7px 9px; border: 1px solid #9fcab8; border-radius: 8px; background: var(--green); color: white; font-size: 9px; font-weight: 800; cursor: pointer; }
.add-route-header:hover { background: var(--green-dark); }
.route-list-card { margin-bottom: 14px; padding: 9px; border: 1px solid #cfe0d8; border-radius: 11px; background: linear-gradient(145deg, #f0f8f4, #fbfdfc); }
.route-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 7px; color: var(--green-dark); }
.route-list-heading strong { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.route-list-heading span { color: var(--muted); font-size: 8px; font-weight: 700; }
.route-list-empty { margin: 2px 0; padding: 9px 6px; color: var(--muted); font-size: 9px; line-height: 1.45; text-align: center; }
.route-editor-title { margin: 0 0 8px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

.route-points { position: relative; display: grid; gap: 10px; }
.point-field { width: 100%; position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; }
.point-field.active { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.point-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 12px; font-weight: 800; }
.point-a { background: var(--green); }
.point-b { background: var(--orange); }
.point-field strong, .point-field small { display: block; }
.point-field strong { font-size: 12px; }
.point-field small { max-width: 210px; margin-top: 2px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.route-line { position: absolute; left: 23px; top: 37px; bottom: 37px; border-left: 2px dotted #c9d3ce; }
.waypoint-list { display: grid; gap: 8px; }
.waypoint-field { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.waypoint-number { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--route-color, var(--green)); color: white; font-size: 10px; font-weight: 800; }
.waypoint-details { min-width: 0; flex: 1; }
.waypoint-details strong, .waypoint-details small { display: block; }
.waypoint-details strong { font-size: 11px; }
.waypoint-details small { margin-top: 2px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
.waypoint-free { flex: 0 0 auto; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--muted); font-size: 8px; font-weight: 800; cursor: pointer; }
.waypoint-free[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); color: #a55118; }
.waypoint-remove { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.waypoint-remove:hover { color: var(--red); background: #fff0ef; }
.waypoint-add { width: 100%; margin-top: 10px; padding: 8px; border: 1px dashed #b8c8c0; border-radius: 9px; background: transparent; color: var(--green); font-size: 10px; font-weight: 700; cursor: pointer; }
.waypoint-add:hover, .waypoint-add.active { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.route-tabs { display: grid; max-height: 170px; gap: 5px; overflow-y: auto; }
.route-tab-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 4px; }
.route-tab { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); }
.route-tab.active { color: var(--ink); border-color: var(--route-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--route-color) 14%, transparent); }
.route-tab-select { width: 20px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.route-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--route-color); }
.route-tab-name-input { min-width: 0; width: 100%; padding: 4px 5px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: inherit; font-size: 10px; font-weight: 700; }
.route-tab-name-input:hover { background: var(--canvas); }
.route-tab-name-input:focus { outline: 0; border-color: #a9cdbd; background: white; box-shadow: 0 0 0 2px var(--green-soft); }
.route-tab-delete { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #9aa59f; font-size: 17px; line-height: 1; cursor: pointer; }
.route-tab-delete:hover:not(:disabled) { background: #fff0ef; color: var(--red); }
.route-tab-delete:disabled { opacity: .28; cursor: not-allowed; }
.route-mode-toggle { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); cursor: pointer; }
.route-mode-toggle input { margin-top: 2px; accent-color: var(--orange); }
.route-mode-toggle strong, .route-mode-toggle small { display: block; }
.route-mode-toggle strong { font-size: 10px; }
.route-mode-toggle small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.progressive-traffic-toggle { margin-top: 14px; border-color: #c9ded5; background: #f2f8f5; }
.progressive-traffic-toggle input { accent-color: var(--green); }
.progressive-traffic-controls { margin-top: 6px; padding: 10px; border: 1px solid #c9ded5; border-radius: 9px; background: #f7fbf9; }
.progressive-traffic-controls .range-label { margin-bottom: 7px; font-size: 10px; }
.progressive-traffic-controls .range-label strong { font-size: 10px; }

.range-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
.range-label.spaced { margin-top: 18px; }
.range-label strong { color: var(--green); font-size: 12px; }
input[type="range"] { width: 100%; height: 4px; accent-color: var(--green); cursor: pointer; }
.range-scale { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font-size: 9px; }
#flowRange { --flow-color: #dc8a20; height: 8px; appearance: none; border-radius: 999px; outline: 0; background: linear-gradient(90deg, #45a873 0 31%, #e7a23a 31% 65.5%, #df5a50 65.5% 100%); }
#flowRange::-webkit-slider-thumb { width: 17px; height: 17px; appearance: none; border: 3px solid var(--flow-color); border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(28,45,37,.25); }
#flowRange::-moz-range-track { height: 8px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #45a873 0 31%, #e7a23a 31% 65.5%, #df5a50 65.5% 100%); }
#flowRange::-moz-range-progress { background: transparent; }
#flowRange::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--flow-color); border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(28,45,37,.25); }
.flow-thresholds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.flow-threshold { display: grid; grid-template-columns: 7px minmax(0,1fr); align-items: center; column-gap: 6px; padding: 6px 7px; border-radius: 7px; background: var(--canvas); color: var(--muted); }
.flow-threshold i { width: 7px; height: 7px; grid-row: 1 / 3; border-radius: 50%; }
.flow-threshold b { color: var(--ink); font-size: 10px; line-height: 1.15; }
.flow-threshold small { font-size: 8px; line-height: 1.15; }
.flow-threshold.fluid i { background: #359865; }
.flow-threshold.dense i { background: #dc8a20; }
.flow-threshold.saturated i { background: #d8483f; }
.flow-current-level { display: inline-flex; align-items: center; gap: 5px; margin: 7px 0 0; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; }
.flow-current-level::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.flow-current-level.fluid { background: #e5f3ed; color: #23734f; }
.flow-current-level.dense { background: #fff1dc; color: #a85f0a; }
.flow-current-level.saturated { background: #ffebe9; color: #b63b34; }

.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.map-tool { min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; font-size: 11px; font-weight: 700; transition: .15s ease; }
.map-tool:hover { background: var(--canvas); border-color: #c7d2cc; }
.map-tool.active { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); box-shadow: 0 0 0 2px var(--green-soft); }
.tool-symbol { height: 22px; display: grid; place-items: center; font-weight: 900; }
.slow-symbol { width: 28px; color: var(--orange); font-size: 25px; letter-spacing: -8px; transform: rotate(-12deg); }
.stop-symbol { width: 27px; height: 27px; border-radius: 7px; background: var(--red); color: white; font-size: 6px; border: 2px solid white; outline: 1px solid var(--red); }
.light-symbol { width: 14px; height: 26px; background: #35413c; border-radius: 4px; display: flex; flex-direction: column; gap: 2px; padding: 3px; }
.light-symbol i { width: 6px; height: 6px; border-radius: 50%; background: #66736e; }
.light-symbol i:nth-child(1) { background: #ef5a50; }
.yield-symbol { color: var(--red); font-size: 29px; line-height: 1; }
.gyration-symbol { width: 28px; height: 28px; display: grid; place-items: center; border: 4px solid #47776a; border-radius: 50%; color: #47776a; font-size: 20px; line-height: 1; }
.osm-import-button { width: 100%; display: flex; align-items: center; gap: 11px; margin: 0 0 12px; padding: 11px 12px; border: 1px solid #b8d5c9; border-radius: 10px; background: #f0f8f4; color: var(--green-dark); text-align: left; cursor: pointer; }
.osm-import-button:hover { border-color: var(--green); background: var(--green-soft); }
.osm-import-button:disabled { cursor: wait; }
.osm-import-symbol { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 17px; }
.osm-import-button strong, .osm-import-button small { display: block; }
.osm-import-button strong { font-size: 11px; line-height: 1.25; }
.osm-import-button small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.tool-hint { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.device-controls { margin-top: 12px; padding: 11px; border-radius: 9px; background: var(--orange-soft); }
.device-controls label { display: flex; justify-content: space-between; margin: 5px 0; font-size: 11px; }
.device-controls > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.device-controls input { accent-color: var(--orange); }
.stop-controls { background: #fff0ef; }
.stop-controls input { accent-color: var(--red); }
.light-controls { background: #eef2f0; }
.light-controls input { accent-color: #46534d; }
.light-controls label + input + label { margin-top: 10px; }
.gyration-controls { background: #edf5f2; }
.gyration-controls input { accent-color: #47776a; }

.map-region { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: #dce5df; }
.map-overlay { position: absolute; z-index: 500; background: rgba(255,255,255,.94); border: 1px solid rgba(215,224,219,.9); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.map-city-search { top: 16px; left: 16px; z-index: 520; width: min(350px, calc(100% - 32px)); padding: 7px; border-radius: 12px; }
.city-search-row { display: flex; align-items: center; gap: 6px; }
.city-search-icon { flex: 0 0 auto; width: 17px; height: 17px; margin-left: 3px; fill: none; stroke: var(--green); stroke-linecap: round; stroke-width: 2; }
.map-city-search input { min-width: 0; flex: 1; padding: 7px 4px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.map-city-search input::placeholder { color: var(--muted); }
.map-city-search button { flex: 0 0 auto; padding: 7px 10px; border: 0; border-radius: 8px; background: var(--green); color: white; font-size: 9px; font-weight: 800; cursor: pointer; }
.map-city-search button:hover { background: var(--green-dark); }
.map-city-search button:disabled { opacity: .65; cursor: wait; }
.city-search-suggestions { max-height: 230px; margin: 7px -7px -7px; padding: 4px; overflow-y: auto; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; background: rgba(255,255,255,.98); list-style: none; }
.city-search-suggestions[hidden] { display: none; }
.city-search-suggestions button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; }
.city-search-suggestions button:hover, .city-search-suggestions button.active { background: var(--green-soft); color: var(--green-dark); }
.city-search-suggestions strong { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.city-search-suggestions small { flex: 0 0 auto; color: var(--muted); font-size: 8px; }
.city-search-feedback { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-height: 0; overflow: hidden; padding: 0 3px; color: var(--muted); font-size: 8px; opacity: 0; transition: max-height .18s, padding-top .18s, opacity .18s; }
.map-city-search.has-feedback .city-search-feedback { max-height: 30px; padding-top: 5px; opacity: 1; }
.city-search-feedback span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-search-feedback span.error { color: var(--red); }
.city-search-attribution { display: flex; flex: 0 0 auto; gap: 5px; }
.city-search-feedback a { color: var(--muted); }
.map-background-switch { top: 70px; left: 16px; display: flex; gap: 2px; padding: 3px; border-radius: 10px; transition: top .18s; }
.map-city-search.has-feedback + .map-background-switch { top: 88px; }
.map-background-switch button { min-width: 57px; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.map-background-switch button:hover { color: var(--green-dark); background: var(--canvas); }
.map-background-switch button.active { background: var(--green); color: white; box-shadow: 0 2px 7px rgba(21,83,61,.22); }
.map-message { top: 16px; left: 50%; transform: translateX(-50%); padding: 9px 15px; border-radius: 999px; font-size: 11px; font-weight: 700; pointer-events: none; transition: opacity .2s; }
.map-message.success { color: var(--green); }
.legend { right: 16px; top: 16px; display: flex; gap: 12px; padding: 9px 12px; border-radius: 9px; font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; }
.legend-dot.car { background: var(--green); }
.legend-dot.bus { width: 13px; border-radius: 3px; background: var(--blue); }
.legend-dot.slowed { background: var(--orange); }
.route-metrics { left: 16px; bottom: 24px; width: min(1040px, calc(100% - 32px)); overflow: hidden; border-color: rgba(187,204,195,.95); border-radius: 12px; box-shadow: 0 15px 38px rgba(25,43,35,.18); }
.metrics-title { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px 9px; border-bottom: 1px solid var(--line); }
.metrics-title strong { font-size: 13px; font-weight: 850; }
.metrics-title span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.metrics-title b { color: var(--ink); }
.metrics-status { display: inline-flex; margin-left: 6px; padding: 3px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 8px; font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.metrics-status.waiting { background: #edf0ee; color: var(--muted); }
.metrics-status.paused { background: #edf0ee; color: var(--muted); }
.metrics-status.draining { background: #fff2d8; color: #8a5a00; }
.metrics-status.finished { background: #e8eef8; color: #26558e; }
.metrics-title-controls { display: flex; align-items: center; gap: 13px; }
.metrics-duration-actions { display: flex; align-items: center; gap: 8px; }
.metrics-title-controls label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 750; }
.metrics-title-controls input { width: 47px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); font-size: 10px; font-weight: 850; text-align: center; }
.metrics-batch-button { padding: 5px 9px; border: 1px solid #a8cdbc; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.metrics-batch-button:hover:not(:disabled) { border-color: var(--green); background: #d9eee5; }
.metrics-batch-button:disabled { opacity: .5; cursor: not-allowed; }
.batch-duration-field { display: flex; align-items: center; gap: 7px; }
.batch-duration-field input[type="number"] { width: 84px; }
.batch-execution-fieldset { display: grid; gap: 9px; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.batch-execution-fieldset legend { padding: 0 5px; color: var(--ink); font-size: 10px; font-weight: 850; }
.batch-execution-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.batch-execution-options > label { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); cursor: pointer; }
.batch-execution-options > label:has(input:checked) { border-color: #91c4ad; background: var(--green-soft); }
.batch-execution-options input, .batch-repetition-options input { margin-top: 2px; accent-color: var(--green); }
.batch-execution-options strong, .batch-execution-options small { display: block; }
.batch-execution-options strong { font-size: 10px; }
.batch-execution-options small { margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 600; }
.batch-repetition-options { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 2px; color: var(--muted); font-size: 9px; font-weight: 750; }
.batch-repetition-options[hidden] { display: none; }
.batch-repetition-options > label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); cursor: pointer; }
.batch-repetition-options > label:has(input:checked) { border-color: var(--green); color: var(--green-dark); }
.batch-repetition-options > small { flex-basis: 100%; color: var(--muted); font-size: 8px; font-weight: 600; }
.metrics-head, .metrics-row { display: grid; grid-template-columns: minmax(82px, 1.25fr) .55fr .55fr .62fr .82fr .76fr 1fr .72fr; align-items: center; gap: 7px; padding: 7px 13px; }
.metrics-head { background: #eef3f0; color: #52615a; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .045em; }
.metrics-head span:not(:first-child) { justify-self: stretch; text-align: center; }
.metrics-row { border-top: 1px solid var(--line); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.metrics-row:first-child { border-top: 0; }
.metrics-route { display: flex; align-items: center; min-width: 0; gap: 7px; font-weight: 700; }
.metrics-route i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--route-color); }
.metrics-route span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metrics-value { justify-self: stretch; text-align: center; }
.metric-delay { display: flex; align-items: center; justify-content: center; gap: 4px; }
.metric-delay small { color: var(--muted); font-size: 8px; font-weight: 800; white-space: nowrap; }

.leaflet-control-zoom { border: 0 !important; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a { border-color: var(--line) !important; color: var(--ink) !important; }
.leaflet-control-attribution { font-size: 9px !important; }
.leaflet-div-icon { background: transparent; border: 0; }
.endpoint-marker { width: 32px; height: 40px; display: flex; justify-content: center; align-items: flex-start; padding-top: 6px; color: white; font-size: 12px; font-weight: 800; filter: drop-shadow(0 3px 4px rgba(20,30,25,.25)); }
.endpoint-marker::before { content: ""; position: absolute; width: 29px; height: 29px; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); background: var(--route-color, var(--green)); border: 3px solid white; z-index: -1; }
.endpoint-marker.b { opacity: .9; }
.endpoint-letter { position: relative; z-index: 1; line-height: 1; }
.endpoint-route-name { position: absolute; top: 1px; z-index: 2; max-width: 190px; overflow: hidden; padding: 6px 9px; border: 2px solid white; border-radius: 8px; background: var(--route-color, var(--green)); color: white; box-shadow: 0 4px 12px rgba(20,30,25,.2); font-size: 10px; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.endpoint-marker.a .endpoint-route-name { left: 38px; }
.endpoint-marker.b .endpoint-route-name { right: 38px; }
.waypoint-marker { width: 25px; height: 25px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--route-color, var(--green)); color: white; font-size: 9px; font-weight: 800; box-shadow: 0 3px 8px rgba(20,30,25,.28); }
.waypoint-marker.free { border-style: dashed; outline: 2px solid var(--orange); }
.road-device { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: white; box-shadow: 0 3px 10px rgba(17,34,26,.25); font-size: 9px; font-weight: 900; cursor: pointer; }
.road-device.stop { color: white; background: var(--red); border-radius: 8px; font-size: 7px; border: 2px solid white; outline: 1px solid var(--red); }
.road-device.yield { color: var(--red); font-size: 25px; line-height: 1; }
.road-device.light { background: #35413c; border: 2px solid white; border-radius: 6px; }
.road-device.light::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ef5a50; box-shadow: 0 8px #6c7873, 0 -8px #6c7873; }
.road-device.light.green::before { background: #6c7873; box-shadow: 0 8px #38a16e, 0 -8px #6c7873; }
.slow-zone-handle { width: 26px; height: 26px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--orange); color: white; font-size: 17px; font-weight: 800; box-shadow: 0 3px 8px rgba(20,30,25,.25); cursor: grab; }
.slow-zone-handle:active { cursor: grabbing; }
.slow-resize-handle { width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 50%; background: white; color: var(--orange); font-size: 12px; font-weight: 800; box-shadow: 0 3px 8px rgba(20,30,25,.2); cursor: ew-resize; }
.gyration-handle { width: 28px; height: 28px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: #47776a; color: white; font-size: 19px; font-weight: 800; box-shadow: 0 3px 8px rgba(20,30,25,.25); cursor: grab; }
.gyration-resize-handle { width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid #47776a; border-radius: 50%; background: white; color: #47776a; font-size: 12px; font-weight: 800; box-shadow: 0 3px 8px rgba(20,30,25,.2); cursor: ew-resize; }
.device-popup { min-width: 210px; color: var(--ink); }
.device-popup h3 { margin: 0 0 3px; font-size: 12px; }
.device-popup > p { margin: 0 0 9px; color: var(--muted); font-size: 9px; }
.device-popup-source { margin-top: -4px !important; color: var(--green) !important; font-weight: 700; }
.device-scope-list { display: grid; gap: 6px; margin-bottom: 10px; }
.device-scope-option { display: flex; align-items: center; gap: 7px; font-size: 10px; cursor: pointer; }
.device-scope-option input { margin: 0; accent-color: var(--green); }
.device-scope-option i { width: 8px; height: 8px; border-radius: 50%; background: var(--route-color, var(--green)); }
.device-popup-timing { display: grid; gap: 9px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.device-popup-timing label { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 10px; }
.device-popup-timing input { grid-column: 1 / -1; width: 100%; accent-color: #46534d; }
.device-popup-actions { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 8px; }
.device-popup-delete { padding: 5px 8px; border: 0; background: transparent; color: var(--red); font-size: 10px; font-weight: 700; cursor: pointer; }
.vehicle-marker { transition: transform var(--vehicle-transition-duration, .2s) linear; }
.vehicle-icon { position: relative; transform-origin: center; filter: drop-shadow(0 2px 2px rgba(18,30,24,.25)); }
.vehicle-body { width: 13px; height: 8px; background: var(--route-color, var(--green)); border: 2px solid white; border-radius: 5px; }
.vehicle-body.bus { width: 18px; height: 9px; border-radius: 3px; background: var(--blue); }
.vehicle-body.slowed { background: var(--orange); }

.osm-import-dialog { width: min(620px, calc(100% - 30px)); }
.osm-import-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.osm-import-types > label { min-width: 0; display: grid; grid-template-columns: auto 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.osm-import-types > label:has(input:checked) { border-color: #a8cdbc; background: var(--green-soft); }
.osm-import-types input { accent-color: var(--green); }
.osm-import-types strong, .osm-import-types small { display: block; }
.osm-import-types strong { font-size: 10px; }
.osm-import-types small { margin: 2px 0 0; color: var(--muted); font-size: 8px; font-weight: 500; text-transform: none; }
.osm-import-types b { min-width: 23px; padding: 4px 6px; border-radius: 999px; background: white; color: var(--green-dark); font-size: 9px; text-align: center; }
.osm-preview-icon { width: 28px; height: 28px; display: grid; place-items: center; font-size: 8px; font-weight: 900; }
.osm-preview-icon.stop { border-radius: 8px; background: var(--red); color: white; }
.osm-preview-icon.light { border: 2px solid white; border-radius: 6px; background: #35413c; box-shadow: 0 0 0 1px #35413c; }
.osm-preview-icon.light i { width: 7px; height: 7px; border-radius: 50%; background: #ef5a50; box-shadow: 0 8px #66736e, 0 -8px #66736e; }
.osm-preview-icon.yield { color: var(--red); font-size: 27px; }
.osm-preview-icon.slow { color: var(--orange); font-size: 23px; }
.osm-import-notice { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: var(--orange-soft); color: #71543b; font-size: 9px; line-height: 1.45; }
.osm-import-notice strong { flex: 0 0 auto; color: #85501f; }
.osm-import-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }

@media (max-width: 1150px) {
  .config-button { padding-inline: 10px; }
  .config-action-text { display: none; }
  .account-identity small { display: none; }
  .account-identity strong { max-width: 90px; }
  .topbar-primary { gap: 12px; }
  .project-menu-trigger { min-width: 200px; }
  .project-menu-trigger strong { max-width: 125px; }
  .scenario-menu-trigger { width: 165px; }
  .main-results-button { width: 165px; }
  .scenario-menu-trigger em { display: none; }
  .settings-trigger { width: 38px; justify-content: center; padding: 0; }
  .settings-trigger > span { display: none; }
}

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .auth-layout { width: min(430px, calc(100% - 28px)); display: block; padding: 28px 0 18px; }
  .auth-showcase { display: none; }
  .auth-card { padding: 28px 24px; }
  .auth-mobile-mark { width: 76px; height: 76px; display: block; filter: drop-shadow(0 10px 16px rgba(30,114,84,.22)); }
  .auth-footer { width: calc(100% - 32px); }
  .app-shell { min-height: 780px; height: auto; }
  .topbar { height: auto; min-height: 66px; padding: 12px 14px; }
  .brand p, .sim-status, .time-control { display: none; }
  .topbar-primary { gap: 8px; }
  .brand > div { display: none; }
  .project-menu-trigger { min-width: 0; width: 145px; height: 42px; }
  .project-menu-trigger strong { max-width: 83px; }
  .scenario-menu-trigger { width: 135px; height: 42px; }
  .main-results-button { width: 135px; height: 42px; }
  .scenario-menu-panel { position: fixed; top: 70px; right: 10px; left: 10px; width: auto; max-height: calc(100vh - 85px); }
  .project-menu-panel { position: fixed; top: 70px; right: 10px; left: 10px; width: auto; max-height: calc(100vh - 85px); }
  .project-menu-panel { overflow-y: auto; }
  .project-submenu-panel { position: static; width: auto; margin: 4px 5px 7px 47px; box-shadow: none; }
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 520px; }
  .control-panel { width: 100%; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-section { min-width: 0; padding: 16px; }
  .panel-section:last-child { grid-column: 1 / -1; }
  .tool-grid { grid-template-columns: repeat(4, 1fr); }
  .map-tool, input[type="range"] { min-width: 0; }
  .route-metrics { right: 10px; left: 10px; bottom: 20px; width: auto; }
  .legend { display: none; }
  .config-button { padding-inline: 10px; }
  .config-action-text { display: none; }
  .account-area { padding-left: 7px; }
  .settings-panel { position: fixed; top: 70px; right: 10px; left: 10px; width: auto; }
  .notification-panel { position: fixed; top: 70px; right: 10px; left: 10px; width: auto; }
  .account-identity > span:nth-child(2) { display: none; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 4px; padding: 7px 12px; }
  .legal-header { padding: 10px 16px; }
  .legal-content { margin-block: 18px 30px; padding: 28px 24px; }
  .legal-footer { padding-inline: 16px; }
}

@media (max-width: 500px) {
  .button-secondary { display: none; }
  .settings-invitation-fields { grid-template-columns: minmax(0, 1fr); }
  .auth-card-heading h1 { font-size: 25px; }
  .auth-footer { align-items: center; flex-direction: column; gap: 3px; text-align: center; }
  .project-menu-trigger { width: 125px; }
  .project-menu-trigger strong { max-width: 64px; }
  .scenario-menu-trigger { width: 112px; }
  .main-results-button { width: 112px; }
  .control-panel { display: block; }
  .workspace { grid-template-rows: auto 470px; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .map-city-search { top: 10px; right: 10px; left: 10px; width: auto; }
  .map-city-search button { padding-inline: 9px; }
  .map-message { top: 106px; max-width: 75%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-background-switch { top: 64px; left: 10px; }
  .map-city-search.has-feedback + .map-background-switch { top: 82px; }
  .metrics-title { align-items: flex-start; gap: 6px; }
  .metrics-title-controls { align-items: flex-end; flex-direction: column; gap: 4px; }
  .metric-delay { flex-direction: column; gap: 1px; }
  .share-dialog form { padding: 17px; }
  .share-link-row { align-items: stretch; flex-direction: column; }
  .confirm-dialog form { padding: 19px; }
  .confirm-dialog-actions .button-secondary { display: inline-block; }
  .confirm-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .osm-import-types { grid-template-columns: 1fr; }
  .osm-import-actions .button-secondary { display: inline-block; }
  .osm-import-actions { align-items: stretch; flex-direction: column-reverse; }
  .account-identity > span:nth-child(2) { display: none; }
}

@media (max-width: 430px) {
  .main-results-button { width: 42px; justify-content: center; padding: 6px; }
  .main-results-button > span:last-child { display: none; }
}

@media (max-width: 1250px) {
  .results-kpis { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .results-two-columns { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .results-page-header { grid-template-columns: auto minmax(0, 1fr); }
  .results-page-header > .button { display: none; }
  .results-layout { display: block; }
  .results-history { padding: 14px; border-right: 0; border-bottom: 1px solid #dce4e0; }
  .results-history-list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .results-content { padding: 18px 14px 32px; }
  .results-run-heading { align-items: stretch; flex-direction: column; }
  .results-run-heading label { min-width: 0; }
  .results-report-action { justify-items: stretch; }
  .results-report-button { justify-content: center; }
  .results-card-heading { align-items: stretch; flex-direction: column; }
  .results-metric-selector { justify-content: flex-start; }
  .results-comparison-filters { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .app-shell.results-mode .brand { display: none; }
  .app-shell.results-mode .topbar-primary { width: 100%; }
  .app-shell.results-mode .project-menu { flex: 1; }
  .app-shell.results-mode .project-menu-trigger { width: 100%; }
  .results-page-header { min-height: 80px; grid-template-columns: 1fr; gap: 9px; padding: 12px 14px; }
  .results-page-header > div > p, .results-page-header > div > span { display: none; }
  .results-page-header h2 { font-size: 19px; }
  .results-back-button { padding: 6px 9px; font-size: 11px; }
  .results-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-kpis strong { font-size: 16px; }
  .results-comparison-filters { display: grid; grid-template-columns: 1fr; }
  .results-comparison-filters select { width: 100%; max-width: none; }
  .results-comparison-table th, .results-comparison-table td { padding: 10px 9px; font-size: 10px; }
  .results-comparison-alert { grid-template-columns: 1fr; }
  .results-comparison-alert > strong,
  .results-comparison-alert > div { grid-column: 1; }
  .results-comparison-alert > div { align-items: flex-start; flex-direction: column; gap: 1px; }
  .results-comparison-tables { padding: 8px; }
  .results-comparison-subtable h4 { align-items: flex-start; flex-wrap: wrap; }
  .results-comparison-chart-heading { align-items: stretch; flex-direction: column; }
  .results-comparison-chart-heading .results-metric-selector { max-width: none; }
  .results-chart { height: 255px; padding-inline: 4px; }
  .results-chart-legend { align-items: flex-start; flex-direction: column; }
  .results-chart-legend span { margin-left: 0; }
  .results-congestion-map { height: 330px; }
}