:root{
  --bg-card:#232428;
  --bg-section:#2b2d31;
  --bg-pill:#2e3035;
  --bg-muted:#35373c;
  --border:rgba(255,255,255,.07);
  --text-strong:#f2f3f5;
  --text:#dbdee1;
  --text-muted:#b5bac1;
  --link:#00a8fc;
  --green:#23a559;
  --radius-card:16px;
}
*{box-sizing:border-box}
img{user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-user-drag:none;user-drag:none}
html{height:100%; overflow:hidden}
body{
  margin:0;
  height:100vh;
  height:100dvh;
  display:grid;
  place-items:center;
  padding:16px;
  overflow:hidden;
  background:
    radial-gradient(700px 500px at 15% 0%, rgba(205,0,255,.18), transparent 60%),
    radial-gradient(800px 600px at 85% 100%, rgba(88,101,242,.12), transparent 60%),
    #131416;
  font-family:"gg sans","Inter",system-ui,sans-serif;
  color:var(--text);
}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body::-webkit-scrollbar{display:none}

.card{
  width:360px;
  max-width:100%;
  max-height:calc(100dvh - 32px);
  max-height:calc(100vh - 32px);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
  overflow-y:auto;
  scrollbar-width:none;
}
.card::-webkit-scrollbar{display:none}

.banner{
  /* Без картинки — фиксированная полоса; с картинкой высота считается
     из её реальных пропорций (--banner-ratio), т.е. подстраивается сама. */
  height:90px;
  background-color:#cd00ff;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  border-radius:var(--radius-card) var(--radius-card) 0 0;
}
.banner.has-image{
  height:auto;
  aspect-ratio:var(--banner-ratio, 5 / 2);
  min-height:90px;
  max-height:min(220px, 45dvh);
}
.banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}
.banner-actions{
  position:absolute; top:10px; right:10px;
  display:flex; gap:8px; z-index:2;
}
.banner-btn{
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(35,36,40,.82);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text-muted);
  cursor:pointer;
}

.avatar-wrap{
  position:relative;
  margin:-46px 0 0 16px;
  z-index:5;
  width:92px; height:92px;
}
.avatar{
  width:92px; height:92px;
  border-radius:50%;
  background:var(--bg-card);
  padding:6px;
  position:relative;
}
.avatar img.main{
  width:80px; height:80px;
  border-radius:50%;
  display:block;
  object-fit:cover;
  background:#313338;
}
.status{
  position:absolute; right:6px; bottom:6px;
  width:16px; height:16px;
  border-radius:50%;
  background:#f0b132;
  border:3px solid var(--bg-card);
  box-sizing:content-box;
  display:block;
  overflow:hidden;
}
.status--online{ background:#23a559; }
.status--idle{ background:#f0b132; }
.status--dnd{ background:#f23f42; }
.status--offline{ background:#80848e; }
.status--streaming{ background:#593695; }
.status::before, .status svg{ display:none !important; }

.content{
  padding:18px 16px 0;
}
.display-name{
  font-size:19px; font-weight:800; color:var(--text-strong);
  line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.handle-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-top:2px;
}
.handle{
  font-size:13px; line-height:18px; height:18px;
  color:var(--text-muted); cursor:pointer;
  display:inline-flex; align-items:center;
}
.handle:hover{color:var(--text); text-decoration:underline}
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  height:20px; min-width:0;
  padding:0 6px;
  font-size:12px; font-weight:600; line-height:20px;
  border-radius:999px;
  background:var(--bg-pill);
  border:1px solid var(--border);
  white-space:nowrap;
  box-sizing:border-box;
}
.pill.muted{color:var(--text-muted); font-weight:500}
.pill img{width:14px; height:14px; border-radius:50%; display:block}

.badges{
  display:inline-flex; gap:4px;
  margin-top:8px;
  background:var(--bg-section);
  border:1px solid var(--border);
  border-radius:8px;
  padding:5px 6px;
}
.badge{width:20px; height:20px; display:grid; place-items:center; cursor:pointer}
.badge img{width:15px; height:15px; object-fit:contain}

.sections{
  padding:10px 12px 12px;
  display:flex; flex-direction:column; gap:10px;
}
.section{
  background:var(--bg-section);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
}
.section-title{
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-strong);
  margin:0 0 8px; display:flex; align-items:center; gap:8px;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;
}
.section-title::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.07)}

.about{font-size:13.5px; line-height:1.4}
.about-line{display:flex; gap:8px; margin-bottom:4px}
.about-line:last-child{margin:0}
.about-line .emoji{width:16px; height:16px; margin-top:1px}
.about a{color:var(--link); text-decoration:none}
.about a:hover{text-decoration:underline}

.games{display:flex; gap:8px}
.game{
  width:40px; height:40px; border-radius:10px; overflow:hidden;
  background:#1e1f22; border:1px solid var(--border);
}
.game img{width:100%; height:100%; object-fit:cover; display:block}

.widget-section{
  background:var(--bg-section);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
}
.widget-title{
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-strong);
  margin:0 0 8px; display:flex; align-items:center; gap:8px;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;
}
.widget-title::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.07)}
.activity-card{
  display:flex; gap:12px; align-items:center;
  background:rgba(35,36,40,.6);
  border:1px solid var(--border);
  border-radius:12px;
  padding:9px;
}
.activity-icon{
  position:relative; width:56px; height:56px; flex:0 0 56px;
  border-radius:12px; background:#1e1f22; border:1px solid var(--border);
}
.activity-icon img:first-child{width:100%; height:100%; object-fit:cover; display:block; border-radius:12px}
.activity-icon .small-icon{
  position:absolute; right:-5px; bottom:-5px;
  width:22px; height:22px; border-radius:50%;
  border:3px solid var(--bg-section); background:#2b2d31;
}
.activity-info{flex:1; min-width:0}
.activity-name{font-size:13px; font-weight:700; color:var(--text-strong)}
.activity-name a{color:inherit; text-decoration:none}
.activity-name a:hover{text-decoration:underline}
.activity-details{font-size:12.5px; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.activity-time{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:5px; font-size:11px; font-weight:700; color:var(--green);
  background:rgba(35,165,89,.12); border:1px solid rgba(35,165,89,.2);
  padding:2px 7px; border-radius:999px;
}
.activity-time svg{width:11px; height:11px; fill:var(--green)}

.composer{
  padding:12px;
}
.composer-box{
  display:flex; align-items:center; gap:8px;
  background:#2e3035; border:1px solid var(--border);
  border-radius:999px; padding:6px 6px 6px 14px;
}
.composer-box input{
  flex:1; background:transparent; border:0; outline:0;
  color:var(--text); font-size:13.5px;
}
.composer-box input::placeholder{color:var(--text-muted)}
.send{
  width:30px; height:30px; border-radius:50%; border:0;
  background:#5865f2; color:white; display:grid; place-items:center; cursor:pointer;
}

.toast{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  background:#111214; color:white; font-size:13px; font-weight:600;
  padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08);
  opacity:0; pointer-events:none; transition:.2s;
}
.toast.show{opacity:1}

