:root { --bg:#0b0b0b; --fg:#f5f5f5; --muted:#9aa0a6; --panel:#151718; --line:#1f2326; --accent:#e5e7eb; --owner:#ef4444; --mod:#3b82f6; --member:#10b981; }
*{box-sizing:border-box}
html,body,#app{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.app{display:grid;grid-template-columns:260px 1fr 320px;grid-template-rows:auto 1fr;grid-template-areas:"header header header" "sidebar main right";height:100vh;overflow:hidden}
.app.auth-mode{display:flex;align-items:center;justify-content:center}
.header{grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.server-title{display:flex;gap:8px;align-items:center;font-weight:700}
.badge{font-size:12px;color:var(--muted)}
.header-actions{display:flex;gap:8px}
.btn{border:1px solid var(--line);background:#111;color:var(--fg);padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .18s ease, transform .08s ease, box-shadow .12s ease}
.btn.logout{background:#7f1d1d;border-color:#4c1d1d;color:#fff}
.btn.logout:hover{background:#651616}
.icon{width:18px;height:18px;display:inline-block;vertical-align:-4px}
.sidebar{grid-area:sidebar;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;padding:10px;overflow-y:auto;overflow-x:hidden;background:#0e0f10;height:100%}
.section-title{font-size:12px;color:var(--muted);margin:10px 0 6px 6px;text-transform:uppercase;letter-spacing:.06em}
.channel{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;transition:background .18s ease, transform .12s ease, box-shadow .12s ease}
.channel:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.category{margin-top:8px}
.main{grid-area:main;display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}
.chat-header{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:var(--bg);z-index:3;flex-shrink:0}
.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.message{display:grid;grid-template-columns:40px 1fr;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-weight:700}
.msg-body{background:#0e0f10;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.msg-meta{font-size:12px;color:var(--muted);display:flex;gap:8px;margin-bottom:4px}
.announce{border-left:4px solid var(--accent);background:#0e0f10}
.composer{border-top:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px;flex-shrink:0;width:100%}
.input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:42px;min-width:0;width:100%}
.input:focus{outline:none;border-color:#2a2f33;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.right{grid-area:right;border-left:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:100%}
.panel{padding:12px 14px;border-bottom:1px solid var(--line)}
.panel.small { padding:10px 14px; background:transparent; }
.roles-legend{display:flex;gap:8px;flex-wrap:wrap}
.dot{width:10px;height:10px;border-radius:50%}
.member{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.tag{padding:2px 6px;border-radius:6px;background:var(--panel);font-size:12px;color:var(--fg);display:inline-block}
.tag.owner{color:#fff;background:var(--owner)}
.tag.mod{color:#fff;background:var(--mod)}
.tag.member{color:#fff;background:var(--member)}
.event{border:1px solid var(--line);border-radius:10px;padding:8px;margin:8px 0;transition:transform .12s ease, box-shadow .12s ease}
.event:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.event .sticker{width:48px;height:48px;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--line)}
.event-actions{display:flex;gap:6px;margin-top:6px}
.search{display:flex;gap:8px}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:50}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:60;transition:backdrop-filter .2s}
.modal{background:#0e0f10;color:var(--fg);border-radius:12px;border:1px solid var(--line);width:min(700px,92vw);max-height:88vh;overflow:auto;transition:transform .18s cubic-bezier(.2,.9,.2,1),opacity .18s;z-index:70}
.modal .body{padding:12px 14px;position:relative}
.row{display:flex;gap:10px;align-items:center}
.kbd{font-family:Space Mono,monospace;border:1px solid var(--line);padding:2px 6px;border-radius:6px;background:#0e0f10}
.voice-join{display:flex;gap:8px;align-items:center}
.meter{width:60px;height:8px;border-radius:6px;background:var(--panel);overflow:hidden;border:1px solid var(--line)}
.meter > span{display:block;height:100%;background:var(--accent);width:0%}
.small{font-size:12px;color:var(--muted)}
hr.sep{border:none;border-top:1px solid var(--line);margin:10px 0}
.error{color:#ef4444;margin-top:6px}
.auth { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); backdrop-filter:saturate(1.2) blur(4px); }
.auth .card { width:min(460px,92vw); background:#0e0f10; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.auth .card .row { flex-direction: column; align-items: stretch; gap: 10px; }
.btn:focus-visible{outline:2px solid rgba(59,130,246,.6);outline-offset:2px}
@media (max-width: 1100px){ .app{grid-template-columns:64px 1fr;grid-template-areas:"sidebar header" "sidebar main";} .right{display:none} .sidebar .label{display:none} .channel{justify-content:center} }
.user-bar{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#0e0f10}
.user-bar .avatar-img{width:28px;height:28px;border-radius:50%;background:var(--panel);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-weight:700}
.user-bar .user-meta{flex:1;min-width:0}
.user-bar .user-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal.wide{width:min(980px,96vw)}

/* Avoid form controls bleeding out of container */
.event .row input[type="file"]{max-width:160px}
/* small button spacing for channel list in settings */
.modal .event .row .input[type="text"], .modal .event .row .input[type="color"]{max-width:220px}

/* Settings tabs improvements */
.settings-tabs{overflow-x:auto;scrollbar-width:thin}
.settings-tabs .btn{white-space:nowrap;min-width:fit-content}
.settings-tabs .btn:not(.logout){background:#1a1d1f;border-color:#2a2f33}
.settings-tabs .btn:not(.logout):hover{background:#252a2e;transform:translateY(-1px)}

/* Avatar improvements for better profile pic display */
.avatar{position:relative;overflow:hidden}
.message .avatar{flex-shrink:0}

/* Role switching improvements */
.member select.btn{min-width:100px;text-align:left;padding:4px 8px;font-size:13px}
.member select.btn:focus{outline:2px solid rgba(59,130,246,.6);outline-offset:1px}

/* Rainbow gradient for Admin role */
.rainbow-text{background:linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow-shift 3s linear infinite;background-size:200% 100%}
@keyframes rainbow-shift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.rainbow-border{border:2px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) border-box;animation:rainbow-shift 3s linear infinite;background-size:200% 100%}

/* Custom gradient text for roles */
.gradient-text{-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 3s linear infinite;background-size:200% 100%}
@keyframes gradient-shift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.gradient-border{border:2px solid transparent;animation:gradient-shift 3s linear infinite;background-size:200% 100%}

/* Text formatting styles */
.spoiler{background:#111;color:transparent;cursor:pointer;padding:0 4px;border-radius:4px;user-select:none;transition:all 0.2s}
.spoiler:hover{background:#1a1a1a}
.spoiler.revealed{background:transparent;color:var(--fg);user-select:text}
.heading{font-size:20px;font-weight:700;display:inline}
s{text-decoration:line-through;opacity:0.7}

/* Mentions */
.user-mention,.channel-mention{display:inline-block;transition:transform 0.1s,box-shadow 0.1s}
.user-mention:hover,.channel-mention:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(59,130,246,0.4)}
.channel-mention{cursor:pointer}
.your-mention{box-shadow:0 0 10px rgba(234,179,8,0.5)}
@keyframes pulse-mention{0%,100%{box-shadow:0 0 10px rgba(234,179,8,0.5)}50%{box-shadow:0 0 20px rgba(234,179,8,0.8)}}