:root{
  --bg-main:#06101b;
  --bg-card:#0b1730;
  --bg-card-2:#102042;
  --bg-soft:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.06);
  --text-main:#ffffff;
  --text-soft:#bfd0ec;
  --text-dim:#8ea6cb;
  --cyan:#67e8f9;
  --cyan-2:#38bdf8;
  --cyan-soft:rgba(103,232,249,.14);
  --green:#86efac;
  --green-soft:rgba(134,239,172,.16);
  --pink:#f9a8d4;
  --pink-soft:rgba(249,168,212,.16);
  --shadow:0 10px 25px rgba(0,0,0,.25);
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:8px;

  --z-base:1;
  --z-content:5;
  --z-floating:20;
  --z-overlay:1000;
  --z-modal:1010;
  --z-toast:1020;

  --container-width:min(90%, 1600px);
  --container-padding:2%;
  --control-height:40px;
  --control-height-sm:35px;
  --control-max-width:100%;
}

html,
body{
  height:100%;
  margin:0;
  padding:0;
  max-width:100%;
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img,
canvas,
video,
svg{
  max-width:100%;
  height:auto;
}

body{
  color:#cceeff;
  font-family:'HeliosCond', Arial, sans-serif;
  -ms-overflow-style:none;
  scrollbar-width:none;
  background-image:url('../images/bg.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body::-webkit-scrollbar{
  display:none;
}

a{
  color:#00ffff;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
}

a:hover{
  text-decoration:underline;
  text-shadow:0 0 5px #00ffff;
}

.highlight{
  color:#00ffff;
  font-weight:700;
  text-shadow:0 0 5px #00ffff,0 0 10px #00ffff;
}

.container{
  width:var(--container-width);
  margin:4% auto;
  padding:var(--container-padding);
  position:relative;
  text-align:left;
  background-image:url('../images/bodytop_bc.webp'), url('../images/bodybot_bc.webp');
  background-size:100% 50%;
  background-position:center 0%, center 98%;
  background-repeat:no-repeat, no-repeat;
  isolation:isolate;
}

.container h1,
.container h2,
.container h3{
  color:#00ffff;
  text-shadow:0 0 5px #00ffff, 0 0 10px #008888;
  margin-top:0;
  margin-bottom:10px;
}

.date{
  color:#66cccc;
  font-size:.9rem;
  margin-bottom:.5rem;
  opacity:.8;
}

.description{
  color:#cceeff;
  font-size:1rem;
  line-height:1.4;
}

img.side-image{
  float:right;
  max-width:120px;
  margin-left:15px;
  border-radius:4px;
  box-shadow:0 0 10px #00ffff55;
}

/* ========================================================================== 
   TOPBAR / HEADER / AUTH
   ========================================================================== */

.site-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  margin:0 0 12px;
  background:rgba(0,64,70,.8);
  border:1px solid #00ffff33;
  border-radius:8px;
  position:relative;
  z-index:var(--z-content);
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.topbar-left a.logo{
  font-weight:700;
  color:#00ffff;
  text-decoration:none;
  letter-spacing:.5px;
  text-shadow:0 0 6px #00ffff55;
}

.profile-header{
  text-align:center;
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:1px solid #3d434d;
  position:relative;
  z-index:var(--z-content);
}

.username{
  font-size:24px;
  font-weight:700;
  color:#ffffff;
  margin-bottom:5px;
  text-shadow:0 0 5px #00ffff;
  overflow-wrap:anywhere;
}

.clan{
  color:#a0a0a0;
  font-size:14px;
  overflow-wrap:anywhere;
}

.btn,
button.btn,
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #00ffff44;
  background:#002c30;
  color:#cceeff;
  padding:6px 10px;
  border-radius:6px;
  text-decoration:none;
  cursor:pointer;
}

.btn.secondary{
  border-color:#557;
  background:#1e2b31;
  color:#cbd8e6;
}

.auth-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  z-index:var(--z-overlay);
}

.auth-modal.open{
  display:flex;
}

.auth-card{
  width:min(440px,94vw);
  background:#022c31;
  border:1px solid #00ffff55;
  border-radius:12px;
  box-shadow:0 0 18px #00ffff33;
  padding:16px 18px;
  color:#cceeff;
}

.auth-card h3{
  margin:0 0 10px;
  color:#fff;
}

.auth-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.auth-row input{
  background:#001a1d;
  color:#cceeff;
  border:1px solid #00ffff22;
  border-radius:6px;
  padding:8px 10px;
  width:100%;
}

