:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#f2f3f7;background:#121318}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}.app{display:flex;width:100%;height:100dvh;overflow:hidden;background:#191a20}.server-rail{width:72px;flex-shrink:0;background:#111217;display:flex;align-items:center;flex-direction:column;padding:13px 10px;gap:12px}.server-bubble{width:49px;height:49px;border:0;border-radius:17px;background:#30323f;color:#fff;font-size:24px;transition:border-radius .2s,transform .2s,background .2s}.server-bubble:hover{border-radius:13px;transform:translateY(-2px);background:#6254d9}.server-bubble.selected{background:#6254d9;border-radius:14px}.rail-divider{height:2px;width:32px;background:#30313b}.add-server{color:#57d6a4}.channel-panel{width:242px;flex-shrink:0;background:#23242e;display:flex;flex-direction:column}.server-title{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #17181f;font-size:17px}.channel-scroll{flex:1;padding:17px 10px;overflow-y:auto}.category-title{font-size:11px;font-weight:800;color:#999bab;letter-spacing:.5px;margin:14px 8px 9px}.voice-heading{margin-top:30px}.channel-item{display:block;width:100%;border:0;background:transparent;text-align:left;padding:10px 12px;color:#adb0c0;font-size:15px;font-weight:600;border-radius:7px;text-decoration:none;margin-bottom:3px}.channel-item:hover{background:#323441;color:#fff}.channel-item.active{background:#3a3c4d;color:#fff}.hash{color:#9b9dae;font-size:21px;margin-right:5px}.account-bar{width:100%;border:0;background:#191a22;padding:11px;color:#fff;display:flex;align-items:center;gap:10px;text-align:left}.account-avatar,.member-avatar,.message-avatar{display:grid;place-items:center;border-radius:50%;background:#38334d;flex-shrink:0}.account-avatar{width:39px;height:39px}.account-info{display:flex;flex-direction:column;min-width:0;flex:1}.account-info strong{overflow:hidden;text-overflow:ellipsis}.account-info small{color:#54d9a0;font-size:11px;margin-top:4px}.settings-symbol{color:#c6c7d0;font-size:20px}.chat-panel{display:flex;flex-direction:column;flex:1;min-width:0;background:#1c1d25}.chat-header{height:62px;flex-shrink:0;border-bottom:1px solid #32333e;display:flex;align-items:center;justify-content:space-between;padding:0 21px}.header-channel{display:flex;align-items:center;font-weight:750;gap:3px}.header-description{border-left:1px solid #484a58;padding-left:14px;margin-left:13px;color:#999bab;font-size:12px;font-weight:400}.header-actions{display:flex;gap:10px}.header-actions button{border:0;background:transparent;color:#b7b8ca;font-size:21px}.message-scroll{flex:1;overflow-y:auto;padding:18px 0}.channel-welcome{padding:15px 25px 28px;margin-bottom:15px;border-bottom:1px solid #30313c}.welcome-icon{width:58px;height:58px;border-radius:19px;background:#363847;display:grid;place-items:center;font-size:36px;font-weight:700}.channel-welcome h1{font-size:25px;margin-bottom:7px}.channel-welcome p{color:#9d9eae;font-size:14px}.message-row{display:flex;position:relative;gap:14px;padding:9px 22px;min-height:64px}.message-row:hover{background:#242630}.message-avatar{width:41px;height:41px;font-size:23px}.message-content{flex:1;min-width:0}.message-meta{display:flex;align-items:center;gap:10px}.message-meta strong{font-size:15px}.timestamp{color:#858798;font-size:11px}.message-content p{margin:6px 0;line-height:1.5;color:#dedfe8;overflow-wrap:anywhere}.reaction-button{opacity:0;align-self:flex-start;background:#363747;color:#fff;border:1px solid #494a5c;border-radius:7px;padding:6px}.message-row:hover .reaction-button,.reaction-button:focus-visible{opacity:1}.reaction-count{display:inline-block;background:#37304f;color:#e3d7ff;padding:4px 10px;border-radius:8px;font-size:12px;margin-top:5px}.message-composer{margin:0 20px 20px;background:#323440;border-radius:10px;display:flex;align-items:center;gap:10px;padding:8px 12px}.message-composer input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:#fff;padding:10px 3px}.attach-button{background:#aeb0bf;border:0;border-radius:50%;width:25px;height:25px;font-weight:700;color:#30313b}.send-button{background:#7666ec;border:0;border-radius:8px;padding:8px 13px;color:#fff;font-size:18px}.member-panel{width:215px;flex-shrink:0;background:#23242e;padding:24px 13px}.member-panel h4{color:#9b9cad;font-size:11px;margin:0 0 15px 10px}.member-entry{display:flex;align-items:center;gap:10px;padding:8px;font-size:14px}.member-avatar{width:33px;height:33px}.name-rainbow{background-image:linear-gradient(90deg,#ff5b8a,#ffc15a,#f5ed66,#52e4ae,#64b9ff,#c178ff,#ff5b8a)}.name-purple{background-image:linear-gradient(90deg,#a68aff,#ee9dff,#a68aff)}.name-sunset{background-image:linear-gradient(90deg,#ff668b,#ffb15e,#ff668b)}.name-ocean{background-image:linear-gradient(90deg,#49e3e8,#5e8dff,#49e3e8)}.name-mint{background-image:linear-gradient(90deg,#5ff2ab,#a8f8d1,#5ff2ab)}.name-rainbow,.name-purple,.name-sunset,.name-ocean,.name-mint{background-size:250% auto;background-clip:text;-webkit-background-clip:text;color:transparent}.animated{animation:gradient-shift 4s linear infinite}@keyframes gradient-shift{to{background-position:250% center}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#000000bf;display:flex;align-items:center;justify-content:center;padding:15px}.profile-modal{width:100%;max-width:465px;max-height:90dvh;overflow-y:auto;background:#292a36;border:1px solid #494b61;border-radius:16px;box-shadow:0 25px 70px #0008}.modal-banner{padding:20px;background:linear-gradient(110deg,#6554d9,#b35ac9,#497bdb);display:flex;align-items:center;justify-content:space-between}.modal-banner h2{font-size:19px}.modal-banner button{background:#0005;color:#fff;border:0;border-radius:7px;padding:8px}.profile-preview{padding:20px;margin:15px;border-radius:12px;background:#1b1c25}.preview-avatar{width:65px;height:65px;background:#484064;border:4px solid #1b1c25;border-radius:50%;display:grid;place-items:center;font-size:32px}.profile-preview h2{display:inline-block;margin:12px 0 5px}.profile-preview p{color:#b9bac9;font-size:13px}.preview-badge{display:inline-block;background:#42345f;color:#d9c3ff;border-radius:6px;padding:5px 9px;font-size:12px}.profile-fields{padding:5px 20px 22px;display:flex;flex-direction:column;gap:12px}.profile-fields label{font-size:12px;font-weight:700;color:#c5c5d3}.profile-fields>input{padding:12px;border:1px solid #454759;border-radius:7px;background:#1c1d27;color:#fff;outline:none}.gradient-options{display:flex;flex-wrap:wrap;gap:8px}.gradient-choice{background-color:#1c1d27;border:2px solid #424453;border-radius:8px;padding:9px;font-size:12px;font-weight:700;text-transform:capitalize}.gradient-choice.chosen{border-color:#a393ff}.toggle-line{display:flex;align-items:center;gap:9px;margin:10px 0}.save-profile{background:#7462e7;color:#fff;padding:12px;border:0;border-radius:8px;font-weight:700}@media(max-width:1000px){.member-panel{display:none}}@media(max-width:650px){.channel-panel{width:175px}.server-rail{width:58px;padding:10px 4px}.server-bubble{width:43px;height:43px}.header-description{display:none}}@media(max-width:480px){.channel-panel{display:none}.message-row{padding:9px 12px}.message-composer{margin:0 10px 12px}}@media(prefers-reduced-motion:reduce){.animated{animation:none}.server-bubble{transition:none}}
