:root {
    --teal-950: #0b1f1d;
    --teal-900: #10211f;
    --teal-800: #143834;
    --teal-700: #1b4a45;
    --teal-600: #2f6f68;
    --teal-500: #3d8a82;
    --cream: #f3efe4;
    --cream-2: #e8e0d0;
    --paper: #fbf8f1;
    --ink: #12211f;
    --muted: #5a6e6b;
    --line: #d8cfc0;
    --rest: #7eb3e8;
    --avail: #e8d56a;
    --work: #e0a06a;
    --drive: #d45b4a;
    --ok: #2f7d4a;
    --warn: #c9892a;
    --danger: #b42318;
    --shadow: 0 18px 50px rgba(16, 33, 31, 0.18);
    --radius: 18px;
    --font: "Manrope", "Segoe UI", sans-serif;
    --display: "Sora", "Manrope", sans-serif;
}

* { box-sizing: border-box; }

html {
    color-scheme: light;
    background: #fff;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: #fff;
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--teal-700); }

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background:
        radial-gradient(1200px 600px at 50% -10%, #1b4a45 0%, transparent 55%),
        linear-gradient(180deg, var(--teal-950), var(--teal-900) 40%, #0a1817);
    color: var(--cream);
}

.login-shell {
    width: 100%;
    max-width: 420px;
}

.register-shell {
    max-width: 520px;
}

.login-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
    text-align: center;
}

