:root {
    --sv-primary: #405189;
    --sv-accent: #0ab39c;
    --sv-panel-width: 350px;
}

body { background: #f3f3f9; }
a { text-decoration: none; }
.sv-brand-mark {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: linear-gradient(135deg, var(--sv-primary), #299cdb);
    color: #fff; font-size: 20px; box-shadow: 0 4px 12px rgba(64,81,137,.25);
}
.sv-brand-name { color: #2a2f34; font-size: 17px; letter-spacing: .03em; white-space: nowrap; }
.navbar-brand-box { min-width: 240px; height: 70px; }
.app-menu .sv-brand-name { color: #fff; }
.sv-public-body #page-topbar { left: 0; }
.sv-map-body #page-topbar .layout-width { max-width: none; margin: 0; }
.sv-map-body #page-topbar .navbar-header { padding: 0 18px; justify-content: space-between; }
.sv-map-body #page-topbar .navbar-brand-box {
    position: static; width: auto !important; min-width: 0; padding-left: 0 !important;
    justify-content: flex-start;
}
.sv-public-content { padding-top: 70px; min-height: 100vh; }
.sv-public-content .footer { position: static; }
.auth-page-content { min-height: calc(100vh - 100px); display: flex; align-items: center; }

.sv-map-body { overflow: hidden; }
.sv-map-page { position: relative; height: calc(100vh - 70px); overflow: hidden; }
.sv-trade-map { position: absolute; inset: 0 0 0 var(--sv-panel-width); background: #dce6ea; z-index: 1; }
.sv-map-panel {
    position: absolute; left: 0; top: 0; bottom: 0; width: var(--sv-panel-width); background: #fff;
    z-index: 900; box-shadow: 3px 0 18px rgba(35,52,70,.12); overflow-y: auto;
}
.sv-check-groups, .sv-station-checks {
    border: 1px solid #e9ebec; border-radius: 8px; background: #fbfcfd; overflow-y: auto;
}
.sv-check-groups { max-height: 290px; }
.sv-station-checks { max-height: 230px; padding: 8px; }
.sv-check-group + .sv-check-group { border-top: 1px solid #e9ebec; }
.sv-check-group-title, .sv-check-item {
    display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer;
}
.sv-check-group-title { padding: 10px 12px; background: #f3f6f9; font-weight: 600; }
.sv-check-group-items { padding: 5px 10px 9px 30px; }
.sv-check-item { padding: 5px 2px; font-size: 13px; }
.sv-check-item i { width: 9px; height: 9px; border-radius: 50%; background: var(--product-color); flex: 0 0 auto; }
.sv-map-toolbar {
    position: absolute; z-index: 800; top: 16px; left: calc(var(--sv-panel-width) + 16px);
    display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.96);
}
.sv-period-menu { width: min(360px, calc(100vw - 32px)); }
.sv-map-status {
    position: absolute; z-index: 800; bottom: 18px; left: calc(var(--sv-panel-width) + 16px);
    padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.94); color: #495057; font-weight: 500;
}
.sv-map-panel-open { position: absolute; left: 16px; top: 16px; z-index: 850; }
.sv-marker-host { background: transparent; border: 0; }
.sv-map-marker {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 50%; border: 3px solid rgba(255,255,255,.95);
    color: #fff; background: linear-gradient(145deg, #405189, #299cdb);
    box-shadow: 0 6px 18px rgba(33,49,91,.35); font-weight: 700; font-size: 12px;
    line-height: 1.15; text-align: center; transition: transform .15s ease;
}
.sv-map-marker:hover { transform: scale(1.08); }
.sv-map-marker small { display: block; margin-top: 2px; font-size: 10px; opacity: .92; }
.sv-map-marker .sv-marker-product {
    display: -webkit-box; max-width: 86%; margin: 0 auto 3px; overflow: hidden;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 9px; line-height: 1.05;
}
.sv-map-popup h6 { font-size: 16px; margin: 0 0 2px; }
.sv-map-popup > p { color: #878a99; margin: 0 0 10px; }
.sv-map-popup > a { display: block; margin-top: 12px; font-weight: 600; }
.sv-popup-product { display: grid; grid-template-columns: 9px 1fr auto; gap: 7px; align-items: center; padding: 5px 0; border-bottom: 1px solid #edf0f2; font-size: 12px; }
.sv-popup-product i { width: 8px; height: 8px; border-radius: 50%; }
.sv-popup-product span small { display: block; color: #878a99; line-height: 1.2; }
.sv-popup-product b { font-weight: 600; }

@media (max-width: 991.98px) {
    .sv-map-panel { transform: translateX(-105%); transition: transform .2s ease; }
    .sv-map-panel.is-open { transform: translateX(0); }
    .sv-trade-map { left: 0; }
    .sv-map-toolbar { left: 68px; }
    .sv-map-status { left: 16px; bottom: 16px; }
}
@media (max-width: 575.98px) {
    .sv-map-panel { width: min(92vw, var(--sv-panel-width)); }
    .navbar-brand-box { min-width: auto; padding-left: 8px !important; }
    .sv-brand-name { display: none; }
    #page-topbar .btn { padding-left: .55rem; padding-right: .55rem; }
    .sv-map-toolbar { right: 12px; left: 62px; }
    .sv-map-toolbar .dropdown { min-width: 0; flex: 1; }
    .sv-map-toolbar .dropdown-toggle { width: 100%; overflow: hidden; text-overflow: ellipsis; }
}