/* Cax 2026 visual refresh. Loaded last; intentionally presentation-only. */
:root{--cax-bg:#0c0f15;--cax-panel:#151a23;--cax-panel-raised:#1b2230;--cax-line:rgba(173,190,220,.12);--cax-text:#f2f5fb;--cax-subtle:#a0abc0;--cax-accent:#ff735d;--cax-radius:13px;color-scheme:dark}
html{scrollbar-color:#424c60 transparent;scrollbar-width:thin}
body{background:var(--cax-bg);color:var(--cax-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.layout{background:var(--cax-bg)}
.rail{background:#0b0e14;border-right:1px solid var(--cax-line);gap:11px}
.rail button{border-radius:16px;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.rail button:hover{transform:translateY(-2px);box-shadow:0 5px 16px #0003}
.rail button.active{background:var(--cax-accent);color:white;box-shadow:0 4px 16px #ff735d36}
.sidebar{background:#11151e;border-right:1px solid var(--cax-line)}
.sidebar .header,.main .header{border-color:var(--cax-line);font-weight:700;letter-spacing:.01em}
.sidebar .content{padding:12px 9px}
.item{border-radius:9px;transition:background .15s ease,color .15s ease}
.item:hover{background:#252c3a}.item.active{background:#2c3546;color:#fff}
.account{background:#1a202c;border:1px solid var(--cax-line);border-radius:13px}
.main,.chat{background:#131821}.memberlist{background:#11151e;border-left:1px solid var(--cax-line)}
.messages{padding:18px 14px}.message{border-radius:9px;transition:background .13s ease}.message:hover{background:#222a38}
.message .body{line-height:1.55;letter-spacing:.003em}
.composer{padding:12px 16px 17px}.composer input,.composer textarea{background:#202734;border:1px solid #364154;border-radius:12px}
.pane,.modal,.profile,.auth-card{background:#1a202b;border:1px solid var(--cax-line);box-shadow:0 16px 46px #0002}
.pane,.modal{border-radius:15px}.profile{border-radius:16px;box-shadow:0 24px 75px #0008}
.profile .avatar{border-color:#1a202b}.banner{background-color:#2c3b53}
button.primary{background:var(--cax-accent);color:#fff;border-radius:10px;transition:filter .16s,transform .16s}
button.primary:hover{filter:brightness(1.08)}button.primary:active{transform:scale(.985)}
button.outline{border:1px solid #424e62;border-radius:10px;background:#232b3a}
input,textarea,select{background:#171e29;color:var(--cax-text);border:1px solid #3b4659;border-radius:10px;transition:border-color .16s,box-shadow .16s}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid #ff947f;outline-offset:2px}
input:focus,textarea:focus,select:focus{border-color:var(--cax-accent);box-shadow:0 0 0 3px #ff735d1c}
.tabs{gap:7px}.tabs button{border-radius:9px;background:#242d3c;color:#d2d9e6;transition:background .15s}
.tabs button:hover{background:#303b4f}.tabs button.active{background:var(--cax-accent);color:white}
.toast{background:#252d3b;border:1px solid #485367;border-radius:12px;box-shadow:0 14px 35px #0006}
.avatar{background:#303b4d;color:#f6f8ff;display:grid;place-items:center;text-align:center;line-height:1;overflow:visible}
.avatar:not(img){align-items:center;justify-items:center}
.pill{border-radius:8px;background:#293243;border:1px solid #414e64}
.muted,small,.field label{color:#aab4c7}.divider{border-color:var(--cax-line)}
/* Dialogs and settings */
.modal-back{background:rgba(4,7,12,.74);backdrop-filter:blur(5px)}
.settings{max-width:1080px}.settings h1,.settings h2{letter-spacing:-.025em}
/* Light mode: cover both Cax theme conventions. */
html[data-cax-theme="light"],html[data-theme="light"],body.light,body[data-theme="light"]{color-scheme:light;--cax-bg:#f4f6fa;--cax-panel:#fff;--cax-panel-raised:#f8faff;--cax-line:#dfe4ed;--cax-text:#202a3a;--cax-subtle:#64728a;--cax-accent:#e45d49}
html[data-cax-theme="light"] body,html[data-theme="light"] body,body.light,body[data-theme="light"]{background:#f4f6fa;color:#202a3a}
html[data-cax-theme="light"] :is(.layout,.main,.chat),html[data-theme="light"] :is(.layout,.main,.chat),body.light :is(.layout,.main,.chat),body[data-theme="light"] :is(.layout,.main,.chat){background:#f6f8fc;color:#202a3a}
html[data-cax-theme="light"] :is(.sidebar,.memberlist,.rail),html[data-theme="light"] :is(.sidebar,.memberlist,.rail),body.light :is(.sidebar,.memberlist,.rail),body[data-theme="light"] :is(.sidebar,.memberlist,.rail){background:#edf1f7;color:#202a3a;border-color:#dce3ed}
html[data-cax-theme="light"] :is(.pane,.modal,.profile,.auth-card,.account),html[data-theme="light"] :is(.pane,.modal,.profile,.auth-card,.account),body.light :is(.pane,.modal,.profile,.auth-card,.account),body[data-theme="light"] :is(.pane,.modal,.profile,.auth-card,.account){background:#fff;color:#202a3a;border-color:#dfe4ed}
html[data-cax-theme="light"] :is(.item,.message,.tabs button),html[data-theme="light"] :is(.item,.message,.tabs button),body.light :is(.item,.message,.tabs button),body[data-theme="light"] :is(.item,.message,.tabs button){color:#263247}
html[data-cax-theme="light"] :is(.item,.message):hover,html[data-theme="light"] :is(.item,.message):hover,body.light :is(.item,.message):hover,body[data-theme="light"] :is(.item,.message):hover{background:#e9eef7}
html[data-cax-theme="light"] :is(input,textarea,select,.composer input,.composer textarea),html[data-theme="light"] :is(input,textarea,select,.composer input,.composer textarea),body.light :is(input,textarea,select,.composer input,.composer textarea),body[data-theme="light"] :is(input,textarea,select,.composer input,.composer textarea){background:#fff;color:#202a3a;border-color:#cbd4e2}
html[data-cax-theme="light"] .message .body,html[data-theme="light"] .message .body,body.light .message .body,body[data-theme="light"] .message .body{color:#263247}
html[data-cax-theme="light"] .tabs button.active,html[data-theme="light"] .tabs button.active,body.light .tabs button.active,body[data-theme="light"] .tabs button.active{background:#e45d49;color:#fff}
html[data-cax-theme="light"] .profile .avatar,html[data-theme="light"] .profile .avatar,body.light .profile .avatar,body[data-theme="light"] .profile .avatar{border-color:#fff}
@media(max-width:800px){.messages{padding:12px 9px}.composer{padding:10px}.settings{padding:15px}}
@media(prefers-reduced-motion:reduce){.rail button,.item,.message,button.primary,input,textarea,select{transition:none!important}}


/* Cax avatar geometry fix — keep photos circular everywhere without clipping
   decorative frames or presence indicators around them. */
.avatar,
.profile .avatar,
.message .avatar,
.memberlist .avatar,
.member .avatar,
.account .avatar,
.dm-intro .avatar,
.cax-profile .avatar,
.cax-profile-actions .avatar,
.cax-presence-avatar > .avatar,
.cax-decor-avatar > .avatar,
.cax-decorated-avatar > .avatar {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  flex-shrink: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* The actual photograph is cropped to the avatar circle. */
.avatar img,
.profile .avatar img,
.message .avatar img,
.memberlist .avatar img,
.member .avatar img,
.account .avatar img,
.dm-intro .avatar img,
.cax-profile .avatar img,
.cax-profile-actions .avatar img,
.cax-presence-avatar > .avatar img,
.cax-decor-avatar > .avatar img,
.cax-decorated-avatar > .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: center;
}
/* Some avatar components render the image directly, not inside a .avatar. */
img.avatar,
img[class*="avatar-img"],
img[class*="avatar-image"] {
  border-radius: 50% !important;
  object-fit: cover;
  object-position: center;
}
/* Preserve fallback initials centered in the same circular geometry. */
.avatar:not(img) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  line-height: 1;
}
/* The outer decoration wrapper must NOT be clipped to a circle: the decoration
   itself intentionally extends beyond the profile picture. */
.cax-decor-avatar,
.cax-decorated-avatar,
.cax-presence-avatar {
  overflow: visible !important;
}

/* Cax celestial / classic chat theme — reference-inspired, no screenshot assets. */
html[data-cax-theme="dark"],html[data-theme="dark"],html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]){
 --cax-bg:#08090e;--cax-panel:#101015;--cax-panel-raised:#17161c;
 --cax-line:rgba(211,183,148,.13);--cax-text:#eee9e7;--cax-subtle:#aaa4aa;
 --cax-accent:#bd9275;color-scheme:dark;
}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]),html[data-cax-theme="dark"] body{background:#090a10;color:#eee9e7}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) .layout,html[data-cax-theme="dark"] .layout{background:#08090e}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(.rail,.sidebar,.memberlist),html[data-cax-theme="dark"] :is(.rail,.sidebar,.memberlist){background:linear-gradient(180deg,#141116 0%,#100e12 60%,#0b0b10 100%);border-color:rgba(215,180,141,.12)}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(.main,.chat),html[data-cax-theme="dark"] :is(.main,.chat){background-color:#090a11;background-image:radial-gradient(circle at 13% 19%,#ffffff6e 0 .8px,transparent 1.3px),radial-gradient(circle at 76% 41%,#ffffff55 0 .7px,transparent 1.3px),radial-gradient(circle at 42% 75%,#ffffff50 0 .7px,transparent 1.3px),radial-gradient(circle at 91% 86%,#ffffff45 0 .7px,transparent 1.3px),radial-gradient(ellipse at 68% 76%,rgba(112,82,69,.19),transparent 45%),linear-gradient(180deg,#080910,#101016 82%,#08090c);background-size:233px 241px,317px 307px,419px 379px,557px 467px,100% 100%,100% 100%;background-attachment:local}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) .messages,html[data-cax-theme="dark"] .messages{background:transparent}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) .message,html[data-cax-theme="dark"] .message{background:transparent;border-radius:4px}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) .message:hover,html[data-cax-theme="dark"] .message:hover{background:rgba(210,190,176,.07)}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(.sidebar .header,.main .header),html[data-cax-theme="dark"] :is(.sidebar .header,.main .header){background:rgba(17,15,19,.92);border-bottom:1px solid rgba(215,180,141,.15);box-shadow:0 2px 10px #0004}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(.item.active,.rail button.active),html[data-cax-theme="dark"] :is(.item.active,.rail button.active){background:linear-gradient(90deg,rgba(182,137,102,.36),rgba(182,137,102,.06));color:#fff;box-shadow:none}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) .item:hover,html[data-cax-theme="dark"] .item:hover{background:rgba(200,174,152,.12)}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(.account,.pane,.modal,.profile,.auth-card),html[data-cax-theme="dark"] :is(.account,.pane,.modal,.profile,.auth-card){background:#151318;border:1px solid rgba(207,173,137,.2);box-shadow:0 12px 36px #0007}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(.composer input,.composer textarea,input,textarea,select),html[data-cax-theme="dark"] :is(.composer input,.composer textarea,input,textarea,select){background:#1c1a20;border-color:#42383b;color:#f0e9e6}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(button.primary,.tabs button.active),html[data-cax-theme="dark"] :is(button.primary,.tabs button.active){background:#986f58;color:#fff}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(input,textarea,select):focus-visible,html[data-cax-theme="dark"] :is(input,textarea,select):focus-visible{outline-color:#d7aa8d}
/* Keep user-selected light theme readable, with warm accents but no dark overlay. */
html[data-cax-theme="light"],html[data-theme="light"],body.light,body[data-theme="light"]{--cax-accent:#986f58}
html[data-cax-theme="light"] :is(.main,.chat),html[data-theme="light"] :is(.main,.chat),body.light :is(.main,.chat),body[data-theme="light"] :is(.main,.chat){background:#f8f5f2}
html[data-cax-theme="light"] :is(.sidebar,.memberlist,.rail),html[data-theme="light"] :is(.sidebar,.memberlist,.rail),body.light :is(.sidebar,.memberlist,.rail),body[data-theme="light"] :is(.sidebar,.memberlist,.rail){background:#f0ebe7}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* Celestial compatibility and avatar fixes (2026-11-03). */
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) {
  --cax-bg:#090a10; --cax-panel:#141218; --cax-panel-raised:#1c1920;
  --cax-text:#f4eef0; --cax-subtle:#bcb2b9; --cax-accent:#b58b70;
  background:#090a10!important;
}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(.main,.chat,.chat-area,.chat-panel,.messages-panel) {
  background-color:#0a0a11!important;
  background-image:radial-gradient(circle at 10% 20%,#ffffff78 0 0.7px,transparent 1.3px),radial-gradient(circle at 70% 45%,#ffffff62 0 0.7px,transparent 1.4px),radial-gradient(circle at 38% 83%,#ffffff48 0 0.7px,transparent 1.3px),linear-gradient(180deg,#090a10,#111018)!important;
  background-size:223px 251px,313px 337px,419px 383px,100% 100%!important;
}
html:not(.light):not([data-theme="light"]):not([data-cax-theme="light"]) body:not(.light):not([data-theme="light"]) :is(.sidebar,.memberlist,.rail,.channel-sidebar,.members-sidebar) {
  background:#151218!important;
  border-color:#58443d55!important;
}
/* Avatar photos: circular, with no clipping of decoration layers. */
:is(.avatar,.user-avatar,.member-avatar,.message-avatar,.profile-avatar,.dm-avatar,.account-avatar,.avatar-circle):not(.cax-decor-avatar):not(.cax-decorated-avatar):not(.cax-presence-avatar),
:is(img.avatar,img.user-avatar,img.member-avatar,img.message-avatar,img.profile-avatar,img.dm-avatar,img.account-avatar) {
  border-radius:50%!important;
}
:is(.avatar,.user-avatar,.member-avatar,.message-avatar,.profile-avatar,.dm-avatar,.account-avatar) > img:not(.cax-avatar-decoration):not(.cax-decor-overlay):not(.cax-decoration-img),
:is(img.avatar,img.user-avatar,img.member-avatar,img.message-avatar,img.profile-avatar,img.dm-avatar,img.account-avatar) {
  border-radius:50%!important;object-fit:cover!important;object-position:center!important;
}
:is(.avatar,.user-avatar,.member-avatar,.message-avatar,.profile-avatar,.dm-avatar,.account-avatar):not(img):not(.cax-decor-avatar):not(.cax-decorated-avatar) {
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
}
:is(.cax-decor-avatar,.cax-decorated-avatar,.cax-presence-avatar) {overflow:visible!important; border-radius:0!important}
:is(.cax-decor-avatar,.cax-decorated-avatar,.cax-presence-avatar) > :is(.avatar,.user-avatar,.member-avatar,.message-avatar,.profile-avatar,img:not(.cax-avatar-decoration)) {border-radius:50%!important}
/* Prevent square user icons in sidebar/member lists while keeping server icons intact. */
:is(.memberlist,.members-sidebar,.messages,.message,.dm-list,.account,.profile,.user-popout) img:is([class*="avatar"],[class*="pfp"]),
:is(.memberlist,.members-sidebar,.messages,.message,.dm-list,.account,.profile,.user-popout) :is(.avatar,.pfp) img {border-radius:50%!important;object-fit:cover!important}
/* Light mode remains independent of the dark celestial palette. */
html:is(.light,[data-theme="light"],[data-cax-theme="light"]) body,
body:is(.light,[data-theme="light"]) {color-scheme:light}