.auth-inner .auth-logo {
  width: 168px !important;
  height: 168px !important;
  background: url("/assets/logo2017.svg") !important;
  background-size: 168px 168px !important;
}

.auth-name {
  display: none !important;
}

a[class^="logo-"],
form[class^="authBox-"]::before {
  background: url("/assets/logo.svg") !important;
  width: 152px !important;
  height: 30px !important;
}

/* The auth page centres its card inside a scrolling wrapper that is positioned
   left:0/right:0. When the scrollbar appears the wrapper loses that width from
   its right edge only, so the card drifts left by half a scrollbar. Reserving
   the gutter on both edges keeps it centred whether or not the page scrolls. */
[class^="wrapper-"]:has([class^="authBox-"]) {
  scrollbar-gutter: stable both-edges;
}

/* ---------------------------------------------------------------------
   Account panel (bottom left). The 2018 markup is restyled to the modern
   proportions, scoped to the one container that holds the account details
   so no other panel in the client is affected.

   Each container rule is written twice: once pinned to the december_31_2018
   class, and once as a build-agnostic :has() form for other builds. The
   panel colour and the status ring share a scope deliberately, so they can
   never apply independently and leave a mismatched ring.
   --------------------------------------------------------------------- */

/* Modern sits the panel on its own darker floor instead of a translucent wash. */
.container-2Thooq,
[class^="container-"]:has(> [class^="accountDetails-"]) {
  background: #232428 !important;
  padding: 0 8px !important;
}

/* The status ring is drawn in the panel's colour so it reads as a cutout.
   It has to move with the new floor or it shows as a mismatched halo. */
.container-2Thooq [class^="status-"],
[class^="container-"]:has(> [class^="accountDetails-"]) [class^="status-"] {
  border-color: #232428 !important;
}

/* Without min-width:0 this flex item will not shrink, so a long name shoves
   the buttons off the edge instead of ellipsing. */
[class^="accountDetails-"] {
  min-width: 0 !important;
}

/* Line one: the name, given the width the old fixed 84px cap denied it. */
[class^="accountDetails-"] .username {
  max-width: 100% !important;
  color: #f2f3f5 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
}

