:root { 
    --green: #4CAF50; 
    --blue: #2196F3; 
    --gray: #888; 
}

body { 
    margin:0; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    background:#f5f5f5; 
    color:#333; 
    line-height:1.4;
}

header { background:#1a1a1a; color:#fff; padding:12px 8px; position:relative; min-height:68px; }
.header-content { display:flex; align-items:center; gap:12px; max-width:1200px; margin:0 auto; }
.logo { width:80px; height:80px; flex-shrink:0; object-fit:contain; }
.header-text { flex:1; }
h1 { margin:0 0 4px; font-size:1.35rem; }
h2 { margin:0; font-size:1.15rem; font-weight:500; }
.switch { position:absolute; right:12px; top:58px; display:flex; align-items:center; color:#fff; cursor:pointer; font-size:0.95rem; background:rgba(0,0,0,0.3); padding:4px 10px; border-radius:6px; }
.switch svg { margin-right:6px; }

.container { max-width:1200px; margin:0 auto; padding:0 8px; }

/* === РЕЖИМ СПИСОК === */
.gate-list { display:flex; flex-direction:column; gap:10px; margin:20px 0; }
.gate-row { background:#fff; border-radius:8px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.gate-name { flex:1; font-weight:500; font-size:1.05rem; }
.error-msg { color:#f44336; font-size:0.85rem; margin-top:8px; display:block; clear:both; }

/* === РЕЖИМ КАРТА === */
#map-container { position:relative; display:inline-block; max-height:82vh; margin:20px auto 12px; }
#map-container img { max-height:82vh; width:auto; max-width:100%; display:block; box-shadow:0 4px 12px rgba(0,0,0,0.15); }

.gate-overlay { 
    position: absolute; 
    transform: translate(-50%, -50%); 
    background: rgba(255,255,255,0.9); 
    border-radius: 8px; 
    padding: 4px 5px; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.3); 
    text-align: center; 
    width: 112px; 
    font-size: 0.9rem; 
    z-index: 10;
}
.gate-overlay .name { display:block; margin-bottom:1px; font-weight:500; }
.gate-overlay .buttons { display:flex; gap:6px; justify-content:center; flex-wrap:nowrap; }
.gate-overlay button { flex:1; max-width:41px; font-size:0.9rem; padding:1px 6px; }

#global-errors { 
    margin:10px auto 10px; 
    max-width:1200px; 
    background:#fff; 
    padding:5px; 
    border-radius:8px; 
    box-shadow:0 2px 8px rgba(0,0,0,0.1); 
    min-height:10px;
}

/* Кнопки */
button { 
    padding:9px 14px; 
    border:none; 
    border-radius:6px; 
    font-size:0.95rem; 
    font-weight:500; 
    cursor:pointer; 
    display:flex; 
    align-items:center; 
    gap:6px; 
    transition: all 0.2s;
}
.btn-open { background:var(--green); color:#fff; font-size: 11px;}
.btn-control { background:var(--blue); color:#fff; font-size: 11px;}

button.loading { 
    background:var(--gray) !important; 
    color:#fff; 
    pointer-events:none; 
}
button.error-flash { background:#f44336 !important; color:#fff; }
button.success-flash { background:#4CAF50 !important; color:#fff; }

.legend {}

.legend .legend-item { float: left; margin-right: 12px; }

.legend .legend-item span { vertical-align: 8px; font-size: 11px; }


footer { text-align:center; padding:12px; font-size:0.85rem; color:#666; }
.footnote { font-size:0.8rem; color:#777; margin:8px 0; font-style: italic; }
.footnote .footnote-title { font-weight:bold; }

.gate-overlay button {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gate-overlay {
    width: auto;
    min-width: 112px;
}
.gate-overlay button.flag-btn,
.gate-overlay span.flag-sign {
    flex: 0 0 auto;
    max-width: none;
    width: 28px;
    min-height: 42px;
    padding: 1px;
}
button.flag-btn {
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.gate-flags {
    display: flex;
    gap: 4px;
    align-items: center;
}
.flag-sign {
    display: inline-flex;
}
.last-open {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #555;
}
.login-open {
    position: absolute;
    right: 12px;
    top: 12px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 4px 8px;
}
.login-layer {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-layer:not(.open) {
    display: none;
}
.login-card {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.login-card input {
    width: 100%;
    box-sizing: border-box;
}
.login-error {
    color: #f44336;
    margin: 0;
}