:root { color-scheme: dark; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: #07110d; color: #effff4; font-size: 16px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; min-height: 100vh; min-height: 100dvh; overflow: hidden; overscroll-behavior: none; }
button, select, input, textarea { font: inherit; border: 0; border-radius: 14px; }
button { background: #18e07f; color: #03120a; font-weight: 800; padding: 10px 14px; min-height: 44px; touch-action: manipulation; user-select: none; cursor: pointer; }
button.secondary { background: #20362b; color: #e8fff0; }
button.help-btn { background: linear-gradient(135deg, #ffe66b, #ff9f1c); color: #201100; box-shadow: 0 0 22px rgba(255, 186, 35, .45); }
button.sold { background: repeating-linear-gradient(135deg, #ffd23f, #ffd23f 10px, #111 10px, #111 20px); color: #fff; text-shadow: 0 1px 1px #000; }
button.tanker { background: #ff8f1f; color: #1d0d00; }
select, input, textarea { background: #0f2118; color: #effff4; padding: 11px 12px; outline: 1px solid #28553d; font-size: 16px; }
select, input { min-height: 44px; }
textarea { resize: vertical; min-height: 44px; }
#map { position: fixed; inset: 0; height: 100dvh; width: 100vw; }
.topbar { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; z-index: 3; display: grid; gap: 5px; max-width: calc(100vw - 16px); }
.slogan { border: 1px solid #295b43; border-radius: 14px; background: rgba(5, 18, 12, .82); backdrop-filter: blur(12px); color: #ffe66b; font-size: 12px; line-height: 1.1; text-align: center; padding: 6px 8px; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; padding: 6px; border: 1px solid #295b43; border-radius: 16px; background: rgba(5, 18, 12, .82); backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.toolbar strong { color: #18e07f; letter-spacing: .12em; margin-right: 2px; flex: 0 0 auto; }
.toolbar button { padding: 7px 10px; border-radius: 11px; font-size: 12px; white-space: nowrap; min-height: 40px; flex: 0 0 auto; }
.toolbar #helpBtn { margin-left: auto; }
.menu-btn { width: 44px; min-width: 44px; font-size: 18px !important; line-height: 1; padding: 6px 0 !important; }
.station-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 5; width: min(88vw, 390px); transform: translateX(-105%); transition: transform .18s ease; background: linear-gradient(180deg, rgba(8,22,16,.98), rgba(4,13,9,.99)); border-right: 1px solid #295b43; box-shadow: 18px 0 60px rgba(0,0,0,.45); padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); overflow: hidden; }
.station-drawer > div { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.station-drawer.open { transform: translateX(0); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 4; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.drawer-head strong { color: #18e07f; letter-spacing: .08em; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; margin-bottom: 8px; }
.filters select, .filters button { min-width: 0; padding: 9px 8px; font-size: 13px; border-radius: 12px; }
.stations { display: grid; gap: 8px; }
.station-drawer .stations { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; overscroll-behavior: contain; }
.station-row { text-align: left; width: 100%; max-width: 100%; min-height: 92px; display: grid; align-content: start; gap: 5px; background: #10241a; color: #f2fff6; border: 1px solid #28553d; padding: 9px 10px; overflow: hidden; }
.station-row.compact-row { min-height: 58px; grid-template-columns: minmax(0, 1fr); }
.station-row strong, .station-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station-row small { color: #9ec5ad; font-weight: 500; }
.fuel-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; min-width: 0; overflow: hidden; min-height: 25px; }
.fuel { display: inline-flex; align-items: center; min-height: 23px; max-width: 100%; border: 1px solid #315943; border-radius: 999px; padding: 4px 8px; background: #08140e; font-size: 12px; line-height: 1.15; white-space: nowrap; }
.fuel-dots { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fuel-dot { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 6px; border-radius: 999px; border: 1px solid #53645a; background: #49534d; color: #d5ddd8; font-size: 11px; font-weight: 900; line-height: 1; }
.fuel-dot.available { background: #0ac46b; border-color: #b7ffd4; color: #021008; }
.fuel-dot.sold_out { background: #8f1e18; border-color: #ffaaa3; color: #fff3f1; }
.fuel-dot.unknown { background: #46524b; border-color: #7b8e82; color: #c5d2ca; }
.fuel.available { border-color: #18e07f; color: #91ffbd; }
.fuel.sold_out { border-color: #ffd23f; color: #ffd23f; }
.fuel.tanker_incoming { border-color: #ff8f1f; color: #ffbd7a; }
.station-badge { border-radius: 999px; padding: 6px 10px; background: #12291d; border: 1px solid #315943; color: #bfe6cd; font-size: 13px; width: fit-content; }
.station-badge.not_working { border-color: #ff8277; color: #ffaaa3; }
.station-badge.tanker_incoming { border-color: #ff8f1f; color: #ffbd7a; animation: pulse 1s infinite alternate; }
.marker { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid #d8f3df; border-radius: 50%; background: #5d6b63; box-shadow: 0 0 14px rgba(0,0,0,.55); color: #eef8f1; font-size: 11px; font-weight: 900; touch-action: manipulation; user-select: none; }
.marker.available { background: #0ac46b; color: #021008; border-color: #caffdf; box-shadow: 0 0 22px rgba(24,224,127,.85); }
.marker.unknown { background: #46524b; color: #c5d2ca; border-color: #7b8e82; box-shadow: none; }
.marker.sold_out { width: 58px; border-radius: 10px; background: #111; color: #ffd23f; border-color: #ffd23f; }
.marker.tanker_incoming { background: #ff8f1f; color: #1d0d00; border-color: #ffe0bd; animation: pulse 1s infinite alternate; }
.marker.not_working { width: 58px; border-radius: 10px; color: #ff8277; border-color: #ff8277; background: #1a0908; }
@keyframes pulse { from { transform: scale(.92); } to { transform: scale(1.12); } }
dialog { max-width: min(560px, calc(100vw - 20px)); width: 100%; max-height: calc(100dvh - 20px); border: 1px solid #2d6348; border-radius: 24px; background: #07110d; color: #effff4; padding: 0; box-shadow: 0 24px 80px rgba(0,0,0,.6); overflow: hidden; }
dialog::backdrop { background: rgba(0,0,0,.55); }
.dialog-card, .station-card { padding: 16px; display: grid; gap: 12px; max-height: calc(100dvh - 20px); overflow-y: auto; overflow-x: hidden; }
.station-card h2, .dialog-card h2 { margin: 0; }
.admin-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.admin-tabs button { padding: 9px 6px; font-size: 13px; }
.admin-form { display: grid; gap: 10px; }
.admin-form label { display: grid; gap: 5px; color: #bfe6cd; font-size: 13px; }
.admin-form fieldset { border: 1px solid #315943; border-radius: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px; }
.admin-form legend { color: #ffe66b; padding: 0 6px; }
.admin-form .check { display: flex; grid-template-columns: none; align-items: center; gap: 8px; }
.admin-form input[type="checkbox"] { width: 18px; height: 18px; }
.admin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.terminal { min-width: 0; border: 1px solid #1fe587; border-radius: 16px; padding: 12px; background: radial-gradient(circle at top left, rgba(31,229,135,.18), transparent 35%), #06100b; overflow: hidden; }
.terminal p { margin: 6px 0 10px; color: #cfeedd; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.station-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.admin-list { display: grid; gap: 8px; max-height: 55vh; overflow: auto; font-size: 13px; color: #ccebd6; }
.admin-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; border: 1px solid #315943; border-radius: 14px; padding: 8px; background: #0b1b13; }
.admin-row button { padding: 8px; font-size: 12px; }
.comment-field { display: grid; gap: 5px; color: #bfe6cd; font-size: 13px; }
.comment-field textarea { min-height: 44px; max-height: 110px; }
.comments { display: grid; gap: 6px; color: #bfe6cd; font-size: 13px; }
.help-card p { margin: 0; color: #d8f3df; line-height: 1.35; }
.help-card .hint { color: #ffe66b; }
.error { min-height: 1.2em; color: #ff8277; }
@media (max-width: 520px) { .toolbar button { padding: 7px 8px; font-size: 11px; } .filters { grid-template-columns: 1fr 1fr; } .filters #locateBtn { grid-column: 1 / -1; padding: 8px; } .fuel { font-size: 11px; padding: 3px 7px; } .status-grid, .station-actions { grid-template-columns: 1fr; } .station-card { padding: 14px; } .actions { justify-content: stretch; } .actions button { flex: 1 1 auto; } }
@media (max-width: 380px) { .slogan { font-size: 11px; } .toolbar strong { display: none; } }
@media (min-width: 860px) { .topbar { left: 12px; right: 12px; max-width: none; } .slogan { font-size: 13px; } .toolbar { width: fit-content; } .station-drawer { width: 420px; } .filters { gap: 8px; margin-bottom: 10px; } }