/*
! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Figtree;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.top-3 {
  top: 0.75rem;
}

.isolate {
  isolation: isolate;
}

.z-10 {
  z-index: 10;
}

.z-\[1100\] {
  z-index: 1100;
}

.z-\[1300\] {
  z-index: 1300;
}

.z-\[2000\] {
  z-index: 2000;
}

.col-span-full {
  grid-column: 1 / -1;
}

.m-0 {
  margin: 0px;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.\!block {
  display: block !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-16 {
  height: 4rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-full {
  height: 100%;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.min-h-\[150px\] {
  min-height: 150px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-16 {
  width: 4rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/5 {
  width: 60%;
}

.w-4 {
  width: 1rem;
}

.w-4\/5 {
  width: 80%;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-md {
  max-width: 28rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.grow {
  flex-grow: 1;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize {
  resize: both;
}

.list-disc {
  list-style-type: disc;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[12px\] {
  border-radius: 12px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
}

.border-orange-700 {
  --tw-border-opacity: 1;
  border-color: rgb(186 63 34 / var(--tw-border-opacity));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-gray-900\/80 {
  background-color: rgb(17 24 39 / 0.8);
}

.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 83 49 / var(--tw-bg-opacity));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white\/75 {
  background-color: rgb(255 255 255 / 0.75);
}

.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-1 {
  padding: 0.25rem;
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pl-8 {
  padding-left: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-\[var\(--font-weight-medium\)\] {
  font-weight: var(--font-weight-medium);
}

.font-bold {
  font-weight: 700;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-snug {
  line-height: 1.375;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[var\(--dc-color-text\)\] {
  color: var(--dc-color-text);
}

.text-\[var\(--dc-color-text-muted\)\] {
  color: var(--dc-color-text-muted);
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(186 63 34 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
}

.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity));
}

.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity));
}

.text-zinc-800 {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.accent-orange-600 {
  accent-color: #d95331;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@font-face {
  font-family: 'Figtree';

  src: url('/static/fonts/Figtree-Regular.ttf') format('truetype');

  font-style: normal;

  font-weight: 400;

  font-display: swap;
}

@font-face {
  font-family: 'Figtree';

  src: url('/static/fonts/Figtree-Medium.ttf') format('truetype');

  font-style: normal;

  font-weight: 500;

  font-display: swap;
}

@font-face {
  font-family: 'Figtree';

  src: url('/static/fonts/Figtree-SemiBold.ttf') format('truetype');

  font-style: normal;

  font-weight: 600;

  font-display: swap;
}

@font-face {
  font-family: 'Figtree';

  src: url('/static/fonts/Figtree-Bold.ttf') format('truetype');

  font-style: normal;

  font-weight: 700;

  font-display: swap;
}

.hidden {
  display: none !important;
}

:root {
  /* --- Color Palette --- */
  /* Text, icon, accent, and danger roles are the --dc-color-* tokens below. */
  /* Accent & State Colors */
  --smart-accent-color: #ffe1b4;
  --smart-accent-bg-soft: rgba(255, 225, 180, 0.12);
  --smart-accent-bg-hover: rgba(255, 225, 180, 0.2);
  --smart-accent-border-soft: rgba(255, 225, 180, 0.35);
  --smart-accent-border-strong: rgba(255, 225, 180, 0.55);
  --accent-coral: rgb(251, 134, 94);
  --accent-electricPurple: rgb(193, 116, 255);
  --accent-richGold: rgb(255, 215, 0);
  --accent-emerald: rgb(94, 251, 120);
  --accent-emerald-tr: rgba(94, 251, 120, 0.5);
  --danger-color-hover: rgba(255, 85, 85, 0.9);
  --danger-bg-tr: rgba(255, 85, 85, 0.3);
  /* Design-system role tokens. Same values as dc-design-system.css. */
  --dc-color-background: #03080a;
  /* Surface layers. The blurred page art is layer 0. A surface is a plain
     translucent fill. base = darkest, sits on the art. raised = the one
     white wash inside a base or float surface. sunken = inputs and tracks.
     float = menus, modals, drawers, bars; pair with --dc-blur-heavy or -light.
     scrim = the overlay behind a modal; pair with --dc-blur-light. */
  --dc-layer-base: rgb(0 0 4 / 50%);
  --dc-layer-base-hover: rgb(0 0 4 / 58%);
  --dc-layer-raised: rgb(252 252 254 / 4%);
  --dc-layer-raised-hover: rgb(252 252 254 / 8%);
  --dc-layer-sunken: rgb(0 0 4 / 30%);
  --dc-layer-sunken-hover: rgb(0 0 4 / 40%);
  --dc-layer-float: rgb(0 0 4 / 68%);
  --dc-layer-float-light: rgb(0 0 4 / 33%);
  --dc-layer-float-solid: rgb(0 0 4 / 85%);
  --dc-layer-scrim: rgb(0 0 4 / 50%);
  --dc-layer-scrim-light: rgb(0 0 4 / 30%);
  /* Solid layers: a near-neutral gray ramp (a light blue tint) for a surface with no art under it
     (the playtester). Depth = lightness: floor < base < raised. Inputs sit
     one step above base. A rule in a solid region uses these names directly
     in place of --dc-layer-*. */
  --dc-solid-floor: #0d0e10;
  --dc-solid-base: #131416;
  --dc-solid-base-hover: #17181a;
  --dc-solid-raised: #1c1d20;
  --dc-solid-raised-hover: #292a2c;
  --dc-solid-sunken: #191a1c;
  --dc-solid-sunken-hover: #1d1e20;
  --dc-solid-float: #151618;
  /* Edges: one hairline at rest, one hover, one focus. Selected = --dc-color-accent-border. */
  --dc-border: #fcfcfe1f;
  --dc-border-hover: #fcfcfe33;
  --dc-border-focus: #fcfcfe4d;
  /* Radius by depth: 1 = base and full-size float, 2 = one level in, 3 = two levels in. */
  --dc-radius-1: 16px;
  --dc-radius-2: 8px;
  --dc-radius-3: 4px;
  --dc-radius-pill: 999px;
  --dc-radius-card: 4.75% / 3.5%;
  /* Shadows: only base and float surfaces cast one. */
  --dc-shadow-base: 0 8px 16px rgb(0 0 4 / 33%), inset 0 1px 0 #fcfcfe0a;
  --dc-shadow-float: 0 12px 32px rgb(0 0 4 / 40%), inset 0 1px 0 #fcfcfe0a;
  --dc-shadow-modal: 0 24px 64px rgb(0 0 4 / 60%), inset 0 1px 0 #fcfcfe0a;
  --dc-shadow-focus: 0 0 0 3px #fcfcfe0f;
  /* Blur: heavy = a surface that holds content (modal, drawer, sidebar, bar).
     light = a surface that hovers above the page (menu, tooltip, toast,
     popover) and the scrim. */
  --dc-blur-heavy: 40px;
  --dc-blur-light: 8px;
  --dc-blur-tiny: 1px;
  --dc-color-text: #fcfcfe;
  --dc-color-text-muted: #fcfcfea0;
  --dc-color-text-subtle: #fcfcfe70;
  --dc-color-accent: #00ffb2;
  --dc-color-accent-hover: #00ffb2e0;
  --dc-color-accent-subtle: #00ffb21a;
  --dc-color-accent-border: #00ffb220;
  --dc-color-danger: hsl(346.8 77.2% 49.8%);
  --dc-color-danger-text: #ff9a9a;
  --dc-color-ring: #00ffb2;
  /* Commander tier colors, same values as the site + DC3.BRACKET_CONFIG */
  --color-tier-blue: #00C2FF;
  /* maps to bracket 1 */
  --color-tier-purple: #B026FF;
  /* maps to bracket 2 */
  --color-tier-mint: #00FFB2;
  /* maps to bracket 3 */
  --color-tier-gold: #FFC700;
  /* maps to bracket 4 */
  --color-tier-pink: #FF2A85;
  /* maps to bracket 5 */
  --dc-duration-fast: 150ms;
  --dc-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dc-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --card-name-color: #e7e7e7;
  --font-size-compact: 14px;
  --dc-control-height-small: 34px;
  --dc-control-height-medium: 44px;
  /* Typography */
  --font-primary: 'Figtree';
  --font-monospace: 'Figtree';
  --font-size-xxs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 28px;
  --font-size-xxxl: 32px;
  --font-size-title: 48px;
  --font-weight-light: 300;
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-xbold: 800;
  --line-height-xxs: 12px;
  --line-height-xs: 14px;
  --line-height-sm: 16px;
  --line-height-base: 20px;
  --line-height-md: 24px;
  --line-height-lg: 26px;
  --line-height-xl: 28px;
  --line-height-xxl: 32px;
  --line-height-xxxl: 36px;
  --line-height-title: 54px;
  --letter-spacing-tight: -0.3px;
  --letter-spacing-normal: 0.3px;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 1px;
  --letter-spacing-superwide: 2px;
  /* Spacing */
  --spacing-card-grid-sm: .375rem;
  --spacing-card-grid-lg: 1rem;
  --spacing-xxs: .25rem;
  --spacing-xs: .5rem;
  --spacing-sm: .75rem;
  --spacing-base: 1rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 1.75rem;
  --spacing-3xl: 2rem;
  --spacing-4xl: 2.25rem;
  --spacing-panel-gap: 2rem;
  --spacing-gap-sm: 4rem;
  --spacing-gap-md: 8rem;
  --spacing-gap-lg: 12rem;
  /* Text effect, not a surface. */
  --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.3);
  /* Opacity */
  --opacity-high: 0.9;
  --opacity-medium: 0.6;
  --opacity-low: 0.3;
  /* Transitions */
  --transition-duration-fast: 0.15s;
  --transition-duration-normal: 0.2s;
  --transition-duration-slow: 0.3s;
  --transition-timing-function-ease: ease;
  --transition-timing-function-ease-out: ease-out;
  --transition-standard: all var(--transition-duration-normal) var(--transition-timing-function-ease);
  --transition-transform: transform var(--transition-duration-normal) var(--transition-timing-function-ease);
  /* Navigation Heights */
  --topbar-control-size: 18px;
  --topbar-vertical-padding: var(--spacing-base);
  --ios-safe-area-top: env(safe-area-inset-top, 0px);
  --nav-topbar-height: calc(
    var(--topbar-control-size) +
    (var(--topbar-vertical-padding) * 2) +
    var(--ios-safe-area-top) +
    1px
  );
  --bottom-control-size: 24px;
  --bottom-nav-vertical-padding: var(--spacing-base);
  --nav-bottom-height: calc(
    var(--bottom-control-size) +
    (var(--bottom-nav-vertical-padding) * 2) +
    1px
  );
}

/* ==========================================
   BASE STYLES & RESET
   ========================================== */

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  background-color: var(--dc-color-background);
  color: var(--dc-color-text);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ios-device {
  --ios-safe-area-top: env(safe-area-inset-top, 0px);
  --nav-topbar-height: calc(
    var(--topbar-control-size) +
    (var(--topbar-vertical-padding) * 2) +
    var(--ios-safe-area-top) +
    1px
  );
}

body.sidebar-open {
  overflow: hidden;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

:disabled {
  cursor: default;
  opacity: 50%;
}

/* Text elements. Same values as the site .dc-prose (the API page look).
   App tokens are one step smaller: app md = site base 16px, app lg = site md 18px. */

h1 {
  font-size: var(--font-size-xxl);
  line-height: 1.15;
  font-weight: var(--font-weight-bold);
  color: var(--dc-color-text);
}

h2 {
  font-size: var(--font-size-xl);
  line-height: 1.25;
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-text);
  margin-bottom: var(--spacing-xs);
}

h3 {
  font-size: var(--font-size-lg);
  line-height: 1.35;
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-text);
}

h4 {
  font-size: var(--font-size-md);
  line-height: 1.35;
  font-weight: var(--font-weight-medium);
  color: var(--dc-color-text);
  margin-bottom: var(--spacing-xs);
}

p {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  line-height: 1.7;
  font-weight: var(--font-weight-base);
  color: var(--dc-color-text-muted);
  margin-bottom: var(--spacing-xs);
}

strong {
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-text);
}

ol, ul, menu {
  list-style: disc;
  font-size: var(--font-size-md);
  line-height: 1.625;
  font-weight: var(--font-weight-base);
  color: var(--dc-color-text-muted);
  margin-bottom: 0.75rem;
}

ol {
  list-style: decimal;
}

li {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  line-height: 1.7;
  font-weight: var(--font-weight-base);
  color: var(--dc-color-text-muted);
  margin-bottom: var(--spacing-xs);
}

li::marker {
  color: var(--dc-color-text-subtle);
}

hr {
  border-top-width: 1px;
  border-color: var(--dc-border);
  margin: 1rem 2rem;
}

h5,
h6 {
  font-size: var(--font-size-md);
  line-height: 1.35;
  font-weight: var(--font-weight-medium);
  color: var(--dc-color-text);
}

a {
  color: inherit;
  text-decoration: inherit;
}

small {
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

code {
  font-family: var(--font-monospace);
  font-size: 0.875em;
}

pre {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-light);
  color: var(--dc-color-text-muted);
}

/* Text roles. Each role is defined once. A page adds the class to the
   element; it does not restyle the tag. Same names as the site system. */

.dc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-base);
}

.dc-section-title {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: 1.25;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  color: var(--dc-color-text);
}

.dc-section-title svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.dc-kicker {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.dc-page-title {
  color: var(--dc-color-text);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  text-wrap: balance;
}

.dc-lede {
  color: var(--dc-color-text-muted);
  font-size: clamp(1rem, 2vw, 1.375rem);
  font-weight: var(--font-weight-base);
  line-height: 1.6;
  text-wrap: pretty;
}

.dc-description {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.dc-hint {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.dc-empty-state {
  padding: var(--spacing-xl) var(--spacing-base);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  text-align: center;
}

.dc-link {
  color: var(--dc-color-accent);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 2px;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard), text-decoration-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-link:hover,
.dc-link:focus-visible {
  text-decoration-color: currentColor;
}

/* Long-form prose (AI analysis, rules answers): see .dc-prose further down. */

/* Typography Utilities */

.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.text-secondary {
  color: var(--dc-color-text-muted);
}

.text-dc-blue {
  color: var(--dc-color-accent);
}

.text-dc-danger {
  color: var(--dc-color-danger);
}

/* Card names read as body text with a dotted underline. Hover turns them
   mint and removes the dots. */

.card-name {
  color: var(--card-name-color);
  font-weight: inherit;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.card-name:hover,
.card-name:focus-visible {
  color: var(--dc-color-accent);
}

/* ==========================================
   LAYOUT COMPONENTS
   ========================================== */

.dc-app-container {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  transition: transform 240ms var(--dc-ease-smooth);
  /* in step with the sidebar */
  position: relative;
  overflow: hidden;
}

.sidebar-open .dc-app-container {
  transform: none;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-top: 0;
  margin-top: 0;
  width: 100%;
}

.content-area {
  flex: 1;
  padding: calc(var(--nav-topbar-height) + var(--spacing-sm)) 0 calc(var(--nav-bottom-height) + var(--spacing-sm));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  contain: layout style;
}

.dc-global-toolbar-host {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-bottom-height) + var(--spacing-base));
  z-index: 910;
  max-width: calc(100vw - var(--spacing-base) * 2);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-duration-normal) var(--transition-timing-function-ease),
              visibility var(--transition-duration-normal) var(--transition-timing-function-ease);
}

@media screen and (min-width: 768px) {
  .dc-global-toolbar-host {
    top: calc(var(--nav-topbar-height) + var(--spacing-base));
    bottom: auto;
  }
}

.dc-global-toolbar-host.has-content {
  opacity: 1;
  visibility: visible;
}

.dc-global-toolbar-slot {
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.dc-global-toolbar-slot > * {
  pointer-events: auto;
}

/* iOS PWA keyboard handling - ensures topbar stays in place */

body.keyboard-open #pwa-topbar {
  transform: translateY(0) !important;
  position: fixed !important;
  top: 0 !important;
}

/* Prevent body scroll offset issues on iOS when keyboard closes */

body.ios-device {
  overflow: hidden;
  /* Use relative instead of fixed to avoid containing block issues with fixed children */
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  /* Prevent overscroll/bounce */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

.dc-page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
  padding: 0 var(--spacing-sm);
}

/* Shared pagination */

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-xl) 0;
  gap: var(--spacing-lg);
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-layer-base);
  border: 1px solid var(--dc-border);
  color: var(--dc-color-text-muted);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.pagination-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--dc-layer-base-hover);
  border-color: var(--dc-border-hover);
  color: var(--dc-color-text);
  transform: translateY(-1px);
}

.pagination-btn:hover:not(:disabled) svg {
  opacity: 1;
}

.pagination-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.pagination-btn:focus,
.pagination-btn:focus-visible {
  outline: none;
  border-color: var(--dc-border-focus);
  color: var(--dc-color-text);
}

.pagination-info {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-layer-base);
  border: 1px solid var(--dc-border);
  color: var(--dc-color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.pagination-divider {
  margin: 0 0.3rem;
  opacity: 0.5;
}

.pagination-current-page {
  color: var(--dc-color-text);
  font-weight: var(--font-weight-semibold);
}

/* Background System */

.dc-bg-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.dc-bg-image {
  position: absolute;
  inset: -6px;
  background-size: cover;
  background-position: center top;
  opacity: 0;
  transform: scale(1.2);
  filter: blur(40px) saturate(1);
  transition: opacity 1s ease-out;
  will-change: opacity;
  z-index: 0;
  pointer-events: none;
}

/* Same blur, opacity, and scrim as the landing hero (.dc-hero-bg / .dc-hero-overlay). */

.dc-bg-image--visible {
  opacity: 0.75;
}

.dc-bg-overlay,
.dc-bg-overlay--visible {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(3 8 10 / 20%) 0%,
    rgb(3 8 10 / 40%) 60%,
    var(--dc-color-background) 96%
  );
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================
   PANEL & CONTAINER COMPONENTS
   ========================================== */

.dc-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background-color: var(--dc-layer-base);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  padding: var(--spacing-base);
  box-shadow: var(--dc-shadow-base);
}

.dc-panel-section {
  margin-bottom: var(--spacing-xl);
}

.dc-panel-section:last-child {
  margin-bottom: 0;
}

/* Fade-slide reveal for progressively shown sections */

.dc-panel-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--dc-color-text-muted);
  margin-bottom: var(--spacing-base);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--dc-border);
}

.dc-command-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.01),
    var(--dc-border),
    rgba(255, 255, 255, 0.01)
  );
  margin: var(--spacing-base) 0 var(--spacing-xl) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-divider-text {
  background-color: var(--dc-layer-raised);
  padding: 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--dc-color-text-muted);
}

.visual-divider {
  min-height: 1px;
  background: var(--dc-border);
  margin: var(--spacing-sm) var(--spacing-xs);
}

/* ==========================================
   CARD COMPONENTS
   ========================================== */

/* Base Card. Hover = one step up the glass palette: the fill deepens and
   the hairline brightens a little. No shadow change, no transform. */

.dc-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  min-width: 0;
  padding: var(--spacing-base);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  background: var(--dc-layer-base);
  box-shadow: var(--dc-shadow-base);
  transition:
    background-color 200ms var(--dc-ease-smooth),
    border-color 200ms var(--dc-ease-smooth);
}

.dc-card[hidden] {
  display: none;
}

.dc-card:hover,
.dc-card:focus-visible,
.dc-card:focus-within {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-base-hover);
}

/* Mobile: base surfaces pad one step tighter. */

@media (max-width: 767px) {
  .dc-card,
  .dc-panel {
    padding: var(--spacing-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-card {
    transition: none;
  }
}

/* Card Image Containers */

.card-title {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  font-weight: var(--font-weight-bold);
  color: var(--dc-color-text);
  letter-spacing: var(--letter-spacing-tight);
  max-width: 90%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.commander-image {
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease,
              border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Deck Results Grid */

.deck-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .deck-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .deck-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Deck Card — the shared showcase card. Same values as .deck-card in
   dc-design-system.css. Commander art fills the card. A scrim keeps the
   text readable. Layout: title, overview, stats strip, action row. */

.deck-card {
  --dc-deck-card-scrim: rgb(3 8 10);
  position: relative;
  display: flex;
  overflow: hidden;
  contain: layout paint style;
  contain-intrinsic-size: auto 280px;
  flex-direction: column;
  content-visibility: auto;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  background: var(--dc-color-background);
  box-shadow: none;
  color: var(--dc-color-text);
  transform: none;
  transition: border-color var(--dc-duration-fast) var(--dc-easing-standard);
}

/* The base card overlay stays off: the art scrim owns the surface. */

.deck-card::after {
  content: none;
}

.deck-card:hover,
.deck-card:focus-visible,
.deck-card:focus-within {
  border-color: var(--dc-border-hover);
  background: var(--dc-color-background);
  box-shadow: none;
  transform: none;
  outline: none;
}

/* Deck card background layers */

.deck-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--dc-color-background);
}

.deck-card-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 20%;
     object-position: center 20%;
  opacity: 0.55;
  filter: saturate(0.85);
  transition: opacity var(--transition-duration-slow) var(--dc-easing-standard);
}

.deck-card:hover .deck-card-bg img {
  opacity: 0.7;
}

/* .deck-card-bg-blur retired. Kept as a no-op so any stale cached markup
   renders identically. */

.deck-card-bg-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--dc-deck-card-scrim) 0%, rgb(3 8 10 / 82%) 34%, rgb(3 8 10 / 0%) 70%),
    linear-gradient(to right, rgb(3 8 10 / 92%) 0%, rgb(3 8 10 / 64%) 48%, rgb(3 8 10 / 18%) 100%);
}

