/* Nexus RP — démo interactive façon Discord */
.demo-badge{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--neon2);border:1px solid var(--line2);border-radius:999px;padding:.2rem .65rem;margin-right:auto}
.demo-wrap{padding-top:22px;padding-bottom:30px}
.demo-intro{color:var(--muted);margin:0 0 16px;max-width:820px}
.demo-intro b{color:var(--txt)}

.dc{display:grid;grid-template-columns:240px 1fr;height:min(720px,calc(100vh - 190px));min-height:520px;border:1px solid var(--line2);border-radius:18px;overflow:hidden;
  background:#1e1f22;box-shadow:0 0 0 1px rgba(168,85,247,.2),0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(168,85,247,.18)}
.dc-side{background:#2b2d31;display:flex;flex-direction:column;min-height:0}
.dc-server{display:flex;align-items:center;gap:10px;padding:14px 16px;font-weight:800;border-bottom:1px solid #1e1f22;color:#f2f3f5}
.dc-server img{border-radius:50%}
.dc-chans{flex:1;overflow-y:auto;padding:10px 8px}
.dc-cat{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#949ba4;margin:14px 8px 4px}
.dc-chan{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border:0;border-radius:6px;background:none;color:#949ba4;font:inherit;font-size:.95rem;text-align:left;cursor:pointer}
.dc-chan:hover{background:#35373c;color:#dbdee1}
.dc-chan.on{background:#404249;color:#fff}
.dc-chan .lock{margin-left:auto;font-size:.75rem;opacity:.7}
.dc-me{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#232428;color:#f2f3f5;font-size:.9rem}
.dc-me small{display:block;color:#949ba4;font-size:.76rem}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--grad);color:#fff;flex:none}

.dc-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:#313338}
.dc-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #26272b;color:#f2f3f5;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.dc-top .hash{color:#80848e;font-size:1.3rem;font-weight:400}
.dc-topic{color:#949ba4;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid #3f4147;padding-left:10px;margin-left:4px}
.dc-reset{margin-left:auto;background:none;border:1px solid #4e5058;color:#dbdee1;border-radius:6px;padding:.3rem .6rem;font:inherit;font-size:.82rem;cursor:pointer;white-space:nowrap}
.dc-reset:hover{background:#404249}
.dc-msgs{flex:1;overflow-y:auto;padding:16px 16px 8px}
.msg{display:flex;gap:14px;margin:0 0 18px;animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg .av{width:40px;height:40px}
.msg .av.bot{background:#000 url(/img/logo-64.png) center/cover}
.msg .av.anon{background:#4e5058}
.msg-body{min-width:0;flex:1}
.msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.msg-head b{color:#f2f3f5}
.msg-head .app{font-size:.66rem;font-weight:700;background:#5865f2;color:#fff;border-radius:4px;padding:1px 5px}
.msg-head time{color:#949ba4;font-size:.75rem}
.msg-text{color:#dbdee1;white-space:pre-wrap;word-wrap:break-word}
.eph{color:#949ba4;font-size:.78rem;margin-top:4px}
.embed{margin-top:6px;max-width:520px;background:#2b2d31;border-radius:6px;border-left:4px solid var(--neon);padding:12px 16px;color:#dbdee1}
.embed h3{margin:0 0 6px;font-size:1rem;color:#f2f3f5}
.embed p{margin:0 0 8px;font-size:.92rem}
.embed .fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 16px;margin:8px 0}
.embed .f b{display:block;font-size:.8rem;color:#f2f3f5}
.embed .f span{font-size:.9rem}
.embed img{border-radius:8px;margin-top:8px;max-width:100%;width:440px;background:#1e1f22;min-height:60px}
.embed .foot-t{font-size:.75rem;color:#949ba4;margin-top:8px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dc-btn{border:0;border-radius:4px;padding:.45rem .9rem;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;color:#fff;background:#4e5058;transition:filter .15s}
.dc-btn:hover{filter:brightness(1.15)}
.dc-btn:disabled{opacity:.5;cursor:not-allowed}
.dc-btn.pri{background:#5865f2}.dc-btn.ok{background:#248046}.dc-btn.danger{background:#da373c}.dc-btn.sec{background:#4e5058}
.ledger{list-style:none;padding:0;margin:6px 0 0;font-size:.85rem}
.ledger li{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #3f4147;padding:4px 0}
.plus{color:#4ade80}.minus{color:#f87171}

.dc-input{display:flex;align-items:center;gap:8px;margin:0 16px 16px;background:#383a40;border-radius:8px;padding:0 6px 0 14px}
.dc-input span{color:#949ba4;font-weight:700}
.dc-input input{flex:1;background:none;border:0;color:#dbdee1;font:inherit;padding:12px 0;min-width:0}
.dc-input input:focus{outline:none}
.dc-send{background:#5865f2;border:0;border-radius:6px;color:#fff;font:inherit;font-weight:600;padding:.4rem .8rem;cursor:pointer}

.dc-modal{border:0;border-radius:10px;padding:0;background:#313338;color:#dbdee1;width:min(460px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dc-modal::backdrop{background:rgba(0,0,0,.65)}
.dc-modal-in{padding:20px}
.dc-modal h2{margin:0 0 14px;font-size:1.15rem;color:#f2f3f5}
.dc-modal label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#b5bac1;margin:12px 0 6px}
.dc-modal input,.dc-modal select{width:100%;background:#1e1f22;border:0;border-radius:4px;color:#dbdee1;font:inherit;padding:10px}
.dc-modal input:focus,.dc-modal select:focus{outline:2px solid #5865f2}
.dc-err{color:#f87171;font-size:.85rem;min-height:1.2em;margin:10px 0 0}
.dc-modal-act{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

.demo-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;justify-content:center;margin:26px 0 10px;text-align:center}
.demo-cta p{width:100%;margin:0 0 4px;font-size:1.1rem}

@media (max-width:760px){
  .dc{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:calc(100vh - 150px)}
  .dc-side{flex-direction:row;align-items:center;overflow:hidden}
  .dc-server{display:none}.dc-me{display:none}
  .dc-chans{display:flex;gap:4px;overflow-x:auto;padding:6px}
  .dc-cat{display:none}
  .dc-chan{white-space:nowrap;width:auto}
  .demo-badge{display:none}
  .nav-cta .btn.ghost{display:none}
  .dc-topic{display:none}
  .msg .av{display:none}
  .dc-msgs{padding:12px 10px 6px}
}
/* démo complète : création du serveur, rôles, menus */
.dc{grid-template-columns:240px minmax(0,1fr)}
.dc-side,.dc-main{min-width:0}
.dc-chan.voice{cursor:default;opacity:.75}
.dc-chan .pin{margin-left:auto;font-size:.7rem;opacity:.8}
.dc-chan span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-chan.new,.dc-cat.new{animation:chanIn .35s ease-out}
@keyframes chanIn{from{opacity:0;transform:translateX(-12px);background:rgba(168,85,247,.35)}to{opacity:1;transform:none}}
.dc-view{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:.8rem;color:#949ba4;white-space:nowrap}
.dc-view[hidden]{display:none}
.dc-view select{background:#1e1f22;color:#f2f3f5;border:1px solid #4e5058;border-radius:6px;padding:.3rem .4rem;font:inherit;font-size:.82rem}
.dc-view + .dc-reset{margin-left:8px}
.dc-select{display:block;margin-top:8px;width:min(100%,420px);background:#1e1f22;color:#dbdee1;border:1px solid #1e1f22;border-radius:4px;padding:.55rem .6rem;font:inherit;font-size:.9rem;cursor:pointer}
.roles-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.role-pill{font-size:.75rem;font-weight:700;border:1px solid;border-radius:999px;padding:2px 8px;animation:chanIn .3s ease-out;background:rgba(0,0,0,.2)}
.embed .lines{margin:6px 0 0;padding-left:18px;font-size:.88rem}
.embed .lines li{margin:2px 0}
.embed p{white-space:pre-line}
@media (max-width:760px){
  .dc{grid-template-columns:minmax(0,1fr)}
  .dc-view span{display:none}
  .dc-view{margin-left:0}
  .dc-top{flex-wrap:wrap;gap:6px}
}