/* Line two: reads as the modern secondary line rather than a dim afterthought. */
[class^="accountDetails-"] .discriminator {
  max-width: 100% !important;
  margin-top: 0 !important;
  color: #b5bac1 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  opacity: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Icons: the modern grey sits brighter than the old 60% wash, on a squarer
   hover plate. */
.container-2Thooq [class^="button-"],
[class^="container-"]:has(> [class^="accountDetails-"]) [class^="button-"] {
  border-radius: 4px !important;
  opacity: 0.72 !important;
}

.container-2Thooq [class^="button-"]:hover,
[class^="container-"]:has(> [class^="accountDetails-"]) [class^="button-"]:hover {
  background-color: rgba(78, 80, 88, 0.3) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   Typeface. "gg sans" is Discord's own face (2022+) and is proprietary, so
   it is not bundled and cannot be shipped from here. It is listed first so
   it is used when the viewer has it installed locally; otherwise this falls
   back to Nebula Sans, which IS bundled with Oldcord.
   --------------------------------------------------------------------- */
* {
  font-family: "gg sans", "Nebula Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Code stays monospace - a proportional face in a code block is a regression. */
code,
pre,
kbd,
samp,
[class*="codeBlock"],
[class*="inlineCode"],
[class*="hljs"] {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Courier New", monospace !important;
}

/* ---------------------------------------------------------------------
   Friends / Store icons, swapped for the modern glyphs. The stock markup is
   an inline <svg>, whose paths CSS cannot rewrite - so the original artwork
   is hidden and the new glyph is drawn as a mask, which keeps it inheriting
   currentColor and so keeps the existing hover and selected states intact.
   --------------------------------------------------------------------- */
.channel-2QD9_O a[href="/channels/@me"] svg[class^="linkButtonIcon-"] > *,
.channel-2QD9_O a[href^="/store"] svg[class^="linkButtonIcon-"] > * {
  display: none !important;
}

.channel-2QD9_O a[href="/channels/@me"] svg[class^="linkButtonIcon-"],
.channel-2QD9_O a[href^="/store"] svg[class^="linkButtonIcon-"] {
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 20px 20px !important;
  mask-size: 20px 20px !important;
}

.channel-2QD9_O a[href="/channels/@me"] svg[class^="linkButtonIcon-"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13%2010a4%204%200%201%200%200-8%204%204%200%200%200%200%208Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M3%205v-.75C3%203.56%203.56%203%204.25%203s1.24.56%201.33%201.25C6.12%208.65%209.46%2012%2013%2012h1a8%208%200%200%201%208%208%202%202%200%200%201-2%202%20.21.21%200%200%201-.2-.15%207.65%207.65%200%200%200-1.32-2.3c-.15-.2-.42-.06-.39.17l.25%202c.02.15-.1.28-.25.28H9a2%202%200%200%201-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85%2015.85%200%200%201%203%205Z%22%2F%3E%3C%2Fsvg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13%2010a4%204%200%201%200%200-8%204%204%200%200%200%200%208Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M3%205v-.75C3%203.56%203.56%203%204.25%203s1.24.56%201.33%201.25C6.12%208.65%209.46%2012%2013%2012h1a8%208%200%200%201%208%208%202%202%200%200%201-2%202%20.21.21%200%200%201-.2-.15%207.65%207.65%200%200%200-1.32-2.3c-.15-.2-.42-.06-.39.17l.25%202c.02.15-.1.28-.25.28H9a2%202%200%200%201-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85%2015.85%200%200%201%203%205Z%22%2F%3E%3C%2Fsvg%3E") !important;
}

.channel-2QD9_O a[href^="/store"] svg[class^="linkButtonIcon-"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M2.63%204.19A3%203%200%200%201%205.53%202H7a1%201%200%200%201%201%201v3.98a3.07%203.07%200%200%201-.3%201.35A2.97%202.97%200%200%201%204.98%2010c-2%200-3.44-1.9-2.9-3.83l.55-1.98ZM10%202a1%201%200%200%200-1%201v4a3%203%200%200%200%203%203%203%203%200%200%200%203-2.97V3a1%201%200%200%200-1-1h-4ZM17%202a1%201%200%200%200-1%201v3.98a3.65%203.65%200%200%200%200%20.05A2.95%202.95%200%200%200%2019.02%2010c2%200%203.44-1.9%202.9-3.83l-.55-1.98A3%203%200%200%200%2018.47%202H17Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M21%2011.42V19a3%203%200%200%201-3%203h-2.75a.25.25%200%200%201-.25-.25V16a2%202%200%200%200-2-2h-2a2%202%200%200%200-2%202v5.75c0%20.14-.11.25-.25.25H6a3%203%200%200%201-3-3v-7.58c0-.18.2-.3.37-.24a4.46%204.46%200%200%200%204.94-1.1c.1-.12.3-.12.4%200a4.49%204.49%200%200%200%206.58%200c.1-.12.3-.12.4%200a4.45%204.45%200%200%200%204.94%201.1c.17-.07.37.06.37.24Z%22%2F%3E%3C%2Fsvg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M2.63%204.19A3%203%200%200%201%205.53%202H7a1%201%200%200%201%201%201v3.98a3.07%203.07%200%200%201-.3%201.35A2.97%202.97%200%200%201%204.98%2010c-2%200-3.44-1.9-2.9-3.83l.55-1.98ZM10%202a1%201%200%200%200-1%201v4a3%203%200%200%200%203%203%203%203%200%200%200%203-2.97V3a1%201%200%200%200-1-1h-4ZM17%202a1%201%200%200%200-1%201v3.98a3.65%203.65%200%200%200%200%20.05A2.95%202.95%200%200%200%2019.02%2010c2%200%203.44-1.9%202.9-3.83l-.55-1.98A3%203%200%200%200%2018.47%202H17Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M21%2011.42V19a3%203%200%200%201-3%203h-2.75a.25.25%200%200%201-.25-.25V16a2%202%200%200%200-2-2h-2a2%202%200%200%200-2%202v5.75c0%20.14-.11.25-.25.25H6a3%203%200%200%201-3-3v-7.58c0-.18.2-.3.37-.24a4.46%204.46%200%200%200%204.94-1.1c.1-.12.3-.12.4%200a4.49%204.49%200%200%200%206.58%200c.1-.12.3-.12.4%200a4.45%204.45%200%200%200%204.94%201.1c.17-.07.37.06.37.24Z%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* ---------------------------------------------------------------------
   Float the account panel across both columns, so it reads as one bar under
   the server rail and the channel sidebar together.

   position:fixed, not a negative margin. The panel's ancestors clip their
   overflow, so an overhang gets cut off at the sidebar edge - which ate the
   avatar and sheared the name down to its last few letters. Fixed positioning
   is not clipped by ancestor overflow, so the bar can cross both columns.

   It leaves the flow as a result, so both columns below need a floor added
   or their last row would sit underneath it.
   --------------------------------------------------------------------- */
.container-2Thooq,
[class^="container-"]:has(> [class^="accountDetails-"]) {
  position: fixed !important;
  bottom: 8px !important;
  left: 8px !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  /* 310px spans both columns; less the 8px gap held at each side. */
  width: 294px !important;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid #383a40 !important;
  border-radius: 8px !important;
}

/* Keep the last server icon clear of the panel it now sits beneath.
   68px = the 60px bar plus the 8px it is lifted off the bottom edge. */
[class^="guilds-"] {
  padding-bottom: 68px !important;
}

/* Reserve the height the panel gave up when it left the flow, so the last
   channel or DM is not hidden behind it. */
.channels-Ie2l6A,
[class^="channels-"] {
  box-sizing: border-box !important;
  padding-bottom: 68px !important;
}

/* ---------------------------------------------------------------------
   Nebula Sans @font-face, duplicated from loading.css on purpose.
   The bootloader removes the loading.css <link> once the client mounts
   (main.js: loadingCss?.remove()), which would take these declarations
   with it and leave the font stack falling through to Helvetica. This
   stylesheet is not removed, so the face stays registered.
   size-adjust is kept at 92.5% - Nebula Sans runs larger than Whitney.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-Book.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-BookItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-Medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-MediumItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-Semibold.woff2") format("woff2");
  font-weight: 650;
  font-style: normal;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-SemiboldItalic.woff2") format("woff2");
  font-weight: 650;
  font-style: italic;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  size-adjust: 92.5%;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/NebulaSans-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  size-adjust: 92.5%;
}


/* ---------------------------------------------------------------------
   Message bar, levelled with the account panel.

   The input ships at margin-bottom:30px while the panel floats 8px off the
   bottom, so the two sat on different lines. Matching the panel's 8px offset
   and its 60px height puts both on one baseline across the window.
   --------------------------------------------------------------------- */
[class^="channelTextArea-"] {
  margin-bottom: 8px !important;
}

[class^="channelTextArea-"] [class^="inner-"] {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  /* min-height, not height: the box must still grow for a multi-line draft. */
  min-height: 60px !important;
  border-radius: 8px !important;
}

/* Message bar wears the same surface and edge as the account panel, so the
   two read as one pair rather than two unrelated boxes on the same line. */
[class^="channelTextArea-"] [class^="inner-"] {
  background-color: #232428 !important;
  border: 1px solid #383a40 !important;
}