:root{
  --bg: #0b0f14;
  --bg2:#0e141c;
  --card:#0f1722cc;
  --card2:#101a27cc;
  --stroke:#1c2a3a;
  --text:#e7edf7;
  --muted:#a9b6c8;

  --accent:#6dd6ff;
  --accent2:#a78bfa;

  --radius: 18px;
  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --glow: 0 0 0 1px rgba(109,214,255,.22), 0 18px 60px rgba(109,214,255,.08);

  /* Твой баннер */
  --banner-url: url("banner.gif");
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 25% -10%, rgba(109,214,255,.14), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(167,139,250,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

.bg-glow{
  position:fixed; inset:-200px;
  background:
    radial-gradient(800px 500px at 10% 20%, rgba(109,214,255,.12), transparent 60%),
    radial-gradient(700px 450px at 90% 30%, rgba(167,139,250,.10), transparent 60%);
  filter: blur(22px);
  pointer-events:none;
  z-index:-1;
  animation: floatGlow 10s ease-in-out infinite alternate;
}

@keyframes floatGlow{
  from{ transform: translate3d(0,0,0) scale(1); opacity:.9 }
  to{ transform: translate3d(0,-18px,0) scale(1.02); opacity:1 }
}

.wrap{
  width:min(1100px, 92vw);
  margin: 26px auto 30px;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 16px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:lowercase;
  color: rgba(231,237,247,.95);
}
.brand .dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 5px rgba(109,214,255,.10);
}
.hint{ color: var(--muted); font-size: 13px; opacity:.9 }

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items:start;
}

/* активность под погодой справа */
#discordCard{ grid-column: 1; grid-row: 1 / span 2; }
#timeWeatherCard{ grid-column: 2; grid-row: 1; }
#activityCard{ grid-column: 2; grid-row: 2; }

.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid rgba(28,42,58,.75);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(700px 220px at 15% 10%, rgba(109,214,255,.10), transparent 55%);
  opacity:.55;
  pointer-events:none;
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow), var(--glow);
  border-color: rgba(109,214,255,.25);
}

.discord-card{ padding: 14px 14px 16px; }
.side-card{ padding: 16px; }

.banner{
  height: 150px;
  border-radius: calc(var(--radius) - 6px);
  background-image: var(--banner-url);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(28,42,58,.65);
  filter: saturate(1.05) contrast(1.05);
}

.profile-row{
  display:flex;
  gap: 14px;
  align-items:center;
  margin-top: -32px;
  padding: 0 10px;
}

.avatar-wrap{
  width: 92px; height: 92px;
  border-radius: 999px;
  position:relative;
  flex: 0 0 auto;
  border: 1px solid rgba(28,42,58,.9);
  background: rgba(13,18,26,.9);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  padding: 6px;
}

.avatar{
  width:100%; height:100%;
  border-radius: 999px;
  display:block;
  object-fit:cover;
}

.presence{
  position:absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid rgba(13,18,26,1);
  background: #778;
  box-shadow: 0 0 0 3px rgba(255,255,255,.03);
}
.presence.online{ background:#23c55e; }
.presence.idle{ background:#f59e0b; }
.presence.dnd{ background:#ef4444; }
.presence.offline{ background:#64748b; }

.who{
  min-width: 0;
  padding-top: 32px;
}

/* ✅ статус сверху */
.subtitle{
  margin: 0 0 6px 0;
  color: rgba(231,237,247,.88);
  font-size: 14px;
  line-height: 1.45;
  opacity:.92;
}

.name-line{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

.name{
  margin:2;
  font-size: 22px;
  line-height:1.1;
}
.tag{
  font-size: 13px;
  color: rgba(169,182,200,.95);
  border: 1px solid rgba(28,42,58,.7);
  background: rgba(9,13,19,.35);
  padding: 4px 10px;
  border-radius: 999px;
  max-width: 100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(28,42,58,.85), transparent);
  margin: 14px 0;
}

.section-title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(169,182,200,.95);
  margin-bottom: 10px;
}

.socials{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(28,42,58,.8);
  background: rgba(9,13,19,.35);
  color: rgba(231,237,247,.95);
  text-decoration:none;
  font-size: 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(109,214,255,.35);
  background: rgba(15,23,34,.55);
  box-shadow: 0 0 0 1px rgba(109,214,255,.12), 0 12px 35px rgba(109,214,255,.06);
}

.btn:active{ transform: translateY(0); }

.icon{
  width: 16px; height: 16px;
  display:inline-block;
  opacity:.95;
}

.contacts{
  display:grid;
  gap: 10px;
}

.contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(28,42,58,.8);
  background: rgba(9,13,19,.25);
}

.label{ color: rgba(169,182,200,.95); font-size: 13px; }
.value{ color: rgba(231,237,247,.92); font-size: 13px; }
.link{ color: rgba(231,237,247,.95); }
.link:hover{ color: white; }

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.big{
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.muted{ color: rgba(169,182,200,.92); }
.tiny{ font-size: 12px; opacity: .9; }

.pill{
  border: 1px solid rgba(28,42,58,.8);
  background: rgba(9,13,19,.25);
  padding: 8px 10px;
  border-radius: 999px;
  color: rgba(231,237,247,.88);
  font-size: 12px;
  white-space:nowrap;
}

.weather{
  display:grid;
  gap: 10px;
}

.weather-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wm{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(28,42,58,.8);
  background: rgba(9,13,19,.25);
  display:flex;
  justify-content:space-between;
  gap: 10px;
}
.wm-k{ color: rgba(169,182,200,.95); font-size: 13px; }
.wm-v{ color: rgba(231,237,247,.92); font-size: 13px; }

.activity{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(28,42,58,.8);
  background: rgba(9,13,19,.25);
}

.act-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(28,42,58,.8);
  background: rgba(13,18,26,.65);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

.act-title{
  font-weight: 700;
  line-height: 1.2;
}
.timer{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(231,237,247,.92);
  padding: 6px 10px;
  border-radius: 999px;
  display:inline-block;
  border: 1px solid rgba(28,42,58,.75);
  background: rgba(9,13,19,.28);
}

.footer{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  opacity:.95;
}

.top{
  display: none;
}

/* Responsive */
@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
  #discordCard, #timeWeatherCard, #activityCard{ grid-column:auto; grid-row:auto; }
  .socials{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner{ height: 140px; }
}

@media (max-width: 520px){
  .profile-row{ padding: 0 6px; }
  .avatar-wrap{ width: 84px; height: 84px; }
  .big{ font-size: 30px; }
  .socials{ grid-template-columns: 1fr; }
  .contact{ flex-direction:column; align-items:flex-start; }
}