/* Deck card set badge */

.deck-card .deck-set-badge {
  position: absolute;
  top: calc(var(--spacing-xl) - 6px);
  right: var(--spacing-xl);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-pill);
  background: var(--dc-layer-float);
  pointer-events: none;
}

.deck-card .deck-set-badge img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: invert(100%);
  opacity: 0.85;
}

/* Deck card content */

.deck-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--spacing-xl);
}

.deck-card-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.deck-card .card-title {
  max-width: calc(100% - 100px);
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-card .commander-name,
.deck-card .companion-name {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two classes, so the prose paragraph rule never restyles the overview. */

.deck-card .deck-card-overview {
  display: -webkit-box;
  order: 1;
  max-width: 60ch;
  margin: var(--spacing-xs) 0 0;
  overflow: hidden;
  color: #fdfdfd45;
  font-size: var(--font-size-compact);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  transition:
    max-height var(--transition-duration-slow) var(--dc-ease-smooth),
    color var(--transition-duration-slow) var(--dc-ease-smooth);
}

.deck-card.is-expanded .deck-card-overview {
  color: var(--dc-color-text);
  -webkit-line-clamp: unset;
}

/* See more / See less. The script marks a card `is-clamped` when the
   overview overflows; the button stays hidden on every other card. */

.deck-card-overview-toggle {
  order: 1;
  align-self: flex-start;
  margin: var(--spacing-xs) 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dc-color-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.deck-card.is-clamped .deck-card-overview-toggle {
  display: inline-flex;
}

.deck-card-overview-toggle:hover,
.deck-card-overview-toggle:focus-visible {
  color: var(--dc-color-accent);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .deck-card .deck-card-overview {
    transition: none;
  }
}

/* Stats strip: one value per cell, hairline between cells.
   Each cell carries its own left rule. A negative margin pulls the rule of
   the first cell on each line out of the clip area, so wrapped lines never
   start with a rule. Only the x axis clips, so the coin glow and the
   absolutely placed format label stay visible. */

.deck-card .card-metadata {
  --dc-deck-card-stat-gap: var(--spacing-sm);
  display: flex;
  order: 2;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-xs) calc(var(--dc-deck-card-stat-gap) * 2 + 1px);
  margin-top: auto;
  padding-top: var(--spacing-base);
  border-top: 1px solid var(--dc-border);
  overflow: clip visible;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
}

.deck-card .card-metadata-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
  margin-left: calc(-1px - var(--dc-deck-card-stat-gap));
  padding-left: var(--dc-deck-card-stat-gap);
  border-left: 1px solid var(--dc-border);
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.deck-card .mana-icon {
  width: 14px;
  height: 14px;
}

.deck-card .color-identity-name {
  margin-left: 2px;
  color: var(--dc-color-text);
  text-shadow: none;
}

/* Format label: top-right corner, level with the title. It sits left of
   the set symbol when one exists. It leaves the stats strip flow, so the
   first stat starts the row. */

.deck-card .deck-format-badge {
  position: absolute;
  top: calc(var(--spacing-xl) + 6px);
  right: var(--spacing-xl);
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.deck-card:has(.deck-set-badge) .deck-format-badge {
  right: calc(var(--spacing-xl) + 36px + var(--spacing-sm));
}

/* Action row: view button, social counts, creator */

.deck-card-cta {
  display: flex;
  order: 3;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-base);
}

.deck-card .dc-glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  height: auto;
  min-height: var(--dc-control-height-small);
  padding: 0 13px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-raised);
  box-shadow: none;
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dc-duration-fast) var(--dc-easing-standard),
    background-color var(--dc-duration-fast) var(--dc-easing-standard),
    border-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.deck-card .dc-glass-button:hover,
.deck-card .dc-glass-button:focus-visible {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-raised);
  color: var(--dc-color-accent);
  outline: none;
}

.deck-card .dc-glass-button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 1;
}

/* Selectors below carry the .deck-card prefix on purpose: the shared card
   script injects fallback rules for these parts, and the system must win. */

.deck-card .deck-card-social-stats {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-right: auto;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.deck-card .deck-card-social-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deck-card .deck-card-social-stat svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.deck-card .deck-card-creator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.deck-card .deck-card-creator:hover {
  color: var(--dc-color-text);
}

.deck-card .deck-card-creator-name {
  font-weight: var(--font-weight-medium);
}

.deck-card .deck-card-creator-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--dc-border);
  border-radius: 50%;
  background: var(--dc-layer-raised);
}

.deck-card .deck-card-creator-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.deck-card .deck-card-cta .deck-card-creator-avatar svg {
  width: 60%;
  height: 60%;
  color: var(--dc-color-text-subtle);
}

/* Deck Card — compact. One row from the same system as .deck-card. The
   cover art bleeds in from the left edge and fades out under the text,
   the deck name leads, the pips and commander follow, and the format label
   with the last-edit time close the row. Built by DC3.DeckCards.createCompactDeckCard. */

.deck-card-compact-list {
  display: grid;
  gap: var(--spacing-xs);
}

.deck-card-compact {
  --dc-deck-card-scrim: rgb(3 8 10);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 64px;
  padding: var(--spacing-xs) var(--spacing-base);
  overflow: hidden;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  background: var(--dc-layer-base);
  color: var(--dc-color-text);
  text-decoration: none;
  transition: border-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.deck-card-compact[hidden] {
  display: none;
}

.deck-card-compact:hover,
.deck-card-compact:focus-visible {
  border-color: var(--dc-border-hover);
  color: var(--dc-color-text);
  outline: none;
}

.deck-card-compact:focus-visible {
  box-shadow: var(--dc-shadow-focus);
}

/* Art: a band on the left that fades into the surface. */

.deck-card-compact-art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 168px;
  -webkit-mask-image: linear-gradient(to right, #000 25%, transparent 100%);
  mask-image: linear-gradient(to right, #000 25%, transparent 100%);
}

.deck-card-compact-art img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 20%;
     object-position: center 20%;
  opacity: 0.55;
  filter: saturate(0.85);
  transition: opacity var(--transition-duration-slow) var(--dc-easing-standard);
}

.deck-card-compact-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 35%, var(--dc-layer-scrim) 100%);
}

.deck-card-compact:hover .deck-card-compact-art img {
  opacity: 0.7;
}

.deck-card-compact-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1;
  gap: 3px;
  min-width: 0;
}

.deck-card-compact-title {
  margin: 0;
  overflow: hidden;
  color: var(--dc-color-text);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-card-compact-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

.deck-card-compact-pips {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
}

.deck-card-compact-pips .mana-icon {
  width: 14px;
  height: 14px;
}

.deck-card-compact-commander {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-card-compact-aside {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 2;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

/* Format label: the same quiet kicker as the showcase card, in flow. */

.deck-card-compact .deck-format-badge {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.deck-card-compact-time {
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

/* My Deck Card — variant for My Decks and Bookmarks. The options button
   takes the top-right corner, the format label sits left of it, and a
   second stats line follows the strip. */

.my-deck-card {
  display: flex;
  min-height: 280px;
  color: inherit;
  text-decoration: none;
}

.my-deck-card .card-title {
  max-width: calc(100% - 140px);
}

.my-deck-card .commander-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.my-deck-card .deck-format-badge {
  right: calc(var(--spacing-xl) + 32px + var(--spacing-sm));
}

.my-deck-card-options {
  position: absolute;
  top: calc(var(--spacing-xl) - 6px);
  right: var(--spacing-xl);
  z-index: 5;
}

/* The options button is a standard .dc-button, squared to an icon button. */

.deck-options-btn {
  width: 32px;
  padding: 0;
}

.deck-options-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.my-deck-card .my-deck-card-meta-secondary {
  margin-top: 0;
  padding-top: var(--spacing-xs);
  border-top: 0;
}

.my-deck-card .my-deck-card-meta-secondary .card-metadata-item {
  color: var(--dc-color-text-muted);
  font-weight: var(--font-weight-base);
}

.my-deck-card .my-deck-card-meta-secondary svg {
  width: 13px;
  height: 13px;
  color: var(--dc-color-text-subtle);
  opacity: 1;
}

@media (max-width: 640px) {
  .deck-card-content {
    padding: var(--spacing-lg);
  }

  .deck-card .deck-format-badge {
    right: var(--spacing-lg);
  }

  .deck-card:has(.deck-set-badge) .deck-format-badge {
    right: calc(var(--spacing-lg) + 36px + var(--spacing-sm));
  }

  .my-deck-card .deck-format-badge {
    right: calc(var(--spacing-lg) + 32px + var(--spacing-sm));
  }

  .my-deck-card-options {
    right: var(--spacing-lg);
  }

  .deck-card .card-title {
    white-space: normal;
  }
}

/* Card Metadata */

.card-metadata {
  display: flex;
  gap: 1rem;
  margin-bottom: 0;
  justify-content: space-between;
}

.card-metadata-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--dc-color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.card-metadata-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

/* Deck format badge — the at-a-glance "what format is this?" signal, rendered
   on every deck card surface by DC3.DeckCards.getFormatBadgeHTML. Reads as a
   quiet chip so it never competes with the bracket coin or Threat Index value. */

.deck-format-badge {
  flex-shrink: 0;
  padding: 0.0625rem 0.4375rem;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-pill);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

/* Deck tag chips: theme and typal tags on search-result deck cards
   (DC3.DeckCards.createDeckCard). A chip opens a search for its tag. Same
   order as the metadata row, so the chips sit just below it. */

.deck-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
  order: 2;
}

.deck-tag-chip {
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-pill);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.deck-tag-chip:hover,
.deck-tag-chip:focus-visible {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-raised-hover);
  color: var(--dc-color-text);
}

/* ==========================================
   PILL BUTTON
   The floating pill button. A .dc-pill frame (hairline border, dark fill,
   32px outer height) holds one or more .dc-pill-btn controls (30px, hover
   wash). Paired controls share one frame and one focus ring; a
   .dc-pill-divider separates them. .dc-pill-btn--label sizes a control
   for icon + label + chevron (.dc-pill-icon / .dc-pill-label /
   .dc-pill-chevron). Values come from the topbar pill.
   ========================================== */

.dc-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  background: var(--dc-layer-sunken);
  overflow: hidden;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              border-color var(--dc-duration-fast) var(--dc-easing-standard),
              box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-pill:hover {
  background: var(--dc-layer-sunken-hover);
}

.dc-pill:has(> .dc-pill-btn:focus-visible) {
  border-color: var(--dc-border-focus);
  box-shadow: var(--dc-shadow-focus);
}

/* A frame whose only control is hidden shows nothing. */

.dc-pill:has(> .hidden:only-child),
.dc-pill:has(> [hidden]:only-child) {
  display: none;
}

/* Hairline divider between paired controls. It fades while a control in
   the frame is hovered, so that control fills its half of the pill. */

.dc-pill-divider {
  width: 1px;
  height: 16px;
  background: var(--dc-border);
  flex-shrink: 0;
  margin: 0;
  align-self: center;
  transition: opacity 0.16s ease;
  opacity: 1;
}

.dc-pill:has(> .dc-pill-btn:hover) .dc-pill-divider,
.dc-pill:has(> .dc-pill-btn:focus-visible) .dc-pill-divider {
  opacity: 0;
}

.dc-pill-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--dc-color-text);
  cursor: pointer;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard),
              opacity var(--dc-duration-fast) var(--dc-easing-standard);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  /* A control can be an <a> when it navigates. */
  text-decoration: none;
  box-sizing: border-box;
}

.dc-pill-btn:hover:not(:disabled),
.dc-pill-btn:focus-visible:not(:disabled) {
  background: var(--dc-layer-raised);
  color: var(--dc-color-accent);
  outline: none;
}

.dc-pill-btn:active:not(:disabled) {
  background: var(--dc-layer-raised);
  color: var(--dc-color-accent);
}

.dc-pill-btn:disabled,
.dc-pill-btn[aria-disabled="true"] {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

/* Selected option of a segmented pill */

.dc-pill-btn[aria-pressed="true"] {
  background: var(--dc-color-accent-subtle);
  color: var(--dc-color-accent);
}

.dc-pill-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.dc-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Labeled control: icon + label + optional chevron */

.dc-pill-btn--label {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.dc-pill-label {
  line-height: 1;
}

.dc-pill--dot {
  overflow: visible;
}

.dc-pill--dot > .dc-pill-btn {
  border-radius: inherit;
}

.dc-pill-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.dc-pill-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--dc-color-text-muted);
  margin-left: -2px;
}

.dc-pill-btn .dc-pill-chevron svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 767px) {
  .dc-pill-btn svg {
    width: 15px;
    height: 15px;
  }

  /* Collapsible control keeps only its icon on small screens */

  .dc-pill-btn--collapsible {
    padding: 0 8px;
  }

  .dc-pill-btn--collapsible .dc-pill-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .dc-pill-label {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================
   SEGMENTED CONTROL
   Same contract as the site (dc-design-system.css): a .dc-segmented-control
   frame around .dc-segmented-button options; the selected option carries
   .active or aria-pressed="true".
   ========================================== */

.dc-segmented-control {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-sunken);
}

.dc-segmented-button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--dc-radius-3);
  background: transparent;
  color: var(--dc-color-text-muted);
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard), color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-segmented-button:hover {
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
}

.dc-segmented-button:focus-visible {
  outline: none;
  box-shadow: var(--dc-shadow-focus);
}

.dc-segmented-button.active,
.dc-segmented-button[aria-pressed="true"] {
  background: var(--dc-layer-raised-hover);
  color: var(--dc-color-text);
}

.dc-segmented-button svg,
.dc-segmented-button img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dc-segmented-control--inline {
  width: auto;
}

.dc-segmented-control--inline .dc-segmented-button {
  flex: none;
  padding: 5px 10px;
}

/* Deck metadata stack — the consolidated two-row header container on the
   builder/decklist pages (replaced the old stats grid). Row 1 holds the
   format badge + universal stats + format-specific stats; row 2 holds the
   social counts and buy buttons. Items mirror the My Decks card-metadata
   look (light label, semibold value) so every deck surface reads the same. */

.dc-deck-meta-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}

.dc-deck-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Items carry pill padding, so the gap only tops it up. */
  gap: 0.25rem 0.25rem;
}

.dc-deck-meta-bar:not(:has(> :not(.hidden))) {
  display: none;
}

.dc-deck-meta-row-secondary {
  padding-top: 0.625rem;
  border-top: 1px solid var(--dc-border);
}

/* Row-1 hierarchy is role-based, three tiers: passive facts render as plain
   text (.dc-deck-meta-fact — no hover), openable items render as pill
   buttons (.dc-pill + .dc-pill-btn, see PILL BUTTON), and the combos chip
   adds a color state when results exist (.has-results). Hover glow belongs
   only to elements that actually open something. */

.dc-deck-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--dc-radius-pill);
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  white-space: nowrap;
  transition: background var(--transition-duration-fast, 0.15s);
}

/* No hover on the base item — a glow on a non-clickable element falsely
   advertises a click action. Hover lives on the chip/social-btn classes,
   which actually open something. */

/* Tier 3 — passive facts (card count / Avg CMC / cost / color pips) */

.dc-deck-meta-item.dc-deck-meta-fact {
  padding-left: 0.4375rem;
  padding-right: 0.4375rem;
}

/* Fact group: keeps the facts together after the pill cluster and pushes
   them to the row's right edge on desktop; on narrow screens it wraps and
   flows naturally left. */

.dc-deck-meta-fact-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

/* Mobile: instead of wrapping into ragged stacks, each meta row becomes a
   horizontal rail — the My Decks folder-row pattern (dc-folder-pill-grid):
   nowrap + hidden-scrollbar overflow scroll with x-snap. Snap is proximity,
   not mandatory: meta items unhide during section init (badge, combos), and
   every reveal shifts the snap stops — mandatory re-snaps the rail to a
   mid-row item on load, proximity leaves position 0 alone. */

@media (max-width: 767px) {
  .dc-deck-meta-fact-group {
    margin-left: 0;
    flex-wrap: nowrap;
  }

  /* Whitish edge glow over the rail ends (the look the My Decks folder
     pills' glassy edges give as they slide under the screen edge), fixed
     at the viewport edges while the row scrolls beneath. Covers only the
     first row — the one that actually overflows; row 2's few items don't
     earn a scroll hint. Height pins to the 30px chip capsule, the row's
     tallest item. */

  .dc-deck-meta-stack {
    position: relative;
  }

  .dc-deck-meta-stack::before,
  .dc-deck-meta-stack::after {
    content: '';
    position: absolute;
    top: 0;
    height: 30px;
    width: 22px;
    z-index: 1;
    pointer-events: none;
    /* Hidden until that side actually has cut-off content — mirrors the My
       Decks folder rail, where the "glow" IS a cut-off pill. State classes
       come from DC3.updateMetaRailEdgeHints (core.js). */
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .dc-deck-meta-stack::before {
    left: calc(-1 * var(--spacing-sm));
    background: linear-gradient(to right, rgba(255, 255, 255, 0.07), transparent);
  }

  .dc-deck-meta-stack::after {
    right: calc(-1 * var(--spacing-sm));
    background: linear-gradient(to left, rgba(255, 255, 255, 0.07), transparent);
  }

  .dc-deck-meta-stack.has-rail-overflow-left::before {
    opacity: 1;
  }

  .dc-deck-meta-stack.has-rail-overflow-right::after {
    opacity: 1;
  }

  .dc-deck-meta-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Meta items unhide during section init (badge, combos, pips). Scroll
       anchoring "helpfully" bumps scrollLeft to keep prior content stable
       when they appear, leaving the rail scrolled to mid-row on load —
       opt out so position 0 stays position 0. */
    overflow-anchor: none;
    /* Full-bleed: cancel the dc-page-container gutter so the rail scrolls
       edge-to-edge, while matching inner padding keeps items aligned with
       the page gutter at rest (and scroll-padding keeps snap stops there) */
    margin-left: calc(-1 * var(--spacing-sm));
    margin-right: calc(-1 * var(--spacing-sm));
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    scroll-padding-left: var(--spacing-sm);
    scroll-padding-right: var(--spacing-sm);
  }

  .dc-deck-meta-bar::-webkit-scrollbar {
    display: none;
  }

  /* Row 1 only: vertical bleed inside the scrollport so outer effects on
     the chips (combos reveal pulse, focus ring) aren't clipped by
     overflow-y — padding buys the room, negative margins hand it back so
     layout doesn't move. */

  .dc-deck-meta-bar:not(.dc-deck-meta-row-secondary) {
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
  }

  /* Rail children keep their intrinsic width (no squeezing) and provide
     the snap stops */

  .dc-deck-meta-bar > *,
  .dc-deck-meta-fact-group > *,
  .dc-deck-social-group > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

.dc-format-legal-icon {
  flex-shrink: 0;
}

.dc-format-legal-yes {
  color: var(--accent-emerald);
}

.dc-format-legal-no {
  color: #f43f5e;
}

.dc-deck-meta-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
  flex-shrink: 0;
}

/* Combos chip loading state: chip stays visible but inert with a small
   spinner where the count normally sits (decklist fetch + builder check) */

.dc-combos-chip-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--dc-border);
  border-radius: 50%;
  border-top-color: var(--dc-color-text, #fff);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.dc-deck-combos-chip.is-loading {
  opacity: 0.75;
  cursor: default;
  pointer-events: none;
}

.dc-deck-meta-label {
  color: var(--dc-color-text-muted);
}

.dc-deck-meta-value {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--dc-color-text);
}

/* Format-legality badge: outline check-circle + text, white while the deck
   is Not Legal, emerald once it satisfies its format's rules. currentColor
   drives icon and text together. */

/* Row 2: social counts + like/comments buttons + buy buttons */

.dc-deck-social-group {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.dc-deck-social-group.hidden {
  display: none;
}

.dc-deck-social-item svg,
.dc-deck-social-item [data-dc-icon] svg {
  width: 15px;
  height: 15px;
}

.dc-deck-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--dc-radius-pill);
  background: transparent;
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  cursor: pointer;
  transition: background var(--transition-duration-fast, 0.15s), color var(--transition-duration-fast, 0.15s);
}

.dc-deck-social-btn svg {
  width: 15px;
  height: 15px;
  opacity: 0.8;
  flex-shrink: 0;
}

.dc-deck-social-btn:hover {
  background: var(--dc-layer-raised);
}

.dc-deck-social-btn.is-liked .dc-like-icon {
  fill: #f43f5e;
  stroke: #f43f5e;
  opacity: 1;
}

.dc-deck-social-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Tier 2 — openable "door" chips (format badge / Combos / Threat Index / Bracket)
   are .dc-pill frames around one labeled .dc-pill-btn. The states below only
   recolor the frame. */