.modal-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72);
  padding:16px;
  opacity:0; pointer-events:none; transition:.18s;
}
.modal-overlay.open{opacity:1; pointer-events:auto}
.modal{
  width:420px; max-width:100%;
  display:flex; flex-direction:column;
  max-height:calc(100dvh - 32px); max-height:calc(100vh - 32px);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 48px rgba(0,0,0,.5);
  transform:translateY(10px) scale(.97); transition:.18s;
}
.modal-overlay.open .modal{transform:none}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 12px 16px; border-bottom:1px solid var(--border);
}
.modal-title{
  font-size:14px; font-weight:800; color:var(--text-strong);
  user-select:none;-webkit-user-select:none;-moz-user-select:none;
}
.modal-close{
  width:28px; height:28px; border-radius:50%;
  background:transparent; border:0; color:var(--text-muted);
  cursor:pointer; display:grid; place-items:center;
}
.modal-close:hover{background:var(--bg-muted); color:var(--text)}
.modal-body{
  padding:10px; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; scrollbar-width:none;
}
.modal-body::-webkit-scrollbar{display:none}
.link-row{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 12px; border-radius:12px;
  background:var(--bg-section); border:1px solid var(--border);
  cursor:pointer;
}
.link-row:hover{background:var(--bg-muted)}
.link-icon{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  background:#1e1f22; border:1px solid var(--border);
  display:grid; place-items:center; color:var(--text-muted);
}
.link-row:hover .link-icon{color:var(--text)}
.link-icon svg{width:17px; height:17px; fill:currentColor}
.link-body{min-width:0; display:flex; flex-direction:column; gap:2px; flex:1}
.link-title{
  font-size:13.5px; font-weight:700; color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.link-desc{font-size:12px; line-height:1.35; color:var(--text-muted)}
.link-empty{
  padding:18px 12px; text-align:center;
  font-size:13px; color:var(--text-muted);
}
.modal-foot{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 14px; border-top:1px solid var(--border);
}
.pager-btn{
  width:26px; height:26px; border-radius:50%;
  background:transparent; border:0; color:var(--text-muted);
  cursor:pointer; display:grid; place-items:center;
}
.pager-btn:hover:not(:disabled){background:var(--bg-muted); color:var(--text)}
.pager-btn:disabled{opacity:.35; cursor:default}
.pager-label{
  font-size:12px; font-weight:700; color:var(--text-muted);
  min-width:44px; text-align:center;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;
}

@media (max-width:380px){
  .card{width:100%}
  .banner{height:80px}
}