* { margin:0; padding:0; box-sizing:border-box; }

:root {
    --bg:      #0d1b2a;
    --surface: #132233;
    --surf2:   #1b2f44;
    --border:  rgba(79,195,247,.18);
    --accent:  #4fc3f7;
    --text:    #dff0ff;
    --muted:   #6fa3c0;
}

html, body { height:100%; overflow:hidden; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--text); }

header { background:linear-gradient(160deg,#0a1623,#122030); border-bottom:1px solid var(--border); }
.header-top { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 2rem .8rem; }
.logo-line  { display:flex; align-items:center; gap:.75rem; }
.logo-icon  { font-size:1.9rem; }
.site-title { font-size:1.6rem; font-weight:800; letter-spacing:-.5px;
              background:linear-gradient(90deg,#4fc3f7,#00e5ff);
              -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
nav { display:flex; gap:.2rem; padding:0 2rem; }
nav a { padding:.55rem 1.15rem; text-decoration:none; color:var(--muted); font-size:.88rem;
        border-radius:8px 8px 0 0; cursor:pointer;
        border:1px solid transparent; border-bottom:none; transition:all .18s; }
nav a:hover  { color:var(--text); background:rgba(79,195,247,.09); }
nav a.active { color:var(--accent); background:var(--surface); border-color:var(--border); font-weight:600; }

.section        { display:none; height:calc(100vh - 108px); }
.section.active { display:flex; flex-direction:column; }

.rivers-layout { display:flex; flex:1; overflow:hidden; }

.sidebar { width:290px; flex-shrink:0; background:var(--surface);
           border-right:1px solid var(--border); display:flex; flex-direction:column; }
.sidebar-head { padding:1.1rem 1.4rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.sidebar-head h2 { font-size:1rem; font-weight:700; color:var(--accent); }
.sidebar-head p  { font-size:.75rem; color:var(--muted); margin-top:.25rem;
                   display:flex; align-items:center; gap:.4rem; }
.sidebar-search {
  display:block; width:100%; margin-top:.6rem;
  padding:.38rem .7rem; box-sizing:border-box;
  background:var(--surf2); border:1px solid var(--border); border-radius:7px;
  color:var(--text); font-size:.8rem; outline:none;
  transition:border-color .15s;
}
.sidebar-search:focus { border-color:var(--accent); }
.sidebar-search::placeholder { color:var(--muted); }

.river-list { padding:.65rem; overflow-y:auto; flex:1; }

.river-item { display:flex; align-items:center; gap:.7rem;
              padding:.8rem .95rem; border-radius:9px; cursor:pointer;
              transition:background .15s; margin-bottom:.3rem; }
.river-item:hover  { background:var(--surf2); }
.river-item.active { background:var(--surf2); box-shadow:inset 0 0 0 1px rgba(79,195,247,.28); }
.r-dot  { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.r-info { flex:1; min-width:0; }
.r-name-ru { font-size:.93rem; font-weight:600; }
.r-name-en { font-size:.72rem; color:var(--muted); margin-top:.1rem; }
.r-badge   { font-size:.68rem; padding:.18rem .5rem; border-radius:20px; white-space:nowrap; flex-shrink:0;
             background:rgba(79,195,247,.12); color:var(--accent); font-weight:500; }

/* Ocean group collapsibles */
.ocean-group { margin-bottom:.3rem; border-radius:9px; overflow:hidden; }
.ocean-hdr { display:flex; align-items:center; gap:.55rem; padding:.65rem .95rem;
             cursor:pointer; background:var(--surf2); border-radius:9px;
             font-size:.78rem; font-weight:600; user-select:none;
             transition:background .15s; }
.ocean-hdr:hover { background:rgba(79,195,247,.1); }
.ocean-hdr.open { border-radius:9px 9px 0 0; }
.ocean-cnt  { font-size:.7rem; color:var(--muted); font-weight:400; }
.ocean-arrow{ margin-left:auto; font-size:.65rem; color:var(--muted);
              transition:transform .2s; }
.ocean-hdr.open .ocean-arrow { transform:rotate(180deg); }
.ocean-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.ocean-rivers { display:none; background:rgba(0,0,0,.18);
                border-radius:0 0 9px 9px; padding:.25rem 0; }

/* Flow animation: dots travel source → mouth */
@keyframes river-flow {
    to { stroke-dashoffset: -15; }
}

/* City labels on map */
.city-label {
    background: rgba(8,18,30,.88) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 4px !important;
    color: #ddeef7 !important;
    font-size: .68rem !important;
    font-weight: 500 !important;
    padding: 2px 7px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
    pointer-events: none !important;
}
.city-label::before { display:none !important; }
.city-label.has-photo {
    pointer-events: auto !important;
    cursor: pointer !important;
    border-color: rgba(79,195,247,.55) !important;
}
.city-label.has-photo:hover {
    background: rgba(79,195,247,.18) !important;
    border-color: var(--accent) !important;
}
.city-label.has-photo::after {
    content: ' 📷';
    font-size: .6rem;
    opacity: .7;
}

/* ── City photo modal ─────────────────────────────────── */
.photo-overlay {
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,.78);
    display:flex; align-items:center; justify-content:center;
    animation: fadeIn .15s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.photo-box {
    background:var(--surf2);
    border:1px solid var(--border);
    border-radius:16px;
    width:min(680px,92vw);
    overflow:hidden;
    box-shadow:0 16px 60px rgba(0,0,0,.75);
    display:flex; flex-direction:column;
}
.photo-hdr {
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1.2rem;
    border-bottom:1px solid var(--border);
}
.photo-city-name {
    font-size:1rem; font-weight:700; color:var(--accent);
}
.photo-close {
    background:none; border:none; cursor:pointer;
    color:var(--muted); font-size:1.3rem; line-height:1;
    padding:.2rem .4rem; border-radius:6px; transition:color .15s;
}
.photo-close:hover { color:var(--text); }
.photo-stage {
    position:relative; background:#080e18;
    min-height:200px; display:flex; align-items:center; justify-content:center;
}
.photo-stage img {
    max-width:100%; max-height:60vh; object-fit:contain; display:block;
}
.photo-nophoto {
    color:var(--muted); font-size:.9rem; padding:3.5rem 2rem; text-align:center;
}
.photo-nophoto .no-icon { font-size:2.5rem; display:block; margin-bottom:.6rem; opacity:.4; }
.photo-nav {
    display:flex; align-items:center; justify-content:center; gap:1.2rem;
    padding:.7rem 1.2rem;
    border-top:1px solid var(--border);
}
.photo-nav-btn {
    background:rgba(79,195,247,.1); border:1px solid var(--border);
    color:var(--text); font-size:1.4rem; cursor:pointer;
    width:36px; height:36px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.photo-nav-btn:hover:not(:disabled) { background:rgba(79,195,247,.25); }
.photo-nav-btn:disabled { opacity:.25; cursor:default; }
.photo-counter { font-size:.8rem; color:var(--muted); min-width:40px; text-align:center; }

/* mini spinner */
@keyframes spin { to { transform:rotate(360deg); } }
.mini-spin { display:inline-block; width:10px; height:10px;
             border:1.5px solid rgba(79,195,247,.3); border-top-color:var(--accent);
             border-radius:50%; animation:spin .7s linear infinite; }

#map      { flex:1; }
#sea-map  { flex:1; }
#city-map { flex:1; }

/* ── Right info panel (Rivers & Seas) ─────────────────────────────────── */
.info-panel {
    width: 270px;
    flex-shrink: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    animation: slideInRight .2s ease;
}
@keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.info-color-bar {
    height: 4px;
    flex-shrink: 0;
}
.info-panel-close {
    position: absolute;
    top: .55rem; right: .6rem;
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 1rem; line-height: 1;
    padding: .2rem .4rem; border-radius: 6px;
    transition: color .15s;
    z-index: 2;
}
.info-panel-close:hover { color: var(--text); }
.info-panel-body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.info-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    padding-right: 1.5rem;
    line-height: 1.3;
}
.info-panel-rows { display: flex; flex-direction: column; gap: .3rem; }
.ip-row {
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(79,195,247,.08);
}
.ip-label { color: var(--muted); font-size: .72rem; margin-bottom: .1rem; }
.ip-val   { color: var(--text); font-weight: 500; }
.ip-cities-title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}
.ip-country-group {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    margin-top: .6rem;
    margin-bottom: .1rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--border);
}
.ip-city-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .28rem 0;
    font-size: .85rem;
    color: var(--text);
}
.ip-city-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: .85;
}
.info-panel-src {
    font-size: .68rem;
    color: var(--muted);
    opacity: .6;
    margin-top: -.2rem;
}

/* Silhouette city map — fallback bg (Leaflet rectangle layer covers it normally) */
#city-map.leaflet-container { background: #353535; }

/* Sea polygon active glow */
.sea-poly-active {
    filter: drop-shadow(0 0 8px currentColor);
}

.placeholder { flex:1; display:flex; flex-direction:column;
               align-items:center; justify-content:center; gap:.6rem; color:var(--muted); }
.placeholder .ic { font-size:3.5rem; opacity:.35; }
.placeholder h2  { font-size:1.3rem; color:var(--text); }
.placeholder p   { font-size:.85rem; opacity:.55; }

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
    background:var(--surf2) !important; color:var(--text) !important;
    border:1px solid rgba(79,195,247,.35) !important; border-radius:11px !important;
    box-shadow:0 6px 28px rgba(0,0,0,.55) !important; }
.leaflet-popup-tip-container { display:none; }
.leaflet-popup-close-button  { color:var(--muted) !important; }
.leaflet-popup-close-button:hover { color:var(--text) !important; }
.leaflet-control-zoom a { background:var(--surf2) !important; color:var(--text) !important;
                           border-color:var(--border) !important; }
.leaflet-control-zoom a:hover { background:var(--surface) !important; }

/* Layer switcher */
.layer-switcher { display:flex; background:var(--surf2); border:1px solid var(--border);
                  border-radius:8px; overflow:hidden; box-shadow:0 3px 14px rgba(0,0,0,.45); }
.layer-btn { padding:.38rem .85rem; font-size:.78rem; font-family:inherit; cursor:pointer;
             color:var(--muted); background:transparent; border:none;
             border-right:1px solid var(--border); transition:all .15s; white-space:nowrap; }
.layer-btn:last-child { border-right:none; }
.layer-btn:hover  { color:var(--text); background:rgba(79,195,247,.08); }
.layer-btn.active { color:var(--accent); background:rgba(79,195,247,.14); font-weight:600; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-thumb { background:rgba(79,195,247,.22); border-radius:3px; }

/* ── Countries ─────────────────────────────────── */
#country-map { flex:1; }
#country-map.leaflet-container { background: #5283B3; }
/* убираем браузерный outline при клике на SVG-элементы Leaflet */
.leaflet-interactive:focus { outline: none; }

.continent-group { margin-bottom:.3rem; border-radius:9px; overflow:hidden; }
.continent-hdr {
    display:flex; align-items:center; gap:.55rem; padding:.65rem .95rem;
    cursor:pointer; background:var(--surf2); border-radius:9px;
    font-size:.82rem; font-weight:700; user-select:none;
    transition:background .15s; color:var(--text);
}
.continent-hdr:hover { background:rgba(200,240,0,.08); }
.continent-hdr.open  { border-radius:9px 9px 0 0; }
.continent-cnt  { font-size:.7rem; color:var(--muted); font-weight:400; margin-left:auto; }
.continent-arrow{ font-size:.65rem; color:var(--muted); transition:transform .2s; }
.continent-hdr.open .continent-arrow { transform:rotate(180deg); }
.continent-body {
    display:none; background:rgba(0,0,0,.18);
    border-radius:0 0 9px 9px; padding:.25rem 0;
}
.continent-body.open { display:block; }

.country-item {
    display:flex; align-items:center; gap:.65rem;
    padding:.5rem .95rem; cursor:pointer; transition:background .15s;
    font-size:.85rem;
}
.country-item:hover  { background:rgba(200,240,0,.07); }
.country-item.active { background:rgba(200,240,0,.13);
                       box-shadow:inset 0 0 0 1px rgba(200,240,0,.3); }
.country-item.active .ci-name { color:#c8f000; font-weight:600; }
.ci-dot   { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ci-name  { font-size:.84rem; color:var(--text); }
.ci-visited { font-size:.65rem; color:#c8f000; opacity:.7; margin-left:auto; }


.un-toggle { display:flex; border:1px solid var(--border); border-radius:6px;
             overflow:hidden; margin-top:.55rem; }
.un-btn    { flex:1; padding:.28rem 0; font-size:.72rem; font-family:inherit;
             cursor:pointer; background:transparent; border:none;
             color:var(--muted); transition:all .15s; }
.un-btn:hover  { color:var(--text); }
.un-btn.active { background:rgba(200,240,0,.14); color:#c8f000; font-weight:700; }

/* ── Language switcher ─────────────────────────────── */
.lang-switcher { display:flex; gap:.3rem; align-items:center; }
.lang-btn {
    padding:.3rem .65rem; font-size:.75rem; font-family:inherit; font-weight:600;
    cursor:pointer; background:transparent;
    border:1px solid var(--border); border-radius:6px;
    color:var(--muted); transition:all .15s;
    letter-spacing:.04em;
}
.lang-btn:hover  { color:var(--text); border-color:rgba(79,195,247,.45); }
.lang-btn.active { color:var(--accent); border-color:var(--accent);
                   background:rgba(79,195,247,.1); }
.switch {
    position: relative;
    z-index: 1000;
    display: inline-block;
    width: 40px;
    height: 18px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #444;
    border-radius: 22px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: .5s;
}

input:checked + .slider:before {
    transform: translateX(22px);
}

input:checked + .slider {
    background-color: #a8c400;
}
.sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}