/* Builder call-to-action state (no stored results yet): a dashed frame reads
   "action available" vs the solid "result available" chip. */

.dc-pill:has(> .dc-chip-cta) {
  border-style: dashed;
  border-color: var(--dc-border-hover);
}

/* Combos chip icon: the global dc-combo infinity mark (core.js icon
   registry), hidden while the spinner has the floor. */

.dc-deck-combos-chip.is-loading [data-dc-icon] {
  display: none;
}

/* Tier 1 — results exist: the one earned pop of color in the bar, an accent
   frame + icon + count. */

.dc-pill:has(> .has-results) {
  border-color: rgba(0, 255, 178, 0.4);
}

.dc-pill:has(> .has-results):hover {
  border-color: rgba(0, 255, 178, 0.65);
}

.dc-deck-combos-chip.has-results .dc-deck-meta-value {
  color: var(--dc-color-accent);
}

.dc-deck-combos-chip.has-results [data-dc-icon] svg {
  color: var(--dc-color-accent);
  opacity: 1;
}

/* One-time attention pulse when a combo count first lands — JS adds the
   class only on the transition into has-results, so the bar stays quiet at
   rest. */

@keyframes dc-combos-chip-reveal {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 178, 0.5);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(0, 255, 178, 0);
  }
}

.dc-pill:has(> .dc-chip-reveal) {
  animation: dc-combos-chip-reveal 0.7s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .dc-pill:has(> .dc-chip-reveal) {
    animation: none;
  }
}

.dc-deck-meta-buy {
  margin-left: auto;
}

/* Key art picker (builder overflow → Set Key Art) */

.dc-key-art-intro {
  margin-bottom: 1rem;
}

.dc-key-art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  max-height: 60vh;
  overflow-y: auto;
}

.dc-key-art-option {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.dc-key-art-option:hover {
  border-color: var(--dc-color-accent);
  transform: translateY(-2px);
}

.dc-key-art-option.is-selected {
  border-color: var(--dc-color-accent);
  box-shadow: 0 0 0 1px var(--dc-color-accent);
}

.dc-key-art-option img {
  width: 100%;
  aspect-ratio: 626 / 457;
  -o-object-fit: cover;
     object-fit: cover;
}

.dc-key-art-option-name {
  padding: 0.375rem 0.5rem;
  color: var(--dc-color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Format picker shown when creating a new deck */

.dc-format-picker-grid {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--spacing-sm);
}

/* Card Content Elements */

.commander-name {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mana-symbol {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.companion-name {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-stat-tooltip-trigger {
  cursor: pointer;
}

.dc-buy-deck-trigger {
  min-width: 4.5rem;
}

/* ── Share panel (deck-share.js): printable deck-card preview + URL ──
   Single centered column: card → caption → deck title → byline → URL.
   Copy/print actions live in the modal footer. */

.dc-share-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.25rem;
  text-align: center;
}

.dc-share-card-preview-wrap {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

.dc-share-card-preview-wrap > div {
  box-shadow: var(--dc-shadow-base);
}

.dc-share-caption {
  max-width: 28rem;
  margin-top: 0.5rem;
}

.dc-share-title {
  font-size: 1.375rem;
  font-weight: var(--font-weight-bold, 700);
  color: var(--dc-color-text);
  line-height: 1.2;
}

.dc-share-byline {
  font-size: var(--font-size-xs);
  color: var(--dc-color-text-muted);
}

.dc-share-url-link {
  margin-top: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--dc-color-accent);
  word-break: break-all;
  text-decoration: none;
}

.dc-share-url-link:hover {
  text-decoration: underline;
}

.dc-buy-deck-trigger-label {
  line-height: 1;
}

/* ── Shared tooltip system (button-triggered, fixed-position) ── */

.tooltip-container {
  position: fixed;
  z-index: 9999;
  max-width: 400px;
  min-width: 280px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-container:not(.hidden) {
  pointer-events: auto;
}

.tooltip-content {
  background: var(--dc-layer-float);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  padding: var(--spacing-base);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--dc-color-text);
  box-shadow: var(--dc-shadow-float);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
  position: relative;
  max-height: 70vh;
  overflow-y: auto;
  word-wrap: break-word;
  hyphens: auto;
}

.tooltip-content::-webkit-scrollbar {
  width: 6px;
}

.tooltip-content::-webkit-scrollbar-track {
  background: transparent;
}

.tooltip-content::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.3);
  border-radius: var(--dc-radius-3);
}

.tooltip-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.5);
}

/* Tooltip icon button (inline next to stat label) */

.tooltip-icon-fixed {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dc-color-text-muted);
  opacity: 0.7;
  transition: all 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.tooltip-icon-fixed:hover:not(:disabled) {
  opacity: 1;
  color: var(--dc-color-text);
  transform: scale(1.1);
}

.tooltip-icon-fixed:active:not(:disabled) {
  transform: scale(0.95);
}

.tooltip-icon-fixed:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.tooltip-icon-fixed svg {
  width: 12px;
  height: 12px;
}

/* Bracket tooltip content */

/* Interactive elements in tooltips */

/* Responsive tooltip adjustments */

@media (max-width: 768px) {
  .tooltip-container {
    max-width: calc(100vw - 24px);
    min-width: 280px;
  }

  .tooltip-content {
    padding: var(--spacing-base);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    max-height: 60vh;
  }
}

@media (max-width: 480px) {
  .tooltip-container {
    max-width: calc(100vw - 16px);
    min-width: 260px;
  }

  .tooltip-content {
    padding: var(--spacing-sm);
    font-size: 13px;
    max-height: 50vh;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .tooltip-container {
    transition: none;
  }

  .tooltip-icon-fixed {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .tooltip-content {
    border: 2px solid var(--dc-color-text);
    background: var(--dc-color-background);
  }

  .tooltip-icon-fixed {
    border: 1px solid var(--dc-color-text-muted);
  }
}

/* Commander Image Elements */

.commander-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.9;
  scale: 1.10;
}

.commander-image.hidden {
  display: none;
}

/* Card View Variants */

.list-view .dc-card {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Card Flip Animation */

.card-flip-container {
  position: relative;
  z-index: 2;
  perspective: 1000px;
}

.card-flipper {
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%;
}

.card-flipper.flipped {
  transform: rotateY(180deg);
}

.card-front, 
.card-back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.card-back {
  transform: rotateY(180deg);
}

/* ==========================================
   CARD IMAGE
   One contract for every card image on the site. The frame clips, tilts,
   and carries the foil layers; the image carries the 1px border.
   ========================================== */

.dc-card-image-container,
.dc-card-tile-image,
.card-front,
.card-back,
.cs-card-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--dc-radius-card);
}

.dc-card-image-container {
  aspect-ratio: 2.5 / 3.5;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
}

.dc-card-image,
.dc-card-tile-image img,
.card-front img,
.card-back img,
.cs-card-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--dc-radius-card);
  border: 1px solid var(--dc-border);
}

.dc-card-image {
  cursor: pointer;
}

/* Keep flip faces stacked even when foil or etched styles set position. */

.card-flipper > .card-front,
.card-flipper > .card-back {
  position: absolute;
}

.card-front img,
.card-back img {
  height: auto;
}

/* ==========================================
   FORM COMPONENTS
   ========================================== */

/* Text field. Same contract as the site (dc-design-system.css): a
   .dc-input-container frame around a borderless .dc-input. A lone control
   carries the frame itself with .dc-input--solo. The app default is the
   compact size; .dc-input-container--large is the login-page size. */

.dc-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: var(--dc-control-height-small);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-sunken);
  transition:
    background-color var(--dc-duration-fast) var(--dc-easing-standard),
    border-color var(--dc-duration-fast) var(--dc-easing-standard),
    box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-input-container--large {
  min-height: var(--dc-control-height-medium);
}

.dc-input-container:hover {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-sunken-hover);
}

.dc-input-container:focus-within {
  border-color: var(--dc-border-focus);
  background: var(--dc-layer-sunken);
  box-shadow: var(--dc-shadow-focus);
}

.dc-input {
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dc-color-text);
  font-family: var(--font-primary), system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-sm);
}

.dc-input-container--large .dc-input {
  padding: 13px 16px;
  font-size: var(--font-size-base);
  letter-spacing: 0;
  line-height: var(--line-height-base);
}

.dc-input::-moz-placeholder {
  color: var(--dc-color-text-subtle);
  font-style: normal;
  -moz-transition: color var(--dc-duration-fast) var(--dc-easing-standard);
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-input::placeholder {
  color: var(--dc-color-text-subtle);
  font-style: normal;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-input-container:focus-within .dc-input::-moz-placeholder, .dc-input--solo:focus::-moz-placeholder {
  color: var(--dc-color-text-muted);
}

.dc-input-container:focus-within .dc-input::placeholder,
.dc-input--solo:focus::placeholder {
  color: var(--dc-color-text-muted);
}

.dc-input-container--with-icon .dc-input {
  padding-left: 10px;
}

.dc-input-container--textarea {
  align-items: stretch;
  padding: 8px 4px;
}

.dc-input-container--textarea .dc-input {
  line-height: 1.5;
  resize: vertical;
}

/* Lone control: the frame lives on the control */

.dc-input--solo {
  min-height: var(--dc-control-height-small);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-sunken);
  transition:
    background-color var(--dc-duration-fast) var(--dc-easing-standard),
    border-color var(--dc-duration-fast) var(--dc-easing-standard),
    box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-input--solo:hover {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-sunken-hover);
}

.dc-input--solo:focus {
  border-color: var(--dc-border-focus);
  background: var(--dc-layer-sunken);
  box-shadow: var(--dc-shadow-focus);
}

textarea.dc-input--solo {
  line-height: 1.5;
  resize: vertical;
}

/* Select: native arrow hidden, chevron drawn on the right */

.dc-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fcfcfe' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

/* Leading icon inside the frame (an svg or img carries the class) */

.dc-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 14px;
  flex: 0 0 18px;
  color: var(--dc-color-text-subtle);
  transition:
    color var(--dc-duration-fast) var(--dc-easing-standard),
    transform var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-field-icon > svg {
  width: 18px;
  height: 18px;
}

.dc-input-container:hover .dc-field-icon {
  color: var(--dc-color-text-muted);
}

.dc-input-container:focus-within .dc-field-icon {
  color: var(--dc-color-accent);
}

/* WotC asset icons ship as <img> with black fills and can't inherit
   currentColor — recolor to white and match text-secondary's brightness
   (same treatment as img.filter-label-icon). */

img.dc-field-icon {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.dc-search-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--dc-border);
}

.dc-search-controls .dc-input-container {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

@media (max-width: 767px) {
  .dc-search-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .dc-search-controls .dc-find-cards-btn {
    width: 100%;
  }
}

.dc-input-label {
  font-size: var(--font-size-sm);
  color: var(--dc-color-text-muted);
  opacity: var(--opacity-medium);
  margin-left: var(--spacing-xxs);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-xs);
  display: block;
}

/* Autocomplete dropdown. Same surface and item values as the context menu
   (.builder-zone-menu / .builder-zone-menu-item). */

.dc-autocomplete-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--spacing-xs);
  padding: 4px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--dc-layer-float);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  box-shadow: var(--dc-shadow-float);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
}

.dc-autocomplete-container .search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 7px 8px;
  color: var(--dc-color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  cursor: pointer;
  border-radius: var(--dc-radius-3);
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-autocomplete-container .search-result:hover,
.dc-autocomplete-container .search-result.selected {
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
}

/* Search Location Settings Button */

.dc-search-location-btn {
  position: absolute;
  right: var(--spacing-xxs);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  padding: var(--spacing-xxs);
  border: none;
  border-radius: var(--dc-radius-3);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  z-index: 5;
}

.dc-search-location-btn:hover {
  background: var(--dc-layer-raised);
}

.dc-search-location-btn:focus {
  outline: none;
  color: var(--dc-color-text);
}

.dc-search-location-btn svg {
  width: 14px;
  height: 14px;
}

.dc-input-container:has(.dc-search-location-btn) .dc-input {
  padding-right: 2.5rem;
}

/* Builder Zone Menu */

/* Global context menu (DC3.showContextMenu). Same look as the site Account dropdown (.dc-menu). */

.builder-zone-menu {
  position: fixed;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--dc-layer-float);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  padding: var(--spacing-xxs);
  min-width: 160px;
  box-shadow: var(--dc-shadow-float);
}

/* The blur lives on a pseudo-element, not on the menu itself. An element with
   backdrop-filter is a backdrop root: a nested flyout (.builder-zone-menu-flyout)
   inside it could only blur what the parent menu paints, so it showed the page
   unblurred. With the blur on ::before the flyout blurs the page like its parent. */

.builder-zone-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
}

/* Browsers without backdrop-filter get the solid float fill. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .builder-zone-menu,
  .builder-zone-menu-submenu,
  .dc-toast,
  .tooltip-content,
  .dc-modal,
  .dc-autocomplete-container,
  .dc-context-menu,
  .dc-drawer-content,
  .dc-badge-tooltip,
  .pwa-install-banner,
  .quest-card-modal-content,
  .dc-profile-stage-tool {
    background: var(--dc-layer-float-solid);
  }
}

/* Toolbar menus are moved to <body> while open so a short panel can't clip
   them; they keep their intrinsic width and stay inside the viewport. */

.builder-zone-menu.dc-dropdown-portaled {
  position: fixed;
  min-width: -moz-max-content;
  min-width: max-content;
  max-width: calc(100vw - 16px);
  overscroll-behavior: contain;
}

/* Open and close fade. The menu keeps opacity 1 at all times: opacity below 1
   makes it a backdrop root and the ::before blur drops out until the fade ends,
   which shows as a flash. So the fill, border, and shadow transition on the
   menu, and the blur layer and the items animate their own opacity. Items keep
   their hover transitions because the fade is an animation, not a transition. */

#contextMenu.builder-zone-menu {
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition:
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    box-shadow 120ms ease-out,
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
  /* No will-change: opacity. It makes the menu a backdrop scope and stops the flyout blur. */
  will-change: transform;
}

#contextMenu.builder-zone-menu:not(.is-open) {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

#contextMenu.builder-zone-menu:not(.is-open)::before,
#contextMenu.builder-zone-menu:not(.is-open) > * {
  opacity: 0;
}

.builder-zone-menu.hidden {
  display: none;
}

#contextMenu.builder-zone-menu.is-open {
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#contextMenu.builder-zone-menu.is-open::before,
#contextMenu.builder-zone-menu.is-open > * {
  animation: dc-context-menu-fade-in 120ms ease-out;
}

#contextMenu.builder-zone-menu.is-closing {
  transform: translateY(-4px) scale(0.985);
  pointer-events: none;
  transition:
    background-color 95ms ease-in,
    border-color 95ms ease-in,
    box-shadow 95ms ease-in,
    transform 120ms ease-in;
}

#contextMenu.builder-zone-menu.is-closing::before,
#contextMenu.builder-zone-menu.is-closing > * {
  animation: dc-context-menu-fade-out 95ms ease-in;
}

@keyframes dc-context-menu-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes dc-context-menu-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

#contextMenu.builder-zone-menu[data-placement="above"] {
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom center;
}

#contextMenu.builder-zone-menu[data-placement="above"].is-open {
  transform: translateY(0) scale(1);
}

#contextMenu.builder-zone-menu[data-placement="above"].is-closing {
  transform: translateY(4px) scale(0.985);
}

#contextMenu.builder-zone-menu.is-measuring {
  transform: none;
  pointer-events: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #contextMenu.builder-zone-menu {
    transition: none;
    transform: none;
  }

  #contextMenu.builder-zone-menu::before,
  #contextMenu.builder-zone-menu > * {
    animation: none;
  }

  #contextMenu.builder-zone-menu.is-open,
  #contextMenu.builder-zone-menu.is-closing,
  #contextMenu.builder-zone-menu[data-placement="above"],
  #contextMenu.builder-zone-menu[data-placement="above"].is-open,
  #contextMenu.builder-zone-menu[data-placement="above"].is-closing {
    transform: none;
  }
}

/* Menu title. Same voice as .pwa-sidebar-section-header at menu scale. */

.builder-zone-menu-header {
  padding: 5px 8px 5px;
  color: var(--dc-color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  border-bottom: 1px solid var(--dc-border);
}

.builder-zone-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  background: none;
  border: none;
  text-align: left;
  color: var(--dc-color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  cursor: pointer;
  border-radius: var(--dc-radius-3);
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
}

.builder-zone-menu-item:hover {
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
}

.builder-zone-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--dc-color-text-subtle);
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.builder-zone-menu-item:hover svg {
  color: var(--dc-color-text);
}

/* Active or current item. Same look as the site Account menu header. */

.builder-zone-menu-item.active,
.builder-zone-menu-item.active:hover {
  background: var(--dc-color-accent-subtle);
  color: var(--dc-color-accent);
}

.builder-zone-menu-item.active svg,
.builder-zone-menu-item.active:hover svg {
  color: var(--dc-color-accent);
}

.builder-zone-menu-divider {
  height: 1px;
  background: var(--dc-border);
  margin: 4px;
}

.builder-zone-menu-item.danger,
.builder-zone-menu-item.danger svg,
.builder-zone-menu-item.danger:hover,
.builder-zone-menu-item.danger:hover svg {
  color: var(--dc-color-danger);
}

.builder-zone-menu-item.danger:hover {
  background: var(--dc-layer-raised);
}

.builder-zone-menu-item.disabled,
.builder-zone-menu-item:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Submenu container */

.builder-zone-menu-submenu-wrapper {
  position: relative;
}

.builder-zone-menu-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 8px;
  background: none;
  border: none;
  text-align: left;
  color: var(--dc-color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  cursor: pointer;
  border-radius: var(--dc-radius-3);
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
}

.builder-zone-menu-submenu-trigger:hover {
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
}

.builder-zone-menu-submenu-trigger svg:first-child {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: var(--spacing-xs);
}

.builder-zone-menu-submenu-trigger .submenu-arrow {
  width: 12px;
  height: 12px;
  margin-left: auto;
  opacity: 0.6;
  flex-shrink: 0;
}

.builder-zone-menu-submenu {
  position: absolute;
  right: 100%;
  left: auto;
  top: 0;
  /* Same glass as .builder-zone-menu. The blur sits on the element, not on a
     ::before, because this flyout scrolls and holds no blurred children. */
  background: var(--dc-layer-float);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  padding: 4px;
  min-width: 160px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  box-shadow: var(--dc-shadow-float);
  display: none;
  z-index: 100002;
}

/* --- Context menu hover submenu (flyout) --- */

.builder-zone-menu-subwrap {
  position: relative;
}

.builder-zone-menu-item--has-submenu::after {
  content: '\203A';
  /* › */
  margin-left: auto;
  padding-left: 10px;
  font-size: var(--font-size-md, 16px);
  line-height: 1;
  opacity: 0.55;
}

.builder-zone-menu-flyout {
  position: absolute;
  top: -5px;
  left: 100%;
  margin-left: 5px;
  min-width: 150px;
  display: none;
  z-index: 100002;
}

.builder-zone-menu-flyout.is-visible {
  display: block;
}

.builder-zone-menu-flyout.flip-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 5px;
}

.builder-zone-menu-item-check {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding-left: 10px;
  color: var(--dc-color-accent);
}

.builder-zone-menu-item-check svg {
  width: 14px;
  height: 14px;
}

/* ==========================================
   BUTTON COMPONENTS
   ========================================== */

/* Terminal Buttons */

/* Secondary button. Same look as the site .dc-button--secondary at the app's 32px control height. */

.dc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--dc-radius-2);
  border: 1px solid var(--dc-border);
  background: transparent;
  color: var(--dc-color-text);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard),
              background-color var(--dc-duration-fast) var(--dc-easing-standard),
              border-color var(--dc-duration-fast) var(--dc-easing-standard),
              box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
  flex-shrink: 0;
}

.dc-button:hover {
  background: var(--dc-layer-raised);
  border-color: var(--dc-border);
  color: var(--dc-color-accent);
}

.dc-button:active {
  background: var(--dc-layer-raised);
  color: var(--dc-color-accent);
}

.dc-button:focus-visible {
  border-color: var(--dc-border-focus);
  box-shadow: var(--dc-shadow-focus);
  outline: none;
}

.dc-button svg {
  width: var(--font-size-md);
  height: var(--font-size-md);
  flex-shrink: 0;
}

.dc-button.active {
  background: var(--dc-color-accent-subtle);
  border-color: var(--dc-color-accent-border);
  color: var(--dc-color-accent);
}

/* Ghost button. Same look as the site .dc-button--ghost. */

.dc-button--ghost {
  border-color: transparent;
  color: var(--dc-color-text-muted);
}

.dc-button--ghost:hover,
.dc-button--ghost:active {
  background: var(--dc-layer-raised);
  border-color: transparent;
  color: var(--dc-color-text);
}

/* Small button. The app base is already the small control height, so only the padding changes. */

.dc-button--small {
  padding: 0 13px;
}

/* Action link: muted text with a trailing icon (OpenRouter "View all").
   Hover: accent text, the icon slides 2px right. Works on <a> and <button>. */

.dc-action-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dc-color-text-muted);
  font-family: var(--font-primary, inherit);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-action-link:hover {
  color: var(--dc-color-accent);
}

