:root {
    --bg: #0b1220;
    --card: #141b2d;
    --muted: #8aa0b8;
    --text: #e8eef7;
    --accent: #4ea1ff;
    --accent2: #5ad2b8;
    --danger: #ff6666;
  }
  
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 0;
    background: linear-gradient(180deg, #0b1220, #0e1626 60%, #101a2e);
    color: var(--text); font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  }
  .container { max-width: 1100px; margin: 32px auto; padding: 0 16px; }
  
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: rgba(20,27,45,0.9); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10;
    border-bottom: 1px solid #1d2740;
  }
  .nav a { color: var(--muted); text-decoration: none; margin-right: 16px; }
  .nav a:hover { color: var(--accent); }
  .brand { font-weight: 700; color: var(--text); letter-spacing: .5px; }
  
  .card {
    background: var(--card); border: 1px solid #1b2741; border-radius: 16px;
    padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.25); margin-bottom: 16px;
  }
  .card h2 { margin: 0 0 10px 0; font-size: 18px; }
  
  .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
  .btn {
    display: inline-block; padding: 10px 14px; border-radius: 10px; border: 1px solid #2a3a64;
    text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2));
    font-weight: 600; cursor: pointer;
  }
  .btn.secondary { background: transparent; color: var(--accent); border-color: #2a3a64; }
  .btn.danger { background: var(--danger); border-color: transparent; }
  
  .form input, .form select {
    width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #27365c; background: #10182a; color: var(--text);
  }
  .form label { display: block; font-size: 13px; color: var(--muted); margin: 6px 0; }
  .form .actions { margin-top: 10px; }
  
  ul.clean { list-style: none; padding: 0; margin: 0; }
  li.item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #1a2440; }
  li.item:last-child { border-bottom: none; }
  .muted { color: var(--muted); font-size: 13px; }
  .error { color: #ffb4b4; margin: 8px 0; }
  
  .tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #ddd;
  }
  .tab {
    padding: 8px 16px;
    text-decoration: none;
    color: #555;
    border-radius: 6px 6px 0 0;
  }
  .tab.active {
    background: #007BFF;
    color: #fff;
    font-weight: bold;
  }

  

  .podium{
    margin-top:16px; background:#101728; border:1px solid #2d3752; border-radius:10px; padding:12px;
  }
  .podium h3{ margin:0 0 10px; color:#e9f0ff; font-size:14px; }
  .podium .places{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
  .podium .place{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:#1b2436; border:1px solid #2d3752; border-radius:8px; }
  .podium .place .n{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:12px; color:#0b0f18; }
  .podium .place.gold   .n{ background:#ffd54f; }
  .podium .place.silver .n{ background:#cfd8dc; }
  .podium .place.bronze .n{ background:#ffb74d; }
  .podium .place span:last-child{ color:#cfe1ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:680px){ .podium .places{ grid-template-columns:1fr; } }
  
  /* ===== Mobile-friendly additions (append to end of styles.css) ===== */

/* Nav: allow wrapping, nicer spacing */
.nav{
  flex-wrap: wrap;
  gap: 10px;
}

/* Right side actions in nav: wrap buttons/links */
.nav > div{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Remove hard right-margin that breaks wrap */
.nav a{ margin-right: 0; }

/* Tabs: match dark theme + allow scroll on small screens */
.tabs{
  border-bottom: 1px solid #1d2740;         /* вместо светлой */
  gap: 6px;
  flex-wrap: wrap;                          /* чтобы не ломались */
}

.tab{
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
}

.tab:hover{
  color: var(--accent);
}

/* Active tab: dark-theme accent */
.tab.active{
  background: #101728;
  color: #e9f0ff;
  border-color: #2d3752;
  font-weight: 700;
}

/* If tabs are many, allow horizontal scroll on very small screens */
@media (max-width: 520px){
  .tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .tabs::-webkit-scrollbar{ height: 6px; }
  .tabs::-webkit-scrollbar-thumb{ background: #2d3752; border-radius: 6px; }
  .tab{ white-space: nowrap; }
}

/* General small-screen spacing */
@media (max-width: 520px){
  .container{ margin: 16px auto; padding: 0 12px; }
  .card{ padding: 12px; border-radius: 14px; }
  .btn{ padding: 8px 10px; border-radius: 10px; }
  .muted{ font-size: 12px; }
}

/* Brand text can be too long on phones */
@media (max-width: 420px){
  .brand{ font-size: 16px; }
  .brand-logo{ height: 30px; }
  .brand span{ display: none; } /* оставляем только логотип, чтобы не теснило кнопки */
}