.login-mark img {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.login-mark .brand {
    margin-top: 16px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.05em;
}

.login-mark .tag {
    margin-top: 4px;
    color: #c9d7d4;
    font-size: 14px;
}

.login-card {
    background: var(--paper);
    color: var(--ink);
    border-radius: 28px;
    padding: 28px 26px 22px;
    box-shadow: var(--shadow);
}

.login-card h1 {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: -0.03em;
}

.login-lead {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.login-ok {
    color: var(--ok);
    font-weight: 700;
    margin: 0 0 12px;
}

.plan-pick {
    border: 0;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.plan-pick legend {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.plan-option {
    display: block;
    margin: 0;
    cursor: pointer;
}

.plan-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.plan-option span {
    display: block;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 12px 10px;
    background: #fff;
    min-height: 100%;
}

.plan-option input:checked + span {
    border-color: var(--teal-600);
    box-shadow: 0 0 0 3px rgba(47, 111, 104, 0.16);
    background: #f6fbfa;
}

.plan-option strong,
.plan-option em,
.plan-option small {
    display: block;
}

.plan-option strong {
    font-size: 13px;
    margin-bottom: 6px;
}

.plan-option strong b {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--teal-700);
    color: var(--cream);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: 1px;
}

.plan-option em {
    font-style: normal;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.plan-option small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

label .optional {
    font-weight: 600;
    color: var(--muted);
}

.remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.remember-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--teal-700);
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    margin-bottom: 14px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    outline: 2px solid var(--teal-600);
    outline-offset: 1px;
}

.btn {
    font-family: var(--display);
    font-weight: 700;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    cursor: pointer;
    background: var(--teal-700);
    color: var(--cream);
    min-width: 8em;
}

.btn:hover { background: var(--teal-600); }
.btn:disabled {
    opacity: 0.65;
    cursor: wait;
}
.btn.ghost {
    background: transparent;
    color: var(--teal-800);
    border: 1px solid var(--line);
}
.btn.wide { width: 100%; }

.login-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: #f3efe4;
    border-radius: 12px;
    color: var(--muted);
    font-size: 13px;
}

.login-foot {
    margin-top: 18px;
    text-align: center;
    color: #93a8a5;
    font-size: 12px;
}

.login-foot a {
    color: #c9d7d4;
}

.auth-main {
    min-height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px 72px;
    background: #fff;
}

.auth-main-center {
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 24px;
}

.auth-card {
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(16, 33, 31, 0.06);
}

.auth-card-narrow {
    max-width: 420px;
}

.home-top .app-user {
    color: var(--ink);
}

.home-top .app-user .role {
    color: var(--muted);
}

.home-top .app-user .btn.ghost {
    color: var(--teal-800);
    border-color: var(--line);
}

.home-top .app-user .btn.ghost:hover {
    background: var(--paper);
}

.auth-foot {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.auth-foot a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.error {
    color: var(--danger);
    font-weight: 700;
    margin: 0 0 12px;
    min-height: 1.2em;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 22px;
    background: var(--teal-800);
    color: var(--cream);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.app-brand img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.app-brand strong {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: -0.04em;
    display: block;
}

.app-brand span {
    display: block;
    font-size: 12px;
    color: #c9d7d4;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.app-user .who {
    text-align: right;
}

.app-user .role {
    color: #c9d7d4;
    font-size: 12px;
}

.app-header .btn.ghost {
    color: var(--cream);
    border-color: rgba(243, 239, 228, 0.35);
}

.app-header .btn.ghost:hover {
    background: rgba(243, 239, 228, 0.08);
}

.app-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 22px 64px;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.app-page {
    min-height: 100vh;
    background: #fff;
    color: var(--ink);
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
}

.app-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 14px;
    background: var(--teal-950);
    color: var(--cream);
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    box-sizing: border-box;
}

.app-side .app-brand {
    padding: 4px 8px;
}

.app-side .app-brand strong {
    color: #fff;
}

.app-side .app-brand span {
    color: #8fa3a0;
}

.app-side-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.app-side-nav a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: #c9d7d4;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.app-side-nav a:hover,
.app-side-nav a.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.app-side-foot {
    margin-top: auto;
}

.app-side-actions {
    padding: 0 0 4px;
}

.app-side-quiet {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: #8fa3a0;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
}

.app-side-quiet:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.app-side-user {
    padding: 14px 8px 4px;
    border-top: 1px solid rgba(243, 239, 228, 0.12);
}

.app-side-user .who {
    margin-bottom: 10px;
}

.app-side-user .role {
    color: #8fa3a0;
    font-size: 12px;
}

.app-side-user .btn.ghost {
    width: 100%;
    color: var(--cream);
    border-color: rgba(243, 239, 228, 0.28);
}

.app-side-user .btn.ghost:hover {
    background: rgba(243, 239, 228, 0.08);
}

.paywall {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(11, 31, 29, 0.38);
    backdrop-filter: blur(10px);
}

.paywall[hidden] {
    display: none;
}

.paywall-card {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    background: var(--paper);
    color: var(--ink);
    border-radius: 28px;
    padding: 28px 26px 24px;
    box-shadow: var(--shadow);
}

.paywall-card h2 {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: -0.03em;
}

.paywall-card p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.app-page.is-locked .app-side,
.app-page.is-locked .app-content {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}

.app-page .admin-wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.admin-wrap h1 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: -0.04em;
}

.admin-table-wrap {
    overflow: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    vertical-align: middle;
}

.admin-table th {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table .btn {
    white-space: nowrap;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn.compact {
    min-width: 0;
    padding: 8px 12px;
    font-size: 12px;
}

.btn.danger {
    background: var(--danger);
    color: #fff;
}

.btn.danger:hover {
    background: #8f1c14;
}

.home-nav form {
    margin: 0;
}

.app-content {
    min-width: 0;
    min-height: 100vh;
}

.app-filebar {
    position: sticky;
    top: 0;
    z-index: 8;
    margin: -24px -22px 20px;
    padding: 16px 22px 18px;
    background: #fff;
    box-shadow: 0 16px 18px -10px #fff;
}

.app-page .dropzone {
    margin-bottom: 0;
    padding: 16px 16px 16px 20px;
}

.app-page .dropzone-copy {
    flex-wrap: wrap;
}

.app-page .dropzone strong,
.app-page .dropzone span {
    white-space: normal;
}

.app-page .app-main h3,
.app-page .overview,
.app-page .violations-561,
.app-page .dropzone,
.app-page .driver-card,
.app-page #przeglad,
.app-page #aktywnosci,
.app-page #naruszenia {
    scroll-margin-top: 8px;
}

.app-page #naruszenia {
    min-height: calc(100dvh - var(--app-filebar-h, 6.75rem));
    box-sizing: border-box;
}

.hint {
    color: var(--muted);
    margin: 8px 0 16px;
}

.dropzone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    border: 2px dashed var(--teal-600);
    border-radius: 14px;
    padding: 8px 8px 8px 16px;
    background: #fff;
    cursor: pointer;
}

.dropzone.dragover {
    border-color: var(--drive);
    background: #fdeaea;
}

.dropzone.has-file {
    border-style: solid;
    background: #f6f3ea;
}

.dropzone-copy {
    display: flex;
    align-items: baseline;
    gap: 8px 12px;
    min-width: 0;
    flex: 1;
}