.dc-action-link:focus-visible {
  color: var(--dc-color-accent);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dc-action-link__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-action-link:hover .dc-action-link__icon {
  transform: translateX(2px);
}

/* Primary pill button. Matches the PWA topbar primary CTA, but is global so
   app views can use it outside the injected topbar component. */

.dc-primary-btn,
.dc-topbar-action-button.dc-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--dc-radius-pill);
  background: #ffffff;
  color: #000000;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.dc-primary-btn:hover,
.dc-topbar-action-button.dc-primary-btn:hover {
  background: #e5e7eb;
  color: #000000;
}

.dc-primary-btn:active,
.dc-topbar-action-button.dc-primary-btn:active {
  transform: scale(0.97);
}

.dc-primary-btn:focus,
.dc-primary-btn:focus-visible,
.dc-topbar-action-button.dc-primary-btn:focus,
.dc-topbar-action-button.dc-primary-btn:focus-visible {
  color: #000000;
  outline: none;
}

.dc-primary-btn svg,
.dc-topbar-action-button.dc-primary-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  fill: currentColor;
}

/* Button Variants */

/* Primary button. Same look as the site .dc-button--primary. */

.action-button {
  background-color: var(--dc-color-accent);
  border-color: var(--dc-color-accent);
  color: var(--dc-color-background);
  box-shadow: none;
}

.action-button:hover,
.action-button:active {
  background-color: var(--dc-color-accent-hover);
  border-color: var(--dc-color-accent-hover);
  color: var(--dc-color-background);
}

.action-button:focus-visible {
  border-color: var(--dc-border-focus);
  box-shadow: var(--dc-shadow-focus);
}

/* Same values as the site .dc-button--danger. */

.danger-button {
  border-color: color-mix(in srgb, var(--dc-color-danger) 35%, transparent);
  color: var(--dc-color-danger-text);
}

.danger-button:hover {
  border-color: var(--dc-color-danger);
  background: color-mix(in srgb, var(--dc-color-danger) 18%, transparent);
  color: var(--dc-color-text);
}

.danger-button:focus,
.danger-button:focus-visible {
  border-color: var(--dc-color-danger);
}

.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xxs);
  padding: var(--spacing-xs);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.text-button:hover {
  color: var(--dc-color-text);
}

.text-button svg {
  width: var(--font-size-md);
  height: var(--font-size-md);
  flex-shrink: 0;
}

.view-toggle {
  display: flex;
  align-items: center;
  border-radius: var(--dc-radius-2);
  padding: 2px;
  border: 1px solid var(--dc-border);
  flex-shrink: 0;
  gap: var(--spacing-xxs);
}

.view-toggle .icon-btn {
  border-radius: var(--dc-radius-3);
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.view-toggle .icon-btn svg {
  width: 16px;
  height: 16px;
}

.view-toggle .icon-btn.active {
  color: var(--dc-color-accent);
  background-color: var(--dc-color-accent-subtle);
}

.dc-find-cards-btn {
  border-color: var(--dc-border);
  color: var(--dc-color-text-muted);
  transition: all 0.3s ease;
}

.dc-find-cards-btn:hover {
  background-color: var(--dc-layer-raised);
  border-color: var(--dc-color-accent-border);
  color: var(--dc-color-accent);
}

.dc-find-cards-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dc-find-cards-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 70vh;
}

.dc-find-cards-loading,
.dc-find-empty-state,
.dc-find-cards-error {
  padding: var(--spacing-base);
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
}

.dc-find-empty-hint {
  margin-top: var(--spacing-xs);
}

.dc-printing-panel {
  --dc-printing-panel-min-height: 320px;
  --dc-printing-panel-height: min(70vh, 800px);
  --dc-printing-panel-padding: 0;
  display: flex;
  flex-direction: column;
  min-height: var(--dc-printing-panel-min-height);
  height: var(--dc-printing-panel-height);
  padding: var(--dc-printing-panel-padding);
}

.dc-printing-panel-loading {
  flex: 0 0 auto;
  padding: 20px;
  text-align: center;
}

.dc-printing-panel-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.dc-printing-panel-search {
  flex: 0 0 auto;
}

.dc-printing-panel-empty {
  margin: 0;
}

.dc-printing-usage-count {
  font-weight: var(--font-weight-bold);
  color: var(--dc-color-text);
}

.dc-printing-usage-count.is-fully-used {
  color: var(--dc-color-accent);
}

.dc-printing-usage-count.is-overused {
  color: var(--color-tier-gold);
}

.dc-find-card-tile--in-deck .dc-card-tile-image img {
  opacity: 0.55;
}

.dc-find-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dc-color-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.dc-find-card-overlay-text {
  padding: 6px 9px;
  border-radius: var(--dc-radius-3);
  background: linear-gradient(var(--dc-color-accent-subtle), var(--dc-color-accent-subtle)), var(--dc-layer-float);
  border: 1px solid var(--dc-color-accent-border);
}

/* Card viewer price: a .dc-badge chip on the raised fill, centered under the card stage */

.dc-card-viewer-price {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 24px;
  margin: var(--spacing-sm) auto 0;
  padding: 0 9px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-3);
  background: var(--dc-layer-raised);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--dc-color-text);
  font-variant-numeric: tabular-nums;
}

.dc-card-viewer-price:empty {
  display: none;
}

.dc-find-card-add:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.dc-combo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xxs) 0 var(--spacing-xs);
  border-bottom: 1px solid var(--dc-border);
  margin-bottom: var(--spacing-sm);
}

.dc-combo-toolbar-title {
  font-size: var(--font-size-xs);
  color: var(--dc-color-text-muted);
}

.dc-combo-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dc-color-text-muted);
  transition: color var(--transition-duration-fast), border-color var(--transition-duration-fast), transform var(--transition-duration-fast);
}

.dc-combo-refresh:hover,
.dc-combo-refresh:focus-visible {
  color: var(--dc-color-text);
  border-color: var(--dc-border-hover);
  transform: rotate(-8deg);
}

.dc-combo-refresh-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.dc-combo-browser {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  overflow-y: auto;
}

.dc-combo-row {
  display: flex;
  gap: var(--spacing-base);
  padding: var(--spacing-sm);
  border-radius: var(--dc-radius-1);
  border: 1px solid var(--dc-border);
  background: var(--dc-layer-raised);
}

.dc-combo-preview {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.dc-combo-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}

/* Status frame: an inset outline, the same pattern as the builder suggestion outlines */

.dc-combo-card {
  max-width: 100%;
  box-shadow: var(--dc-shadow-base);
  outline-offset: -2px;
}

.dc-combo-card.present {
  outline: 2px solid rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}

.dc-combo-card.missing {
  outline: 2px solid rgba(248, 113, 113, 0.55);
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.35);
}

.dc-combo-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.dc-combo-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--dc-border);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.dc-combo-title {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.dc-combo-title-card {
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-duration-fast);
}

.dc-combo-title-card.is-present {
  color: var(--accent-emerald);
}

.dc-combo-title-card.is-missing {
  color: var(--dc-color-danger);
}

.dc-combo-title-sep {
  color: var(--dc-color-text-muted);
}

.dc-combo-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--dc-border);
  padding-bottom: var(--spacing-sm);
}

.dc-combo-effect {
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: var(--dc-radius-3);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: uppercase;
  border: 1px solid var(--dc-border);
  color: var(--dc-color-text);
}

.dc-combo-sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  border-bottom: 1px solid var(--dc-border);
  margin-bottom: var(--spacing-sm);
}

.dc-combo-section {
  padding: var(--spacing-xs) 0;
}

.dc-combo-section-title {
  margin-bottom: 2px;
}

.dc-combo-section-text {
  margin: 0 0 2px;
  font-size: var(--font-size-xs);
  color: var(--dc-color-text);
  line-height: var(--line-height-sm);
}

.dc-combo-section-text:last-child {
  margin-bottom: 0;
}

.dc-combo-section-list {
  padding-left: var(--spacing-sm);
  margin: 0 0 2px;
  font-size: var(--font-size-xs);
  color: var(--dc-color-text);
  line-height: var(--line-height-sm);
}

.dc-combo-section-list li {
  list-style-type: decimal;
}

.dc-combo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-base);
  align-items: center;
}

.dc-combo-add {
  flex: 1 1 auto;
}

.dc-combo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: uppercase;
  color: rgb(255, 149, 149);
}

.dc-combo-link-logo {
  height: 24px;
  width: auto;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.dc-combo-empty {
  padding: var(--spacing-base);
}

@media (max-width: 900px) {
  .dc-combo-row {
    flex-direction: column;
  }

  .dc-combo-preview {
    flex: 1 1 auto;
  }
}

.search-no-results-state {
  padding: var(--spacing-3xl) var(--spacing-base);
  text-align: center;
}

.search-no-results-message {
  margin: 0;
  color: var(--dc-color-text);
  font-size: var(--font-size-base);
}

.filter-modal-body .filter-group {
  margin-bottom: var(--spacing-base);
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--dc-radius-2);
  border: 1px solid var(--dc-border);
  background: var(--dc-layer-raised);
}

.filter-modal-body .filter-group:last-child {
  margin-bottom: 0;
}

.filter-modal-body .filter-group label.filter-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--dc-color-text);
  margin-bottom: var(--spacing-sm);
}

.filter-modal-body .filter-group span.filter-group-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-modal-body .filter-label-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--dc-color-text-muted);
}

/* WotC asset icons (e.g. the Commander filter's legendary crown) ship as
   <img> with black fills, so they can't inherit currentColor like the inline
   SVG labels — recolor to white and match text-secondary's brightness. */

.filter-modal-body img.filter-label-icon {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.filter-modal-body .filter-group .filter-group-hint {
  font-size: 11px;
  color: var(--dc-color-text-muted);
  margin-top: 4px;
}

/* Range rows: fixed field columns, the slider takes the rest */

.filter-modal-body .filter-range-controls {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--spacing-sm);
}

.dc-find-cards-root {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 0;
}

.dc-find-cards-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 0;
}

.dc-find-cards-content.hidden {
  display: none;
}

.dc-find-mode-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.dc-find-mode-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.dc-mode-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--spacing-xs);
  width: 100%;
}

.dc-mode-selection-grid.hidden {
  display: none !important;
}

.dc-mode-selection-grid .select-mode {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xxs);
}

.select-mode {
  position: relative;
  padding: var(--spacing-sm);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  cursor: pointer;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard), border-color var(--dc-duration-fast) var(--dc-easing-standard);
  text-align: center;
}

.select-mode:hover,
.select-mode:focus-visible {
  background: var(--dc-layer-raised);
  border-color: var(--dc-border-hover);
}

.select-mode:focus-visible {
  outline: none;
  border-color: var(--dc-border-focus);
  box-shadow: var(--dc-shadow-focus);
}

.select-mode.disabled,
.select-mode[disabled],
.select-mode[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.select-mode.disabled:hover,
.select-mode.disabled:focus-visible,
.select-mode[disabled]:hover,
.select-mode[disabled]:focus-visible,
.select-mode[aria-disabled="true"]:hover,
.select-mode[aria-disabled="true"]:focus-visible {
  background: var(--dc-layer-raised);
  border-color: var(--dc-border);
  box-shadow: none;
}

.select-mode-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  color: var(--dc-color-text);
  margin-bottom: var(--spacing-xxs);
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.select-mode-icon svg {
  width: 100%;
  height: 100%;
}

.select-mode-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.select-mode-title {
  color: var(--dc-color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xxs);
}

.select-mode-desc {
  /* Reduced from font-size-sm */
  color: var(--dc-color-text-muted);
  opacity: 0.7;
}

.dc-find-mode-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-text);
  text-align: center;
}

.dc-find-mode-sub {
  text-align: center;
}

.dc-buy-option {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dc-buy-option-icon {
  width: 3rem;
  height: 3rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.dc-buy-option-price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-emerald);
  text-shadow: var(--shadow-text);
}

@media (max-width: 767px) {
  .dc-mode-selection-grid .select-mode {
    padding: var(--spacing-sm);
    align-items: center;
    text-align: center;
  }

  .select-mode-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .select-mode-title {
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
  }

  .dc-buy-option .dc-buy-option-icon {
    width: 3rem;
    height: 3rem;
  }
}

.dc-find-smart-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-height: 0;
}

.dc-find-smart-form {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  align-items: center;
}

.dc-find-smart-form .dc-input-container {
  flex: 1;
}

.dc-find-smart-submit {
  white-space: nowrap;
}

.dc-find-smart-helper {
  font-size: var(--font-size-xs);
  color: var(--smart-accent-color);
}

.dc-find-smart-error {
  font-size: var(--font-size-sm);
  color: var(--status-error);
}

.dc-find-smart-results {
  min-height: 220px;
  margin-bottom: var(--spacing-sm);
}

.dc-find-smart-loading-text {
  margin-top: var(--spacing-xs);
  color: var(--dc-color-text-muted);
}

.dc-find-smart-query-display {
  font-size: var(--font-size-xs);
  color: var(--smart-accent-color);
  padding-left: var(--spacing-xs);
}

.dc-find-smart-query-display code {
  color: var(--smart-accent-color);
  word-break: break-word;
}

.dc-find-smart-query-label {
  margin-right: var(--spacing-xs);
  line-height: var(--line-height-xs);
}

@media (max-width: 640px) {
  .dc-find-smart-form {
    flex-direction: column;
    align-items: stretch;
  }

  .dc-find-smart-submit {
    width: 100%;
  }
}

/* ==========================================
   INTERACTIVE COMPONENTS
   ========================================== */

/* Sort Controls */

.sort-button-label {
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-accent);
}

.sort-button-prefix {
  font-weight: var(--font-weight-semibold);
}

/* Context Menu. Same look as the site Account dropdown (.dc-menu). */

.dc-context-menu {
  position: fixed;
  z-index: 960;
  min-width: 200px;
  background-color: var(--dc-layer-float);
  border-radius: var(--dc-radius-2);
  border: 1px solid var(--dc-border);
  box-shadow: var(--dc-shadow-float);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top left;
  transition: opacity var(--dc-duration-fast) ease,
              transform var(--dc-duration-fast) ease;
  pointer-events: none;
}

.dc-context-menu.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Active or current item. Same look as the site Account menu header. */

.dc-context-menu-item.active,
.dc-context-menu-item.active:hover,
.dc-context-menu .order-option.active,
.dc-context-menu .order-direction-option.active {
  background-color: var(--dc-color-accent-subtle);
  color: var(--dc-color-accent);
}

.dc-context-menu-item.active svg,
.dc-context-menu-item.active:hover svg,
.dc-context-menu .order-option.active svg,
.dc-context-menu .order-direction-option.active svg {
  color: var(--dc-color-accent);
}

.dc-context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  font-family: var(--font-primary);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--dc-color-text-muted);
  background-color: transparent;
  border: none;
  border-radius: var(--dc-radius-3);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
  white-space: nowrap;
}

.dc-context-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--dc-color-text-subtle);
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-context-menu-item:hover {
  background-color: var(--dc-layer-raised);
  color: var(--dc-color-text);
}

.dc-context-menu-item:hover svg {
  color: var(--dc-color-text);
}

.dc-context-menu-item.danger {
  color: var(--dc-color-danger);
}

.dc-context-menu-item.danger svg {
  color: var(--dc-color-danger);
}

.dc-context-menu-item.danger:hover {
  background-color: var(--dc-layer-raised);
  color: var(--dc-color-danger);
}

.dc-context-menu-item.danger:hover svg {
  color: var(--dc-color-danger);
}

.dc-context-menu-separator {
  height: 1px;
  background-color: var(--dc-border);
  margin: 4px;
}

.dc-context-menu-item.disabled, 
.dc-context-menu-item:disabled {
  cursor: default;
  opacity: 1;
  color: var(--dc-color-text-subtle);
}

.dc-context-menu-item.disabled:hover,
.dc-context-menu-item:disabled:hover {
  background-color: transparent;
  color: var(--dc-color-text-subtle);
}

#cardViewerModal {
  z-index: 1400;
}

/* Dropdown */

.dc-dropdown-container {
  position: relative;
  display: inline-block;
}

.dc-dropdown-container .dc-context-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  min-width: 100%;
  margin-top: 0;
  box-shadow: var(--dc-shadow-float);
}

.dc-dropdown-container .builder-zone-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  z-index: 100001;
  min-width: -moz-max-content;
  min-width: max-content;
  margin-top: 0;
}

.dc-button.dc-dropdown {
  width: 100%;
  justify-content: center;
}

/* ==========================================
   MODAL COMPONENTS
   ========================================== */

/* Same look and transitions as .pwa-sidebar-overlay. */

.dc-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dc-layer-scrim-light);
  backdrop-filter: blur(var(--dc-blur-tiny));
  -webkit-backdrop-filter: blur(var(--dc-blur-tiny));
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-duration-slow) var(--transition-timing-function-ease),
              visibility 0s var(--transition-duration-slow);
  pointer-events: none;
}

.dc-panel-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-duration-slow) var(--transition-timing-function-ease);
  pointer-events: auto;
}

.dc-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 1rem)) scale(0.96);
  z-index: 920;
  width: 94%;
  max-width: 1000px;
  max-height: min(88vh, 1000px);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--dc-radius-1);
  box-shadow: var(--dc-shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* No opacity fade on the modal: an element below full opacity is a backdrop
     root, so the blur on ::before would see nothing until the fade ends and
     then snap in. Browsers also do not interpolate a blur radius change (it
     jumps in one frame). So the blur is constant, like an Apple material:
     the panel scales and rises, and the tint, border, and children fade. */
  transition: transform var(--transition-duration-normal) var(--transition-timing-function-ease-out),
              background-color var(--transition-duration-normal) var(--transition-timing-function-ease-out),
              border-color var(--transition-duration-normal) var(--transition-timing-function-ease-out);
  pointer-events: none;
  color: var(--dc-color-text);
}

.dc-modal > * {
  opacity: 0;
  transition: opacity var(--transition-duration-normal) var(--transition-timing-function-ease-out);
}

/* The blur lives on a pseudo-element, not on the modal itself. An element with
   backdrop-filter is a backdrop root: a dropdown inside the modal (for example
   .dc-autocomplete-container) could only blur what the modal paints, so it
   showed the page unblurred. With the blur on ::before the dropdown blurs the
   page like the modal. */

.dc-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(var(--dc-blur-heavy));
  -webkit-backdrop-filter: blur(var(--dc-blur-heavy));
}

.dc-modal > .dc-modal-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.dc-modal.active {
  transform: translate(-50%, -50%) scale(1);
  background-color: var(--dc-layer-float-light);
  border-color: var(--dc-border);
  pointer-events: auto;
}

.dc-modal.active > * {
  opacity: 1;
}

.dc-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 920;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-height: min(85vh, 1000px);
  transform: translateY(calc(100% + 1.5rem));
  /* Slide only. A fade would make the drawer a backdrop root and hide the
     blur on .dc-drawer-content until the fade ends. */
  transition: transform var(--transition-duration-normal) var(--transition-timing-function-ease-out);
  pointer-events: none;
}

.dc-drawer.open {
  transform: translateY(0);
  pointer-events: auto;
}

.dc-drawer-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background-color: var(--dc-layer-float);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1) var(--dc-radius-1) 0 0;
  backdrop-filter: blur(var(--dc-blur-heavy));
  -webkit-backdrop-filter: blur(var(--dc-blur-heavy));
  box-shadow: var(--dc-shadow-modal);
  overflow: hidden;
  color: var(--dc-color-text);
}

.dc-drawer-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px var(--spacing-sm) 12px;
  background-color: transparent;
  border-bottom: none;
  flex-shrink: 0;
}

.dc-drawer-handle {
  width: 38px;
  height: 4px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-border-hover);
}

.dc-drawer-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.dc-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.dc-drawer-body p {
  margin-bottom: var(--spacing-sm);
}

.dc-drawer-body p:last-child {
  margin-bottom: 0;
}

.dc-topbar-actions-drawer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dc-topbar-actions-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-topbar-actions-drawer-section-title {
  margin: 0;
  padding: 0 4px;
  border-bottom: none;
}

.dc-topbar-actions-drawer-card {
  overflow: hidden;
  background: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
}

.dc-topbar-actions-drawer-card > .dc-topbar-actions-drawer-item + .dc-topbar-actions-drawer-item {
  border-top: 1px solid var(--dc-border);
}

.dc-topbar-actions-drawer-item {
  min-height: 50px;
  padding: var(--spacing-sm) 12px;
  gap: var(--spacing-base);
  border-radius: 0;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.dc-topbar-actions-drawer-item:hover {
  background: var(--dc-layer-raised);
}

.dc-topbar-actions-drawer-item:focus-visible {
  outline: none;
  background: var(--dc-layer-raised);
}

.dc-topbar-actions-drawer-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.dc-topbar-actions-drawer-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--dc-color-text-muted);
}

.dc-topbar-actions-drawer-item-icon svg {
  width: 18px;
  height: 18px;
}

.dc-topbar-actions-drawer-item--no-icon .dc-topbar-actions-drawer-item-icon {
  display: none;
}

.dc-topbar-actions-drawer-item-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.dc-topbar-actions-drawer-item-label {
  display: block;
  color: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  white-space: normal;
}

