html, body {
    background: #f4f7f8;
    color: #172026;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.75rem 4rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

a, .btn-link {
    color: #0f6b78;
}

.btn {
    border-radius: 6px;
    font-weight: 650;
}

.btn-primary {
    background-color: #0f6b78;
    border-color: #0f6b78;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0b5560;
    border-color: #0b5560;
}

.btn-outline-primary {
    color: #0f6b78;
    border-color: #0f6b78;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #0f6b78;
    border-color: #0f6b78;
}

.btn-outline-danger {
    color: #8a2020;
    border-color: #d79c9c;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #8a2020;
    border-color: #8a2020;
    color: #ffffff;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(15, 107, 120, 0.22);
}

.content {
    padding-top: 1.6rem;
}

h1:focus {
    outline: none;
}

h1 {
    font-size: 2rem;
    font-weight: 750;
    margin: 0;
}

h2 {
    font-size: 1.05rem;
    font-weight: 750;
    margin: 0;
}

.top-row {
    color: #53626b;
    font-weight: 650;
}

.page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.page-header p {
    color: #5f6f78;
    margin: 0.35rem 0 0;
}

.header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.metric-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.metric {
    background: #ffffff;
    border: 1px solid #dfe7ea;
    border-radius: 8px;
    padding: 1rem;
}

.metric span,
.summary span {
    color: #687780;
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.metric strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1.2;
    margin-top: 0.3rem;
}

.panel {
    background: #ffffff;
    border: 1px solid #dfe7ea;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.panel.narrow {
    max-width: 680px;
}

.panel-title {
    align-items: center;
    border-bottom: 1px solid #edf2f4;
    display: flex;
    justify-content: space-between;
    margin: -0.1rem 0 1rem;
    padding-bottom: 0.8rem;
}

.muted {
    color: #687780;
    margin: 0;
}

.table-wrap {
    overflow-x: auto;
}

.table {
    margin: 0;
}

.table th {
    color: #5a6972;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.status {
    background: #e9f5f6;
    border: 1px solid #c6e3e8;
    border-radius: 999px;
    color: #0b5560;
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
}

.status-warning {
    background: #fff7e6;
    border-color: #f0d195;
    color: #6b4b11;
}

.status-error {
    background: #fdecec;
    border-color: #efb4b4;
    color: #8a2020;
}

.input-row,
.toolbar {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.input-row .form-control,
.toolbar .form-control {
    min-width: 0;
}

.tariff-form {
    align-items: end;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.price-field {
    min-width: 0;
}

.price-field small {
    color: #66747d;
    display: block;
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.35rem;
    min-height: 2em;
}

.payment-principle-steps {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.payment-principle-step {
    align-items: flex-start;
    background: #f5f8f9;
    border: 1px solid #d9e2e5;
    border-radius: 8px;
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem;
}

.payment-principle-step > span {
    align-items: center;
    background: #173f46;
    border-radius: 50%;
    color: white;
    display: inline-flex;
    flex: 0 0 1.7rem;
    font-size: 0.8rem;
    font-weight: 700;
    height: 1.7rem;
    justify-content: center;
}

.payment-principle-step strong {
    display: block;
    line-height: 1.3;
}

.payment-principle-step p {
    color: #53626b;
    font-size: 0.84rem;
    line-height: 1.45;
    margin: 0.3rem 0 0;
}

.tariff-rule-summary {
    background: #eef7f8;
    border-left: 4px solid #287986;
    border-radius: 6px;
    margin: 1rem 0;
    padding: 1rem 1.1rem;
}

.tariff-rule-summary h3,
.tariff-preview h3,
.tariff-settings-title {
    font-size: 1rem;
    margin: 0 0 0.65rem;
}

.tariff-rule-summary ol {
    margin: 0;
    padding-left: 1.25rem;
}

.tariff-rule-summary li + li {
    margin-top: 0.35rem;
}

.tariff-rule-summary p {
    margin: 0.7rem 0 0;
}

.tariff-warning {
    margin-bottom: 1rem;
}

.tariff-settings-title {
    margin-top: 1.25rem;
}

.tariff-preview {
    margin-top: 1.25rem;
}

.tariff-preview .table-wrap {
    border: 1px solid #d9e2e5;
    border-radius: 7px;
}

.tariff-preview .table {
    margin-bottom: 0;
}

.free-period-card {
    background: #e8f6ee;
    border: 2px solid #70ad87;
    border-radius: 8px;
    margin: 1rem 0;
    padding: 1rem;
    text-align: center;
}

.free-period-card > span {
    color: #365f45;
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.free-period-card > strong {
    color: #174f2c;
    display: block;
    font-size: clamp(1.65rem, 5vw, 2.35rem);
    line-height: 1.1;
    margin-top: 0.35rem;
}

.free-period-card p {
    color: #284f36;
    margin: 0.75rem auto 0;
    max-width: 38rem;
}

.archive-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
}

.archive-tools {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.6fr) auto;
}

.archive-actions {
    display: flex;
    gap: 0.75rem;
}

.active-filter {
    align-items: center;
    background: #eef7f8;
    border: 1px solid #c6e3e8;
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0.8rem 0.9rem;
}

.active-filter span {
    color: #53626b;
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
}

.active-filter strong {
    display: block;
    margin-top: 0.15rem;
}

.archive-meta,
.timeline-heading span,
.payment-history small {
    color: #687780;
    display: block;
    font-size: 0.82rem;
}

.selected-row td {
    background: #eef7f8;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover td {
    background: #f4fafb;
}

.archive-open {
    color: #0f6b78;
    font-weight: 750;
}

.empty-state {
    background: #f6f9fa;
    border: 1px dashed #cbd8dd;
    border-radius: 8px;
    padding: 1rem;
}

.empty-state p {
    color: #687780;
    margin: 0.25rem 0 0;
}

.archive-summary,
.archive-details {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.archive-summary div,
.archive-details div,
.payment-history div {
    background: #f6f9fa;
    border: 1px solid #e2eaed;
    border-radius: 8px;
    padding: 0.85rem;
}

.archive-summary span,
.archive-details span,
.payment-history span {
    color: #687780;
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
}

.archive-summary strong,
.archive-details strong,
.payment-history strong {
    display: block;
    margin-top: 0.25rem;
}

.timeline-list {
    display: grid;
    gap: 0.75rem;
}

.timeline-item {
    border: 1px solid #edf2f4;
    border-radius: 8px;
    padding: 0.9rem;
}

.timeline-heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.payment-history {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.75rem;
}

.payment-attempts {
    border-top: 1px solid #edf2f4;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
}

.payment-attempts summary {
    color: #0f6b78;
    cursor: pointer;
    font-weight: 750;
}

.payment-paid {
    border-color: #b9dfc9 !important;
}

.payment-pending {
    opacity: 0.72;
}

.payment-failed {
    border-color: #efb4b4 !important;
}

.stack {
    display: grid;
    gap: 0.75rem;
}

.button-row {
    display: flex;
    gap: 0.75rem;
}

.tariff-note {
    margin-top: 0.75rem;
}

.barrier-demo {
    display: grid;
    gap: 1.1rem;
    margin-bottom: 1.35rem;
}

.barrier-scene {
    background:
        radial-gradient(circle at 89% 16%, rgba(255, 255, 255, 0.5) 0 5rem, transparent 5.1rem),
        linear-gradient(#9dd8f0 0 45%, #a9d47a 45% 100%);
    border: 3px solid #172026;
    border-radius: 8px;
    box-shadow: 0 16px 0 rgba(23, 32, 38, 0.12), 0 26px 40px rgba(23, 32, 38, 0.14);
    min-height: 470px;
    overflow: hidden;
    position: relative;
}

.barrier-scene::after {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    content: "";
    inset: 0.55rem;
    pointer-events: none;
    position: absolute;
    z-index: 40;
}

.cartoon-sky,
.harbor-strip,
.cartoon-road,
.parking-island {
    inset: 0;
    position: absolute;
}

.sun {
    background: #ffdf5a;
    border: 3px solid #172026;
    border-radius: 999px;
    box-shadow: 0 0 0 0.55rem rgba(255, 223, 90, 0.18);
    height: 4.6rem;
    position: absolute;
    right: 2.2rem;
    top: 1.8rem;
    width: 4.6rem;
}

.cloud {
    background: #ffffff;
    border: 3px solid #172026;
    border-radius: 999px;
    box-shadow: 0 5px 0 rgba(23, 32, 38, 0.12);
    height: 2rem;
    position: absolute;
    width: 6.4rem;
}

.cloud::before,
.cloud::after {
    background: #ffffff;
    border: 3px solid #172026;
    border-radius: 999px;
    content: "";
    height: 2.5rem;
    position: absolute;
    top: -1.25rem;
    width: 2.8rem;
}

.cloud::before {
    left: 0.8rem;
}

.cloud::after {
    right: 0.9rem;
}

.cloud-one {
    left: 5%;
    top: 2.2rem;
}

.cloud-two {
    left: 44%;
    top: 1.3rem;
    transform: scale(0.75);
}

.harbor-strip {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 36px, transparent 36px 74px),
        #63a9c6;
    border-top: 3px solid #172026;
    height: 4.8rem;
    top: 8.8rem;
}

.warehouse {
    background: #d85947;
    border: 3px solid #172026;
    bottom: 1.15rem;
    height: 3rem;
    left: 4%;
    position: absolute;
    width: 8rem;
}

.warehouse::before {
    border-bottom: 2.4rem solid #f4b34e;
    border-left: 4rem solid transparent;
    border-right: 4rem solid transparent;
    content: "";
    left: -3px;
    position: absolute;
    top: -2.4rem;
}

.ship {
    background: #f8fbfc;
    border: 3px solid #172026;
    border-radius: 0 0 34px 34px;
    bottom: 0.6rem;
    height: 2rem;
    position: absolute;
    right: 10%;
    width: 9rem;
}

.ship::before {
    background: #0f6b78;
    border: 3px solid #172026;
    content: "";
    height: 2.5rem;
    left: 2rem;
    position: absolute;
    top: -2.7rem;
    width: 3.5rem;
}

.cartoon-road {
    background: linear-gradient(#49565f, #3f4b52);
    border-top: 4px solid #172026;
    bottom: 0;
    height: 47%;
    top: auto;
}

.cartoon-road::before {
    background: linear-gradient(#626f77, #55636b);
    border: 3px solid #172026;
    border-left: 0;
    border-right: 0;
    content: "";
    height: 48%;
    left: 0;
    position: absolute;
    top: 25%;
    width: 100%;
}

.road-line {
    background: repeating-linear-gradient(90deg, #ffe36f 0 46px, transparent 46px 84px);
    border-radius: 999px;
    height: 0.5rem;
    left: 4%;
    position: absolute;
    right: 4%;
    top: 49%;
}

.lane-label {
    background: #ffffff;
    border: 3px solid #172026;
    border-radius: 8px;
    color: #172026;
    font-size: 1.15rem;
    font-weight: 900;
    padding: 0.25rem 0.6rem;
    position: absolute;
    top: 13.6rem;
    z-index: 8;
}

.scene-dashboard {
    background: rgba(255, 255, 255, 0.88);
    border: 3px solid #172026;
    border-radius: 8px;
    box-shadow: 0 8px 0 rgba(23, 32, 38, 0.12);
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    left: 1rem;
    padding: 0.45rem;
    position: absolute;
    top: 1rem;
    width: min(34rem, calc(100% - 7rem));
    z-index: 24;
}

.scene-dashboard div {
    background: #f8fbfc;
    border: 1px solid #d6e2e6;
    border-radius: 6px;
    min-width: 0;
    padding: 0.48rem 0.6rem;
}

.scene-dashboard span {
    color: #687780;
    display: block;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.scene-dashboard strong {
    color: #172026;
    display: block;
    font-size: 0.98rem;
    margin-top: 0.08rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scene-dashboard .is-good {
    background: #e8f6ee;
    border-color: #a9d8ba;
}

.scene-dashboard .is-warning {
    background: #fff3cf;
    border-color: #e7c569;
}

.entry-sign {
    left: 4%;
}

.exit-sign {
    right: 4%;
}

.barrier-station {
    bottom: 8.2rem;
    height: 7.7rem;
    position: absolute;
    width: 9.5rem;
    z-index: 9;
}

.entry-station {
    left: 14%;
}

.exit-station {
    right: 14%;
}

.camera-unit {
    background: #f8fbfc;
    border: 3px solid #172026;
    border-radius: 10px;
    box-shadow: 0 5px 0 rgba(23, 32, 38, 0.18);
    height: 2.9rem;
    left: 2.1rem;
    position: absolute;
    top: 0;
    width: 4rem;
    z-index: 3;
}

.camera-unit::after {
    background: #172026;
    content: "";
    height: 2.35rem;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 0.45rem;
}

.camera-lens {
    background: radial-gradient(circle at 35% 35%, #d8eef2 0 18%, #157f6f 19% 45%, #172026 46% 100%);
    border: 3px solid #172026;
    border-radius: 999px;
    height: 1.55rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.55rem;
}

.camera-unit.scan .camera-lens {
    animation: cameraFlash 850ms ease;
}

.camera-unit.scan::before {
    background: rgba(248, 217, 92, 0.45);
    clip-path: polygon(0 42%, 100% 0, 100% 100%);
    content: "";
    height: 4.6rem;
    left: 2.1rem;
    position: absolute;
    top: 0.8rem;
    width: 9rem;
    z-index: -1;
}

.barrier-post {
    background: #f8fbfc;
    border: 3px solid #172026;
    border-radius: 8px 8px 0 0;
    bottom: 0;
    height: 4.1rem;
    left: 0;
    position: absolute;
    width: 1.9rem;
}

.barrier-arm {
    background: repeating-linear-gradient(90deg, #f2f5f6 0 24px, #c73636 24px 44px);
    border: 3px solid #172026;
    border-radius: 999px;
    bottom: 3rem;
    box-shadow: 0 4px 0 rgba(23, 32, 38, 0.2);
    height: 0.9rem;
    left: 1.15rem;
    position: absolute;
    transform: rotate(0deg);
    transform-origin: left center;
    transition: transform 380ms cubic-bezier(.2, .9, .25, 1.35);
    width: 10rem;
    z-index: 4;
}

.barrier-arm span {
    background: #172026;
    border-radius: 999px;
    display: block;
    height: 1.45rem;
    left: -0.45rem;
    position: absolute;
    top: -0.42rem;
    width: 1.45rem;
}

.barrier-arm.open {
    transform: rotate(-68deg);
}

.barrier-arm.denied {
    animation: barrierShake 430ms ease;
}

.parking-island {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.58) 1px, transparent 1px),
        #dfe9ed;
    background-size: 2.2rem 100%;
    border: 4px solid #172026;
    border-radius: 6px;
    bottom: 12.1rem;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 9.15rem;
    left: 50%;
    padding: 0.85rem;
    transform: translateX(-50%);
    width: min(44rem, 56%);
    z-index: 4;
}

.parking-bay {
    background: #eef5f6;
    border: 3px dashed rgba(255, 255, 255, 0.96);
    border-radius: 8px;
    color: #0f6b78;
    display: grid;
    font-size: 2.2rem;
    font-weight: 950;
    place-items: center;
}

.parking-bay.occupied {
    background: linear-gradient(#fff8dc, #ffeaa1);
    border-color: #ffcf3d;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.parked-car {
    border: 3px solid #172026;
    border-radius: 18px 18px 10px 10px;
    box-shadow: 0 8px 0 rgba(23, 32, 38, 0.16);
    height: 3.5rem;
    position: absolute;
    top: 15.6rem;
    width: 6.2rem;
    z-index: 6;
}

.parked-car::before,
.parked-car::after {
    background: #172026;
    border-radius: 999px;
    bottom: -0.52rem;
    content: "";
    height: 0.9rem;
    position: absolute;
    width: 1.1rem;
}

.parked-car::before {
    left: 0.8rem;
}

.parked-car::after {
    right: 0.8rem;
}

.parked-one {
    background: #f4b34e;
    left: 26%;
}

.parked-two {
    background: #c45da7;
    right: 26%;
}

.mini-window {
    background: #d8eef2;
    border: 2px solid #172026;
    border-radius: 8px 8px 3px 3px;
    height: 1.1rem;
    left: 50%;
    position: absolute;
    top: 0.55rem;
    transform: translateX(-50%);
    width: 2.9rem;
}

.demo-car {
    background: linear-gradient(#2ab78d, #1d906e);
    border: 4px solid #172026;
    border-radius: 24px 24px 14px 14px;
    box-shadow: 0 14px 0 rgba(23, 32, 38, 0.22), inset 0 4px 0 rgba(255, 255, 255, 0.2);
    display: grid;
    height: 5.8rem;
    left: 50%;
    place-items: center;
    position: absolute;
    top: 70%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: left 640ms cubic-bezier(.22, .82, .18, 1), top 640ms cubic-bezier(.22, .82, .18, 1), transform 640ms cubic-bezier(.22, .82, .18, 1);
    width: 10.2rem;
    z-index: 12;
}

.car-roof {
    background: #1c7d65;
    border: 3px solid #172026;
    border-radius: 20px 20px 8px 8px;
    height: 2.55rem;
    left: 2rem;
    position: absolute;
    top: -1.1rem;
    width: 6.1rem;
}

.wheel {
    background: #172026;
    border: 3px solid #ffffff;
    border-radius: 999px;
    bottom: -0.85rem;
    height: 1.55rem;
    position: absolute;
    width: 1.55rem;
}

.wheel-left {
    left: 1.2rem;
}

.wheel-right {
    right: 1.2rem;
}

.demo-car.at-entry {
    left: 5%;
    top: 73%;
    transform: translate(-50%, -50%) rotate(0deg);
}

.demo-car.in-bay {
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%) rotate(-2deg);
}

.demo-car.at-exit {
    left: 82%;
    top: 73%;
    transform: translate(-50%, -50%) rotate(0deg);
}

.demo-car.past-exit {
    left: 108%;
    top: 73%;
    transform: translate(-50%, -50%) rotate(0deg);
}

.car-window {
    background: #d8eef2;
    border: 3px solid #172026;
    border-radius: 8px 8px 4px 4px;
    height: 1.45rem;
    position: absolute;
    top: 0.8rem;
    width: 2.2rem;
}

.car-window.front {
    left: 2.1rem;
}

.car-window.back {
    right: 2.1rem;
}

.car-light {
    background: #ffe27a;
    border: 2px solid #172026;
    border-radius: 999px;
    height: 0.8rem;
    position: absolute;
    top: 2.9rem;
    width: 0.8rem;
}

.car-light.left {
    left: 0.85rem;
}

.car-light.right {
    right: 0.85rem;
}

.car-plate {
    background: #fff7d6;
    border: 3px solid #172026;
    border-radius: 6px;
    bottom: 0.55rem;
    color: #172026;
    font-weight: 950;
    min-width: 6.1rem;
    padding: 0.18rem 0.35rem;
    position: absolute;
    text-align: center;
}

.scene-parked .demo-car,
.scene-paid .demo-car {
    animation: carBounce 900ms ease;
}

.scene-exited .demo-car {
    animation: carExit 850ms ease;
}

.speech-bubble {
    background: #ffffff;
    border: 3px solid #172026;
    border-radius: 14px;
    box-shadow: 0 8px 0 rgba(23, 32, 38, 0.14);
    left: 59%;
    max-width: min(24rem, 39%);
    padding: 0.78rem 0.95rem;
    position: absolute;
    top: 5.35rem;
    transform: translateX(-50%);
    z-index: 20;
}

.speech-bubble::after {
    background: #ffffff;
    border-bottom: 3px solid #172026;
    border-right: 3px solid #172026;
    bottom: -0.72rem;
    content: "";
    height: 1.2rem;
    left: 2.3rem;
    position: absolute;
    transform: rotate(45deg);
    width: 1.2rem;
}

.speech-bubble.success {
    background: #e8f6ee;
}

.speech-bubble.warning {
    background: #fff7e6;
    animation: bubblePop 460ms ease;
}

.speech-bubble strong,
.speech-bubble span {
    display: block;
}

.speech-bubble strong {
    font-size: 1.02rem;
}

.speech-bubble span {
    color: #53626b;
    font-size: 0.94rem;
    margin-top: 0.12rem;
}

@keyframes cameraFlash {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    45% {
        transform: translate(-50%, -50%) scale(1.22);
    }
}

@keyframes barrierShake {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(4deg);
    }

    55% {
        transform: rotate(-4deg);
    }

    78% {
        transform: rotate(2deg);
    }
}

@keyframes carBounce {
    0%, 100% {
        margin-top: 0;
    }

    45% {
        margin-top: -0.45rem;
    }
}

@keyframes carExit {
    0% {
        margin-top: 0;
    }

    35% {
        margin-top: -0.35rem;
    }

    100% {
        margin-top: 0;
    }
}

@keyframes bubblePop {
    0% {
        transform: translateX(-50%) scale(0.92);
    }

    70% {
        transform: translateX(-50%) scale(1.04);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

.flow-steps {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: relative;
}

.flow-step {
    background: linear-gradient(#ffffff, #f9fbfc);
    border: 1px solid #d8e4e8;
    border-radius: 8px;
    box-shadow: 0 7px 18px rgba(23, 32, 38, 0.06);
    min-width: 0;
    padding: 0.95rem;
    position: relative;
}

.flow-step.active {
    border-color: #8dcfa5;
    box-shadow: inset 4px 0 0 #2f8d54, 0 10px 20px rgba(47, 141, 84, 0.1);
}

.flow-step span {
    align-items: center;
    background: #eef5f6;
    border-radius: 999px;
    color: #53626b;
    display: inline-flex;
    font-weight: 850;
    height: 1.7rem;
    justify-content: center;
    margin-bottom: 0.65rem;
    width: 1.7rem;
}

.flow-step.active span {
    background: #e8f6ee;
    color: #245c39;
}

.flow-step strong,
.flow-step small {
    display: block;
}

.flow-step small {
    color: #687780;
    margin-top: 0.25rem;
}

.demo-control-panel {
    border-color: #d3e1e6;
    box-shadow: 0 10px 28px rgba(23, 32, 38, 0.06);
    display: grid;
    gap: 1.05rem;
}

.demo-control-header {
    align-items: center;
    border-bottom: 1px solid #edf2f4;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: -0.15rem 0 0;
    padding-bottom: 0.95rem;
}

.demo-control-header p {
    color: #687780;
    font-weight: 650;
    margin: 0.25rem 0 0;
}

.demo-controls {
    align-items: end;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.42fr) minmax(160px, 0.42fr);
}

.simulator-run-panel {
    margin-top: 1.25rem;
}

.simulator-controls {
    align-items: end;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(110px, 0.35fr) minmax(140px, 0.4fr) minmax(160px, 0.45fr) minmax(220px, 1fr);
}

.milesight-controls {
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.45fr) minmax(150px, 0.45fr) minmax(160px, 0.42fr);
}

.raw-payload {
    background: #111827;
    border-radius: 8px;
    color: #e5eef5;
    margin: 0.75rem 0 0;
    overflow-x: auto;
    padding: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.demo-price {
    background: linear-gradient(#f7fbfc, #eef5f6);
    border: 1px solid #d7e5e9;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}

.demo-price span,
.demo-status-grid span {
    color: #687780;
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
}

.demo-price strong,
.demo-status-grid strong {
    display: block;
    margin-top: 0.2rem;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.demo-command {
    align-items: center;
    box-shadow: 0 5px 0 rgba(23, 32, 38, 0.12);
    display: inline-flex;
    gap: 0.5rem;
    justify-content: center;
    min-height: 2.45rem;
}

.demo-command span {
    align-items: center;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 900;
    height: 1.45rem;
    justify-content: center;
    width: 1.45rem;
}

.demo-command.btn-outline-primary span {
    background: #eef7f8;
    border-color: #c6e3e8;
}

.demo-command:disabled {
    box-shadow: none;
}

.demo-status-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-status-grid div {
    background: #f6f9fa;
    border: 1px solid #e2eaed;
    border-radius: 8px;
    padding: 0.8rem;
}

.notice {
    border-radius: 8px;
    font-weight: 650;
    margin-top: 1rem;
    padding: 0.8rem 0.9rem;
}

.notice-success {
    background: #e8f6ee;
    border: 1px solid #b9dfc9;
    color: #245c39;
}

.notice-warning {
    background: #fff7e6;
    border: 1px solid #f0d195;
    color: #6b4b11;
}

.summary {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1rem 0;
}

.summary div {
    background: #f6f9fa;
    border: 1px solid #e2eaed;
    border-radius: 8px;
    padding: 0.85rem;
}

.summary strong {
    display: block;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.two-column {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-list {
    display: grid;
    gap: 0.7rem;
}

.event-row {
    background: #f8fafb;
    border: 1px solid #edf2f4;
    border-radius: 8px;
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem;
}

.event-row span {
    color: #34464f;
}

.event-row small {
    color: #71818a;
}

.tab-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab-button {
    background: #ffffff;
    border: 1px solid #dfe7ea;
    border-radius: 8px;
    color: #53626b;
    font-weight: 750;
    padding: 0.65rem 1rem;
}

.tab-button.active {
    background: #0f6b78;
    border-color: #0f6b78;
    color: #ffffff;
}

.pay-mode-tabs {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.data-table td {
    vertical-align: top;
}

.raw-row td {
    background: #f8fafb;
    border-top: 0;
    padding-top: 0;
}

.raw-row details {
    color: #53626b;
}

.raw-row pre {
    background: #172026;
    border-radius: 8px;
    color: #d9e8ec;
    margin: 0.6rem 0 0;
    max-height: 220px;
    overflow: auto;
    padding: 0.8rem;
    white-space: pre-wrap;
}

.public-shell {
    min-height: 100vh;
}

.pay-page {
    background: #f4f7f8;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.payment-language-selector {
    display: flex;
    gap: 0.45rem;
    justify-content: center;
    margin: 0 auto 0.7rem;
    max-width: 760px;
}

.payment-language-option {
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd7da;
    border-radius: 999px;
    color: #31444b;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    text-decoration: none;
}

.payment-language-option:hover,
.payment-language-option:focus-visible {
    border-color: #287986;
    color: #174f58;
}

.payment-language-option.active {
    background: #173f46;
    border-color: #173f46;
    color: #ffffff;
}

.language-flag-svg {
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 2px;
    display: block;
    flex: 0 0 auto;
    height: 14px;
    width: 20px;
}

.pay-hero {
    background: #0f6b78;
    border-radius: 8px;
    color: #ffffff;
    margin: 0 auto;
    max-width: 760px;
    padding: 2rem;
}

.pay-hero h1 {
    color: #ffffff;
    font-size: 2.2rem;
    margin-top: 0.25rem;
}

.pay-hero p {
    color: #d8eef2;
    font-size: 1.05rem;
    margin: 0.5rem 0 0;
}

.eyebrow {
    color: #bfe7ed;
    display: block;
    font-size: 0.82rem;
    font-weight: 750;
    text-transform: uppercase;
}

.pay-panel {
    background: #ffffff;
    border: 1px solid #dfe7ea;
    border-radius: 8px;
    margin: -1rem auto 0;
    max-width: 680px;
    padding: 1.25rem;
    position: relative;
}

.plate-entry {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.plate-input {
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.payment-card {
    border-top: 1px solid #edf2f4;
    margin-top: 1rem;
    padding-top: 1rem;
}

.payment-card-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.payment-card-header span,
.payment-lines span {
    color: #687780;
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.payment-card-header strong {
    display: block;
    font-size: 1.6rem;
    margin-top: 0.15rem;
}

.payment-lines {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0;
}

.payment-lines div {
    background: #f6f9fa;
    border: 1px solid #e2eaed;
    border-radius: 8px;
    padding: 0.85rem;
}

.payment-lines strong {
    display: block;
    margin-top: 0.25rem;
}

.qr-panel {
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.qr-code {
    background: #ffffff;
    border: 1px solid #dfe7ea;
    border-radius: 8px;
    padding: 1rem;
    width: min(100%, 360px);
}

.qr-code svg {
    display: block;
    height: auto;
    width: 100%;
}

.qr-url {
    background: #f6f9fa;
    border: 1px solid #e2eaed;
    border-radius: 8px;
    padding: 0.85rem;
    text-align: center;
    width: 100%;
}

.qr-url span {
    color: #687780;
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.qr-url strong {
    display: block;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

.checkout-qr {
    border-top: 1px solid #edf2f4;
    display: grid;
    gap: 1rem;
    justify-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
}

.success-panel {
    display: grid;
    gap: 1rem;
    text-align: center;
}

.success-page {
    align-content: center;
    display: grid;
}

.success-hero {
    padding: 1.25rem 1.5rem 2.2rem;
}

.success-hero h1 {
    font-size: 1.7rem;
}

.success-panel h2 {
    font-size: 1.45rem;
}

.success-panel p {
    color: #53626b;
    font-size: 1rem;
    margin: 0;
}

.success-mark {
    align-items: center;
    background: #e8f6ee;
    border: 2px solid #b9dfc9;
    border-radius: 999px;
    color: #245c39;
    display: inline-flex;
    font-size: 2.4rem;
    font-weight: 800;
    height: 5rem;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    width: 5rem;
}

.success-steps {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
}

.success-steps div {
    background: #f6f9fa;
    border: 1px solid #e2eaed;
    border-radius: 8px;
    padding: 0.85rem;
}

.success-steps span {
    color: #687780;
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
}

.success-steps strong {
    display: block;
    margin-top: 0.25rem;
}

.success-note {
    background: #e8f6ee;
    border: 1px solid #b9dfc9;
    border-radius: 8px;
    color: #245c39;
    font-weight: 750;
    padding: 0.75rem;
}

.json-preview {
    background: #172026;
    border-radius: 8px;
    color: #d9e8ec;
    margin-top: 1rem;
    overflow: hidden;
}

.json-preview span {
    background: #23343d;
    color: #ffffff;
    display: block;
    font-size: 0.82rem;
    font-weight: 750;
    padding: 0.65rem 0.8rem;
}

.json-preview pre {
    margin: 0;
    overflow-x: auto;
    padding: 0.85rem;
    white-space: pre-wrap;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@media (max-width: 900px) {
    .metric-grid,
    .two-column,
    .tariff-form,
    .payment-principle-steps,
    .archive-grid,
    .archive-tools,
    .archive-summary,
    .archive-details,
    .payment-history,
    .success-steps,
    .flow-steps,
    .demo-controls,
    .demo-status-grid,
    .simulator-controls {
        grid-template-columns: 1fr;
    }

    .barrier-scene {
        min-height: 540px;
    }

    .scene-dashboard {
        grid-template-columns: 1fr;
        width: min(18rem, calc(100% - 2rem));
    }

    .scene-dashboard div {
        padding: 0.4rem 0.55rem;
    }

    .harbor-strip {
        top: 8.3rem;
    }

    .parking-island {
        bottom: 12rem;
        width: 72%;
    }

    .demo-car.at-entry {
        left: 10%;
        top: 75%;
    }

    .demo-car.at-exit {
        left: 82%;
        top: 75%;
    }

    .demo-car.past-exit {
        left: 112%;
        top: 75%;
    }

    .entry-station {
        left: 5%;
    }

    .exit-station {
        right: 5%;
    }

    .parked-one,
    .parked-two {
        display: none;
    }

    .speech-bubble {
        left: auto;
        max-width: min(19rem, 48%);
        right: 1rem;
        top: 1rem;
        transform: none;
    }

    .speech-bubble::after {
        left: auto;
        right: 2.3rem;
    }

    .page-header,
    .toolbar,
    .input-row {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar .btn,
    .input-row .btn,
    .plate-entry .btn,
    .button-row .btn,
    .demo-actions .btn {
        width: 100%;
    }

    .button-row,
    .archive-actions,
    .active-filter,
    .tab-bar,
    .pay-mode-tabs,
    .demo-control-header,
    .demo-actions {
        flex-direction: column;
    }

    .plate-entry,
    .payment-lines,
    .pay-mode-tabs {
        grid-template-columns: 1fr;
    }

    .demo-control-header {
        align-items: stretch;
    }
}

@media (max-width: 520px) {
    .barrier-scene {
        min-height: 500px;
    }

    .scene-dashboard {
        display: none;
    }

    .speech-bubble {
        left: 1rem;
        max-width: none;
        right: 1rem;
        top: 1rem;
    }

    .speech-bubble::after {
        display: none;
    }

    .parking-island {
        bottom: 12.6rem;
        grid-template-columns: 1fr;
        height: 8.5rem;
        left: 50%;
        padding: 0.6rem;
        width: 38%;
    }

    .bay-left,
    .bay-right {
        display: none;
    }

    .demo-car {
        height: 4.8rem;
        width: 8.6rem;
    }

    .car-roof {
        left: 1.7rem;
        width: 5rem;
    }

    .car-window.front {
        left: 1.6rem;
    }

    .car-window.back {
        right: 1.6rem;
    }

    .success-page {
        min-height: 100svh;
        padding: 0.75rem;
    }

    .success-hero {
        padding: 0.9rem 1rem 1.8rem;
    }

    .success-hero h1 {
        font-size: 1.35rem;
    }

    .success-hero .eyebrow {
        font-size: 0.72rem;
    }

    .success-panel {
        gap: 0.65rem;
        margin-top: -1.05rem;
        padding: 0.85rem;
    }

    .success-panel h2 {
        font-size: 1.15rem;
    }

    .success-panel p {
        font-size: 0.92rem;
        line-height: 1.35;
    }

    .success-mark {
        font-size: 1.7rem;
        height: 3.35rem;
        width: 3.35rem;
    }

    .success-steps {
        gap: 0.5rem;
    }

    .success-steps div {
        padding: 0.65rem;
    }

    .success-steps span {
        font-size: 0.7rem;
    }

    .success-note {
        padding: 0.65rem;
    }
}

/* Premium visual simulator */
.barrier-scene {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 214, 117, 0.34), transparent 13rem),
        radial-gradient(circle at 83% 21%, rgba(81, 196, 183, 0.24), transparent 12rem),
        linear-gradient(180deg, #102334 0 39%, #20495a 39% 48%, #1c303a 48% 100%);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 54px rgba(12, 20, 27, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    min-height: 560px;
}

.barrier-scene::before {
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, 0.09) 18% 18.25%, transparent 18.25% 50%, rgba(255, 255, 255, 0.09) 50% 50.25%, transparent 50.25% 82%, rgba(255, 255, 255, 0.09) 82% 82.25%, transparent 82.25%),
        linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 35;
}

.barrier-scene::after {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    box-shadow: inset 0 0 35px rgba(255, 255, 255, 0.08);
    inset: 0.65rem;
    z-index: 60;
}

.scene-ambient {
    inset: 0;
    overflow: hidden;
    position: absolute;
    z-index: 0;
}

.skyline-glow {
    background:
        linear-gradient(90deg, transparent 0 6%, rgba(255, 255, 255, 0.15) 6% 8%, transparent 8% 15%, rgba(255, 255, 255, 0.1) 15% 18%, transparent 18% 29%, rgba(255, 255, 255, 0.16) 29% 32%, transparent 32% 100%),
        radial-gradient(circle at 43% 80%, rgba(250, 185, 90, 0.35), transparent 14rem);
    height: 14rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.harbor-water {
    animation: waterDrift 9s linear infinite;
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 32px),
        linear-gradient(180deg, rgba(96, 181, 197, 0.78), rgba(24, 89, 112, 0.9));
    height: 8.7rem;
    left: -5%;
    position: absolute;
    right: -5%;
    top: 6.9rem;
}

.scan-grid {
    background-image:
        linear-gradient(rgba(124, 226, 215, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 226, 215, 0.08) 1px, transparent 1px);
    background-size: 2.8rem 2.8rem;
    inset: 0;
    opacity: 0.55;
    position: absolute;
}

.harbor-strip {
    background: transparent;
    border-top: 0;
    height: 9.2rem;
    top: 6.2rem;
    z-index: 1;
}

.warehouse {
    background: linear-gradient(180deg, #f36b54, #a63a35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px 6px 2px 2px;
    bottom: 1rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    height: 3.5rem;
    left: 4.5%;
    width: 9rem;
}

.warehouse::before {
    border-bottom-color: #f2bd5d;
    border-left-width: 4.5rem;
    border-right-width: 4.5rem;
    top: -2.4rem;
}

.warehouse::after {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 18px);
    content: "";
    inset: 0.75rem 0.8rem;
    position: absolute;
}

.ship {
    background: linear-gradient(180deg, #fbfdff, #cbdce4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 0 40px 40px;
    bottom: 0.8rem;
    box-shadow: 0 13px 28px rgba(0, 0, 0, 0.28);
    height: 2.4rem;
    right: 8%;
    width: 11rem;
}

.ship::before {
    background: linear-gradient(180deg, #1f8a91, #0e5862);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 5px 5px 0 0;
    height: 3rem;
    left: 2.2rem;
    top: -3.05rem;
    width: 4.4rem;
}

.harbor-crane {
    border-left: 0.32rem solid rgba(255, 196, 82, 0.92);
    border-top: 0.28rem solid rgba(255, 196, 82, 0.92);
    bottom: 1.8rem;
    height: 5.4rem;
    position: absolute;
    width: 7.2rem;
}

.harbor-crane::after {
    background: rgba(255, 196, 82, 0.92);
    content: "";
    height: 3.4rem;
    left: 4.2rem;
    position: absolute;
    top: 0;
    transform: rotate(-28deg);
    transform-origin: top center;
    width: 0.18rem;
}

.crane-one {
    left: 25%;
}

.crane-two {
    right: 26%;
    transform: scale(0.82);
}

.cartoon-road {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 16px),
        radial-gradient(circle at 72% 70%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, #25323a, #111a20);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    bottom: 0;
    height: 58%;
    z-index: 2;
}

.cartoon-road::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
        linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 18%, rgba(255, 255, 255, 0.03) 82%, rgba(255, 255, 255, 0.14));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
    border-right: 0;
    height: 34%;
    top: 35%;
}

.road-line {
    background: repeating-linear-gradient(90deg, rgba(255, 216, 92, 0.95) 0 52px, transparent 52px 96px);
    box-shadow: 0 0 22px rgba(255, 216, 92, 0.3);
    height: 0.32rem;
    top: 52%;
}

.lane-arrow {
    border-bottom: 0.9rem solid transparent;
    border-left: 1.4rem solid rgba(255, 255, 255, 0.2);
    border-top: 0.9rem solid transparent;
    height: 0;
    position: absolute;
    top: 45%;
    width: 0;
}

.entry-arrow {
    left: 20%;
}

.exit-arrow {
    right: 20%;
    transform: rotate(180deg);
}

.sensor-loop {
    border: 2px solid rgba(91, 225, 197, 0.22);
    border-radius: 50%;
    height: 4rem;
    position: absolute;
    top: 36%;
    width: 11rem;
}

.sensor-loop.active {
    animation: sensorPulse 950ms ease-in-out infinite;
    border-color: rgba(105, 239, 211, 0.86);
    box-shadow: 0 0 34px rgba(105, 239, 211, 0.34);
}

.entry-loop {
    left: 10%;
}

.exit-loop {
    right: 10%;
}

.lane-label {
    background: rgba(255, 255, 255, 0.94);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
    color: #15222a;
    top: 14.2rem;
    z-index: 18;
}

.scene-dashboard {
    backdrop-filter: blur(18px);
    background: rgba(11, 22, 30, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
    padding: 0.55rem;
    top: 1rem;
    width: min(35.5rem, calc(100% - 2rem));
}

.scene-dashboard div {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.scene-dashboard span {
    color: rgba(235, 246, 248, 0.72);
}

.scene-dashboard strong {
    color: #ffffff;
}

.scene-dashboard .is-good {
    background: rgba(38, 179, 112, 0.22);
    border-color: rgba(102, 231, 155, 0.44);
}

.scene-dashboard .is-warning {
    background: rgba(248, 182, 70, 0.25);
    border-color: rgba(255, 211, 100, 0.52);
}

.barrier-station {
    bottom: 8.1rem;
    height: 9rem;
    width: 12rem;
    z-index: 22;
}

.entry-station {
    left: 12%;
}

.exit-station {
    right: 12%;
}

.camera-unit {
    background: linear-gradient(180deg, #f5fbff, #bfcdd7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    height: 2.55rem;
    top: 0.15rem;
    width: 4.7rem;
}

.camera-unit::after {
    background: linear-gradient(#9aa9b2, #26333b);
    height: 2.55rem;
    width: 0.42rem;
}

.camera-unit::before {
    background: rgba(111, 235, 215, 0.24);
    filter: blur(0.2px);
    height: 6rem;
    left: 3.2rem;
    opacity: 0;
    top: 1.1rem;
    transform-origin: left top;
    transition: opacity 220ms ease;
    width: 13rem;
}

.exit-station .camera-unit::before {
    clip-path: polygon(100% 45%, 0 0, 0 100%);
    left: auto;
    right: 3.2rem;
}

.camera-unit.scan::before {
    animation: scanSweep 1.1s ease-in-out infinite;
    opacity: 1;
}

.camera-lens {
    background: radial-gradient(circle at 34% 34%, #effcff 0 14%, #6ee7d8 15% 36%, #13353a 37% 100%);
    border: 0;
    box-shadow: 0 0 18px rgba(105, 239, 211, 0.48), inset 0 0 0 2px rgba(8, 19, 25, 0.85);
}

.camera-hood {
    background: rgba(12, 23, 30, 0.82);
    border-radius: 4px;
    height: 0.42rem;
    left: 0.55rem;
    position: absolute;
    right: 0.55rem;
    top: -0.3rem;
}

.barrier-post {
    background: linear-gradient(180deg, #f9fbfc, #b6c4cb 74%, #7c8d96);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 8px 8px 2px 2px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    height: 4.9rem;
    left: 0.2rem;
    width: 2.35rem;
}

.exit-station .barrier-post {
    left: auto;
    right: 0.2rem;
}

.barrier-base {
    background: linear-gradient(180deg, #394650, #141d23);
    border-radius: 8px 8px 3px 3px;
    bottom: -0.45rem;
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.28);
    height: 1.15rem;
    left: -0.35rem;
    position: absolute;
    width: 3.45rem;
}

.exit-station .barrier-base {
    left: auto;
    right: -0.35rem;
}

.barrier-arm {
    background:
        repeating-linear-gradient(90deg, #f7fbfc 0 26px, #e74b45 26px 48px),
        linear-gradient(180deg, #ffffff, #d7e0e5);
    border: 0;
    border-radius: 999px;
    bottom: 3.85rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.72);
    height: 0.86rem;
    left: 2rem;
    transform-origin: 0.55rem center;
    transition: transform 680ms cubic-bezier(.16, .9, .2, 1.22), box-shadow 320ms ease;
    width: 12.4rem;
}

.exit-station .barrier-arm {
    left: auto;
    right: 2rem;
    transform-origin: calc(100% - 0.55rem) center;
}

.barrier-arm.open {
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.2), 0 0 24px rgba(102, 231, 155, 0.22);
    transform: rotate(-74deg);
}

.exit-station .barrier-arm.open {
    transform: rotate(74deg);
}

.barrier-arm span {
    background: radial-gradient(circle at 35% 35%, #f8fbfc, #596a72 52%, #111a20 53%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.36);
    height: 1.75rem;
    left: -0.42rem;
    top: -0.45rem;
    width: 1.75rem;
}

.exit-station .barrier-arm span {
    left: auto;
    right: -0.42rem;
}

.gate-open .barrier-arm span {
    animation: barrierServo 680ms ease;
}

.signal-light {
    background: #e44c43;
    border: 2px solid rgba(18, 29, 36, 0.86);
    border-radius: 999px;
    bottom: 5.1rem;
    box-shadow: 0 0 16px rgba(228, 76, 67, 0.46);
    height: 0.9rem;
    left: 0.92rem;
    position: absolute;
    width: 0.9rem;
}

.exit-station .signal-light {
    left: auto;
    right: 0.92rem;
}

.signal-light.green {
    background: #52e38f;
    box-shadow: 0 0 18px rgba(82, 227, 143, 0.68);
}

.signal-light.amber {
    background: #f7bd45;
    box-shadow: 0 0 18px rgba(247, 189, 69, 0.68);
}

.barrier-arm.denied {
    animation: barrierShake 430ms ease;
}

.parking-island {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, #33434b, #202b31);
    background-size: 2.25rem 100%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    bottom: 13.1rem;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    height: 9.6rem;
    width: min(45rem, 57%);
    z-index: 10;
}

.parking-bay {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
}

.parking-bay.occupied {
    background: linear-gradient(180deg, rgba(255, 222, 108, 0.26), rgba(52, 226, 153, 0.18));
    border-color: rgba(255, 222, 108, 0.7);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16), 0 0 28px rgba(255, 222, 108, 0.18);
}

.pay-kiosk {
    background: linear-gradient(180deg, #f9fcff, #96a6af);
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 8px;
    bottom: 13.4rem;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
    height: 5.8rem;
    left: calc(50% + 23rem);
    position: absolute;
    width: 3rem;
    z-index: 18;
}

.kiosk-screen {
    background: linear-gradient(180deg, #132c36, #071116);
    border-radius: 5px;
    height: 1.65rem;
    left: 0.45rem;
    position: absolute;
    right: 0.45rem;
    top: 0.55rem;
}

.kiosk-contactless {
    border: 2px solid rgba(21, 44, 54, 0.7);
    border-left-color: transparent;
    border-radius: 999px;
    height: 1.5rem;
    left: 0.78rem;
    position: absolute;
    top: 2.75rem;
    width: 1.5rem;
}

.pay-kiosk.is-paid .kiosk-screen {
    background: linear-gradient(180deg, #5ff09b, #1f9759);
    box-shadow: 0 0 20px rgba(95, 240, 155, 0.58);
}

.parked-car {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 18px 18px 8px 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    top: 16.5rem;
}

.parked-one {
    background: linear-gradient(180deg, #f4bd57, #bf6f30);
}

.parked-two {
    background: linear-gradient(180deg, #d97fc6, #87356f);
}

.mini-window {
    background: linear-gradient(180deg, #e9fbff, #79bfd0);
    border: 0;
}

.demo-car {
    background: linear-gradient(180deg, #4be0a5, #148663);
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 24px 24px 12px 12px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34), inset 0 3px 0 rgba(255, 255, 255, 0.36);
    height: 5.9rem;
    transition: left 880ms cubic-bezier(.2, .82, .18, 1), top 880ms cubic-bezier(.2, .82, .18, 1), transform 880ms cubic-bezier(.2, .82, .18, 1);
    width: 10.5rem;
    z-index: 28;
}

.car-shadow {
    background: rgba(0, 0, 0, 0.34);
    border-radius: 50%;
    bottom: -1.15rem;
    filter: blur(6px);
    height: 1.3rem;
    left: 0.8rem;
    position: absolute;
    right: 0.8rem;
    z-index: -1;
}

.car-roof {
    background: linear-gradient(180deg, #236f60, #105143);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

.car-window {
    background: linear-gradient(180deg, #e7fbff, #7fc1ce);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(19, 38, 46, 0.26);
}

.headlight-beam {
    background: linear-gradient(90deg, rgba(255, 235, 145, 0.42), transparent);
    clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 62%);
    height: 2rem;
    opacity: 0.7;
    position: absolute;
    top: 2.65rem;
    width: 5.4rem;
    z-index: -1;
}

.headlight-beam.left {
    left: 9.7rem;
}

.headlight-beam.right {
    left: 9.7rem;
    top: 3.35rem;
}

.demo-car.at-exit .headlight-beam,
.demo-car.past-exit .headlight-beam {
    left: auto;
    right: 9.7rem;
    transform: rotate(180deg);
}

.car-light {
    border: 0;
    box-shadow: 0 0 12px rgba(255, 231, 132, 0.66);
}

.car-plate {
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(23, 32, 38, 0.24);
}

.wheel {
    animation: wheelSpin 780ms linear infinite;
    border-color: rgba(255, 255, 255, 0.86);
}

.demo-car.in-bay .wheel,
.demo-car.at-entry .wheel,
.demo-car.at-exit .wheel {
    animation-play-state: paused;
}

.demo-car.at-entry {
    left: 7%;
    top: 78%;
}

.demo-car.entering {
    left: 31%;
    top: 75%;
    transform: translate(-50%, -50%) rotate(0deg);
}

.demo-car.in-bay {
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%) rotate(-2deg) scale(0.96);
}

.demo-car.at-exit {
    left: 84%;
    top: 78%;
}

.demo-car.past-exit {
    left: 113%;
    top: 78%;
}

.scene-entering .demo-car,
.scene-exited .demo-car {
    animation: carBounce 900ms ease;
}

.speech-bubble {
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    left: 62%;
    top: 5.65rem;
}

.speech-bubble::after {
    border: 0;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);
}

.speech-bubble.success {
    background: rgba(232, 248, 238, 0.94);
}

.speech-bubble.warning {
    background: rgba(255, 244, 216, 0.96);
}

.flow-step {
    box-shadow: 0 12px 26px rgba(23, 32, 38, 0.08);
}

@keyframes waterDrift {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(3.6rem);
    }
}

@keyframes sensorPulse {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes scanSweep {
    0%, 100% {
        filter: brightness(0.9);
        transform: skewY(-4deg);
    }

    50% {
        filter: brightness(1.25);
        transform: skewY(5deg);
    }
}

@keyframes barrierServo {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes wheelSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .pay-kiosk {
        left: auto;
        right: 30%;
    }

    .parking-island {
        width: 62%;
    }
}

@media (max-width: 900px) {
    .barrier-scene {
        min-height: 610px;
    }

    .scene-dashboard {
        grid-template-columns: 1fr;
        width: min(18rem, calc(100% - 2rem));
    }

    .harbor-strip {
        top: 7.6rem;
    }

    .lane-label {
        top: 15.2rem;
    }

    .parking-island {
        bottom: 14.6rem;
        width: 74%;
    }

    .pay-kiosk {
        bottom: 14.9rem;
        right: 12%;
    }

    .entry-station {
        left: 5%;
    }

    .exit-station {
        right: 5%;
    }

    .barrier-arm {
        width: 9rem;
    }

    .sensor-loop {
        width: 8rem;
    }

    .demo-car.at-entry {
        left: 11%;
        top: 79%;
    }

    .demo-car.entering {
        left: 34%;
        top: 77%;
    }

    .demo-car.at-exit {
        left: 83%;
        top: 79%;
    }

    .demo-car.past-exit {
        left: 116%;
        top: 79%;
    }

    .speech-bubble {
        left: auto;
        right: 1rem;
        top: 1rem;
        transform: none;
    }
}

@media (max-width: 520px) {
    .barrier-scene {
        min-height: 560px;
    }

    .scene-dashboard {
        display: none;
    }

    .harbor-water {
        top: 6rem;
    }

    .harbor-strip {
        top: 5.6rem;
    }

    .ship,
    .harbor-crane,
    .warehouse,
    .parked-car,
    .lane-arrow {
        display: none;
    }

    .lane-label {
        font-size: 0.95rem;
        top: 9.8rem;
    }

    .parking-island {
        bottom: 15.9rem;
        grid-template-columns: 1fr;
        height: 8.6rem;
        width: 42%;
    }

    .pay-kiosk {
        bottom: 16.2rem;
        right: 8%;
        transform: scale(0.82);
        transform-origin: bottom right;
    }

    .barrier-station {
        bottom: 8rem;
        transform: scale(0.74);
        transform-origin: bottom center;
    }

    .entry-station {
        left: -1%;
    }

    .exit-station {
        right: -1%;
    }

    .sensor-loop {
        height: 3rem;
        top: 43%;
        width: 6.4rem;
    }

    .entry-loop {
        left: 4%;
    }

    .exit-loop {
        right: 4%;
    }

    .demo-car {
        height: 4.9rem;
        width: 8.5rem;
    }

    .demo-car.at-entry {
        left: 14%;
        top: 82%;
    }

    .demo-car.entering {
        left: 35%;
        top: 81%;
    }

    .demo-car.in-bay {
        left: 49%;
        top: 55%;
    }

    .demo-car.at-exit {
        left: 82%;
        top: 82%;
    }

    .demo-car.past-exit {
        left: 119%;
        top: 82%;
    }

    .headlight-beam {
        display: none;
    }

    .speech-bubble {
        left: 1rem;
        max-width: none;
        right: 1rem;
        top: 1rem;
    }
}