.auth-actions{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

/* ========================================================================== 
   GLOBAL BUTTONS / INPUTS / FORMS
   ========================================================================== */

button,
input[type="submit"],
input[type="button"],
.filter-container button{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  width:min(170px, 100%);
  max-width:100%;
  height:var(--control-height-sm);
  background-image:url('/stats/ico/Кнопка.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  font-family:'HeliosCond', Arial, sans-serif;
  font-size:1rem;
  color:#D3D3D3;
  text-shadow:0 0 2px rgba(255,255,255,0.5);
  text-align:center;
  line-height:var(--control-height-sm);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.filter-container button:hover{
  filter:brightness(.9);
}

input[type="text"],
textarea,
select{
  font-family:'HeliosCond', Arial, sans-serif;
  font-size:1rem;
  color:#cceeff;
  min-width:0;
}

input[type="text"],
textarea{
  background:none;
  border:none;
  text-align:center;
  width:100%;
  max-width:var(--control-max-width);
  min-width:0;
  height:var(--control-height);
  background-image:url('/stats/ico/твнгивг.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding:0 12px;
  line-height:var(--control-height);
}

textarea{
  height:auto;
  min-height:80px;
  line-height:1.4;
  padding:12px;
  resize:vertical;
}

input[type="text"]:focus,
textarea:focus,
select:focus{
  outline:none;
  filter:brightness(1.1);
}

.search-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}

.search-form input[type="text"]{
  flex:1 1 260px;
  width:auto;
  max-width:100%;
  height:42px;
  min-width:0;
  padding:0 12px;
  border-radius:8px;
  border:1px solid #00ffff44;
  background:rgba(0,40,45,.9);
  color:#dbefff;
  font-size:.95rem;
  text-align:left;
}

.search-form input[type="text"]::placeholder{
  color:#9adfe6;
}

.search-btn{
  all:unset;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  min-width:120px;
  padding:0 22px;
  cursor:pointer;
  user-select:none;
  border-radius:10px;
  border:1px solid rgba(255,210,77,.55);
  background:linear-gradient(180deg, rgba(0,120,120,.35), rgba(0,60,60,.35));
  color:#dbefff;
  font-family:'HeliosCond', Arial, sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.4px;
  box-shadow:0 0 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,255,255,.18);
  transition:filter .12s ease, box-shadow .12s ease, transform .06s ease;
}

.search-btn:hover{
  filter:brightness(1.06);
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,255,255,.28);
}

.search-btn:active{
  transform:translateY(1px);
}

/* ========================================================================== 
   TABS / TAB LAYOUT
   ========================================================================== */

.tabs-wrapper{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:18px;
  margin-bottom:20px;
  width:100%;
  height:auto;
  max-height:none;
  flex-grow:0;
  position:relative;
  z-index:var(--z-content);
}

.tabs{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:160px;
  max-width:100%;
  flex:0 0 160px;
}

.tabs li{
  position:relative;
  padding:11px 16px;
  background:linear-gradient(180deg, #043c40, #022b2e);
  color:#cfefff;
  cursor:pointer;
  border-left:3px solid transparent;
  border-radius:8px;
  text-align:left;
  font-size:.95rem;
  font-weight:600;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  box-shadow:inset 0 0 8px rgba(0,255,255,.12), 0 2px 6px rgba(0,0,0,.35);
  overflow-wrap:anywhere;
}

.tabs li:hover{
  background:linear-gradient(180deg, #07545a, #04393d);
  transform:translateX(4px);
  box-shadow:inset 0 0 10px rgba(0,255,255,.22), 0 6px 14px rgba(0,0,0,.45);
}

.tabs li.active{
  color:#ffffff;
  border-left-color:#00ffff;
  background:linear-gradient(180deg, #0a666d, #064a4f);
  box-shadow:inset 0 0 12px rgba(0,255,255,.28), 0 6px 16px rgba(0,0,0,.48);
}

.tab-content{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  position:relative;
  z-index:var(--z-content);
}

.tab-content > div{
  display:none;
  padding:1px;
}

.tab-content > div.active{
  display:block;
}

/* ========================================================================== 
   COMMON UTILS / WINTER EFFECTS
   ========================================================================== */

.hidden{
  display:none;
}

.as-btn:empty{
  display:none;
}

.christmas-lights,
.lights-glow{
  pointer-events:none;
}

.christmas-lights::after{
  content:"";
  position:absolute;
  top:8px;
  left:0;
  width:100%;
  height:60px;
  animation:lightsPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}

.lights-glow{
  position:absolute;
  inset:0;
}

.bulb-glow{
  position:absolute;
  width:45px;
  height:45px;
  border-radius:50%;
  filter:blur(18px);
  opacity:.85;
  animation:pulse 2.2s infinite ease-in-out;
}

.glow-1{ left:52px; top:18px; background:rgba(255,120,0,1); }
.glow-2{ left:120px; top:22px; background:rgba(255,0,0,1); }
.glow-3{ left:185px; top:20px; background:rgba(0,180,255,1); }

@keyframes lightsPulse{
  0%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.03); }
  100%{ opacity:.7; transform:scale(1); }
}

@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:.75; }
  50%{ transform:scale(1.25); opacity:1; }
}

/* ========================================================================== 
   GLOBAL STACKING SAFETY FOR OVERLAY CARDS
   ========================================================================== */

.profile-page,
.profile-content,
.content-wrap{
  position:relative;
  z-index:var(--z-content);
}

.auth-modal,
.nick-overlay,
.modal-overlay{
  z-index:var(--z-modal);
}

.achievement-toast{
  z-index:var(--z-toast);
}

/* ========================================================================== 
   RESPONSIVE PATCH
   ========================================================================== */

@media (min-width: 1600px){
  body .container{
    width:min(1560px, 92vw);
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width: 1280px){
  body .container{
    width:96%;
    padding:16px;
  }
}

@media (max-width: 900px){
  .site-topbar{
    flex-wrap:wrap;
  }

  .topbar-left,
  .topbar-right{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }

  .tabs-wrapper{
    gap:12px;
  }

  .tabs{
    width:145px;
    flex-basis:145px;
  }
}

@media (max-width: 700px){
  body{
    background-position:center top;
    background-size:cover;
  }

  .container{
    width:100%;
    margin:0;
    padding:12px;
    background-size:100% auto, 100% auto;
  }

  .username{
    font-size:clamp(20px, 6vw, 24px);
  }

  .tabs-wrapper{
    flex-direction:column;
  }

  .tabs{
    width:100%;
    flex:0 0 auto;
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }

  .tabs li{
    flex:0 0 auto;
    min-width:140px;
  }

  .search-form{
    flex-direction:column;
    align-items:stretch;
  }

  .search-form input[type="text"],
  .search-btn,
  .search-form button{
    width:100%;
    max-width:100%;
  }
}