/* Vix Voice / Aurora — shared desktop and browser interface. */
:root {
  --hud-edge: color-mix(in srgb, var(--theme-accent) 11%, var(--theme-panel));
  --hud-soft: color-mix(in srgb, var(--theme-panel) 68%, var(--theme-bg));
  --hud-glow: color-mix(in srgb, var(--theme-accent) 16%, transparent);
  --hud-ease: cubic-bezier(.2,.75,.25,1);
}
body { background: var(--theme-bg) !important; }
.app {
  width:100%; height:100dvh; min-height:0; padding:10px 10px 10px 0;
  grid-template-columns:72px 252px minmax(0,1fr) 232px; gap:10px;
  background:radial-gradient(ellipse at 12% 0,var(--hud-glow),transparent 42%),var(--theme-bg);
  animation:hud-arrive .45s var(--hud-ease) both;
}
.app :is(button,a,input,select,summary) { -webkit-tap-highlight-color:transparent; }
.app :is(button,[role=button],summary):focus-visible {
  outline:2px solid var(--theme-accent); outline-offset:3px;
}
.app :is(.channels,.main,.members) {
  min-height:0; border:1px solid var(--hud-edge); border-radius:18px;
  box-shadow:0 12px 34px #00000015;
}
.app .servers {
  gap:12px; padding:12px 0; border:0; background:transparent!important;
  overflow-y:auto; scrollbar-width:none;
}
.app .server {
  flex-shrink:0; width:46px; height:46px; border-radius:16px;
  background:var(--hud-soft); box-shadow:none;
  transition:transform .22s var(--hud-ease),border-radius .22s,box-shadow .22s,background .22s;
}
.app .server:hover { transform:translateY(-3px); border-radius:13px; box-shadow:0 8px 22px var(--hud-glow); }
.app .server.active { box-shadow:0 0 0 3px var(--hud-glow),0 8px 24px var(--hud-glow); }
.app .server::before { left:-12px!important; width:3px; border-radius:5px; box-shadow:none; }
.app .server.home { background:linear-gradient(145deg,var(--theme-accent),#6554d9)!important; color:#fff; font-size:23px; }
.app .divider { width:24px; margin:1px 0; opacity:.55; }
.app .server.add { border:1px dashed color-mix(in srgb,var(--theme-accent) 35%,transparent); color:var(--theme-accent); }
.app .channels { overflow:hidden; background:var(--hud-soft)!important; }
.app .server-title {
  height:64px; min-height:64px; padding:0 18px; border-color:var(--hud-edge);
  background:transparent!important; font-size:15px; letter-spacing:-.025em;
}
.app .server-title button { width:28px; height:28px; background:var(--hud-glow); color:var(--theme-accent)!important; }
.app #community-tools {
  display:grid; grid-template-columns:1fr 1fr; gap:5px!important;
  padding:12px!important; border-bottom:1px solid var(--hud-edge)!important;
}
.app #community-tools button {
  min-width:0; min-height:36px; padding:8px!important; gap:7px!important;
  background:transparent!important;
  color:var(--vix-muted)!important; font-size:11px!important; border:1px solid transparent!important;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.app #community-tools button span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.app #community-tools button:hover { border-color:var(--hud-edge)!important; background:var(--hud-glow)!important; color:var(--vix-text)!important; transform:translateY(-1px); }
.app #community-tools button .vix-icon { width:15px; height:15px; color:var(--theme-accent); }
.app .channel-scroll { padding:12px 9px; scrollbar-width:thin; scrollbar-color:var(--hud-edge) transparent; }
.app .category-channel-group { margin:2px 0 18px; }
.app .custom-channel-category { height:30px; padding:0 8px; margin:0 0 4px; gap:6px; font-size:10px; letter-spacing:.075em; }
.app .custom-channel-category::before { height:12px; width:3px; opacity:.9; }
.app .category-room-count { border:0; background:var(--hud-glow); color:var(--theme-accent); font-size:9px; }
.app .custom-channel-category .category-add-room { margin-left:auto; }
.app .category-channel-rooms { margin-left:9px; padding-left:7px; border-color:var(--hud-edge); }
.app .channel {
  min-height:38px; border-radius:10px; font-size:12px; font-weight:550; gap:9px;
  transition:background .18s,color .18s,transform .2s var(--hud-ease),box-shadow .18s;
}
.app .channel:hover { transform:translateX(3px); background:var(--hud-glow)!important; }
.app .channel.active {
  border-color:color-mix(in srgb,var(--theme-accent) 24%,transparent)!important;
  background:linear-gradient(100deg,var(--hud-glow),color-mix(in srgb,var(--theme-accent) 5%,transparent))!important;
  box-shadow:inset 3px 0 var(--theme-accent)!important; color:var(--vix-text)!important;
}
.app .room-kind-icon { width:24px; height:24px; border-radius:7px; background:transparent; }
.app .channel.active .room-kind-icon { color:var(--theme-accent); background:var(--hud-glow); box-shadow:none; }
.app .voice-channel-button.selected { color:var(--vix-success)!important; background:color-mix(in srgb,var(--vix-success) 8%,transparent)!important; box-shadow:none!important; }
.app .voice-users { margin-left:18px; }
.app .voice-user { min-height:32px; font-size:11px; }
.app .profile {
  min-height:65px; padding:10px 12px; gap:9px; box-shadow:none; border-color:var(--hud-edge);
  background:color-mix(in srgb,var(--theme-bg) 50%,var(--theme-panel))!important;
}
.app .profile>.avatar { width:35px; height:35px; border-width:1px; box-shadow:0 0 0 3px var(--hud-glow); }
.app .profile-name { font-size:12px; }
.app .profile button { width:29px; height:31px; border-radius:9px; }
.app .profile button:hover { background:var(--hud-glow); transform:rotate(-5deg); }

/* A quiet conversation canvas with a luminous, compact introduction. */
.app .main { overflow:hidden; grid-template-rows:64px minmax(0,1fr); background:var(--theme-bg)!important; }
.app .header {
  height:64px; padding:0 22px; gap:10px; border-color:var(--hud-edge); box-shadow:none;
  background:color-mix(in srgb,var(--theme-panel) 38%,var(--theme-bg))!important; backdrop-filter:none;
}
.app .header>.hash { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--hud-edge); border-radius:10px; background:var(--hud-glow); }
.app #channel-title { font-size:14px; letter-spacing:-.02em; }
.app .header small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.app .header-actions { gap:3px; padding-left:0; }
.app .header-actions span { width:30px; height:32px; }
.app .header-actions span:hover { background:var(--hud-glow); color:var(--theme-accent); }
.app .header>button:not(.mobile-menu) { border:1px solid color-mix(in srgb,var(--theme-accent) 38%,transparent)!important; border-radius:9px!important; padding:8px 12px!important; background:var(--hud-glow)!important; color:var(--vix-text)!important; font-size:11px!important; box-shadow:none; }
.app .chat { background:radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--theme-accent) 4%,transparent),transparent 55%),var(--theme-bg)!important; }
.app #messages { width:100%; max-width:1080px; padding:28px clamp(18px,2.8vw,42px) 18px; margin-inline:auto; scrollbar-width:thin; scrollbar-color:var(--hud-edge) transparent; }
.app .welcome {
  position:relative; isolation:isolate; overflow:hidden; padding:26px 28px; margin:0 0 28px;
  border:1px solid color-mix(in srgb,var(--theme-accent) 22%,var(--theme-panel)); border-radius:18px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--theme-accent) 12%,var(--theme-bg)),var(--theme-bg));
  box-shadow:inset 0 1px #ffffff05;
}
.app .welcome::before {
  content:''; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--vix-accent-2) 12%,transparent),transparent 60%);
}
.app .welcome::after {
  content:'#'; position:absolute; z-index:-1; right:24px; top:-42px; font-size:230px; line-height:1.3;
  font-weight:750; transform:rotate(-12deg); color:color-mix(in srgb,var(--theme-accent) 7%,transparent); pointer-events:none;
}
.app .welcome-icon { width:42px; height:42px; border:1px solid color-mix(in srgb,var(--theme-accent) 30%,transparent); border-radius:13px; background:var(--hud-glow); color:var(--theme-accent); box-shadow:none; }
.app .welcome-icon .vix-icon { width:23px; height:23px; }
.app .welcome h1 { max-width:100%; margin:17px 0 7px; font-size:clamp(20px,2vw,28px); line-height:1.15; letter-spacing:-.045em; overflow-wrap:anywhere; }
.app .welcome p { font-size:12px; line-height:1.6; color:var(--vix-muted); }
.app .message { margin:3px -10px; padding:10px; gap:12px; grid-template-columns:38px minmax(0,1fr); border-radius:12px; }
.app .message:hover { background:color-mix(in srgb,var(--theme-accent) 5%,transparent)!important; }
.app .message .avatar { box-shadow:none; }
.app .message-head { font-size:13px; }
.app .message-text { margin-top:4px; font-size:13px; line-height:1.65; }
.app .message-time { font-size:10px; opacity:.8; }
.app .compose { width:100%; max-width:1080px; margin-inline:auto; padding:12px clamp(18px,2.8vw,42px) 22px; background:transparent; }
.app .compose-inner { min-height:52px; padding:0 10px 0 16px; border-radius:15px; border-color:var(--hud-edge); background:var(--hud-soft)!important; box-shadow:0 8px 25px #00000015; }
.app .compose-inner:focus-within { border-color:color-mix(in srgb,var(--theme-accent) 65%,transparent); box-shadow:0 0 0 3px var(--hud-glow); }
.app #message { height:50px; font-size:13px; }
.app #send { width:34px; height:34px; border-radius:11px; background:linear-gradient(140deg,var(--theme-accent),#7665dc)!important; color:#fff; box-shadow:0 4px 12px var(--hud-glow); }
.app #send:hover { transform:translateY(-2px); box-shadow:0 6px 18px var(--hud-glow); }

/* Members keep their avatars, banners and earned profile decorations. */
.app .members { padding:18px 10px; overflow-y:auto; background:var(--hud-soft)!important; scrollbar-width:thin; scrollbar-color:var(--hud-edge) transparent; }
.app .member-list-toolbar { gap:3px; margin:0 1px 22px; padding:0 0 15px; border-color:var(--hud-edge); flex-wrap:wrap; }
.app .member-list-toolbar>span { flex:1 0 100%; margin-bottom:8px; color:var(--vix-muted); font-size:10px; letter-spacing:.1em; }
.app .member-list-toolbar button { flex:1; min-height:29px; border-radius:8px; font-size:10px; }
.app .member-list-toolbar button.active { background:var(--hud-glow); border-color:color-mix(in srgb,var(--theme-accent) 20%,transparent); color:var(--theme-accent); }
.app .member-section+.member-section { margin-top:25px; }
.app .member-section-title { margin:0 8px 11px; font-size:9px; letter-spacing:.09em; }
.app .member-section-title::after { background:var(--hud-edge); }
.app .member { min-height:56px; margin:4px 0; padding:9px 8px; gap:9px; border-radius:12px; transition:background .2s,border-color .2s,transform .2s var(--hud-ease); }
.app .member:hover { transform:translateX(-2px); border-color:color-mix(in srgb,var(--theme-accent) 25%,transparent); background-color:var(--hud-glow); }
.app .member .avatar { width:34px; height:34px; flex:none; box-shadow:none; }
.app .member-name { font-size:12px; }
.app .member-role { margin-top:4px; font-size:10px; }
.app .member.is-offline { opacity:.72; }
.app .member.is-offline:hover { opacity:1; }

/* Voice dock: status first, controls second, optional settings last. */
.app .voice-state.modern-call-panel {
  margin:8px 10px 10px; padding:0; max-height:55dvh; flex-shrink:0;
  border:1px solid color-mix(in srgb,var(--theme-accent) 20%,var(--theme-panel)); border-radius:15px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--theme-panel) 88%,var(--theme-accent)),var(--theme-bg));
  box-shadow:0 6px 22px #00000020; color:var(--vix-text);
}
.app .call-panel-head { position:relative; grid-template-columns:minmax(0,1fr) auto; gap:5px 8px; padding:13px 12px 11px; border-color:var(--hud-edge); }
.app .call-panel-head>div { grid-column:1; gap:7px; }
.app .call-panel-head strong { font-size:11px; font-weight:700; color:var(--vix-success); }
.app .call-panel-head>small { grid-column:1; grid-row:2; width:max-content; max-width:100%; padding:0 0 0 14px; background:transparent; border-radius:0; color:var(--vix-muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app .call-status-dot { width:6px; height:6px; box-shadow:0 0 0 3px color-mix(in srgb,var(--vix-success) 12%,transparent); }
.app .connection-ping { grid-column:2; grid-row:1 / 3; align-self:center; padding:5px 6px; border:1px solid color-mix(in srgb,var(--vix-success) 20%,transparent); border-radius:7px; background:color-mix(in srgb,var(--vix-success) 6%,transparent); box-shadow:none; }
.app .connection-ping strong { font-size:10px; color:inherit; }
.app .call-primary-actions { gap:5px; padding:9px 9px 6px; }
.app .call-action {
  min-height:49px; padding:9px 2px!important; gap:6px; border-radius:10px!important;
  border:1px solid var(--hud-edge)!important; background:var(--hud-soft)!important; color:var(--vix-muted)!important;
  font-size:10px!important; font-weight:600; cursor:pointer;
  transition:background .18s,border-color .18s,transform .2s var(--hud-ease),box-shadow .2s;
}
.app .call-action:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--theme-accent) 45%,transparent)!important; box-shadow:0 5px 12px #00000018; }
.app .call-action:active { transform:translateY(0) scale(.97); }
.app .call-action.is-active { border-color:color-mix(in srgb,var(--vix-success) 16%,transparent)!important; background:color-mix(in srgb,var(--vix-success) 7%,var(--theme-bg))!important; color:var(--vix-success)!important; }
.app .call-action.is-active .call-action-icon { color:var(--vix-success); }
.app .call-action.is-danger { border-color:color-mix(in srgb,var(--vix-danger) 18%,transparent)!important; background:color-mix(in srgb,var(--vix-danger) 7%,var(--theme-bg))!important; color:var(--vix-danger)!important; }
.app .call-screen-row { gap:6px; padding:0 9px 10px; grid-template-columns:minmax(0,1fr) 36px; }
.app .call-screen-row .call-action { height:36px!important; min-height:36px; font-size:10px!important; }
.app .call-screen-row .call-action:first-child:not(.is-danger) { background:var(--hud-glow)!important; border-color:color-mix(in srgb,var(--theme-accent) 26%,transparent)!important; color:var(--vix-text)!important; }
.app .call-screen-row .call-action:last-child>span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.app .call-action:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.app .compact-stream-settings { border-color:var(--hud-edge); background:transparent; }
.app .compact-stream-settings .stream-settings-head { height:37px; padding:0 12px; font-size:10px; color:var(--vix-muted); }
.app .compact-stream-settings .stream-settings-head:hover { background:var(--hud-glow); color:var(--vix-text); }
.app .compact-stream-settings .stream-settings-head span::before { color:var(--theme-accent); }
.app .compact-stream-settings .stream-settings-head small { font-size:9px; color:var(--vix-muted); }
.app .stream-settings-body { padding:3px 10px 12px; }
.app .stream-selectors { gap:7px; }
.app .stream-selectors label { display:grid; gap:5px; color:var(--vix-muted); font-size:9px; }
.app .stream-selectors select { height:31px; border-color:var(--hud-edge); border-radius:8px; background:var(--theme-bg); color:var(--vix-text); font-size:10px; }
.app .stream-boost-hint { margin:8px 0 0; padding:0; border:0; background:transparent; color:var(--vix-muted); font-size:9px; line-height:1.55; }
.app .stream-settings-body .stream-audio-toggle { justify-content:space-between; margin-top:9px; padding:8px 0 0; border-top:1px solid var(--hud-edge); }
.app .stream-audio-toggle strong { color:var(--vix-text); font-size:10px; }
.app .call-offline { padding:15px 12px; color:var(--vix-muted); }
.app .call-offline strong { color:var(--vix-text); font-size:11px; }
.app .call-offline small { display:block; margin-top:5px; color:var(--vix-muted); font-size:10px; }
.app .call-offline .call-status-dot { background:var(--vix-muted); box-shadow:none; }
.app .connection-details { margin:0 9px 9px; border-color:var(--hud-edge); background:var(--theme-bg); }
.app .connection-metrics div { background:var(--hud-soft); }