.dc-topbar-actions-drawer-item-description {
  display: block;
}

.dc-topbar-actions-drawer-item-trailing {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  color: var(--dc-color-text-muted);
  flex: 0 0 auto;
}

.dc-topbar-actions-drawer-item-hotkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xxs, 10px);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.dc-topbar-actions-drawer-item-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.dc-topbar-actions-drawer-item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--dc-color-accent);
}

.dc-topbar-actions-drawer-item-check svg {
  width: 16px;
  height: 16px;
}

.dc-topbar-actions-drawer-item.active .dc-topbar-actions-drawer-item-label {
  color: var(--dc-color-accent);
  font-weight: var(--font-weight-semibold);
}

.dc-topbar-actions-drawer-item-chevron svg {
  width: 14px;
  height: 14px;
}

.dc-topbar-actions-drawer-item.danger .dc-topbar-actions-drawer-item-icon,
.dc-topbar-actions-drawer-item.danger .dc-topbar-actions-drawer-item-trailing {
  color: inherit;
}

.dc-topbar-actions-drawer-item--raw {
  align-items: flex-start;
}

.dc-topbar-actions-drawer-item--raw .dc-topbar-actions-drawer-item-copy {
  gap: 0;
}

.dc-topbar-actions-drawer-item.disabled .dc-topbar-actions-drawer-item-label,
.dc-topbar-actions-drawer-item:disabled .dc-topbar-actions-drawer-item-label {
  color: var(--dc-color-text-muted);
}

.dc-modal-header {
  padding: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
}

/* The one close control. openModal adds it to every modal header. */

.dc-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: var(--dc-radius-3);
  background: transparent;
  color: var(--dc-color-text-muted);
  cursor: pointer;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-modal-close:hover,
.dc-modal-close:focus-visible {
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
  outline: none;
}

.dc-modal-close svg {
  width: 16px;
  height: 16px;
}

.dc-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dc-modal-title::before {
  content: '';
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.dc-modal-body {
  padding: var(--spacing-base);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  max-height: 75vh;
  overflow-y: auto;
}

/* Desktop: a wide side gutter, so the body content sits centered. */

@media (min-width: 768px) {
  .dc-modal-body {
    padding-inline: 3rem;
  }
}

.dc-modal-body p {
  margin-bottom: var(--spacing-sm);
}

.dc-modal-body p:last-child {
  margin-bottom: 0;
}

.dc-modal-body label {
  display: flex;
  font-family: var(--font-primary);
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
}

.dc-modal-footer {
  padding: var(--spacing-sm);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs);
}

.dc-modal-footer:empty {
  display: none;
}

.search-card-detail-actions {
  margin-top: 0;
}

.search-card-add-to-deck-button,
.search-card-preferred-button {
  width: 100%;
  justify-content: center;
}

/* Credit confirm content inside the global popup (dc3MainModal). */

.credit-confirm-wrap,
.credit-confirm-footer {
  --credit-confirm-grad-l: #0b7dcd;
  --credit-confirm-grad-r: #5cc8f0;
}

/* A confirmation is a short read: narrow popup, one left-aligned column.
   Order = importance: cost, the balances that pay it, then the AI input. */

.dc-modal:has(.credit-confirm-wrap) {
  max-width: 560px;
}

.credit-confirm-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  text-align: left;
}

.credit-confirm-main {
  font-size: var(--font-size-lg);
  color: var(--dc-color-text);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

@media (min-width: 768px) {
  .credit-confirm-main {
    font-size: var(--font-size-xl);
  }
}

/* Cost number and tier name: text in the Best/Eco gradient */

.credit-confirm-grad {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--credit-confirm-grad-l), var(--credit-confirm-grad-r));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Balance card: raised inside the popup */

.credit-confirm-balance {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--dc-layer-raised);
  border-radius: var(--dc-radius-2);
}

.credit-confirm-balance[hidden] {
  display: none;
}

/* Credit rings: one row per credit pool. The ring shows the count left and
   the share left; the text names the pool and says the balance in words.
   The numbers and words come from DC3.getCreditPools (core.js). One
   component in three sizes: default 44px (credit popup, profile Other
   Credits), --sm 32px (sidebar), --lg 88px (profile main credits). */

.dc-credit-rings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  text-align: left;
}

.dc-credit-ring {
  --dc-credit-ring-color: var(--dc-color-accent);
  --dc-credit-ring-size: 44px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.dc-credit-ring-dial {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--dc-credit-ring-size);
  height: var(--dc-credit-ring-size);
  flex-shrink: 0;
}

.dc-credit-ring-dial svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dc-credit-ring-track,
.dc-credit-ring-arc {
  fill: none;
  stroke-width: 2;
}

/* Same empty-arc color as the profile level ring */

.dc-credit-ring-track {
  stroke: var(--dc-border);
}

.dc-credit-ring-arc {
  stroke: var(--dc-credit-ring-color);
  stroke-dasharray: var(--dc-credit-ring-pct) 100;
  animation: dc-credit-ring-fill var(--transition-duration-slow) var(--transition-timing-function-ease);
}

@keyframes dc-credit-ring-fill {
  from {
    stroke-dasharray: 0 100;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-credit-ring-arc {
    animation: none;
  }
}

.dc-credit-ring-value {
  position: relative;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--dc-color-text);
}

/* Three or more characters (450, 1,240) step down to fit inside the arc */

.dc-credit-ring-value.is-long {
  font-size: var(--font-size-xs);
}

.dc-credit-ring-text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px var(--spacing-sm);
  min-width: 0;
}

.dc-credit-ring-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-text);
}

.dc-credit-ring-detail {
  font-size: var(--font-size-sm);
  color: var(--dc-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Stacked text: name, then the count in words, then any hint */

.dc-credit-ring--stacked .dc-credit-ring-text,
.dc-credit-ring--sm .dc-credit-ring-text {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2px;
}

/* Sidebar: narrow drawer, so a smaller ring and stacked text */

.dc-credit-ring--sm {
  --dc-credit-ring-size: 32px;
  gap: var(--spacing-xs);
}

.dc-credit-ring--sm .dc-credit-ring-value {
  font-size: var(--font-size-xs);
}

.dc-credit-ring--sm .dc-credit-ring-value.is-long {
  font-size: var(--font-size-xxs);
}

.dc-credit-ring--sm .dc-credit-ring-label {
  font-size: var(--font-size-sm);
}

.dc-credit-ring--sm .dc-credit-ring-detail {
  font-size: var(--font-size-xs);
}

/* Profile main credits: the large ring, the note beside it */

.dc-credit-ring--lg {
  --dc-credit-ring-size: 88px;
  gap: var(--spacing-base);
}

.dc-credit-ring--lg .dc-credit-ring-value {
  font-size: var(--font-size-xl);
}

.dc-credit-ring--lg .dc-credit-ring-value.is-long {
  font-size: var(--font-size-lg);
}

.dc-credit-ring--lg .dc-credit-ring-detail {
  font-size: var(--font-size-base);
}

.dc-credit-rings-order {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--dc-color-text-muted);
  text-align: left;
}

.credit-confirm-user-input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.credit-confirm-user-input label {
  align-items: baseline;
  gap: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
}

.credit-confirm-user-input-field {
  width: 100%;
  resize: vertical;
}

/* Saved context from the deck's last scan: raised inside the popup, like the balance card */

.credit-confirm-saved-input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--dc-layer-raised);
  border-radius: var(--dc-radius-2);
}

.credit-confirm-saved-input[hidden] {
  display: none;
}

.credit-confirm-saved-input-preview {
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.credit-confirm-saved-input-actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.credit-confirm-footer {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
}

.credit-confirm-footer-actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.credit-confirm-intelligence {
  display: flex;
  align-items: center;
  align-self: center;
  margin-right: auto;
  position: relative;
}

.credit-confirm-intelligence-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--dc-color-text-muted);
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-duration-fast) var(--transition-timing-function-ease-out);
}

.credit-confirm-intelligence-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dc-color-accent);
  width: 16px;
  height: 16px;
  color: var(--credit-confirm-grad-r);
}

.credit-confirm-intelligence-trigger-label {
  background: linear-gradient(135deg, var(--credit-confirm-grad-l), var(--credit-confirm-grad-r));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.credit-confirm-intelligence-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  color: inherit;
}

.credit-confirm-intelligence-trigger:hover,
.credit-confirm-intelligence-trigger:focus-visible,
.credit-confirm-intelligence-trigger.active {
  color: var(--dc-color-text);
  outline: none;
}

.credit-confirm-intelligence-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .2s ease, color var(--transition-duration-fast) var(--transition-timing-function-ease-out);
}

.credit-confirm-intelligence-trigger.active .credit-confirm-intelligence-chevron {
  transform: rotate(180deg);
}

.credit-confirm-intelligence-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(300px, calc(100vw - 48px));
  transform-origin: bottom left;
  z-index: 2;
  /* Light blur on the menu itself: it fades its own opacity, and a blur on
     ::before would drop out during that fade. No flyouts live inside it. */
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
}

/* Standard menu item with the mode explainer on a second line */

.credit-confirm-intelligence-option {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
}

.credit-confirm-intelligence-option-description {
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-base);
  line-height: 1.35;
}

.dc-modal-subtitle {
  margin: 0 0 var(--spacing-xs);
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dc-modal-description,
.dc-modal-message {
  color: var(--dc-color-text-muted);
}

.dc-modal-description {
  text-align: center;
}

.dc-modal-description:last-child,
.dc-modal-message:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .dc-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 480px) {
  .credit-confirm-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .credit-confirm-intelligence {
    width: 100%;
    justify-content: flex-start;
    margin-right: 0;
  }

  .credit-confirm-intelligence-trigger {
    width: 100%;
  }

  .credit-confirm-intelligence-chevron {
    margin-left: auto;
  }

  .credit-confirm-intelligence-menu {
    right: 0;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .credit-confirm-footer-actions {
    width: 100%;
  }

  .credit-confirm-footer-actions > button {
    flex: 1;
  }
}

/* ── Card action buttons ── */

.dc-card-actions {
  display: flex;
  gap: var(--spacing-xxs);
}

.dc-card-action,
.collection-action-button {
  background: none;
  border: none;
  padding: 3px;
  color: var(--dc-color-text-muted);
  cursor: pointer;
  border-radius: var(--dc-radius-3);
  opacity: 50%;
  transition: var(--transition-standard);
}

.dc-card-action:hover,
.dc-card-action:focus-visible,
.collection-action-button:hover,
.collection-action-button:focus-visible {
  opacity: 1;
  color: var(--dc-color-text);
  outline: none;
}

.dc-card-action svg,
.collection-action-button svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}

.dc-card-action.locked {
  color: var(--dc-color-text);
  background: none;
  opacity: 1;
}

/* ── Checkbox ── */

.dc-checkbox {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--dc-color-background);
  border: 1px solid var(--dc-border);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  margin: 0;
  flex-shrink: 0;
}

.dc-checkbox:checked {
  background-color: var(--dc-color-background);
}

.dc-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--dc-color-accent);
}

.dc-checkbox:hover {
  border-color: var(--dc-border-hover);
}

.dc-checkbox:focus-visible {
  outline: none;
  border-color: var(--dc-color-accent);
  box-shadow: 0 0 0 2px rgba(4, 172, 233, 0.2);
}

/* Checkbox option wrapper - reusable label + checkbox combo */

.dc-checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 24px;
  padding: var(--spacing-xs) 0;
  color: var(--dc-color-text);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dc-checkbox-option span,
.dc-checkbox-option .dc-checkbox-label {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: color 0.2s ease;
}

.dc-checkbox-option:hover span,
.dc-checkbox-option:hover .dc-checkbox-label {
  color: var(--dc-color-text);
}

/* Toast Notifications */

.dc-toasts {
  position: fixed;
  top: calc(var(--nav-topbar-height, 4rem) + var(--spacing-sm, 0.75rem));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 970;
  pointer-events: none;
}

/* Same glass surface as the context menus (.builder-zone-menu). */

.dc-toast {
  min-width: 300px;
  padding: var(--spacing-sm) var(--spacing-base);
  background-color: var(--dc-layer-float);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  color: var(--dc-color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--dc-shadow-float);
  opacity: 0;
  transform: translateY(-16px) scale(0.65);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.75, 0.64, 1);
}

.dc-toast svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dc-toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dc-toast-success {
  color: var(--accent-emerald);
}

.dc-toast-warning {
  color: var(--accent-richGold);
}

.dc-toast-error {
  color: var(--dc-color-danger-text);
}

.dc-toast-fade-out {
  opacity: 0;
  transform: translateY(-16px) scale(0.65);
  transition: opacity 0.18s ease-in, transform 0.18s ease-in;
}

/* Loading Components */

.dc-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.dc-spinner {
  width: 33px;
  height: 33px;
  border: 3px solid var(--dc-border);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton Loaders */

@keyframes dc-skeleton-pulse {
  50% {
    opacity: 0.5;
  }
}

.skeleton {
  background-color: #3f3f46;
  border-radius: var(--dc-radius-3);
  animation: dc-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-text {
  background-color: #3f3f46;
  border-radius: var(--dc-radius-3);
  animation: dc-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  height: 1rem;
}

.skeleton-title {
  background-color: #3f3f46;
  border-radius: var(--dc-radius-3);
  animation: dc-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  height: 2rem;
}

/* ==========================================
   SPECIALIZED COMPONENTS
   ========================================== */

/* What's New changelog cards (DC3.WhatsNew in home.js) */

.dc-changelog-card {
  background: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  padding: 0.875rem 1rem 1rem;
  margin-bottom: 0.75rem;
}

.dc-changelog-card:last-child {
  margin-bottom: 0;
}

.dc-changelog-card-title {
  margin: 0 0 0.625rem 0;
  text-align: center;
  color: var(--dc-color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.dc-changelog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--dc-color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.dc-changelog-list li {
  position: relative;
  padding-left: 0.875rem;
  margin-bottom: 0.3rem;
}

.dc-changelog-list li:last-child {
  margin-bottom: 0;
}

.dc-changelog-list li::before {
  content: "-";
  position: absolute;
  left: 0;
}

/* A bullet whose text leads with an emoji uses the emoji as its marker. */

.dc-changelog-list li.dc-changelog-emoji {
  padding-left: 1.5rem;
}

.dc-changelog-list li.dc-changelog-emoji::before {
  content: none;
}

.dc-changelog-list li .dc-changelog-emoji-lead {
  position: absolute;
  left: 0;
}

/* Structured changelog entries: title + subtitle, section headers, callout. */

.dc-changelog-entry-title {
  margin: 0.25rem 0 0.25rem;
  text-align: center;
  color: var(--dc-color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.dc-changelog-entry-subtitle {
  margin: 0 0 0.75rem;
  text-align: center;
}

.dc-changelog-section {
  margin: 0.875rem 0 0.4rem;
  color: var(--dc-color-text);
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
}

.dc-changelog-section:first-child {
  margin-top: 0;
}

.dc-changelog-callout {
  margin: 0.75rem 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: var(--dc-radius-3);
  background: rgba(255, 215, 0, 0.07);
}

.dc-changelog-callout-title {
  margin-bottom: 0.25rem;
  color: var(--accent-richGold);
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
}

.dc-changelog-callout p {
  margin: 0;
}

.dc-terminal-prompt {
  color: var(--dc-color-text);
  margin-right: var(--spacing-xs);
}

/* PWA Install Banner */

.pwa-install-banner {
  background-color: var(--dc-layer-float);
  backdrop-filter: blur(var(--dc-blur-heavy));
  -webkit-backdrop-filter: blur(var(--dc-blur-heavy));
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  padding: var(--spacing-sm);
  position: fixed;
  bottom: calc(var(--nav-bottom-height) + var(--spacing-lg));
  left: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 880;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(calc(100% + var(--spacing-lg)));
  animation: slideUpFromBottom 0.6s ease-out 0.3s forwards;
  box-shadow: 
    var(--dc-shadow-modal),
    0 0 0 1px var(--dc-color-accent),
    0 0 20px rgba(0, 255, 178, 0.3);
  transition: var(--transition-standard);
}

@keyframes slideUpFromBottom {
  from {
    opacity: 0;
    transform: translateY(calc(100% + var(--spacing-lg)));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pwa-install-banner:hover {
  box-shadow: 
    var(--dc-shadow-modal),
    0 0 0 1px var(--dc-color-accent-hover),
    0 0 25px rgba(0, 255, 178, 0.4);
  transform: translateY(-2px);
}

.pwa-install-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  position: relative;
}

.pwa-install-banner-text {
  text-align: center;
}

.pwa-install-banner-actions {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
}

.pwa-install-close {
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  border: none;
  color: var(--dc-color-text-muted);
  cursor: pointer;
  border-radius: var(--dc-radius-2);
  transition: var(--transition-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.pwa-install-close:hover {
  color: var(--dc-color-text);
  background-color: var(--dc-layer-raised);
  transform: scale(1.1);
}

.pwa-install-close svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.pwa-install-banner::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--dc-radius-1);
  background: linear-gradient(45deg, 
    transparent, 
    rgba(0, 255, 178, 0.1), 
    transparent, 
    rgba(0, 255, 178, 0.1));
  z-index: -1;
  animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
  0%, 100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

@media (min-width: 768px) {
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--dc-radius-3);
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

.dc-icon {
  width: var(--font-size-sm);
  height: var(--font-size-sm);
}

.dc-icon.dc-icon-md {
  width: var(--font-size-md);
  height: var(--font-size-md);
}

.dc-icon.dc-icon-lg {
  width: var(--font-size-lg);
  height: var(--font-size-lg);
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Desktop Optimizations */

@media (min-width: 768px) {
  body {
    --nav-topbar-height: calc(
      var(--topbar-control-size) +
      (var(--topbar-vertical-padding) * 2) +
      var(--ios-safe-area-top) +
      1px
    );
    --nav-bottom-height: 0px;
  }
}

@media screen and (max-width: 480px) {
  .dc-button {
    gap: var(--spacing-xxs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }

  .dc-button svg {
    width: var(--font-size-sm);
    height: var(--font-size-sm);
  }

  .pwa-install-banner {
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    bottom: calc(var(--nav-bottom-height) + var(--spacing-sm));
  }

  .pwa-install-banner-actions {
    width: 100%;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .pwa-install-close {
    right: var(--spacing-xs);
    top: var(--spacing-xs);
  }
}

@media (max-width: 768px) {
  .pwa-install-banner {
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    bottom: calc(55px + var(--spacing-sm));
  }

  .pwa-install-banner-content {
    gap: var(--spacing-sm);
  }

  .pwa-install-close {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    right: 0;
    top: 0;
  }
}

/* ==========================================
   LEGACY & COMPATIBILITY
   ========================================== */

.pwa-mode #desktop-components {
  display: none !important;
}

.pwa-mode #pwa-components {
  display: block !important;
}

.pwa-mode #pwa-topbar-wrapper,
.pwa-mode {
  display: block !important;
}

.pwa-mode #decklistDrawer {
  bottom: var(--nav-bottom-height);
}

/* ==========================================
   UNIVERSAL FOIL / ETCHED CARD EFFECTS
   Foil = a rainbow sheen (multiply) plus a highlight (plus-lighter).
   Both follow the pointer: core.js sets the --foil-* variables.
   ========================================== */

.foil-card,
.etched-card {
  position: relative;
  overflow: hidden;
  --foil-x: 0px;
  --foil-y: 0px;
  --foil-scale: 1;
  --foil-hue: 0deg;
  --foil-glow-x: 50%;
  --foil-glow-y: 50%;
}

/* Every card image leans toward the pointer (core.js sets the --foil-r* variables) */

.dc-card-tile-image,
.dc-card-image-container,
.dc-card-modal-image-wrapper,
.card-front,
.card-back,
.playtest-card,
.playtest-card-preview-wrapper,
.cs-card-img-wrap,
.foil-card,
.etched-card {
  --foil-rx: 0;
  --foil-ry: 0;
  --foil-tilt: 0deg;
  transform: perspective(1000px) rotate3d(var(--foil-rx), var(--foil-ry), 0, var(--foil-tilt));
  transition: transform 0.3s ease-out;
}

/* Flip faces: the container has the perspective, the back keeps its flip */

.card-front {
  transform: rotate3d(var(--foil-rx), var(--foil-ry), 0, var(--foil-tilt));
}

.card-back {
  transform: rotateY(180deg) rotate3d(var(--foil-rx), var(--foil-ry), 0, var(--foil-tilt));
}

/* Sheen */

.foil-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    112deg,
    #7c5c45 0%,
    #7d6573 10%,
    #b9555f 17%,
    #ab5c9d 22%,
    #356ade 29%,
    #2599fe 34%,
    #65a1ab 41%,
    #ecf79b 49%,
    #ffcf7d 54%,
    #f0a178 58%,
    #c68998 63%,
    #9f8bc0 67%,
    #8790d5 72%,
    #82a9ee 78%,
    #8ec6ff 85%,
    #a7e4ff 92%,
    #c1f8ff 100%
  );
  background-size: calc(100% * var(--foil-scale)) calc(100% * var(--foil-scale));
  background-position: calc(50% + var(--foil-x)) calc(50% + var(--foil-y));
  mix-blend-mode: multiply;
  opacity: 0.6;
  filter: hue-rotate(var(--foil-hue)) saturate(0.6) brightness(1.2);
  transition: background-position 0.25s ease-out, background-size 0.25s ease-out;
  pointer-events: none;
}

/* Highlight */

.foil-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--foil-glow-x) var(--foil-glow-y), #ffffff55, #0000000f);
  mix-blend-mode: plus-lighter;
  opacity: 0.75;
  pointer-events: none;
}

/* Etched sheen: metallic bands under a fine grain (SVG noise tile) */

.etched-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.3' intercept='-1.05'/%3E%3CfeFuncG type='linear' slope='3.3' intercept='-1.05'/%3E%3CfeFuncB type='linear' slope='3.3' intercept='-1.05'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(
      112deg,
      #8a6d3f 0%,
      #c9a55a 12%,
      #f1dc9a 22%,
      #b9a98a 30%,
      #7d8899 38%,
      #d9dde2 46%,
      #f4efd8 52%,
      #e2c476 60%,
      #a67c3a 68%,
      #c8b28a 76%,
      #e9e4d6 84%,
      #b3bcc8 92%,
      #f3ecd6 100%
    );
  background-size: 120px 120px, calc(100% * var(--foil-scale)) calc(100% * var(--foil-scale));
  background-position: 0 0, calc(50% + var(--foil-x)) calc(50% + var(--foil-y));
  background-blend-mode: overlay, normal;
  mix-blend-mode: multiply;
  opacity: 0.65;
  filter: hue-rotate(var(--foil-hue)) brightness(1.2);
  transition: background-position 0.25s ease-out, background-size 0.25s ease-out;
  pointer-events: none;
}

/* Etched highlight: glints through a speckle mask (alpha floor 0.45 keeps a soft glow) */

.etched-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--foil-glow-x) var(--foil-glow-y), #ffffff99, #0000000f);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' exponent='4'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0.55 0 0 0 0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' exponent='4'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0.55 0 0 0 0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
  mix-blend-mode: plus-lighter;
  opacity: 0.9;
  pointer-events: none;
}