.dropzone strong {
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropzone span {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.dropzone-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.dropzone .btn {
    padding: 8px 14px;
    min-width: 0;
    font-size: 13px;
    border-radius: 10px;
}

#fileInput { display: none; }

.status-banner {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
}

.driver-card {
    display: flex;
    gap: 18px;
    max-width: 460px;
    margin-top: 20px;
    padding: 18px 20px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8f8fa, #ececef);
    border: 1px solid #e1e1e6;
    box-shadow: 0 10px 28px rgba(16, 33, 31, 0.08);
}

.driver-card-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 92px;
    flex-shrink: 0;
}

.eu-flag {
    width: 92px;
    height: 62px;
    display: block;
}

.driver-photo {
    width: 92px;
    height: 108px;
    border-radius: 8px;
    background: #d8dbe0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.driver-photo svg {
    width: 78px;
    height: 96px;
    display: block;
    opacity: 0.85;
}

.driver-card-body {
    min-width: 0;
    padding-top: 2px;
}

.driver-card-title {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.driver-card-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}

.driver-card-meta {
    font-size: 13px;
    line-height: 1.45;
    color: #333;
    font-variant-numeric: tabular-nums;
}

.status-banner.auth {
    background: #eef5ff;
    border-color: #2980b9;
}

.status-banner.auth.mismatch {
    background: #fff4e5;
    border-color: #e67e22;
}

.status-banner.auth.match {
    background: #eaf7ea;
    border-color: var(--ok);
}

.mono-lg {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 20px;
    letter-spacing: 0.04em;
}

.banner-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.banner-head .label { margin-bottom: 0; }

.banner-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mismatch-flag,
.match-flag,
.overflow-flag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.mismatch-flag { background: #e67e22; }
.match-flag { background: var(--ok); }
.overflow-flag { background: var(--danger); }

.mismatch-note,
.overflow-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid;
    font-weight: 400;
}

.mismatch-note {
    background: #fff4e5;
    border-color: #e67e22;
    color: #7a3e00;
}

.overflow-note {
    background: #fdeaea;
    border-color: var(--danger);
    color: #7a0000;
}

.callout-title { font-weight: 700; margin-bottom: 4px; }
.callout-body { color: #444; line-height: 1.45; }

.status-banner .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    margin-bottom: 4px;
}

.status-banner .value {
    font-size: 18px;
    font-weight: 700;
}

.status-banner .meta { margin-top: 6px; color: #333; }

.overview {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
}

.card .k { color: #555; font-size: 12px; }
.card .v { font-weight: 700; margin-top: 4px; word-break: break-word; }

h2 {
    font-family: var(--display);
    margin: 0 0 8px;
    letter-spacing: -0.03em;
}

h3 {
    margin: 24px 0 10px;
    font-family: var(--display);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

th, td {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

th {
    background: #fbf8f1;
    font-size: 12px;
    color: var(--muted);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: #fcfbf8; }
tbody tr.active-row td {
    background: #e8f4ea;
    font-weight: 700;
}
tbody tr.active-row td:first-child {
    box-shadow: inset 4px 0 0 var(--ok);
}

.table-wrap {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.table-wrap table {
    border: 0;
    border-radius: 0;
}

.locks-table th,
.locks-table td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
}

.locks-table td:first-child,
.locks-table td:last-child {
    white-space: normal;
}

.th-activity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.th-activity img {
    width: 13px;
    height: 13px;
}

.country-acts {
    width: 100%;
    table-layout: fixed;
}

.country-acts th,
.country-acts td {
    padding: 8px 8px;
}

.country-acts col.country-name {
    width: 20%;
}

.country-acts col.country-km {
    width: 12%;
}

.country-acts col.country-act {
    width: 17%;
}

.country-acts th:nth-child(n+3),
.country-acts td:nth-child(n+3) {
    text-align: center;
    white-space: nowrap;
}

.country-acts th:nth-child(n+3) {
    white-space: normal;
    overflow: hidden;
}

.country-acts th:nth-child(n+3) .th-activity {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
}

.nation-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(16, 33, 31, 0.12);
    flex-shrink: 0;
}

.violations-table td:nth-child(3) {
    white-space: normal;
    min-width: 180px;
}

tbody tr.v-row-high td { background: #fffaf9; }
tbody tr.v-row-medium td { background: #fffdf8; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
}

.badge.active {
    background: var(--ok);
    color: #fff;
}

.badge.closed {
    background: var(--cream-2);
    color: #555;
}

.badge.v-high { background: var(--danger); color: #fff; }
.badge.v-medium { background: var(--warn); color: #fff; }
.badge.v-low { background: var(--cream-2); color: #333; }

.stack-cards {
    display: grid;
    gap: 10px;
}

.stack-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px 18px 14px;
    box-shadow: 0 10px 28px rgba(16, 33, 31, 0.04);
}

.stack-card.is-active {
    border-color: var(--ok);
}

.stack-card.v-high {
    border-color: #e7b4b0;
    background: #fffaf9;
}

.stack-card.v-medium {
    border-color: #ead4a8;
    background: #fffdf8;
}

.stack-card.v-low {
    background: #fff;
}

.stack-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.stack-card h5 {
    margin: 0;
    font-family: var(--display);
    font-size: 16px;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.stack-card p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.stack-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.stack-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 16px;
    margin: 0;
}

.stack-meta div { min-width: 0; }

.stack-meta-wide {
    grid-column: 1 / -1;
}

.stack-meta dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.stack-meta dd {
    margin: 4px 0 0;
    font-weight: 700;
    word-break: break-word;
}

.violations-561 {
    margin-top: 48px;
    padding-top: 8px;
}

.violations-561 h3 {
    margin-top: 0;
}

.violations-laws {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
}

.violations-law {
    margin-top: 28px;
}

.violations-law > h4 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: -0.03em;
}

.violations-law > .violations-note {
    margin-bottom: 12px;
}

.violations-block > h5 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-size: 15px;
}

.violations-note {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    max-width: 78ch;
}

.violations-block {
    margin-top: 18px;
}

.violations-block h4 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-size: 16px;
}

.violations-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.v-stat {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
}

.v-stat b {
    display: block;
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: -0.04em;
}

.v-stat span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.v-stat.high b { color: var(--danger); }
.v-stat.medium b { color: var(--warn); }
.v-stat.low b { color: var(--muted); }

.mono { font-family: "IBM Plex Mono", Consolas, monospace; }
.empty { color: var(--ok); font-weight: 700; }

.activity-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 8px 0 12px;
    font-size: 13px;
}

.activity-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swatch {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

.legend-ico,
.chart-tip-ico {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #333;
}

.legend-ico svg,
.legend-ico img,
.chart-tip-ico svg,
.chart-tip-ico img,
.activity-seg svg,
.activity-seg img {
    width: 13px;
    height: 13px;
    display: block;
}

.activity-seg {
    position: absolute;
    top: 18px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #333;
    container-type: inline-size;
}

.activity-seg svg,
.activity-seg img { display: none; flex-shrink: 0; }

@container (min-width: 16px) {
    .activity-seg svg,
    .activity-seg img { display: block; }
}

.activity-seg:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
    z-index: 2;
}

#chartTip {
    position: fixed;
    z-index: 80;
    min-width: 168px;
    max-width: 260px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    pointer-events: none;
    font-size: 13px;
    line-height: 1.35;
}

#chartTip[hidden] { display: none; }

.chart-tip-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.chart-tip-name { font-weight: 700; }
.chart-tip-time {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 14px;
    margin-top: 2px;
}
.chart-tip-dur { color: #555; margin-top: 2px; }

.activity-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
}

.activity-slot-totals {
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.activity-slot-totals .slot-name { font-weight: 700; margin-bottom: 6px; }

.activity-track-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    overflow: visible;
}

.activity-track-row .activity-chart {
    flex: 1;
    min-width: 0;
}

.slot-tag {
    width: 42px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: #666;
    padding-bottom: 10px;
}

.activity-chart {
    position: relative;
    overflow: visible;
}

.activity-hours {
    position: relative;
    z-index: 3;
    height: 16px;
    font-size: 11px;
    color: #666;
    pointer-events: none;
}

.activity-hours .hour-mark {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    line-height: 1;
}

.activity-hours .hour-mark::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 1px;
    height: 40px;
    background: rgba(18, 33, 31, 0.16);
    pointer-events: none;
}

.activity-hours .hour-mark:first-child {
    transform: none;
}

.activity-hours .hour-mark:first-child::after {
    left: 0;
}

.activity-hours .hour-mark:last-child {
    transform: translateX(-100%);
}

.activity-hours .hour-mark:last-child::after {
    left: auto;
    right: 0;
}

.activity-day {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    margin-bottom: 0;
    padding: 12px 0 16px;
    overflow: visible;
}

.activity-day + .activity-day {
    border-top: 1px solid var(--line);
}

.activity-track-block {
    margin-bottom: 0;
}

.activity-track-block + .activity-track-block {
    margin-top: 22px;
}

.activity-details {
    margin: 4px 0 0 48px;
}

.activity-details .activity-detail-list {
    display: none;
}

.activity-details.is-open .activity-detail-list {
    display: grid;
}

.details-toggle {
    display: block;
    width: fit-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #777;
    font: inherit;
    font-size: 12px;
    line-height: 1.25;
    cursor: pointer;
    text-align: left;
}

.details-toggle:hover {
    color: #444;
}

.activity-details.is-open .details-closed {
    display: none;
}

.activity-details:not(.is-open) .details-open {
    display: none;
}

.activity-detail-list {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr) auto auto;
    column-gap: 12px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    font-size: 13px;
}

.activity-detail-list li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
}