/* Native overlays enter softly; no perpetual animations during calls. */
.join-modal:not([hidden])>.join-card,.community-overlay:not([hidden])>.community-card { animation:hud-dialog .22s var(--hud-ease) both; }
@keyframes hud-arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes hud-dialog { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@media(min-width:1600px) { .app { grid-template-columns:76px 270px minmax(0,1fr) 250px; gap:14px; padding-top:14px; padding-bottom:14px; padding-right:14px; } }
@media(max-width:1150px) { .app { grid-template-columns:62px 238px minmax(0,1fr) 210px; gap:8px; } .app .header { padding-inline:16px; } .app .header small { display:none; } .app .header-actions { gap:0; } }
@media(max-width:980px) { .app { grid-template-columns:62px 244px minmax(0,1fr); } .app .members { display:none; } }
@media(max-width:600px) {
  .app { grid-template-columns:54px minmax(0,1fr); gap:5px; padding:5px 5px 5px 0; }
  .app .server { width:38px; height:38px; border-radius:13px; }
  .app .servers { gap:10px; padding-top:9px; }
  .app .main { border-radius:14px; grid-template-rows:56px minmax(0,1fr); }
  .app .header { height:56px; padding-inline:10px; gap:6px; }
  .app .header>.hash { display:none!important; }
  .app .header-actions span { width:25px; }
  .app .header>button:not(.mobile-menu) { padding:7px 8px!important; font-size:10px!important; }
  .app .channels { top:5px!important; bottom:5px!important; left:54px!important; border-radius:14px; box-shadow:18px 0 55px #0007; }
  .app #messages { padding:18px 14px; }
  .app .welcome { padding:22px 18px; margin-bottom:18px; }
  .app .welcome h1 { font-size:22px; }
  .app .compose { padding:8px 10px 12px; }
  .app .compose-inner { gap:7px; padding-left:10px; }
  .app #message { font-size:12px; }
}
@media(max-height:680px) and (min-width:601px) {
  .app { padding-block:6px; }
  .app .server-title { height:52px; min-height:52px; }
  .app #community-tools { padding:8px!important; gap:2px!important; }
  .app .profile { min-height:56px; }
  .app .call-panel-head { padding-block:9px; }
  .app .call-action { min-height:43px; padding-block:7px!important; }
}
@media(prefers-reduced-motion:reduce) {
  .app,.app *,.app *::before,.app *::after,.join-modal>.join-card,.community-overlay>.community-card {
    animation:none!important; transition:none!important; scroll-behavior:auto!important;
  }
}

/* Server-scoped supporter identity */
.app .member-identity-line { display:flex; align-items:center; gap:6px; min-width:0; }
.app .member-identity-line .member-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app .server-supporter-badge { position:relative; isolation:isolate; display:inline-flex; align-items:center; flex:0 0 auto; gap:5px; min-height:20px; padding:2px 8px; overflow:hidden; border:1px solid color-mix(in srgb,#ffd477 50%,transparent); border-radius:999px; background:linear-gradient(135deg,#4c3a20 0%,#2a2430 55%,#3b2e1c 100%); box-shadow:inset 0 1px #fff2,0 3px 12px #ffbd4b1f; color:#ffe2a2; font-size:9px; font-weight:800; letter-spacing:.045em; line-height:1; text-transform:uppercase; }
.app .server-supporter-badge::after { position:absolute; z-index:-1; inset:-40% auto -40% -55%; width:42%; content:""; background:linear-gradient(90deg,transparent,#fff8,transparent); transform:skewX(-18deg); animation:supporter-shimmer 4.8s ease-in-out infinite; }
.app .supporter-spark { color:#ffc85f; font-size:12px; filter:drop-shadow(0 0 5px #ffbf5c99); }
.app .server-supporter-badge.is-compact { min-height:17px; gap:3px; padding:1px 6px; font-size:7px; letter-spacing:.03em; }
.app .server-supporter-badge.is-compact .supporter-spark { font-size:9px; }
.app .member-card-identity .server-supporter-badge { margin-left:2px; }
.app .member-card-chip.server-supporter-chip { --chip-color:#ffc968; border-color:#ffc96855; background:#ffc96813; color:#ffe0a0; }
@keyframes supporter-shimmer { 0%,72% { left:-55%; opacity:0; } 78% { opacity:.8; } 92%,100% { left:125%; opacity:0; } }
@media(max-width:1150px) { .app .server-supporter-badge.is-compact .supporter-label { display:none; } .app .server-supporter-badge.is-compact { width:18px; justify-content:center; padding-inline:0; } }

/* Richer member card surface */
#member-profile-card .member-card-body { isolation:isolate; background:radial-gradient(circle at 90% 3%,color-mix(in srgb,var(--profile-accent) 18%,transparent),transparent 34%),linear-gradient(155deg,color-mix(in srgb,var(--card-base) 88%,#252c3b),color-mix(in srgb,var(--card-base) 97%,#070a10) 72%); }
#member-profile-card .member-card-body::before { position:absolute; z-index:-1; inset:0; border-radius:inherit; content:""; background:linear-gradient(115deg,#ffffff06,transparent 34%,color-mix(in srgb,var(--profile-accent) 6%,transparent)); pointer-events:none; }
#member-profile-card .member-card-mutual { position:relative; isolation:isolate; min-height:58px; overflow:hidden; padding:11px 12px; border-color:color-mix(in srgb,var(--profile-accent) 24%,#ffffff16); background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 13%,#202632),#171c26 58%,color-mix(in srgb,var(--profile-accent) 7%,#131821)); box-shadow:inset 0 1px #ffffff0d,0 8px 22px #02040a35; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
#member-profile-card .member-card-mutual::before { position:absolute; z-index:-1; inset:0 auto 0 0; width:3px; content:""; background:linear-gradient(180deg,var(--profile-accent),color-mix(in srgb,var(--profile-accent) 40%,transparent)); box-shadow:0 0 14px var(--profile-accent); }
#member-profile-card .member-card-mutual::after { position:absolute; z-index:-1; top:-32px; right:-20px; width:95px; height:95px; border-radius:50%; content:""; background:color-mix(in srgb,var(--profile-accent) 13%,transparent); filter:blur(16px); }
#member-profile-card .member-card-mutual:hover { border-color:color-mix(in srgb,var(--profile-accent) 50%,#ffffff1a); box-shadow:inset 0 1px #ffffff12,0 12px 28px #02040a55; transform:translateY(-1px); }
#member-profile-card .member-card-server-mark { border:1px solid color-mix(in srgb,var(--profile-accent) 40%,#ffffff16); background:linear-gradient(145deg,color-mix(in srgb,var(--profile-accent) 34%,#2a3140),#171c27); box-shadow:0 5px 15px #0006,0 0 0 3px color-mix(in srgb,var(--profile-accent) 8%,transparent); }
#member-profile-card .member-card-section { position:relative; overflow:hidden; border-color:color-mix(in srgb,var(--profile-accent) 16%,#ffffff12); background:linear-gradient(145deg,#0c111a99,color-mix(in srgb,var(--profile-accent) 7%,#111722)); box-shadow:inset 0 1px #ffffff08; }
#member-profile-card .member-card-section::after { position:absolute; top:0; right:0; width:42px; height:1px; content:""; background:linear-gradient(90deg,transparent,var(--profile-accent)); opacity:.7; }
#member-profile-card .member-card-chips { padding-top:2px; }
#member-profile-card .member-card-chip { box-shadow:inset 0 1px #ffffff0b,0 4px 10px #0003; }
#member-profile-card .member-card-action { min-height:44px; border-color:color-mix(in srgb,var(--profile-accent) 48%,#ffffff16); background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 52%,#212737),color-mix(in srgb,var(--profile-accent) 28%,#141923)); box-shadow:inset 0 1px #ffffff1a,0 9px 24px color-mix(in srgb,var(--profile-accent) 16%,transparent); }
#member-profile-card .member-card-action:hover { box-shadow:inset 0 1px #ffffff22,0 13px 30px color-mix(in srgb,var(--profile-accent) 25%,transparent); }

/* Profile identity header lives outside .app, so it needs its own badge surface. */
#member-profile-card .member-card-identity { position:relative; align-items:center; gap:8px; min-height:32px; padding:2px 0; }
#member-profile-card .member-card-identity>strong { color:#f8f9fc; font-size:21px; font-weight:850; letter-spacing:-.035em; line-height:1.08; text-shadow:0 2px 12px #000b; }
#member-profile-card .member-card-identity::after { position:absolute; right:0; bottom:-5px; left:0; height:1px; content:""; background:linear-gradient(90deg,color-mix(in srgb,var(--profile-accent) 40%,transparent),transparent 78%); opacity:.65; }
#member-profile-card .server-supporter-badge { position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; flex:none; width:27px; height:27px; padding:0; overflow:hidden; border:1px solid #e7b84f; border-radius:50%; background:radial-gradient(circle,#875e20 0 35%,#4d3214 68%,#24170d 100%); box-shadow:inset 0 0 0 2px #fff1a518,inset 0 -4px 8px #2c1608aa,0 3px 7px #0007; color:#fff1af; line-height:1; transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s ease,box-shadow .2s ease; }
#member-profile-card .server-supporter-badge::after { position:absolute; z-index:0; inset:2px; overflow:hidden; border-radius:50%; content:""; background:linear-gradient(115deg,transparent 25%,#fff8 44%,transparent 61%); background-position:-25px 0; background-size:24px 100%; animation:supporter-medallion-shine 3.8s ease-in-out infinite; pointer-events:none; }
#member-profile-card .server-supporter-badge:hover { box-shadow:inset 0 0 0 2px #fff1a535,inset 0 -4px 8px #2c1608aa,0 4px 9px #0008; filter:saturate(1.18) brightness(1.12); transform:translateY(-1px) scale(1.08); }
#member-profile-card .server-supporter-badge .supporter-spark { position:relative; z-index:1; color:#fffbdc; font-size:16px; font-weight:900; text-shadow:0 1px 0 #8a5416,0 0 3px #fff,0 0 7px #ffd457; filter:saturate(1.25) brightness(1.12); }
#member-profile-card .server-supporter-badge .supporter-label { display:none; }
#member-profile-card .member-card-chip.server-supporter-chip { --chip-color:#ffc968; border-color:#ffc96855; background:#ffc96813; color:#ffe0a0; }
@media(max-width:380px) { #member-profile-card .member-card-identity>strong { font-size:19px; } }
@keyframes supporter-medallion-shine { 0%,68% { background-position:-25px 0; opacity:0; } 76% { opacity:.8; } 94%,100% { background-position:30px 0; opacity:0; } }
@media(prefers-reduced-motion:reduce) { #member-profile-card .server-supporter-badge,#member-profile-card .server-supporter-badge::before,#member-profile-card .server-supporter-badge::after { animation:none!important; } }

/* Modern role, presence and supporter highlights */
#member-profile-card .member-card-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:13px; padding-top:0; }
#member-profile-card .member-card-chip { position:relative; width:100%; min-width:0; min-height:26px; padding:5px 10px 5px 7px; border-color:color-mix(in srgb,var(--chip-color,var(--profile-accent)) 42%,#ffffff18); background:linear-gradient(135deg,color-mix(in srgb,var(--chip-color,var(--profile-accent)) 19%,#151a24),color-mix(in srgb,var(--chip-color,var(--profile-accent)) 7%,#0c1018)); box-shadow:inset 0 1px #ffffff12,0 5px 13px #0004; color:#eef1f7; font-size:9px; font-weight:800; letter-spacing:.012em; transition:border-color .18s ease,filter .18s ease,transform .18s ease,box-shadow .18s ease; }
#member-profile-card .member-card-chip:hover { border-color:color-mix(in srgb,var(--chip-color,var(--profile-accent)) 72%,#ffffff28); box-shadow:inset 0 1px #ffffff18,0 7px 17px #0006; filter:brightness(1.12) saturate(1.1); transform:translateY(-1px); }
#member-profile-card .member-card-chip::before { display:grid; width:15px; height:15px; place-items:center; flex:none; border:1px solid color-mix(in srgb,var(--chip-color,var(--profile-accent)) 52%,transparent); border-radius:5px; background:color-mix(in srgb,var(--chip-color,var(--profile-accent)) 24%,#111620); box-shadow:inset 0 1px #ffffff16,0 0 8px color-mix(in srgb,var(--chip-color,var(--profile-accent)) 22%,transparent); color:color-mix(in srgb,var(--chip-color,var(--profile-accent)) 55%,white); font-size:7px; }
#member-profile-card .member-role-chip { padding-left:10px; }
#member-profile-card .member-role-chip::before { display:none; content:none; }
#member-profile-card .member-card-chip.presence-online { --chip-color:#35d992; border-color:#35d99266; background:linear-gradient(135deg,#174331aa,#111e1a 72%); color:#baffd9; }
#member-profile-card .member-card-chip.presence-online::before { border-color:#49eba57a; border-radius:50%; background:#35d992; box-shadow:inset 0 0 0 4px #173c2d,0 0 9px #35d99288; content:""; }
#member-profile-card .member-card-chip.presence-idle { --chip-color:#e4ad39; color:#ffe6a8; }
#member-profile-card .member-card-chip.presence-dnd { --chip-color:#ef5364; color:#ffc1c8; }
#member-profile-card .member-card-chip.presence-offline { --chip-color:#778093; color:#c3c9d4; }
#member-profile-card .member-card-chip.presence-idle::before,#member-profile-card .member-card-chip.presence-dnd::before,#member-profile-card .member-card-chip.presence-offline::before { border-radius:50%; content:""; box-shadow:inset 0 0 0 4px #171c26,0 0 8px color-mix(in srgb,var(--chip-color) 48%,transparent); }
#member-profile-card .member-card-chip.server-supporter-chip { --chip-color:#ffc968; border-color:#ffc96870; background:linear-gradient(135deg,#5a3e18,#251d15 70%); color:#ffe7aa; }
#member-profile-card .member-card-chip.server-supporter-chip::before { border-color:#ffe09a70; border-radius:50%; background:radial-gradient(circle,#a97726,#4b3012); box-shadow:inset 0 0 0 1px #fff2b226,0 0 8px #ffc14e42; content:"✦"; color:#fff6ca; font-size:10px; text-shadow:0 0 5px #ffd45b; }
#member-profile-card .member-custom-chip::before { content:"✦"; }
#member-profile-card.is-opening .member-card-chip { animation:member-chip-arrive .32s cubic-bezier(.2,.8,.2,1) both; }
#member-profile-card.is-opening .member-card-chip:nth-child(2) { animation-delay:.04s; }
#member-profile-card.is-opening .member-card-chip:nth-child(3) { animation-delay:.08s; }
#member-profile-card.is-opening .member-card-chip:nth-child(4) { animation-delay:.12s; }
@keyframes member-chip-arrive { from { opacity:0; transform:translateY(5px) scale(.96); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { #member-profile-card.is-opening .member-card-chip { animation:none!important; } }

/* Member context actions */
#member-context-menu { position:fixed; z-index:140; width:246px; padding:7px; border:1px solid #ffffff12; border-radius:12px; background:linear-gradient(155deg,#252a35f7,#171b24fa 72%); box-shadow:0 20px 55px #000c,inset 0 1px #ffffff0d; color:#edf0f6; backdrop-filter:blur(18px); animation:member-context-in .14s cubic-bezier(.2,.8,.2,1); }
#member-context-menu[hidden] { display:none; }
#member-context-menu hr { height:1px; margin:6px 4px; border:0; background:#ffffff12; }
.member-context-item { position:relative; display:grid; grid-template-columns:23px minmax(0,1fr) auto; align-items:center; width:100%; min-height:37px; padding:6px 8px; border:0; border-radius:7px; background:transparent; color:#e7eaf1; text-align:left; cursor:pointer; transition:background-color .14s ease,color .14s ease,transform .14s ease; }
.member-context-item:hover,.member-context-item:focus-visible { outline:0; background:linear-gradient(90deg,color-mix(in srgb,var(--theme-accent) 30%,#343a49),#343a49aa); color:white; transform:translateX(1px); }
.member-context-item:disabled { color:#697183; cursor:default; transform:none; }
.member-context-item:disabled:hover { background:transparent; }
.member-context-icon { display:grid; width:17px; height:17px; place-items:center; border-radius:5px; background:#ffffff0b; color:#aeb5c5; font-size:9px; font-weight:850; }
.member-context-item:hover>.member-context-icon { color:white; background:#ffffff14; }
.member-context-arrow { color:#858d9d; font-size:20px; line-height:1; }
.member-context-submenu { position:absolute; top:-7px; left:calc(100% + 8px); display:none; width:210px; padding:7px; border:1px solid #ffffff12; border-radius:11px; background:#1b202af8; box-shadow:0 16px 42px #000b; }
#member-context-menu.opens-left .member-context-submenu { right:calc(100% + 8px); left:auto; }
.member-context-item:hover>.member-context-submenu,.member-context-item:focus-within>.member-context-submenu { display:block; }
.member-context-item.is-danger { color:#ff9ba4; }
.member-context-submenu.member-role-picker { width:244px; max-height:min(520px,calc(100vh - 24px)); overflow-y:auto; padding:8px; scrollbar-width:thin; }
.member-role-picker-status { padding:12px 10px; color:#929aab; font-size:12px; }
.member-role-picker-status.is-error { color:#ff9ba4; }
.member-role-option { display:grid; grid-template-columns:14px minmax(0,1fr) 20px; align-items:center; gap:10px; width:100%; min-height:38px; padding:7px 8px; border:0; border-radius:7px; background:transparent; color:#e7eaf1; text-align:left; cursor:pointer; transition:background-color .14s ease,color .14s ease; }
.member-role-option:hover:not(:disabled),.member-role-option:focus-visible { outline:0; background:#ffffff0d; color:#fff; }
.member-role-option:disabled { cursor:default; opacity:1; }
.member-role-option:disabled:not([aria-checked="true"]) { opacity:.44; }
.member-role-swatch { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 2px #ffffff0a; }
.member-role-option>span:nth-child(2) { overflow:hidden; font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.member-role-check { display:grid; width:19px; height:19px; place-items:center; border:1px solid #687184; border-radius:5px; color:#bec5ff; font-size:12px; font-weight:900; }
.member-role-option[aria-checked="true"] .member-role-check { border-color:color-mix(in srgb,var(--theme-accent) 70%,white); background:color-mix(in srgb,var(--theme-accent) 35%,#232938); box-shadow:0 0 12px color-mix(in srgb,var(--theme-accent) 20%,transparent); }
.member-role-picker .member-role-manage { margin-top:2px; }
@keyframes member-context-in { from { opacity:0; transform:translateY(4px) scale(.98); } to { opacity:1; transform:none; } }
@media(max-width:560px) { #member-context-menu { width:min(246px,calc(100vw - 16px)); } .member-context-submenu { right:0; left:auto; top:calc(100% + 4px); } }
@media(prefers-reduced-motion:reduce) { #member-context-menu { animation:none; } }
.server-switch-loading{height:100%;display:grid;place-content:center;justify-items:center;gap:12px;color:#9298aa;font-size:12px}.server-switch-loading span{width:28px;height:28px;border:3px solid #6d5df52b;border-top-color:#8b7cff;border-radius:50%;animation:server-switch-spin .65s linear infinite}.server-switch-loading strong{font-weight:700}@keyframes server-switch-spin{to{transform:rotate(360deg)}}

/* Unified typography and quick room creation */
html,body,.app,.join-modal,.management-modal,.server-invite-modal,.user-settings-modern{font-family:"Segoe UI Variable Text","Segoe UI Variable",Inter,"Segoe UI",system-ui,sans-serif;font-optical-sizing:auto;font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app button,.app input,.app select,.app textarea,.join-modal button,.join-modal input,.join-modal select{font:inherit}
.app .server-title,.app .header,.app .profile-name,.app .member-name,.app .message-head,#member-profile-card h1,#member-profile-card strong,.join-card h1,.management-shell h1,.management-shell h2{font-family:"Segoe UI Variable Display","Segoe UI Variable Text",Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.025em}
.app .message-text,#member-profile-card .member-card-about p{letter-spacing:-.006em;line-height:1.58}
.channel-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 2px 11px;padding-bottom:10px;border-bottom:1px solid var(--hud-edge,#2c3342)}
.channel-quick-actions button{min-width:0;height:30px;border:1px solid color-mix(in srgb,var(--theme-accent) 30%,#303849);border-radius:8px;background:color-mix(in srgb,var(--theme-accent) 9%,#151a23);color:#aeb6c7;font-size:9px;font-weight:750;cursor:pointer;transition:.16s}
.channel-quick-actions button:hover{border-color:color-mix(in srgb,var(--theme-accent) 62%,#303849);background:color-mix(in srgb,var(--theme-accent) 17%,#171c25);color:#fff;transform:translateY(-1px)}

/* Submenus de moderação com mais opções e leitura clara. */
#member-context-menu .member-context-submenu{width:238px}#member-context-menu .member-context-item.is-danger:hover{background:#4a262d;color:#ffd5d8}#member-context-menu .member-context-item.is-danger>.member-context-icon{background:#4b2930;color:#ff9ca5}

/* Acesso moderno: login e cadastro compartilham a mesma linguagem visual do Vix. */
.join-modal{background:radial-gradient(circle at 50% 12%,color-mix(in srgb,var(--theme-accent) 14%,transparent),transparent 34%),linear-gradient(145deg,#070b14f8,#0d1120fa);backdrop-filter:blur(14px)}
.join-card.auth-card{width:min(474px,calc(100vw - 28px));padding:0;overflow:hidden;border:1px solid #394257;border-radius:24px;background:linear-gradient(155deg,#1c2332f8,#131923fb 70%);box-shadow:0 30px 90px #000b,inset 0 1px #ffffff0e;text-align:left}
.auth-hero{display:flex;gap:17px;padding:28px 30px 23px;border-bottom:1px solid #ffffff0d;background:linear-gradient(120deg,color-mix(in srgb,var(--theme-accent) 10%,transparent),transparent 58%)}
.auth-brand{display:grid;flex:0 0 49px;height:49px;place-items:center;border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--theme-accent) 82%,white),var(--theme-accent));box-shadow:0 12px 28px color-mix(in srgb,var(--theme-accent) 28%,transparent);color:#fff;font-size:21px}
.auth-hero small{display:block;margin:2px 0 6px;color:color-mix(in srgb,var(--theme-accent) 70%,#c8d0e0);font-size:9px;font-weight:850;letter-spacing:.19em}.auth-hero h1{margin:0 0 5px;font-size:27px;line-height:1.08}.auth-hero p{margin:0;color:#929bad;font-size:12px;line-height:1.5}
.auth-invite-note{display:flex;align-items:center;gap:11px;margin:18px 30px 0;padding:11px 13px;border:1px solid color-mix(in srgb,var(--theme-accent) 28%,#30394a);border-radius:12px;background:color-mix(in srgb,var(--theme-accent) 9%,#131923)}.auth-invite-note>span{display:grid;width:29px;height:29px;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--theme-accent) 22%,#202838);color:#c9c4ff}.auth-invite-note strong,.auth-invite-note small{display:block}.auth-invite-note strong{font-size:11px}.auth-invite-note small{margin-top:2px;color:#8f98aa;font-size:10px}
.auth-fields{display:grid;gap:14px;padding:23px 30px 4px}.auth-field{display:grid!important;gap:7px;margin:0!important;color:#9da6b8!important;font-size:9px!important;font-weight:800!important;letter-spacing:.08em}.auth-input{display:flex;align-items:center;height:46px;border:1px solid #30394a;border-radius:12px;background:#0e141e;transition:border-color .16s,box-shadow .16s,background .16s}.auth-input:focus-within{border-color:#667085;background:#101722;box-shadow:0 0 0 3px #ffffff08}.auth-input>i{display:grid;width:43px;place-items:center;color:#778198;font-size:12px;font-style:normal}.join-card.auth-card .auth-input input{min-width:0;height:100%;padding:0 12px 0 0;border:0!important;outline:0;background:transparent;box-shadow:none!important;color:#f3f5f9}.join-card.auth-card .auth-input input::placeholder{color:#626b7d}.password-toggle{display:grid!important;flex:0 0 38px;width:38px!important;height:38px!important;margin:0 4px 0 0!important;padding:0!important;place-items:center;border:0!important;border-radius:9px!important;background:transparent!important;color:#7f899b!important}.password-toggle:hover{background:#ffffff0a!important;color:#dce1eb!important}
.auth-field[hidden],.auth-invite-note[hidden],.auth-forgot[hidden]{display:none!important}.join-card.auth-card .auth-forgot{display:block;width:auto;height:auto;margin:8px 30px 0 auto;padding:2px 0;border:0;background:transparent;color:#a9a1ff;font-size:10px;font-weight:700}.join-card.auth-card .auth-forgot:hover{color:#d2ceff;text-decoration:underline}
.join-card.auth-card #auth-error{min-height:18px;margin:9px 30px 0;color:#ff8e98;font-size:11px}.join-card.auth-card .auth-primary{display:flex;align-items:center;justify-content:center;gap:12px;width:calc(100% - 60px);height:46px;margin:8px 30px 0;border:0;border-radius:12px;background:linear-gradient(100deg,color-mix(in srgb,var(--theme-accent) 85%,#7e8cff),var(--theme-accent));box-shadow:0 12px 25px color-mix(in srgb,var(--theme-accent) 20%,transparent);color:#fff;cursor:pointer;font-weight:780}.auth-primary b{font-size:17px;transition:transform .16s}.auth-primary:hover b{transform:translateX(3px)}.auth-primary.is-loading{cursor:wait;opacity:.72}.auth-primary.is-loading b{animation:auth-arrow-pulse .7s ease-in-out infinite alternate}
.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 30px 0;color:#626c7e;font-size:9px}.auth-divider::before,.auth-divider::after{height:1px;flex:1;background:#ffffff0d;content:""}.join-card.auth-card .auth-secondary{width:calc(100% - 60px);height:42px;margin:10px 30px 0;border:1px solid #30394a;border-radius:12px;background:#171e2a;color:#c8ced9;font-size:12px;font-weight:700}.join-card.auth-card .auth-secondary:hover{border-color:#4a556b;background:#1d2533}.auth-security{margin:14px 30px 22px!important;color:#6f798b!important;font-size:9px!important;text-align:center}
@keyframes auth-arrow-pulse{to{transform:translateX(4px)}}@media(max-width:520px){.auth-hero{padding:23px 22px 19px}.auth-fields{padding:20px 22px 3px}.auth-invite-note{margin:16px 22px 0}.join-card.auth-card #auth-error{margin-left:22px;margin-right:22px}.join-card.auth-card .auth-primary,.join-card.auth-card .auth-secondary{width:calc(100% - 44px);margin-left:22px;margin-right:22px}.auth-divider{margin-left:22px;margin-right:22px}}

/* Menu de membro: ícones vetoriais, agrupamento e melhor leitura. */
#member-context-menu{width:264px;padding:9px;border-radius:16px;background:linear-gradient(155deg,#222936fa,#141923fc 76%);box-shadow:0 26px 70px #000d,inset 0 1px #ffffff10}
.member-context-item{min-height:41px;grid-template-columns:30px minmax(0,1fr) auto;gap:4px;padding:6px 8px;border-radius:10px;font-size:12px;font-weight:650}.member-context-icon{width:25px;height:25px;border-radius:8px;background:#ffffff08;color:#9fa9ba}.member-context-icon .vix-icon{width:14px;height:14px}.member-context-item:hover>.member-context-icon{background:color-mix(in srgb,var(--theme-accent) 22%,#202633);color:#e4e1ff}#member-context-menu hr{margin:7px 5px;background:#ffffff0d}
.gm-badge,.vix-leadership-badge{display:inline-flex;min-width:max-content;height:17px;align-items:center;justify-content:center;padding:0 7px;border:1px solid #e8b84f8c;border-radius:999px;background:linear-gradient(135deg,#5c4017,#23190e);box-shadow:inset 0 1px #fff2b72e,0 0 12px #eeb83924;color:#ffe29a;font-size:7px;font-weight:900;letter-spacing:.085em;line-height:1;white-space:nowrap}
.gm-badge::before,.vix-leadership-badge::before{margin-right:4px;color:#ffd36b;content:'✦';font-size:7px}
.message-leadership-badge{height:16px;margin-left:6px;padding:0 6px;font-size:7px;vertical-align:middle}
#member-profile-card .member-card-chip.gm-profile-chip{--chip-color:#ffd36b;height:22px;border-color:#ffd36b70;background:linear-gradient(135deg,#5d4218,#261c11);color:#ffe6a0;box-shadow:0 0 12px #ffc84a20}

/* Tela de acesso inspirada em aplicativos de comunidade, sem QR Code. */
.join-modal{isolation:isolate;overflow:auto;background:radial-gradient(circle at 72% 28%,#347dff 0,transparent 31%),radial-gradient(circle at 22% 78%,#672bd5 0,transparent 34%),linear-gradient(125deg,#21005f 0%,#172b9a 53%,#168cff 100%)}
.join-modal::before,.join-modal::after{position:absolute;z-index:-1;border-radius:50%;content:"";pointer-events:none}.join-modal::before{left:8%;top:18%;width:190px;height:190px;border:25px solid #ffffff0a;box-shadow:0 0 80px #885dff66;filter:blur(1px)}.join-modal::after{right:9%;bottom:12%;width:145px;height:145px;background:linear-gradient(145deg,#75b7ff24,#b079ff12);box-shadow:0 0 75px #78a7ff42;transform:rotate(28deg)}
.join-card.auth-card{width:min(480px,calc(100vw - 32px));border:0;border-radius:8px;background:#24262cf7;box-shadow:0 20px 55px #08071780;text-align:left;backdrop-filter:blur(12px)}
.auth-hero{display:block;padding:31px 32px 15px;border:0;background:none;text-align:center}.auth-brand{display:none}.auth-hero small{margin:0 0 8px;color:#8ea1ff}.auth-hero h1{margin-bottom:7px;font-size:25px}.auth-hero p{font-size:13px}
.auth-invite-note{margin:4px 32px 2px;border-color:#5966a0;background:#303343}.auth-fields{gap:15px;padding:19px 32px 2px}.auth-field{color:#c5c7ce!important;font-size:10px!important}.auth-input{height:44px;border-color:#17191e;border-radius:4px;background:#181a1f}.auth-input:focus-within{border-color:#6b7cff;background:#181a1f;box-shadow:none}.auth-input>i{width:39px;color:#77809b}.join-card.auth-card #auth-error{margin-right:32px;margin-left:32px}.join-card.auth-card .auth-forgot{margin-right:32px;color:#8ea1ff;font-size:11px}.join-card.auth-card .auth-primary{width:calc(100% - 64px);height:42px;margin:12px 32px 0;border-radius:4px;background:#6671f4;box-shadow:none}.join-card.auth-card .auth-primary:hover{background:#5964df}.auth-divider{display:none}.join-card.auth-card .auth-secondary{width:auto;height:auto;margin:12px 32px 0;padding:0;border:0;background:transparent;color:#91a0ff;font-size:11px;text-align:left}.join-card.auth-card .auth-secondary:hover{border:0;background:transparent;color:#b9c1ff;text-decoration:underline}.auth-security{margin:22px 32px 27px!important;text-align:left}
@media(max-width:520px){.join-card.auth-card{margin:auto}.auth-hero{padding:27px 23px 13px}.auth-fields{padding:18px 23px 2px}.auth-invite-note{margin-right:23px;margin-left:23px}.join-card.auth-card #auth-error{margin-right:23px;margin-left:23px}.join-card.auth-card .auth-forgot{margin-right:23px}.join-card.auth-card .auth-primary{width:calc(100% - 46px);margin-right:23px;margin-left:23px}.join-card.auth-card .auth-secondary,.auth-security{margin-right:23px!important;margin-left:23px!important}}