/* ==========================================
   Landing Journey & Subscription Styles
   ========================================== */

body.custom-scrollbar {
  overflow-y: auto !important;
  height: auto;
}

main#lp-journey {
  position: relative;
  z-index: 1;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

main#lp-journey > section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#lp-problem-h1 {
  animation: fadeIn 1s ease-out, pulseText 4s ease-in-out infinite 1s;
}

@keyframes pulseText {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

/* Subscription benefit & plan styles */

.current-plan-btn {
  background-color: var(--dc-color-accent) !important;
  border-color: var(--dc-color-accent) !important;
  color: var(--dc-color-background) !important;
  cursor: default;
  opacity: 0.9;
}

.current-plan-btn:disabled {
  background-color: var(--dc-color-accent) !important;
  border-color: var(--dc-color-accent) !important;
  color: var(--dc-color-background) !important;
  cursor: default;
  opacity: 0.8;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ==========================================
   DeckView Full Analysis
   ========================================== */

#full-analysis {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-md);
  line-height: 1.7;
  max-width: 800px;
  overflow-wrap: break-word;
  margin-inline: auto;
}

/* Prose container. Same contract as the site .dc-prose with app tokens:
   app --font-size-md = 16px = site base, app xl/lg/md = site xl/md/base. */

.dc-prose {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-md);
  line-height: 1.7;
  max-width: 800px;
  margin-inline: auto;
  overflow-wrap: break-word;
}

.dc-prose > * {
  margin: 0 0 0 0;
}

.dc-prose > *:first-child {
  margin-top: 0;
}

.dc-prose > *:last-child {
  margin-bottom: 0;
}

.dc-prose h1,
.dc-prose h2,
.dc-prose h3,
.dc-prose h4 {
  color: var(--dc-color-text);
  letter-spacing: 0;
  text-transform: none;
}

.dc-prose h1 {
  margin: 0 0 var(--spacing-base);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

.dc-prose h2 {
  margin: var(--spacing-3xl) 0 var(--spacing-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.dc-prose h3 {
  margin: var(--spacing-xl) 0 var(--spacing-xs);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.dc-prose h4 {
  margin: var(--spacing-base) 0 var(--spacing-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}

.dc-prose p,
.dc-prose ul,
.dc-prose ol,
.dc-prose blockquote,
.dc-prose pre,
.dc-prose table {
  margin: 0 0 var(--spacing-base);
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

.dc-prose ul,
.dc-prose ol {
  padding-left: 1.5rem;
  list-style-position: outside;
}

.dc-prose ul {
  list-style-type: disc;
}

.dc-prose ol {
  list-style-type: decimal;
}

.dc-prose ol ol {
  list-style-type: lower-alpha;
}

.dc-prose ul ul,
.dc-prose ul ol,
.dc-prose ol ul,
.dc-prose ol ol {
  margin: var(--spacing-xxs) 0 0;
}

.dc-prose li {
  margin: 0 0 var(--spacing-xxs);
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

.dc-prose li::marker {
  color: var(--dc-color-text-subtle);
}

.dc-prose strong,
.dc-prose b {
  color: var(--dc-color-text);
  font-weight: var(--font-weight-semibold);
}

.dc-prose em {
  font-style: italic;
}

.dc-prose hr {
  border-color: var(--dc-border);
  margin: var(--spacing-3xl) 0;
}

.dc-prose blockquote {
  padding: 0 0 0 var(--spacing-base);
  border-left: 2px solid var(--dc-border-hover);
  color: var(--dc-color-text-muted);
  font-style: italic;
}

.dc-prose blockquote > *:last-child {
  margin-bottom: 0;
}

.dc-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-compact);
  line-height: 1.625;
}

.dc-prose th,
.dc-prose td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--dc-border);
  text-align: left;
  vertical-align: middle;
}

.dc-prose th {
  color: var(--dc-color-text-muted);
  font-weight: var(--font-weight-medium);
}

.dc-prose code {
  padding: 2px 6px;
  border-radius: var(--dc-radius-3);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
  font-family: var(--font-monospace);
  font-size: 0.875em;
}

.dc-prose a {
  color: var(--dc-color-accent);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 2px;
}

.dc-prose a:hover {
  text-decoration-color: currentColor;
}

.dc-mana-symbol {
  width: 11px;
  height: 11px;
  vertical-align: middle;
  display: inline-block;
  margin: 0 1px;
}

/* Commander Quest. The hero has no surface of its own; the .dc-panel
   around it is the surface. */

.quest-hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  position: relative;
  align-items: center;
  text-align: center;
}

.quest-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
  text-align: center;
}

.quest-hero-content h1 {
  margin: 0 0 var(--spacing-xs) 0;
}

.quest-hero-lede {
  color: var(--dc-color-text-muted);
  max-width: 46ch;
  margin: 0 auto;
}

.quest-hero-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.quest-primary-start {
  min-width: 180px;
}

.quest-main {
  margin-top: var(--spacing-lg);
}

.quest-panels {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.quest-progress {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.quest-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.quest-progress-hint {
  color: var(--dc-color-text-muted);
  font-size: 0.9rem;
}

.quest-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--dc-layer-sunken);
  border-radius: var(--dc-radius-pill);
  overflow: hidden;
}

.quest-progress-bar div {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #0ea5e9, #0ea5e9);
  border-radius: var(--dc-radius-pill);
  transition: width 0.2s ease;
}

.quest-card {
  margin-top: var(--spacing-xl);
}

.quest-question-text {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-size-lg);
  text-align: center;
  text-shadow: var(--shadow-text);
}

.quest-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--spacing-sm);
}

.quest-option {
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  padding: var(--spacing-base);
  color: var(--dc-color-text);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.12s ease, background-color 0.18s ease;
}

.quest-option:hover {
  border-color: var(--dc-border-hover);
  transform: translateY(-1px);
}

.quest-option.selected {
  border-color: rgba(99, 102, 241, 0.75);
  background: rgba(99, 102, 241, 0.12);
}

.quest-oracle {
  display: grid;
  gap: var(--spacing-sm);
  place-items: center;
  text-align: center;
}

.quest-oracle-ring {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.quest-loading-ring {
  width: 75px;
  height: 75px;
}

.quest-loading-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.quest-loading-track {
  color: rgba(255, 255, 255, 0.12);
}

.quest-loading-progress {
  color: #0ea5e9;
  transition: stroke-dashoffset 0.05s linear;
}

.quest-loading-sub {
  color: var(--dc-color-text-muted);
}

.quest-results-head {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  align-items: flex-start;
  flex-wrap: wrap;
}

.quest-results-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.quest-carousel {
  position: relative;
  overflow: hidden;
  margin-top: var(--spacing-lg);
}

.quest-carousel-track {
  display: flex;
  transition: transform 0.25s ease;
  width: 100%;
}

.quest-carousel-card {
  min-width: 100%;
  box-sizing: border-box;
}

.quest-carousel-art {
  padding: var(--spacing-xs);
}

.quest-carousel-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.quest-carousel-title {
  margin: 0;
}

.quest-carousel-subtitle {
  margin: 0;
  color: var(--dc-color-text-muted);
}

.quest-carousel-blurb {
  margin: 0;
  color: var(--dc-color-text-muted);
}

.quest-carousel-reasoning {
  margin: 0;
  color: var(--dc-color-text-muted);
}

.quest-inline-eyebrow {
  margin-top: var(--spacing-sm);
}

.quest-section-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.quest-partner-image-wrapper {
  --quest-partner-offset: 50px;
  --quest-partner-ratio: 138%;
  position: relative;
  width: 320px;
  max-width: 100%;
  padding-bottom: calc(var(--quest-partner-ratio) + var(--quest-partner-offset));
  overflow: hidden;
  margin: 0 auto;
}

.quest-partner-stack {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
}

.quest-partner-card {
  position: absolute;
  inset: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.2s ease;
  cursor: pointer;
}

.quest-partner-card:nth-child(1) {
  transform: translate(0, var(--quest-partner-offset));
}

.quest-partner-card:nth-child(2) {
  transform: translate(0, 0);
}

.quest-partner-card[data-position="front"] {
  z-index: 2;
  filter: none;
  transform: translate(0, 0);
}

.quest-partner-card[data-position="back"] {
  z-index: 1;
  filter: none;
  transform: translate(0, var(--quest-partner-offset));
}

.quest-carousel-image-wrapper .card-flip-container {
  height: 100%;
}

#questPrevSlide {
  left: 10px;
}

#questNextSlide {
  right: 10px;
}

.quest-keycard-list {
  margin: 0;
  color: var(--dc-color-text-muted);
  line-height: 1.5;
}

.quest-axis-grid, .quest-color-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.quest-axis-row, .quest-color-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.quest-axis-label {
  display: inline-flex;
  align-items: center;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-tight);
  flex: 0 0 auto;
  width: 75px;
}

.quest-axis-bar {
  position: relative;
  height: 0.5rem;
  background: var(--dc-layer-sunken);
  border-radius: var(--dc-radius-pill);
  overflow: hidden;
  margin-top: 0;
  flex: 1 1 auto;
}

.quest-axis-bar div {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  border-radius: var(--dc-radius-pill);
}

.quest-color-bar {
  background: var(--dc-layer-sunken);
}

.quest-color-bar div {
  height: 100%;
  background: var(--quest-color);
}

.quest-color-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
}

.quest-color-icon {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

.quest-results-head-center {
  text-align: center;
  justify-content: center;
}

.quest-results-head-center h2 {
  margin: 0;
}

.quest-profile-static {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-4xl);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-base);
  border-bottom: 1px solid var(--dc-border);
  padding-bottom: var(--spacing-base);
}

.quest-carousel-pagination {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-base);
  border-bottom: 1px solid var(--dc-border);
}

.quest-primary-actions-dual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}

.quest-action {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.quest-card-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
}

.quest-card-modal.hidden {
  display: none;
}

.quest-card-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--dc-layer-scrim);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
}

.quest-card-modal-content {
  position: relative;
  background: var(--dc-layer-float);
  backdrop-filter: blur(var(--dc-blur-heavy));
  -webkit-backdrop-filter: blur(var(--dc-blur-heavy));
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  padding: var(--spacing-lg);
  max-width: 480px;
  width: 90%;
  box-shadow: var(--dc-shadow-modal);
}

.quest-card-modal-body {
  display: grid;
  gap: var(--spacing-sm);
}

.quest-card-modal-image {
  width: 100%;
  height: 360px;
  background: var(--dc-layer-raised);
  background-size: cover;
  background-position: center;
  border-radius: var(--dc-radius-2);
}

.quest-card-modal-title {
  font-weight: 700;
}

.quest-card-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  color: white;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .quest-primary-card {
    grid-template-columns: 1fr;
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .quest-results-grid {
    grid-template-columns: 1fr;
  }

  .quest-results-head {
    flex-direction: column;
  }
}

.hidden {
  display: none !important;
}

#questIntro.fade-out {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

#questQuestionPanel.fade-in {
  animation: questFadeIn 0.3s ease;
}

@keyframes questFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dc-gamechanger-icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
  vertical-align: text-bottom;
  color: var(--dc-color-text);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.dc-gamechanger-icon svg {
  width: 100%;
  height: 100%;
}

.dc-gamechanger-badge {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dc-color-accent);
  color: var(--dc-color-background);
  border-radius: var(--dc-radius-card);
  overflow: hidden;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.dc-gamechanger-badge::after {
  content: none;
}

.dc-gamechanger-badge .dc-gamechanger-icon {
  position: absolute;
  top: 4px;
  left: 3px;
  width: 12px;
  height: 12px;
  margin: 0;
  color: currentColor;
  z-index: 2;
}

.dc-banned-icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
  vertical-align: text-bottom;
  color: var(--dc-color-danger, #ff5555);
}

.dc-banned-icon svg {
  width: 100%;
  height: 100%;
}

.dc-banned-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dc-color-danger, #ff5555);
  color: white;
  border-radius: var(--dc-radius-card);
  overflow: hidden;
  z-index: 2;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.dc-banned-badge::after {
  content: none;
}

.dc-banned-badge .dc-banned-icon {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 14px;
  height: 14px;
  margin: 0;
  color: currentColor;
  filter: none;
  z-index: 2;
}

/* Restricted cards are legal, so they get a cooler tone than the danger
   red of the not-legal octagon. The two are mutually exclusive, so the
   badge shares the top-right corner slot. */

.dc-restricted-icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
  vertical-align: text-bottom;
  color: var(--accent-restricted, #a78bfa);
}

.dc-restricted-icon svg {
  width: 100%;
  height: 100%;
}

.dc-restricted-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-restricted, #a78bfa);
  color: white;
  border-radius: var(--dc-radius-card);
  overflow: hidden;
  z-index: 2;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.dc-restricted-badge::after {
  content: none;
}

.dc-restricted-badge .dc-restricted-icon {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 13px;
  height: 13px;
  margin: 0;
  color: currentColor;
  filter: none;
  z-index: 2;
}

/* Shared instant tooltip for card badges ([data-dc-tip] targets). Lives on
   <body> and positions itself via JS (core.js), because grid badges sit
   inside clip-path'd corner slots that would clip an inline tooltip. */

.dc-badge-tooltip {
  position: fixed;
  z-index: 10000;
  padding: 3px 8px;
  background-color: var(--dc-layer-float);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
  color: var(--dc-color-text);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  border-radius: var(--dc-radius-2);
  border: 1px solid var(--dc-border);
  box-shadow: var(--dc-shadow-float);
  pointer-events: none;
  opacity: 0;
}

.dc-badge-tooltip.visible {
  opacity: 1;
}

.dc-quantity-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 4px 0 0;
  background: white;
  color: var(--dc-color-background);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--dc-radius-card);
  overflow: hidden;
  z-index: 4;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* Slider controls */

.dc-slider-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  padding: 10px 0;
}

.dc-slider-track-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background-color: var(--dc-layer-sunken);
  border-radius: var(--dc-radius-pill);
}

.dc-slider-track-filled {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background-color: var(--dc-color-accent);
  border-radius: var(--dc-radius-pill);
  z-index: 1;
}

.dc-slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: var(--dc-color-accent);
  border-radius: 50%;
  cursor: grab;
  z-index: 2;
}

.dc-slider-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Numeric inputs aligned with sliders: narrow padding on the shared field */

.dc-number-input {
  padding: 6px 2px;
}

.dc-number-input::-webkit-inner-spin-button,
.dc-number-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================
   BRACKET INFO MODAL (cb-modal design language)
   ========================================== */

/* The panel, blur, overlay, and open animation come from .dc-modal. */

.cb-modal-article {
  max-width: 560px;
}

/* The bracket border color fades in with the .dc-modal tint. */

.cb-modal-article.active {
  border-color: var(--b-grad-l);
}

.cb-modal-header-bar {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--dc-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cb-modal-hdr-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cb-modal-hdr-info h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.cb-modal-hdr-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.cb-modal-hdr-tagline {
  color: var(--dc-color-text-muted);
  font-weight: 500;
  font-style: italic;
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.45;
}

.cb-modal-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.cb-msec-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--dc-border);
  margin-bottom: 1rem;
}

.cb-msec-title svg {
  width: 15px;
  height: 15px;
}

/* Bracket modal: reason/violation list */

.cb-reason-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cb-reason-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  line-height: 1.5;
}

.cb-reason-bullet {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--b-grad-l, #38bdf8), var(--b-grad-r, #38bdf8));
  margin-top: 0.45em;
}

.cb-reason-text {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  background: linear-gradient(135deg, var(--b-grad-l, #38bdf8), var(--b-grad-r, #38bdf8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cb-reason-detail {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--dc-color-text-muted);
  -webkit-text-fill-color: var(--dc-color-text-muted);
  line-height: 1.5;
  margin-top: 0.1rem;
  padding-left: 0.6rem;
}

/* Bracket modal: Threat Index note (inside Why This Bracket) */

.cb-dti-note {
  margin-top: var(--spacing-sm);
}

.cb-dti-note-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dc-color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.cb-dti-note-label svg {
  width: 13px;
  height: 13px;
}

.cb-dti-note-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.cb-dti-note-link:hover {
  color: var(--dc-color-text-muted);
}

/* Bracket modal: breakdown rows */

.cb-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--dc-border);
}

.cb-breakdown-row:last-child {
  border-bottom: none;
}

.cb-breakdown-label {
  font-size: 0.82rem;
}

.cb-breakdown-value {
  font-weight: 700;
  font-size: 0.82rem;
}

.cb-breakdown-cards {
  font-size: 0.72rem;
  color: var(--dc-color-text-muted);
  line-height: 1.5;
  padding: 0.15rem 0 0.4rem 0.75rem;
}

/* Bracket modal: combo pair chips */

.cb-combo-pairs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.25rem 0 0.4rem 0.75rem;
}

.cb-combo-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.4;
}

.cb-combo-card {
  color: var(--dc-color-text-muted);
}

.cb-combo-plus {
  color: var(--dc-color-text-muted);
  font-weight: 700;
  font-size: 0.65rem;
  opacity: 0.5;
}

/* Bracket modal: footer CTA */

.cb-modal-footer-cta {
  padding-top: 1rem;
  border-top: 1px solid var(--dc-border);
}

.cb-learn-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  transition: background 0.2s, border-color 0.2s;
}

.cb-learn-more-btn:hover {
  background: var(--dc-layer-raised);
  border-color: var(--dc-border-hover);
}

.cb-learn-more-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.cb-footer-cta-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.cb-footer-cta-row .cb-learn-more-btn {
  flex: 1;
}

.cb-print-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.cb-print-btn:hover {
  background: var(--dc-layer-raised);
  border-color: var(--dc-border-hover);
  color: #fff;
}

.cb-print-btn svg {
  width: 16px;
  height: 16px;
}

/* ── dc3 Item Card (shared: folders, binders, etc.) ── */

.dc-item-group {
  border-bottom: 1px solid var(--dc-border);
}

.dc-item-group.is-hidden {
  display: none;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--dc-radius-2);
  color: var(--dc-color-text-muted);
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-btn:hover {
  background-color: var(--dc-layer-raised);
  color: var(--dc-color-text);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* ========== TOGGLE SWITCH (global) ========== */

.dc-toggle-switch {
  /* On fill: the accent darkened so the white knob reads at 3:1 or better */
  --dc-toggle-on: color-mix(in srgb, var(--dc-color-accent) 60%, var(--dc-color-background));
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.dc-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.dc-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--dc-layer-sunken);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-pill);
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
                border-color var(--dc-duration-fast) var(--dc-easing-standard);
}

/* Knob: white disc with a soft drop shadow */

.dc-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 1px;
  bottom: 1px;
  background-color: var(--dc-color-text);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(0 0 4 / 35%);
  transition: transform var(--dc-duration-fast) var(--dc-easing-standard);
}

/* Knob glyph: an O ring when off, an I bar in the accent when on */

