.account-hero{ text-align:center; }
.account-hero .tag{
  font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:2px;
  color:var(--violet); margin-bottom:14px; display:block; text-transform:uppercase;
}
.account-hero h1{
  font-family:var(--font-display); font-size:clamp(28px,3.8vw,42px); font-weight:700; letter-spacing:-0.01em;
}
.account-hero p{ color:var(--text-dim); margin:14px auto 0; max-width:600px; font-size:15.5px; line-height:1.65; }

.status-banner{
  max-width:760px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:12px;
  border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--bg-card); font-size:13.5px; line-height:1.5; color:var(--text);
}
.status-banner-dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--text-faint);
}
.status-banner-text{ flex:1; min-width:0; }
.status-banner-link{
  flex-shrink:0; font-family:var(--font-mono); font-size:12px; white-space:nowrap;
  color:inherit; text-decoration:none; opacity:0.8; border-bottom:1px solid currentColor;
}
.status-banner-link:hover{ opacity:1; }

.status-banner.degraded{
  border-color:rgba(255,180,84,0.3); background:rgba(255,180,84,0.08); color:var(--amber);
}
.status-banner.degraded .status-banner-dot{ background:var(--amber); box-shadow:0 0 8px var(--amber); }

.status-banner.down{
  border-color:rgba(232,99,107,0.3); background:rgba(232,99,107,0.08); color:var(--danger, #e8636b);
}
.status-banner.down .status-banner-dot{ background:var(--danger, #e8636b); box-shadow:0 0 8px var(--danger, #e8636b); }

@media (max-width:600px){
  .status-banner{ flex-wrap:wrap; }
  .status-banner-link{ flex-basis:100%; }
}

.connect-lab-section{ max-width:760px; margin:0 auto; padding:32px 24px 0; }
.connect-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; display:flex; flex-direction:column; gap:14px;
}
.connect-actions{ display:flex; flex-direction:column; gap:12px; }
.connect-actions-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.connect-hint{ color:var(--text-faint); font-size:12.5px; line-height:1.5; }
.connect-verified-note{ color:var(--text-faint); font-size:12.5px; line-height:1.5; margin:0; }
.connect-token-row{ display:flex; gap:10px; flex-wrap:wrap; }
.connect-token-row input{
  flex:1; min-width:220px; background:var(--bg-raised); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px; font-family:var(--font-mono); font-size:12.5px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.connect-token-row input:focus{ border-color:var(--border-hover); box-shadow:0 0 0 3px rgba(143,125,255,0.14); }
.connect-token-row input:disabled{ color:var(--text-faint); letter-spacing:2px; cursor:default; opacity:0.7; }

.connect-connected{ display:flex; align-items:center; gap:14px; }
.connect-avatar-thumb{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--border-hover); flex-shrink:0; background:var(--bg-raised); }
.connect-connected-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.connect-connected-name{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.connect-connected-sub{ font-family:var(--font-mono); font-size:11px; color:var(--green); letter-spacing:0.3px; }

.connect-status{ font-size:13px; line-height:1.5; padding:10px 14px; border-radius:var(--radius-sm); }
.connect-status.error{ background:rgba(242,63,66,0.1); color:#ff8a8c; border:1px solid rgba(242,63,66,0.3); }
.connect-status.pending{ background:rgba(143,125,255,0.08); color:var(--violet); border:1px solid var(--border-hover); }
.connect-status.success{ background:rgba(99,224,160,0.1); color:var(--green); border:1px solid rgba(99,224,160,0.3); }

.connect-save-prompt{
  background:rgba(143,125,255,0.07); border:1px solid var(--border-hover); border-radius:var(--radius-sm);
  padding:14px 16px; display:flex; flex-direction:column; gap:10px;
  transition:opacity .26s ease, transform .26s ease;
  opacity:1; transform:scale(1);
}
.connect-save-prompt.fade-out{ opacity:0; transform:scale(0.97); pointer-events:none; }
.connect-save-prompt p{ margin:0; font-size:13px; line-height:1.5; color:var(--text); }
.connect-save-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.connect-save-actions .btn{ padding:8px 16px; font-size:12.5px; }

.connect-save-confirm{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text); }
.connect-save-confirm[hidden]{ display:none; }
.connect-save-check{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:rgba(99,224,160,0.15); color:var(--green);
  display:flex; align-items:center; justify-content:center;
}
.connect-save-check svg{ width:15px; height:15px; stroke-dasharray:24; stroke-dashoffset:24; }
.connect-save-check.play svg{ animation:connectCheckDraw .35s ease forwards; }
@keyframes connectCheckDraw{ to{ stroke-dashoffset:0; } }

.profile-lab-section{ padding:32px 24px 0; }
.profile-lab{
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:28px; align-items:start; max-width:1080px; margin:0 auto;
}

.pf-panel{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; display:flex; flex-direction:column; gap:18px;
}
.pf-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pf-panel-head h3{ font-family:var(--font-display); font-size:15px; font-weight:600; }
.pf-hint{ color:var(--text-faint); font-size:11px; }

.pf-field{ display:flex; flex-direction:column; gap:6px; }
.pf-field label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-faint);
}

.pf-field input[type="text"],
.pf-field input[type="url"]{
  width:100%; background:var(--bg-raised); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px; font-family:var(--font-body); font-size:13.5px;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.pf-field input:focus{
  border-color:var(--border-hover); box-shadow:0 0 0 3px rgba(143,125,255,0.14);
}

.owned-badges-list{ display:flex; flex-direction:column; gap:8px; }
.owned-badges-list:empty::after{
  content:"You don't have any badges yet — add one below."; color:var(--text-faint); font-size:12.5px; font-style:italic;
}
.owned-badge-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--bg-raised);
}
.owned-badge-row img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--bg-card); }
.owned-badge-row .obr-name{ flex:1; min-width:0; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.owned-badge-row .obr-btn{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.3px; text-transform:uppercase;
  padding:5px 10px; border-radius:16px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.owned-badge-row .obr-btn:hover{ color:var(--violet); border-color:var(--border-hover); background:rgba(143,125,255,0.1); }
.owned-badge-row .obr-btn.active{ color:var(--green); border-color:rgba(99,224,160,0.4); background:rgba(99,224,160,0.1); cursor:default; }
.owned-badge-row .obr-remove{ color:var(--text-faint); }
.owned-badge-row .obr-remove:hover{ color:#ff8a8c; border-color:rgba(242,63,66,0.4); background:rgba(242,63,66,0.1); }
.owned-badge-row .obr-edit:hover{ color:var(--foil); border-color:rgba(99,232,212,0.4); background:rgba(99,232,212,0.1); }

.owned-badge-row.editing{ flex-wrap:wrap; align-items:stretch; gap:8px 10px; }
.owned-badge-row.editing img{ align-self:center; }
.obr-edit-fields{
  flex:1 1 100%; display:flex; flex-direction:column; gap:6px; order:2;
}
.obr-edit-fields input{
  width:100%; background:var(--bg-card); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:7px 9px; font-size:12.5px; font-family:inherit;
}
.obr-edit-fields input:focus{ outline:none; border-color:var(--violet); }
.obr-edit-actions{ flex:1 1 100%; order:3; display:flex; gap:8px; justify-content:flex-end; }
.obr-btn.obr-save{ color:var(--green); border-color:rgba(99,224,160,0.4); }
.obr-btn.obr-save:hover{ background:rgba(99,224,160,0.12); }
.obr-style-note{ margin:2px 0 0; font-size:11.5px; color:var(--text-faint); font-style:italic; }

.dc-shell{
  position:sticky; top:96px;
}
.dc-shell-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.6px; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:10px; display:flex; align-items:center; gap:7px;
}
.dc-shell-label .dot{
  width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.6; transform:scale(0.88); }
}

:root{
  --dc-bg-1:#000000;
  --dc-bg-2:#050505;
  --dc-bg-3:#0b0b0b;
  --dc-text:#e8e8e8;
  --dc-text-muted:#9a9a9a;
  --dc-text-faint:#5a5a5a;
  --dc-border:rgba(255,255,255,0.06);
  --dc-divider:rgba(255,255,255,0.07);
  --dc-blurple:#5865f2;
}
.dc-card{
  background:var(--dc-bg-1); border:1px solid rgba(255,255,255,0.07);
  border-radius:12px; overflow:hidden; max-width:300px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  font-family:var(--font-body); color:var(--dc-text);
}
.dc-banner{
  height:90px;
  background:linear-gradient(135deg, var(--violet), var(--foil));
  background-size:cover; background-position:center;
}
.dc-avatar-row{
  padding:0 16px; margin-top:-30px; margin-bottom:4px;
}
.dc-avatar-wrap{ position:relative; display:inline-block; }
.dc-avatar{
  width:72px; height:72px; border-radius:50%; border:4px solid var(--dc-bg-1);
  background:var(--dc-bg-3); display:block; object-fit:cover;
}
.dc-status{
  position:absolute; bottom:3px; right:3px;
  width:16px; height:16px; border-radius:50%; border:3px solid var(--dc-bg-1);
  background:#3ba55c;
}
.dc-status[data-status="online"]{ background:#3ba55c; }
.dc-status[data-status="idle"]{ background:#faa61a; }
.dc-status[data-status="dnd"]{ background:#ed4245; }
.dc-status[data-status="offline"]{ background:#747f8d; }

.dc-panel{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.dc-panel[hidden]{ display:none; }

.dc-namecard{ display:flex; flex-direction:column; gap:2px; }
.dc-display-name{ font-family:var(--font-display); font-size:17px; font-weight:700; line-height:1.25; word-break:break-word; }
.dc-username-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dc-username{ font-size:12.5px; color:var(--dc-text-muted); }

.dc-badges-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.dc-badge{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--dc-bg-3); border:1px solid var(--dc-border); overflow:hidden; position:relative;
  transition:transform .15s ease;
}
.dc-badge:hover{ transform:translateY(-2px); }
.dc-badge img{ width:100%; height:100%; object-fit:cover; }
.dc-badge.dc-badge-featured{ box-shadow:0 0 0 2px rgba(143,125,255,0.45), 0 0 14px rgba(143,125,255,0.4); }

.dc-divider{ height:1px; background:var(--dc-divider); border:none; margin:0; }

.dc-section-title{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.8px; text-transform:uppercase;
  color:var(--dc-text-faint); margin-bottom:6px;
}
.dc-about{ font-size:13px; line-height:1.55; color:var(--dc-text); white-space:pre-line; word-break:break-word; }
.dc-about:empty::before{ content:"No active badge yet."; color:var(--dc-text-faint); font-style:italic; }

@media (max-width:900px){
  .profile-lab{ grid-template-columns:1fr; max-width:460px; }
  .dc-shell{ position:static; }
}
@media (max-width:600px){
  .connect-token-row input{ min-width:0; }
}