/* ============================================================
 * panels.css — khung code preview và một thẻ hồ sơ Discord.
 * ============================================================ */
.panel{position:relative;background:linear-gradient(150deg,rgba(13,18,32,.86),rgba(6,9,17,.78));
  border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden;
  opacity:0;transform:translateY(22px) scale(.98);filter:blur(3px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
  transition-delay:calc(var(--d,0) * 100ms)}
.panel.in-view{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

.row2{width:min(1080px,100%);margin:12px auto 0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.9fr);gap:12px;align-items:stretch}
@media(max-width:760px){.row2{grid-template-columns:1fr}.stack-col{min-width:0}}
.stack-col{display:flex;min-width:0}
.stack-col .panel{width:100%;display:flex;flex-direction:column}

/* -- code preview panel (profile.js), kept as compact as possible -- */
.panel-code{display:flex;flex-direction:column}
.editor-titlebar{display:flex;align-items:center;gap:6px;padding:.5rem .8rem;border-bottom:1px solid var(--line);flex-shrink:0}
.editor-titlebar .dot{width:8px;height:8px;border-radius:50%}
.editor-titlebar .dot-a{background:#e0645a}.editor-titlebar .dot-b{background:#e0b04a}.editor-titlebar .dot-c{background:#59c78a}
.editor-titlebar .tab{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-left:4px}
.code{list-style:none;margin:0;padding:.9rem .95rem 1.1rem;font-family:var(--mono);font-size:.74rem;line-height:1.85;
  color:#c7d0e3;max-height:212px;overflow:auto}
.code .kw{color:var(--cyan)}.code .var{color:var(--gold)}.code .key{color:#9fb8f0}.code .str{color:#bfe3a0}.code .punc{color:#6b7690}
.code .caret{display:inline-block;width:6px;height:1em;background:var(--cyan);margin-left:3px;vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* -- Discord profile: no Discord ID or server metadata is rendered. -- */
.panel-discord{min-height:212px;padding:0 1rem 1rem;gap:.5rem}
.dc-banner{height:78px;margin:0 -1rem -25px;border-radius:17px 17px 0 0;overflow:hidden;
  background-color:#0b1325;background-image:linear-gradient(120deg,rgba(8,17,35,.12),rgba(24,70,146,.15)),radial-gradient(110% 130% at 0% 0%,rgba(122,168,255,.5),transparent 52%);
  background-size:cover;background-position:center;box-shadow:inset 0 -24px 30px rgba(4,7,14,.42)}
.dc-head{position:relative;display:flex;align-items:flex-end;gap:.65rem;min-width:0}
.dc-avatar-wrap{position:relative;width:58px;height:58px;flex-shrink:0}
.dc-avatar{width:58px;height:58px;border-radius:16px;background:radial-gradient(circle at 30% 25%,#c8dfff 0%,#5f8ce0 30%,#233a72 62%,#0a1225 100%);
  background-size:cover;background-position:center;border:2px solid rgba(191,219,254,.7);box-shadow:0 8px 18px rgba(0,0,0,.32)}
.dc-dot{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;border:3px solid #0c1120}
.dc-dot-online{background:#59c78a}.dc-dot-idle{background:#e0b04a}.dc-dot-dnd{background:#e0645a}.dc-dot-offline{background:#6b7690}
.dc-name-wrap{min-width:0;padding-bottom:.15rem}
.dc-name{margin:0;font-size:.88rem;font-weight:700;color:#f1f5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-username{margin:.05rem 0 0;font:500 .65rem/1.25 var(--mono);color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-status-text{margin:.16rem 0 0;font-size:.67rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-description{margin:.18rem 0 0;color:#c9d5eb;font-size:.74rem;line-height:1.5;overflow-wrap:anywhere}
.dc-link{align-self:flex-start;margin-top:auto;padding:.46rem .62rem;border:1px solid rgba(122,168,255,.22);border-radius:9px;
  background:rgba(122,168,255,.06);font:500 .62rem/1 var(--mono);color:#c9dcff;text-decoration:none;
  transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.dc-link:hover{transform:translateY(-2px);border-color:rgba(143,227,234,.58);background:rgba(122,168,255,.13)}

@media(max-width:760px){
  .panel-discord{min-height:196px;padding:0 1rem 1rem}
  .dc-banner{height:86px}
}