:root{
    --bg:#03051a; /* near black-blue */
    --navy:#07112a; /* deep navy */
    --accent:#2dd4ff; /* cyan-ish neon */
    --muted:#8b99b8;
    --glass: rgba(255,255,255,0.04);
    --card: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    --radius:14px;
    --gap:14px;
    --max-width:1100px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color-scheme: dark;
  }

  *{box-sizing:border-box}
  html,body{height:100%;margin:0;}
  body{
    background: radial-gradient(1200px 600px at 10% 10%, rgba(13,24,54,0.6), transparent),
                radial-gradient(900px 500px at 90% 90%, rgba(6,12,30,0.6), transparent),
              var(--bg);
    color:#dfe9fb;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  
  #leafMapPanel {
      width: 100%;
      height: 100%;
      min-height: 400px; /* или нужная вам высота */
  }
  .leaflet-control-attribution.leaflet-control {
      /* тут ваши стили */
      display: none; /* пример свойства */
  }

  .app{
    width:100%;
    max-width:var(--max-width);
    height:calc(100vh - 40px);
    border-radius:20px;
    background: linear-gradient(180deg, rgba(7,17,34,0.7), rgba(2,6,14,0.8));
    box-shadow: 0 10px 40px rgba(2,6,14,0.8), inset 0 1px 0 rgba(255,255,255,0.02);
    display:grid;grid-template-columns:320px 1fr;gap:18px;overflow:hidden;
  }

  /* SIDE nav */
  .sidebar{
    padding:20px;display:flex;flex-direction:column;gap:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
    border-right:1px solid rgba(255,255,255,0.02);
  }
  .brand{
    display:flex;align-items:center;gap:12px;
  }
  .logo{
    width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#5b2dff);display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:0.6px;box-shadow:0 6px 18px rgba(45,212,255,0.08);
  }
  .brand h1{font-size:16px;margin:0}
  .brand p{margin:0;font-size:12px;color:var(--muted)}

  .server-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto; /* добавлено */
    padding-right: 6px;
    max-height: calc(100vh - 200px); /* ограничение высоты, чтобы не вылезало за экран */
  }
  .server{background:var(--glass);padding:12px;border-radius:12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease; border:1px solid rgba(255,255,255,0.02)}
  .server:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(2,6,14,0.6)}
  .server.active{outline:2px solid rgba(45,212,255,0.12);box-shadow:0 8px 28px rgba(10,20,40,0.6)}
  .server .icon{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,#07112a,rgba(11,27,54,0.8));display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;}
  .server .icon img{width:100%;height:100%;object-fit:cover;border-radius:8px;}
  .server .meta{display:flex;flex-direction:column}
  .server .meta b{font-size:13px}
  .server .meta small{font-size:11px;color:var(--muted)}

  /* main area */
  .main{padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}

  /* top menu for panels */
  .panel-menu{
    display:flex;
    gap:12px;
    margin-bottom:12px;
  }
  .panel-btn{
    padding:10px 16px;
    border-radius:12px;
    border:none;
    background: rgba(255,255,255,0.02);
    color: #dfe9fb;
    cursor:pointer;
    font-weight:500;
    transition: background 0.2s, transform 0.2s;
  }
  .panel-btn:hover{background: rgba(45,212,255,0.06);transform:translateY(-2px);}
  .panel-btn.active{background: linear-gradient(90deg, rgba(45,212,255,0.08), rgba(91,45,255,0.05));border:1px solid rgba(45,212,255,0.12);}

  .viewport{
    position:relative;
    flex:1;
    overflow:hidden;
    border-radius:12px;
    background:var(--card);
    display:flex;
    align-items:stretch;
  }

.view {
position: absolute;
inset: 0;
border-radius: 12px;
padding: 18px;
background: linear-gradient(180deg, rgba(6,14,30,0.32), rgba(6,8,20,0.28));
overflow-y: auto; /* прокрутка при необходимости */
transform: translateX(100%);
opacity: 0;
pointer-events: none;
transition: transform 0.35s cubic-bezier(.2,.9,.16,1), opacity 0.3s;
}


  .view.active{
    transform: translateX(0);
    opacity:1;
    pointer-events:auto;
  }

  .view.exit-left{
    transform: translateX(-100%);
    opacity:0;
  }

  .neon{
    font-size:20px;font-weight:700;letter-spacing:0.6px;color:var(--accent);text-shadow:0 0 8px rgba(45,212,255,0.16),0 0 30px rgba(91,45,255,0.06);position:relative
  }
  .neon::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(90deg,rgba(45,212,255,0.12),rgba(91,45,255,0.08));filter:blur(10px);}

  .muted{color:var(--muted);font-size:13px}
  .card{background:rgba(255,255,255,0.02);border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.02)}
  .stats{display:flex;gap:10px;flex-wrap:wrap}
  .stat{flex:1 1 140px;padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));min-width:120px}
  .stat h3{margin:0;font-size:16px}
  .stat p{margin:4px 0 0;color:var(--muted);font-size:13px}
  .leaders{display:flex;flex-direction:column;gap:8px}
  .player{display:flex;align-items:center;gap:10px}
  .avatar{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#07112a,#1b2b4a);display:flex;align-items:center;justify-content:center;font-weight:700}
  .map-embed{width:100%;height:240px;border-radius:10px;overflow:hidden;display:block;border:1px solid rgba(255,255,255,0.02);}
  .actions{display:flex;gap:10px;align-items:center}
  .btn{padding:10px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.06);cursor:pointer}
  .btn.primary{background:linear-gradient(90deg, rgba(45,212,255,0.08), rgba(91,45,255,0.05));border-color:rgba(45,212,255,0.12)}
  img{max-width:100%;height:auto;display:block}
  #map { height: 100vh; width: 100vw; }