.parking-page { color:var(--text-main); }
.parking-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
.parking-heading h2 { margin:0 0 6px; font-family:var(--display-font); font-size:24px; }
.parking-heading p { margin:0; color:var(--text-muted); line-height:1.5; }
.parking-count { white-space:nowrap; border:1px solid var(--border-color); border-radius:var(--radius); padding:8px 12px; background:var(--card-bg); font-weight:700; }
.parking-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.parking-map-card,.parking-box { min-width:0; border:1px solid var(--border-color); border-radius:var(--radius); background:var(--card-bg); overflow:hidden; }
.parking-map-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-color); }
.parking-map-header strong,.parking-box h3 { font-family:var(--display-font); font-size:17px; }
.parking-legend { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--text-label); }
.parking-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; margin-left:8px; }
.parking-legend .free { background:#22aa64; }.parking-legend .pending { background:#d7a331; }
.parking-legend .occupied { background:#515b66; }.parking-legend .mine { background:#00a9a4; }
.parking-map-scroll { width:100%; min-width:0; max-width:100%; overflow-x:auto; background:#111719; }
.parking-map-surface { position:relative; width:100%; min-width:880px; aspect-ratio:1671 / 941; }
.parking-map-surface img { display:block; width:100%; height:100%; object-fit:contain; }
.parking-map-surface svg { position:absolute; inset:0; width:100%; height:100%; }
.parking-map-note { padding:11px 16px; margin:0; color:var(--text-muted); font-size:12px; line-height:1.5; }
.parking-spot { cursor:pointer; }
.parking-spot rect { stroke:rgba(255,255,255,.86); stroke-width:2; transition:fill .15s,stroke-width .15s; }
.parking-spot.free rect { fill:rgba(12,151,76,.62); }
.parking-spot.pending rect { fill:rgba(195,131,22,.69); }
.parking-spot.occupied rect { fill:rgba(37,46,56,.81); }
.parking-spot.mine rect { fill:rgba(0,153,148,.78); }
.parking-spot:hover rect,.parking-spot:focus rect,.parking-spot.selected rect { stroke:#fff; stroke-width:5; }
.parking-spot text { fill:#fff; text-anchor:middle; pointer-events:none; paint-order:stroke; stroke:rgba(0,0,0,.54); stroke-width:3; font-family:var(--display-font); font-weight:700; }
.parking-spot .parking-map-code { font-size:39px; }.parking-spot .parking-map-status { font-size:19px; }
.parking-spot.side .parking-map-code { font-size:32px; }.parking-spot.side .parking-map-status { font-size:16px; }
.parking-leadership { fill:rgba(108,17,28,.28); stroke:none; pointer-events:none; }
.parking-border { fill:none; stroke:#ea3541; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.parking-leadership-label { fill:#fff; font-size:34px; font-family:var(--display-font); font-weight:700; text-anchor:middle; paint-order:stroke; stroke:#321b1e; stroke-width:4; pointer-events:none; }
.parking-cp { fill:#096afa; stroke:#c6e2ff; stroke-width:4; pointer-events:none; }
.parking-cp-label { fill:#fff; font-size:25px; font-family:var(--display-font); font-weight:700; text-anchor:middle; paint-order:stroke; stroke:#092143; stroke-width:4; pointer-events:none; }
.parking-side { min-width:0; display:grid; gap:14px; }
.parking-box { padding:16px; }.parking-box h3 { margin:0 0 12px; }
.parking-box p { margin:7px 0; color:var(--text-label); line-height:1.45; }
.parking-box strong { color:var(--text-main); }
.parking-box button { width:100%; margin-top:10px; cursor:pointer; }
.parking-box .parking-muted { font-size:12px; color:var(--text-muted); }
.parking-pending-item { padding:11px 0; border-top:1px solid var(--border-color); }
.parking-pending-item:first-child { border-top:0; padding-top:0; }
.parking-pending-actions { display:flex; gap:7px; }.parking-pending-actions button { margin-top:7px; }
@media(max-width:1550px) { .parking-layout { grid-template-columns:minmax(0,1fr); }.parking-side { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } }
@media(max-width:700px) { .parking-heading { flex-direction:column; }.parking-map-header { align-items:flex-start; }.parking-map-surface { min-width:800px; } }