* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #05080d;
    color: #dce6f2;
    font-family: Arial, Helvetica, sans-serif;
}

.topbar {
    height: 78px;
    border-bottom: 1px solid #1c2a38;
    display: flex;
    align-items: center;
    padding: 0 28px;
    background: #070b10;
}

.brand {
    width: 280px;
}

.brand-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}

.brand-subtitle {
    color: #75869a;
    font-size: 12px;
    margin-top: 4px;
}

.nav {
    display: flex;
    gap: 40px;
}

.nav a {
    color: #8394a8;
    text-decoration: none;
    padding: 29px 8px;
    border-bottom: 2px solid transparent;
}

.nav a.active {
    color: #2d8cff;
    border-bottom-color: #2d8cff;
}

.status {
    margin-left: auto;
    color: #3ce779;
    font-size: 13px;
    font-weight: 700;
}

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: #3ce779;
    border-radius: 50%;
    margin-right: 8px;
}

.layout {
    display: grid;
    grid-template-columns: 365px 1fr 360px;
    gap: 12px;
    padding: 12px;
    min-height: calc(100vh - 120px);
}

.left-column,
.right-column,
.center-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card,
.map-card,
.route-card {
    border: 1px solid #243442;
    background: linear-gradient(180deg, #0d141d 0%, #091019 100%);
    border-radius: 5px;
}

.card {
    padding: 18px;
}

.card h2 {
    font-size: 14px;
    margin: 0 0 18px;
}

.card h3 {
    color: #2f8cff;
    margin-top: 5px;
}

.card-header {
    display: flex;
    justify-content: space-between;
}

.card-header span {
    color: #6f8090;
    font-size: 12px;
}

label {
    display: block;
    color: #8294a7;
    font-size: 12px;
    margin: 13px 0 7px;
}

input {
    width: 100%;
    background: #0b1118;
    color: #dce6f2;
    border: 1px solid #344454;
    padding: 12px;
    border-radius: 4px;
}

.stop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.stop span {
    color: #788a9d;
}

.route-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.route-options button {
    padding: 12px 5px;
    background: #111923;
    border: 1px solid #314151;
    color: #a9bacb;
    border-radius: 4px;
}

.route-options button.active {
    background: #123e78;
    color: white;
    border-color: #2d8cff;
}

.primary-button {
    width: 100%;
    padding: 14px;
    margin-top: 14px;
    background: linear-gradient(90deg, #123d85, #1b5ec7);
    color: white;
    border: 1px solid #3485ff;
    border-radius: 4px;
    font-weight: 700;
}

.vehicle-row,
.calc-row,
.cost-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
    color: #8da0b3;
    font-size: 13px;
}

.vehicle-row strong,
.calc-row strong,
.cost-row strong {
    color: #d6e1ec;
}

.map-card {
    min-height: 530px;
    overflow: hidden;
}

.map-placeholder {
    min-height: 530px;
    position: relative;
    background:
        radial-gradient(circle at center, rgba(26, 73, 120, .25), transparent 45%),
        #07101a;
    overflow: hidden;
}

.map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(65, 97, 126, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 97, 126, .12) 1px, transparent 1px);
    background-size: 35px 35px;
}

.map-title {
    position: absolute;
    top: 18px;
    left: 18px;
    color: #879aab;
    font-size: 12px;
}

.route-line {
    position: absolute;
    width: 6px;
    height: 330px;
    background: #2d8cff;
    top: 100px;
    left: 52%;
    transform: rotate(-18deg);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(45, 140, 255, .7);
}

.map-point {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.map-point span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.start-point {
    bottom: 70px;
    left: 55%;
}

.start-point span {
    background: #62d34d;
}

.end-point {
    top: 70px;
    left: 43%;
}

.end-point span {
    background: #ff4f50;
}

.alternatives {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.route-card {
    padding: 16px;
}

.route-card h3 {
    font-size: 14px;
}

.route-card.blue {
    border-color: #2c78da;
}

.route-card.green {
    border-color: #2eae5a;
}

.route-card.orange {
    border-color: #da851b;
}

.route-card.blue h3,
.route-card.blue .total strong {
    color: #3990ff;
}

.route-card.green h3,
.route-card.green .total strong {
    color: #3ee277;
}

.route-card.orange h3,
.route-card.orange .total strong {
    color: #ff9e25;
}

.big-value {
    font-size: 21px;
    font-weight: 700;
}

.route-card hr {
    border: 0;
    border-top: 1px solid #273747;
}

.total,
.grand-total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #273747;
    padding-top: 13px;
    margin-top: 8px;
    color: #2f8cff;
}

.grand-total strong {
    font-size: 21px;
    color: #2f8cff;
}

.warning strong {
    color: #ff9e25;
}

.danger strong {
    color: #ff5050;
}

.drive-time {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 10px auto 20px;
    border: 8px solid #273645;
    border-top-color: #ff5050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.time-value {
    color: #3990ff;
    font-size: 24px;
    font-weight: 700;
}

.time-label {
    font-size: 11px;
    color: #8294a7;
}

footer {
    height: 42px;
    border-top: 1px solid #1c2a38;
    background: #070b10;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #657789;
    font-size: 11px;
}

@media (max-width: 1200px) {
    .layout {
        grid-template-columns: 300px 1fr;
    }

    .right-column {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
#map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map-placeholder {
    position: relative;
    min-height: 530px;
}

.map-overlay {
    position: absolute;
    z-index: 10;

    top: 16px;
    left: 16px;

    padding: 8px 12px;

    background: rgba(5, 10, 16, 0.90);
    border: 1px solid #26394a;
    border-radius: 4px;

    color: #8fa4b8;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.maplibregl-ctrl-group {
    background: #0b121a !important;
    border: 1px solid #26394a;
}

.maplibregl-ctrl-group button {
    filter: invert(1);
}

/* WOJBAR MAP */

.maplibregl-canvas {
    outline: none;
}

.maplibregl-ctrl-top-right {
    top: 8px;
    right: 8px;
}

.maplibregl-ctrl-group {
    background: #0b121b !important;
    border: 1px solid #26394b !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.maplibregl-ctrl-group button {
    background-color: #0b121b !important;
}

.maplibregl-ctrl-group button:hover {
    background-color: #142231 !important;
}

.maplibregl-ctrl-group button + button {
    border-top: 1px solid #26394b !important;
}

.maplibregl-ctrl-icon {
    filter: invert(1) brightness(1.4);
}

.maplibregl-popup-content {
    background: #0b121b;
    color: #dce8f3;
    border: 1px solid #2a4055;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.maplibregl-popup-tip {
    border-top-color: #0b121b !important;
}

.maplibregl-ctrl-attrib {
    background: rgba(5, 10, 16, .85) !important;
    color: #71869b !important;
}

.maplibregl-ctrl-attrib a {
    color: #8fa8bf !important;
}