.dc-toggle-slider:after {
  position: absolute;
  content: "";
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  left: 5px;
  bottom: 5px;
  border: 2px solid color-mix(in srgb, var(--dc-color-background) 40%, var(--dc-color-text));
  border-radius: 50%;
  transition: transform var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-toggle-switch input:checked + .dc-toggle-slider {
  background-color: var(--dc-toggle-on);
  border-color: var(--dc-toggle-on);
}

.dc-toggle-switch input:checked + .dc-toggle-slider:before {
  transform: translateX(16px);
}

.dc-toggle-switch input:checked + .dc-toggle-slider:after {
  width: 2px;
  height: 8px;
  left: 8px;
  border: 0;
  border-radius: 1px;
  background-color: var(--dc-toggle-on);
  transform: translateX(16px);
}

.dc-toggle-switch input:focus-visible + .dc-toggle-slider {
  box-shadow: var(--dc-shadow-focus);
}

/* Bracket modal: responsive */

@media (max-width: 480px) {
  .cb-modal-header-bar {
    padding: 1rem;
  }

  .cb-modal-hdr-tagline {
    font-size: 0.72rem;
  }

  .cb-modal-scroll {
    padding: 1rem;
    gap: 1.25rem;
  }
}

/* ==========================================================================
   GLASSMORPHISM UTILITIES
   Reusable surfaces for the unified workspace UI. Favors transparency and
   backdrop-blur so the dynamic app background bleeds through.
   ========================================================================== */

.dc-glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  color: var(--dc-color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.dc-glass-button:hover:not(:disabled):not([aria-disabled="true"]),
.dc-glass-button:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background: var(--dc-layer-raised-hover);
  border-color: var(--dc-border-hover);
  color: var(--dc-color-text);
}

.dc-glass-button:focus,
.dc-glass-button:focus-visible {
  border-color: var(--dc-border-focus);
  outline: none;
}

.dc-glass-button:disabled,
.dc-glass-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.dc-glass-button svg,
.dc-glass-button .dc-topbar-action-button-icon svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.78;
}

/* ==========================================================================
   UNIFIED TOPBAR — page-injected controls (search + sort + actions)
   ========================================================================== */

/* Topbar injected controls group — search trigger, sort, action button */

.dc-topbar-page-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: nowrap;
}

.dc-topbar-sort-container {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.dc-topbar-sort-container .dc-context-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 200px;
  transform-origin: top right;
}

.dc-topbar-sort-btn {
  white-space: nowrap;
}

.dc-topbar-sort-btn .sort-button-prefix {
  color: var(--dc-color-text-muted);
  opacity: 0.7;
}

.dc-topbar-sort-btn .sort-button-label {
  color: var(--dc-color-text);
}

@media (max-width: 767px) {
  .dc-topbar-sort-btn .sort-button-prefix {
    display: none;
  }
}

/* Shared workspace chrome for My Decks + My Collection: folder/binder
   pills + responsive grid. */

/* Folder / binder pill grid (→ horizontal scroll on mobile). */

.dc-folder-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-base);
}

@media (min-width: 768px)  {
  .dc-folder-pill-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dc-folder-pill-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .dc-folder-pill-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .dc-folder-pill-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    padding-bottom: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .dc-folder-pill-grid::-webkit-scrollbar {
    display: none;
  }
}

/* Folder / binder pill. The .dc-button--tertiary frame at chip metrics:
   hairline border, dark fill, no blur, no press scale. Hover lifts the
   fill and border. The count and price are plain tabular text. */

.dc-folder-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--dc-radius-pill);
  cursor: pointer;
  color: var(--dc-color-text);
  background: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              border-color var(--dc-duration-fast) var(--dc-easing-standard),
              box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
  min-width: 0;
}

.dc-folder-pill:hover {
  background: var(--dc-layer-raised-hover);
  border-color: var(--dc-border-hover);
}

.dc-folder-pill:focus-visible {
  outline: none;
  border-color: var(--dc-border-focus);
  box-shadow: var(--dc-shadow-focus);
}

.dc-folder-pill.is-locked {
  opacity: 0.55;
}

@media (max-width: 767px) {
  .dc-folder-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

.dc-folder-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dc-color-text-muted);
}

.dc-folder-pill-icon.is-accent {
  color: var(--smart-accent-color, #ffe1b4);
}

.dc-folder-pill-icon svg {
  width: 16px;
  height: 16px;
}

.dc-folder-pill-text {
  flex: 1 1 auto;
  min-width: 0;
}

.dc-folder-pill-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--dc-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-folder-pill-count,
.dc-folder-pill-price {
  flex-shrink: 0;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.dc-folder-pill-price {
  color: var(--dc-color-text);
}

.dc-folder-pill-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: -6px;
  border-radius: var(--dc-radius-pill);
  background: transparent;
  border: none;
  color: var(--dc-color-text-subtle);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-folder-pill-options:hover {
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
}

.dc-folder-pill-options svg {
  width: 14px;
  height: 14px;
}

/* Recovered 2026-07-10: these rules had been added directly to the compiled
   webapp.compiled.css and were missing from this source file. */

.dc-modal-help-text {
  margin: 0 0 var(--spacing-md);
}

.dc-folder-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-base);
  padding: var(--spacing-sm) 0;
}

.dc-folder-setting-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}

.dc-folder-setting-note {
  margin: 2px 0 0;
}

/* Override Tailwind's .transition utility: transitioning filter/backdrop-filter
   forces blur recomputation on every animation frame. */

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
}

/* ==========================================================================
   Deck comments (deck social) — bottom comment section on builder/decklist.
   Same values as the blog comment section (blog/static/blog.css) on the
   shared components; rendered by deck-social.js.
   ========================================================================== */

/* Comments: header row, composer, then one hairline row per thread */

.dc-comments-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--dc-border);
  text-align: left;
}

.dc-comments-section.hidden {
  display: none;
}

.dc-comments-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.dc-comments-sort {
  margin-left: auto;
}

.dc-comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

/* The script sizes the box to its content, so no manual resize */

.dc-comment-form .dc-comment-textarea {
  overflow: hidden;
  resize: none;
}

.dc-comment-form-actions {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xs);
}

.dc-comment-form.is-active .dc-comment-form-actions,
.dc-comment-form--inline .dc-comment-form-actions {
  display: flex;
}

.dc-comment-form-buttons {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.dc-comments-thread {
  display: flex;
  flex-direction: column;
}

.dc-comments-thread > .dc-comment {
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--dc-border);
}

.dc-comments-thread > .dc-comment:last-child {
  padding-bottom: 0;
}

.dc-comments-empty {
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--dc-border);
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-compact);
}

.dc-comment {
  position: relative;
  min-width: 0;
}

.dc-comment-highlight {
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-raised);
  box-shadow: 0 0 0 8px var(--dc-layer-raised);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.dc-comment-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-sm);
  min-width: 0;
}

.dc-comment-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.dc-comment-avatar {
  --avatar-hue: 205;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: hidden;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-pill);
  background: hsl(var(--avatar-hue) 28% 22%);
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-comment-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.dc-comment-avatar:hover {
  border-color: var(--dc-border-hover);
}

.dc-comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  min-width: 0;
  min-height: 32px;
}

.dc-comment-author {
  color: var(--dc-color-text);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-semibold);
}

.dc-comment-author-link {
  text-decoration: none;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-comment-author-link:hover {
  color: var(--dc-color-accent);
}

.dc-comment-timestamp {
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.dc-comment-body {
  margin: 0;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-compact);
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dc-comment-body.is-deleted {
  color: var(--dc-color-text-subtle);
  font-style: italic;
}

.dc-comment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: -13px;
}

.dc-comment-replies-toggle {
  width: -moz-max-content;
  width: max-content;
  margin-left: -13px;
}

.dc-comment-replies-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-comment-replies-toggle.is-collapsed svg {
  transform: rotate(-90deg);
}

.dc-comment-children {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-base);
  margin-left: 15px;
  padding-left: calc(var(--spacing-base) + 9px);
}

/* Past the max visual depth, replies stop indenting */

.dc-comment-children--flat {
  margin-left: 0;
  padding-left: 0;
}

.dc-comment-children--flat > .dc-comment-thread-rail,
.dc-comment-children.hidden,
.dc-comment-children[hidden] {
  display: none;
}

/* Thread rail: the click target is wider than the 1px line it draws */

.dc-comment-thread-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  z-index: 1;
  width: 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dc-comment-thread-rail::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 1px;
  background: var(--dc-border);
  content: "";
  transition: background var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-comment-thread-rail:hover::before,
.dc-comment-thread-rail:focus-visible::before {
  background: var(--dc-color-text-subtle);
}

.dc-comment-thread-rail:focus-visible {
  outline: 2px solid var(--dc-border-focus);
  outline-offset: 2px;
}

.dc-comment-inline-composer {
  margin-top: var(--spacing-xs);
}

@media (max-width: 640px) {
  .dc-comments-section {
    gap: var(--spacing-lg);
  }

  .dc-comment-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--spacing-xs);
  }

  .dc-comment-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: var(--font-size-xs);
  }

  .dc-comment-meta {
    min-height: 28px;
  }

  .dc-comment-children {
    margin-left: 13px;
    padding-left: var(--spacing-base);
  }

  .dc-comment-children--flat {
    margin-left: 0;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-comment-replies-toggle svg {
    transition: none;
  }
}

/* Acquisition prompt modal. NOTE: these rules previously lived only in the
   compiled webapp.compiled.css; kept here so a rebuild does not drop them. */

.dc-modal:has(.dc-acquisition-prompt) {
  max-width: 520px;
}

.dc-acquisition-prompt {
  display: grid;
  gap: var(--spacing-sm);
}

.dc-acquisition-prompt p {
  margin: 0;
}

.dc-acquisition-prompt-error {
  min-height: 1.25em;
  color: var(--dc-color-danger, #ef4444);
  font-size: var(--font-size-xs);
}

/* ==========================================
   GRID SUBHEADER + SCOPE CRUMB
   ========================================== */

.dc-grid-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-base);
  margin-bottom: var(--spacing-base);
}

.dc-grid-subheader .dc-button {
  height: 28px;
  padding: 0 12px;
}

.dc-grid-subheader .sort-button-label {
  color: inherit;
}

.dc-grid-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--dc-color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-grid-count.dc-scope-path {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.dc-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.dc-crumb {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--dc-color-text-muted);
  white-space: nowrap;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

button.dc-crumb {
  cursor: pointer;
}

button.dc-crumb:hover {
  color: var(--dc-color-text);
}

button.dc-crumb:focus-visible {
  color: var(--dc-color-text);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dc-crumb.is-current {
  color: var(--dc-color-text);
  flex-shrink: 0;
}

.dc-crumb-sep,
.dc-crumb-count::before {
  color: var(--dc-color-text-subtle);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
}

.dc-crumb-count {
  white-space: nowrap;
  flex-shrink: 0;
}

.dc-crumb-count::before {
  content: "•";
  margin-right: 6px;
}

/* ==========================================
   FILTER BUTTON
   ========================================== */

.dc-filter-button.has-active-filters {
  background: var(--dc-color-accent-subtle);
  border-color: var(--dc-color-accent-border);
  color: var(--dc-color-accent);
}

/* Pill form: the frame carries the accent border */

.dc-pill:has(> .dc-filter-button.has-active-filters) {
  border-color: var(--dc-color-accent-border);
}

/* ==========================================
   FILTER TOKEN
   Toggle chip for a filter option (collection filter modal, builder Find
   Cards filters). .is-active = selected.
   ========================================== */

.dc-filter-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}

.dc-filter-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--dc-radius-2);
  border: 1px solid var(--dc-border);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
}

.dc-filter-token:hover,
.dc-filter-token:focus-visible {
  border-color: var(--dc-border-hover);
  color: var(--dc-color-text);
}

.dc-filter-token.is-active {
  border-color: var(--dc-color-accent);
  background: var(--dc-color-accent-subtle);
  color: var(--dc-color-accent);
}

.dc-filter-token-count {
  opacity: 0.6;
}

.dc-filter-token.is-active .dc-filter-token-count {
  opacity: 0.8;
}

/* ==========================================
   PAGINATION
   ========================================== */

.dc-pagination-button {
  background: var(--dc-layer-raised);
  padding: var(--spacing-xxs) var(--spacing-sm);
  width: 100%;
  border-radius: var(--dc-radius-2);
  border: 1px solid var(--dc-border);
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-standard);
}

.dc-pagination-button:hover,
.dc-pagination-button:focus-visible {
  border-color: var(--dc-border-focus);
  color: var(--dc-color-text);
}

.dc-pagination-button[disabled],
.dc-pagination-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  border-color: var(--dc-border);
}

/* ==========================================
   CARD VIEWER
   ========================================== */

.dc-card-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.dc-card-viewer-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--dc-layer-scrim);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
}

.dc-card-viewer-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.dc-card-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dc-card-viewer-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dc-card-viewer-counter {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(212 212 216);
}

.dc-card-viewer-controls {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.dc-card-viewer-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

body.dc-card-viewer-open {
  overflow: hidden;
}

/* ==========================================
   CARD PREVIEW
   ========================================== */

.dc-card-preview-modal .dc-card-viewer-wrapper {
  overflow-y: auto;
}

.dc-card-preview-viewer {
  width: min(100%, 36rem);
  padding-block: calc(var(--nav-topbar-height, 64px) + 1rem) 1rem;
}

.dc-card-preview-track {
  width: 100%;
}

.dc-card-preview-modal #cardFlipContainer {
  width: min(80vw, 500px);
  height: auto;
  aspect-ratio: 63 / 88;
}

.dc-card-preview-modal #cardFlipContainer .card-front,
.dc-card-preview-modal #cardFlipContainer .card-back {
  height: 100%;
  background: rgba(6, 8, 12, 0.9);
}

.dc-card-preview-modal #cardFlipContainer img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.dc-card-preview-meta {
  justify-content: center;
  width: min(100%, 30rem);
}

.dc-card-preview-title {
  text-align: center;
  overflow-wrap: anywhere;
}

.dc-card-preview-actions {
  justify-content: center;
  flex-wrap: wrap;
  width: min(100%, 30rem);
}

.dc-card-preview-actions .dc-button {
  min-width: 7rem;
}

@media (max-width: 640px) {
  .dc-card-preview-viewer {
    width: 100%;
    padding-inline: 0.5rem;
  }
}

/* ==========================================
   DECK PICKER + TABS
   ========================================== */

.dc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--dc-border);
  margin-bottom: var(--spacing-base);
}

.dc-tab {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--dc-color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.dc-tab:hover {
  color: var(--dc-color-text);
}

.dc-tab.active {
  color: var(--dc-color-accent);
  border-bottom-color: var(--dc-color-accent);
}

.dc-tab-panel {
  display: none;
}

.dc-tab-panel.active {
  display: block;
}

.dc-deck-picker-search {
  margin-bottom: var(--spacing-sm);
}

.dc-deck-picker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-base);
  max-height: 55vh;
  overflow-y: auto;
  padding: var(--spacing-xs);
}

@media (min-width: 768px) {
  .dc-deck-picker-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dc-deck-picker-grid .dc-card {
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
  box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
  border-color 0.3s ease,
  outline-color 0.3s ease,
  outline-offset 0.3s ease;
}

/* Compact layout (layout: 'compact'): shared .deck-card-compact cards */

.dc-deck-picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 55vh;
  overflow-y: auto;
  padding: var(--spacing-xs);
}

.dc-deck-picker-list .deck-card-compact {
  cursor: pointer;
}

.dc-deck-picker-list .deck-card-compact.dc-deck-picker-selected {
  border-color: var(--dc-color-accent);
  background: var(--dc-color-accent-subtle);
}

.dc-deck-picker-selectable {
  transition: border-color 0.3s ease;
}

.dc-deck-picker-selectable.dc-deck-picker-selected {
  border-color: var(--dc-color-accent) !important;
}

.dc-deck-picker-url-input {
  font-family: var(--font-monospace);
}

.dc-deck-picker-url-hint {
  margin-top: var(--spacing-xs);
}

.dc-deck-picker-empty {
  padding: var(--spacing-2xl) 0;
}

.dc-deck-picker-loading {
  text-align: center;
  padding: var(--spacing-xl) 0;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
}

/* ==========================================
   BADGE (site .dc-badge values)
   ========================================== */

.dc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-3);
  background: transparent;
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.dc-badge--accent {
  border-color: var(--dc-color-accent-border);
  background: var(--dc-color-accent-subtle);
  color: var(--dc-color-accent);
}

/* Callout. Same values as the site .dc-callout and .dc-callout--danger. */

.dc-callout {
  margin-bottom: var(--spacing-base);
  padding: 14px 16px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.dc-callout--danger {
  border-color: color-mix(in srgb, var(--dc-color-danger) 20%, transparent);
  background: color-mix(in srgb, var(--dc-color-danger) 7%, transparent);
  color: var(--dc-color-danger-text);
}

/* ==========================================
   PROFILE COMPONENTS (profile + public profile)
   Stage header on the page art, score row, deck reel, bento panels.
   ========================================== */

.dc-profile-page {
  gap: var(--spacing-panel-gap);
}

/* Stage: the page art shows through; identity sits on its bottom edge. */

.dc-profile-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  padding: var(--spacing-xl) var(--spacing-xl) 0;
}

.dc-profile-stage-banner {
  position: absolute;
  inset: 0;
  border-radius: var(--dc-radius-1);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--dc-tier-color, var(--dc-color-text-subtle)) 26%, transparent) 0%, transparent 78%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.dc-profile-stage.has-banner .dc-profile-stage-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(3, 8, 10, 0.92) 0%, rgba(3, 8, 10, 0.4) 55%, rgba(3, 8, 10, 0.1) 100%);
}

.dc-profile-stage-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-2xl);
  width: 100%;
  min-width: 0;
}

.dc-profile-stage-id {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-xl);
  min-width: 0;
}

.dc-profile-avatar {
  position: relative;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 3px solid var(--dc-color-background);
  border-radius: 50%;
  background: var(--dc-color-background);
  box-shadow: 0 0 0 1px var(--dc-border-hover);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-profile-avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.dc-profile-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dc-color-text-subtle);
}

.dc-profile-avatar-placeholder-icon {
  width: 50%;
  height: 50%;
  display: block;
  flex-shrink: 0;
}

.dc-profile-stage-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-bottom: 6px;
}

.dc-profile-username {
  margin: 0;
  font-size: 40px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.dc-profile-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-base);
}

.dc-profile-byline-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--dc-color-text-subtle);
}

.dc-profile-count {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-profile-count b {
  color: var(--dc-color-text);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.dc-profile-count:hover,
.dc-profile-count:focus-visible {
  color: var(--dc-color-text);
  outline: none;
}

/* Tier badge: tinted outline + soft neon glow in the tier color */

.dc-profile-tier-badge {
  --dc-tier-color: var(--dc-color-text);
  position: relative;
  color: var(--dc-tier-color);
  border-color: color-mix(in srgb, var(--dc-tier-color) 24%, transparent);
  background: color-mix(in srgb, var(--dc-tier-color) 9%, transparent);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--dc-tier-color) 35%, transparent),
    0 0 14px color-mix(in srgb, var(--dc-tier-color) 14%, transparent);
}

.dc-profile-tier-badge.is-plain {
  --dc-tier-color: var(--dc-color-text);
  border-color: var(--dc-border);
  background: transparent;
  box-shadow: none;
}

.dc-profile-bio {
  margin: 0;
  max-width: 56ch;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-base);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.dc-profile-stage-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  padding-bottom: var(--spacing-xs);
}

.dc-profile-stage-tools {
  position: absolute;
  top: var(--spacing-xl);
  right: var(--spacing-xl);
  display: flex;
  gap: var(--spacing-xs);
  z-index: 2;
}

.dc-profile-stage-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-float);
  box-shadow: var(--dc-shadow-float);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
  color: var(--dc-color-text);
  cursor: pointer;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-profile-stage-tool svg {
  width: 16px;
  height: 16px;
}

.dc-profile-stage-tool:hover,
.dc-profile-stage-tool:focus-visible {
  border-color: var(--dc-border-hover);
  color: var(--dc-color-accent);
  outline: none;
}

.dc-profile-stage-tool.danger {
  color: var(--dc-color-danger-text);
}

.dc-profile-stage-tool.danger:hover,
.dc-profile-stage-tool.danger:focus-visible {
  color: var(--dc-color-danger-text);
}

.dc-profile-social-icons {
  display: flex;
  gap: var(--spacing-xxs);
}

.dc-profile-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--dc-radius-2);
  background: transparent;
  color: var(--dc-color-text-subtle);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-profile-social-icon.is-linked {
  color: var(--dc-color-text);
}

.dc-profile-social-icon:hover,
.dc-profile-social-icon:focus-visible {
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
  outline: none;
}

.dc-profile-social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Score row: level ring + one value per feature. */

.dc-profile-score {
  display: flex;
  align-items: center;
  padding: 0 0 var(--spacing-xl);
  border-bottom: 1px solid var(--dc-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.dc-profile-score::-webkit-scrollbar {
  display: none;
}

.dc-profile-score-level {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-right: var(--spacing-3xl);
}

.dc-profile-ring {
  --dc-xp-progress: 0%;
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
}

.dc-profile-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--dc-color-accent) 0 var(--dc-xp-progress), var(--dc-border) var(--dc-xp-progress) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}

