:root{color-scheme:dark;--bg-rail:#1e1f22;--bg-sidebar:#2b2d31;--bg-main:#313338;--bg-elevated:#111214;--bg-input:#1e1f22;--bg-hover:#35373c;--bg-active:#404249;--text:#f2f3f5;--muted:#b5bac1;--faint:#949ba4;--brand:#5865f2;--brand-hover:#4752c4;--green:#23a559;--red:#f23f42;--yellow:#f0b232;--border:rgba(255,255,255,.08);--shadow:0 8px 24px rgba(0,0,0,.32);--radius:8px;--sidebar:240px;--rail:72px;font:16px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg-main);color:var(--text)}body{min-height:100vh}a{color:#00a8fc;text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button,.button{border:0;border-radius:4px;background:var(--brand);color:#fff;font-weight:600;padding:.65rem 1rem;cursor:pointer;min-height:40px}button:hover,.button:hover{background:var(--brand-hover);text-decoration:none}button:disabled{cursor:not-allowed;opacity:.5}.button-secondary{background:var(--bg-active)}.button-danger,.danger{background:var(--red)}.button-ghost{background:transparent;color:var(--muted);padding:.45rem .6rem}.button-ghost:hover{background:var(--bg-hover);color:var(--text)}:focus-visible{outline:3px solid #00a8fc;outline-offset:2px}input,select,textarea{width:100%;border:1px solid transparent;border-radius:4px;background:var(--bg-input);color:var(--text);padding:.7rem .75rem}input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.14)}input:focus,select:focus,textarea:focus{border-color:#00a8fc;outline:0}label{display:grid;gap:.4rem;color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}form{display:grid;gap:1rem}.form-row{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap}.form-row>*{flex:1;min-width:9rem}.form-row>button,.form-row>.button{flex:0 0 auto}.app-shell{display:grid;grid-template-columns:var(--rail) var(--sidebar) minmax(0,1fr);min-height:100vh}.community-rail{position:sticky;top:0;height:100vh;background:var(--bg-rail);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:10px;z-index:4}.community-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:1.15rem;font-weight:800;transition:border-radius .15s}.community-mark:hover{border-radius:12px;text-decoration:none}.channel-sidebar{position:sticky;top:0;height:100vh;background:var(--bg-sidebar);display:flex;flex-direction:column;min-width:0;z-index:3}.community-header{height:48px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px 0 rgba(0,0,0,.2);font-weight:700}.channel-nav{padding:12px 8px;overflow:auto;flex:1}.channel-category{margin:18px 8px 4px;color:var(--faint);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}.channel-link{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:4px;color:var(--muted);font-weight:500}.channel-link::before{content:"#";color:var(--faint);font-size:1.25rem}.channel-link:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}.channel-link[aria-current=page]{background:var(--bg-active);color:var(--text)}.sidebar-footer{padding:8px;background:rgba(0,0,0,.18);display:grid;gap:3px}.sidebar-footer a{color:var(--muted);padding:5px 8px;border-radius:4px}.sidebar-footer a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}.content-shell{min-width:0;background:var(--bg-main)}.content-header{position:sticky;top:0;z-index:2;height:48px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--bg-main);border-bottom:1px solid rgba(0,0,0,.25);box-shadow:0 1px 2px rgba(0,0,0,.18)}.content-header h1,.content-header h2{font-size:1rem;margin:0}.content-header .hash{font-size:1.4rem;color:var(--faint)}.content{width:min(100%,960px);padding:28px 32px}.content-wide{width:100%;max-width:none}.eyebrow{color:var(--faint);font-size:.75rem;font-weight:800;text-transform:uppercase}.page-title{font-size:1.5rem;margin:0 0 .4rem}.page-description{color:var(--muted);margin:0 0 1.5rem}.card{background:var(--bg-sidebar);border-radius:var(--radius);padding:20px;margin:0 0 16px;border:1px solid var(--border)}.card h2,.card h3{margin-top:0}.stack{display:grid;gap:12px}.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.list-item{background:var(--bg-sidebar);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:12px;border:1px solid var(--border)}.list-item-main{min-width:0;flex:1}.muted{color:var(--muted)}.faint{color:var(--faint)}.badge{display:inline-flex;align-items:center;border-radius:999px;background:var(--bg-active);padding:.15rem .5rem;color:var(--muted);font-size:.75rem;font-weight:700}.badge-success{background:rgba(35,165,89,.2);color:#57f287}.badge-danger{background:rgba(242,63,66,.18);color:#ff7b7d}.notice{padding:12px 14px;border-radius:var(--radius);background:rgba(88,101,242,.18);border:1px solid rgba(88,101,242,.45)}.notice-error{background:rgba(242,63,66,.16);border-color:rgba(242,63,66,.5)}.auth-layout{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#404eed 0,transparent 38%),var(--bg-rail)}.auth-card{width:min(100%,480px);background:var(--bg-main);border-radius:8px;padding:32px;box-shadow:var(--shadow)}.auth-card h1{text-align:center;margin:0 0 8px}.auth-card .subtitle{text-align:center;color:var(--muted);margin:0 0 24px}.messages{padding:16px 0 100px}.message{position:relative;padding:4px 48px 4px 72px;min-height:44px}.message:hover{background:rgba(4,4,5,.08)}.message-avatar{position:absolute;left:16px;top:6px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand);font-weight:800}.message strong{font-size:.95rem}.message .timestamp{color:var(--faint);font-size:.72rem;margin-left:6px}.message .body{display:block;color:#dbdee1;overflow-wrap:anywhere}.message small{color:var(--muted)}.message form{display:inline-flex;gap:5px;margin:4px 4px 0 0}.message form input[name=body]{min-width:260px}.message form button{min-height:30px;padding:.25rem .55rem;font-size:.75rem}.composer-wrap{position:sticky;bottom:0;padding:0 16px 20px;background:linear-gradient(transparent,var(--bg-main) 24%)}.composer{display:flex;align-items:center;gap:8px;background:#383a40;border-radius:8px;padding:8px}.composer input{background:transparent}.composer input[type=file]{max-width:180px;font-size:.75rem}.composer button{flex:0 0 auto}.typing{min-height:20px;margin:2px 16px;color:var(--muted);font-size:.75rem}.settings-layout{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,720px);gap:32px}.settings-nav{display:grid;align-content:start;gap:2px}.settings-nav a{padding:7px 10px;border-radius:4px;color:var(--muted)}.settings-nav a:hover,.settings-nav a[aria-current=page]{background:var(--bg-active);color:var(--text);text-decoration:none}.search-result p{margin:.35rem 0;color:var(--muted)}code{background:var(--bg-input);border-radius:4px;padding:.15rem .35rem;overflow-wrap:anywhere}.mobile-menu{display:none}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){:root{--rail:0px;--sidebar:min(84vw,280px)}.app-shell{grid-template-columns:1fr}.community-rail{display:none}.channel-sidebar{position:fixed;left:0;transform:translateX(-105%);width:var(--sidebar);box-shadow:var(--shadow);transition:transform .18s}.channel-sidebar[data-open=true]{transform:translateX(0)}.content-shell{grid-column:1}.mobile-menu{display:inline-grid;place-items:center;background:transparent;padding:4px;min-height:34px}.content{padding:20px 16px}.settings-layout{grid-template-columns:1fr}.settings-nav{grid-template-columns:repeat(3,minmax(0,1fr));overflow:auto}.message{padding-left:56px;padding-right:12px}.message-avatar{left:8px}.composer input[type=file]{max-width:42px;color:transparent}.form-row{display:grid}.auth-card{padding:24px 18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.profile-avatar-editor { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; row-gap: 10px; align-items: end; }
.profile-avatar-preview { grid-row: 1 / 3; align-self: center; width: 72px; height: 72px; }
.profile-avatar-preview img, .profile-avatar-preview > span { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.profile-avatar-preview > span { display: grid; place-items: center; background: var(--brand); color: white; font-weight: 800; }
.profile-avatar-preview > [hidden] { display: none !important; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.notification-center { position: relative; }
.notification-bell { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; font-size: 1.1rem; }
.notification-popover { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 68px)); overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); box-shadow: var(--shadow); }
.notification-popover[hidden] { display: none; }
.notification-popover h2 { margin: 0 0 12px; font-size: 1rem; }
.notification-popover h3 { margin: 16px 0 6px; color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.notification-popover > label { margin-top: 10px; }
.notification-permission { width: 100%; }
.notification-check { display: flex !important; align-items: center; gap: 8px; min-height: 28px; text-transform: none; }
.notification-check input { width: auto; margin: 0; }
.notification-recent { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.notification-recent li > a { display: grid; gap: 2px; padding: 8px; border-radius: 5px; color: var(--text); }
.notification-recent li > a:hover { background: var(--bg-hover); text-decoration: none; }
.notification-recent strong, .notification-recent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-recent span { color: var(--muted); font-size: .78rem; }
.profile-avatar-editor label { min-width: 0; margin: 0; }
.profile-avatar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-avatar-actions button { height: 40px; }
@media(max-width:520px) {
  .profile-avatar-editor { grid-template-columns: 64px minmax(0, 1fr); }
  .profile-avatar-preview, .profile-avatar-preview img, .profile-avatar-preview > span { width: 64px; height: 64px; }
  .profile-avatar-actions button { flex: 1 1 auto; }
}

.mobile-members, .mobile-sidebar-close, .mobile-members-close, .mobile-drawer-backdrop { display: none; }
.mobile-community-return, .dm-mobile-community-link { display: none; }
@media(max-width:760px) {
  .mobile-drawer-backdrop:not([hidden]) { position: fixed; z-index: 6; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border-radius: 0; background: rgba(0,0,0,.48); }
  .channel-sidebar { z-index: 8; }
  .mobile-sidebar-close, .mobile-members-close { position: absolute; z-index: 2; top: 6px; right: 7px; display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; font-size: 1.6rem; line-height: 1; }
  .channel-sidebar .community-header { padding-right: 52px; }
  .mobile-members { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 4px; }
  .mobile-community-return { display: inline-flex; align-items: center; min-height: 34px; margin-left: auto; }
  .dm-mobile-community-link { display: block; margin: 0 0 12px; padding: 8px 10px; border-radius: 4px; color: var(--text); font-weight: 700; }
  .dm-mobile-community-link:hover { background: var(--bg-hover); text-decoration: none; }
  .content-shell > .content-header:has(> .mobile-members) { padding-right: 6px; }
  .content-shell .participant-sidebar { position: fixed; z-index: 8; top: 0; right: 0; bottom: 0; display: block; width: min(84vw,280px); height: 100dvh; padding-top: 52px; transform: translateX(105%); transition: transform .18s; box-shadow: var(--shadow); }
  .content-shell .participant-sidebar[data-open="true"] { transform: translateX(0); }
}