.activity-detail-list li:first-child {
    border-top: 0;
}

.activity-detail-list .legend-ico {
    margin-right: 10px;
}

.activity-detail-name {
    font-weight: 700;
}

.activity-detail-time {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #444;
}

.activity-detail-dur {
    color: #555;
    font-weight: 700;
    white-space: nowrap;
}

.activity-detail-list li.is-sum-label {
    background: #f7f6f2;
}

.activity-detail-sum-label {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 700;
    color: #777;
}

.activity-detail-list li.is-sum {
    background: #f7f6f2;
}

.activity-detail-crosses {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
}

.activity-detail-cross {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 3px 9px 3px 6px;
    border-radius: 999px;
    background: #f4f1ea;
    font-size: 12px;
    color: #444;
}

.activity-detail-cross-time {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.activity-detail-cross-route {
    font-weight: 700;
    white-space: nowrap;
}

.activity-detail-flags {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 22px;
}

.activity-detail-flags .flag-img {
    width: 16px;
    height: 12px;
}

.activity-detail-flag-line {
    width: 2px;
    height: 14px;
    background: #143834;
    flex-shrink: 0;
}

.activity-date {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.25;
}

.activity-date .dow {
    color: #777;
    white-space: nowrap;
}

.activity-tracks {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: visible;
}

.activity-track {
    position: relative;
    height: 36px;
    background: linear-gradient(#ececec, #ececec) no-repeat bottom;
    background-size: 100% 18px;
    margin: 1px 0;
    overflow: visible;
}

.activity-track.empty-track {
    background: repeating-linear-gradient(90deg, #e6e6e6, #e6e6e6 10px, #dcdcdc 10px, #dcdcdc 20px) no-repeat bottom;
    background-size: 100% 18px;
}

.border-cross {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 5;
    pointer-events: none;
}

.border-cross .border-line {
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: #143834;
    box-shadow: 0 0 0 1px #fbf8f1;
    pointer-events: auto;
    cursor: default;
}

.border-cross .border-flag {
    position: absolute;
    top: auto;
    bottom: 21px;
    pointer-events: auto;
    display: flex;
    line-height: 0;
    cursor: default;
}

.border-cross .border-flag.is-left { right: 3px; }
.border-cross .border-flag.is-right { left: 3px; }

.border-cross .flag-img {
    width: 20px;
    height: 15px;
}

.legend-border {
    width: 22px;
    height: 18px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
}

.legend-border-line {
    width: 2px;
    height: 18px;
    background: #143834;
    border-radius: 1px;
}

.activity-note {
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #444;
    font-size: 13px;
}

.activity-range {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    margin: 8px 0 12px;
}

.activity-range-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.activity-range-period { font-weight: 700; }
.activity-range-meta { color: #555; font-size: 13px; margin-top: 2px; }

.activity-range-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.activity-range button.range-preset {
    min-width: 0;
    padding: 0.45em 0.9em;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    background: var(--teal-700);
    color: var(--cream);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.activity-range button.range-preset.active {
    background: var(--teal-950);
}

.cal-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}

.cal-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cal-switch-ui {
    width: 28px;
    height: 16px;
    border-radius: 99px;
    background: var(--line);
    position: relative;
    flex-shrink: 0;
}

.cal-switch-ui::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.15s ease;
}

.cal-switch input:checked + .cal-switch-ui {
    background: var(--teal-700);
}

.cal-switch input:checked + .cal-switch-ui::after {
    left: 14px;
}

.cal-switch input:disabled + .cal-switch-ui {
    opacity: 0.45;
}

.activity-cal {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px;
}

.cal-month {
    flex: 1 1 240px;
    min-width: 220px;
    max-width: 320px;
}

.cal-month-name {
    font-weight: 700;
    margin-bottom: 8px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-dow {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    font-weight: 700;
}

.cal-pad {
    min-height: 32px;
}

.cal-day {
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.cal-day.on {
    background: var(--teal-700);
    border-color: var(--teal-700);
    color: var(--cream);
}

.cal-day.no-data {
    opacity: 0.72;
}

.cal-day.muted {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    background: transparent;
    color: #b7b1a6;
    cursor: default;
    font-weight: 400;
}

button.cal-day:hover {
    border-color: var(--teal-500);
}

a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.home-body {
    min-height: 100vh;
    background: #fff;
    color: var(--ink);
    display: flex;
    flex-direction: column;
}

.home-wrap {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

.home-center { text-align: center; }

.home-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #eeeae3;
    color: var(--ink);
}

.home-top .app-brand { color: var(--ink); }
.home-top .app-brand span { color: var(--muted); }

.home-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.home-nav a:not(.btn) {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

.home-nav a:not(.btn):hover {
    color: var(--teal-700);
}

.home-top .btn {
    padding: 9px 16px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

.home-hero {
    background: #fff;
    color: var(--ink);
    padding: 56px 0 28px;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.home-hero h1 {
    margin: 14px 0 0;
    font-family: var(--display);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.home-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.home-lead {
    margin: 16px 0 0;
    max-width: 46ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
}

.home-lead b { color: var(--ink); font-weight: 700; }

.home-cta {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.home-cta .btn {
    min-width: 0;
    padding: 12px 18px;
}

.home-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.home-checks li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.home-checks li::before {
    content: "✓";
    color: var(--teal-700);
    font-weight: 700;
}

.home-preview {
    background: #f6f4ee;
    border: 1px solid #ece7dc;
    border-radius: 22px;
    padding: 12px;
    box-shadow: 0 24px 50px rgba(16, 33, 31, 0.08);
}

.home-preview-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 12px;
}

.home-preview-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8cfc0;
}

.home-preview-bar i:first-child { background: #e0a06a; }
.home-preview-bar i:nth-child(2) { background: #e8d56a; }
.home-preview-bar i:nth-child(3) { background: #7eb3e8; }

.home-preview-bar em,
.home-preview-url {
    margin-left: 8px;
    font-style: normal;
    font-size: 12px;
    color: var(--muted);
}

.home-preview-url {
    flex: 1;
    margin: 0 4px 0 10px;
    background: #fff;
    border-radius: 999px;
    padding: 5px 12px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-preview-body {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
}

.home-card-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-card-preview .home-app-file {
    margin: 0;
}

.home-card-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 8px;
    align-items: stretch;
}

.home-card-preview .driver-card {
    margin: 0;
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    min-width: 0;
}

.home-card-preview .driver-card-main {
    flex: 1;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 10px;
    row-gap: 6px;
    min-height: 0;
    align-items: start;
}

.home-card-preview .driver-card-left {
    display: contents;
}

.home-card-preview .driver-card-left .eu-flag {
    grid-column: 1;
    grid-row: 1;
    width: 52px;
    height: auto;
    display: block;
    border-radius: 4px;
}

.home-card-preview .driver-photo {
    grid-column: 1;
    grid-row: 2;
    width: 52px;
    height: 64px;
    border-radius: 6px;
    align-self: start;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    box-sizing: border-box;
}

.home-card-preview .driver-photo svg {
    width: 42px;
    height: 54px;
}

.home-card-preview .driver-card-details {
    display: contents;
}

.home-card-preview .driver-card-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 13px;
    margin: 0;
    line-height: 1.2;
}

.home-card-preview .driver-card-detail-body {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-self: stretch;
}

.home-card-preview .driver-card-person {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    padding-top: 4px;
}

.home-card-preview .driver-card-surname,
.home-card-preview .driver-card-first {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.home-card-preview .driver-card-facts {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: 6px 10px;
    margin: 0;
}

.home-card-preview .driver-card-facts > div {
    min-width: 0;
}

.home-card-preview .driver-card-facts-wide {
    grid-column: 1 / -1;
}

.home-card-preview .driver-card-facts dt {
    margin: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6a6f76;
}

.home-card-preview .driver-card-facts dd {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.home-card-preview .driver-card-id {
    padding-top: 5px;
    margin-top: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.home-card-acts {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
    min-width: 0;
    height: 100%;
}

.home-card-acts .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 8px 5px 9px;
    border-left-width: 3px;
}

.home-card-acts .act-drive { border-left-color: var(--drive); }
.home-card-acts .act-rest { border-left-color: var(--rest); }
.home-card-acts .act-work { border-left-color: var(--work); }
.home-card-acts .act-avail { border-left-color: var(--avail); }

.home-card-acts .k {
    font-size: 10px;
}

.home-card-acts .v {
    margin-top: 2px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-card-vio {
    grid-column: 1 / -1;
    padding: 8px 10px;
    border: 1px solid #ead4a8;
    border-radius: 12px;
    background: #fffdf8;
    min-width: 0;
}

.home-card-vio .k {
    font-size: 10px;
    color: #555;
}

.home-card-vio-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 3px;
}

.home-card-vio-title strong {
    font-size: 12px;
    letter-spacing: -0.02em;
}

.home-card-vio-title .badge {
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 7px;
}

.home-card-vio-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.home-app-file {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.home-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.home-preview-head strong { font-size: 14px; }
.home-preview-head span { color: var(--muted); font-size: 12px; }

.home-preview-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
    font-size: 11px;
    color: var(--muted);
}

.home-preview-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.home-preview-legend b {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.home-preview-track {
    display: flex;
    height: 22px;
    overflow: hidden;
    border-radius: 6px;
    background: #ececec;
}

.home-preview-track i { display: block; height: 100%; }

.home-preview-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.home-cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-preview-cards div {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
}

.home-preview-cards span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.home-preview-cards strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

.home-upload-preview {
    max-width: 720px;
    margin: 40px auto 0;
    text-align: left;
}

.home-preview-caption {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.home-drop {
    cursor: default;
}

.home-drop .dropzone-copy {
    flex-wrap: wrap;
}

.home-drop strong,
.home-drop span {
    white-space: normal;
}

.home-split {
    display: grid;
    grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.15fr);
    gap: 40px 48px;
    align-items: center;
    text-align: left;
}

.home-split-flip .home-preview {
    order: -1;
}

.home-act-slot + .home-act-slot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.home-act-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.home-act-tag {
    width: 42px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: #666;
    padding-bottom: 6px;
}

.home-act-chart {
    position: relative;
    flex: 1;
    min-width: 0;
}

.home-act-hours {
    position: relative;
    z-index: 2;
    height: 18px;
    font-size: 10px;
    color: #666;
}

.home-act-hours span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    line-height: 1;
}

.home-act-hours span::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 50%;
    width: 1px;
    height: 26px;
    background: rgba(18, 33, 31, 0.16);
}

.home-act-hours span:first-child {
    transform: none;
}

.home-act-hours span:first-child::after {
    left: 0;
}

.home-act-hours span:last-child {
    transform: translateX(-100%);
}

.home-act-hours span:last-child::after {
    left: auto;
    right: 0;
}

.home-act-toggle {
    margin: 4px 0 0 50px;
    font-size: 12px;
    color: #777;
    line-height: 1.25;
}

.home-flag {
    width: 16px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
}

.home-country-table td:first-child {
    white-space: nowrap;
}

.home-country-table tbody tr:last-child td {
    font-weight: 700;
}

.home-split-copy h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(26px, 3.4vw, 36px);
    letter-spacing: -0.04em;
    max-width: none;
}

.home-split-copy .home-note {
    margin: 10px 0 0;
    max-width: none;
}

.home-ticks {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.home-ticks li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: 14.5px;
    line-height: 1.45;
}

.home-ticks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--teal-700);
    font-weight: 700;
}

.home-vio-meta {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
}

.home-vio-wrap {
    overflow-x: auto;
}

.home-vio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.home-vio-table th {
    text-align: left;
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    padding: 0 8px 8px 0;
}

.home-vio-table td {
    padding: 9px 8px 9px 0;
    border-top: 1px solid var(--cream-2);
    vertical-align: middle;
}

.home-vio-table th:nth-child(n+2),
.home-vio-table td:nth-child(n+2) {
    white-space: nowrap;
}

.home-vio-table th:last-child,
.home-vio-table td:last-child {
    text-align: right;
    padding-right: 0;
}

.home-beans {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-beans li {
    margin: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid #eeeae3;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.home-bean-more {
    background: #fff !important;
    border-style: dashed !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
}

.home-main {
    padding: 0 0 72px;
}

.home-band-light {
    padding: 64px 0;
    background: #fbf8f1;
    border-top: 1px solid #eeeae3;
    border-bottom: 1px solid #eeeae3;
    scroll-margin-top: 76px;
}

.home-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.home-steps li { min-width: 0; }

.home-steps span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--teal-900);
    color: #fff;
    font-family: var(--display);
    font-weight: 700;
}

.home-steps strong {
    display: block;
    font-size: 16px;
}

.home-steps p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.home-section {
    padding-top: 72px;
    scroll-margin-top: 76px;
}

.home-section.home-center h2,
.home-band-light h2,
.home-band h2 {
    margin: 0 auto;
    font-family: var(--display);
    font-size: clamp(26px, 3.4vw, 36px);
    letter-spacing: -0.04em;
    max-width: 18em;
}

.home-note {
    margin: 10px auto 28px;
    max-width: 54ch;
    color: var(--muted);
    font-size: 15px;
}

.home-sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    text-align: left;
}

.home-source {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(16, 33, 31, 0.04);
}

.home-source h3 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: -0.03em;
}

.home-band {
    margin-top: 64px;
    text-align: center;
    background: var(--teal-950);
    color: var(--cream);
    border-radius: 28px;
    padding: 56px 28px;
}

.home-pill-on-dark {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(243, 239, 228, 0.18);
    color: #c9d7d4;
}

.home-band h2 {
    margin-top: 14px;
    color: #fff;
}

.home-band-price {
    margin: 12px 0 22px;
    color: #c9d7d4;
    font-size: 16px;
}

.home-band-price span { color: #8fa3a0; }

.home-band-btn {
    background: #fff;
    color: var(--teal-900);
}

.home-band-btn:hover {
    background: var(--cream);
}

.home-foot {
    border-top: 1px solid #eeeae3;
    padding: 28px 0;
    color: var(--muted);
    font-size: 13px;
}

.home-foot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.home-foot .app-brand { color: var(--ink); }
.home-foot .app-brand span { color: var(--muted); }

.home-foot-links {
    display: flex;
    gap: 16px;
}

.home-foot-links a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

.legal-main {
    width: min(760px, calc(100% - 48px));
    margin: 0 auto;
    padding: 36px 0 56px;
}

.legal-doc {
    background: var(--paper);
    border: 1px solid #eeeae3;
    border-radius: 24px;
    padding: 32px 34px 36px;
}

.legal-doc h1 {
    margin: 6px 0 8px;
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 36px);
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.legal-updated {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 14px;
}

.legal-doc h2 {
    margin: 28px 0 10px;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: -0.02em;
}

.legal-doc p,
.legal-doc li {
    color: #2a3a38;
    font-size: 15px;
    line-height: 1.55;
}

.legal-doc p {
    margin: 0 0 12px;
}

.legal-doc ul {
    margin: 0 0 12px;
    padding-left: 1.2em;
}

.legal-doc li {
    margin: 0 0 6px;
}

.legal-doc a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 900px) {
    .home-hero-grid,
    .home-steps,
    .home-split {
        grid-template-columns: 1fr;
    }

    .home-split-flip .home-preview {
        order: 0;
    }
}

@media (max-width: 720px) {
    .app-user .who { display: none; }
    .app-page {
        grid-template-columns: 1fr;
    }
    .app-side {
        height: auto;
        position: sticky;
        z-index: 20;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        padding: 12px 14px;
    }
    .app-side-nav {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .app-side-nav a {
        white-space: nowrap;
    }
    .app-side-foot {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: auto;
    }
    .app-side-actions {
        padding: 0;
    }
    .app-side-quiet {
        white-space: nowrap;
        font-size: 12px;
    }
    .app-side-user {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: auto;
        padding: 0;
        border: 0;
    }
    .app-side-user .who {
        margin: 0;
    }
    .app-side-user .btn.ghost {
        width: auto;
    }
    .app-main { padding: 18px 14px 48px; }
    .app-filebar {
        margin: -18px -14px 16px;
        padding: 12px 14px 14px;
    }
    .app-page #naruszenia {
        min-height: calc(100dvh - 14rem);
    }
    .home-wrap { width: calc(100% - 32px); }
    .home-hero { padding: 28px 0 12px; }
    .home-card-row {
        grid-template-columns: minmax(0, 1fr) 124px;
    }
    .home-card-preview .driver-card {
        max-width: none;
    }
    .home-top {
        flex-wrap: wrap;
        padding: 12px 14px;
        row-gap: 8px;
    }
    .home-nav {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .home-nav a[href*="postup"],
    .home-nav a[href*="odczyt"] {
        display: none;
    }
    .home-sources,
    .plan-pick,
    .violations-stats,
    .home-split {
        grid-template-columns: 1fr;
    }
    .dropzone,
    .home-drop {
        flex-wrap: wrap;
    }
    .home-foot-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .legal-main {
        width: calc(100% - 32px);
        padding: 24px 0 40px;
    }
    .legal-doc {
        padding: 24px 20px 28px;
        border-radius: 18px;
    }
}