.dc-profile-ring span {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.dc-profile-ring-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.dc-profile-ring-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.dc-profile-ring-sub {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.dc-profile-score-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 var(--spacing-3xl);
  border-left: 1px solid var(--dc-border);
}

.dc-profile-score-value {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dc-profile-score-label {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Sections: featured deck hero, showcase reel */

.dc-profile-section-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
}

.dc-profile-section .deck-card-creator {
  display: none;
}

.dc-profile-section > .dc-button {
  margin-top: var(--spacing-sm);
}

.deck-card.dc-profile-hero .deck-card-content {
  flex-direction: row;
  gap: var(--spacing-4xl);
  padding: var(--spacing-4xl);
}

.dc-profile-hero-art {
  flex: 0 0 300px;
  align-self: center;
  aspect-ratio: 488 / 680;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-card);
}

.dc-profile-hero-art img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.deck-card.dc-profile-hero .deck-card-details {
  justify-content: center;
  gap: 10px;
}

.deck-card.dc-profile-hero .card-title {
  max-width: calc(100% - 120px);
  font-size: var(--font-size-xxxl);
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: normal;
}

.deck-card.dc-profile-hero .commander-name {
  font-size: var(--font-size-md);
}

.deck-card.dc-profile-hero .deck-card-overview {
  max-width: 62ch;
  -webkit-line-clamp: 5;
}

.deck-card.dc-profile-hero.is-expanded .deck-card-overview {
  -webkit-line-clamp: unset;
}

/* Showcase: desktop = the My Decks grid (.dc-deck-grid sits on the same
   element); mobile = a full-bleed horizontal reel. The reel uses the
   .dc-card-tile-grid--reel bleed math so it scrolls to the screen edge. */

@media (max-width: 767px) {
  /* Doubled class: .dc-deck-grid (display: grid) sits later in this file */

  .dc-deck-grid.dc-profile-reel {
    --dc-reel-inset-start: max(var(--spacing-sm), env(safe-area-inset-left));
    --dc-reel-inset-end: max(var(--spacing-sm), env(safe-area-inset-right));
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50% + var(--dc-reel-inset-start)) calc(50vw - 50% + var(--dc-reel-inset-end));
    scroll-padding-inline: calc(50vw - 50% + var(--dc-reel-inset-start)) calc(50vw - 50% + var(--dc-reel-inset-end));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dc-profile-reel::-webkit-scrollbar {
    display: none;
  }

  .dc-profile-reel > .deck-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}

.dc-profile-card-remove {
  margin-left: auto;
}

.dc-profile-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-base);
  min-height: 160px;
  padding: var(--spacing-base);
  border: 1px dashed var(--dc-border-hover);
  border-radius: var(--dc-radius-1);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
}

/* Own profile: jump bar + bento panels */

.dc-profile-jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-base);
}

.dc-profile-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

.dc-profile-b2 {
  grid-column: span 2;
}

.dc-profile-b3 {
  grid-column: span 3;
}

.dc-profile-bento--single {
  grid-template-columns: minmax(0, 1fr);
}

.dc-profile-bento--single > .dc-card {
  grid-column: auto;
}

/* Panels are .dc-card. This modifier spreads a tall panel's content. */

.dc-profile-panel {
  justify-content: space-between;
  min-height: 220px;
}

.dc-profile-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.dc-profile-panel-title {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.dc-profile-panel-title svg,
.dc-profile-panel-icon svg {
  width: 16px;
  height: 16px;
  color: var(--dc-color-text-muted);
  fill: currentColor;
}

.dc-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.dc-profile-actions > .hidden {
  display: none;
}

.dc-profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-base);
}

.dc-profile-fact-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.dc-profile-rows {
  display: flex;
  flex-direction: column;
}

.dc-profile-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--dc-border);
  font-size: var(--font-size-base);
}

.dc-profile-row:last-child {
  border-bottom: 0;
}

.dc-profile-row-name {
  font-weight: var(--font-weight-medium);
}

.dc-profile-row-end {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-left: auto;
}

.dc-profile-row-end.hidden {
  display: none;
}

.dc-profile-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-base);
  padding: 14px 0;
  border-bottom: 1px solid var(--dc-border);
}

.dc-profile-setting:first-child {
  padding-top: 0;
}

.dc-profile-setting:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.dc-profile-setting-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}

.dc-profile-setting-note {
  margin: 2px 0 0;
}

.dc-profile-control {
  width: 160px;
  flex-shrink: 0;
}

.dc-profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dc-profile-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
}

.dc-profile-field-label {
  width: 96px;
  flex-shrink: 0;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.dc-profile-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.dc-profile-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-base);
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--dc-color-danger) 20%, transparent);
  border-radius: var(--dc-radius-2);
  background: color-mix(in srgb, var(--dc-color-danger) 7%, transparent);
}

/* Activity timeline */

.dc-profile-timeline {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dc-profile-timeline > .dc-hint {
  padding: 6px 0;
}

.dc-profile-tl {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 6px 0;
}

.dc-profile-tl::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dc-border);
}

.dc-profile-tl:first-child::before {
  top: 14px;
}

.dc-profile-tl:last-child::before {
  bottom: auto;
  height: 14px;
}

.dc-profile-tl-dot {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin: 7px auto 0;
  border-radius: 50%;
  background: var(--dc-color-text-subtle);
  box-shadow: 0 0 0 3px var(--dc-color-background);
}

.dc-profile-timeline--ledger .dc-profile-tl-dot {
  box-shadow: 0 0 0 3px var(--dc-layer-float);
}

.dc-profile-tl-dot.is-accent {
  background: var(--dc-color-accent);
}

.dc-profile-tl-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.dc-profile-tl-xp,
.dc-profile-tl-sub {
  color: var(--dc-color-text-muted);
}

.dc-profile-tl-sub {
  font-size: var(--font-size-sm);
}

.dc-profile-tl-date {
  padding-top: 2px;
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Followers / following modal list */

.dc-profile-user-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dc-profile-user-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-xs);
  border-bottom: 1px solid var(--dc-border);
  color: var(--dc-color-text);
  cursor: pointer;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-profile-user-row:last-child {
  border-bottom: 0;
}

.dc-profile-user-row:hover {
  background: var(--dc-layer-raised);
}

.dc-profile-user-row-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dc-border);
  border-radius: 50%;
  background: var(--dc-layer-raised);
}

.dc-profile-user-row-avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.dc-profile-user-row-avatar-placeholder {
  width: 60%;
  height: 60%;
  color: var(--dc-color-text-subtle);
}

.dc-profile-user-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.dc-profile-user-row-badges {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacing-xs);
}

.dc-profile-user-row-action {
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .dc-profile-b2 {
    grid-column: span 3;
  }

  .dc-profile-b3 {
    grid-column: span 6;
  }
}

@media (max-width: 767px) {
  .dc-profile-stage {
    min-height: 320px;
  }

  .dc-profile-stage-content,
  .dc-profile-stage-id {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-base);
  }

  .dc-profile-avatar {
    width: 96px;
    height: 96px;
  }

  .dc-profile-username {
    font-size: var(--font-size-xxl);
  }

  .dc-profile-stage-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .dc-profile-score {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-base) 0;
    overflow: visible;
  }

  .dc-profile-score-level {
    grid-column: 1 / -1;
    padding: 0 0 var(--spacing-base);
    border-bottom: 1px solid var(--dc-border);
  }

  .dc-profile-score-item {
    padding: 0 var(--spacing-base);
  }

  .dc-profile-score-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .deck-card.dc-profile-hero .deck-card-content {
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
  }

  .dc-profile-hero-art {
    flex-basis: auto;
    width: 100%;
    max-width: 240px;
  }

  .deck-card.dc-profile-hero .card-title {
    max-width: 100%;
    font-size: var(--font-size-xl);
  }

  .dc-profile-b2,
  .dc-profile-b3 {
    grid-column: span 6;
  }

  .dc-profile-field {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xxs);
  }

  .dc-profile-field-label {
    width: auto;
  }
}

/* ==========================================
   DECK WORKSPACE (My Decks + Bookmarks)
   ========================================== */

.dc-deck-workspace-inner {
  display: block;
}

.dc-deck-folders-section {
  margin-bottom: var(--spacing-3xl);
}

.dc-deck-folders-section.is-hidden,
.dc-deck-grid-section.is-hidden,
.dc-section-header.is-hidden {
  display: none;
}

.dc-folder-tile-subtext {
  display: none;
}

.dc-deck-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .dc-deck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dc-deck-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dc-deck-grid-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  text-align: center;
}

/* ==========================================
   SEARCH RESULT COMPONENTS (search + precons)
   ========================================== */

.search-container-base.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

.search-container-base.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.results-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-base);
  width: 100%;
  margin-bottom: var(--spacing-base);
}

.results-filter-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.results-info-panel {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

@media (max-width: 768px) {
  .results-controls-row {
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .results-filter-controls {
    justify-content: flex-end;
  }

  .results-info-panel {
    justify-content: flex-start;
    text-align: left;
    min-width: 0;
  }
}

#resultsInfo {
  color: var(--dc-color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  font-style: italic;
  line-height: 1.5;
}

#resultsInfo .filter-item {
  color: white;
  font-weight: var(--font-weight-semibold);
}

.filter-group {
  position: relative;
}

.card-image {
  box-shadow: var(--dc-shadow-base);
}

.legality-badge {
  padding: 4px 8px;
  border-radius: var(--dc-radius-3);
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.legality-legal {
  background-color: rgba(52, 211, 153, 0.2);
  color: rgb(52, 211, 153);
  border: 1px solid rgba(52, 211, 153, 0.4);
}

.legality-not-legal {
  background-color: rgba(156, 163, 175, 0.2);
  color: rgb(156, 163, 175);
  border: 1px solid rgba(156, 163, 175, 0.4);
}

.legality-banned {
  background-color: rgba(239, 68, 68, 0.2);
  color: rgb(239, 68, 68);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.legality-restricted {
  background-color: rgba(245, 158, 11, 0.2);
  color: rgb(245, 158, 11);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.oracle-text-paragraph {
  margin-bottom: var(--spacing-sm);
  position: relative;
}

.oracle-text-paragraph::before {
  content: '>';
  position: absolute;
  left: calc(-1 * var(--spacing-lg));
  color: var(--terminal-active);
}

.deck-card .card-metadata-item span {
  white-space: nowrap;
}

.dc-checkbox-color {
  display: none;
}

.color-filter-pill {
  --mana-glow-color: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-radius-pill);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.3s ease;
}

.color-filter-pill:hover {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-raised);
}

.color-filter-pill.is-active {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-raised-hover);
  box-shadow: 0 0 12px var(--mana-glow-color);
}

.mana-filter-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  opacity: 0.45;
  filter: saturate(60%) drop-shadow(0 0 0 var(--mana-glow-color));
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.color-filter-pill:hover .mana-filter-icon {
  opacity: 0.85;
  filter: saturate(110%) drop-shadow(0 0 2px var(--mana-glow-color));
  transform: translateY(-1px);
}

.color-filter-pill.is-active .mana-filter-icon {
  opacity: 1;
  filter: saturate(120%) drop-shadow(0 0 8px var(--mana-glow-color));
  transform: translateY(-1px);
}

.color-filter-pill[data-color="W"] {
  --mana-glow-color: rgba(248, 239, 186, 0.85);
}

.color-filter-pill[data-color="U"] {
  --mana-glow-color: rgba(129, 197, 255, 0.8);
}

.color-filter-pill[data-color="B"] {
  --mana-glow-color: rgba(171, 122, 255, 0.95);
}

.color-filter-pill[data-color="R"] {
  --mana-glow-color: rgba(255, 145, 125, 0.85);
}

.color-filter-pill[data-color="G"] {
  --mana-glow-color: rgba(125, 233, 158, 0.85);
}

.color-filter-pill[data-color="C"] {
  --mana-glow-color: rgba(240, 240, 255, 0.9);
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ==========================================
   CARD TILE + GRID
   One contract for every single-card grid (Collection, public binder,
   search results, home carousels, printing pickers, Explore Cards,
   tokens, camera-scan printings). A tile = frame > image > info rows.
   ========================================== */

.dc-card-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: var(--spacing-card-grid-sm);
  flex: 1;
  min-height: 0;
}

@media (min-width: 768px) {
  .dc-card-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  }
}

/* Grid that scrolls inside a panel or modal */

.dc-card-tile-grid--scroll {
  overflow-y: auto;
  align-content: start;
  grid-auto-rows: max-content;
}

/* Mobile carousel: full-bleed row with snap points; a normal grid from 768px */

@media (max-width: 767px) {
  .dc-card-tile-grid.dc-card-tile-grid--reel {
    --dc-reel-inset-start: max(var(--spacing-sm), env(safe-area-inset-left));
    --dc-reel-inset-end: max(var(--spacing-sm), env(safe-area-inset-right));
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-base);
    flex: none;
    min-height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: calc(50% - 50vw);
    padding: 6px calc(50vw - 50% + var(--dc-reel-inset-end)) 14px calc(50vw - 50% + var(--dc-reel-inset-start));
    scroll-padding-inline: calc(50vw - 50% + var(--dc-reel-inset-start)) calc(50vw - 50% + var(--dc-reel-inset-end));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dc-card-tile-grid--reel::-webkit-scrollbar {
    display: none;
  }

  .dc-card-tile-grid--reel > .dc-card-tile {
    flex: 0 0 150px;
    scroll-snap-align: start;
    content-visibility: visible;
    contain-intrinsic-size: none;
  }
}

.dc-card-tile {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: var(--dc-radius-card);
  background: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  transition:
    border-color var(--dc-duration-fast) var(--dc-easing-standard),
    background-color var(--dc-duration-fast) var(--dc-easing-standard),
    box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
  color: var(--dc-color-text);
  text-align: left;
}

/* Pickers render the tile as a button */

button.dc-card-tile {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Hover = raised step: lighter wash, brighter rim */

.dc-card-tile:hover {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-raised-hover);
}

.dc-card-tile:focus-visible {
  outline: none;
  border-color: var(--dc-border-focus);
  box-shadow: var(--dc-shadow-focus);
}

.dc-card-tile.is-selected,
.dc-card-tile.is-selected:hover {
  border-color: var(--dc-color-accent);
  background: var(--dc-color-accent-subtle);
}

.dc-card-tile-image {
  width: auto;
  display: block;
  margin: var(--spacing-xxs) var(--spacing-xxs) 0px var(--spacing-xxs);
  aspect-ratio: 488 / 680;
  cursor: pointer;
  transition: border-color var(--dc-duration-fast) var(--dc-easing-standard), box-shadow var(--dc-duration-fast) var(--dc-easing-standard), transform 0.3s ease-out;
}

.dc-card-tile-image:focus-visible {
  outline: none;
  border-color: var(--dc-border-focus);
  box-shadow: var(--dc-shadow-focus);
}

.dc-card-tile:hover .collection-grid-select-toggle,
.dc-card-tile:focus-visible .collection-grid-select-toggle,
.collection-grid-select-toggle:hover,
.dc-card-tile.is-selected .collection-grid-select-toggle {
  opacity: 1;
}

.dc-card-tile-image img {
  position: relative;
}

/* Fills the image box while no art is available */

.dc-card-tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-base);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
  border-radius: var(--dc-radius-card);
}

.dc-card-tile-qty {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-color-background);
  border: 1px solid var(--dc-border);
  color: var(--dc-color-text);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.dc-card-tile-qty.is-proxy {
  color: rgb(110, 220, 255);
  border-color: rgba(0, 192, 255, 0.45);
}

.dc-card-tile-qty.is-split .collection-grid-badge-divider {
  font-size: 8px;
  line-height: 1;
  color: var(--dc-color-text-subtle);
}

.dc-card-tile-qty.is-split .collection-grid-badge-proxy {
  color: rgb(110, 220, 255);
}

/* Info slots under the art. Fixed order: title > detail > value > tags > meta > actions.
   Every slot is optional and centered. Built by DC3.buildCardTileInfo(). */

.dc-card-tile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
}

/* 1. Title: what the card is */

.dc-card-tile-title {
  width: 100%;
  min-width: 0;
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2. Detail: which one it is (set line, rank). Optional icon left, aside right */

.dc-card-tile-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
  color: var(--dc-color-text-muted);
}

.dc-card-tile-detail-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  filter: invert(1);
  opacity: 0.5;
}

.dc-card-tile-detail-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-card-tile-detail-aside {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 3. Value: a plain figure left, a colored change signal right */

.dc-card-tile-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

.dc-card-tile-figure {
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-text);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.dc-card-tile-delta {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.dc-card-tile-delta.positive {
  color: var(--dc-color-accent);
}

.dc-card-tile-delta.negative {
  color: var(--dc-color-danger);
}

.dc-card-tile-delta.neutral {
  color: var(--dc-color-text-subtle);
}

/* 4. Tags: status chips (legality, owned, category) */

.dc-card-tile-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
}

.dc-card-tile-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-3);
  background: var(--dc-layer-raised);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--dc-color-text-muted);
  white-space: nowrap;
}

.dc-card-tile-tag--accent {
  border-color: var(--dc-color-accent-border);
  background: var(--dc-color-accent-subtle);
  color: var(--dc-color-accent);
}

.dc-card-tile-tag--danger {
  border-color: color-mix(in srgb, var(--dc-color-danger) 30%, transparent);
  background: color-mix(in srgb, var(--dc-color-danger) 10%, transparent);
  color: var(--dc-color-danger);
}

/* 5. Meta: one glance of anything else, at most two lines */

.dc-card-tile-meta {
  max-width: 100%;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--dc-color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* 6. Actions: buttons share the row; a .dc-button grows, icon buttons stay square */

.dc-card-tile-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}

.dc-card-tile-actions > .dc-button {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 10px;
  font-size: var(--font-size-sm);
}

/* ==========================================
   TABLE COMPONENTS
   ========================================== */

/* Tables. Same contract as the site (dc-design-system.css). 14px text, 10px 16px cells, hairline rows,
   muted header, hover wash. Wrap a table in .dc-table-wrap so it scrolls
   sideways instead of breaking the page. */

.dc-table-wrap {
  position: relative;
  width: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dc-border-hover) transparent;
}

.dc-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dc-table-wrap::-webkit-scrollbar-track,
.dc-table-wrap::-webkit-scrollbar-corner {
  background: transparent;
}

.dc-table-wrap::-webkit-scrollbar-thumb {
  border-radius: var(--dc-radius-3);
  background: var(--dc-border-hover);
}

.dc-table-wrap--framed {
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-1);
  background: var(--dc-layer-base);
  box-shadow: var(--dc-shadow-base);
}

.dc-table {
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-compact);
  line-height: 1.625;
}

.dc-table th,
.dc-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--dc-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.dc-table th {
  color: var(--dc-color-text-muted);
  font-weight: var(--font-weight-medium);
}

.dc-table td strong {
  color: var(--dc-color-text);
  font-weight: var(--font-weight-medium);
}

.dc-table td small,
.dc-table-sub {
  display: block;
  margin-top: 2px;
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.dc-table-unit {
  margin-left: 4px;
  color: var(--dc-color-text-subtle);
  font-size: var(--font-size-sm);
}

.dc-table td a:not([class]) {
  color: var(--dc-color-text);
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  text-decoration-color: var(--dc-border-hover);
  text-underline-offset: 3px;
}

.dc-table td a:not([class]):hover {
  text-decoration-color: currentColor;
}

.dc-table tbody tr {
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-table tbody tr:hover {
  background: var(--dc-layer-raised);
}

.dc-table tbody tr.is-selected {
  background: var(--dc-color-accent-subtle);
}

.dc-table tbody tr.is-muted td {
  color: var(--dc-color-text-subtle);
}

.dc-table tbody tr:last-child > td {
  border-bottom: 0;
}

.dc-table tfoot td {
  border-top: 1px solid var(--dc-border);
  border-bottom: 0;
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
  font-weight: var(--font-weight-medium);
}

.dc-table caption,
.dc-table-caption {
  margin-top: var(--spacing-base);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-compact);
  text-align: left;
}

.dc-table-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dc-table-end {
  text-align: right;
}

/* The one column that takes the free width; the other columns hug their content. */

.dc-table-fill {
  width: 100%;
}

.dc-table tbody tr[role="button"] {
  cursor: pointer;
}

.dc-table-empty {
  padding: 38px 16px;
  color: var(--dc-color-text-subtle);
  text-align: center;
  white-space: normal;
}

/* Density */

.dc-table--compact th,
.dc-table--compact td {
  padding: 6px 10px;
}

.dc-table--expanded th,
.dc-table--expanded td {
  padding: 14px 16px;
}

/* Cells that may wrap (long text, lists) */

.dc-table--wrap th,
.dc-table--wrap td,
.dc-table td.dc-table-wrap-cell {
  white-space: normal;
  overflow-wrap: break-word;
}

.dc-table--fixed {
  table-layout: fixed;
}

.dc-table--sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--dc-color-background);
}

.hover\:border-orange-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(239 107 69 / var(--tw-border-opacity));
}

.hover\:border-orange-950:hover {
  --tw-border-opacity: 1;
  border-color: rgb(76 18 8 / var(--tw-border-opacity));
}

.hover\:bg-orange-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(186 63 34 / var(--tw-bg-opacity));
}

.hover\:text-orange-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 107 69 / var(--tw-text-opacity));
}

.hover\:text-orange-950:hover {
  --tw-text-opacity: 1;
  color: rgb(76 18 8 / var(--tw-text-opacity));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }
}